feat(): Add docs components. (#23)

* feat(): Add docs components.

* feat(): More docs components.

* Fix left wrapper.

package.json

@@ -14,7 +14,13 @@
     "build": "rm -rf ./dist && rollup -c"
   },
   "release": {
-    "branches":  ["main", { "name": "alpha", "prerelease": true}]
+    "branches": [
+      "main",
+      {
+        "name": "alpha",
+        "prerelease": true
+      }
+    ]
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -112,11 +118,12 @@
     "lucide-react": "^0.298.0",
     "next-themes": "^0.2.1",
     "react-day-picker": "^8.10.0",
+    "react-icons": "^5.3.0",
     "react-resizable-panels": "^1.0.5",
     "sonner": "^1.3.1",
     "tailwind-merge": "^2.1.0",
     "vaul": "^0.8.0",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^3.9.0",

src/custom/docs/QuantinuumLogo.tsx

@@ -0,0 +1,50 @@
+import { ComponentProps } from "react"
+import { cn } from "src"
+
+export const QuantinuumLogo = (props: ComponentProps<'svg'>) => {
+    return (
+      <svg
+        version="1.1"
+        id="Layer_1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 204.13 37.91"
+        xmlSpace="preserve"
+        width={140}
+        height={50}
+        fill="currentColor"
+        {...props}
+         className={cn(`text-foreground`, props.className)}
+      >
+        <g>
+          <g>
+            <g>
+              <g>
+                <path
+                  className="st1"
+                  d="M35.06,18.99c0,2.06-0.37,4.06-1.1,5.95h-2.32c0.6-13.14-16.42-18.87-23.92-8.11      C6.5,12.76,7.83,8.17,10.96,5.38c0,0,0,0,0,0c1.14-1.04,2.5-1.84,3.95-2.33C24.93,0.12,35.22,8.73,35.06,18.99z"
+                />
+              </g>
+              <g>
+                <path
+                  className="st1"
+                  d="M35.06,26.83v8.7H18.52c-0.21,0-0.4,0-0.59-0.02c-4.29-0.15-8.3-1.94-11.29-5.03      c-6.48-6.3-5.98-17.92,0.71-23.67C5,10.54,4.75,15.46,6.69,19.4c2.15,4.47,6.82,7.43,11.83,7.42      C18.52,26.83,35.06,26.83,35.06,26.83z"
+                />
+              </g>
+            </g>
+          </g>
+          <g>
+            <g>
+              <path
+                className="st1"
+                d="M114.52,16.51h4.97v8.5h1.96v-8.5h4.97v-1.96h-11.9V16.51z M108.88,22.64l-8.21-8.08h-2.25v10.46h1.96v-8.03     l7.92,8.03l2.55,0V14.55h-1.96V22.64z M86.78,14.55l-5.34,10.46h2.19l0.79-1.57h7.34l0.79,1.57h2.2l-5.34-10.46H86.78z      M85.42,21.49l2.67-5.21l2.67,5.21H85.42z M61.7,23.44h2.15l0.04-0.12c0.53-1.46,0.54-2.96,0.02-4.46     c-0.78-2.3-2.81-4.05-5.18-4.47c-0.4-0.07-0.81-0.11-1.23-0.11c-1.81,0-3.51,0.7-4.79,1.98c-1.28,1.28-1.98,2.98-1.98,4.8     c0,3.67,2.98,6.7,6.65,6.77l0.3,0.01l6.43,0h0.17v-1.96h-6.8c-1.95,0-3.72-1.16-4.41-2.88c-0.64-1.59-0.49-3.28,0.44-4.64     c0.9-1.33,2.39-2.13,3.99-2.13c0.35,0,0.7,0.04,1.07,0.11c1.76,0.38,3.18,1.77,3.62,3.55c0.28,1.13,0.15,2.27-0.36,3.28     L61.7,23.44z M77.22,19.61c0,2.03-1.65,3.68-3.68,3.68c-2.03,0-3.68-1.65-3.68-3.68v-5.06h-1.96v5.06c0,3.11,2.53,5.64,5.63,5.64     c3.11,0,5.63-2.53,5.63-5.64v-5.06h-1.96V19.61z M198.54,14.55l-4.91,8.94l-4.96-8.94h-3.03v10.46h1.96v-8.36l4.63,8.36h2.8     l4.57-8.32v8.32h1.96V14.55H198.54z M179.41,19.61c0,2.03-1.65,3.68-3.68,3.68c-2.03,0-3.68-1.65-3.68-3.68v-5.06h-1.96v5.06     c0,3.11,2.53,5.64,5.64,5.64c3.11,0,5.63-2.53,5.63-5.64v-5.06h-1.96V19.61z M148.25,22.64l-8.21-8.08h-2.25v10.46h1.96v-8.03     l7.92,8.03l2.55,0V14.55h-1.96V22.64z M163.9,19.61c0,2.03-1.65,3.68-3.68,3.68c-2.03,0-3.68-1.65-3.68-3.68v-5.06h-1.96v5.06     c0,3.11,2.53,5.64,5.63,5.64c3.11,0,5.64-2.53,5.64-5.64v-5.06h-1.96V19.61z M130.63,25.01h1.96V14.55h-1.96V25.01z"
+              />
+            </g>
+          </g>
+        </g>
+        <script id="bw-fido2-page-script" />
+      </svg>
+    )
+  }

src/custom/docs/components/footer/index.tsx

@@ -0,0 +1,51 @@
+export const Footer = (props: { logo: JSX.Element, subtitle: string, columns: {
+    title: string;
+    items: {
+        name: string;
+        href: string;
+    }[];
+}[] }) => {
+  return (
+    <footer className="text-muted-foreground flex w-full flex-col justify-between md:items-start lg:flex-row ">
+      <div className="mb-12 md:mb-0">
+        <div className="-mt-4">
+          <a href="https://www.quantinuum.com/" target='_blank' className='hover:opacity-75 transition'>
+          {props.logo}
+          </a>
+        </div>
+        <p className="max-w-[24rem] text-xs leading-5">
+          Copyright © {new Date().getFullYear()} Quantinuum Inc. All rights reserved.{' '}
+          <br /> {props.subtitle}
+        </p>
+        <div className='flex items-center gap-2 mt-2'>
+        <a href="https://www.quantinuum.com/terms-conditions" target="_blank" className='font-medium text-xs tracking-tight text-blue-600 dark:text-blue-300'>Terms and Conditions</a> <div>/</div>  <a target="_blank" href="https://www.quantinuum.com/privacy-statement" className='font-medium text-xs tracking-tight text-blue-600 dark:text-blue-300'>Privacy Policy</a><div>/</div>  <a target="_blank" href="https://www.quantinuum.com/cookie-notice" className='font-medium text-xs tracking-tight text-blue-600 dark:text-blue-300'>Cookie Notice</a>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 gap-16 md:grid-cols-3 md:gap-24">
+        {props.columns.map((col) => {
+          return (
+            <div key={col.title} className="flex flex-col md:items-end">
+              <span className="text-foreground text-left text-[0.675rem] font-semibold uppercase tracking-wide md:text-right">
+                {col.title}
+              </span>
+              <ul className="mt-3 flex flex-col gap-2 md:text-right">
+                {col.items.map((item) => {
+                  return (
+                    <li key={item.name}>
+                      <a
+                        className="text-muted-foreground text-[0.85rem] font-medium"
+                        href={item.href}
+                      >
+                        {item.name}
+                      </a>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          )
+        })}
+      </div>
+    </footer>
+  )
+}

src/custom/docs/components/header/CodeCopy.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+
+import {Button} from 'src'
+import { Check, Copy } from "lucide-react"
+export const CodeCopy = (props: {textToCopy: string}) => {
+
+    const [copied, setHasCopied] = React.useState(false)
+
+    return <div className="dark:text-foreground text-background w-full flex  items-center justify-center self-start whitespace-nowrap rounded bg-gradient-to-r from-zinc-600 to-slate-600  py-0.5 pl-4 text-center text-sm font-semibold  dark:from-zinc-600 dark:to-slate-600">
+        <code className="font-mono">{props.textToCopy}</code>
+
+        <Button
+        variant="ghost"
+        size="icon"
+        className={`${copied ? ' hover:bg-transparent' : 'hover:bg-background/50 hover:text-foreground/75'} ml-1`}
+        onClick={() => {
+          window.navigator.clipboard.writeText(props.textToCopy)
+          setHasCopied(true)
+          setTimeout(() => {
+            setHasCopied(false)
+          }, 2500)
+        }}
+      >
+        {copied ? (
+          <Check className="text-background h-5 w-5"></Check>
+        ) : (
+          <Copy className="aspect-square h-4 w-4"></Copy>
+        )}
+      </Button>
+      </div>
+}

src/custom/docs/components/header/index.tsx

@@ -0,0 +1,75 @@
+
+import { cn } from 'src'
+import React from 'react'
+import { CodeCopy } from './CodeCopy'
+
+const Title = React.forwardRef<
+HTMLHeadingElement,
+React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+return (
+  <h1
+    className={cn('text-6xl font-semibold tracking-tighter', className)}
+    ref={ref}
+  >
+    {props.children}
+  </h1>
+)
+})
+Title.displayName = 'Title'
+
+const Subtitle = React.forwardRef<
+HTMLHeadingElement,
+React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+return (
+  <h2
+    className={cn('text-muted-foreground mt-5 mb-4 text-2xl tracking-tighter', className)}
+    ref={ref}
+  >
+    {props.children}
+  </h2>
+)
+})
+Subtitle.displayName = 'Subtitle'
+
+const Left = React.forwardRef<
+HTMLDivElement,
+React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+
+  return<div className="relative mx-auto flex flex-grow flex-wrap flex-col py-4">
+   <div className="mb-4 mt-0 md:mt-6 flex flex-col" ref={ref}>{props.children}</div></div>
+
+})
+Left.displayName = 'Left'
+
+const Right = React.forwardRef<
+HTMLDivElement,
+React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+
+  return <div className="mt-0 mr-10 hidden lg:flex md:justify-end" ref={ref}>{props.children}</div>
+
+})
+Right.displayName = 'Right'
+
+
+
+
+// mt-4 flex flex-col max-w-[32rem] gap-3
+
+const Wrapper  = React.forwardRef<
+HTMLDivElement,
+React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+  return  <div className="flex w-full my-4" ref={ref}>
+      {props.children}</div>
+
+})
+Wrapper.displayName = 'Wrapper'
+
+const LeftTitle = Title
+const LeftSubtitle = Subtitle;
+
+export {Wrapper, Right, Left, LeftTitle, LeftSubtitle, CodeCopy}

src/custom/docs/components/navmenu/ListItem.tsx

@@ -0,0 +1,28 @@
+
+import { NavigationMenuLink, cn } from 'src'
+import React from 'react'
+export const ListItem = React.forwardRef<
+  React.ElementRef<'a'>,
+  React.ComponentPropsWithoutRef<'a'>
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          ref={ref}
+          className={cn(
+            'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',
+            className
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  )
+})
+ListItem.displayName = 'ListItem'

src/custom/docs/components/navmenu/MobileMenu.tsx

@@ -0,0 +1,22 @@
+
+
+import {
+    Button,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+  } from "src"
+import { MenuIcon } from "lucide-react"
+import { NavConfig  } from "./schema"
+
+  export const MobileMenu = (props: Pick<NavConfig, 'navTextLinks'>) => {
+    return <DropdownMenu>
+    <DropdownMenuTrigger asChild><Button variant='outline' className="w-8 p-0 h-8"> <MenuIcon/></Button></DropdownMenuTrigger>
+    <DropdownMenuContent>
+        {props.navTextLinks.map(link => {
+            return   <DropdownMenuItem asChild key={link.title}><a href={link.href}>{link.title}</a></DropdownMenuItem>
+        })}
+    </DropdownMenuContent>
+  </DropdownMenu>
+  }

src/custom/docs/components/navmenu/ModeSelector.tsx

@@ -0,0 +1,53 @@
+
+import { Check, MoonIcon, SunIcon } from 'lucide-react'
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+
+  useTheme,
+} from 'src'
+
+export const ModeSelector = () => {
+  const theme = useTheme()
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          className="aspect-square w-9 px-0"
+          aria-label="theme-selector"
+        >
+          <SunIcon className="h-[1.15rem] w-[1.15rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.15rem] w-[1.15rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <div className="text-muted-foreground mb-1 ml-2 mt-1  text-xs">
+          Select Theme
+        </div>
+        <DropdownMenuItem onClick={() => theme.setMode('light')}>
+          Light
+          {theme.theme.mode === 'light' ? (
+            <Check className="ml-auto aspect-square w-4"></Check>
+          ) : null}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => theme.setMode('dark')}>
+          Dark
+          {theme.theme.mode === 'dark' ? (
+            <Check className="ml-auto aspect-square w-4"></Check>
+          ) : null}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => theme.setMode('system')}>
+          System
+          {theme.theme.mode === 'system' ? (
+            <Check className="ml-auto aspect-square w-4"></Check>
+          ) : null}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}