@glasshome/ui 0.5.4 → 1.0.0

package/dist/solid/data-table.d.ts

@@ -0,0 +1,66 @@
+import { type JSX } from "solid-js";
+/**
+ * Generic data-table vocabulary: sticky-less header, row height/padding, border
+ * treatment, hover, numeric alignment, toolbar (search/filter/sort), bulk bar,
+ * and empty/loading/error states. Each list renders its own row markup but
+ * shares these primitives + class tokens. Presentational only — no app data.
+ *
+ * Tables live inside a card; go edge-to-edge with `TABLE_BLEED` (cancels the
+ * card's p-3) and re-add the inset via the cell padding tokens.
+ */
+export declare const TABLE_BLEED = "-mx-3 border-border/50 border-t";
+export declare const TABLE_CELL_X = "px-4";
+export declare const TABLE_ROW_CLASS = "flex items-center gap-4 border-border/50 border-b px-4 py-2.5 transition-colors last:border-b-0 hover:bg-foreground/[0.03]";
+export declare const TABLE_HEAD_CLASS = "flex items-center gap-4 border-border/50 border-b px-4 py-2";
+export declare const TABLE_HEAD_CELL_CLASS = "font-medium text-muted-foreground text-xs";
+export declare const TABLE_SCROLL_CLASS = "max-h-[600px] overflow-auto";
+export declare const TABLE_NUM_CELL_CLASS = "text-right text-muted-foreground text-xs tabular-nums";
+export type SortDirection = "asc" | "desc";
+/** Toolbar filter dropdown, built on the Select. Leading filter icon, h-9. Pass
+ *  `label` to render an option key as display text (include counts there). */
+export declare function TableFilterSelect(props: {
+    options: readonly string[];
+    value: string;
+    onChange: (value: string) => void;
+    label: (value: string) => string;
+    ariaLabel: string;
+    class?: string;
+}): JSX.Element;
+/** Toolbar search box: leading icon, h-9, trailing clear. Debounce in caller. */
+export declare function TableSearchInput(props: {
+    value: string;
+    onInput: (value: string) => void;
+    placeholder: string;
+    label: string;
+    class?: string;
+}): JSX.Element;
+/** Sortable column header button. `align="end"` for numeric columns. */
+export declare function TableSortHeader(props: {
+    label: string;
+    active: boolean;
+    dir: SortDirection;
+    onClick: () => void;
+    align?: "start" | "end";
+    class?: string;
+}): JSX.Element;
+/** Centered empty state inside the table body. `icon` takes JSX or an iconify name. */
+export declare function TableEmpty(props: {
+    icon?: JSX.Element | string;
+    message: JSX.Element;
+    action?: JSX.Element;
+}): JSX.Element;
+/** Inline error state with a Retry button. */
+export declare function TableError(props: {
+    message: JSX.Element;
+    onRetry: () => void;
+}): JSX.Element;
+/** Table-shaped loading skeleton: N rows at the shared row height. */
+export declare function TableSkeleton(props: {
+    count?: number;
+    class?: string;
+}): JSX.Element;
+/** Bulk-action bar above the rows when a selection is active. */
+export declare function TableBulkBar(props: {
+    class?: string;
+    children: JSX.Element;
+}): JSX.Element;

package/dist/solid/dock.d.ts

@@ -7,6 +7,8 @@ interface DockItem {
     label: string;
     onClick?: () => void;
     isActive?: boolean;
+    /** Optional count badge on the item (e.g. pending updates). */
+    badge?: number;
 }
 interface DockProps extends ComponentProps<"div"> {
     items: DockItem[];
@@ -18,6 +20,7 @@ interface DockIconButtonProps extends ComponentProps<"button"> {
     }> | JSX.Element;
     label: string;
     isActive?: boolean;
+    badge?: number;
 }
 declare const Dock: Component<DockProps>;
 export type { DockIconButtonProps, DockItem, DockProps };

package/dist/solid/entity-data.d.ts

@@ -0,0 +1,52 @@
+import { type Accessor } from "solid-js";
+/**
+ * Structural view types for the smart-home pickers (EntitySelector,
+ * AreaPicker). They are subsets of @glasshome/sync-layer's EntityView /
+ * AreaView, owned here so the design system carries no dependency on the HA
+ * data runtime: the host supplies a live implementation through
+ * EntityDataContext (dash wires sync-layer in; the dev gallery wires static
+ * demo data).
+ */
+export interface EntityViewLike {
+    id: string;
+    /** Current state value (e.g. "on", "21.5"). */
+    state: string;
+    /** Entity name (registry name or friendly_name). */
+    name: string;
+    friendlyName: string;
+    aliases: readonly string[];
+    areaId: string | null;
+    /** Resolved icon name (e.g. "mdi:lightbulb"). */
+    icon: string | null;
+    /** "config" | "diagnostic" for non-primary entities, null for regular ones. */
+    entityCategory: string | null;
+    isHidden: boolean;
+    isDisabled: boolean;
+    deviceClass?: string | null;
+    unitOfMeasurement?: string | null;
+}
+export interface AreaViewLike {
+    id: string;
+    name: string;
+    icon: string | null;
+    entityIds: readonly string[];
+}
+/**
+ * Live entity/area data source provided by the host app. All members are
+ * reactive under Solid tracking scopes; `useEntities` is a lazy subscription
+ * keyed on the id list, so a picker only subscribes to what it shows.
+ */
+export interface EntityDataAdapter {
+    /** Entity ids grouped by domain (e.g. { light: ["light.kitchen"] }). */
+    entityIdsByDomain: Accessor<Record<string, string[]>>;
+    /** Subscribe to live views for a reactive id list. */
+    useEntities(entityIds: Accessor<string[]>): Accessor<EntityViewLike[]>;
+    /** Point read of one entity's live view; reactive when called in a tracking scope. */
+    getEntityView(entityId: string): EntityViewLike | undefined;
+    /** All areas of the home. */
+    useAreas(): Accessor<AreaViewLike[]>;
+}
+export declare const EntityDataContext: import("solid-js").Context<EntityDataAdapter | undefined>;
+/** Host apps call this once at startup; EntityDataContext overrides it per-tree. */
+export declare function provideEntityData(adapter: EntityDataAdapter): void;
+export declare function useEntityData(): EntityDataAdapter;

package/dist/solid/field.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "cva";
 import { type Component, type ComponentProps, type ParentComponent } from "solid-js";
-import { Label } from "./label";
+import { Label } from "./label.js";
 declare const FieldSet: Component<ComponentProps<"fieldset">>;
 declare const FieldLegend: Component<ComponentProps<"legend"> & {
     variant?: "legend" | "label";

package/dist/solid/form.d.ts

@@ -1,5 +1,5 @@
 import { type Component, type ComponentProps, type ParentComponent } from "solid-js";
-import { Label } from "./label";
+import { Label } from "./label.js";
 declare const Form: ParentComponent<ComponentProps<"form"> & {
     errors?: Record<string, string>;
     onSetError?: (name: string, error: string) => void;

package/dist/solid/index.d.ts

@@ -1,65 +1,75 @@
 export { type Color, parseColor } from "@kobalte/core/colors";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "./accordion";
-export { Alert, type AlertTone, AlertDescription, AlertTitle } from "./alert";
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./alert-dialog";
-export { AreaPicker } from "./area-picker";
-export { AspectRatio } from "./aspect-ratio";
-export { Avatar, AvatarFallback, AvatarImage } from "./avatar";
-export { Badge, badgeVariants, TierBadge } from "./badge";
-export { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetOverlay, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger, } from "./bottom-sheet";
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "./breadcrumb";
-export { Button, buttonVariants } from "./button";
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } from "./button-group";
-export type { CalendarProps, DateRange } from "./calendar";
-export { Calendar } from "./calendar";
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card";
-export type { CarouselApi } from "./carousel";
-export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "./carousel";
-export { Checkbox } from "./checkbox";
-export { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./collapsible";
-export { ColorSlider } from "./color-slider";
-export { ColorWheel } from "./color-wheel";
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "./command";
-export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "./context-menu";
-export { CopyButton } from "./copy-button";
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./dialog";
-export type { DockIconButtonProps, DockItem, DockProps } from "./dock";
-export { Dock } from "./dock";
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, } from "./drawer";
-export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, } from "./dropdown-menu";
-export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "./empty";
-export { EntitySelector } from "./entity-selector";
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./field";
-export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, } from "./form";
-export { GlassEffect, GlassFilter } from "./glass-effect";
-export { HoverCard, HoverCardContent, HoverCardTrigger, } from "./hover-card";
-export { Input } from "./input";
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./input-group";
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "./input-otp";
-export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, } from "./item";
-export { Kbd, KbdGroup } from "./kbd";
-export { Label } from "./label";
-export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from "./menubar";
-export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle, } from "./navigation-menu";
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination";
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from "./popover";
-export { Progress } from "./progress";
-export { RadioGroup, RadioGroupItem } from "./radio-group";
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./resizable";
-export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger, } from "./responsive-dialog";
-export { SchemaForm } from "./schema-form";
-export { ScrollArea, ScrollBar } from "./scroll-area";
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from "./select";
-export { Separator } from "./separator";
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "./sheet";
-export { Skeleton } from "./skeleton";
-export { Slider } from "./slider";
-export { Toaster, toast } from "./sonner";
-export { Spinner } from "./spinner";
-export { Switch } from "./switch";
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./table";
-export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
-export { Textarea } from "./textarea";
-export { Toggle, toggleVariants } from "./toggle";
-export { ToggleGroup, ToggleGroupItem } from "./toggle-group";
-export { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+export { OVERLAY_SURFACE } from "../lib/overlay-classes.js";
+export { SECTION_INNER_RADIUS, SECTION_OUTER_RADIUS, SECTION_PADDING, SECTION_ROW_CLASS, } from "../lib/section-tokens.js";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "./accordion.js";
+export { Alert, AlertDescription, AlertTitle, type AlertTone } from "./alert.js";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./alert-dialog.js";
+export { AreaPicker } from "./area-picker.js";
+export { AspectRatio } from "./aspect-ratio.js";
+export { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+export { Badge, TierBadge } from "./badge.js";
+export { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetOverlay, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger, } from "./bottom-sheet/index.js";
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "./breadcrumb.js";
+export { Button, buttonVariants } from "./button.js";
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } from "./button-group.js";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card.js";
+export type { CarouselApi } from "./carousel.js";
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "./carousel.js";
+export { AreaChart, BarList, formatBytes, formatCompact, RangeToggle, StackedBar, } from "./charts.js";
+export { Checkbox } from "./checkbox.js";
+export { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./collapsible.js";
+export { ColorSlider } from "./color-slider.js";
+export { ColorWheel } from "./color-wheel.js";
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "./context-menu.js";
+export { CopyButton } from "./copy-button.js";
+export { CountPill } from "./count-pill.js";
+export { type SortDirection, TABLE_BLEED, TABLE_CELL_X, TABLE_HEAD_CELL_CLASS, TABLE_HEAD_CLASS, TABLE_NUM_CELL_CLASS, TABLE_ROW_CLASS, TABLE_SCROLL_CLASS, TableBulkBar, TableEmpty, TableError, TableFilterSelect, TableSearchInput, TableSkeleton, TableSortHeader, } from "./data-table.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./dialog.js";
+export type { DockIconButtonProps, DockItem, DockProps } from "./dock.js";
+export { Dock } from "./dock.js";
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, } from "./dropdown-menu.js";
+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 { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, } from "./form.js";
+export { HoverCard, HoverCardContent, HoverCardTrigger, } from "./hover-card.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";
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, } from "./item.js";
+export { Kbd, KbdGroup } from "./kbd.js";
+export { Label } from "./label.js";
+export { Logo } from "./logo.js";
+export { NumberField } from "./number-field.js";
+export { Overlay } from "./overlay.js";
+export { PageHeader } from "./page-header.js";
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination.js";
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from "./popover.js";
+export { Progress } from "./progress.js";
+export { RadioGroup, RadioGroupItem } from "./radio-group.js";
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./resizable.js";
+export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger, } from "./responsive-dialog.js";
+export { SchemaForm } from "./schema-form.js";
+export { ScopeIndicator } from "./scope-indicator.js";
+export { ScrollArea, ScrollBar } from "./scroll-area.js";
+export { type GlassSurface, SectionCard, SectionIcon, SectionLabel, SectionMeta, SectionRow, SectionRowSkeleton, SectionRowSkeletons, SectionSubtitle, SectionTitle, } from "./section-card.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from "./select.js";
+export { Separator } from "./separator.js";
+export { LabeledField, LabeledInput, RowActions, SectionAddButton, SectionEmpty, SwitchRow, } from "./settings-row.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "./sheet.js";
+export { Skeleton } from "./skeleton.js";
+export { Slider } from "./slider.js";
+export { SlidingIndicator } from "./sliding-indicator.js";
+export { GlassToast, Toaster, toast } from "./sonner.js";
+export { Spinner } from "./spinner.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";
+export { Textarea } from "./textarea.js";
+export { Toggle, toggleVariants } from "./toggle.js";
+export { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+export { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+export { WidgetCard } from "./widget-card.js";
+export { formatWidgetCount, WidgetIdentity, WidgetMeta, type WidgetSummary, widgetHref, } from "./widget-identity.js";
+export { WidgetTrustBadge } from "./widget-trust-badge.js";