@hanzo/ui 8.27.9 → 8.27.11

package/dist/backends/gui/combobox.cjs

@@ -0,0 +1,42 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = Combobox;
+exports.ComboboxWithIcons = ComboboxWithIcons;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Combobox — a searchable single-select built from `Popover` + `Command`.
+ *
+ * A `Button` trigger shows the selected option's label (or a placeholder), a
+ * filterable list drops from it, and picking an already-selected row clears
+ * the value. `Popover` owns open state, `Command` owns the search/selection
+ * state machine — this file is composition, not a new primitive.
+ */
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const button_1 = require("./button.cjs");
+const command_1 = require("./command.cjs");
+const popover_1 = require("./popover.cjs");
+function Combobox({ options, value, onChange, placeholder = 'Select option...', searchPlaceholder = 'Search...', emptyText = 'No option found.', disabled, width = 200, ...contentProps }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const id = (0, react_1.useId)();
+    const selected = options.find((option) => option.value === value);
+    return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, { "data-slot": "combobox-trigger", role: "combobox", "aria-expanded": open, "aria-controls": id, variant: "outline", disabled: disabled, width: width, justify: "space-between", children: [selected ? selected.label : placeholder, (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsUpDown, { size: 16, opacity: 0.5, shrink: 0 })] }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { id: id, "data-slot": "combobox-content", p: 0, width: width, ...contentProps, children: (0, jsx_runtime_1.jsxs)(command_1.Command, { children: [(0, jsx_runtime_1.jsx)(command_1.CommandInput, { placeholder: searchPlaceholder }), (0, jsx_runtime_1.jsxs)(command_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(command_1.CommandEmpty, { children: emptyText }), (0, jsx_runtime_1.jsx)(command_1.CommandGroup, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(command_1.CommandItem, { value: option.value, onSelect: (current) => {
+                                            onChange?.(current === value ? '' : current);
+                                            setOpen(false);
+                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16, opacity: option.value === value ? 1 : 0, shrink: 0 }), option.label] }, option.value))) })] })] }) })] }));
+}
+function ComboboxWithIcons({ options, value, onChange, placeholder = 'Select option...', searchPlaceholder = 'Search...', emptyText = 'No option found.', disabled, width = 200, ...contentProps }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const id = (0, react_1.useId)();
+    const selected = options.find((option) => option.value === value);
+    const SelectedIcon = selected?.icon;
+    return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { "data-slot": "combobox-trigger", role: "combobox", "aria-expanded": open, "aria-controls": id, variant: "outline", disabled: disabled, width: width, justify: "flex-start", children: selected && SelectedIcon ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(SelectedIcon, { size: 16 }), selected.label] })) : (placeholder) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { id: id, "data-slot": "combobox-content", p: 0, width: width, ...contentProps, children: (0, jsx_runtime_1.jsxs)(command_1.Command, { children: [(0, jsx_runtime_1.jsx)(command_1.CommandInput, { placeholder: searchPlaceholder }), (0, jsx_runtime_1.jsxs)(command_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(command_1.CommandEmpty, { children: emptyText }), (0, jsx_runtime_1.jsx)(command_1.CommandGroup, { children: options.map((option) => {
+                                        const Icon = option.icon;
+                                        return ((0, jsx_runtime_1.jsxs)(command_1.CommandItem, { value: option.value, onSelect: (current) => {
+                                                onChange?.(current === value ? '' : current);
+                                                setOpen(false);
+                                            }, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 16 }), option.label] }, option.value));
+                                    }) })] })] }) })] }));
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Combobox — a searchable single-select built from `Popover` + `Command`.
+ *
+ * A `Button` trigger shows the selected option's label (or a placeholder), a
+ * filterable list drops from it, and picking an already-selected row clears
+ * the value. `Popover` owns open state, `Command` owns the search/selection
+ * state machine — this file is composition, not a new primitive.
+ */
+import { type ComponentProps, type ComponentType } from 'react';
+import { PopoverContent } from './popover.js';
+export type ComboboxOption = {
+    value: string;
+    label: string;
+};
+export type ComboboxProps = Omit<ComponentProps<typeof PopoverContent>, 'children' | 'onChange'> & {
+    options: ComboboxOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+};
+declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyText, disabled, width, ...contentProps }: ComboboxProps): import("react").JSX.Element;
+/**
+ * A `Combobox` row that carries an icon beside its label — the "set status"
+ * pattern where each option also draws a glyph in the trigger once picked.
+ */
+export type ComboboxIconOption = ComboboxOption & {
+    icon: ComponentType<{
+        size?: number;
+    }>;
+};
+export type ComboboxWithIconsProps = Omit<ComboboxProps, 'options'> & {
+    options: ComboboxIconOption[];
+};
+declare function ComboboxWithIcons({ options, value, onChange, placeholder, searchPlaceholder, emptyText, disabled, width, ...contentProps }: ComboboxWithIconsProps): import("react").JSX.Element;
+export { Combobox, ComboboxWithIcons };
+//# sourceMappingURL=combobox.d.ts.map

package/dist/backends/gui/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/combobox.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,OAAO,EAAmB,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAahF,OAAO,EAAW,cAAc,EAAkB,MAAM,WAAW,CAAA;AAEnE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IACjG,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAgC,EAChC,iBAA+B,EAC/B,SAA8B,EAC9B,QAAQ,EACR,KAAW,EACX,GAAG,YAAY,EAChB,EAAE,aAAa,+BA+Cf;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,IAAI,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,GAAG;IACpE,OAAO,EAAE,kBAAkB,EAAE,CAAA;CAC9B,CAAA;AAED,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAgC,EAChC,iBAA+B,EAC/B,SAA8B,EAC9B,QAAQ,EACR,KAAW,EACX,GAAG,YAAY,EAChB,EAAE,sBAAsB,+BAyDxB;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/backends/gui/combobox.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Combobox — a searchable single-select built from `Popover` + `Command`.
+ *
+ * A `Button` trigger shows the selected option's label (or a placeholder), a
+ * filterable list drops from it, and picking an already-selected row clears
+ * the value. `Popover` owns open state, `Command` owns the search/selection
+ * state machine — this file is composition, not a new primitive.
+ */
+import { useId, useState } from 'react';
+import { XStack } from '@hanzo/gui';
+import { Check, ChevronsUpDown } from '@hanzogui/lucide-icons-2';
+import { Button } from './button.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from './command.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+function Combobox({ options, value, onChange, placeholder = 'Select option...', searchPlaceholder = 'Search...', emptyText = 'No option found.', disabled, width = 200, ...contentProps }) {
+    const [open, setOpen] = useState(false);
+    const id = useId();
+    const selected = options.find((option) => option.value === value);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { "data-slot": "combobox-trigger", role: "combobox", "aria-expanded": open, "aria-controls": id, variant: "outline", disabled: disabled, width: width, justify: "space-between", children: [selected ? selected.label : placeholder, _jsx(ChevronsUpDown, { size: 16, opacity: 0.5, shrink: 0 })] }) }), _jsx(PopoverContent, { id: id, "data-slot": "combobox-content", p: 0, width: width, ...contentProps, children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: searchPlaceholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyText }), _jsx(CommandGroup, { children: options.map((option) => (_jsxs(CommandItem, { value: option.value, onSelect: (current) => {
+                                            onChange?.(current === value ? '' : current);
+                                            setOpen(false);
+                                        }, children: [_jsx(Check, { size: 16, opacity: option.value === value ? 1 : 0, shrink: 0 }), option.label] }, option.value))) })] })] }) })] }));
+}
+function ComboboxWithIcons({ options, value, onChange, placeholder = 'Select option...', searchPlaceholder = 'Search...', emptyText = 'No option found.', disabled, width = 200, ...contentProps }) {
+    const [open, setOpen] = useState(false);
+    const id = useId();
+    const selected = options.find((option) => option.value === value);
+    const SelectedIcon = selected?.icon;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { "data-slot": "combobox-trigger", role: "combobox", "aria-expanded": open, "aria-controls": id, variant: "outline", disabled: disabled, width: width, justify: "flex-start", children: selected && SelectedIcon ? (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SelectedIcon, { size: 16 }), selected.label] })) : (placeholder) }) }), _jsx(PopoverContent, { id: id, "data-slot": "combobox-content", p: 0, width: width, ...contentProps, children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: searchPlaceholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyText }), _jsx(CommandGroup, { children: options.map((option) => {
+                                        const Icon = option.icon;
+                                        return (_jsxs(CommandItem, { value: option.value, onSelect: (current) => {
+                                                onChange?.(current === value ? '' : current);
+                                                setOpen(false);
+                                            }, children: [_jsx(Icon, { size: 16 }), option.label] }, option.value));
+                                    }) })] })] }) })] }));
+}
+export { Combobox, ComboboxWithIcons };
+//# sourceMappingURL=combobox.js.map

package/dist/backends/gui/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","sourceRoot":"","sources":["../../../src/backends/gui/combobox.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/company-profile.cjs

@@ -0,0 +1,43 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompanyProfile = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * CompanyProfile — a TradingView company-profile widget for one symbol, in a
+ * gui frame.
+ *
+ * The description, sector, and shareholder rows are TradingView's, drawn
+ * inside TradingView's own document, so the widget is an `<iframe>` and
+ * nothing here draws a pixel of it. What this owns is the frame around it and
+ * the settings the widget opens with — symbol, locale, theme — written into
+ * the iframe's address the way TradingView's own embed script writes them:
+ * `/embed-widget/symbol-profile/?locale=…#<settings as JSON>`. Nothing is
+ * fetched or injected at mount, so the markup is the same on the server and
+ * in the browser, and the frame has its height before the widget arrives.
+ *
+ * The iframe is keyed on that address. A browser treats a `src` that differs
+ * only in its fragment as a same-document navigation and does not reload, so
+ * without the key a new `symbol` would change the URL and leave the old
+ * widget on screen.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const EMBED = 'https://www.tradingview-widget.com/embed-widget/symbol-profile/?locale=';
+/** The settings TradingView reads, with the documented defaults filled in. */
+const settings = ({ symbol = 'NASDAQ:AAPL', width = '100%', height = 400, locale = 'en', colorTheme = 'dark', isTransparent = false, }) => ({
+    symbol,
+    width,
+    height,
+    colorTheme,
+    isTransparent,
+});
+const CompanyProfile = ({ symbol, width, height, locale = 'en', colorTheme, isTransparent, ...props }) => {
+    const s = settings({ symbol, width, height, locale, colorTheme, isTransparent });
+    const src = `${EMBED}${locale}#${encodeURIComponent(JSON.stringify(s))}`;
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('company-profile'), "data-symbol": s.symbol, "data-color-theme": s.colorTheme, 
+        // The documented size is TradingView's — a number or a percent string —
+        // and gui declares a narrower one; on web both reach CSS as written.
+        width: s.width, height: s.height, overflow: "hidden", position: "relative", bg: "$panel", ...props, children: gui_1.isWeb && ((0, jsx_runtime_1.jsx)("iframe", { src: src, title: `${s.symbol} company profile`, loading: "lazy", scrolling: "no", style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
+};
+exports.CompanyProfile = CompanyProfile;

package/dist/backends/gui/company-profile.d.ts

@@ -0,0 +1,33 @@
+/**
+ * CompanyProfile — a TradingView company-profile widget for one symbol, in a
+ * gui frame.
+ *
+ * The description, sector, and shareholder rows are TradingView's, drawn
+ * inside TradingView's own document, so the widget is an `<iframe>` and
+ * nothing here draws a pixel of it. What this owns is the frame around it and
+ * the settings the widget opens with — symbol, locale, theme — written into
+ * the iframe's address the way TradingView's own embed script writes them:
+ * `/embed-widget/symbol-profile/?locale=…#<settings as JSON>`. Nothing is
+ * fetched or injected at mount, so the markup is the same on the server and
+ * in the browser, and the frame has its height before the widget arrives.
+ *
+ * The iframe is keyed on that address. A browser treats a `src` that differs
+ * only in its fragment as a same-document navigation and does not reload, so
+ * without the key a new `symbol` would change the URL and leave the old
+ * widget on screen.
+ */
+import { type YStackProps } from '@hanzo/gui';
+export type CompanyProfileTheme = 'light' | 'dark';
+export interface CompanyProfileProps extends Omit<YStackProps, 'width' | 'height' | 'colorTheme'> {
+    /** The symbol to describe, exchange-qualified. */
+    symbol?: string;
+    width?: string | number;
+    height?: string | number;
+    locale?: string;
+    /** The widget's own palette; independent of the surrounding gui theme. */
+    colorTheme?: CompanyProfileTheme;
+    isTransparent?: boolean;
+}
+declare const CompanyProfile: ({ symbol, width, height, locale, colorTheme, isTransparent, ...props }: CompanyProfileProps) => import("react").JSX.Element;
+export { CompanyProfile };
+//# sourceMappingURL=company-profile.d.ts.map

package/dist/backends/gui/company-profile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-profile.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/company-profile.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAG5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,CAAA;AAElD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,YAAY,CAAC;IAC/F,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0EAA0E;IAC1E,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAChC,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAoBD,QAAA,MAAM,cAAc,2EAQjB,mBAAmB,gCA6BrB,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/backends/gui/company-profile.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * CompanyProfile — a TradingView company-profile widget for one symbol, in a
+ * gui frame.
+ *
+ * The description, sector, and shareholder rows are TradingView's, drawn
+ * inside TradingView's own document, so the widget is an `<iframe>` and
+ * nothing here draws a pixel of it. What this owns is the frame around it and
+ * the settings the widget opens with — symbol, locale, theme — written into
+ * the iframe's address the way TradingView's own embed script writes them:
+ * `/embed-widget/symbol-profile/?locale=…#<settings as JSON>`. Nothing is
+ * fetched or injected at mount, so the markup is the same on the server and
+ * in the browser, and the frame has its height before the widget arrives.
+ *
+ * The iframe is keyed on that address. A browser treats a `src` that differs
+ * only in its fragment as a same-document navigation and does not reload, so
+ * without the key a new `symbol` would change the URL and leave the old
+ * widget on screen.
+ */
+import { YStack, isWeb } from '@hanzo/gui';
+import { slot } from './slot.js';
+const EMBED = 'https://www.tradingview-widget.com/embed-widget/symbol-profile/?locale=';
+/** The settings TradingView reads, with the documented defaults filled in. */
+const settings = ({ symbol = 'NASDAQ:AAPL', width = '100%', height = 400, locale = 'en', colorTheme = 'dark', isTransparent = false, }) => ({
+    symbol,
+    width,
+    height,
+    colorTheme,
+    isTransparent,
+});
+const CompanyProfile = ({ symbol, width, height, locale = 'en', colorTheme, isTransparent, ...props }) => {
+    const s = settings({ symbol, width, height, locale, colorTheme, isTransparent });
+    const src = `${EMBED}${locale}#${encodeURIComponent(JSON.stringify(s))}`;
+    return (_jsx(YStack, { ...slot('company-profile'), "data-symbol": s.symbol, "data-color-theme": s.colorTheme, 
+        // The documented size is TradingView's — a number or a percent string —
+        // and gui declares a narrower one; on web both reach CSS as written.
+        width: s.width, height: s.height, overflow: "hidden", position: "relative", bg: "$panel", ...props, children: isWeb && (_jsx("iframe", { src: src, title: `${s.symbol} company profile`, loading: "lazy", scrolling: "no", style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
+};
+export { CompanyProfile };
+//# sourceMappingURL=company-profile.js.map

package/dist/backends/gui/company-profile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-profile.js","sourceRoot":"","sources":["../../../src/backends/gui/company-profile.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,MAAM,EAAE,KAAK,EAAoB,MAAM,YAAY,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAe7B,MAAM,KAAK,GAAG,yEAAyE,CAAA;AAEvF,8EAA8E;AAC9E,MAAM,QAAQ,GAAG,CAAC,EAChB,MAAM,GAAG,aAAa,EACtB,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,GAAG,EACZ,MAAM,GAAG,IAAI,EACb,UAAU,GAAG,MAAM,EACnB,aAAa,GAAG,KAAK,GACD,EAAE,EAAE,CAAC,CAAC;IAC1B,MAAM;IACN,KAAK;IACL,MAAM;IACN,UAAU;IACV,aAAa;CACd,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG,CAAC,EACtB,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,GAAG,IAAI,EACb,UAAU,EACV,aAAa,EACb,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAA;IAChF,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,MAAM,IAAI,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACxE,OAAO,CACL,KAAC,MAAM,OACD,IAAI,CAAC,iBAAiB,CAAC,iBACd,CAAC,CAAC,MAAM,sBACH,CAAC,CAAC,UAAU;QAC9B,wEAAwE;QACxE,qEAAqE;QACrE,KAAK,EAAE,CAAC,CAAC,KAA6B,EACtC,MAAM,EAAE,CAAC,CAAC,MAA+B,EACzC,QAAQ,EAAC,QAAQ,EACjB,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,QAAQ,KACP,KAAK,YAER,KAAK,IAAI,CACR,iBAEE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,kBAAkB,EACpC,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,IAAI,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,IALhE,GAAG,CAMR,CACH,GACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/backends/gui/comparison.cjs

@@ -0,0 +1,39 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Comparison = Comparison;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Comparison — a plan/feature grid: one column per plan, one row per feature.
+ *
+ * Columns are laid out with `Grid`/`Cell` (real CSS grid, tracks owned by the
+ * container) rather than a row of stacks, so every column stays the same
+ * width regardless of its content. A boolean item renders as a check or an
+ * cross; a string item renders as text.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const grid_1 = require("../../grid.cjs");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const ColumnFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'ComparisonColumn',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    rounded: '$4',
+    p: '$5',
+    gap: '$4',
+    variants: {
+        highlighted: {
+            true: { borderColor: '$color', shadowColor: '$shadowColor', shadowRadius: 12, shadowOpacity: 0.15 },
+        },
+    },
+});
+const Title = (0, gui_1.styled)(gui_1.SizableText, { name: 'ComparisonTitle', size: '$5', fontWeight: '600' });
+const Label = (0, gui_1.styled)(gui_1.SizableText, { name: 'ComparisonLabel', size: '$2' });
+const Value = (0, gui_1.styled)(gui_1.SizableText, { name: 'ComparisonValue', size: '$2', fontWeight: '600' });
+const Row = (0, gui_1.styled)(gui_1.XStack, { name: 'ComparisonRow', items: 'center', gap: '$3' });
+const mark = (value) => typeof value === 'boolean' ? (value ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { ...(0, slot_1.slot)('comparison-item-check'), size: 18, color: "$green9" })) : ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { ...(0, slot_1.slot)('comparison-item-cross'), size: 18, color: "$red9" }))) : ((0, jsx_runtime_1.jsx)(Value, { children: value }));
+function Comparison({ columns, gap = '$4', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(grid_1.Grid, { ...(0, slot_1.slot)('comparison'), columns: columns.length || 1, gap: gap, ...props, children: columns.map((column, i) => ((0, jsx_runtime_1.jsx)(grid_1.Cell, { children: (0, jsx_runtime_1.jsxs)(ColumnFrame, { ...(0, slot_1.slot)('comparison-column'), "data-highlighted": column.highlighted ? '' : undefined, highlighted: column.highlighted, children: [(0, ink_1.ink)(column.title, Title), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$3", children: column.items.map((item, j) => ((0, jsx_runtime_1.jsxs)(Row, { ...(0, slot_1.slot)('comparison-item'), children: [mark(item.value), (0, jsx_runtime_1.jsx)(Label, { children: item.label })] }, j))) })] }) }, i))) }));
+}

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

@@ -0,0 +1,15 @@
+import { type GridProps } from '../../grid.js';
+export interface ComparisonItem {
+    label: string;
+    value: boolean | string;
+}
+export interface ComparisonColumn {
+    title: string;
+    items: ComparisonItem[];
+    highlighted?: boolean;
+}
+export type ComparisonProps = Omit<GridProps, 'columns' | 'children'> & {
+    columns: ComparisonColumn[];
+};
+export declare function Comparison({ columns, gap, ...props }: ComparisonProps): import("react").JSX.Element;
+//# sourceMappingURL=comparison.d.ts.map

package/dist/backends/gui/comparison.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/comparison.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAIvD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,GAAG,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAkCD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IACtE,OAAO,EAAE,gBAAgB,EAAE,CAAA;CAC5B,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,GAAU,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAwB5E"}

package/dist/backends/gui/comparison.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Comparison — a plan/feature grid: one column per plan, one row per feature.
+ *
+ * Columns are laid out with `Grid`/`Cell` (real CSS grid, tracks owned by the
+ * container) rather than a row of stacks, so every column stays the same
+ * width regardless of its content. A boolean item renders as a check or an
+ * cross; a string item renders as text.
+ */
+import { SizableText, YStack, XStack, styled } from '@hanzo/gui';
+import { Check, X } from '@hanzogui/lucide-icons-2';
+import { Grid, Cell } from '../../grid.js';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+const ColumnFrame = styled(YStack, {
+    name: 'ComparisonColumn',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    rounded: '$4',
+    p: '$5',
+    gap: '$4',
+    variants: {
+        highlighted: {
+            true: { borderColor: '$color', shadowColor: '$shadowColor', shadowRadius: 12, shadowOpacity: 0.15 },
+        },
+    },
+});
+const Title = styled(SizableText, { name: 'ComparisonTitle', size: '$5', fontWeight: '600' });
+const Label = styled(SizableText, { name: 'ComparisonLabel', size: '$2' });
+const Value = styled(SizableText, { name: 'ComparisonValue', size: '$2', fontWeight: '600' });
+const Row = styled(XStack, { name: 'ComparisonRow', items: 'center', gap: '$3' });
+const mark = (value) => typeof value === 'boolean' ? (value ? (_jsx(Check, { ...slot('comparison-item-check'), size: 18, color: "$green9" })) : (_jsx(X, { ...slot('comparison-item-cross'), size: 18, color: "$red9" }))) : (_jsx(Value, { children: value }));
+export function Comparison({ columns, gap = '$4', ...props }) {
+    return (_jsx(Grid, { ...slot('comparison'), columns: columns.length || 1, gap: gap, ...props, children: columns.map((column, i) => (_jsx(Cell, { children: _jsxs(ColumnFrame, { ...slot('comparison-column'), "data-highlighted": column.highlighted ? '' : undefined, highlighted: column.highlighted, children: [ink(column.title, Title), _jsx(YStack, { gap: "$3", children: column.items.map((item, j) => (_jsxs(Row, { ...slot('comparison-item'), children: [mark(item.value), _jsx(Label, { children: item.label })] }, j))) })] }) }, i))) }));
+}
+//# sourceMappingURL=comparison.js.map

package/dist/backends/gui/comparison.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison.js","sourceRoot":"","sources":["../../../src/backends/gui/comparison.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/credit-card.cjs

@@ -0,0 +1,80 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreditCard = CreditCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * CreditCard — a payment-card face at the standard 1.586:1 ratio, showing a
+ * number, a holder name, an expiry and an optional CVV.
+ *
+ * `default` is a dark plate (a chip icon, the number, holder and expiry);
+ * `minimal` is the same layout on a bordered surface, for a page that already
+ * carries its own color.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const slot_1 = require("./slot.cjs");
+const RATIO = 1.586;
+const Frame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'CreditCard',
+    position: 'relative',
+    width: '100%',
+    maxW: 384,
+    rounded: '$6',
+    p: '$6',
+    justify: 'space-between',
+    variants: {
+        variant: {
+            default: {
+                bg: '$ink',
+                borderWidth: 0,
+                shadowColor: '$dim',
+                shadowRadius: 24,
+                shadowOpacity: 0.35,
+            },
+            minimal: {
+                bg: '$background',
+                borderWidth: 2,
+                borderColor: '$borderColor',
+            },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const Row = (0, gui_1.styled)(gui_1.XStack, { name: 'CreditCardRow', justify: 'space-between', items: 'flex-start' });
+const Label = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'CreditCardLabel',
+    size: '$1',
+    variants: {
+        variant: {
+            default: { color: '$sunken', opacity: 0.7 },
+            minimal: { color: '$quiet' },
+        },
+    },
+});
+const Value = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'CreditCardValue',
+    size: '$3',
+    fontWeight: '600',
+    variants: {
+        variant: {
+            default: { color: '$sunken' },
+            minimal: { color: '$color' },
+        },
+    },
+});
+const Number = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'CreditCardNumber',
+    size: '$5',
+    letterSpacing: 3,
+    variants: {
+        variant: {
+            default: { color: '$sunken' },
+            minimal: { color: '$color' },
+        },
+    },
+});
+function CreditCard({ number = '•••• •••• •••• ••••', name = 'CARD HOLDER', expiry = 'MM/YY', cvv, variant = 'default', ...props }) {
+    const resolved = variant ?? 'default';
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ...(0, slot_1.slot)('credit-card'), "data-variant": resolved, variant: resolved, aspectRatio: RATIO, ...props, children: [(0, jsx_runtime_1.jsxs)(Row, { children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.CreditCard, { size: 40, color: resolved === 'default' ? '$sunken' : '$ink' }), cvv && ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('credit-card-cvv'), bg: resolved === 'default' ? '$hover' : '$panel', rounded: "$2", px: "$2", py: "$1", children: (0, jsx_runtime_1.jsxs)(Label, { ...(0, slot_1.slot)('credit-card-cvv-value'), variant: resolved, children: ["CVV: ", cvv] }) }))] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$4", children: [(0, jsx_runtime_1.jsx)(Number, { ...(0, slot_1.slot)('credit-card-number'), variant: resolved, children: number }), (0, jsx_runtime_1.jsxs)(Row, { items: "flex-end", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { children: [(0, jsx_runtime_1.jsx)(Label, { variant: resolved, children: "Card Holder" }), (0, jsx_runtime_1.jsx)(Value, { ...(0, slot_1.slot)('credit-card-name'), variant: resolved, children: name })] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { items: "flex-end", children: [(0, jsx_runtime_1.jsx)(Label, { variant: resolved, children: "Expires" }), (0, jsx_runtime_1.jsx)(Value, { ...(0, slot_1.slot)('credit-card-expiry'), variant: resolved, children: expiry })] })] })] })] }));
+}

package/dist/backends/gui/credit-card.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react';
+export type CreditCardVariant = 'default' | 'minimal';
+declare const Frame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    variant?: "default" | "minimal" | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type CreditCardProps = Omit<ComponentProps<typeof Frame>, 'variant' | 'children'> & {
+    /** The card number, formatted or masked by the caller. */
+    number?: string;
+    /** The name printed on the card. */
+    name?: string;
+    /** MM/YY expiry, printed as given. */
+    expiry?: string;
+    /** Security code, shown only when set. */
+    cvv?: string;
+    variant?: CreditCardVariant | null;
+};
+export declare function CreditCard({ number, name, expiry, cvv, variant, ...props }: CreditCardProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=credit-card.d.ts.map

package/dist/backends/gui/credit-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"credit-card.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/credit-card.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAA;AAIrD,QAAA,MAAM,KAAK;;;;8CA2BT,CAAA;AA0CF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IACzF,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;CACnC,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,MAA8B,EAC9B,IAAoB,EACpB,MAAgB,EAChB,GAAG,EACH,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,eAAe,+BAgDjB"}

package/dist/backends/gui/credit-card.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CreditCard — a payment-card face at the standard 1.586:1 ratio, showing a
+ * number, a holder name, an expiry and an optional CVV.
+ *
+ * `default` is a dark plate (a chip icon, the number, holder and expiry);
+ * `minimal` is the same layout on a bordered surface, for a page that already
+ * carries its own color.
+ */
+import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import { CreditCard as CreditCardIcon } from '@hanzogui/lucide-icons-2';
+import { slot } from './slot.js';
+const RATIO = 1.586;
+const Frame = styled(YStack, {
+    name: 'CreditCard',
+    position: 'relative',
+    width: '100%',
+    maxW: 384,
+    rounded: '$6',
+    p: '$6',
+    justify: 'space-between',
+    variants: {
+        variant: {
+            default: {
+                bg: '$ink',
+                borderWidth: 0,
+                shadowColor: '$dim',
+                shadowRadius: 24,
+                shadowOpacity: 0.35,
+            },
+            minimal: {
+                bg: '$background',
+                borderWidth: 2,
+                borderColor: '$borderColor',
+            },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const Row = styled(XStack, { name: 'CreditCardRow', justify: 'space-between', items: 'flex-start' });
+const Label = styled(SizableText, {
+    name: 'CreditCardLabel',
+    size: '$1',
+    variants: {
+        variant: {
+            default: { color: '$sunken', opacity: 0.7 },
+            minimal: { color: '$quiet' },
+        },
+    },
+});
+const Value = styled(SizableText, {
+    name: 'CreditCardValue',
+    size: '$3',
+    fontWeight: '600',
+    variants: {
+        variant: {
+            default: { color: '$sunken' },
+            minimal: { color: '$color' },
+        },
+    },
+});
+const Number = styled(SizableText, {
+    name: 'CreditCardNumber',
+    size: '$5',
+    letterSpacing: 3,
+    variants: {
+        variant: {
+            default: { color: '$sunken' },
+            minimal: { color: '$color' },
+        },
+    },
+});
+export function CreditCard({ number = '•••• •••• •••• ••••', name = 'CARD HOLDER', expiry = 'MM/YY', cvv, variant = 'default', ...props }) {
+    const resolved = variant ?? 'default';
+    return (_jsxs(Frame, { ...slot('credit-card'), "data-variant": resolved, variant: resolved, aspectRatio: RATIO, ...props, children: [_jsxs(Row, { children: [_jsx(CreditCardIcon, { size: 40, color: resolved === 'default' ? '$sunken' : '$ink' }), cvv && (_jsx(XStack, { ...slot('credit-card-cvv'), bg: resolved === 'default' ? '$hover' : '$panel', rounded: "$2", px: "$2", py: "$1", children: _jsxs(Label, { ...slot('credit-card-cvv-value'), variant: resolved, children: ["CVV: ", cvv] }) }))] }), _jsxs(YStack, { gap: "$4", children: [_jsx(Number, { ...slot('credit-card-number'), variant: resolved, children: number }), _jsxs(Row, { items: "flex-end", children: [_jsxs(YStack, { children: [_jsx(Label, { variant: resolved, children: "Card Holder" }), _jsx(Value, { ...slot('credit-card-name'), variant: resolved, children: name })] }), _jsxs(YStack, { items: "flex-end", children: [_jsx(Label, { variant: resolved, children: "Expires" }), _jsx(Value, { ...slot('credit-card-expiry'), variant: resolved, children: expiry })] })] })] })] }));
+}
+//# sourceMappingURL=credit-card.js.map

package/dist/backends/gui/credit-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"credit-card.js","sourceRoot":"","sources":["../../../src/backends/gui/credit-card.tsx"],"names":[],"mappings":"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"}