@luxfi/ui 8.0.0 → 8.1.0

package/src/safari.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import {
+  ChevronLeft,
+  ChevronRight,
+  Menu,
+  Plus,
+  RotateCw,
+  Share2,
+} from "lucide-react"
+
+import { cn } from "./utils"
+
+interface SafariProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  url?: string
+  showToolbar?: boolean
+}
+
+const Safari = React.forwardRef<HTMLDivElement, SafariProps>(
+  (
+    {
+      className,
+      children,
+      url = "https://ui.hanzo.ai",
+      showToolbar = true,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "mx-auto w-full max-w-5xl overflow-hidden rounded-xl border shadow-2xl",
+          className
+        )}
+        {...props}
+      >
+        {/* Window Chrome */}
+        <Box className="flex items-center gap-2 border-b bg-[var(--color-bg-body)] px-3 py-2 dark:bg-[var(--color-bg-primary)]">
+          {/* Traffic Lights */}
+          <Box className="flex gap-2">
+            <Box className="h-3 w-3 rounded-full bg-[var(--lux-state-error)]" />
+            <Box className="h-3 w-3 rounded-full bg-[var(--lux-state-notice)]" />
+            <Box className="h-3 w-3 rounded-full bg-[var(--lux-state-success)]" />
+          </Box>
+
+          {/* Navigation Controls */}
+          <Box className="ml-2 flex items-center gap-1">
+            <Box tag="button" className="rounded p-1 hover:bg-[var(--color-bg-body)] dark:hover:bg-[var(--color-bg-primary)]">
+              <ChevronLeft style={css('h-4 w-4 text-[var(--color-text-secondary)] dark:text-[var(--color-text-secondary)]')} />
+            </Box>
+            <Box tag="button" className="rounded p-1 hover:bg-[var(--color-bg-body)] dark:hover:bg-[var(--color-bg-primary)]">
+              <ChevronRight style={css('h-4 w-4 text-[var(--color-text-secondary)] dark:text-[var(--color-text-secondary)]')} />
+            </Box>
+          </Box>
+
+          {/* URL Bar */}
+          <Box className="mx-3 flex flex-1 items-center gap-2 rounded-lg bg-white px-3 py-1.5 dark:bg-[var(--color-bg-primary)]">
+            <svg
+              className={'h-4 w-4 text-[var(--color-text-secondary)]'} style={css('h-4 w-4 text-[var(--color-text-secondary)]')}
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z" />
+            </svg>
+            <Box tag="span" className="flex-1 text-sm text-[var(--color-text-secondary)] dark:text-[var(--color-text-secondary)]">
+              {url}
+            </Box>
+            <Box tag="button" className="rounded p-1 hover:bg-[var(--color-bg-body)] dark:hover:bg-[var(--color-bg-primary)]">
+              <RotateCw style={css('h-3.5 w-3.5 text-[var(--color-text-secondary)] dark:text-[var(--color-text-secondary)]')} />
+            </Box>
+          </Box>
+
+          {/* Right Controls */}
+          <Box className="flex items-center gap-1">
+            <Box tag="button" className="rounded p-1 hover:bg-[var(--color-bg-body)] dark:hover:bg-[var(--color-bg-primary)]">
+              <Share2 style={css('h-4 w-4 text-[var(--color-text-secondary)] dark:text-[var(--color-text-secondary)]')} />
+            </Box>
+            <Box tag="button" className="rounded p-1 hover:bg-[var(--color-bg-body)] dark:hover:bg-[var(--color-bg-primary)]">
+              <Plus style={css('h-4 w-4 text-[var(--color-text-secondary)] dark:text-[var(--color-text-secondary)]')} />
+            </Box>
+            <Box tag="button" className="rounded p-1 hover:bg-[var(--color-bg-body)] dark:hover:bg-[var(--color-bg-primary)]">
+              <Menu style={css('h-4 w-4 text-[var(--color-text-secondary)] dark:text-[var(--color-text-secondary)]')} />
+            </Box>
+          </Box>
+        </Box>
+
+        {/* Optional Toolbar */}
+        {showToolbar && (
+          <Box className="flex items-center gap-4 border-b bg-[var(--color-bg-body)] px-4 py-2 text-sm dark:bg-[var(--color-bg-primary)]">
+            <Box tag="button" className="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] dark:text-[var(--color-text-secondary)] dark:hover:text-[var(--color-text-disabled)]">
+              Favorites
+            </Box>
+            <Box tag="button" className="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] dark:text-[var(--color-text-secondary)] dark:hover:text-[var(--color-text-disabled)]">
+              Reading List
+            </Box>
+            <Box tag="button" className="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] dark:text-[var(--color-text-secondary)] dark:hover:text-[var(--color-text-disabled)]">
+              History
+            </Box>
+          </Box>
+        )}
+
+        {/* Content Area */}
+        <Box className="bg-white dark:bg-[var(--color-bg-primary)]">{children}</Box>
+      </Box>
+    )
+  }
+)
+Safari.displayName = "Safari"
+
+export { Safari }

package/src/sandbox.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface SandboxProps extends React.HTMLAttributes<HTMLDivElement> {
+  code?: string
+  language?: string
+  editable?: boolean
+}
+
+const Sandbox = React.forwardRef<HTMLDivElement, SandboxProps>(
+  (
+    {
+      className,
+      code = "",
+      language = "javascript",
+      editable = false,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = React.useState(code)
+    const [output, setOutput] = React.useState<string>("")
+
+    const handleRun = () => {
+      try {
+        // This is a placeholder - in production, use a proper sandboxed execution environment
+        const result = eval(value)
+        setOutput(String(result))
+      } catch (error) {
+        setOutput(
+          `Error: ${error instanceof Error ? error.message : String(error)}`
+        )
+      }
+    }
+
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "grid gap-4 rounded-lg border bg-card text-card-foreground shadow-sm",
+          className
+        )}
+        {...props}
+      >
+        <Box className="space-y-2 p-4">
+          <Box className="flex items-center justify-between">
+            <Box tag="span" className="text-sm font-medium">Code Editor</Box>
+            <Box tag="button"
+              onClick={handleRun}
+              className="rounded-md bg-primary px-3 py-1 text-xs text-primary-foreground hover:bg-primary/90"
+            >
+              Run
+            </Box>
+          </Box>
+          <Box tag="textarea"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            readOnly={!editable}
+            className="min-h-[200px] w-full rounded-md border bg-muted p-4 font-mono text-sm"
+            placeholder="Enter your code here..."
+          />
+        </Box>
+
+        {output && (
+          <Box className="space-y-2 border-t p-4">
+            <Box tag="span" className="text-sm font-medium">Output</Box>
+            <Box tag="pre" className="rounded-md bg-muted p-4 text-sm">
+              <code>{output}</code>
+            </Box>
+          </Box>
+        )}
+      </Box>
+    )
+  }
+)
+
+Sandbox.displayName = "Sandbox"
+
+export { Sandbox }

package/src/search-and-toggle-navigation-bar.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface SearchAndToggleNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  items?: Array<{ label: string; href: string }>
+}
+
+const SearchAndToggleNavigationBar = React.forwardRef<
+  HTMLElement,
+  SearchAndToggleNavigationBarProps
+>(({ className, items = [], ...props }, ref) => {
+  return (
+    <Box tag="nav"
+      ref={ref}
+      className={cn("border-b bg-background", className)}
+      {...props}
+    >
+      <Box className="container flex h-16 items-center gap-6">
+        {items.map((item) => (
+          <Box tag="a"
+            key={item.href}
+            href={item.href}
+            className="text-sm font-medium transition-colors hover:text-primary"
+          >
+            {item.label}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+})
+SearchAndToggleNavigationBar.displayName = "SearchAndToggleNavigationBar"
+
+export { SearchAndToggleNavigationBar }

package/src/select.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Select as GuiSelect } from '@hanzo/gui';
+import { Box, css, sx } from '@hanzo/ui'
 import { useDebounce } from '@uidotdev/usehooks';
 import * as React from 'react';
 
@@ -18,15 +19,15 @@ import { cn } from './utils';
 import { Skeleton } from './skeleton';
 
 // Inline chevron icon (east-mini arrow)
-const ArrowIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+const ArrowIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </svg>
 );
 
 // Inline check icon
-const CheckIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+const CheckIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M16.667 5L7.5 14.167 3.333 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </svg>
 );
@@ -45,7 +46,7 @@ function FilterInput({ placeholder, initialValue = '', onChange }: FilterInputPr
     onChange?.(e.target.value);
   }, [ onChange ]);
   return (
-    <input
+    <Box tag="input"
       type="text"
       placeholder={ placeholder }
       value={ value }
@@ -238,7 +239,7 @@ export const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
           disablePreventBodyScroll
           name={ name }
         >
-          <div
+          <Box
             ref={ ref }
             className={ cn('relative inline-flex', className) }
             style={ inlineStyle }
@@ -248,7 +249,7 @@ export const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
             data-size={ size || undefined }
           >
             { children }
-          </div>
+          </Box>
         </GuiSelect>
       </SelectInternalContext.Provider>
     );
@@ -289,7 +290,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, SelectControlPr
         ref={ ref as never }
         asChild={ asChild }
         unstyled
-        className={ cn(
+        {...sx(
           'group peer inline-flex items-center gap-2 cursor-pointer',
           'rounded-lg text-sm transition-colors outline-none',
           'border border-[var(--color-input-border)] bg-[var(--color-input-bg)] text-[var(--color-input-fg)]',
@@ -300,7 +301,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, SelectControlPr
           ctx.variant !== 'plain' && ctx.size === 'lg' && 'px-4 py-2.5 min-h-[52px]',
           ctx.variant !== 'plain' && ctx.size !== 'lg' && 'px-3 py-1.5 min-h-[36px]',
           triggerClassName,
-        ) }
+        )}
         data-default-value={ isDefaultValue || undefined }
         { ...radixTriggerProps }
       >
@@ -308,9 +309,9 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, SelectControlPr
           <>
             { children }
             { !noIndicator && (
-              <span className="ml-auto shrink-0 transition-transform data-[state=open]:rotate-180 text-[var(--color-icon-secondary)]">
-                <ArrowIcon className="h-5 w-5 -rotate-90"/>
-              </span>
+              <Box tag="span" className="ml-auto shrink-0 transition-transform data-[state=open]:rotate-180 text-[var(--color-icon-secondary)]">
+                <ArrowIcon style={css('h-5 w-5 -rotate-90')}/>
+              </Box>
             ) }
           </>
         ) }
@@ -347,7 +348,7 @@ export const SelectClearTrigger = React.forwardRef<HTMLButtonElement, SelectClea
     }, [ ctx ]);
 
     return (
-      <button
+      <Box tag="button"
         ref={ ref }
         type="button"
         onClick={ handleClick }
@@ -355,10 +356,10 @@ export const SelectClearTrigger = React.forwardRef<HTMLButtonElement, SelectClea
         aria-label="Clear selection"
         { ...rest }
       >
-        <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg style={css('h-5 w-5')} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
         </svg>
-      </button>
+      </Box>
     );
   },
 );
@@ -392,12 +393,12 @@ export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps
       // Viewport is the box you can see, so the surface is declared there.
       <GuiSelect.Content { ...rest }>
         <GuiSelect.Viewport
-          className={ cn(
+          {...sx(
             'min-w-[8rem] overflow-hidden rounded-lg p-1',
             'bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]',
             'border border-[var(--color-border-divider)]',
             className,
-          ) }
+          )}
         >
           { stampIndices(children, counter) }
         </GuiSelect.Viewport>
@@ -452,7 +453,7 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
         ref={ ref as never }
         index={ index ?? 0 }
         value={ item.value }
-        className={ cn(
+        {...sx(
           'relative flex cursor-pointer select-none items-center gap-2',
           'rounded-md px-3 py-2 text-sm outline-none',
           'text-[var(--color-text-primary)]',
@@ -460,15 +461,15 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
           'data-[state=checked]:font-medium',
           'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
           className,
-        ) }
+        )}
         { ...rest }
       >
         { item.icon }
         <GuiSelect.ItemText>
           { children ?? item.label }
         </GuiSelect.ItemText>
-        <GuiSelect.ItemIndicator className="ml-auto shrink-0">
-          <CheckIcon className="h-5 w-5"/>
+        <GuiSelect.ItemIndicator {...sx('ml-auto shrink-0')}>
+          <CheckIcon style={css('h-5 w-5')}/>
         </GuiSelect.ItemIndicator>
       </GuiSelect.Item>
     );
@@ -511,7 +512,7 @@ export const SelectValueText = React.forwardRef<HTMLSpanElement, SelectValueText
         if (!item) return null;
 
         const label = size === 'lg' ? (
-          <span
+          <Box tag="span"
             className={ cn(
               'text-xs block',
               invalid ? 'text-[var(--color-text-error)]' : 'text-[var(--color-input-placeholder)]',
@@ -519,13 +520,13 @@ export const SelectValueText = React.forwardRef<HTMLSpanElement, SelectValueText
             style={{ display: '-webkit-box' }}
           >
             { placeholderText }
-          </span>
+          </Box>
         ) : null;
 
         return (
           <>
             { label }
-            <span className="inline-flex items-center flex-nowrap gap-1">
+            <Box tag="span" className="inline-flex items-center flex-nowrap gap-1">
               { item.icon }
               { mode !== 'compact' && (
                 <span
@@ -539,7 +540,7 @@ export const SelectValueText = React.forwardRef<HTMLSpanElement, SelectValueText
                   { item.renderLabel ? item.renderLabel('value-text') : item.label }
                 </span>
               ) }
-            </span>
+            </Box>
           </>
         );
       }
@@ -553,7 +554,7 @@ export const SelectValueText = React.forwardRef<HTMLSpanElement, SelectValueText
       <GuiSelect.Value
         ref={ ref as never }
         placeholder={ placeholderText }
-        className={ cn('flex flex-col justify-center min-w-0 truncate', className) }
+        {...sx('flex flex-col justify-center min-w-0 truncate', className)}
         { ...rest }
       >
         { content }
@@ -576,8 +577,8 @@ export const SelectItemGroup = React.forwardRef<HTMLDivElement, SelectItemGroupP
   function SelectItemGroup(props, ref) {
     const { children, label, className, ...rest } = props;
     return (
-      <GuiSelect.Group ref={ ref as never } className={ cn('py-1', className) } { ...rest }>
-        <GuiSelect.Label className="px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]">
+      <GuiSelect.Group ref={ ref as never } {...sx('py-1', className)} { ...rest }>
+        <GuiSelect.Label {...sx('px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]')}>
           { label }
         </GuiSelect.Label>
         { children }
@@ -697,14 +698,14 @@ export const SelectAsync = React.forwardRef<HTMLDivElement, SelectAsyncProps>((p
         />
       </SelectControl>
       <SelectContent portalled={ portalled }>
-        <div className="px-4">
+        <Box className="px-4">
           <FilterInput
             placeholder="Search"
             initialValue={ inputValue }
             onChange={ handleFilterChange }
           />
           { extraControls }
-        </div>
+        </Box>
         { contentHeader }
         { collection.items.map((item) => (
           <SelectItem item={ item } key={ item.value }>