@the12company/ui 0.1.8 → 0.1.9

package/dist/index.d.ts

@@ -617,7 +617,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;
@@ -636,7 +636,7 @@ declare const HoverCard: React$1.FC<HoverCardPrimitive.HoverCardProps>;
 declare const HoverCardTrigger: React$1.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React$1.RefAttributes<HTMLAnchorElement>>;
 declare const HoverCardContent: React$1.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "nonce" | "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -646,10 +646,11 @@ declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.Inp
     pasteTransformer?: (pasted: string) => string;
     containerClassName?: string;
     noScriptCSSFallback?: string | null;
+    nonce?: string;
 } & {
     render: (props: input_otp.RenderProps) => React$1.ReactNode;
     children?: never;
-} & React$1.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+} & React$1.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "nonce" | "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -659,6 +660,7 @@ declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.Inp
     pasteTransformer?: (pasted: string) => string;
     containerClassName?: string;
     noScriptCSSFallback?: string | null;
+    nonce?: string;
 } & {
     render?: never;
     children: React$1.ReactNode;
@@ -853,7 +855,7 @@ type SearchableSelectLoadResult = {
 };
 type SearchableSelectProps = {
     value: string;
-    onChange: (id: string) => void;
+    onChange: (id: string, item?: SearchableSelectItem) => void;
     /** Sentinel value meaning “no filter / all”. @default "all" */
     allValue?: string;
     allLabel: string;
@@ -875,6 +877,10 @@ type SearchableSelectProps = {
     disabled?: boolean;
     /** When this changes, cached items/labels are cleared. */
     resetKey?: string | number;
+    /** Treat the trigger as filtered even when value is still `allValue`. */
+    forceActive?: boolean;
+    /** Called when a display label is known for the current (or newly selected) id. */
+    onResolvedLabel?: (id: string, label: string) => void;
     emptyLabel?: string;
     loadingLabel?: string;
     loadingMoreLabel?: string;
@@ -884,7 +890,7 @@ type SearchableSelectProps = {
  * Async searchable combobox with infinite scroll.
  * Data loading is injected via `loadItems` — no product API coupling.
  */
-declare function SearchableSelect({ value, onChange, allValue, allLabel, searchPlaceholder, loadItems, resolveLabel, pageSize, triggerClassName, icon, nestedInPopover, disabled, resetKey, emptyLabel, loadingLabel, loadingMoreLabel, debounceMs, }: SearchableSelectProps): React$1.JSX.Element;
+declare function SearchableSelect({ value, onChange, allValue, allLabel, searchPlaceholder, loadItems, resolveLabel, pageSize, triggerClassName, icon, nestedInPopover, disabled, resetKey, forceActive, onResolvedLabel, emptyLabel, loadingLabel, loadingMoreLabel, debounceMs, }: SearchableSelectProps): React$1.JSX.Element;
 
 declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1011,6 +1017,7 @@ declare const Toaster$1: ({ duration, toastOptions, ...props }: ToasterProps) =>
 
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
     thumbClassName?: string;
+    loading?: boolean;
 } & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface TableProps extends React$1.HTMLAttributes<HTMLTableElement> {

package/dist/index.js

@@ -2426,7 +2426,7 @@ function ChartCard({
         glass ? "bg-content-glass" : "bg-card border border-border"
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
               /* @__PURE__ */ jsx(
@@ -2527,7 +2527,7 @@ var DialogContent = React11.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] outline-none max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 md:gap-6 border bg-background p-6 shadow-lg duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid max-h-[calc(100dvh-2rem)] scrollbar-thin overflow-y-auto overscroll-contain w-[calc(100%-2rem)] outline-none max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 md:gap-6 border bg-background p-6 shadow-lg duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
         className
       ),
       ...props,
@@ -4105,6 +4105,8 @@ function SearchableSelect({
   nestedInPopover = false,
   disabled = false,
   resetKey,
+  forceActive = false,
+  onResolvedLabel,
   emptyLabel = "Nenhum resultado.",
   loadingLabel = "Buscando\u2026",
   loadingMoreLabel = "Carregando...",
@@ -4124,12 +4126,16 @@ function SearchableSelect({
   const loadMoreLockRef = React11.useRef(false);
   const loadItemsRef = React11.useRef(loadItems);
   const resolveLabelRef = React11.useRef(resolveLabel);
+  const onResolvedLabelRef = React11.useRef(onResolvedLabel);
   React11.useEffect(() => {
     loadItemsRef.current = loadItems;
   }, [loadItems]);
   React11.useEffect(() => {
     resolveLabelRef.current = resolveLabel;
   }, [resolveLabel]);
+  React11.useEffect(() => {
+    onResolvedLabelRef.current = onResolvedLabel;
+  }, [onResolvedLabel]);
   React11.useEffect(() => {
     const t = window.setTimeout(() => setDebouncedSearch(search), debounceMs);
     return () => window.clearTimeout(t);
@@ -4225,6 +4231,7 @@ function SearchableSelect({
         setLabelById(
           (prev) => prev[value] ? prev : { ...prev, [value]: label }
         );
+        onResolvedLabelRef.current?.(value, label);
         return;
       }
       const { items: list } = await loadItemsRef.current({
@@ -4238,6 +4245,7 @@ function SearchableSelect({
         setLabelById(
           (prev) => prev[value] ? prev : { ...prev, [value]: hit.label }
         );
+        onResolvedLabelRef.current?.(value, hit.label);
       }
     })();
     return () => {
@@ -4262,7 +4270,7 @@ function SearchableSelect({
   React11.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
-  const isFiltered = value !== allValue && value.trim() !== "";
+  const isFiltered = forceActive || value !== allValue && value.trim() !== "";
   return /* @__PURE__ */ jsxs(
     Popover,
     {
@@ -4301,7 +4309,7 @@ function SearchableSelect({
                   "span",
                   {
                     className: cn("truncate", isFiltered && "text-foreground"),
-                    title: value !== allValue ? triggerLabel : void 0,
+                    title: isFiltered ? triggerLabel : void 0,
                     children: triggerLabel
                   }
                 )
@@ -4359,11 +4367,14 @@ function SearchableSelect({
                         value === item.id && "bg-primary/45"
                       ),
                       onSelect: () => {
-                        onChange(item.id);
+                        onChange(item.id, item);
                         setLabelById((prev) => ({
                           ...prev,
                           [item.id]: item.label || item.id
                         }));
+                        if (item.label) {
+                          onResolvedLabelRef.current?.(item.id, item.label);
+                        }
                         setOpen(false);
                       },
                       children: [
@@ -4599,21 +4610,44 @@ var Toaster = ({ duration = 4e3, toastOptions, ...props }) => {
     }
   );
 };
-var Switch = React11.forwardRef(({ className, thumbClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React11.forwardRef(({ className, thumbClassName, loading = false, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
     className: cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+      "peer group inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      loading ? "cursor-wait disabled:cursor-wait disabled:opacity-100" : "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
       className
     ),
     ...props,
+    disabled: disabled || loading,
+    "aria-busy": loading || void 0,
     ref,
     children: /* @__PURE__ */ jsx(
       SwitchPrimitives.Thumb,
       {
         className: cn(
-          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+          "pointer-events-none relative flex h-5 w-5 items-center justify-center rounded-full bg-background shadow-lg ring-0 transition-[transform,background-color,box-shadow] duration-300 ease-out data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+          loading && "bg-transparent shadow-none",
           thumbClassName
+        ),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute inset-0 transition-[opacity,transform] duration-300 ease-out",
+              loading ? "scale-100 opacity-100" : "scale-75 opacity-0"
+            ),
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "absolute inset-0 rounded-full border-2 border-primary border-t-transparent group-data-[state=checked]:border-background group-data-[state=checked]:border-t-transparent",
+                  loading && "animate-spin"
+                )
+              }
+            )
+          }
         )
       }
     )