{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "orchid", "homepage": "https://orchid.ai", "items": [ { "name": "ai-code-block", "title": "Ai Code Block", "dependencies": [ "lucide-react@0.546.0", "react-syntax-highlighter@15.6.6" ], "devDependencies": [ "@types/react-syntax-highlighter@15.5.13" ], "registryDependencies": [ "https://ui.orchid.ai/r/orchid-foundation.json", "https://ui.orchid.ai/r/orchid-theme.json", "https://ui.orchid.ai/r/ui-button.json" ], "files": [ { "path": "registry/ui/orchid/ai-elements/code-block.tsx", "content": "\"use client\";\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport type { ComponentProps, HTMLAttributes, ReactNode } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { createContext, useContext, useState } from 'react';\nimport { CheckIcon, CopyIcon } from 'lucide-react';\nimport { Button } from \"../ui/button\";\nimport { cn } from \"../lib/ui-utils\";\ntype CodeBlockContextType = {\n code: string;\n};\nconst CodeBlockContext = createContext({\n code: '',\n});\nconst SYNTAX_HIGHLIGHTER_CODE_TAG_PROPS = {\n className: 'font-mono text-sm',\n} as const;\nconst SYNTAX_HIGHLIGHTER_CUSTOM_STYLE = {\n margin: 0,\n padding: '1rem',\n fontSize: '0.875rem',\n background: 'hsl(var(--background))',\n color: 'hsl(var(--foreground))',\n} as const;\nconst SYNTAX_HIGHLIGHTER_LINE_NUMBER_STYLE = {\n color: 'hsl(var(--muted-foreground))',\n paddingRight: '1rem',\n minWidth: '2.5rem',\n} as const;\nconst SYNTAX_THEMES = [\n { id: 'light', className: 'overflow-hidden dark:hidden', style: oneLight },\n { id: 'dark', className: 'hidden overflow-hidden dark:block', style: oneDark },\n] as const;\nexport type CodeBlockProps = HTMLAttributes & {\n code: string;\n language: string;\n showLineNumbers?: boolean;\n children?: ReactNode;\n};\nexport const CodeBlock = ({ code, language, showLineNumbers = false, className, children, ...props }: CodeBlockProps) => (\n
\n
\n {SYNTAX_THEMES.map((theme) => (\n {code}\n ))}\n {children && (
{children}
)}\n
\n
\n );\nexport type CodeBlockCopyButtonProps = ComponentProps & {\n onCopy?: () => void;\n onError?: (error: Error) => void;\n timeout?: number;\n};\nexport const CodeBlockCopyButton = ({ onCopy, onError, timeout = 2000, children, className, ...props }: CodeBlockCopyButtonProps) => {\n const [isCopied, setIsCopied] = useState(false);\n const { code } = useContext(CodeBlockContext);\n const copyToClipboard = async () => {\n if (typeof window === 'undefined' || !navigator.clipboard.writeText) {\n onError?.(new Error('Clipboard API not available'));\n return;\n }\n try {\n await navigator.clipboard.writeText(code);\n setIsCopied(true);\n onCopy?.();\n setTimeout(() => setIsCopied(false), timeout);\n }\n catch (error) {\n onError?.(error as Error);\n }\n };\n const Icon = isCopied ? CheckIcon : CopyIcon;\n return ();\n};\n", "type": "registry:ui", "target": "@ui/orchid/ai-elements/code-block.tsx" } ], "type": "registry:ui" }, { "name": "ai-conversation", "title": "Ai Conversation", "dependencies": [ "@heroicons/react@2.2.0", "use-stick-to-bottom@1.1.1" ], "devDependencies": [], "registryDependencies": [ "https://ui.orchid.ai/r/orchid-foundation.json", "https://ui.orchid.ai/r/orchid-theme.json", "https://ui.orchid.ai/r/z-button.json" ], "files": [ { "path": "registry/ui/orchid/ai-elements/conversation.tsx", "content": "\"use client\";\nimport { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';\nimport type Button from \"../spectrum/atoms/z-button/z-button\";\nimport ZButton from \"../spectrum/atoms/z-button/z-button\";\nimport { ArrowDownIcon } from '@heroicons/react/16/solid';\nimport type { ComponentProps } from 'react';\nimport { useCallback } from 'react';\nimport { cn } from \"../lib/ui-utils\";\nexport type ConversationProps = ComponentProps;\nexport const Conversation = ({ className, ...props }: ConversationProps) => ();\nexport type ConversationContentProps = ComponentProps;\nexport const ConversationContent = ({ className, ...props }: ConversationContentProps) => ();\nexport type ConversationEmptyStateProps = ComponentProps<'div'> & {\n title?: string;\n description?: string;\n icon?: React.ReactNode;\n};\nexport const ConversationEmptyState = ({ className, title = 'No messages yet', description = 'Start a conversation to see messages here', icon, children, ...props }: ConversationEmptyStateProps) => (
\n {children ?? (<>\n {icon &&
{icon}
}\n
\n

{title}

\n {description &&

{description}

}\n
\n )}\n
);\nexport type ConversationScrollButtonProps = ComponentProps;\nexport const ConversationScrollButton = ({ className, ...props }: ConversationScrollButtonProps) => {\n const { isAtBottom, scrollToBottom } = useStickToBottomContext();\n const handleScrollToBottom = useCallback(() => {\n scrollToBottom();\n }, [scrollToBottom]);\n return (!isAtBottom && ());\n};\n", "type": "registry:ui", "target": "@ui/orchid/ai-elements/conversation.tsx" } ], "type": "registry:ui" }, { "name": "ai-message", "title": "Ai Message", "dependencies": [ "ai@6.0.116" ], "devDependencies": [], "registryDependencies": [ "https://ui.orchid.ai/r/orchid-foundation.json", "https://ui.orchid.ai/r/orchid-theme.json" ], "files": [ { "path": "registry/ui/orchid/ai-elements/message.tsx", "content": "\"use client\";\nimport type { HTMLAttributes } from 'react';\nimport type { UIMessage } from 'ai';\nimport { cn } from \"../lib/ui-utils\";\nexport type MessageProps = HTMLAttributes & {\n from: UIMessage['role'];\n};\nexport const Message = ({ className, from, ...props }: MessageProps) => (
);\nexport type MessageContentProps = HTMLAttributes;\nexport const MessageContent = ({ children, className, ...props }: MessageContentProps) => (
\n {children}\n
);\n", "type": "registry:ui", "target": "@ui/orchid/ai-elements/message.tsx" } ], "type": "registry:ui" }, { "name": "ai-response", "title": "Ai Response", "dependencies": [ "lucide-react@0.546.0", "streamdown@2.5.0" ], "devDependencies": [], "registryDependencies": [ "https://ui.orchid.ai/r/orchid-foundation.json", "https://ui.orchid.ai/r/orchid-theme.json" ], "files": [ { "path": "registry/ui/orchid/ai-elements/response.tsx", "content": "\"use client\";\nimport { cn } from \"../lib/ui-utils\";\nimport { Check, Copy } from 'lucide-react';\nimport { memo, useState, type ComponentProps } from 'react';\nimport { Streamdown } from 'streamdown';\ntype ResponseProps = ComponentProps;\nconst TableCell = ({ children, ...props }: any) => {\n const [copied, setCopied] = useState(false);\n const handleCopy = async () => {\n if (typeof children === 'string') {\n await navigator.clipboard.writeText(children);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n };\n return (\n
\n {children}\n \n
\n );\n};\nconst defaultComponents = {\n table: ({ node, ...props }: any) => (
\n \n ),\n thead: ({ node, ...props }: any) => (),\n th: ({ node, ...props }: any) => (),\n td: TableCell,\n};\nexport const Response = memo(({ className, components, ...props }: ResponseProps) => (*:first-child]:mt-0 [&>*:last-child]:mb-0', className)} components={{ ...defaultComponents, ...components }} {...props}/>), (prevProps, nextProps) => prevProps.children === nextProps.children &&\n prevProps.mode === nextProps.mode &&\n prevProps.isAnimating === nextProps.isAnimating);\nResponse.displayName = 'Response';\n", "type": "registry:ui", "target": "@ui/orchid/ai-elements/response.tsx" } ], "css": { "@import \"streamdown/styles.css\"": {}, "@source inline(\"--- ---- --sd-animation --sd-delay --sd-duration --sd-easing --sdm-bg --sdm-c --sdm-fg --sdm-tbg --shiki-dark --shiki-dark-bg --streamdown-caret -mt-10 [&>*:first-child]:mt-0 [&>*:last-child]:after:align-baseline [&>*:last-child]:after:content-[var(--streamdown-caret)] [&>*:last-child]:after:inline [&>*:last-child]:mb-0 [&>p]:inline [&_svg]:h-auto [&_svg]:w-auto [&_thead]:sticky [&_thead]:top-0 [&_thead]:z-10 [counter-increment:line_0] [counter-reset:line] [li_&]:pl-6 a abap about absolute actionscript-3 ada add adoc an and angular-html angular-ts animate animate-spin animated annotation anonymous ao apl appearance-none applescript application ara area aria-label aria-modal as asm astro auto available awk b backdrop-blur-sm background-color bal base bat be beancount before:[counter-increment:line] before:content-[counter(line)] before:font-mono before:inline-block before:mr-4 before:select-none before:text-[13px] before:text-muted-foreground/50 before:text-right before:w-6 berry bg-[var(--sdm-tbg)] bg-background bg-background/50 bg-background/80 bg-background/90 bg-background/95 bg-black/10 bg-muted bg-muted/80 bg-primary bg-red-100 bg-red-50 bg-sidebar bg-sidebar/80 bib bicep blob block blockquote boolean border border-b-2 border-border border-collapse border-current border-l-4 border-muted-foreground/30 border-sidebar bottom-2 bottom-4 br break-all bs bsl button button! c cache cairo canvas cdc center char chart children children:typeof cjk clar className client clj closure-templates cls clsx cmake cmd co cob code code-block code-block-actions code-block-body code-block-copy-button code-block-download-button code-block-header coffee col color common-lisp components! conf config content content! contents context copy cpp cql cr create crossOrigin cs cshtml css csv cue current currentColor cursor-pointer d dark:bg-[var(--shiki-dark-bg,var(--sdm-tbg))] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))] dart data data-block data-footnote-backref data-footnotes data-incomplete data-language data-sd-animate data-streamdown dax default desktop details diagram dialog diff dir dir! disabled:cursor-not-allowed disabled:opacity-50 displayName div divide-border divide-y dm dn do dockerfile download dream-maker duration-150 duration-200 ease ease-out edge ee el element elm else emacs-lisp embed enable env erb erl es et evenodd ex export external f f03 f08 f18 f77 f90 f95 fadeIn feature file finally fish fixed flex flex-1 flex-col fnl fo font-medium font-mono font-semibold for fortran-fixed-form fortran-free-form found from fs fsl ft ftl fullscreen function gap-1 gap-2 gap-4 gd gdshader gi gif git-commit git-rebase gitcommit github-dark github-light gitrebase gleam glimmer-js glimmer-ts glsl go gql grab grabbing graphql groovy group group-hover:block group-hover:opacity-100 gs gts h-4 h-8 h-[46px] h-full h1 h2 h3 h4 h5 h6 hProperties hack haml harden hast-util-to-jsx-runtime hbs hcl he heading-1 heading-2 heading-3 heading-4 heading-5 heading-6 height height! hidden hjson hlsl horizontal-rule hover:bg-background hover:bg-muted hover:bg-muted/40 hover:bg-primary/90 hover:text-foreground hr href hs html html-derivative html-url-attributes http hx hxml hy image image-fallback image-wrapper image/png imba img import in index! inherit ini inline-block inline-code input inset-0 instanceof io isAnimating isIncomplete! isPrimary italic items-center jade java jinja jison jl jo jpeg jpg js json json5 jsonc jsonl jsonnet jssm jsx jt justify-center justify-end ke key keyCache keydown kql kt kts l language lastRenderCharCount lean left-2 left-4 length length! less let li line lineNumbers link link-safety-modal linkSafety liquid lisp list-decimal list-disc list-inside list-item lit literalTagContent ll ln load log logo lowercase lr ls ltr lua luau m mak markdown marked marko math max-h-32 max-w-full max-w-md maxSize mb-2 md mdc mdx mermaid mermaid-block mermaid-block-actions meta metastring min-h-28 min-h-[200px] min-w-[120px] ml ml-1 mm mmd mode mojo mousedown move ms mt-1 mt-2 mt-6 mx-4 my-4 my-6 n name nar narrat new nf nim nix none noreferrer normalizeHtmlIndentation not nt nu number o object objective-c objective-cpp of ol onerror onload opacity-0 ordered-list origin-center ot out outerHTML overflow overflow-auto overflow-hidden overflow-x-auto overflow-y-auto p p-1 p-1.5 p-2 p-3 p-4 p-6 p6 pan panZoom panZoom! param pas path pcss php pl pl-4 pls plt plugin plugins png po pointer-events-auto pointer-events-none pointercancel pointermove pointerup polar pot potx pp pq pre prefix presentation prevContentLength prisma properties props proto ps ps1 pt-0 pug purs px-1.5 px-3 px-4 py py-0.5 py-1 py-2 ql qml qmldir qo qss r raku raw rb re react react-dom react/jsx-runtime reg regex regexp rehype-harden rehype-raw rehype-sanitize rehypePlugin rehypePlugins! rel relative remark-gfm remark-parse remark-rehype remarkPlugin remarkPlugins! remarkPluginsAfter remarkPluginsBefore remend render result return right-0 right-2 right-4 rkt rootStyle round rounded rounded-full rounded-lg rounded-md rounded-xl rq rs rst rt rtl s sas sass scala scm scss sdbl section sep service sh shader shadow-lg shadow-sm shikiTheme shouldNormalizeHtmlIndentation! shrink-0 size-4 size-full so sol source soy space space-x-2 space-y-4 span spl sql src ss ssh-config st startLine static sticky streamdown:incomplete-link streaming string strong styl sub subscript summary sup superscript supports-[backdrop-filter]:backdrop-blur supports-[backdrop-filter]:backdrop-blur-sm supports-[backdrop-filter]:bg-background/70 supports-[backdrop-filter]:bg-sidebar/70 sv svelte svg swift system-verilog table table-body table-cell table-fullscreen table-header table-header-cell table-row table-wrapper tailwind-merge talon tasl tbody tcl td tel templ tex text text-2xl text-3xl text-[var(--sdm-c,inherit)] text-base text-left text-lg text-muted-foreground text-primary text-primary-foreground text-red-600 text-red-700 text-red-800 text-sm text-xl text-xs text/csv text/html text/markdown text/plain tf tfvars th the thead to toml top-2 top-4 top-full tr track transform transition-all transition-colors transition-transform transparent tres true try ts ts-tags tsp tsv tsx ttl twig txt typ type type! typeof ue ul un undefined underline unified unist-util-visit unist-util-visit-parents unordered-list use userSelect v vala var vb vhdl vim vine visit vo vue vue-html vue-vine vy w w-4 w-8 w-full wait wasm wbr we webp wgsl wheel whitespace-normal whitespace-nowrap width width! wiki window window! wit wl word wrap-anywhere wy xml xsl yaml yml z-10 z-20 z-50 zig zo zoom zs zsh\")": {} }, "type": "registry:ui" }, { "name": "ai-tool", "title": "Ai Tool", "dependencies": [ "ai@6.0.116", "lucide-react@0.546.0" ], "devDependencies": [], "registryDependencies": [ "https://ui.orchid.ai/r/ai-code-block.json", "https://ui.orchid.ai/r/orchid-foundation.json", "https://ui.orchid.ai/r/orchid-theme.json", "https://ui.orchid.ai/r/ui-badge.json", "https://ui.orchid.ai/r/ui-collapsible.json" ], "files": [ { "path": "registry/ui/orchid/ai-elements/tool.tsx", "content": "\"use client\";\nimport { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, WrenchIcon, XCircleIcon, } from 'lucide-react';\nimport { Collapsible } from \"../ui/collapsible\";\nimport { CollapsibleContent } from \"../ui/collapsible\";\nimport { CollapsibleTrigger } from \"../ui/collapsible\";\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Badge } from \"../ui/badge\";\nimport { CodeBlock } from \"./code-block\";\nimport { isValidElement } from 'react';\nimport type { ToolUIPart } from 'ai';\nimport { cn } from \"../lib/ui-utils\";\nexport type ToolProps = ComponentProps;\nexport const Tool = ({ className, ...props }: ToolProps) => ();\nexport type ToolHeaderProps = {\n title?: string;\n type: ToolUIPart['type'];\n state: ToolUIPart['state'];\n className?: string;\n};\nconst getStatusBadge = (status: ToolUIPart['state']) => {\n const labels: Record = {\n 'input-streaming': 'Pending',\n 'input-available': 'Running',\n 'approval-requested': 'Awaiting Approval',\n 'approval-responded': 'Approved',\n 'output-available': 'Completed',\n 'output-error': 'Error',\n 'output-denied': 'Denied',\n };\n const icons: Record = {\n 'input-streaming': ,\n 'input-available': ,\n 'approval-requested': ,\n 'approval-responded': ,\n 'output-available': ,\n 'output-error': ,\n 'output-denied': ,\n };\n return (\n {icons[status]}\n {labels[status]}\n );\n};\nexport const ToolHeader = ({ className, title, type, state, ...props }: ToolHeaderProps) => (\n
\n \n {title ?? type.split('-').slice(1).join('-')}\n {getStatusBadge(state)}\n
\n \n );\nexport type ToolContentProps = ComponentProps;\nexport const ToolContent = ({ className, ...props }: ToolContentProps) => ();\nexport type ToolInputProps = ComponentProps<'div'> & {\n input: ToolUIPart['input'];\n};\nexport const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
\n

\n Parameters\n

\n
\n \n
\n
);\nexport type ToolOutputProps = ComponentProps<'div'> & {\n output: ToolUIPart['output'];\n errorText: ToolUIPart['errorText'];\n};\nexport const ToolOutput = ({ className, output, errorText, ...props }: ToolOutputProps) => {\n if (!(output || errorText)) {\n return null;\n }\n let Output =
{output as ReactNode}
;\n if (typeof output === 'object' && !isValidElement(output)) {\n Output = ;\n }\n else if (typeof output === 'string') {\n Output = ;\n }\n return (
\n

\n {errorText ? 'Error' : 'Result'}\n

\n
\n {errorText &&
{errorText}
}\n {Output}\n
\n
);\n};\n", "type": "registry:ui", "target": "@ui/orchid/ai-elements/tool.tsx" } ], "type": "registry:ui" }, { "name": "orchid-foundation", "title": "Orchid Foundation", "dependencies": [ "clsx@2.1.1", "tailwind-merge@3.3.1" ], "devDependencies": [], "registryDependencies": [ "https://ui.orchid.ai/r/orchid-theme.json" ], "files": [ { "path": "registry/ui/orchid/adapters/navigation.tsx", "content": "\"use client\";\nimport { type ComponentProps, useMemo } from 'react';\nexport type LinkProps = ComponentProps<'a'> & {\n to?: string;\n preload?: boolean | 'intent';\n};\nexport function Link({ to, href, preload: _preload, ...props }: LinkProps) {\n return ;\n}\nexport function useRouter() {\n return useMemo(() => ({ navigate: ({ to }: {\n to: string;\n }) => window.location.assign(to) }), []);\n}\n", "type": "registry:ui", "target": "@ui/orchid/adapters/navigation.tsx" }, { "path": "registry/ui/orchid/hooks/use-dismiss-affordance.ts", "content": "import { useEffect, useState } from 'react';\nconst PORTRAIT_PHONE_QUERY = '(max-width: 639px) and (orientation: portrait)';\nconst HOVER_CAPABLE_QUERY = '(hover: hover)';\nexport function useDismissAffordance() {\n const [showDismissLabel, setShowDismissLabel] = useState(false);\n const [hideDismissUntilHover, setHideDismissUntilHover] = useState(false);\n useEffect(() => {\n const portraitPhoneMediaQuery = window.matchMedia(PORTRAIT_PHONE_QUERY);\n const hoverMediaQuery = window.matchMedia(HOVER_CAPABLE_QUERY);\n const update = () => {\n const isPortraitPhone = portraitPhoneMediaQuery.matches;\n const canHover = hoverMediaQuery.matches;\n setShowDismissLabel(!isPortraitPhone);\n setHideDismissUntilHover(!isPortraitPhone && canHover);\n };\n update();\n portraitPhoneMediaQuery.addEventListener('change', update);\n hoverMediaQuery.addEventListener('change', update);\n return () => {\n portraitPhoneMediaQuery.removeEventListener('change', update);\n hoverMediaQuery.removeEventListener('change', update);\n };\n }, []);\n return {\n showDismissLabel,\n hideDismissUntilHover,\n };\n}\n", "type": "registry:ui", "target": "@ui/orchid/hooks/use-dismiss-affordance.ts" }, { "path": "registry/ui/orchid/hooks/use-platform.ts", "content": "import { useSyncExternalStore } from 'react';\nexport type Platform = 'mac' | 'windows' | 'linux' | 'unknown';\nfunction detectPlatform(): Platform {\n if (typeof navigator === 'undefined') {\n return 'unknown';\n }\n const userAgent = navigator.userAgent;\n const platform = navigator.platform;\n if (/Mac|iPhone|iPad|iPod/.test(platform) || /Mac OS X/.test(userAgent)) {\n return 'mac';\n }\n if (/Win/.test(platform) || /Windows/.test(userAgent)) {\n return 'windows';\n }\n if (/Linux/.test(platform) || /X11/.test(platform)) {\n return 'linux';\n }\n return 'unknown';\n}\nconst subscribe = () => () => { };\nconst getSnapshot = detectPlatform;\nconst getServerSnapshot = (): Platform => 'mac';\nexport function usePlatform(): Platform {\n return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\nexport function isMac(platform: Platform): boolean {\n return platform === 'mac';\n}\nexport function isWindows(platform: Platform): boolean {\n return platform === 'windows';\n}\n", "type": "registry:ui", "target": "@ui/orchid/hooks/use-platform.ts" }, { "path": "registry/ui/orchid/icons.tsx", "content": "\"use client\";\nimport { forwardRef } from 'react';\nimport { cn } from \"./lib/ui-utils\";\ntype OrchidProps = {\n className?: string;\n variant?: 'icon' | 'full';\n};\nexport const Orchid = forwardRef(({ className, variant = 'icon' }, ref) => {\n if (variant === 'full') {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n return (\n \n \n \n \n \n );\n});\nOrchid.displayName = 'Orchid';\nexport const Spinner = forwardRef(({ className }, ref) => {\n return (\n \n \n \n \n \n \n \n \n );\n});\nSpinner.displayName = 'Spinner';\nexport const GoogleIcon = forwardRef(({ className }, ref) => {\n return (\n \n \n \n \n );\n});\nGoogleIcon.displayName = 'GoogleIcon';\nexport const MicrosoftIcon = forwardRef(({ className }, ref) => {\n return (\n \n \n \n \n );\n});\nMicrosoftIcon.displayName = 'MicrosoftIcon';\n", "type": "registry:ui", "target": "@ui/orchid/icons.tsx" }, { "path": "registry/ui/orchid/lib/types.ts", "content": "import type { ForwardRefExoticComponent, SVGProps } from 'react';\nexport type HeroIcon = ForwardRefExoticComponent, 'ref'> & {\n title?: string | undefined;\n titleId?: string | undefined;\n} & React.RefAttributes>;\n", "type": "registry:ui", "target": "@ui/orchid/lib/types.ts" }, { "path": "registry/ui/orchid/lib/ui-utils.ts", "content": "import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\nconst customTwMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n 'font-size': [\n 'text-title-lg',\n 'text-title',\n 'text-title-md',\n 'text-title-sm',\n 'text-copy-xl',\n 'text-copy-lg',\n 'text-copy',\n 'text-copy-sm',\n 'text-copy-xs',\n 'text-label',\n ],\n },\n },\n});\nexport function cn(...inputs: ClassValue[]) {\n return customTwMerge(clsx(inputs));\n}\nconst SUPPORTED_URL_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'sms:', 'tel:']);\nexport function sanitizeUrl(url: string): string {\n try {\n const parsedUrl = new URL(url);\n if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {\n return 'about:blank';\n }\n }\n catch {\n return url;\n }\n return url;\n}\nconst urlRegExp = new RegExp(/((([A-Za-z]{3,9}:(?:\\/\\/)?)(?:[-;:&=+$,\\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\\w]+@)[A-Za-z0-9.-]+)((?:\\/[+~%/.\\w-_]*)?\\??(?:[-+=&;%@.\\w_]*)#?(?:[\\w]*))?)/);\nexport function validateUrl(url: string): boolean {\n if (url.startsWith('mailto:') || url.startsWith('tel:') || url.startsWith('sms:')) {\n return true;\n }\n return url === 'https://' || urlRegExp.test(url);\n}\nexport const removeWhiteSpace = (text: string): string => {\n return text\n .replace(/[\\u034F\\u2800-\\u28FF\\u200B-\\u200D\\uFEFF\\u00A0]/g, ' ')\n .replace(/\\s+/g, ' ')\n .trim();\n};\nexport function formatEmailDate(date: Date): string {\n const hours = date.getHours();\n const minutes = date.getMinutes();\n const ampm = hours >= 12 ? 'PM' : 'AM';\n const displayHours = hours % 12 || 12;\n const displayMinutes = minutes.toString().padStart(2, '0');\n const months = [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ];\n const month = months[date.getMonth()];\n const day = date.getDate();\n const year = date.getFullYear();\n const getOrdinalSuffix = (n: number): string => {\n const s = ['th', 'st', 'nd', 'rd'];\n const v = n % 100;\n return s[(v - 20) % 10] || s[v] || s[0];\n };\n return `${month} ${day}${getOrdinalSuffix(day)}, ${year}, ${displayHours}:${displayMinutes} ${ampm}`;\n}\n", "type": "registry:ui", "target": "@ui/orchid/lib/ui-utils.ts" } ], "type": "registry:lib" }, { "name": "orchid-inbox", "title": "Orchid Inbox", "dependencies": [], "devDependencies": [], "registryDependencies": [ "https://ui.orchid.ai/r/orchid-theme.json", "https://ui.orchid.ai/r/z-avatar.json", "https://ui.orchid.ai/r/z-button.json", "https://ui.orchid.ai/r/z-provider-icon.json" ], "files": [ { "path": "registry/ui/orchid/examples/orchid-inbox.tsx", "content": "\"use client\";\nimport { useState } from 'react';\nimport ZAvatar from \"../spectrum/atoms/z-avatar/z-avatar\";\nimport ZButton from \"../spectrum/atoms/z-button/z-button\";\nimport ZProviderIcon from \"../spectrum/atoms/z-provider-icon/z-provider-icon\";\nexport type OrchidInboxMessage = {\n id: string;\n sender: string;\n subject: string;\n excerpt: string;\n time: string;\n unread?: boolean;\n};\nexport default function OrchidInbox({ messages, onOpen, onArchive, }: {\n messages: OrchidInboxMessage[];\n onOpen?: (message: OrchidInboxMessage) => void;\n onArchive?: (message: OrchidInboxMessage) => void;\n}) {\n const [query, setQuery] = useState('');\n const [archived, setArchived] = useState([]);\n const visible = messages.filter((message) => !archived.includes(message.id) &&\n `${message.sender} ${message.subject}`.toLowerCase().includes(query.toLowerCase()));\n return (
\n
\n
\n

\n Inbox{' '}\n {messages.length - archived.length}\n

\n

A clear view of what matters.

\n
\n setQuery(event.target.value)} className=\"bg-surface-weak border-neutral text-copy w-full rounded-lg border px-3 py-2 outline-none focus-visible:ring-2 sm:w-48\"/>\n
\n {visible.map((message) => (
\n \n {\n setArchived((items) => [...items, message.id]);\n onArchive?.(message);\n }}>\n Archive\n \n
))}\n {!visible.length && (

\n {query ? 'No matching messages.' : 'All caught up.'}\n

)}\n
);\n}\n", "type": "registry:ui", "target": "@ui/orchid/examples/orchid-inbox.tsx" } ], "type": "registry:block" }, { "name": "orchid-settings", "title": "Orchid Settings", "dependencies": [], "devDependencies": [], "registryDependencies": [ "https://ui.orchid.ai/r/orchid-theme.json", "https://ui.orchid.ai/r/z-avatar.json", "https://ui.orchid.ai/r/z-button.json", "https://ui.orchid.ai/r/z-onboarding-input.json", "https://ui.orchid.ai/r/z-toggle-switch.json" ], "files": [ { "path": "registry/ui/orchid/examples/orchid-settings.tsx", "content": "\"use client\";\nimport { useState } from 'react';\nimport ZAvatar from \"../spectrum/atoms/z-avatar/z-avatar\";\nimport ZButton from \"../spectrum/atoms/z-button/z-button\";\nimport ZOnboardingInput from \"../spectrum/atoms/z-onboarding-input/z-onboarding-input\";\nimport ZToggleSwitch from \"../spectrum/atoms/z-toggle-switch/z-toggle-switch\";\nexport default function OrchidSettings({ onSave, }: {\n onSave?: (settings: {\n name: string;\n notifications: boolean;\n digest: boolean;\n }) => void;\n}) {\n const [name, setName] = useState('Alex Morgan');\n const [notifications, setNotifications] = useState(true);\n const [digest, setDigest] = useState(false);\n return (
{\n event.preventDefault();\n onSave?.({ name, notifications, digest });\n }}>\n
\n \n
\n

Your workspace

\n

A little more you.

\n
\n
\n \n
\n \n
\n
\n \n \n
\n
\n \n Save preferences\n \n
\n );\n}\n", "type": "registry:ui", "target": "@ui/orchid/examples/orchid-settings.tsx" } ], "type": "registry:block" }, { "name": "orchid-theme", "title": "Orchid theme", "description": "Orchid color scales, typography, shadows, squircles and light/dark utilities for Tailwind CSS 4.", "dependencies": [], "devDependencies": [], "registryDependencies": [], "cssVars": { "theme": { "font-sans": "var(--orchid-font-sans)", "font-playfair": "var(--orchid-font-playfair)", "font-family-sans": "var(--orchid-font-family-sans)", "background-color-neutral": "var(--orchid-background-color-neutral)", "background-color-neutral-subtle": "var(--orchid-background-color-neutral-subtle)", "background-color-neutral-strong": "var(--orchid-background-color-neutral-strong)", "background-color-neutral-inverse": "var(--orchid-background-color-neutral-inverse)", "background-color-surface": "var(--orchid-background-color-surface)", "background-color-surface-weak": "var(--orchid-background-color-surface-weak)", "background-color-surface-subtle": "var(--orchid-background-color-surface-subtle)", "background-color-surface-strong": "var(--orchid-background-color-surface-strong)", "background-color-surface-intense": "var(--orchid-background-color-surface-intense)", "background-color-onsurface": "var(--orchid-background-color-onsurface)", "background-color-onsurface-subtle": "var(--orchid-background-color-onsurface-subtle)", "background-color-onsurface-strong": "var(--orchid-background-color-onsurface-strong)", "text-color-neutral": "var(--orchid-text-color-neutral)", "text-color-neutral-subtle": "var(--orchid-text-color-neutral-subtle)", "text-color-neutral-weak": "var(--orchid-text-color-neutral-weak)", "text-color-neutral-strong": "var(--orchid-text-color-neutral-strong)", "text-color-neutral-inverse": "var(--orchid-text-color-neutral-inverse)", "text-color-neutral-onsurface": "var(--orchid-text-color-neutral-onsurface)", "border-color-neutral": "var(--orchid-border-color-neutral)", "border-color-neutral-subtle": "var(--orchid-border-color-neutral-subtle)", "border-color-neutral-strong": "var(--orchid-border-color-neutral-strong)", "border-color-neutral-onsurface": "var(--orchid-border-color-neutral-onsurface)", "ring-color-neutral": "var(--orchid-ring-color-neutral)", "ring-color-neutral-subtle": "var(--orchid-ring-color-neutral-subtle)", "ring-color-neutral-strong": "var(--orchid-ring-color-neutral-strong)", "ring-color-bg-neutral": "var(--orchid-ring-color-bg-neutral)", "ring-color-bg-neutral-subtle": "var(--orchid-ring-color-bg-neutral-subtle)", "ring-color-bg-neutral-strong": "var(--orchid-ring-color-bg-neutral-strong)", "ring-color-bg-neutral-inverse": "var(--orchid-ring-color-bg-neutral-inverse)", "ring-color-bg-surface": "var(--orchid-ring-color-bg-surface)", "ring-color-bg-surface-weak": "var(--orchid-ring-color-bg-surface-weak)", "ring-color-bg-surface-subtle": "var(--orchid-ring-color-bg-surface-subtle)", "ring-color-bg-surface-strong": "var(--orchid-ring-color-bg-surface-strong)", "background-color-accent": "var(--orchid-background-color-accent)", "background-color-accent-subtle": "var(--orchid-background-color-accent-subtle)", "background-color-accent-strong": "var(--orchid-background-color-accent-strong)", "background-color-accent-inverse": "var(--orchid-background-color-accent-inverse)", "text-color-accent": "var(--orchid-text-color-accent)", "text-color-accent-onsurface": "var(--orchid-text-color-accent-onsurface)", "text-color-accent-subtle": "var(--orchid-text-color-accent-subtle)", "text-color-accent-muted": "var(--orchid-text-color-accent-muted)", "text-color-accent-inverse": "var(--orchid-text-color-accent-inverse)", "border-color-accent": "var(--orchid-border-color-accent)", "border-color-accent-subtle": "var(--orchid-border-color-accent-subtle)", "border-color-accent-strong": "var(--orchid-border-color-accent-strong)", "background-color-ai": "var(--orchid-background-color-ai)", "background-color-ai-subtle": "var(--orchid-background-color-ai-subtle)", "background-color-ai-strong": "var(--orchid-background-color-ai-strong)", "background-color-ai-inverse": "var(--orchid-background-color-ai-inverse)", "text-color-ai": "var(--orchid-text-color-ai)", "text-color-ai-onsurface": "var(--orchid-text-color-ai-onsurface)", "text-color-ai-subtle": "var(--orchid-text-color-ai-subtle)", "text-color-ai-muted": "var(--orchid-text-color-ai-muted)", "text-color-ai-inverse": "var(--orchid-text-color-ai-inverse)", "border-color-ai": "var(--orchid-border-color-ai)", "border-color-ai-subtle": "var(--orchid-border-color-ai-subtle)", "border-color-ai-strong": "var(--orchid-border-color-ai-strong)", "color-danger": "var(--orchid-color-danger)", "background-color-danger": "var(--orchid-background-color-danger)", "background-color-danger-subtle": "var(--orchid-background-color-danger-subtle)", "background-color-danger-strong": "var(--orchid-background-color-danger-strong)", "background-color-danger-inverse": "var(--orchid-background-color-danger-inverse)", "text-color-danger": "var(--orchid-text-color-danger)", "text-color-danger-onsurface": "var(--orchid-text-color-danger-onsurface)", "text-color-danger-subtle": "var(--orchid-text-color-danger-subtle)", "text-color-danger-muted": "var(--orchid-text-color-danger-muted)", "text-color-danger-inverse": "var(--orchid-text-color-danger-inverse)", "border-color-danger": "var(--orchid-border-color-danger)", "border-color-danger-subtle": "var(--orchid-border-color-danger-subtle)", "border-color-danger-strong": "var(--orchid-border-color-danger-strong)", "background-color-warn": "var(--orchid-background-color-warn)", "background-color-warn-subtle": "var(--orchid-background-color-warn-subtle)", "background-color-warn-strong": "var(--orchid-background-color-warn-strong)", "background-color-warn-inverse": "var(--orchid-background-color-warn-inverse)", "text-color-warn": "var(--orchid-text-color-warn)", "text-color-warn-onsurface": "var(--orchid-text-color-warn-onsurface)", "text-color-warn-subtle": "var(--orchid-text-color-warn-subtle)", "text-color-warn-muted": "var(--orchid-text-color-warn-muted)", "text-color-warn-inverse": "var(--orchid-text-color-warn-inverse)", "border-color-warn": "var(--orchid-border-color-warn)", "border-color-warn-subtle": "var(--orchid-border-color-warn-subtle)", "border-color-warn-strong": "var(--orchid-border-color-warn-strong)", "color-success": "var(--orchid-color-success)", "background-color-success": "var(--orchid-background-color-success)", "background-color-success-subtle": "var(--orchid-background-color-success-subtle)", "background-color-success-strong": "var(--orchid-background-color-success-strong)", "background-color-success-inverse": "var(--orchid-background-color-success-inverse)", "text-color-success": "var(--orchid-text-color-success)", "text-color-success-onsurface": "var(--orchid-text-color-success-onsurface)", "text-color-success-subtle": "var(--orchid-text-color-success-subtle)", "text-color-success-muted": "var(--orchid-text-color-success-muted)", "text-color-success-inverse": "var(--orchid-text-color-success-inverse)", "border-color-success": "var(--orchid-border-color-success)", "border-color-success-subtle": "var(--orchid-border-color-success-subtle)", "border-color-success-strong": "var(--orchid-border-color-success-strong)", "text-title-lg": "var(--orchid-text-title-lg)", "text-title-lg--font-weight": "var(--orchid-text-title-lg--font-weight)", "text-title": "var(--orchid-text-title)", "text-title--font-weight": "var(--orchid-text-title--font-weight)", "text-title-md": "var(--orchid-text-title-md)", "text-title-md--font-weight": "var(--orchid-text-title-md--font-weight)", "text-title-sm": "var(--orchid-text-title-sm)", "text-title-sm--font-weight": "var(--orchid-text-title-sm--font-weight)", "text-copy-xl": "var(--orchid-text-copy-xl)", "text-copy-xl--font-weight": "var(--orchid-text-copy-xl--font-weight)", "text-copy-lg": "var(--orchid-text-copy-lg)", "text-copy-lg--font-weight": "var(--orchid-text-copy-lg--font-weight)", "text-copy": "var(--orchid-text-copy)", "text-copy--font-weight": "var(--orchid-text-copy--font-weight)", "text-copy-sm": "var(--orchid-text-copy-sm)", "text-copy-sm--font-weight": "var(--orchid-text-copy-sm--font-weight)", "text-copy-sm--line-height": "var(--orchid-text-copy-sm--line-height)", "text-copy-xs": "var(--orchid-text-copy-xs)", "text-copy-xs--font-weight": "var(--orchid-text-copy-xs--font-weight)", "text-label": "var(--orchid-text-label)", "text-label--font-weight": "var(--orchid-text-label--font-weight)", "animate-overlayShow": "var(--orchid-animate-overlayShow)", "animate-contentShow": "var(--orchid-animate-contentShow)", "animate-pulse-size": "var(--orchid-animate-pulse-size)", "shadow-xs": "var(--orchid-shadow-xs)", "shadow-sm": "var(--orchid-shadow-sm)", "shadow": "var(--orchid-shadow)", "shadow-md": "var(--orchid-shadow-md)", "shadow-lg": "var(--orchid-shadow-lg)", "shadow-xl": "var(--orchid-shadow-xl)", "shadow-2xl": "var(--orchid-shadow-2xl)", "inset-shadow-xs": "var(--orchid-inset-shadow-xs)", "inset-shadow-xs-strong": "var(--orchid-inset-shadow-xs-strong)", "button-gradient": "var(--orchid-button-gradient)", "ease-in-quad": "var(--orchid-ease-in-quad)", "ease-in-cubic": "var(--orchid-ease-in-cubic)", "ease-in-quart": "var(--orchid-ease-in-quart)", "ease-in-quint": "var(--orchid-ease-in-quint)", "ease-in-expo": "var(--orchid-ease-in-expo)", "ease-in-circ": "var(--orchid-ease-in-circ)", "ease-out-quad": "var(--orchid-ease-out-quad)", "ease-out-cubic": "var(--orchid-ease-out-cubic)", "ease-out-quart": "var(--orchid-ease-out-quart)", "ease-out-quint": "var(--orchid-ease-out-quint)", "ease-out-expo": "var(--orchid-ease-out-expo)", "ease-out-circ": "var(--orchid-ease-out-circ)", "ease-in-out-quad": "var(--orchid-ease-in-out-quad)", "ease-in-out-cubic": "var(--orchid-ease-in-out-cubic)", "ease-in-out-quart": "var(--orchid-ease-in-out-quart)", "ease-in-out-quint": "var(--orchid-ease-in-out-quint)", "ease-in-out-expo": "var(--orchid-ease-in-out-expo)", "ease-in-out-circ": "var(--orchid-ease-in-out-circ)" } }, "css": { ":root": { "--gray-1": "#fcfcfc", "--gray-2": "#f9f9f9", "--gray-3": "#f0f0f0", "--gray-4": "#e8e8e8", "--gray-5": "#e0e0e0", "--gray-6": "#d9d9d9", "--gray-7": "#cecece", "--gray-8": "#bbbbbb", "--gray-9": "#8d8d8d", "--gray-10": "#838383", "--gray-11": "#646464", "--gray-12": "#202020" }, "@supports (color: color(display-p3 1 1 1))": { "@media (color-gamut: p3)": { ":root,\n .dark": { "--gray-dark-1": "color(display-p3 0.067 0.067 0.067)", "--gray-dark-2": "color(display-p3 0.098 0.098 0.098)", "--gray-dark-3": "color(display-p3 0.135 0.135 0.135)", "--gray-dark-4": "color(display-p3 0.163 0.163 0.163)", "--gray-dark-5": "color(display-p3 0.192 0.192 0.192)", "--gray-dark-6": "color(display-p3 0.228 0.228 0.228)", "--gray-dark-7": "color(display-p3 0.283 0.283 0.283)", "--gray-dark-8": "color(display-p3 0.375 0.375 0.375)", "--gray-dark-9": "color(display-p3 0.431 0.431 0.431)", "--gray-dark-10": "color(display-p3 0.484 0.484 0.484)", "--gray-dark-11": "color(display-p3 0.706 0.706 0.706)", "--gray-dark-12": "color(display-p3 0.933 0.933 0.933)" } } }, ":root,\n:is(.dark, [data-theme=\"dark\"])": { "--gray-dark-1": "#111111", "--gray-dark-2": "#191919", "--gray-dark-3": "#222222", "--gray-dark-4": "#2a2a2a", "--gray-dark-5": "#313131", "--gray-dark-6": "#3a3a3a", "--gray-dark-7": "#484848", "--gray-dark-8": "#606060", "--gray-dark-9": "#6e6e6e", "--gray-dark-10": "#7b7b7b", "--gray-dark-11": "#b4b4b4", "--gray-dark-12": "#eeeeee" }, "@custom-variant dark (&:where(:is(.dark, [data-theme=\"dark\"]), :is(.dark, [data-theme=\"dark\"]) *))": {}, "@custom-variant light (&:where([data-theme=light], [data-theme=light] *))": {}, "@layer base": { "*,\n *::before,\n *::after": { "--tw-ring-color": "var(--orchid-ring-color-neutral-strong)" }, ":where(\n a[href],\n button,\n input,\n textarea,\n select,\n summary,\n [role='button'],\n [role='link'],\n [tabindex]:not([tabindex='-1'])\n ):focus-visible": { "outline": "2px solid var(--orchid-ring-color-neutral-strong)", "outline-offset": "2px" } }, "@utility drag-none": { "user-select": "none", "-webkit-user-drag": "none", "-khtml-user-drag": "none", "-moz-user-drag": "none", "-o-user-drag": "none" }, "@utility rounded": { "--r": "var(--radius)", "@apply border-shape-squircle": {} }, "@utility rounded-*": { "--r": "--value(--radius-*, [length])", "@apply border-shape-squircle": {} }, "@utility border-shape-squircle": { "corner-shape": "squircle", "@supports (border-shape: shape(from 0 0, close))": { "border-shape": "shape( from calc(1.6 * var(--r)) 0, hline to calc(100% - 1.6 * var(--r)), curve to calc(100% - 0.546 * var(--r)) calc(0.109 * var(--r)) with calc(100% - 1.04 * var(--r)) 0 / calc(100% - 0.76 * var(--r)) 0, arc to calc(100% - 0.109 * var(--r)) calc(0.546 * var(--r)) of var(--r) cw, curve to 100% calc(1.6 * var(--r)) with 100% calc(0.76 * var(--r)) / 100% calc(1.04 * var(--r)), vline to calc(100% - 1.6 * var(--r)), curve to calc(100% - 0.109 * var(--r)) calc(100% - 0.546 * var(--r)) with 100% calc(100% - 1.04 * var(--r)) / 100% calc(100% - 0.76 * var(--r)), arc to calc(100% - 0.546 * var(--r)) calc(100% - 0.109 * var(--r)) of var(--r) cw, curve to calc(100% - 1.6 * var(--r)) 100% with calc(100% - 1.04 * var(--r)) 100% / calc(100% - 0.76 * var(--r)) 100%, hline to calc(1.6 * var(--r)), curve to calc(0.546 * var(--r)) calc(100% - 0.109 * var(--r)) with calc(1.04 * var(--r)) 100% / calc(0.76 * var(--r)) 100%, arc to calc(0.109 * var(--r)) calc(100% - 0.546 * var(--r)) of var(--r) cw, curve to 0 calc(100% - 1.6 * var(--r)) with 0 calc(100% - 0.76 * var(--r)) / 0 calc(100% - 1.04 * var(--r)), vline to calc(1.6 * var(--r)), curve to calc(0.109 * var(--r)) calc(0.546 * var(--r)) with 0 calc(1.04 * var(--r)) / 0 calc(0.76 * var(--r)), arc to calc(0.546 * var(--r)) calc(0.109 * var(--r)) of var(--r) cw, curve to calc(1.6 * var(--r)) 0 with calc(0.76 * var(--r)) 0 / calc(1.04 * var(--r)) 0 )" } }, "@utility border-shape-initial": { "border-shape": "none !important", "corner-shape": "round !important" }, "@utility rounded-full": { "@apply border-shape-initial": {} }, "@layer theme": { ":root": { "--orchid-text-title-lg": "var(--text-5xl)", "--orchid-text-title-lg--font-weight": "400", "--orchid-text-title": "var(--text-4xl)", "--orchid-text-title--font-weight": "400", "--orchid-text-title-md": "var(--text-2xl)", "--orchid-text-title-md--font-weight": "400", "--orchid-text-title-sm": "var(--text-xl)", "--orchid-text-title-sm--font-weight": "400", "--orchid-text-copy-xl": "var(--text-lg)", "--orchid-text-copy-xl--font-weight": "400", "--orchid-text-copy-lg": "var(--text-base)", "--orchid-text-copy-lg--font-weight": "400", "--orchid-text-copy": "var(--text-sm)", "--orchid-text-copy--font-weight": "400", "--orchid-text-copy-sm": "var(--text-xs)", "--orchid-text-copy-sm--font-weight": "400", "--orchid-text-copy-sm--line-height": "1.1rem", "--orchid-text-copy-xs": "0.625rem", "--orchid-text-copy-xs--font-weight": "400", "--orchid-text-label": "var(--text-sm)", "--orchid-text-label--font-weight": "500", "--orchid-animate-overlayShow": "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)", "--orchid-animate-contentShow": "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)", "--orchid-animate-pulse-size": "pulseSize 800ms var(--orchid-ease-in-out-expo) infinite", "--orchid-shadow-xs": "0 1px 1px 0 rgba(0, 0, 0, 0.1)", "--orchid-shadow-sm": "0 1px 2px 0 rgba(0, 0, 0, 0.04)", "--orchid-shadow": "0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 8px 8px -8px rgba(0, 0, 0, 0.04)", "--orchid-shadow-md": "0px 0px 10px 3px rgba(0, 0, 0, 0.08)", "--orchid-shadow-lg": "0 1px 1px 0 rgba(0, 0, 0, 0.02), 0 4px 8px 0 rgba(0, 0, 0, 0.04)", "--orchid-shadow-xl": "0 1px 1px 0 rgba(0, 0, 0, 0.02), 0 4px 8px -4px rgba(0, 0, 0, 0.04), 0 16px 24px -8px rgba(0, 0, 0, 0.06)", "--orchid-shadow-2xl": "0 1px 1px 0 rgba(0, 0, 0, 0.02), 0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 24px 32px -8px rgba(0, 0, 0, 0.06)", "--orchid-inset-shadow-xs": "0 2px 1px 0 rgba(0, 0, 0, 0.1) inset", "--orchid-inset-shadow-xs-strong": "0 2px 1px 0 rgba(0, 0, 0, 0.5) inset", "--orchid-button-gradient": "linear-gradient( 0deg, var(--background-color-neutral-solid-inverse), var(--orchid-background-color-neutral) )", "--orchid-ease-in-quad": "cubic-bezier(0.55, 0.085, 0.68, 0.53)", "--orchid-ease-in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)", "--orchid-ease-in-quart": "cubic-bezier(0.895, 0.03, 0.685, 0.22)", "--orchid-ease-in-quint": "cubic-bezier(0.755, 0.05, 0.855, 0.06)", "--orchid-ease-in-expo": "cubic-bezier(0.95, 0.05, 0.795, 0.035)", "--orchid-ease-in-circ": "cubic-bezier(0.6, 0.04, 0.98, 0.335)", "--orchid-ease-out-quad": "cubic-bezier(0.25, 0.46, 0.45, 0.94)", "--orchid-ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)", "--orchid-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)", "--orchid-ease-out-quint": "cubic-bezier(0.23, 1, 0.32, 1)", "--orchid-ease-out-expo": "cubic-bezier(0.19, 1, 0.22, 1)", "--orchid-ease-out-circ": "cubic-bezier(0.075, 0.82, 0.165, 1)", "--orchid-ease-in-out-quad": "cubic-bezier(0.455, 0.03, 0.515, 0.955)", "--orchid-ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)", "--orchid-ease-in-out-quart": "cubic-bezier(0.77, 0, 0.175, 1)", "--orchid-ease-in-out-quint": "cubic-bezier(0.86, 0, 0.07, 1)", "--orchid-ease-in-out-expo": "cubic-bezier(1, 0, 0, 1)", "--orchid-ease-in-out-circ": "cubic-bezier(0.785, 0.135, 0.15, 0.86)" }, "@keyframes pulseSize": { "0%": { "transform": "scale(1)" }, "50%": { "transform": "scale(0.5)" }, "100%": { "transform": "scale(1)" } } }, ":is(.dark, [data-theme=\"dark\"])": { "--orchid-background-color-neutral": "var(--gray-dark-1)", "--orchid-background-color-neutral-subtle": "var(--gray-dark-2)", "--orchid-background-color-neutral-strong": "var(--gray-dark-3)", "--orchid-background-color-neutral-inverse": "var(--gray-dark-12)", "--orchid-background-color-surface": "var(--gray-dark-6)", "--orchid-background-color-surface-weak": "var(--gray-dark-3)", "--orchid-background-color-surface-subtle": "var(--gray-dark-4)", "--orchid-background-color-surface-strong": "var(--gray-dark-5)", "--orchid-background-color-surface-intense": "var(--gray-dark-7)", "--orchid-text-color-neutral": "var(--gray-dark-12)", "--orchid-text-color-neutral-subtle": "var(--gray-dark-11)", "--orchid-text-color-neutral-weak": "var(--gray-dark-9)", "--orchid-text-color-neutral-strong": "var(--color-white)", "--orchid-text-color-neutral-inverse": "var(--gray-dark-1)", "--orchid-border-color-neutral": "var(--gray-dark-7)", "--orchid-border-color-neutral-subtle": "var(--gray-dark-4)", "--orchid-border-color-neutral-strong": "var(--gray-dark-9)", "--orchid-border-color-neutral-onsurface": "var(--color-white)", "--orchid-ring-color-neutral": "var(--gray-dark-4)", "--orchid-ring-color-neutral-subtle": "var(--gray-dark-3)", "--orchid-ring-color-neutral-strong": "var(--gray-dark-9)", "--orchid-ring-color-bg-neutral": "var(--gray-dark-1)", "--orchid-ring-color-bg-neutral-subtle": "var(--gray-dark-2)", "--orchid-ring-color-bg-neutral-strong": "var(--gray-dark-3)", "--orchid-ring-color-bg-neutral-inverse": "var(--gray-dark-12)", "--orchid-ring-color-bg-surface": "var(--gray-dark-7)", "--orchid-ring-color-bg-surface-weak": "var(--gray-dark-4)", "--orchid-ring-color-bg-surface-subtle": "var(--gray-dark-5)", "--orchid-ring-color-bg-surface-strong": "var(--gray-dark-6)", "--orchid-background-color-accent": "var(--color-blue-400)", "--orchid-background-color-accent-subtle": "var(--color-blue-900)", "--orchid-background-color-accent-strong": "var(--color-blue-400)", "--orchid-background-color-accent-inverse": "var(--color-neutral-900)", "--orchid-text-color-accent": "var(--color-blue-400)", "--orchid-text-color-accent-subtle": "var(--color-blue-200)", "--orchid-text-color-accent-muted": "var(--color-blue-200)", "--orchid-border-color-accent": "var(--color-blue-700)", "--orchid-border-color-accent-subtle": "var(--color-blue-800)", "--orchid-border-color-accent-strong": "var(--color-blue-600)", "--orchid-background-color-ai": "var(--color-purple-500)", "--orchid-background-color-ai-subtle": "var(--color-purple-900)", "--orchid-background-color-ai-strong": "var(--color-purple-400)", "--orchid-background-color-ai-inverse": "var(--color-purple-900)", "--orchid-text-color-ai": "var(--color-purple-400)", "--orchid-text-color-ai-subtle": "var(--color-purple-200)", "--orchid-text-color-ai-muted": "var(--color-purple-200)", "--orchid-border-color-ai": "var(--color-purple-700)", "--orchid-border-color-ai-subtle": "var(--color-purple-800)", "--orchid-border-color-ai-strong": "var(--color-purple-600)", "--orchid-background-color-danger": "#ef4444", "--orchid-background-color-danger-subtle": "#450a0a", "--orchid-background-color-danger-strong": "#f87171", "--orchid-background-color-danger-inverse": "#1c1917", "--orchid-text-color-danger": "#fca5a5", "--orchid-text-color-danger-subtle": "#fecaca", "--orchid-text-color-danger-muted": "#fecaca", "--orchid-border-color-danger": "#b91c1c", "--orchid-border-color-danger-subtle": "#7f1d1d", "--orchid-border-color-danger-strong": "#dc2626", "--orchid-background-color-warn": "var(--color-amber-500)", "--orchid-background-color-warn-subtle": "var(--color-amber-900)", "--orchid-background-color-warn-strong": "var(--color-amber-400)", "--orchid-text-color-warn": "var(--color-amber-300)", "--orchid-text-color-warn-onsurface": "var(--color-amber-950)", "--orchid-text-color-warn-subtle": "var(--color-amber-200)", "--orchid-text-color-warn-muted": "var(--color-amber-200)", "--orchid-border-color-warn": "var(--color-amber-700)", "--orchid-border-color-warn-subtle": "var(--color-amber-800)", "--orchid-border-color-warn-strong": "var(--color-amber-600)", "--orchid-color-success": "#22c55e", "--orchid-background-color-success": "var(--orchid-color-success)", "--orchid-background-color-success-subtle": "#052e16", "--orchid-background-color-success-strong": "#4ade80", "--orchid-background-color-success-inverse": "#1c1917", "--orchid-text-color-success": "#86efac", "--orchid-text-color-success-subtle": "#bbf7d0", "--orchid-text-color-success-muted": "#bbf7d0", "--orchid-border-color-success": "#15803d", "--orchid-border-color-success-subtle": "#14532d", "--orchid-border-color-success-strong": "#22c55e", "--orchid-color-danger": "#ef4444" }, ".slide-fade-leave-active,\n.slide-fade-enter-active": { "transition": "all 0.2s ease-in-out" }, ".slide-fade-enter-from,\n.slide-fade-leave-to": { "transform": "translateX(30px) scale(0.98)", "opacity": "0" }, ".slide-fade-up-enter-active,\n.slide-fade-up-leave-active": { "transition": "all 0.3s cubic-bezier(0.12, 0.32, 0.16, 0.86)" }, ".slide-fade-up-enter-from,\n.slide-fade-up-leave-to": { "transform": "translateY(20px)", "opacity": "0" }, ":is(.dark, [data-theme=\"dark\"]),\n:is(.dark, [data-theme=\"dark\"]) body": { "color-scheme": "dark" }, "@keyframes dialog-overlay-in": { "from": { "opacity": "0" }, "to": { "opacity": "1" } }, "@keyframes dialog-overlay-out": { "from": { "opacity": "1" }, "to": { "opacity": "0" } }, "@keyframes dialog-content-in": { "from": { "opacity": "0", "scale": "0.95" }, "to": { "opacity": "1", "scale": "1" } }, "@keyframes dialog-content-out": { "from": { "opacity": "1", "scale": "1" }, "to": { "opacity": "0", "scale": "0.95" } }, ".prose-success ul > li::marker,\n.prose-success ol > li::marker": { "color": "var(--orchid-color-success)" } }, "type": "registry:style" }, { "name": "orchid-workspace", "title": "Orchid Workspace", "dependencies": [ "@heroicons/react@2.2.0" ], "devDependencies": [], "registryDependencies": [ "https://ui.orchid.ai/r/orchid-theme.json", "https://ui.orchid.ai/r/z-action-row.json", "https://ui.orchid.ai/r/z-add-context-button.json", "https://ui.orchid.ai/r/z-button.json", "https://ui.orchid.ai/r/z-kbd.json", "https://ui.orchid.ai/r/z-provider-icon.json" ], "files": [ { "path": "registry/ui/orchid/examples/orchid-workspace.tsx", "content": "\"use client\";\nimport { useState, type ReactNode } from 'react';\nimport { CalendarDaysIcon, PencilSquareIcon, BanknotesIcon } from '@heroicons/react/16/solid';\nimport ZActionRow from \"../spectrum/molecules/z-action-row/z-action-row\";\nimport ZButton from \"../spectrum/atoms/z-button/z-button\";\nimport ZKbd from \"../spectrum/atoms/z-kbd/z-kbd\";\nimport ZProviderIcon from \"../spectrum/atoms/z-provider-icon/z-provider-icon\";\nimport ZAddContextButton from \"../spectrum/molecules/z-add-context-button/z-add-context-button\";\nexport type OrchidWorkspaceProps = {\n onSubmit?: (message: string) => void;\n onAddContext?: () => void;\n onReviewReply?: () => void;\n onAcceptInvite?: () => void;\n onDeclineInvite?: () => void;\n onRefund?: () => void;\n};\nexport default function OrchidWorkspace({ onSubmit, onAddContext, onReviewReply, onAcceptInvite, onDeclineInvite, onRefund, }: OrchidWorkspaceProps) {\n const [message, setMessage] = useState('Send the meeting summary and decisions to Adam with owners and due dates');\n const [dismissed, setDismissed] = useState([]);\n function submit(event: React.FormEvent) {\n event.preventDefault();\n if (message.trim())\n onSubmit?.(message.trim());\n }\n return (
\n
\n
\n \n \n
),\n tr: ({ node, ...props }: any) => (