@hanzo/ui 8.0.25 → 8.0.27

package/dist/backends/gui/scroll-area.d.ts

@@ -0,0 +1,45 @@
+/**
+ * ScrollArea — the cross-platform (web + native + desktop) scroll surface.
+ *
+ * Scrolling itself is the platform's: @hanzogui/scroll-view's `ScrollView` (a
+ * styled react-native `ScrollView`), so momentum, keyboard, wheel, and
+ * accessibility come from the host and are never reimplemented. What this adds is
+ * the ONE custom scrollbar — the platform indicator is suppressed and `ScrollBar`
+ * draws it from the scroll metrics the viewport reports, so a thumb looks and
+ * drags identically on Chrome, iOS, and Tauri.
+ *
+ * One area scrolls one axis (`horizontal` picks it), so there is exactly one bar
+ * and never a dead one: `ScrollArea` renders `<ScrollBar orientation={axis} />`
+ * and a bar for the other axis has nothing to scroll and renders nothing.
+ */
+import { type ReactNode } from "react";
+import { type GuiElement, type YStackProps } from "@hanzo/gui";
+export type ScrollAreaType = "auto" | "always" | "scroll" | "hover";
+type Axis = "vertical" | "horizontal";
+export type ScrollBarProps = Omit<YStackProps, "children"> & {
+    orientation?: Axis;
+};
+declare const ScrollBar: import("react").ForwardRefExoticComponent<Omit<YStackProps, "children"> & {
+    orientation?: Axis;
+} & import("react").RefAttributes<GuiElement>>;
+export type ScrollAreaProps = Omit<YStackProps, "children"> & {
+    /** When the bar shows: on overflow, always, while scrolling, or on hover. */
+    type?: ScrollAreaType;
+    /** ms the bar lingers after scrolling/hover stops (`scroll` and `hover`). */
+    scrollHideDelay?: number;
+    dir?: "ltr" | "rtl";
+    /** Scroll the x axis instead of the y axis (react-native ScrollView semantics). */
+    horizontal?: boolean;
+    children?: ReactNode;
+};
+declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<YStackProps, "children"> & {
+    /** When the bar shows: on overflow, always, while scrolling, or on hover. */
+    type?: ScrollAreaType;
+    /** ms the bar lingers after scrolling/hover stops (`scroll` and `hover`). */
+    scrollHideDelay?: number;
+    dir?: "ltr" | "rtl";
+    /** Scroll the x axis instead of the y axis (react-native ScrollView semantics). */
+    horizontal?: boolean;
+    children?: ReactNode;
+} & import("react").RefAttributes<GuiElement>>;
+export { ScrollArea, ScrollBar };

package/dist/backends/gui/select.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Select — the compound picker on @hanzogui/select.
+ *
+ * gui's `Select.Item` needs a positional `index`. Call sites should not have to
+ * count, so `SelectContent` walks its subtree once per render and stamps
+ * sequential indices on every `SelectItem` it finds — including items nested in a
+ * `SelectGroup`. An item is written `<SelectItem value="x">Label</SelectItem>`
+ * and the numbering always matches render order.
+ */
+import { Select as GuiSelect, SelectSeparator as GuiSelectSeparator } from '@hanzo/gui';
+import { type ComponentProps } from 'react';
+declare const Select: typeof GuiSelect;
+declare const SelectGroup: typeof GuiSelect.Group;
+declare const SelectValue: typeof GuiSelect.Value;
+export type SelectTriggerProps = ComponentProps<typeof GuiSelect.Trigger>;
+export type SelectContentProps = ComponentProps<typeof GuiSelect.Content>;
+export type SelectItemProps = Omit<ComponentProps<typeof GuiSelect.Item>, 'index'> & {
+    index?: number;
+};
+export type SelectLabelProps = ComponentProps<typeof GuiSelect.Label>;
+export type SelectSeparatorProps = ComponentProps<typeof GuiSelectSeparator>;
+export type SelectScrollButtonProps = ComponentProps<typeof GuiSelect.ScrollUpButton>;
+declare const SelectTrigger: ({ children, ...props }: SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectItem: ({ children, ...props }: SelectItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectScrollUpButton: (props: SelectScrollButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectScrollDownButton: (props: SelectScrollButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectContent: ({ children, ...props }: SelectContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectLabel: (props: SelectLabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectSeparator: (props: SelectSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/backends/gui/separator.d.ts

@@ -0,0 +1,10 @@
+/** Separator — a 1px rule on either axis. */
+import { Separator as GuiSeparator } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+export type SeparatorProps = Omit<ComponentProps<typeof GuiSeparator>, 'vertical'> & {
+    orientation?: 'horizontal' | 'vertical';
+    /** Radix parity — gui separators are always presentational. */
+    decorative?: boolean;
+};
+declare const Separator: ({ orientation, decorative: _decorative, ...props }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export { Separator };

package/dist/backends/gui/slider.d.ts

@@ -0,0 +1,6 @@
+/** Slider — 6px track, 16px thumb, `hitSlop` to the 44px touch floor. */
+import { Slider as GuiSlider } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+export type SliderProps = ComponentProps<typeof GuiSlider>;
+declare const Slider: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export { Slider };

package/dist/backends/gui/slot.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Web-only slot marker. gui forwards unrecognised props to the DOM node and
+ * native drops them, so this is the cross-platform way to keep the `data-slot`
+ * contract that app CSS and tests select on.
+ */
+export declare const slot: (name: string) => object;

package/dist/backends/gui/switch.d.ts

@@ -0,0 +1,6 @@
+/** Switch — 36×20 track, 16px thumb, `hitSlop` to the 44px touch floor. */
+import { Switch as GuiSwitch } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+export type SwitchProps = ComponentProps<typeof GuiSwitch>;
+declare const Switch: (props: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export { Switch };

package/dist/backends/gui/tabs.d.ts

@@ -0,0 +1,12 @@
+/** Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor. */
+import { Tabs as GuiTabs } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+export type TabsProps = ComponentProps<typeof GuiTabs>;
+export type TabsListProps = ComponentProps<typeof GuiTabs.List>;
+export type TabsTriggerProps = ComponentProps<typeof GuiTabs.Tab>;
+export type TabsContentProps = ComponentProps<typeof GuiTabs.Content>;
+declare const Tabs: (p: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabsList: (p: TabsListProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabsTrigger: ({ children, ...p }: TabsTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabsContent: (p: TabsContentProps) => import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/backends/gui/textarea.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+/**
+ * Textarea — standard-token multiline field.
+ *
+ * Auto-grow is line-driven rather than DOM-measured, so web, native and desktop
+ * grow identically: the row count follows the value and gui's
+ * `textAreaSizeVariant` turns rows into height.
+ * `rows` is the floor, not a fixed size.
+ */
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/backends/gui/toaster.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Toaster — the toast viewport, mounted once near the root of an app.
+ *
+ * gui already owns the whole thing: `@hanzogui/toast/v2` ships a sonner-shaped
+ * `toast()` observer and a `Toaster` that portals a themed, swipe-dismissable
+ * stack on web, native and desktop. So this is a prop translation, not a
+ * reimplementation.
+ *
+ * `className`, `style` and the per-part `classNames` are accepted and ignored:
+ * gui paints from theme tokens (`$background`, `$color`, `$borderColor`), the one
+ * styling channel that also exists on native. They stay in the type so existing
+ * call sites keep compiling.
+ */
+import type { GuiElement } from '@hanzogui/core';
+import { toast, type ExternalToast, type ToasterProps as GuiToasterProps } from '@hanzogui/toast/v2';
+/** Sonner's per-part class hooks. Inert — see the note above. */
+export type ToasterClassNames = Partial<Record<'toast' | 'title' | 'description' | 'icon' | 'actionButton' | 'cancelButton' | 'closeButton', string>>;
+export interface ToasterProps extends Omit<GuiToasterProps, 'toastOptions'> {
+    /** Inert. gui themes the viewport from tokens. */
+    className?: string;
+    /** Inert. gui themes the viewport from tokens. */
+    style?: Record<string, string | number>;
+    toastOptions?: ExternalToast & {
+        classNames?: ToasterClassNames;
+    };
+}
+declare const Toaster: import("react").ForwardRefExoticComponent<ToasterProps & import("react").RefAttributes<GuiElement>>;
+export { Toaster, toast };

package/dist/backends/gui/tooltip.d.ts

@@ -0,0 +1,12 @@
+/** Tooltip — hover/focus hint. `TooltipProvider` is gui's `TooltipGroup`. */
+import { Tooltip as GuiTooltip, TooltipGroup } from '@hanzo/gui';
+import { type ComponentProps } from 'react';
+export type TooltipProps = ComponentProps<typeof GuiTooltip>;
+export type TooltipContentProps = ComponentProps<typeof GuiTooltip.Content> & {
+    sideOffset?: number;
+};
+declare const Tooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipTrigger: typeof GuiTooltip.Trigger;
+declare const TooltipProvider: typeof TooltipGroup;
+declare const TooltipContent: ({ sideOffset: _sideOffset, children, ...props }: TooltipContentProps) => import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/chunk-2U3MNE4I.js

@@ -0,0 +1,4 @@
+'use client';
+export { colors, dark, fontFamily, fontSize, fontSizePx, fontWeight, hsl, letterSpacing, light, lineHeight, oklch, radii, radiiPx, spacing, spacingPx, themes, zinc } from '@hanzo/tokens';
+//# sourceMappingURL=chunk-2U3MNE4I.js.map
+//# sourceMappingURL=chunk-2U3MNE4I.js.map

package/dist/chunk-2U3MNE4I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-2U3MNE4I.js","sourcesContent":[]}

package/dist/chunk-6DDY6XZI.js

@@ -0,0 +1,53 @@
+'use client';
+import { DropdownMenu } from './chunk-PI3GSHLU.js';
+import { Button, Text } from '@hanzo/gui';
+import { ChevronDown } from '@hanzogui/lucide-icons-2';
+import { jsx } from 'react/jsx-runtime';
+
+function SelectMenu({
+  options,
+  value,
+  onChange,
+  allLabel = "All",
+  icon,
+  minWidth = 130,
+  required,
+  minHeight,
+  disabled,
+  ariaLabel
+}) {
+  const active = value === null ? null : options.find((o) => o.key === value) ?? null;
+  const triggerLabel = active ? active.label : allLabel;
+  const items = [
+    ...required ? [] : [{ key: "__all__", label: allLabel, selected: value === null, onSelect: () => onChange(null) }],
+    ...options.map((o) => ({ key: o.key, label: o.label, selected: value === o.key, onSelect: () => onChange(o.key) }))
+  ];
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      minWidth: Math.max(minWidth, 160),
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: minHeight && minHeight >= 40 ? "$4" : "$2",
+          minW: minWidth,
+          minH: minHeight,
+          disabled,
+          "aria-label": ariaLabel,
+          justify: "space-between",
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          bg: !required && value !== null ? "$color5" : "transparent",
+          icon,
+          iconAfter: /* @__PURE__ */ jsx(ChevronDown, { size: 14, opacity: 0.6 }),
+          children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", numberOfLines: 1, flex: 1, children: triggerLabel })
+        }
+      ),
+      items
+    }
+  );
+}
+
+export { SelectMenu };
+//# sourceMappingURL=chunk-6DDY6XZI.js.map
+//# sourceMappingURL=chunk-6DDY6XZI.js.map

package/dist/chunk-6DDY6XZI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/product/SelectMenu.tsx"],"names":[],"mappings":";;;;;AAwBO,SAAS,UAAA,CAA6B;AAAA,EAC3C,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,QAAA,GAAW,GAAA;AAAA,EACX,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAgBG;AACD,EAAA,MAAM,MAAA,GAAS,KAAA,KAAU,IAAA,GAAO,IAAA,GAAO,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,GAAA,KAAQ,KAAK,CAAA,IAAK,IAAA;AAC/E,EAAA,MAAM,YAAA,GAAe,MAAA,GAAS,MAAA,CAAO,KAAA,GAAQ,QAAA;AAE7C,EAAA,MAAM,KAAA,GAAwB;AAAA,IAC5B,GAAI,QAAA,GACA,KACA,CAAC,EAAE,KAAK,SAAA,EAAW,KAAA,EAAO,QAAA,EAAU,QAAA,EAAU,UAAU,IAAA,EAAM,QAAA,EAAU,MAAM,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IAClG,GAAG,QAAQ,GAAA,CAAI,CAAC,OAAO,EAAE,GAAA,EAAK,CAAA,CAAE,GAAA,EAAK,KAAA,EAAO,CAAA,CAAE,OAAO,QAAA,EAAU,KAAA,KAAU,EAAE,GAAA,EAAK,QAAA,EAAU,MAAM,QAAA,CAAS,CAAA,CAAE,GAAG,CAAA,EAAE,CAAE;AAAA,GACpH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,IAAA,CAAK,GAAA,CAAI,QAAA,EAAU,GAAG,CAAA;AAAA,MAChC,OAAA,kBACE,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAM,SAAA,IAAa,SAAA,IAAa,EAAA,GAAK,IAAA,GAAO,IAAA;AAAA,UAC5C,IAAA,EAAM,QAAA;AAAA,UACN,IAAA,EAAM,SAAA;AAAA,UACN,QAAA;AAAA,UACA,YAAA,EAAY,SAAA;AAAA,UACZ,OAAA,EAAQ,eAAA;AAAA,UACR,WAAA,EAAa,CAAA;AAAA,UACb,WAAA,EAAY,cAAA;AAAA,UACZ,EAAA,EAAI,CAAC,QAAA,IAAY,KAAA,KAAU,OAAO,SAAA,GAAY,aAAA;AAAA,UAC9C,IAAA;AAAA,UACA,2BAAW,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,EAAA,EAAI,SAAS,GAAA,EAAK,CAAA;AAAA,UAEhD,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,QAAA,EAAS,IAAA,EAAK,KAAA,EAAM,YAAW,aAAA,EAAe,CAAA,EAAG,IAAA,EAAM,CAAA,EAC1D,QAAA,EAAA,YAAA,EACH;AAAA;AAAA,OACF;AAAA,MAEF;AAAA;AAAA,GACF;AAEJ","file":"chunk-6DDY6XZI.js","sourcesContent":["'use client'\n\n/**\n * SelectMenu — a compact, reusable dropdown select. Renders a labelled trigger (\"All\n * types\", or the chosen option) and a menu list with a check on the active option.\n * Prop-driven + self-contained. `value === null` is the \"all\"/unfiltered state.\n *\n * `required` turns the same control into a \"pick exactly one of N\": the null row is\n * dropped and the value is never nullable. That is the SAME control, not a second\n * one — a required field picker and a filter differ only in whether \"none\" is an\n * option, so it stays one component rather than growing a fourth select.\n *\n * A thin DropdownMenu (the ONE menu mechanism) so it is pixel-identical to every other\n * menu and rides the same portal-theme-safe Portal path — no gui Popover, no Sheet\n * re-root, works on gui-native hosts.\n */\nimport type { ReactElement } from 'react'\nimport { Button, Text } from '@hanzo/gui'\nimport { ChevronDown } from '@hanzogui/lucide-icons-2'\nimport { DropdownMenu } from '../backends/gui/dropdown-menu'\nimport type { MenuItemSpec } from './menu/items'\n\nexport type SelectOption<T extends string> = { key: T; label: string }\n\nexport function SelectMenu<T extends string>({\n  options,\n  value,\n  onChange,\n  allLabel = 'All',\n  icon,\n  minWidth = 130,\n  required,\n  minHeight,\n  disabled,\n  ariaLabel,\n}: {\n  options: SelectOption<T>[]\n  value: T | null\n  onChange: (v: T | null) => void\n  /** Label shown (and first menu row) for the unfiltered `null` state. */\n  allLabel?: string\n  /** Optional leading icon in the trigger. */\n  icon?: ReactElement\n  minWidth?: number\n  /** Exactly one of `options` is always chosen — no \"all\"/none row. */\n  required?: boolean\n  /** Trigger height floor — pass the 44px tap floor on a phone. */\n  minHeight?: number\n  disabled?: boolean\n  /** Accessible name for an unlabelled trigger. */\n  ariaLabel?: string\n}) {\n  const active = value === null ? null : options.find((o) => o.key === value) ?? null\n  const triggerLabel = active ? active.label : allLabel\n\n  const items: MenuItemSpec[] = [\n    ...(required\n      ? []\n      : [{ key: '__all__', label: allLabel, selected: value === null, onSelect: () => onChange(null) }]),\n    ...options.map((o) => ({ key: o.key, label: o.label, selected: value === o.key, onSelect: () => onChange(o.key) })),\n  ]\n\n  return (\n    <DropdownMenu\n      minWidth={Math.max(minWidth, 160)}\n      trigger={\n        <Button\n          size={minHeight && minHeight >= 40 ? '$4' : '$2'}\n          minW={minWidth}\n          minH={minHeight}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          justify=\"space-between\"\n          borderWidth={1}\n          borderColor=\"$borderColor\"\n          bg={!required && value !== null ? '$color5' : 'transparent'}\n          icon={icon}\n          iconAfter={<ChevronDown size={14} opacity={0.6} />}\n        >\n          <Text fontSize=\"$2\" color=\"$color12\" numberOfLines={1} flex={1}>\n            {triggerLabel}\n          </Text>\n        </Button>\n      }\n      items={items}\n    />\n  )\n}\n"]}