@glasshome/ui 1.5.0 → 1.6.0

package/SPEC.md

@@ -106,6 +106,11 @@ role clears 4.5:1 against `--background`/`--card`/`--popover`/`--muted` (3:1 for
 | a modal | `<ResponsiveDialog>` (desktop dialog + mobile bottom sheet), `<Dialog>` for desktop-only | `<Sheet side="bottom">` as a modal |
 | a status chip | `<Badge tone="var(--success)">` | `rounded-full bg-green-500/10` |
 | a callout | `<Alert tone="warning">` | `border-amber-500/30 bg-amber-500/10` |
+| a titled group of form rows | `<FieldSet>` + `<FieldLegend>` (+ `<FieldDescription>`) | a tracked uppercase `SectionLabel` eyebrow |
+| rows that belong to the row above them | `<FieldSubGroup>` | a bare `<Separator>` and a left pad |
+| picking one of a few described choices | `<OptionCardGroup>` + `<OptionCard>` | a hand-rolled `role="radio"` card list |
+| picking one area, or several | `<AreaPicker>` (`values` + `onValuesChange` for multi) | a hand-rolled checkbox list of areas |
+| position inside a multi-step flow | `<StepIndicator count index>` | a hand-rolled row of dots |
 | tinted text alone | `glassToneText(tone)` | ad-hoc color-mix |
 | a metallic tier chip | `<TierBadge>` | gradients by hand |
 

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

@@ -1,9 +1,21 @@
-interface AreaPickerProps {
-    value: string;
-    onChange: (value: string) => void;
+interface AreaPickerBaseProps {
     placeholder?: string;
     class?: string;
     allowClear?: boolean;
+    disabled?: boolean;
+}
+interface AreaPickerSingleProps extends AreaPickerBaseProps {
+    value: string;
+    onChange: (value: string) => void;
+    values?: undefined;
+    onValuesChange?: undefined;
+}
+interface AreaPickerMultiProps extends AreaPickerBaseProps {
+    values: string[];
+    onValuesChange: (values: string[]) => void;
+    value?: undefined;
+    onChange?: undefined;
 }
+type AreaPickerProps = AreaPickerSingleProps | AreaPickerMultiProps;
 export declare function AreaPicker(props: AreaPickerProps): import("solid-js").JSX.Element;
 export {};

package/dist/solid/field.d.ts

@@ -41,10 +41,12 @@ declare const FieldContent: Component<ComponentProps<"div">>;
 declare const FieldLabel: Component<ComponentProps<typeof Label>>;
 declare const FieldTitle: Component<ComponentProps<"div">>;
 declare const FieldDescription: Component<ComponentProps<"p">>;
+/** Rows that belong to the control above them: stacked flush, grouped by proximity alone. */
+declare const FieldSubGroup: Component<ComponentProps<"div">>;
 declare const FieldSeparator: ParentComponent<ComponentProps<"div">>;
 declare const FieldError: Component<ComponentProps<"div"> & {
     errors?: Array<{
         message?: string;
     } | undefined>;
 }>;
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, };
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldSubGroup, FieldTitle, };

package/dist/solid/hero-action.d.ts

@@ -0,0 +1,39 @@
+import { type JSX } from "solid-js";
+/** Navigates away immediately on click — the setup wizard's connect/sign-in
+ *  steps. Not part of a group, no persisted selection. */
+export declare function HeroAction(props: {
+    icon: string;
+    iconImage?: string;
+    title: string;
+    description: string;
+    onClick: () => void;
+    accentVar: string;
+    disabled?: boolean;
+    recommended?: boolean;
+    recommendedHint?: string;
+    class?: string;
+}): JSX.Element;
+/** A `HeroAction` used inside `OptionCardGroup` as a persisted, revisable
+ *  choice instead of a one-shot navigation button — People's pick-one
+ *  dialogs. Radio semantics (role, aria-checked, keyboard nav) come from
+ *  `RadioGroupItem`, same accessible door as `OptionCard`. */
+export declare function HeroOption(props: {
+    value: string;
+    icon: string;
+    iconImage?: string;
+    title: string;
+    description: string;
+    /** Neutral by default — People's pickers don't carry setup's per-option
+     *  brand colors. */
+    accentVar?: string;
+    /** Drop the tick 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 `onChange` alone never reports. */
+    onPick?: () => void;
+    disabled?: boolean;
+    /** Content revealed under the card when it's the picked option (e.g. a
+     *  nested field), same slot `OptionCard` offers. */
+    children?: JSX.Element;
+    class?: string;
+}): JSX.Element;

package/dist/solid/index.d.ts

@@ -31,8 +31,9 @@ export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem,
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "./empty.js";
 export { type AreaViewLike, type EntityDataAdapter, EntityDataContext, type EntityViewLike, provideEntityData, useEntityData, } from "./entity-data.js";
 export { EntitySelector } from "./entity-selector.js";
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./field.js";
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldSubGroup, FieldTitle, } from "./field.js";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, } from "./form.js";
+export { HeroAction, HeroOption } from "./hero-action.js";
 export { HoverCard, HoverCardContent, HoverCardTrigger, } from "./hover-card.js";
 export { IconPicker, type IconPickerProps } from "./icon-picker.js";
 export { ImagePicker, type ImagePickerProps } from "./image-picker.js";
@@ -48,9 +49,11 @@ export { mediaIndexErrorCopy, mediaStoreErrorCopy, toMediaStoreError, } from "./
 export { type BrokenMedia, createBrokenMedia, imageUrl, isMediaImage, MEDIA_PAGE_SIZE, type MediaIndex, type MediaQuotaUsage, type MediaStore, MediaStoreContext, MediaStoreError, type MediaStoreErrorKind, type MediaVariant, mediaUrl, provideMediaStore, type StoredMedia, sortMediaForClearing, useMediaStore, } from "./media-store.js";
 export { MediaTile, type MediaTileProps } from "./media-tile.js";
 export { NumberField } from "./number-field.js";
+export { OptionCard, OptionCardGroup } from "./option-card.js";
 export { Overlay } from "./overlay.js";
 export { PageHeader } from "./page-header.js";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination.js";
+export { PasswordInput } from "./password-input.js";
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from "./popover.js";
 export { Progress } from "./progress.js";
 export { RadioGroup, RadioGroupItem } from "./radio-group.js";
@@ -69,6 +72,7 @@ export { Slider } from "./slider.js";
 export { SlidingIndicator } from "./sliding-indicator.js";
 export { GlassToast, Toaster, toast } from "./sonner.js";
 export { Spinner } from "./spinner.js";
+export { StepIndicator } from "./step-indicator.js";
 export { Switch } from "./switch.js";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./table.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";