@glasshome/ui 1.6.0 → 2.0.0

package/dist/solid/input-group.d.ts

@@ -40,33 +40,45 @@ declare const inputGroupButtonVariants: import("cva").CVAComponent<Omit<{
     base: string;
     variants: {
         size: {
+            /** @deprecated Use "sm". */
             xs: string;
             sm: string;
+            default: string;
+            /** @deprecated Use "icon-sm". */
             "icon-xs": string;
             "icon-sm": string;
+            "icon-default": string;
         };
     };
     defaultVariants: {
-        size: "xs";
+        size: "sm";
     };
 }, "defaultVariants"> & {
     variants: {
         size: {
+            /** @deprecated Use "sm". */
             xs: string;
             sm: string;
+            default: string;
+            /** @deprecated Use "icon-sm". */
             "icon-xs": string;
             "icon-sm": string;
+            "icon-default": string;
         };
     };
     defaultVariants: Omit<{}, "size"> & {
-        size: "xs";
+        size: "sm";
     };
 }, {
     size: {
+        /** @deprecated Use "sm". */
         xs: string;
         sm: string;
+        default: string;
+        /** @deprecated Use "icon-sm". */
         "icon-xs": string;
         "icon-sm": string;
+        "icon-default": string;
     };
 }>;
 declare const InputGroupButton: Component<Omit<ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>>;

package/dist/solid/item.d.ts

@@ -51,37 +51,13 @@ declare const Item: Component<ComponentProps<"div"> & VariantProps<typeof itemVa
     as?: ValidComponent;
     href?: string;
 }>;
-declare const itemMediaVariants: import("cva").CVAComponent<Omit<{
-    base: string;
-    variants: {
-        variant: {
-            default: string;
-            icon: string;
-            image: string;
-        };
-    };
-    defaultVariants: {
-        variant: "default";
-    };
-}, "defaultVariants"> & {
-    variants: {
-        variant: {
-            default: string;
-            icon: string;
-            image: string;
-        };
-    };
-    defaultVariants: Omit<{}, "variant"> & {
-        variant: "default";
-    };
-}, {
-    variant: {
-        default: string;
-        icon: string;
-        image: string;
-    };
+type ItemMediaKind = "icon" | "image";
+declare const ItemMedia: Component<ComponentProps<"div"> & {
+    /** The well the media sits in. Omit for bare content. */
+    media?: ItemMediaKind;
+    /** @deprecated `media` */
+    variant?: ItemMediaKind | "default";
 }>;
-declare const ItemMedia: Component<ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>>;
 declare const ItemContent: Component<ComponentProps<"div">>;
 declare const ItemTitle: Component<ComponentProps<"div">>;
 declare const ItemDescription: Component<ComponentProps<"p">>;

package/dist/solid/menu-parts.d.ts

@@ -0,0 +1,47 @@
+import { DropdownMenu as MenuPrimitive } from "@kobalte/core/dropdown-menu";
+import { type Component, type ComponentProps, type ParentComponent } from "solid-js";
+export declare const MENU_CONTENT_CLASS: string;
+/** Every menu content and sub content wraps its rows in one sliding highlight,
+ *  keyed off Kobalte's roving-focus attribute. The highlighted row's own
+ *  --glass-tone (set inline by MenuItemPart) is mirrored onto the indicator,
+ *  since --glass-tone does not inherit and the indicator is a sibling, not
+ *  an ancestor, of the rows it highlights. */
+export declare const MenuContentIndicator: ParentComponent;
+type ToneProps = {
+    tone?: string;
+    /** @deprecated pass `tone="var(--destructive)"` instead */
+    variant?: "default" | "destructive";
+};
+type MenuItemProps = ComponentProps<typeof MenuPrimitive.Item> & ToneProps & {
+    inset?: boolean;
+    slotName: string;
+    style?: Record<string, string>;
+};
+export declare const MenuItemPart: Component<MenuItemProps>;
+type MenuLabelProps = ComponentProps<typeof MenuPrimitive.GroupLabel> & {
+    inset?: boolean;
+    slotName: string;
+};
+export declare const MenuLabelPart: Component<MenuLabelProps>;
+type MenuSeparatorProps = ComponentProps<typeof MenuPrimitive.Separator> & {
+    slotName: string;
+};
+export declare const MenuSeparatorPart: Component<MenuSeparatorProps>;
+type MenuSubTriggerProps = ComponentProps<typeof MenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+    slotName: string;
+};
+export declare const MenuSubTriggerPart: ParentComponent<MenuSubTriggerProps>;
+type MenuSubContentProps = ComponentProps<typeof MenuPrimitive.SubContent> & {
+    slotName: string;
+};
+export declare const MenuSubContentPart: ParentComponent<MenuSubContentProps>;
+type MenuCheckboxItemProps = ComponentProps<typeof MenuPrimitive.CheckboxItem> & {
+    slotName: string;
+};
+export declare const MenuCheckboxItemPart: ParentComponent<MenuCheckboxItemProps>;
+type MenuRadioItemProps = ComponentProps<typeof MenuPrimitive.RadioItem> & {
+    slotName: string;
+};
+export declare const MenuRadioItemPart: ParentComponent<MenuRadioItemProps>;
+export {};

package/dist/solid/option-card.d.ts

@@ -1,4 +1,11 @@
 import { type JSX } from "solid-js";
+export declare function OptionChoice(props: {
+    value: string;
+    label: string;
+    hint?: string;
+    icon?: string;
+    disabled?: boolean;
+}): JSX.Element;
 export declare function OptionCardGroup(props: {
     value: string | null;
     onChange: (value: string) => void;
@@ -11,7 +18,20 @@ export declare function OptionCard(props: {
     title: string;
     description?: string;
     icon?: string;
+    iconImage?: string;
+    /** Per-option tone at rest (setup's brand colours); neutral by default. */
+    accentVar?: string;
+    /** Drop the check when picking the card is itself the next step. */
+    ornament?: "check" | "none";
+    /** Fires on every click, including a re-pick of the already-checked card,
+     *  which the group's `onChange` alone never reports. */
+    onPick?: () => void;
     disabled?: boolean;
     class?: string;
+    /** The current sub-option (an OptionChoice value). */
+    subValue?: string;
+    onSubChange?: (value: string) => void;
+    /** Sub-options (OptionChoice rows) or a custom body. The card grows to
+     *  reveal them while it is picked. */
     children?: JSX.Element;
 }): JSX.Element;

package/dist/solid/ornament.d.ts

@@ -0,0 +1,3 @@
+export declare function Ornament(props: {
+    kind: "arrow" | "check" | "none";
+}): import("solid-js").JSX.Element;

package/dist/solid/page-header.d.ts

@@ -1,5 +1,15 @@
 import { type JSX } from "solid-js";
-import type { GlassSurface } from "./section-card.js";
+import { type GlassSurface } from "./section-card.js";
+/**
+ * Page banner header, shared by dash and hub: the card surface with a primary
+ * glow and an optional logo watermark. Content is a superset API: icon/iconNode
+ * + title + count pill + subtitle on the left, actions on the right. The caller
+ * owns the space around it.
+ *
+ * `glass` is dash's performant-blur injection (like SectionCard); omit (hub) for
+ * a normal frosted banner. `logo` is the watermark image src; omit for no
+ * watermark (the package ships no asset).
+ */
 export declare function PageHeader(props: {
     /** Iconify icon name for the banner glyph. */
     icon?: string;

package/dist/solid/picker-row.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentProps, type JSX, type ValidComponent } from "solid-js";
+export declare const PICKER_ROW_HEIGHT = 52;
+type PickerRowProps = Omit<ComponentProps<"button">, "title"> & {
+    as?: ValidComponent;
+    icon?: string;
+    title: JSX.Element;
+    subtitle?: JSX.Element;
+    meta?: JSX.Element;
+    selected: boolean;
+    multi: boolean;
+    dimmed?: boolean;
+};
+export declare function PickerRow(props: PickerRowProps): JSX.Element;
+export {};

package/dist/solid/picker-search.d.ts

@@ -0,0 +1,15 @@
+import { type JSX } from "solid-js";
+export interface PickerSearchProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "class"> {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Rendered leading; the row is a divider, not a nested field. */
+    icon?: string;
+    /** Trailing button that empties the query; hidden while it is empty. */
+    clearLabel?: string;
+    class?: string;
+    inputRef?: (el: HTMLInputElement) => void;
+    /** "touch" is the sheet row: a picker that opens as a bottom sheet makes this
+     *  its primary control, so it takes the full touch target. */
+    size?: "default" | "touch";
+}
+export declare function PickerSearch(props: PickerSearchProps): JSX.Element;

package/dist/solid/popover.d.ts

@@ -1,26 +1,17 @@
 import { Popover as PopoverPrimitive } from "@kobalte/core/popover";
 import { type Component, type ComponentProps } from "solid-js";
-declare const Popover: typeof import("@kobalte/core/popover").Root & {
-    Anchor: typeof import("@kobalte/core/popover").Anchor;
-    Arrow: typeof import("@kobalte/core/popover").Arrow;
-    CloseButton: typeof import("@kobalte/core/popover").CloseButton;
-    Content: typeof import("@kobalte/core/popover").Content;
-    Description: typeof import("@kobalte/core/popover").Description;
-    Portal: typeof import("@kobalte/core/popover").Portal;
-    Title: typeof import("@kobalte/core/popover").Title;
-    Trigger: typeof import("@kobalte/core/popover").Trigger;
+type PopoverSurface = "overlay" | "field";
+type PopoverProps = ComponentProps<typeof PopoverPrimitive> & {
+    /** "field" anchors the panel over the trigger's top edge, so the field reads
+     *  as expanding into its panel instead of a box dropping in below it. */
+    surface?: PopoverSurface;
 };
+type PopoverStatics = Omit<typeof PopoverPrimitive, never>;
+declare const Popover: Component<PopoverProps> & PopoverStatics;
 declare const PopoverTrigger: Component<ComponentProps<typeof PopoverPrimitive.Trigger>>;
 type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content> & {
-    /** "field" wears the concave input surface, the way SelectContent does. */
-    surface?: "overlay" | "field";
+    surface?: PopoverSurface;
 };
 declare const PopoverContent: Component<PopoverContentProps>;
 declare const PopoverAnchor: Component<ComponentProps<typeof PopoverPrimitive.Anchor>>;
-declare const anchorToTriggerTop: (anchor?: HTMLElement) => {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-export { anchorToTriggerTop, Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/solid/progress.d.ts

@@ -2,5 +2,6 @@ import { Progress as ProgressPrimitive } from "@kobalte/core/progress";
 import { type Component, type ComponentProps } from "solid-js";
 declare const Progress: Component<ComponentProps<typeof ProgressPrimitive> & {
     value?: number;
+    tone?: string;
 }>;
 export { Progress };

package/dist/solid/responsive-dialog.d.ts

@@ -1,20 +1,30 @@
 import type { VariantProps } from "cva";
-import { type Component, type ComponentProps, type JSX, type ParentComponent } from "solid-js";
+import { type Component, type ComponentProps, type JSX, type ParentComponent, type ValidComponent } from "solid-js";
 import type { buttonVariants } from "../lib/button-variants.js";
+import { type ModalSize } from "./dialog-parts.js";
 interface ResponsiveDialogProps {
     children: JSX.Element;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     defaultOpen?: boolean;
 }
+/** Centred kobalte dialog from `sm` up, drag-to-dismiss bottom sheet below it.
+ *  Both branches render the same parts, so a call site never branches. */
 declare const ResponsiveDialog: ParentComponent<ResponsiveDialogProps>;
-declare const ResponsiveDialogTrigger: ParentComponent<ComponentProps<"button">>;
-declare const ResponsiveDialogContent: ParentComponent<ComponentProps<"div">>;
-declare const ResponsiveDialogHeader: Component<ComponentProps<"div">>;
+declare const ResponsiveDialogTrigger: ParentComponent<ComponentProps<"button"> & {
+    as?: ValidComponent;
+}>;
+type ResponsiveDialogContentProps = ComponentProps<"div"> & {
+    /** Desktop panel width. The mobile sheet is always full width. */
+    size?: ModalSize;
+    /** Names a panel that has no `ResponsiveDialogTitle`. */
+    ariaLabel?: string;
+};
+declare const ResponsiveDialogContent: ParentComponent<ResponsiveDialogContentProps>;
+declare const ResponsiveDialogHeader: Component<import("./dialog-parts.js").ModalHeaderProps>, ResponsiveDialogBody: Component<import("./dialog-parts.js").ModalBodyProps>, ResponsiveDialogFooter: Component<JSX.HTMLAttributes<HTMLDivElement>>;
 declare const ResponsiveDialogTitle: Component<ComponentProps<"h2">>;
 declare const ResponsiveDialogDescription: Component<ComponentProps<"p">>;
-declare const ResponsiveDialogFooter: Component<ComponentProps<"div">>;
 /** Defaults to the footer's outline button; an icon-only close passes `ghost`
  *  so the glyph is not boxed. */
 declare const ResponsiveDialogClose: ParentComponent<ComponentProps<"button"> & VariantProps<typeof buttonVariants>>;
-export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger, };
+export { ResponsiveDialog, ResponsiveDialogBody, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger, };

package/dist/solid/schema-form.d.ts

@@ -1,6 +1,10 @@
 import type { JSONSchema7 } from "json-schema";
 import { type IconPickerProps } from "./icon-picker.js";
 export interface ExtendedJSONSchema extends JSONSchema7 {
+    properties?: {
+        [key: string]: ExtendedJSONSchema | boolean;
+    };
+    items?: ExtendedJSONSchema | (ExtendedJSONSchema | boolean)[] | boolean;
     /** Explicit control choice from the SDK's field.* helpers. */
     formType?: string;
     domain?: string;

package/dist/solid/scroll-area.d.ts

@@ -1,5 +1,6 @@
 import { type Component, type ComponentProps, type ParentComponent } from "solid-js";
 declare const ScrollArea: ParentComponent<ComponentProps<"div">>;
+/** @deprecated `gh-scroll`'s native-styled bar is the bar; renders nothing. */
 declare const ScrollBar: Component<ComponentProps<"div"> & {
     orientation?: "vertical" | "horizontal";
 }>;

package/dist/solid/section-card.d.ts

@@ -4,6 +4,7 @@ export type GlassSurface = {
     style?: () => JSX.CSSProperties;
     active?: () => boolean;
 };
+export declare const NOOP_GLASS: Required<GlassSurface>;
 type SectionCardProps = {
     icon?: string;
     title?: JSX.Element;
@@ -15,20 +16,17 @@ type SectionCardProps = {
     subtitleClass?: string;
     class?: string;
     glass?: GlassSurface;
-    children: JSX.Element;
+    children?: JSX.Element;
 };
 export declare function SectionCard(props: SectionCardProps): JSX.Element;
 export declare function SectionRow(props: ComponentProps<"div">): JSX.Element;
 type SectionIconSize = "sm" | "md" | "lg";
-declare const ICON_TONES: {
-    readonly neutral: "bg-foreground/10 text-foreground/80";
-    readonly primary: "bg-primary/10 text-primary";
-};
 export declare function SectionIcon(props: {
     icon?: string;
     children?: JSX.Element;
     size?: SectionIconSize;
-    tone?: keyof typeof ICON_TONES;
+    /** Any CSS color. `"neutral"` and `"primary"` are the deprecated old enum. */
+    tone?: string;
     class?: string;
 }): JSX.Element;
 export declare function SectionTitle(props: {
@@ -39,6 +37,7 @@ export declare function SectionSubtitle(props: {
     children: JSX.Element;
     class?: string;
 }): JSX.Element;
+/** @deprecated SectionMeta, or FieldLegend for a titled group of rows. */
 export declare function SectionLabel(props: {
     children: JSX.Element;
     class?: string;

package/dist/solid/sheet.d.ts

@@ -1,22 +1,28 @@
 import { Dialog as DialogPrimitive } from "@kobalte/core/dialog";
+import type { VariantProps } from "cva";
 import { type Component, type ComponentProps, type JSX, type ParentComponent } from "solid-js";
-declare const Sheet: typeof import("@kobalte/core/alert-dialog").Root & {
-    CloseButton: typeof import("@kobalte/core/alert-dialog").CloseButton;
-    Content: typeof import("@kobalte/core/dialog").Content;
-    Description: typeof import("@kobalte/core/alert-dialog").Description;
-    Overlay: typeof import("@kobalte/core/alert-dialog").Overlay;
-    Portal: typeof import("@kobalte/core/alert-dialog").Portal;
-    Title: typeof import("@kobalte/core/alert-dialog").Title;
-    Trigger: typeof import("@kobalte/core/alert-dialog").Trigger;
-};
+import { buttonVariants } from "../lib/button-variants.js";
+import { type ModalDismissProps } from "./dialog-parts.js";
+declare const Sheet: ParentComponent<ComponentProps<typeof DialogPrimitive>>;
 declare const SheetTrigger: Component<ComponentProps<typeof DialogPrimitive.Trigger>>;
-declare const SheetClose: typeof import("@kobalte/core/alert-dialog").CloseButton;
-declare const SheetContent: ParentComponent<ComponentProps<typeof DialogPrimitive.Content> & {
-    side?: "top" | "right" | "bottom" | "left";
+type SheetCloseProps = ModalDismissProps & Partial<Pick<VariantProps<typeof buttonVariants>, "variant" | "size">>;
+/** Already the outline button; see DialogClose on why `as={Button}` is wrong. */
+declare const SheetClose: ParentComponent<SheetCloseProps>;
+declare const SHEET_SIDE: {
+    readonly right: "data-[closed]:slide-out-to-right data-[expanded]:slide-in-from-right inset-y-3 right-3 w-3/4 sm:max-w-sm";
+    readonly left: "data-[closed]:slide-out-to-left data-[expanded]:slide-in-from-left inset-y-3 left-3 w-3/4 sm:max-w-sm";
+    readonly top: "data-[closed]:slide-out-to-top data-[expanded]:slide-in-from-top inset-x-3 top-3 [--modal-max-h:85dvh] max-h-[var(--modal-max-h)]";
+};
+type SheetSide = keyof typeof SHEET_SIDE;
+type SheetContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+    /** A modal belongs in `ResponsiveDialog`; this family slides from an edge. */
+    side?: SheetSide;
     above?: JSX.Element;
-}>;
-declare const SheetHeader: Component<ComponentProps<"div">>;
-declare const SheetFooter: Component<ComponentProps<"div">>;
+    /** Names a panel that has no `SheetTitle`. A registered Title wins. */
+    ariaLabel?: string;
+};
+declare const SheetContent: ParentComponent<SheetContentProps>;
+declare const SheetHeader: Component<import("./dialog-parts.js").ModalHeaderProps>, SheetBody: Component<import("./dialog-parts.js").ModalBodyProps>, SheetFooter: Component<JSX.HTMLAttributes<HTMLDivElement>>;
 declare const SheetTitle: Component<ComponentProps<typeof DialogPrimitive.Title>>;
 declare const SheetDescription: Component<ComponentProps<typeof DialogPrimitive.Description>>;
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, };
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, };

package/dist/solid/step-indicator.d.ts

@@ -1,6 +1,6 @@
 /**
- * Position inside a multi-step flow: dots for the eye, one spoken line for
- * screen readers. The dots carry no text of their own, so the sr-only line is
+ * Position inside a multi-step flow: lit bars for the eye, one spoken line for
+ * screen readers. The bars carry no text of their own, so the sr-only line is
  * the only place the position is readable.
  */
 export declare function StepIndicator(props: {

package/dist/solid/table.d.ts

@@ -1,4 +1,7 @@
 import { type Component, type ComponentProps } from "solid-js";
+export declare const TABLE_CELL_INSET = "px-3 py-2";
+export declare const TABLE_HEAD_LABEL_CLASS = "font-medium text-muted-foreground text-xs";
+export declare const TABLE_HEAD_CELL_CLASS = "px-3 py-2 text-left font-medium text-muted-foreground text-xs";
 declare const Table: Component<ComponentProps<"table">>;
 declare const TableHeader: Component<ComponentProps<"thead">>;
 declare const TableBody: Component<ComponentProps<"tbody">>;

package/dist/solid/tabs.d.ts

@@ -1,11 +1,13 @@
 import { Tabs as TabsPrimitive } from "@kobalte/core/tabs";
 import { type Component, type ComponentProps } from "solid-js";
-declare const Tabs: typeof import("@kobalte/core/tabs").Root & {
-    Content: typeof import("@kobalte/core/tabs").Content;
-    Indicator: typeof import("@kobalte/core/tabs").Indicator;
-    List: typeof import("@kobalte/core/tabs").List;
-    Trigger: typeof import("@kobalte/core/tabs").Trigger;
+/** `split`: the root is `display: contents`, so a host (a modal panel) lays the
+ *  list and the content out in its own regions while the tab state still spans
+ *  them. */
+type TabsLayout = "stack" | "split";
+type TabsProps = ComponentProps<typeof TabsPrimitive> & {
+    layout?: TabsLayout;
 };
+declare const Tabs: Component<TabsProps>;
 declare const TabsList: Component<ComponentProps<typeof TabsPrimitive.List>>;
 declare const TabsTrigger: Component<ComponentProps<typeof TabsPrimitive.Trigger>>;
 declare const TabsContent: Component<ComponentProps<typeof TabsPrimitive.Content>>;

package/dist/solid/tooltip.d.ts

@@ -1,6 +1,6 @@
 import { Tooltip as TooltipPrimitive } from "@kobalte/core/tooltip";
 import { type Component, type ComponentProps } from "solid-js";
-declare const Tooltip: typeof import("@kobalte/core/tooltip").Root & {
+declare const Tooltip: Component<import("@kobalte/core/tooltip").TooltipRootProps> & typeof import("@kobalte/core/tooltip").Root & {
     Arrow: typeof import("@kobalte/core/popover").Arrow;
     Content: typeof import("@kobalte/core/tooltip").Content;
     Portal: typeof import("@kobalte/core/tooltip").Portal;

package/dist/solid/widget-identity.d.ts

@@ -43,10 +43,13 @@ type WidgetIdentityProps = {
     class?: string;
 };
 export declare function WidgetIdentity(_props: WidgetIdentityProps): JSX.Element;
-/** Downloads (+ optional version count) meta cluster. */
+/** Downloads (+ optional version counts) meta cluster. */
 export declare function WidgetMeta(props: {
     widget: WidgetSummary;
+    /** Append `N versions`. */
     showVersions?: boolean;
+    /** Append `v{latestVersion}` (the tile footer's shape). */
+    showLatestVersion?: boolean;
     class?: string;
 }): JSX.Element;
 export {};

package/dist/tokens/index.js

@@ -151,7 +151,7 @@ var x = [
 				border: "oklch(0.26 0.012 250)",
 				card: "oklch(0.17 0.01 250)",
 				background: "oklch(0.12 0.01 250)",
-				popover: "oklch(0.19 0.008 250)",
+				popover: "oklch(0.11 0.005 250)",
 				muted: "oklch(0.22 0.02 250)",
 				mutedForeground: "oklch(0.81 0 0)",
 				input: "oklch(0.19 0.01 250)",