laif-ds 0.2.49 → 0.2.50

package/dist/components/ui/tabs.js

@@ -1,68 +1,77 @@
 "use client";
 import { jsx as s } from "react/jsx-runtime";
-import { Root as o, Content as i, List as r, Trigger as a } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
+import { Root as o, Content as r, List as i, Trigger as c } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
+import { designTokens as a } from "../../lib/design-tokens.js";
 import { cn as n } from "../../lib/utils.js";
 function u({
-  className: e,
-  ...t
+  className: t,
+  ...e
 }) {
   return /* @__PURE__ */ s(
     o,
     {
       "data-slot": "tabs",
-      className: n("flex flex-col gap-2", e),
-      ...t
+      className: n("flex flex-col gap-2", t),
+      ...e
     }
   );
 }
-function f({
-  className: e,
-  ...t
+function p({
+  className: t,
+  ...e
 }) {
   return /* @__PURE__ */ s(
-    r,
+    i,
     {
       "data-slot": "tabs-list",
       className: n(
-        "bg-d-secondary text-d-secondary-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        e
+        "bg-d-secondary text-d-secondary-foreground inline-flex h-9 w-fit items-center justify-center p-[3px]",
+        a.radius.lg,
+        t
       ),
-      ...t
+      ...e
     }
   );
 }
 function b({
-  className: e,
-  ...t
+  className: t,
+  ...e
 }) {
   return /* @__PURE__ */ s(
-    a,
+    c,
     {
       "data-slot": "tabs-trigger",
       className: n(
-        "data-[state=active]:bg-d-background focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:outline-d-ring text-d-foreground d-border inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        e
+        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border-transparent px-2 py-1 whitespace-nowrap transition-[color,box-shadow]",
+        a.text.base,
+        a.radius.default,
+        a.focusRing,
+        a.interaction.disabled,
+        // Active state
+        "data-[state=active]:bg-d-background data-[state=active]:text-d-foreground data-[state=active]:shadow-sm",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        t
       ),
-      ...t
+      ...e
     }
   );
 }
-function g({
-  className: e,
-  ...t
+function m({
+  className: t,
+  ...e
 }) {
   return /* @__PURE__ */ s(
-    i,
+    r,
     {
       "data-slot": "tabs-content",
-      className: n("flex-1 outline-none", e),
-      ...t
+      className: n("flex-1 outline-none", t),
+      ...e
     }
   );
 }
 export {
   u as Tabs,
-  g as TabsContent,
-  f as TabsList,
+  m as TabsContent,
+  p as TabsList,
   b as TabsTrigger
 };

package/dist/components/ui/textarea.js

@@ -1,28 +1,37 @@
 "use client";
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { Label as c } from "./label.js";
-import { cn as d } from "../../lib/utils.js";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { Label as m } from "./label.js";
+import { designTokens as t } from "../../lib/design-tokens.js";
+import { cn as s } from "../../lib/utils.js";
 function b({
-  wrpClassName: i,
-  className: o,
+  wrpClassName: o,
+  className: a,
   label: e,
-  labelClassName: a,
-  id: s,
-  ...n
+  labelClassName: n,
+  id: d,
+  ...l
 }) {
-  const r = s || (e ? `textarea-${Math.random().toString(36).substring(2, 9)}` : void 0);
-  return /* @__PURE__ */ l("div", { className: d("space-y-1.5", i), children: [
-    e && /* @__PURE__ */ t(c, { htmlFor: r, className: a, children: e }),
-    /* @__PURE__ */ t(
+  const i = d || (e ? `textarea-${Math.random().toString(36).substring(2, 9)}` : void 0);
+  return /* @__PURE__ */ c("div", { className: s("space-y-1.5", o), children: [
+    e && /* @__PURE__ */ r(m, { htmlFor: i, className: n, children: e }),
+    /* @__PURE__ */ r(
       "textarea",
       {
-        id: r,
+        id: i,
         "data-slot": "textarea",
-        className: d(
-          "border-d-border/50 placeholder:text-d-muted-foreground focus-visible:border-d-ring focus-visible:ring-d-ring/50 aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive bg-d-input flex field-sizing-content min-h-16 w-full rounded-md border px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          o
+        className: s(
+          t.input.base,
+          t.radius.default,
+          t.text.base,
+          t.text.placeholder,
+          t.interaction.disabled,
+          "flex field-sizing-content min-h-16 w-full px-3 py-2 shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
+          // Focus states
+          "focus-visible:ring-d-ring/50 focus-visible:border-d-ring focus-visible:ring-[3px]",
+          t.input.invalid,
+          a
         ),
-        ...n
+        ...l
       }
     )
   ] });

package/dist/index.d.ts

@@ -184,7 +184,7 @@ declare interface AppFormProps {
     showSubmitButton?: boolean;
 }
 
-export declare function AppKanban<T = any>({ columns, initialTasks, onTaskMove, onTaskEdit, onTaskCreate, taskActions, renderTaskContent, className, allowTaskCreate, createTaskLabel, }: AppKanbanConfig<T>): JSX.Element;
+export declare function AppKanban<T = any>({ columns, initialTasks, onTaskMove, onTaskEdit, onTaskCreate, taskActions, renderTaskContent, className, allowTaskCreate, }: AppKanbanConfig<T>): JSX.Element;
 
 export declare type AppKanbanColumn = {
     id: string;
@@ -1421,7 +1421,7 @@ export declare interface DataTableState {
     computedSorting?: DataTableSorting;
 }
 
-export declare function DatePicker({ value, onChange, placeholder, dateFormat, className, buttonVariant, 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, }: DatePickerProps): JSX.Element;
 
 export declare interface DatePickerProps {
     value?: Date;

package/dist/lib/design-tokens.js

@@ -0,0 +1,43 @@
+"use client";
+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",
+  // Base shapes
+  radius: {
+    default: "rounded-md",
+    sm: "rounded-sm",
+    lg: "rounded-lg",
+    full: "rounded-full"
+  },
+  // Input & Button heights/paddings
+  sizes: {
+    default: "h-9 px-3 py-2",
+    sm: "h-8 px-2.5 py-1.5 text-xs",
+    lg: "h-10 px-4 py-2 text-base",
+    icon: {
+      default: "size-9"
+    }
+  },
+  // Text styles for inputs/buttons
+  text: {
+    base: "text-sm font-medium whitespace-nowrap",
+    placeholder: "placeholder:text-d-muted-foreground"
+  },
+  // Common interactive behaviors
+  interaction: {
+    active: "active:scale-[0.98] active:shadow-sm transform-gpu",
+    disabled: "disabled:cursor-not-allowed disabled:opacity-50"
+  },
+  // Input specific
+  input: {
+    base: "flex w-full border border-d-border/50 bg-d-input transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium",
+    invalid: "aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive"
+  },
+  // Badge specific
+  badge: {
+    base: "inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1"
+  }
+};
+export {
+  e as designTokens
+};