@skyvexsoftware/stratos-sdk 0.16.2 → 0.16.3

package/dist/ui/card.d.ts

@@ -1,7 +1,10 @@
 import * as React from "react";
 declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+type CardTitleProps = React.ComponentProps<"h3"> & {
+    as?: React.ElementType;
+};
+declare function CardTitle({ as: Comp, className, ...props }: CardTitleProps): React.JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/ui/card.js

@@ -6,8 +6,8 @@ function Card({ className, ...props }) {
 function CardHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6", className), ...props }));
 }
-function CardTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-title", className: cn("font-semibold leading-none", className), ...props }));
+function CardTitle({ as: Comp = "h3", className, ...props }) {
+    return (_jsx(Comp, { "data-slot": "card-title", className: cn("font-semibold leading-none", className), ...props }));
 }
 function CardDescription({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-description", className: cn("text-muted-foreground text-sm", className), ...props }));

package/dist/ui/combobox.d.ts

@@ -24,6 +24,12 @@ export type ComboboxProps = {
     contentClassName?: string;
     align?: "start" | "center" | "end";
     onOpenChange?: (open: boolean) => void;
+    /** Element id applied to the trigger button. */
+    id?: string;
+    /** Accessible name for the trigger button (and the search field inside the popover). */
+    "aria-label"?: string;
+    /** Id of an element that labels the trigger button. */
+    "aria-labelledby"?: string;
 };
 /**
  * Searchable single-select built on Popover + cmdk. The list scrolls
@@ -31,5 +37,5 @@ export type ComboboxProps = {
  * selected option with a check. Pass `loading` while options are being
  * fetched to keep the trigger usable without a flickering empty state.
  */
-export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, loading, loadingText, disabled, triggerClassName, contentClassName, align, onOpenChange, }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, loading, loadingText, disabled, triggerClassName, contentClassName, align, onOpenChange, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: ComboboxProps): React.JSX.Element;
 //# sourceMappingURL=combobox.d.ts.map

package/dist/ui/combobox.js

@@ -11,14 +11,15 @@ import { Popover, PopoverContent, PopoverTrigger } from "./popover";
  * selected option with a check. Pass `loading` while options are being
  * fetched to keep the trigger usable without a flickering empty state.
  */
-export function Combobox({ options, value, onValueChange, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No results.", loading = false, loadingText = "Loading…", disabled = false, triggerClassName, contentClassName, align = "start", onOpenChange, }) {
+export function Combobox({ options, value, onValueChange, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No results.", loading = false, loadingText = "Loading…", disabled = false, triggerClassName, contentClassName, align = "start", onOpenChange, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }) {
     const [open, setOpen] = React.useState(false);
     const selected = options.find((option) => option.value === value);
+    const inputAriaLabel = ariaLabel ?? selected?.label ?? placeholder;
     const handleOpenChange = (next) => {
         setOpen(next);
         onOpenChange?.(next);
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", role: "combobox", "aria-expanded": open, disabled: disabled, className: cn("border-input bg-background ring-offset-background focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", triggerClassName), children: [_jsx("span", { className: cn("truncate", !selected && "text-muted-foreground"), children: selected ? selected.label : placeholder }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { align: align, className: cn("w-[var(--radix-popover-trigger-width)] p-0", contentClassName), children: _jsxs(Command, { className: "text-popover-foreground flex w-full flex-col overflow-hidden", children: [_jsxs("div", { className: "border-border flex items-center border-b px-2.5", children: [_jsx(Search, { className: "text-muted-foreground mr-2 h-4 w-4 shrink-0" }), _jsx(Command.Input, { placeholder: searchPlaceholder, className: "placeholder:text-muted-foreground h-9 w-full bg-transparent py-2 text-sm outline-none" })] }), _jsx(Command.List, { className: "max-h-60 overflow-y-auto p-1", children: loading ? (_jsx("div", { className: "text-muted-foreground py-3 text-center text-sm", children: loadingText })) : (_jsxs(_Fragment, { children: [_jsx(Command.Empty, { className: "text-muted-foreground py-3 text-center text-sm", children: emptyText }), options.map((option) => (_jsxs(Command.Item, { value: `${option.label} ${option.value}`, onSelect: () => {
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled: disabled, className: cn("border-input bg-background ring-offset-background focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", triggerClassName), children: [_jsx("span", { className: cn("truncate", !selected && "text-muted-foreground"), children: selected ? selected.label : placeholder }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { align: align, className: cn("w-[var(--radix-popover-trigger-width)] p-0", contentClassName), children: _jsxs(Command, { className: "text-popover-foreground flex w-full flex-col overflow-hidden", children: [_jsxs("div", { className: "border-border flex items-center border-b px-2.5", children: [_jsx(Search, { className: "text-muted-foreground mr-2 h-4 w-4 shrink-0" }), _jsx(Command.Input, { placeholder: searchPlaceholder, "aria-label": inputAriaLabel, className: "placeholder:text-muted-foreground h-9 w-full bg-transparent py-2 text-sm outline-none" })] }), _jsx(Command.List, { className: "max-h-60 overflow-y-auto p-1", children: loading ? (_jsx("div", { className: "text-muted-foreground py-3 text-center text-sm", children: loadingText })) : (_jsxs(_Fragment, { children: [_jsx(Command.Empty, { className: "text-muted-foreground py-3 text-center text-sm", children: emptyText }), options.map((option) => (_jsxs(Command.Item, { value: `${option.label} ${option.value}`, onSelect: () => {
                                             onValueChange?.(option.value);
                                             handleOpenChange(false);
                                         }, className: "aria-selected:bg-accent aria-selected:text-accent-foreground flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-none", children: [_jsx(Check, { className: cn("mr-2 h-4 w-4 shrink-0", value === option.value ? "opacity-100" : "opacity-0") }), _jsx("span", { className: "truncate", children: option.label })] }, option.value)))] })) })] }) })] }));

package/dist/ui/slider.js

@@ -2,6 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "../utils/cn";
-const Slider = React.forwardRef(({ className, ...props }, ref) => (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full", children: _jsx(SliderPrimitive.Range, { className: "bg-primary absolute h-full" }) }), _jsx(SliderPrimitive.Thumb, { className: "border-primary/50 bg-background focus-visible:ring-ring focus-visible:outline-hidden block h-4 w-4 rounded-full border shadow-sm transition-colors focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" })] })));
+const Slider = React.forwardRef(({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => {
+    // Only include the aria attributes when they're actually set. For a
+    // multi-value slider, Radix's Thumb falls back to a computed positional
+    // label ("Minimum"/"Maximum"/"Value N of M") when no aria-label is
+    // supplied; spreading an explicit `aria-label: undefined` key would
+    // overwrite that fallback (Radix's internal spread order puts the
+    // caller's props last), leaving the thumb with no accessible name at
+    // all. Omitting the key entirely preserves whatever fallback Radix
+    // computes.
+    const thumbAriaProps = {};
+    if (ariaLabel !== undefined)
+        thumbAriaProps["aria-label"] = ariaLabel;
+    if (ariaLabelledBy !== undefined)
+        thumbAriaProps["aria-labelledby"] = ariaLabelledBy;
+    return (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full", children: _jsx(SliderPrimitive.Range, { className: "bg-primary absolute h-full" }) }), _jsx(SliderPrimitive.Thumb, { ...thumbAriaProps, className: "border-primary/50 bg-background focus-visible:ring-ring focus-visible:outline-hidden block h-4 w-4 rounded-full border shadow-sm transition-colors focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" })] }));
+});
 Slider.displayName = SliderPrimitive.Root.displayName;
 export { Slider };

package/dist/ui/switch.d.ts

@@ -1,13 +1,12 @@
 import * as React from "react";
-type SwitchProps = {
+type SwitchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "checked" | "onClick" | "type" | "role"> & {
     checked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    className?: string;
-    id?: string;
-    name?: string;
 };
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Switch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "role" | "onClick" | "checked"> & {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+} & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };
 export type { SwitchProps };
 //# sourceMappingURL=switch.d.ts.map

package/dist/ui/switch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../utils/cn";
-const Switch = React.forwardRef(({ checked = false, onCheckedChange, disabled, className, ...props }, ref) => (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, ref: ref, disabled: disabled, onClick: () => onCheckedChange?.(!checked), className: cn("relative inline-flex shrink-0 cursor-pointer rounded-md transition-all duration-150", "h-[18px] w-[32px]", checked
+const Switch = React.forwardRef(({ checked = false, onCheckedChange, disabled, className, ...props }, ref) => (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, ref: ref, disabled: disabled, onClick: () => onCheckedChange?.(!checked), className: cn("relative inline-flex shrink-0 cursor-pointer rounded-md transition-all duration-150", "h-[18px] w-[32px]", "focus-visible:outline-hidden focus-visible:ring-ring focus-visible:ring-2", checked
         ? "border-primary bg-primary border"
         : "border-border-interactive bg-muted border", disabled && "cursor-not-allowed opacity-50", className), ...props, children: _jsx("span", { className: cn("pointer-events-none absolute top-[2px] h-[12px] w-[12px] rounded-sm transition-[left] duration-150", checked ? "bg-primary-foreground left-[16px]" : "left-[2px] bg-white") }) })));
 Switch.displayName = "Switch";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyvexsoftware/stratos-sdk",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "description": "Plugin SDK for Stratos — types, hooks, and UI components",
   "author": {
     "name": "Skyvex Software Pty Ltd",