laif-ds 0.2.52 → 0.2.54

package/dist/components/ui/input.js

@@ -1,19 +1,18 @@
 "use client";
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
 import { Label as se } from "./label.js";
 import { designTokens as o } from "../../lib/design-tokens.js";
-import { cn as l } from "../../lib/utils.js";
-import { cva as R } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn as n } from "../../lib/utils.js";
+import { cva as j } from "../../node_modules/class-variance-authority/dist/index.js";
 import * as a from "react";
 import { Icon as N } from "./icon.js";
 import { Typo as te } from "./typo.js";
-const ae = R(
-  l(
+const ae = j(
+  n(
     o.input.base,
     o.radius.default,
     "items-center gap-2 px-3",
-    // Focus states using the standard ring token but adapted for focus-within
-    "focus-within:ring-d-ring/50 focus-within:ring-[3px] focus-within:border-d-ring outline-none",
+    o.focusRingWithin,
     o.input.invalid
   ),
   {
@@ -28,8 +27,8 @@ const ae = R(
       size: "default"
     }
   }
-), re = R(
-  l(
+), re = j(
+  n(
     o.text.base,
     "shadow-none flex-1 min-w-0 bg-transparent outline-none border-0 p-0 overflow-hidden text-ellipsis",
     "file:text-d-foreground file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium",
@@ -43,7 +42,7 @@ const ae = R(
       size: {
         default: "file:h-7",
         sm: "text-xs file:h-6",
-        lg: "text-lg file:h-8"
+        lg: "text-base file:h-8"
       }
     },
     defaultVariants: {
@@ -55,7 +54,7 @@ const ae = R(
   hide: "Nascondi password"
 }, fe = a.forwardRef(
   ({
-    className: W,
+    className: A,
     type: p,
     label: T,
     labelClassName: D,
@@ -77,7 +76,7 @@ const ae = R(
     validityI18n: e,
     ...$
   }, J) => {
-    const [u, K] = a.useState(!1), [h, k] = a.useState(!0), [Q, L] = a.useState(!1), [U, V] = a.useState(""), X = a.useId(), w = G ?? X, j = `${w}-validity`, x = a.useRef(null), b = p === "password", Y = b ? u ? "text" : "password" : p, A = F ?? (!h && Q ? !0 : void 0), Z = [H, B && j].filter(Boolean).join(" ").trim() || void 0;
+    const [u, K] = a.useState(!1), [h, k] = a.useState(!0), [Q, L] = a.useState(!1), [U, V] = a.useState(""), X = a.useId(), w = G ?? X, R = `${w}-validity`, x = a.useRef(null), b = p === "password", Y = b ? u ? "text" : "password" : p, W = F ?? (!h && Q ? !0 : void 0), Z = [H, B && R].filter(Boolean).join(" ").trim() || void 0;
     a.useImperativeHandle(J, () => x.current);
     const q = a.useCallback(
       (t) => {
@@ -128,39 +127,39 @@ const ae = R(
       },
       [z, c]
     );
-    return /* @__PURE__ */ f("div", { className: l("flex flex-col gap-1.5", W), children: [
-      T && /* @__PURE__ */ f(se, { htmlFor: w, className: l("gap-0.5", D), children: [
+    return /* @__PURE__ */ f("div", { className: n("flex flex-col gap-1.5", A), children: [
+      T && /* @__PURE__ */ f(se, { htmlFor: w, className: n("gap-0.5", D), children: [
         T,
-        C && h && /* @__PURE__ */ n("div", { children: "*" }),
-        !h && /* @__PURE__ */ n("div", { className: "text-d-destructive", children: "*" })
+        C && h && /* @__PURE__ */ l("div", { children: "*" }),
+        !h && /* @__PURE__ */ l("div", { className: "text-d-destructive", children: "*" })
       ] }),
       /* @__PURE__ */ f(
         "div",
         {
-          className: l(
+          className: n(
             ae({ size: g }),
             d ? "cursor-not-allowed opacity-50" : "cursor-text"
           ),
-          "aria-invalid": A,
+          "aria-invalid": W,
           onClick: q,
           children: [
             (v || S) && /* @__PURE__ */ f("div", { className: "text-d-muted-foreground flex shrink-0 items-center gap-2", children: [
-              v && /* @__PURE__ */ n(N, { name: v, size: g === "lg" ? "sm" : "xs" }),
+              v && /* @__PURE__ */ l(N, { name: v, size: g === "lg" ? "sm" : "xs" }),
               S
             ] }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ l(
               "input",
               {
                 id: w,
                 type: Y,
                 "data-slot": "input",
-                className: l(re({ size: g })),
+                className: n(re({ size: g })),
                 ref: x,
                 disabled: d,
                 onChange: y,
                 onBlur: I,
                 onInvalid: ee,
-                "aria-invalid": A,
+                "aria-invalid": W,
                 "aria-describedby": Z,
                 required: C,
                 step: p === "number" ? "any" : void 0,
@@ -174,7 +173,7 @@ const ae = R(
                 onClick: (t) => {
                   t.stopPropagation(), t.preventDefault(), K((s) => !s);
                 },
-                className: l(
+                className: n(
                   "text-d-muted-foreground flex shrink-0 cursor-pointer items-center",
                   d && "cursor-not-allowed"
                 ),
@@ -184,31 +183,31 @@ const ae = R(
                 title: u ? m.hide : m.show,
                 disabled: d,
                 children: [
-                  /* @__PURE__ */ n(
+                  /* @__PURE__ */ l(
                     N,
                     {
                       name: u ? "EyeOff" : "Eye",
                       size: g === "lg" ? "sm" : "xs"
                     }
                   ),
-                  /* @__PURE__ */ n("span", { className: "sr-only", children: u ? m.hide : m.show })
+                  /* @__PURE__ */ l("span", { className: "sr-only", children: u ? m.hide : m.show })
                 ]
               }
             ) : (M || E) && /* @__PURE__ */ f("div", { className: "text-d-muted-foreground flex shrink-0 items-center gap-2", children: [
               E,
-              M && /* @__PURE__ */ n(N, { name: M, size: g === "lg" ? "sm" : "xs" })
+              M && /* @__PURE__ */ l(N, { name: M, size: g === "lg" ? "sm" : "xs" })
             ] })
           ]
         }
       ),
-      B && U.length > 0 && /* @__PURE__ */ n(
+      B && U.length > 0 && /* @__PURE__ */ l(
         te,
         {
           variant: "caption",
-          id: j,
+          id: R,
           role: h ? "status" : "alert",
           "aria-live": "polite",
-          className: l(
+          className: n(
             "max-w-full min-w-0 text-wrap",
             h ? "text-d-success" : "text-d-destructive"
           ),

package/dist/index.d.ts

@@ -306,6 +306,53 @@ declare interface AppStepperProps extends Omit<StepperProps, "children"> {
     indicators?: StepIndicators_2;
 }
 
+export declare function AppTooltip({ content, children, label, labelClassName, header, variant, triggerVariant, size, className, wrpClassName, contentClassName, side, align, sideOffset, matchTriggerWidth, delayDuration, disabled, asChild, }: AppTooltipProps): JSX.Element;
+
+export declare type AppTooltipAlign = "start" | "center" | "end";
+
+declare interface AppTooltipProps {
+    /** Content displayed inside the tooltip */
+    content: React_2.ReactNode;
+    /** Element that triggers the tooltip on hover/focus */
+    children: React_2.ReactNode;
+    /** Optional label displayed above the tooltip trigger */
+    label?: string | React_2.ReactNode;
+    /** Optional header displayed at the top of the tooltip content */
+    header?: string | React_2.ReactNode;
+    /** Tooltip content variant - affects background and styling */
+    variant?: AppTooltipVariant;
+    /** Trigger element variant - affects hover states */
+    triggerVariant?: VariantProps<typeof tooltipTriggerVariants>["variant"];
+    /** Size of the trigger element */
+    size?: VariantProps<typeof tooltipTriggerVariants>["size"];
+    /** Additional className for the trigger wrapper */
+    className?: string;
+    /** Additional className for the outer wrapper (includes label) */
+    wrpClassName?: string;
+    /** Additional className for the tooltip content */
+    contentClassName?: string;
+    /** Additional className for the label */
+    labelClassName?: string;
+    /** Side where the tooltip appears */
+    side?: AppTooltipSide;
+    /** Alignment of the tooltip relative to the trigger */
+    align?: AppTooltipAlign;
+    /** Offset from the trigger in pixels */
+    sideOffset?: number;
+    /** Whether the tooltip should match the trigger's width */
+    matchTriggerWidth?: boolean;
+    /** Delay before showing tooltip (ms) */
+    delayDuration?: number;
+    /** Whether to disable the tooltip */
+    disabled?: boolean;
+    /** Whether to use asChild pattern for trigger (for custom elements) */
+    asChild?: boolean;
+}
+
+export declare type AppTooltipSide = "top" | "right" | "bottom" | "left";
+
+export declare type AppTooltipVariant = "primary" | "card";
+
 export declare function AspectRatio({ ...props }: AspectRatioProps): JSX.Element;
 
 declare type AspectRatioProps = React.ComponentProps<typeof AspectRatioPrimitive.Root>;
@@ -422,6 +469,7 @@ declare type BaseProps = {
     maxSelectedMessage?: (max: number) => string;
     label?: string | React.ReactNode;
     className?: string;
+    labelClassName?: string;
     wrpClassName?: string;
     searchable?: boolean;
     creatable?: boolean;
@@ -1421,7 +1469,7 @@ export declare interface DataTableState {
     computedSorting?: DataTableSorting;
 }
 
-export declare function DatePicker({ value, onChange, placeholder, dateFormat, className, disabled, size, firstDate, lastDate, availableDates, locale, initialCalendarMonth, customCalendarProps, }: DatePickerProps): JSX.Element;
+export declare function DatePicker({ value, onChange, placeholder, dateFormat, className, disabled, size, firstDate, lastDate, availableDates, locale, initialCalendarMonth, customCalendarProps, label, wrpClassName, }: DatePickerProps): JSX.Element;
 
 export declare interface DatePickerProps {
     value?: Date;
@@ -1438,6 +1486,8 @@ export declare interface DatePickerProps {
     locale?: Partial<Locale>;
     initialCalendarMonth?: Date;
     customCalendarProps?: React_2.ComponentProps<typeof Calendar>;
+    label?: string | React_2.ReactNode;
+    wrpClassName?: string;
 }
 
 /**
@@ -2584,6 +2634,11 @@ export declare function TooltipProvider({ delayDuration, ...props }: React_2.Com
 
 export declare function TooltipTrigger({ ...props }: React_2.ComponentProps<typeof TooltipPrimitive.Trigger>): JSX.Element;
 
+declare const tooltipTriggerVariants: (props?: ({
+    variant?: "default" | "secondary" | "ghost" | "primary" | "muted" | "accent" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 declare const tooltipVariants: (props?: ({
     variant?: "primary" | "card" | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/index.js

@@ -90,13 +90,14 @@ import { WeeklyCalendar as Hn } from "./components/ui/weekly-calendar/weekly-cal
 import { cn as yn, downloadFile as Nn, hexContrast as On, hexToRgba as Vn, previewFile as zn, stringToHexColor as En } from "./lib/utils.js";
 import { AppKanban as Kn } from "./components/ui/app-kanban.js";
 import { AppStepper as Wn } from "./components/ui/app-stepper.js";
-import { createActionColumn as Jn, createBooleanColumn as Qn, createBooleanFilter as Xn, createComputedColumn as Yn, createDateColumn as Zn, createDateFilter as _n, createDateTimeColumn as $n, createDateTimeFilter as ei, createDisplayColumn as ri, createFilterBadge as oi, createFilterBadges as ti, createInitialState as ai, createListFilter as ni, createMultiSelectColumn as ii, createNumberColumn as pi, createNumberFilter as li, createSingleSelectColumn as mi, createSorting as ui, createStringColumn as xi, createStringFilter as di, getColumnIds as Ci, isValidOperatorForType as gi, pinColumns as fi, toSelectOptions as bi, toSelectOptionsFromObjects as si, updateColumnListOptions as ci } from "./components/ui/tables/data-table/data-table.utils.js";
-import { useAudioRecording as Mi } from "./hooks/use-audio-recording.js";
-import { useAutoScroll as Di } from "./hooks/use-auto-scroll.js";
-import { useAutosizeTextArea as Fi } from "./hooks/use-autosize-textarea.js";
-import { useCopyToClipboard as Pi } from "./hooks/use-copy-to-clipboard.js";
-import { useDebounce as vi } from "./hooks/use-debounce.js";
-import { useIsMobile as Gi } from "./hooks/use-mobile.js";
+import { AppTooltip as Jn } from "./components/ui/app-tooltip.js";
+import { createActionColumn as Xn, createBooleanColumn as Yn, createBooleanFilter as Zn, createComputedColumn as _n, createDateColumn as $n, createDateFilter as ei, createDateTimeColumn as ri, createDateTimeFilter as oi, createDisplayColumn as ti, createFilterBadge as ai, createFilterBadges as ni, createInitialState as ii, createListFilter as pi, createMultiSelectColumn as li, createNumberColumn as mi, createNumberFilter as ui, createSingleSelectColumn as xi, createSorting as di, createStringColumn as Ci, createStringFilter as gi, getColumnIds as fi, isValidOperatorForType as bi, pinColumns as si, toSelectOptions as ci, toSelectOptionsFromObjects as Si, updateColumnListOptions as Mi } from "./components/ui/tables/data-table/data-table.utils.js";
+import { useAudioRecording as Di } from "./hooks/use-audio-recording.js";
+import { useAutoScroll as Fi } from "./hooks/use-auto-scroll.js";
+import { useAutosizeTextArea as Pi } from "./hooks/use-autosize-textarea.js";
+import { useCopyToClipboard as vi } from "./hooks/use-copy-to-clipboard.js";
+import { useDebounce as Gi } from "./hooks/use-debounce.js";
+import { useIsMobile as Li } from "./hooks/use-mobile.js";
 export {
   pe as Accordion,
   le as AccordionContent,
@@ -122,6 +123,7 @@ export {
   pa as AppSelect,
   ma as AppSidebar,
   Wn as AppStepper,
+  Jn as AppTooltip,
   a as AspectRatio,
   Pe as AsyncSelect,
   Ot as AudioVisualizer,
@@ -363,47 +365,47 @@ export {
   g as buttonVariants,
   yn as cn,
   Sa as confirm,
-  Jn as createActionColumn,
-  Qn as createBooleanColumn,
-  Xn as createBooleanFilter,
-  Yn as createComputedColumn,
-  Zn as createDateColumn,
-  _n as createDateFilter,
-  $n as createDateTimeColumn,
-  ei as createDateTimeFilter,
-  ri as createDisplayColumn,
-  oi as createFilterBadge,
-  ti as createFilterBadges,
-  ai as createInitialState,
-  ni as createListFilter,
-  ii as createMultiSelectColumn,
-  pi as createNumberColumn,
-  li as createNumberFilter,
-  mi as createSingleSelectColumn,
-  ui as createSorting,
-  xi as createStringColumn,
-  di as createStringFilter,
+  Xn as createActionColumn,
+  Yn as createBooleanColumn,
+  Zn as createBooleanFilter,
+  _n as createComputedColumn,
+  $n as createDateColumn,
+  ei as createDateFilter,
+  ri as createDateTimeColumn,
+  oi as createDateTimeFilter,
+  ti as createDisplayColumn,
+  ai as createFilterBadge,
+  ni as createFilterBadges,
+  ii as createInitialState,
+  pi as createListFilter,
+  li as createMultiSelectColumn,
+  mi as createNumberColumn,
+  ui as createNumberFilter,
+  xi as createSingleSelectColumn,
+  di as createSorting,
+  Ci as createStringColumn,
+  gi as createStringFilter,
   Nn as downloadFile,
-  Ci as getColumnIds,
+  fi as getColumnIds,
   On as hexContrast,
   Vn as hexToRgba,
-  gi as isValidOperatorForType,
-  fi as pinColumns,
+  bi as isValidOperatorForType,
+  si as pinColumns,
   zn as previewFile,
   Da as previewFileModal,
   Aa as safePreviewFileModal,
   En as stringToHexColor,
-  bi as toSelectOptions,
-  si as toSelectOptionsFromObjects,
+  ci as toSelectOptions,
+  Si as toSelectOptionsFromObjects,
   _ as toggleVariants,
-  ci as updateColumnListOptions,
-  Mi as useAudioRecording,
-  Di as useAutoScroll,
-  Fi as useAutosizeTextArea,
-  Pi as useCopyToClipboard,
-  vi as useDebounce,
+  Mi as updateColumnListOptions,
+  Di as useAudioRecording,
+  Fi as useAutoScroll,
+  Pi as useAutosizeTextArea,
+  vi as useCopyToClipboard,
+  Gi as useDebounce,
   $t as useEditorModal,
   yr as useFormField,
-  Gi as useIsMobile,
+  Li as useIsMobile,
   Dn as useSidebar
 };

package/dist/lib/design-tokens.js

@@ -2,6 +2,8 @@
 const e = {
   // Interaction states
   focusRing: "focus-visible:ring-d-ring/50 focus-visible:ring-[3px] focus-visible:border-d-ring outline-none transition-all duration-200",
+  focusRingWithin: "focus-within:ring-d-ring/50 focus-within:ring-[3px] focus-within:border-d-ring outline-none transition-all duration-200",
+  activeRing: "ring-d-ring/50 ring-[3px] border-d-ring",
   // Base shapes
   radius: {
     default: "rounded-md",
@@ -11,7 +13,7 @@ const e = {
   },
   // Input & Button heights/paddings
   sizes: {
-    default: "h-9 px-3 py-2",
+    default: "h-9 px-3 py-2 text-sm",
     sm: "h-8 px-2.5 py-1.5 text-xs",
     lg: "h-10 px-4 py-2 text-base",
     icon: {