@sero-ai/ui 0.5.0 → 0.6.0

package/dist/components/model-selection/model-picker-body.cjs

@@ -0,0 +1,106 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+
+
+
+var _common = require('@sero-ai/common');
+var _searchinput = require('../ui/search-input');
+var _utils = require('../../lib/utils');
+function ProviderLogo({
+  logo,
+  displayName,
+  className
+}) {
+  const [failed, setFailed] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => setFailed(false), [logo]);
+  if (!logo || failed) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "img",
+    {
+      src: logo,
+      alt: displayName,
+      onError: () => setFailed(true),
+      className: _utils.cn.call(void 0, "size-3.5 shrink-0 rounded-sm dark:invert", className)
+    }
+  );
+}
+function ModelPickerBody({
+  groups,
+  value,
+  onChange,
+  searchPlaceholder = "Search models...",
+  emptyLabel = "No matching models",
+  noModelsLabel = "No models available",
+  autoFocusSearch = true,
+  showProviderLogos = true,
+  searchEndAdornment,
+  className,
+  listClassName
+}) {
+  const [query, setQuery] = _react.useState.call(void 0, "");
+  const inputRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (!autoFocusSearch) return;
+    const frame = requestAnimationFrame(() => _optionalChain([inputRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.focus, 'call', _3 => _3()]));
+    return () => cancelAnimationFrame(frame);
+  }, [autoFocusSearch]);
+  const filteredGroups = _react.useMemo.call(void 0, () => _common.filterModelGroups.call(void 0, groups, query), [groups, query]);
+  const totalResults = _react.useMemo.call(void 0, 
+    () => filteredGroups.reduce((count, group) => count + group.models.length, 0),
+    [filteredGroups]
+  );
+  const handleSelect = _react.useCallback.call(void 0, 
+    (provider, modelId) => {
+      onChange(_common.modelKey.call(void 0, provider, modelId));
+      setQuery("");
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _searchinput.SearchInput,
+      {
+        ref: inputRef,
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        placeholder: searchPlaceholder,
+        "data-slot": "model-filter",
+        containerClassName: "border-b border-border/40",
+        endAdornment: searchEndAdornment
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "max-h-[280px] overflow-y-auto py-1", listClassName), children: groups.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyLabel }) : filteredGroups.map((group, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      index > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mx-3 border-t border-border/30" }) : null,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 pb-1 pt-2", children: [
+        showProviderLogos ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProviderLogo, { logo: group.logo, displayName: group.displayName }) : null,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-semibold uppercase tracking-wider text-muted-foreground", children: group.displayName })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-1", children: group.models.map((model) => {
+        const nextValue = _common.modelKey.call(void 0, model.provider, model.modelId);
+        const isSelected = nextValue === value;
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "button",
+          {
+            type: "button",
+            onClick: () => handleSelect(model.provider, model.modelId),
+            className: _utils.cn.call(void 0, 
+              "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors",
+              isSelected ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex size-4 shrink-0 items-center justify-center", children: isSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "size-1.5 rounded-full bg-border" }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate font-medium", children: model.name }),
+              model.reasoning ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Sparkles, { className: "size-3 shrink-0 text-amber-500/60" }) : null
+            ]
+          },
+          nextValue
+        );
+      }) })
+    ] }, group.provider)) })
+  ] });
+}
+
+
+
+exports.ModelPickerBody = ModelPickerBody; exports.ProviderLogo = ProviderLogo;

package/dist/components/model-selection/model-picker-body.d.cts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SharedModelInfo, SharedAvailableModelGroup } from '@sero-ai/common';
+
+/**
+ * A provider logo.
+ *
+ * `logo` is a remote URL, so it is empty for some providers and it fails
+ * on a machine with no internet. Either way we show nothing rather than
+ * a broken image.
+ */
+declare function ProviderLogo({ logo, displayName, className, }: {
+    logo: string;
+    displayName: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+interface ModelPickerBodyProps<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>> {
+    groups: TGroup[];
+    /** The selected model as `provider/modelId`, or '' for none. */
+    value: string;
+    /** Called with the new `provider/modelId`. */
+    onChange: (value: string) => void;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    noModelsLabel?: string;
+    /**
+     * Focus the search field on mount. Turn this off on a phone: the
+     * on-screen keyboard would cover the list the user came to read.
+     */
+    autoFocusSearch?: boolean;
+    /** Hide provider logos where the network may not reach them. */
+    showProviderLogos?: boolean;
+    /** Shown at the right of the search field, such as a settings button. */
+    searchEndAdornment?: ReactNode;
+    className?: string;
+    /** Applied to the scrolling list, so a caller sets its height. */
+    listClassName?: string;
+}
+declare function ModelPickerBody<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>>({ groups, value, onChange, searchPlaceholder, emptyLabel, noModelsLabel, autoFocusSearch, showProviderLogos, searchEndAdornment, className, listClassName, }: ModelPickerBodyProps<TModel, TGroup>): react_jsx_runtime.JSX.Element;
+
+export { ModelPickerBody, ProviderLogo };

package/dist/components/model-selection/model-picker-body.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SharedModelInfo, SharedAvailableModelGroup } from '@sero-ai/common';
+
+/**
+ * A provider logo.
+ *
+ * `logo` is a remote URL, so it is empty for some providers and it fails
+ * on a machine with no internet. Either way we show nothing rather than
+ * a broken image.
+ */
+declare function ProviderLogo({ logo, displayName, className, }: {
+    logo: string;
+    displayName: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+interface ModelPickerBodyProps<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>> {
+    groups: TGroup[];
+    /** The selected model as `provider/modelId`, or '' for none. */
+    value: string;
+    /** Called with the new `provider/modelId`. */
+    onChange: (value: string) => void;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    noModelsLabel?: string;
+    /**
+     * Focus the search field on mount. Turn this off on a phone: the
+     * on-screen keyboard would cover the list the user came to read.
+     */
+    autoFocusSearch?: boolean;
+    /** Hide provider logos where the network may not reach them. */
+    showProviderLogos?: boolean;
+    /** Shown at the right of the search field, such as a settings button. */
+    searchEndAdornment?: ReactNode;
+    className?: string;
+    /** Applied to the scrolling list, so a caller sets its height. */
+    listClassName?: string;
+}
+declare function ModelPickerBody<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>>({ groups, value, onChange, searchPlaceholder, emptyLabel, noModelsLabel, autoFocusSearch, showProviderLogos, searchEndAdornment, className, listClassName, }: ModelPickerBodyProps<TModel, TGroup>): react_jsx_runtime.JSX.Element;
+
+export { ModelPickerBody, ProviderLogo };

package/dist/components/model-selection/model-picker-body.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Check, Sparkles } from "lucide-react";
+import {
+  filterModelGroups,
+  modelKey
+} from "@sero-ai/common";
+import { SearchInput } from "../ui/search-input";
+import { cn } from "../../lib/utils";
+function ProviderLogo({
+  logo,
+  displayName,
+  className
+}) {
+  const [failed, setFailed] = useState(false);
+  useEffect(() => setFailed(false), [logo]);
+  if (!logo || failed) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: logo,
+      alt: displayName,
+      onError: () => setFailed(true),
+      className: cn("size-3.5 shrink-0 rounded-sm dark:invert", className)
+    }
+  );
+}
+function ModelPickerBody({
+  groups,
+  value,
+  onChange,
+  searchPlaceholder = "Search models...",
+  emptyLabel = "No matching models",
+  noModelsLabel = "No models available",
+  autoFocusSearch = true,
+  showProviderLogos = true,
+  searchEndAdornment,
+  className,
+  listClassName
+}) {
+  const [query, setQuery] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (!autoFocusSearch) return;
+    const frame = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [autoFocusSearch]);
+  const filteredGroups = useMemo(() => filterModelGroups(groups, query), [groups, query]);
+  const totalResults = useMemo(
+    () => filteredGroups.reduce((count, group) => count + group.models.length, 0),
+    [filteredGroups]
+  );
+  const handleSelect = useCallback(
+    (provider, modelId) => {
+      onChange(modelKey(provider, modelId));
+      setQuery("");
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        ref: inputRef,
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        placeholder: searchPlaceholder,
+        "data-slot": "model-filter",
+        containerClassName: "border-b border-border/40",
+        endAdornment: searchEndAdornment
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: cn("max-h-[280px] overflow-y-auto py-1", listClassName), children: groups.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyLabel }) : filteredGroups.map((group, index) => /* @__PURE__ */ jsxs("div", { children: [
+      index > 0 ? /* @__PURE__ */ jsx("div", { className: "mx-3 border-t border-border/30" }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 pb-1 pt-2", children: [
+        showProviderLogos ? /* @__PURE__ */ jsx(ProviderLogo, { logo: group.logo, displayName: group.displayName }) : null,
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold uppercase tracking-wider text-muted-foreground", children: group.displayName })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "px-1", children: group.models.map((model) => {
+        const nextValue = modelKey(model.provider, model.modelId);
+        const isSelected = nextValue === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleSelect(model.provider, model.modelId),
+            className: cn(
+              "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors",
+              isSelected ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: isSelected ? /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ jsx("div", { className: "size-1.5 rounded-full bg-border" }) }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: model.name }),
+              model.reasoning ? /* @__PURE__ */ jsx(Sparkles, { className: "size-3 shrink-0 text-amber-500/60" }) : null
+            ]
+          },
+          nextValue
+        );
+      }) })
+    ] }, group.provider)) })
+  ] });
+}
+export {
+  ModelPickerBody,
+  ProviderLogo
+};

package/dist/components/model-selection/thinking-level-picker.cjs

@@ -4,6 +4,10 @@
 
 var _common = require('@sero-ai/common');
 var _utils = require('../../lib/utils');
+const COMPACT_LABELS = {
+  ..._common.THINKING_LABELS,
+  xhigh: "X-High"
+};
 function ThinkingLevelPicker({
   value,
   onChange,
@@ -14,7 +18,7 @@ function ThinkingLevelPicker({
 }) {
   const allowed = new Set(_nullishCoalesce(availableLevels, () => ( _common.THINKING_LEVELS)));
   const levels = showUnsupported || !availableLevels ? _common.THINKING_LEVELS : _common.THINKING_LEVELS.filter((level) => allowed.has(level));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "grid grid-cols-6 gap-1 rounded-lg border border-border/50 bg-muted/20 p-1", className), children: levels.map((level) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "grid grid-cols-7 gap-1 rounded-lg border border-border/50 bg-muted/20 p-1", className), children: levels.map((level) => {
     const isActive = value === level;
     const isAvailable = allowed.has(level) || !availableLevels;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -24,11 +28,11 @@ function ThinkingLevelPicker({
         disabled: disabled || !isAvailable,
         onClick: () => onChange(level),
         className: _utils.cn.call(void 0, 
-          "rounded-md px-2 py-1.5 text-sm font-medium transition-colors",
+          "whitespace-nowrap rounded-md px-2 py-1.5 text-sm font-medium transition-colors",
           isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
           (!isAvailable || disabled) && "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-muted-foreground"
         ),
-        children: _common.THINKING_LABELS[level]
+        children: COMPACT_LABELS[level]
       },
       level
     );

package/dist/components/model-selection/thinking-level-picker.js

@@ -4,6 +4,10 @@ import {
   THINKING_LEVELS
 } from "@sero-ai/common";
 import { cn } from "../../lib/utils";
+const COMPACT_LABELS = {
+  ...THINKING_LABELS,
+  xhigh: "X-High"
+};
 function ThinkingLevelPicker({
   value,
   onChange,
@@ -14,7 +18,7 @@ function ThinkingLevelPicker({
 }) {
   const allowed = new Set(availableLevels ?? THINKING_LEVELS);
   const levels = showUnsupported || !availableLevels ? THINKING_LEVELS : THINKING_LEVELS.filter((level) => allowed.has(level));
-  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-6 gap-1 rounded-lg border border-border/50 bg-muted/20 p-1", className), children: levels.map((level) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-7 gap-1 rounded-lg border border-border/50 bg-muted/20 p-1", className), children: levels.map((level) => {
     const isActive = value === level;
     const isAvailable = allowed.has(level) || !availableLevels;
     return /* @__PURE__ */ jsx(
@@ -24,11 +28,11 @@ function ThinkingLevelPicker({
         disabled: disabled || !isAvailable,
         onClick: () => onChange(level),
         className: cn(
-          "rounded-md px-2 py-1.5 text-sm font-medium transition-colors",
+          "whitespace-nowrap rounded-md px-2 py-1.5 text-sm font-medium transition-colors",
           isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
           (!isAvailable || disabled) && "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-muted-foreground"
         ),
-        children: THINKING_LABELS[level]
+        children: COMPACT_LABELS[level]
       },
       level
     );

package/dist/components/model-selection/thinking-picker.cjs

@@ -14,7 +14,7 @@ function ThinkingPicker({
   onSelect,
   className
 }) {
-  const levels = disabled ? _common.THINKING_LEVELS : _common.THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
+  const levels = disabled ? _common.THINKING_LEVELS.filter((level) => level === "off") : _common.THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
   const activeIndex = Math.max(
     0,
     levels.indexOf(disabled ? "off" : current)

package/dist/components/model-selection/thinking-picker.js

@@ -14,7 +14,7 @@ function ThinkingPicker({
   onSelect,
   className
 }) {
-  const levels = disabled ? THINKING_LEVELS : THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
+  const levels = disabled ? THINKING_LEVELS.filter((level) => level === "off") : THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
   const activeIndex = Math.max(
     0,
     levels.indexOf(disabled ? "off" : current)

package/dist/components/ui/calendar.cjs

@@ -79,7 +79,7 @@ function Calendar({
           captionLayout === "label" ? "text-base" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-base h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
-        table: "w-full border-collapse",
+        month_grid: _utils.cn.call(void 0, "w-full border-collapse", defaultClassNames.month_grid),
         weekdays: _utils.cn.call(void 0, "flex", defaultClassNames.weekdays),
         weekday: _utils.cn.call(void 0, 
           "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",

package/dist/components/ui/calendar.js

@@ -79,7 +79,7 @@ function Calendar({
           captionLayout === "label" ? "text-base" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-base h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
-        table: "w-full border-collapse",
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
           "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",

package/dist/components/ui/combobox.cjs

@@ -225,7 +225,7 @@ function ComboboxChips({
     {
       "data-slot": "combobox-chips",
       className: _utils.cn.call(void 0, 
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
+        "dark:bg-input/30 border-input focus-within:border-ring has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] has-data-[slot=combobox-chip]:px-1.5",
         className
       ),
       ...props

package/dist/components/ui/combobox.js

@@ -225,7 +225,7 @@ function ComboboxChips({
     {
       "data-slot": "combobox-chips",
       className: cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
+        "dark:bg-input/30 border-input focus-within:border-ring has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] has-data-[slot=combobox-chip]:px-1.5",
         className
       ),
       ...props

package/dist/components/ui/form.d.cts

@@ -11,7 +11,7 @@ declare const useFormField: () => {
     isDirty: boolean;
     isTouched: boolean;
     isValidating: boolean;
-    error?: react_hook_form.FieldError;
+    error?: react_hook_form.FieldError | undefined;
     id: string;
     name: string;
     formItemId: string;

package/dist/components/ui/form.d.ts

@@ -11,7 +11,7 @@ declare const useFormField: () => {
     isDirty: boolean;
     isTouched: boolean;
     isValidating: boolean;
-    error?: react_hook_form.FieldError;
+    error?: react_hook_form.FieldError | undefined;
     id: string;
     name: string;
     formItemId: string;

package/dist/components/ui/input-group.cjs

@@ -19,7 +19,7 @@ function InputGroup({ className, ...props }) {
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring",
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
         className

package/dist/components/ui/input-group.js

@@ -19,7 +19,7 @@ function InputGroup({ className, ...props }) {
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring",
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
         className

package/dist/components/ui/input-otp.cjs

@@ -45,7 +45,7 @@ function InputOTPSlot({
       "data-slot": "input-otp-slot",
       "data-active": isActive,
       className: _utils.cn.call(void 0, 
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex size-9 items-center justify-center border-y border-r text-base shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        "data-[active=true]:border-ring aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex size-9 items-center justify-center border-y border-r text-base shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10",
         className
       ),
       ...props,

package/dist/components/ui/input-otp.js

@@ -45,7 +45,7 @@ function InputOTPSlot({
       "data-slot": "input-otp-slot",
       "data-active": isActive,
       className: cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex size-9 items-center justify-center border-y border-r text-base shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        "data-[active=true]:border-ring aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex size-9 items-center justify-center border-y border-r text-base shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10",
         className
       ),
       ...props,

package/dist/components/ui/input.cjs

@@ -9,9 +9,9 @@ function Input({ className, type, placeholder, "aria-label": ariaLabel, ...props
       type,
       "data-slot": "input",
       className: _utils.cn.call(void 0, 
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-base file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-base",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-base file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-ring",
+        "aria-invalid:border-destructive",
         className
       ),
       ...props

package/dist/components/ui/input.js

@@ -9,9 +9,9 @@ function Input({ className, type, placeholder, "aria-label": ariaLabel, ...props
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-base file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-base",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-base file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-ring",
+        "aria-invalid:border-destructive",
         className
       ),
       ...props

package/dist/components/ui/native-select.cjs

@@ -21,8 +21,8 @@ function NativeSelect({
             "data-size": size,
             className: _utils.cn.call(void 0, 
               "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
-              "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-              "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+              "focus-visible:border-ring",
+              "aria-invalid:border-destructive",
               className
             ),
             ...props

package/dist/components/ui/native-select.js

@@ -21,8 +21,8 @@ function NativeSelect({
             "data-size": size,
             className: cn(
               "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
-              "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-              "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+              "focus-visible:border-ring",
+              "aria-invalid:border-destructive",
               className
             ),
             ...props

package/dist/components/ui/select.cjs

@@ -31,7 +31,7 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: _utils.cn.call(void 0, 
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,

package/dist/components/ui/select.js

@@ -31,7 +31,7 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,

package/dist/components/ui/slider.cjs

@@ -8,6 +8,9 @@ function Slider({
   value,
   min = 0,
   max = 100,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }) {
   const _values = React.useMemo(
@@ -55,6 +58,9 @@ function Slider({
           _radixui.Slider.Thumb,
           {
             "data-slot": "slider-thumb",
+            id: id && index === 0 ? id : void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
             className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
           },
           thumbKeys[index]

package/dist/components/ui/slider.d.cts

@@ -2,6 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Slider as Slider$1 } from 'radix-ui';
 
-declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof Slider$1.Root>): react_jsx_runtime.JSX.Element;
+declare function Slider({ className, defaultValue, value, min, max, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: React.ComponentProps<typeof Slider$1.Root>): react_jsx_runtime.JSX.Element;
 
 export { Slider };

package/dist/components/ui/slider.d.ts

@@ -2,6 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Slider as Slider$1 } from 'radix-ui';
 
-declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof Slider$1.Root>): react_jsx_runtime.JSX.Element;
+declare function Slider({ className, defaultValue, value, min, max, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: React.ComponentProps<typeof Slider$1.Root>): react_jsx_runtime.JSX.Element;
 
 export { Slider };

package/dist/components/ui/slider.js

@@ -8,6 +8,9 @@ function Slider({
   value,
   min = 0,
   max = 100,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }) {
   const _values = React.useMemo(
@@ -55,6 +58,9 @@ function Slider({
           SliderPrimitive.Thumb,
           {
             "data-slot": "slider-thumb",
+            id: id && index === 0 ? id : void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
             className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
           },
           thumbKeys[index]