@glasshome/ui 1.4.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/index.js

@@ -1,4 +1,4 @@
-import { $ as e, A as t, B as n, C as r, D as i, E as a, G as o, K as s, M as c, O as l, Q as u, S as d, T as f, U as p, V as m, W as h, X as g, Y as _, Z as v, _ as y, a as b, at as x, b as S, c as C, d as w, et as T, f as E, g as D, h as O, i as ee, it as k, k as A, l as j, m as M, n as N, nt as P, o as F, ot as I, p as L, q as R, r as z, rt as B, s as V, t as H, tt as U, u as W, v as G, w as K, x as q, y as J, z as Y } from "./utils-B020EZLJ.js";
+import { $ as e, A as t, B as n, C as r, D as i, E as a, G as o, K as s, M as c, O as l, Q as u, S as d, T as f, U as p, V as m, W as h, X as g, Y as _, Z as v, _ as y, a as b, at as x, b as S, c as C, d as w, et as T, f as E, g as D, h as O, i as ee, it as k, k as A, l as j, m as M, n as N, nt as P, o as F, ot as I, p as L, q as R, r as z, rt as B, s as V, t as H, tt as U, u as W, v as G, w as K, x as q, y as J, z as Y } from "./utils-8e8QCynI.js";
 import { createSignal as X, onCleanup as Z, onMount as Q } from "solid-js";
 //#region src/lib/use-is-mobile.ts
 var $ = 768;

package/dist/lib/carousel-classes.d.ts

@@ -1,6 +1,15 @@
 export type CarouselTransition = "slide" | "fade" | "wipe";
 export declare const CAROUSEL_VIEWPORT = "h-full overflow-hidden";
-/** Stacked modes put every slide in one grid cell; slide lays out a flex track. */
+/**
+ * Only wipe stacks in CSS. Fade keeps embla's standard flex track, which is the
+ * structure its plugin is built for: embla reads each snap from the slide's
+ * offset along the axis, and the plugin then translates every slide back onto
+ * the viewport to cross-fade them. Slides sharing one grid cell share offset 0,
+ * so every snap collapses onto the same point and a pointer drag has no
+ * distance to resolve: it never changes slide. Index-driven navigation
+ * (autoplay, arrows, dots) survives the collapse, which is why wipe still
+ * advances.
+ */
 export declare function carouselTrack(transition: CarouselTransition, orientation?: "horizontal" | "vertical"): string;
 export declare function carouselItem(transition: CarouselTransition, orientation?: "horizontal" | "vertical"): string;
 export declare const CAROUSEL_DOTS = "flex items-center justify-center gap-2";

package/dist/lib/tier-badge.d.ts

@@ -1,4 +1,4 @@
-export declare const TIER_BADGE_CLASS = "inline-flex cursor-default select-none items-center rounded-full px-2 py-0.5 font-black text-[10px] uppercase tracking-wider";
+export declare const TIER_BADGE_CLASS = "inline-flex cursor-default select-none items-center rounded-full px-2 py-0.5 font-black text-[10px] tracking-wide";
 /** Optional sweep shaping. Default is the symmetric brushed look (both ends
  *  `hi`, dipping to `lo` at the midpoint). The collectible/license golds are a
  *  lit bevel instead: they dip early and land on a darker `end`. */

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/image-picker.d.ts

@@ -0,0 +1,8 @@
+export interface ImagePickerProps {
+    /** Sits on the trigger so a LabeledField's <Label for> points at a real control. */
+    id?: string;
+    value: string;
+    onChange: (id: string) => void;
+    class?: string;
+}
+export declare function ImagePicker(props: ImagePickerProps): import("solid-js").JSX.Element;

package/dist/solid/index.d.ts

@@ -31,10 +31,12 @@ 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";
 export { Input } from "./input.js";
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./input-group.js";
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "./input-otp.js";
@@ -43,10 +45,15 @@ export { Kbd, KbdGroup } from "./kbd.js";
 export { Label } from "./label.js";
 export { createListReorder, dragTargetIndex, type ListReorder, type ListReorderOptions, } from "./list-reorder.js";
 export { Logo } from "./logo.js";
+export { mediaIndexErrorCopy, mediaStoreErrorCopy, toMediaStoreError, } from "./media-copy.js";
+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";
@@ -65,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";