@dinofront/design_system 1.2.1 → 1.3.0

package/dist/lib/FormContext.d.ts

@@ -1,16 +1,16 @@
 import { Control, FieldErrors, FieldValues, UseFormClearErrors, UseFormGetFieldState, UseFormGetValues, UseFormRegister, UseFormReset, UseFormSetError, UseFormSetValue, UseFormTrigger, UseFormUnregister, UseFormWatch } from 'react-hook-form';
 export interface FormContextValue {
-    control: Control<FieldValues>;
-    register: UseFormRegister<FieldValues>;
+    control?: Control<FieldValues>;
+    register?: UseFormRegister<FieldValues>;
     errors: FieldErrors<FieldValues>;
     setValue: UseFormSetValue<FieldValues>;
-    getValues: UseFormGetValues<FieldValues>;
-    watch: UseFormWatch<FieldValues>;
+    getValues?: UseFormGetValues<FieldValues>;
+    watch?: UseFormWatch<FieldValues>;
     reset: UseFormReset<FieldValues>;
-    trigger: UseFormTrigger<FieldValues>;
+    trigger?: UseFormTrigger<FieldValues>;
     clearErrors: UseFormClearErrors<FieldValues>;
     setError: UseFormSetError<FieldValues>;
-    getFieldState: UseFormGetFieldState<FieldValues>;
+    getFieldState?: UseFormGetFieldState<FieldValues>;
     unregister: UseFormUnregister<FieldValues>;
     isDirty: boolean;
     isSubmitted: boolean;

package/dist/lib/optionValue.d.ts

@@ -0,0 +1,10 @@
+import { OptionValue } from '../types';
+/**
+ * Compares two option/radio values for equality the same way every
+ * component in this library does: coerced to `String(...)` first, since
+ * `OptionValue` (and `RadioValue`, which adds `boolean`) may mix strings and
+ * numbers. `undefined` never equals anything, including another `undefined`.
+ */
+export declare const isSameOptionValue: (a: OptionValue | boolean | undefined, b: OptionValue | boolean | undefined) => boolean;
+/** Whether `v` is present in `list`, compared via `isSameOptionValue`. */
+export declare const includesOptionValue: (list: readonly (OptionValue | boolean)[], v: OptionValue | boolean) => boolean;

package/dist/styles.css

@@ -70,6 +70,7 @@
     --color-black: #000;
     --color-white: #fefefe;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
@@ -110,13 +111,15 @@
     --color-brand-300: #8ecc69;
     --color-brand-200: #9cd27c;
     --color-brand-100: #aad98f;
+    --color-brand-50: #b8dfa2;
     --color-brand-40: #cae7b9;
     --color-brand-20: #edf7e8;
     --radius-full: 9999px;
     --shadow-z1: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
     --shadow-z2: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
     --shadow-z3: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
-    --shadow-z4: 0 1px 4px 0 rgba(0, 0, 0, 0.12), 0 12px 16px 0 rgba(0, 0, 0, 0.1), 0 3px 5px 0 rgba(0, 0, 0, 0.12);
+    --shadow-z4: 0 1px 4px 0 rgba(0, 0, 0, 0.12), 0 12px 16px 0 rgba(0, 0, 0, 0.1),
+    0 3px 5px 0 rgba(0, 0, 0, 0.12);
     --shadow-z5: 0 8px 16px 0 rgba(0, 0, 0, 0.12), 0 24px 32px 0 rgba(0, 0, 0, 0.12);
     --font-ps: 'Noto Sans Armenian', 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
     --text-h-xl: 64px;
@@ -369,6 +372,9 @@
   .static {
     position: static;
   }
+  .sticky {
+    position: sticky;
+  }
   .inset-0 {
     inset: 0px;
   }
@@ -534,6 +540,9 @@
   .mb-\[0\.4em\] {
     margin-bottom: 0.4em;
   }
+  .-ml-1 {
+    margin-left: calc(var(--spacing) * -1);
+  }
   .-ml-1\.5 {
     margin-left: calc(var(--spacing) * -1.5);
   }
@@ -783,6 +792,9 @@
   .w-0\.5 {
     width: calc(var(--spacing) * 0.5);
   }
+  .w-1 {
+    width: var(--spacing);
+  }
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
@@ -837,6 +849,9 @@
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -927,6 +942,9 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .min-w-0 {
     min-width: 0px;
   }
@@ -1056,6 +1074,12 @@
   .animate-spin {
     animation: var(--animate-spin);
   }
+  .cursor-col-resize {
+    cursor: col-resize;
+  }
+  .cursor-grab {
+    cursor: grab;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1068,6 +1092,9 @@
   .cursor-wait {
     cursor: wait;
   }
+  .touch-none {
+    touch-action: none;
+  }
   .resize {
     resize: both;
   }
@@ -1267,6 +1294,10 @@
     border-top-right-radius: var(--radius-lg);
     border-bottom-right-radius: var(--radius-lg);
   }
+  .rounded-b-lg {
+    border-bottom-right-radius: var(--radius-lg);
+    border-bottom-left-radius: var(--radius-lg);
+  }
   .rounded-b-xl {
     border-bottom-right-radius: var(--radius-xl);
     border-bottom-left-radius: var(--radius-xl);
@@ -1478,6 +1509,9 @@
   .bg-brand-20 {
     background-color: var(--color-brand-20);
   }
+  .bg-brand-50 {
+    background-color: var(--color-brand-50);
+  }
   .bg-brand-200\/15 {
     background-color: color-mix(in srgb, #9cd27c 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2205,6 +2239,10 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -2430,6 +2468,9 @@
         background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
       }
     }
+    .hover\:bg-brand-300:hover {
+      background-color: var(--color-brand-300);
+    }
     .hover\:bg-brand-600:hover {
       background-color: var(--color-brand-600);
     }
@@ -2581,11 +2622,22 @@
       background-color: transparent;
     }
   }
+  .data-\[resizing\]\:bg-brand-500[data-resizing] {
+    background-color: var(--color-brand-500);
+  }
   @media (prefers-reduced-motion: reduce) {
     .motion-reduce\:transition-none {
       transition-property: none;
     }
   }
+  @media (width >= 48rem) {
+    .md\:block {
+      display: block;
+    }
+    .md\:hidden {
+      display: none;
+    }
+  }
   .dark\:bg-brand-500\/10:where(.dark, .dark *) {
     background-color: color-mix(in srgb, #72bf44 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2685,6 +2737,12 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
+  .\[\&_svg\]\:h-4 svg {
+    height: calc(var(--spacing) * 4);
+  }
+  .\[\&_svg\]\:w-4 svg {
+    width: calc(var(--spacing) * 4);
+  }
   .\[\&_svg\]\:opacity-0 svg {
     opacity: 0%;
   }

package/dist/tailwind/preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"preset.js","names":[],"sources":["../../src/tailwind/tokens.ts","../../src/tailwind/preset.ts"],"sourcesContent":["/**\n * Tailwind `theme.extend`-shaped token map, for consumer apps still using a\n * JS Tailwind config (v3-style, or v4 via the `@config` compatibility\n * directive). Every value points at the CSS custom properties defined in\n * `styles/tokens.css` / `styles/theme.css` — never a hardcoded value — so\n * this stays correct regardless of light/dark mode or future palette edits.\n *\n * Consumers on native Tailwind v4 CSS config don't need this file at all:\n * importing `@ps-tools/ui/styles.css` already registers these as Tailwind\n * theme values via `@theme`.\n */\n\nconst colorScale = (name: string, steps: readonly number[]) =>\n  Object.fromEntries(steps.map((step) => [step, `var(--color-${name}-${step})`]));\n\nconst BRAND_STEPS = [20, 30, 40, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst GRAY_STEPS = [20, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst TEN_STEP = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst PURPLE_STEPS = [20, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst RED_STEPS = [20, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\n\nexport const tailwindColors = {\n  white: 'var(--color-white)',\n  brand: colorScale('brand', BRAND_STEPS),\n  gray: colorScale('gray', GRAY_STEPS),\n  green: colorScale('green', TEN_STEP),\n  blue: colorScale('blue', TEN_STEP),\n  purple: colorScale('purple', PURPLE_STEPS),\n  pink: colorScale('pink', TEN_STEP),\n  red: colorScale('red', RED_STEPS),\n  yellow: colorScale('yellow', TEN_STEP),\n\n  /* Semantic aliases — prefer these over raw scales in components. */\n  'bg-default': 'var(--color-bg-default)',\n  'bg-container': 'var(--color-bg-container)',\n  'bg-subtle': 'var(--color-bg-subtle)',\n  'bg-brand-lighter': 'var(--color-bg-brand-lighter)',\n  'bg-info-lighter': 'var(--color-bg-info-lighter)',\n  'bg-success-lighter': 'var(--color-bg-success-lighter)',\n  'bg-warning-lighter': 'var(--color-bg-warning-lighter)',\n  'bg-danger-lighter': 'var(--color-bg-danger-lighter)',\n\n  'fg-default': 'var(--color-fg-default)',\n  'fg-secondary': 'var(--color-fg-secondary)',\n  'fg-tertiary': 'var(--color-fg-tertiary)',\n  'fg-disabled': 'var(--color-fg-disabled)',\n  'fg-inverse': 'var(--color-fg-inverse)',\n  'fg-brand': 'var(--color-fg-brand)',\n  'fg-info': 'var(--color-fg-info)',\n  'fg-success': 'var(--color-fg-success)',\n  'fg-warning': 'var(--color-fg-warning)',\n  'fg-danger': 'var(--color-fg-danger)',\n\n  'border-default': 'var(--color-border-default)',\n  'border-subtle': 'var(--color-border-subtle)',\n  'border-strong': 'var(--color-border-strong)',\n  'border-brand': 'var(--color-border-brand)',\n\n  'icon-primary': 'var(--color-icon-primary)',\n  'icon-secondary': 'var(--color-icon-secondary)',\n  'icon-inverse': 'var(--color-icon-inverse)',\n  'icon-brand': 'var(--color-icon-brand)',\n  'icon-info': 'var(--color-icon-info)',\n  'icon-danger': 'var(--color-icon-danger)',\n  'icon-warning': 'var(--color-icon-warning)',\n} as const;\n\nexport const tailwindBorderRadius = {\n  xs: 'var(--radius-xs)',\n  sm: 'var(--radius-sm)',\n  md: 'var(--radius-md)',\n  lg: 'var(--radius-lg)',\n  xl: 'var(--radius-xl)',\n  '2xl': 'var(--radius-2xl)',\n  '3xl': 'var(--radius-3xl)',\n  full: 'var(--radius-full)',\n} as const;\n\nexport const tailwindBoxShadow = {\n  z1: 'var(--shadow-z1)',\n  z2: 'var(--shadow-z2)',\n  z3: 'var(--shadow-z3)',\n  z4: 'var(--shadow-z4)',\n  z5: 'var(--shadow-z5)',\n} as const;\n\nexport const tailwindFontFamily = {\n  ps: 'var(--font-ps)',\n  sans: 'var(--font-sans)',\n} as const;\n\nconst textStyle = (name: string) => [`var(--text-${name})`, { lineHeight: `var(--text-${name}--line-height)` }];\n\nexport const tailwindFontSize = {\n  'h-xl': textStyle('h-xl'),\n  'h-lg': textStyle('h-lg'),\n  'h-md': textStyle('h-md'),\n  'h-std': textStyle('h-std'),\n  'h-sm': textStyle('h-sm'),\n  'h-xs': textStyle('h-xs'),\n\n  'p-lg': textStyle('p-lg'),\n  'p-md': textStyle('p-md'),\n  'p-std': textStyle('p-std'),\n  'p-sm': textStyle('p-sm'),\n  'p-xs': textStyle('p-xs'),\n\n  'label-lg': textStyle('label-lg'),\n  'label-md': textStyle('label-md'),\n  'label-std': textStyle('label-std'),\n  'label-sm': textStyle('label-sm'),\n  'label-xs': textStyle('label-xs'),\n  'label-xxs': textStyle('label-xxs'),\n} as const;\n","import {\n  tailwindBorderRadius,\n  tailwindBoxShadow,\n  tailwindColors,\n  tailwindFontFamily,\n  tailwindFontSize,\n} from './tokens';\n\n/**\n * Minimal shape of the config fragment we export. Kept local instead of\n * importing Tailwind's own config type so this file has zero build-time\n * dependency on `tailwindcss` internals — it's just plain data.\n */\nexport interface UiPreset {\n  darkMode: 'class';\n  theme: {\n    extend: {\n      colors: typeof tailwindColors;\n      borderRadius: typeof tailwindBorderRadius;\n      boxShadow: typeof tailwindBoxShadow;\n      fontFamily: typeof tailwindFontFamily;\n      fontSize: typeof tailwindFontSize;\n    };\n  };\n}\n\n/**\n * Tailwind preset for consumer apps still on a JS config (Tailwind v3, or\n * v4 via the `@config` compatibility directive). Spread it into your own\n * config's `presets` array:\n *\n * ```js\n * // tailwind.config.js\n * import { uiPreset } from '@ps-tools/ui/preset';\n *\n * export default {\n *   presets: [uiPreset],\n *   content: [\n *     './src/**\\/*.{ts,tsx}',\n *     './node_modules/@ps-tools/ui/dist/**\\/*.js',\n *   ],\n * };\n * ```\n *\n * Native Tailwind v4 CSS-config consumers don't need this — importing\n * `@ps-tools/ui/styles.css` already registers every token via `@theme inline`.\n */\nexport const uiPreset: UiPreset = {\n  darkMode: 'class',\n  theme: {\n    extend: {\n      colors: tailwindColors,\n      borderRadius: tailwindBorderRadius,\n      boxShadow: tailwindBoxShadow,\n      fontFamily: tailwindFontFamily,\n      fontSize: tailwindFontSize,\n    },\n  },\n};\n\nexport default uiPreset;\n"],"mappings":";AAYA,IAAM,KAAc,GAAc,MAChC,OAAO,YAAY,EAAM,KAAK,MAAS,CAAC,GAAM,eAAe,EAAK,GAAG,EAAK,EAAE,CAAC,CAAC,GAE1E,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GAC1E,IAAa;CAAC;CAAI;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GACjE,IAAW;CAAC;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GAIpD,IAAiB;CAC5B,OAAO;CACP,OAAO,EAAW,SAAS,CAAW;CACtC,MAAM,EAAW,QAAQ,CAAU;CACnC,OAAO,EAAW,SAAS,CAAQ;CACnC,MAAM,EAAW,QAAQ,CAAQ;CACjC,QAAQ,EAAW,UAAU;EATT;EAAI;EAAI;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;CASvC,CAAY;CACzC,MAAM,EAAW,QAAQ,CAAQ;CACjC,KAAK,EAAW,OAAO;EAVN;EAAI;EAAI;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;CAU1C,CAAS;CAChC,QAAQ,EAAW,UAAU,CAAQ;CAGrC,cAAc;CACd,gBAAgB;CAChB,aAAa;CACb,oBAAoB;CACpB,mBAAmB;CACnB,sBAAsB;CACtB,sBAAsB;CACtB,qBAAqB;CAErB,cAAc;CACd,gBAAgB;CAChB,eAAe;CACf,eAAe;CACf,cAAc;CACd,YAAY;CACZ,WAAW;CACX,cAAc;CACd,cAAc;CACd,aAAa;CAEb,kBAAkB;CAClB,iBAAiB;CACjB,iBAAiB;CACjB,gBAAgB;CAEhB,gBAAgB;CAChB,kBAAkB;CAClB,gBAAgB;CAChB,cAAc;CACd,aAAa;CACb,eAAe;CACf,gBAAgB;AAClB,GAEa,IAAuB;CAClC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR,GAEa,IAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEa,IAAqB;CAChC,IAAI;CACJ,MAAM;AACR,GAEM,KAAa,MAAiB,CAAC,cAAc,EAAK,IAAI,EAAE,YAAY,cAAc,EAAK,gBAAgB,CAAC,GC5CjG,IAAqB;CAChC,UAAU;CACV,OAAO,EACL,QAAQ;EACN,QAAQ;EACR,cAAc;EACd,WAAW;EACX,YAAY;EACZ,UAAU;GDuCd,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GACxB,SAAS,EAAU,OAAO;GAC1B,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GAExB,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GACxB,SAAS,EAAU,OAAO;GAC1B,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GAExB,YAAY,EAAU,UAAU;GAChC,YAAY,EAAU,UAAU;GAChC,aAAa,EAAU,WAAW;GAClC,YAAY,EAAU,UAAU;GAChC,YAAY,EAAU,UAAU;GAChC,aAAa,EAAU,WAAW;ECzDpB;CACZ,EACF;AACF"}
+{"version":3,"file":"preset.js","names":[],"sources":["../../src/tailwind/tokens.ts","../../src/tailwind/preset.ts"],"sourcesContent":["/**\n * Tailwind `theme.extend`-shaped token map, for consumer apps still using a\n * JS Tailwind config (v3-style, or v4 via the `@config` compatibility\n * directive). Every value points at the CSS custom properties defined in\n * `styles/tokens.css` / `styles/theme.css` — never a hardcoded value — so\n * this stays correct regardless of light/dark mode or future palette edits.\n *\n * Consumers on native Tailwind v4 CSS config don't need this file at all:\n * importing `@ps-tools/ui/styles.css` already registers these as Tailwind\n * theme values via `@theme`.\n */\n\nconst colorScale = (name: string, steps: readonly number[]) =>\n  Object.fromEntries(steps.map((step) => [step, `var(--color-${name}-${step})`]));\n\nconst BRAND_STEPS = [20, 30, 40, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst GRAY_STEPS = [20, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst TEN_STEP = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst PURPLE_STEPS = [20, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst RED_STEPS = [20, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\n\nexport const tailwindColors = {\n  white: 'var(--color-white)',\n  brand: colorScale('brand', BRAND_STEPS),\n  gray: colorScale('gray', GRAY_STEPS),\n  green: colorScale('green', TEN_STEP),\n  blue: colorScale('blue', TEN_STEP),\n  purple: colorScale('purple', PURPLE_STEPS),\n  pink: colorScale('pink', TEN_STEP),\n  red: colorScale('red', RED_STEPS),\n  yellow: colorScale('yellow', TEN_STEP),\n\n  /* Semantic aliases — prefer these over raw scales in components. */\n  'bg-default': 'var(--color-bg-default)',\n  'bg-container': 'var(--color-bg-container)',\n  'bg-subtle': 'var(--color-bg-subtle)',\n  'bg-brand-lighter': 'var(--color-bg-brand-lighter)',\n  'bg-info-lighter': 'var(--color-bg-info-lighter)',\n  'bg-success-lighter': 'var(--color-bg-success-lighter)',\n  'bg-warning-lighter': 'var(--color-bg-warning-lighter)',\n  'bg-danger-lighter': 'var(--color-bg-danger-lighter)',\n\n  'fg-default': 'var(--color-fg-default)',\n  'fg-secondary': 'var(--color-fg-secondary)',\n  'fg-tertiary': 'var(--color-fg-tertiary)',\n  'fg-disabled': 'var(--color-fg-disabled)',\n  'fg-inverse': 'var(--color-fg-inverse)',\n  'fg-brand': 'var(--color-fg-brand)',\n  'fg-info': 'var(--color-fg-info)',\n  'fg-success': 'var(--color-fg-success)',\n  'fg-warning': 'var(--color-fg-warning)',\n  'fg-danger': 'var(--color-fg-danger)',\n\n  'border-default': 'var(--color-border-default)',\n  'border-subtle': 'var(--color-border-subtle)',\n  'border-strong': 'var(--color-border-strong)',\n  'border-brand': 'var(--color-border-brand)',\n\n  'icon-primary': 'var(--color-icon-primary)',\n  'icon-secondary': 'var(--color-icon-secondary)',\n  'icon-inverse': 'var(--color-icon-inverse)',\n  'icon-brand': 'var(--color-icon-brand)',\n  'icon-info': 'var(--color-icon-info)',\n  'icon-danger': 'var(--color-icon-danger)',\n  'icon-warning': 'var(--color-icon-warning)',\n} as const;\n\nexport const tailwindBorderRadius = {\n  xs: 'var(--radius-xs)',\n  sm: 'var(--radius-sm)',\n  md: 'var(--radius-md)',\n  lg: 'var(--radius-lg)',\n  xl: 'var(--radius-xl)',\n  '2xl': 'var(--radius-2xl)',\n  '3xl': 'var(--radius-3xl)',\n  full: 'var(--radius-full)',\n} as const;\n\nexport const tailwindBoxShadow = {\n  z1: 'var(--shadow-z1)',\n  z2: 'var(--shadow-z2)',\n  z3: 'var(--shadow-z3)',\n  z4: 'var(--shadow-z4)',\n  z5: 'var(--shadow-z5)',\n} as const;\n\nexport const tailwindFontFamily = {\n  ps: 'var(--font-ps)',\n  sans: 'var(--font-sans)',\n} as const;\n\nconst textStyle = (name: string) => [\n  `var(--text-${name})`,\n  { lineHeight: `var(--text-${name}--line-height)` },\n];\n\nexport const tailwindFontSize = {\n  'h-xl': textStyle('h-xl'),\n  'h-lg': textStyle('h-lg'),\n  'h-md': textStyle('h-md'),\n  'h-std': textStyle('h-std'),\n  'h-sm': textStyle('h-sm'),\n  'h-xs': textStyle('h-xs'),\n\n  'p-lg': textStyle('p-lg'),\n  'p-md': textStyle('p-md'),\n  'p-std': textStyle('p-std'),\n  'p-sm': textStyle('p-sm'),\n  'p-xs': textStyle('p-xs'),\n\n  'label-lg': textStyle('label-lg'),\n  'label-md': textStyle('label-md'),\n  'label-std': textStyle('label-std'),\n  'label-sm': textStyle('label-sm'),\n  'label-xs': textStyle('label-xs'),\n  'label-xxs': textStyle('label-xxs'),\n} as const;\n","import {\n  tailwindBorderRadius,\n  tailwindBoxShadow,\n  tailwindColors,\n  tailwindFontFamily,\n  tailwindFontSize,\n} from './tokens';\n\n/**\n * Minimal shape of the config fragment we export. Kept local instead of\n * importing Tailwind's own config type so this file has zero build-time\n * dependency on `tailwindcss` internals — it's just plain data.\n */\nexport interface UiPreset {\n  darkMode: 'class';\n  theme: {\n    extend: {\n      colors: typeof tailwindColors;\n      borderRadius: typeof tailwindBorderRadius;\n      boxShadow: typeof tailwindBoxShadow;\n      fontFamily: typeof tailwindFontFamily;\n      fontSize: typeof tailwindFontSize;\n    };\n  };\n}\n\n/**\n * Tailwind preset for consumer apps still on a JS config (Tailwind v3, or\n * v4 via the `@config` compatibility directive). Spread it into your own\n * config's `presets` array:\n *\n * ```js\n * // tailwind.config.js\n * import { uiPreset } from '@ps-tools/ui/preset';\n *\n * export default {\n *   presets: [uiPreset],\n *   content: [\n *     './src/**\\/*.{ts,tsx}',\n *     './node_modules/@ps-tools/ui/dist/**\\/*.js',\n *   ],\n * };\n * ```\n *\n * Native Tailwind v4 CSS-config consumers don't need this — importing\n * `@ps-tools/ui/styles.css` already registers every token via `@theme inline`.\n */\nexport const uiPreset: UiPreset = {\n  darkMode: 'class',\n  theme: {\n    extend: {\n      colors: tailwindColors,\n      borderRadius: tailwindBorderRadius,\n      boxShadow: tailwindBoxShadow,\n      fontFamily: tailwindFontFamily,\n      fontSize: tailwindFontSize,\n    },\n  },\n};\n\nexport default uiPreset;\n"],"mappings":";AAYA,IAAM,KAAc,GAAc,MAChC,OAAO,YAAY,EAAM,KAAK,MAAS,CAAC,GAAM,eAAe,EAAK,GAAG,EAAK,EAAE,CAAC,CAAC,GAE1E,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GAC1E,IAAa;CAAC;CAAI;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GACjE,IAAW;CAAC;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GAIpD,IAAiB;CAC5B,OAAO;CACP,OAAO,EAAW,SAAS,CAAW;CACtC,MAAM,EAAW,QAAQ,CAAU;CACnC,OAAO,EAAW,SAAS,CAAQ;CACnC,MAAM,EAAW,QAAQ,CAAQ;CACjC,QAAQ,EAAW,UAAU;EATT;EAAI;EAAI;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;CASvC,CAAY;CACzC,MAAM,EAAW,QAAQ,CAAQ;CACjC,KAAK,EAAW,OAAO;EAVN;EAAI;EAAI;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;CAU1C,CAAS;CAChC,QAAQ,EAAW,UAAU,CAAQ;CAGrC,cAAc;CACd,gBAAgB;CAChB,aAAa;CACb,oBAAoB;CACpB,mBAAmB;CACnB,sBAAsB;CACtB,sBAAsB;CACtB,qBAAqB;CAErB,cAAc;CACd,gBAAgB;CAChB,eAAe;CACf,eAAe;CACf,cAAc;CACd,YAAY;CACZ,WAAW;CACX,cAAc;CACd,cAAc;CACd,aAAa;CAEb,kBAAkB;CAClB,iBAAiB;CACjB,iBAAiB;CACjB,gBAAgB;CAEhB,gBAAgB;CAChB,kBAAkB;CAClB,gBAAgB;CAChB,cAAc;CACd,aAAa;CACb,eAAe;CACf,gBAAgB;AAClB,GAEa,IAAuB;CAClC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR,GAEa,IAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEa,IAAqB;CAChC,IAAI;CACJ,MAAM;AACR,GAEM,KAAa,MAAiB,CAClC,cAAc,EAAK,IACnB,EAAE,YAAY,cAAc,EAAK,gBAAgB,CACnD,GC/Ca,IAAqB;CAChC,UAAU;CACV,OAAO,EACL,QAAQ;EACN,QAAQ;EACR,cAAc;EACd,WAAW;EACX,YAAY;EACZ,UAAU;GD0Cd,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GACxB,SAAS,EAAU,OAAO;GAC1B,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GAExB,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GACxB,SAAS,EAAU,OAAO;GAC1B,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GAExB,YAAY,EAAU,UAAU;GAChC,YAAY,EAAU,UAAU;GAChC,aAAa,EAAU,WAAW;GAClC,YAAY,EAAU,UAAU;GAChC,YAAY,EAAU,UAAU;GAChC,aAAa,EAAU,WAAW;EC5DpB;CACZ,EACF;AACF"}

package/dist/types/base.d.ts

@@ -3,3 +3,11 @@ export interface BaseProps {
     /** Rendered as `data-test-id` for test selectors. */
     dataTestId?: string;
 }
+/**
+ * An option/item identity that can be a string or a number — compared
+ * internally via `String(...)`. Note: values are compared via `String(...)`,
+ * so within one options array a numeric `1` and a string `'1'` are treated
+ * as the same option — don't mix the two representations for what should be
+ * distinct options.
+ */
+export type OptionValue = string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinofront/design_system",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Enterprise React component library and design system built on Tailwind CSS.",
   "type": "module",
   "license": "MIT",
@@ -57,6 +57,11 @@
     }
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.25.0",