@cryptlex/web-components 3.8.2 → 5.0.0

package/dist/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.es.js

@@ -0,0 +1,9 @@
+import { __module as r } from "../../../../../../_virtual/index.es.js";
+import { __require as e } from "../cjs/use-sync-external-store-shim.production.es.js";
+import { __require as o } from "../cjs/use-sync-external-store-shim.development.es.js";
+process.env.NODE_ENV === "production" ? r.exports = e() : r.exports = o();
+var m = r.exports;
+export {
+  m as s
+};
+//# sourceMappingURL=index.es.js.map

package/dist/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../../../../../node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js"],"sourcesContent":["'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('../cjs/use-sync-external-store-shim.production.js');\n} else {\n  module.exports = require('../cjs/use-sync-external-store-shim.development.js');\n}\n"],"names":["shimModule","require$$0","require$$1"],"mappings":";;;AAEI,QAAQ,IAAI,aAAa,eAC3BA,EAAA,UAAiBC,EAAA,IAEjBD,EAAA,UAAiBE,EAAA;;","x_google_ignoreList":[0]}

package/dist/utils/form-hook.es.js

@@ -1,28 +1,34 @@
-import { formContext as o, fieldContext as t } from "./form-context.es.js";
-import { createFormHook as r } from "@tanstack/react-form";
-import { TfTextarea as m } from "../components/inputs/textarea.es.js";
-import { TfMultiSelect as e } from "../components/inputs/multi-select.es.js";
-import { TfCheckbox as f } from "../components/inputs/checkbox.es.js";
-import { TfLicenseTypeSelect as p } from "../components/inputs/license-type-select.es.js";
-import { TfCountrySelect as i } from "../components/inputs/country-select.es.js";
-import { TfInput as n } from "../components/inputs/input.es.js";
-import { Button as T } from "../components/ui/button.es.js";
-const { useAppForm: k } = r({
+import { TfCheckbox as t } from "../components/inputs/checkbox.es.js";
+import { TfNumberField as m } from "../components/inputs/numberfield.es.js";
+import { TfSingleSelect as e } from "../components/inputs/select.es.js";
+import { formContext as f, fieldContext as p } from "./form-context.es.js";
+import { createFormHook as i } from "@tanstack/react-form";
+import { TfMultiSelect as n } from "../components/inputs/multi-select.es.js";
+import { TfLicenseTypeSelect as s } from "../components/inputs/license-type-select.es.js";
+import { TfCountrySelect as c } from "../components/inputs/country-select.es.js";
+import { TfTextField as T } from "../components/inputs/textfield.es.js";
+import { Button as l } from "../components/ui/button.es.js";
+function M(o) {
+  return o == null ? void 0 : o.state.meta.errors.map((r) => r == null ? void 0 : r.message).join(",");
+}
+const { useAppForm: d } = i({
   fieldComponents: {
-    TfInput: n,
-    TfCountrySelect: i,
-    TfLicenseTypeSelect: p,
-    TfCheckbox: f,
-    TfMultiSelect: e,
-    TfTextarea: m
+    TfTextField: T,
+    TfNumberField: m,
+    TfCountrySelect: c,
+    TfLicenseTypeSelect: s,
+    TfMultiSelect: n,
+    TfCheckbox: t,
+    TfSingleSelect: e
   },
   formComponents: {
-    Button: T
+    Button: l
   },
-  fieldContext: t,
-  formContext: o
+  fieldContext: p,
+  formContext: f
 });
 export {
-  k as useAppForm
+  M as getFieldErrorMessage,
+  d as useAppForm
 };
 //# sourceMappingURL=form-hook.es.js.map

package/dist/utils/form-hook.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-hook.es.js","sources":["../../lib/utils/form-hook.tsx"],"sourcesContent":["import {\n\tTfCheckbox,\n\tTfCountrySelect,\n\tTfInput,\n\tTfLicenseTypeSelect,\n\tTfMultiSelect,\n\tTfTextarea,\n} from \"@/components/inputs\";\nimport { Button } from \"@/components/ui\";\nimport { fieldContext, formContext } from \"@/utils/form-context\";\nimport { createFormHook } from \"@tanstack/react-form\";\n\n/** Don't put this in the same file as form-context.tsx, this causes circular dependencies. */\n\n/** TODO, lazy loading when fieldComponents are large */\n/**\n * Builder for form logic and user interfaces\n */\nexport const { useAppForm } = createFormHook({\n\tfieldComponents: {\n\t\tTfInput,\n\t\tTfCountrySelect,\n\t\tTfLicenseTypeSelect,\n\t\tTfCheckbox,\n\t\tTfMultiSelect,\n\t\tTfTextarea,\n\t},\n\tformComponents: {\n\t\tButton,\n\t},\n\tfieldContext,\n\tformContext,\n});\n"],"names":["useAppForm","createFormHook","TfInput","TfCountrySelect","TfLicenseTypeSelect","TfCheckbox","TfMultiSelect","TfTextarea","Button","fieldContext","formContext"],"mappings":";;;;;;;;;AAkBO,MAAM,EAAE,YAAAA,EAAA,IAAeC,EAAe;AAAA,EAC5C,iBAAiB;AAAA,IAChB,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,EAAA;AAAA,EAED,gBAAgB;AAAA,IACf,QAAAC;AAAA,EAAA;AAAA,EAED,cAAAC;AAAA,EACA,aAAAC;AACD,CAAC;"}
+{"version":3,"file":"form-hook.es.js","sources":["../../lib/utils/form-hook.tsx"],"sourcesContent":["import {\n\tTfCountrySelect,\n\tTfLicenseTypeSelect,\n\tTfMultiSelect,\n\tTfTextField\n} from \"@/components/inputs\";\nimport { TfCheckbox } from \"@/components/inputs/checkbox\";\nimport { TfNumberField } from \"@/components/inputs/numberfield\";\nimport { TfSingleSelect } from \"@/components/inputs/select\";\nimport { Button } from \"@/components/ui\";\nimport { fieldContext, formContext } from \"@/utils/form-context\";\nimport { createFormHook, type FieldApi } from \"@tanstack/react-form\";\n\nexport function getFieldErrorMessage(field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>): string {\n\treturn field?.state.meta.errors.map((e) => e?.message).join(\",\")\n}\n\n/** Don't put this in the same file as form-context.tsx, this causes circular dependencies. */\n\n/** TODO, lazy loading when fieldComponents are large */\n/**\n * Builder for form logic and user interfaces\n */\nexport const { useAppForm } = createFormHook({\n\tfieldComponents: {\n\t\tTfTextField,\n\t\tTfNumberField,\n\t\tTfCountrySelect,\n\t\tTfLicenseTypeSelect,\n\t\tTfMultiSelect,\n\t\tTfCheckbox,\n\t\tTfSingleSelect\n\t},\n\tformComponents: {\n\t\tButton,\n\t},\n\tfieldContext,\n\tformContext,\n});\n"],"names":["getFieldErrorMessage","field","e","useAppForm","createFormHook","TfTextField","TfNumberField","TfCountrySelect","TfLicenseTypeSelect","TfMultiSelect","TfCheckbox","TfSingleSelect","Button","fieldContext","formContext"],"mappings":";;;;;;;;;;AAaO,SAASA,EAAqBC,GAAwH;AAC5J,SAAOA,KAAA,gBAAAA,EAAO,MAAM,KAAK,OAAO,IAAI,CAACC,MAAMA,KAAA,gBAAAA,EAAG,SAAS,KAAK;AAC7D;AAQO,MAAM,EAAE,YAAAC,EAAA,IAAeC,EAAe;AAAA,EAC5C,iBAAiB;AAAA,IAChB,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA;AAAA,EAED,gBAAgB;AAAA,IACf,QAAAC;AAAA,EAAA;AAAA,EAED,cAAAC;AAAA,EACA,aAAAC;AACD,CAAC;"}

package/dist/utils/primitives.es.js

@@ -0,0 +1,31 @@
+import { clsx as t } from "clsx";
+function l(...e) {
+  return t(e);
+}
+const o = "--primary-hue";
+function u() {
+  return document.documentElement.style.getPropertyValue(o);
+}
+function m(e) {
+  document.documentElement.style.setProperty(
+    o,
+    // In this case, it must be a number.
+    e
+  );
+}
+const n = "AT", r = "RT";
+function i() {
+  if (typeof window < "u" && window.localStorage)
+    try {
+      localStorage.removeItem(r), localStorage.removeItem(n), window.location.replace("/auth/login");
+    } catch (e) {
+      console.error("Logout failed:", e);
+    }
+}
+export {
+  l as cn,
+  u as getThemeHue,
+  i as logout,
+  m as setThemeHue
+};
+//# sourceMappingURL=primitives.es.js.map

package/dist/utils/primitives.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.es.js","sources":["../../lib/utils/primitives.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\n\n/** Classnames */\nexport function cn(...inputs: ClassValue[]) {\n    return clsx(inputs);\n}\n\n/**\n * This is the variable name representing the primary hue.\n * Referenced in tokens.scss -> token.css\n */\nconst PRIMARY_HUE_PROPERTY = \"--primary-hue\";\n\n/**\n *\n * @returns\n */\nexport function getThemeHue() {\n    return document.documentElement.style.getPropertyValue(PRIMARY_HUE_PROPERTY);\n}\n\n/**\n * @param hue the hue value to set in the document style\n */\nexport function setThemeHue(hue: number) {\n    document.documentElement.style.setProperty(\n        PRIMARY_HUE_PROPERTY,\n        // In this case, it must be a number.\n        hue as unknown as string,\n    );\n}\n\nconst ACCESS_TOKEN = \"AT\";\nconst REFRESH_TOKEN = \"RT\";\nexport function logout() {\n    if (typeof window !== \"undefined\" && window.localStorage) {\n        try {\n            localStorage.removeItem(REFRESH_TOKEN);\n            localStorage.removeItem(ACCESS_TOKEN);\n            window.location.replace(\"/auth/login\");\n        } catch (error) {\n            console.error(\"Logout failed:\", error);\n        }\n    }\n}\n\nexport type JwtDecode = {\n    aud: string;\n    email: string;\n    exp: number;\n    iat: number;\n    jti: string;\n    region: string;\n    role: string;\n    role_type: string;\n    scope: string[];\n    sub: string;\n    teat: number;\n    tenantid: string;\n    token_usage: string;\n    sadmin?: string;\n};\nexport type CtxPortals =\n    | \"customer-portal\"\n    | \"system-portal\"\n    | \"reseller-portal\"\n    | \"admin-portal\";\n"],"names":["cn","inputs","clsx","PRIMARY_HUE_PROPERTY","getThemeHue","setThemeHue","hue","ACCESS_TOKEN","REFRESH_TOKEN","logout","error"],"mappings":";AAGO,SAASA,KAAMC,GAAsB;AACxC,SAAOC,EAAKD,CAAM;AACtB;AAMA,MAAME,IAAuB;AAMtB,SAASC,IAAc;AAC1B,SAAO,SAAS,gBAAgB,MAAM,iBAAiBD,CAAoB;AAC/E;AAKO,SAASE,EAAYC,GAAa;AACrC,WAAS,gBAAgB,MAAM;AAAA,IAC3BH;AAAA;AAAA,IAEAG;AAAA,EAAA;AAER;AAEA,MAAMC,IAAe,MACfC,IAAgB;AACf,SAASC,IAAS;AACrB,MAAI,OAAO,SAAW,OAAe,OAAO;AACxC,QAAI;AACA,mBAAa,WAAWD,CAAa,GACrC,aAAa,WAAWD,CAAY,GACpC,OAAO,SAAS,QAAQ,aAAa;AAAA,IACzC,SAASG,GAAO;AACZ,cAAQ,MAAM,kBAAkBA,CAAK;AAAA,IACzC;AAER;"}

package/dist/utils/use-mobile.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.es.js","sources":["../../lib/utils/use-mobile.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n\tconst [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n\t\tundefined,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n\t\tconst onChange = () => {\n\t\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\t};\n\t\tmql.addEventListener(\"change\", onChange);\n\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\treturn () => mql.removeEventListener(\"change\", onChange);\n\t}, []);\n\n\treturn !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","onChange"],"mappings":";AAEA,MAAMA,IAAoB;AAEnB,SAASC,IAAc;AAC7B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAM;AAAA,IACrC;AAAA,EAAA;AAGDA,SAAAA,EAAM,UAAU,MAAM;AACrB,UAAMC,IAAM,OAAO,WAAW,eAAeL,IAAoB,CAAC,KAAK,GACjEM,IAAW,MAAM;AACtB,MAAAH,EAAY,OAAO,aAAaH,CAAiB;AAAA,IAClD;AACA,WAAAK,EAAI,iBAAiB,UAAUC,CAAQ,GACvCH,EAAY,OAAO,aAAaH,CAAiB,GAC1C,MAAMK,EAAI,oBAAoB,UAAUC,CAAQ;AAAA,EACxD,GAAG,CAAA,CAAE,GAEE,CAAC,CAACJ;AACV;"}

package/lib/theme.css

@@ -76,13 +76,15 @@
     --color-success-9: var(--success-9);
     --color-success-10: var(--success-10);
 
-    --color-background: var(--color-neutral-2);
-    --color-foreground: var(--color-neutral-8);
+    --color-background: var(--color-neutral-3);
+    --color-elevation-1: var(--color-neutral-2);
+    --color-elevation-2: var(--color-neutral-1);
 
-    --color-card: var(--color-neutral-1);
+    --color-foreground: var(--color-neutral-8);
+    --color-card: var(--color-elevation-1);
     --color-card-foreground: var(--color-foreground);
     /* Assuming popovers only show up over cards ??? */
-    --color-popover: var(--color-neutral-1);
+    --color-popover: var(--color-elevation-2);
     --color-popover-foreground: var(--color-foreground);
 
     --color-primary: var(--color-primary-7);
@@ -98,7 +100,7 @@
     --color-success: var(--color-success-7);
     --color-success-foreground: var(--color-success-2);
 
-    --color-border: var(--color-neutral-3);
+    --color-border: var(--color-neutral-4);
     --color-input: var(--color-border);
     --color-ring: var(--color-neutral-5);
 
@@ -108,24 +110,15 @@
     --color-chart-4: var(--color-secondary-4);
     --color-chart-5: var(--color-secondary-2);
 
-    --color-sidebar-background: var(--color-background);
+    --color-sidebar-background: var(--color-elevation-1);
     --color-sidebar-foreground: var(--color-foreground);
-    
-    --color-sidebar-primary: var(--color-primary);
-    --color-sidebar-primary-foreground: var(--color-primary-foreground);
-
-    --color-sidebar-accent: var(--color-accent);
-    --color-sidebar-accent-foreground: var(--color-accent-foreground);
-
-    --color-sidebar-border: var(--color-border);
-    --color-sidebar-ring: var(--color-ring);
 
-    --spacing-icon: calc(var(--spacing) * 4);
     --spacing-input: calc(var(--spacing) * 8);
+    --spacing-icon: calc(var(--spacing-input) / 2);
     --spacing-table: calc(var(--spacing) * 100);
 
     /* Header nav */
-    --spacing-header: calc(var(--spacing) * 16);
+    --spacing-header: calc(var(--spacing) * 12);
     /* Helper for using sidebar with header */
     --spacing-sidebar: calc(100svh - var(--spacing-header));
 

package/lib/tokens.css

@@ -88,15 +88,15 @@
   --success-9: var(--xsuccess-9);
   --success-10: var(--xsuccess-10);
   --neutral-hue: var(--primary-hue);
-  --neutral-s: 0.005;
+  --neutral-s: 0.0005;
   --xneutral-1: oklch(0.985 var(--neutral-s) var(--neutral-hue));
   --xneutral-2: oklch(0.97 var(--neutral-s) var(--neutral-hue));
-  --xneutral-3: oklch(0.922 var(--neutral-s) var(--neutral-hue));
+  --xneutral-3: oklch(0.95 var(--neutral-s) var(--neutral-hue));
   --xneutral-4: oklch(0.87 var(--neutral-s) var(--neutral-hue));
   --xneutral-5: oklch(0.708 var(--neutral-s) var(--neutral-hue));
   --xneutral-6: oklch(0.556 var(--neutral-s) var(--neutral-hue));
   --xneutral-7: oklch(0.439 var(--neutral-s) var(--neutral-hue));
-  --xneutral-8: oklch(0.35 var(--neutral-s) var(--neutral-hue));
+  --xneutral-8: oklch(0.29 var(--neutral-s) var(--neutral-hue));
   --xneutral-9: oklch(0.269 var(--neutral-s) var(--neutral-hue));
   --xneutral-10: oklch(0.205 var(--neutral-s) var(--neutral-hue));
   --neutral-1: var(--xneutral-1);

package/lib/utilities.css

@@ -32,40 +32,47 @@
 
 /* Fluid grid with minimum width */
 @utility grid-fluid {
-	@apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-4;
+	@apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-icon;
 }
 
+@utility focus-ring {
+	@apply data-[focus-visible]:outline-none focus-visible:outline-none data-[focus-visible]:ring-1 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 focus-visible:outline-hidden focus-visible:ring-offset-2 focus-visible:ring-1 focus-visible:ring-ring;
+}
+
+@utility disabled-muted {
+	@apply disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-70;
+}
 @utility input {
-	@apply border border-input bg-card px-3 py-2 body placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
+	@apply border border-input bg-card px-icon py-2 body placeholder:text-muted-foreground disabled-muted focus-ring;
 }
 
 /* A base set of classes for elements that can be clicked */
 @utility btn {
-	@apply cursor-pointer ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring leading-none no-underline whitespace-nowrap select-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50;
+	@apply cursor-pointer ring-offset-background [&_svg:not([class*='size-'])]:size-icon shrink-0 [&_svg]:shrink-0 leading-none outline-none no-underline whitespace-nowrap select-none disabled-muted focus-ring;
 }
 @utility btn-primary {
-	@apply bg-primary text-primary-foreground hover:bg-primary/80 focus:bg-primary/80;
+	@apply border border-primary text-primary bg-card hover:bg-primary/10 data-[hovered]:bg-primary/10 focus:bg-primary/10 data-[focused]:bg-primary/10;
 }
 @utility btn-destructive {
-	@apply bg-destructive text-destructive-foreground hover:bg-destructive/80 focus:bg-destructive/80;
+	@apply border border-destructive text-destructive bg-card hover:bg-destructive/10 data-[hovered]:bg-destructive/10 focus:bg-destructive/10 data-[focused]:bg-destructive/10;
 }
-@utility btn-outline {
-	@apply border border-input text-accent bg-card hover:bg-accent/10 focus:bg-accent/10;
+@utility btn-neutral {
+	@apply border border-input text-accent bg-card hover:bg-accent/10 data-[hovered]:bg-accent/10 focus:bg-accent/10 data-[focused]:bg-accent/10;
 }
 @utility btn-secondary {
-	@apply bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:bg-secondary/80;
+	@apply border border-secondary text-secondary bg-card hover:bg-secondary/10 data-[hovered]:bg-secondary/10 focus:bg-secondary/10 data-[focused]:bg-secondary/10;
 }
 @utility btn-ghost {
-	@apply bg-transparent hover:bg-accent/10 focus:bg-accent/10;
+	@apply bg-transparent hover:bg-accent/10 focus:bg-accent/10 data-[hovered]:bg-accent/10 data-[focused]:bg-accent/10;
 }
 
 @utility btn-dropdown {
-	@apply w-full btn btn-outline h-input text-sm text-left px-2 truncate;
+	@apply w-full btn btn-neutral leading-normal h-input text-sm text-left px-2 truncate;
 }
 
 /* Dimensions for a standard input */
 @utility input-dim {
-	@apply h-input px-4 py-2 text-sm;
+	@apply h-input px-icon py-2 text-sm;
 }
 
 @utility dropdown-item {
@@ -76,6 +83,11 @@
 	@apply flex flex-col gap-6;
 }
 
+@utility form-field {
+	@apply flex flex-col gap-1;
+}
+
+
 @utility prose {
 	/* TODO, starting points are not correct */
 	li {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "3.8.2",
+  "version": "5.0.0",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -48,6 +48,9 @@
   },
   "peerDependencies": {
     "@cryptlex/web-api-types": "1.41.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
     "@tanstack/react-form": "1.6.3",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-table": "8.20.5",
@@ -63,46 +66,29 @@
     "recharts": "2.15.3",
     "sonner": "1.7.0",
     "tailwindcss": "^4.0.6",
-    "tw-animate-css": "1.3.0",
-    "vaul": "1.1.2"
+    "tw-animate-css": "1.3.0"
   },
   "devDependencies": {
-    "@radix-ui/react-accordion": "1.2.11",
-    "@radix-ui/react-collapsible": "1.1.11",
-    "@radix-ui/react-dialog": "1.1.14",
-    "@radix-ui/react-dropdown-menu": "2.1.15",
-    "@radix-ui/react-label": "2.1.7",
-    "@radix-ui/react-popover": "1.1.14",
-    "@radix-ui/react-radio-group": "1.3.7",
-    "@radix-ui/react-select": "2.2.5",
-    "@radix-ui/react-separator": "1.1.7",
-    "@radix-ui/react-slot": "1.2.3",
-    "@radix-ui/react-tabs": "1.1.12",
-    "@radix-ui/react-tooltip": "1.2.7",
-    "@storybook/addon-docs": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/addon-links": "^9.0.16",
+    "@storybook/addon-onboarding": "^9.0.16",
+    "@storybook/react-vite": "^9.0.16",
     "@tailwindcss/vite": "^4.0.6",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.7.8",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
     "@vitejs/plugin-react": "^4.3.2",
-    "react-day-picker": "9.7.0",
+    "react-aria-components": "1.11.0",
     "rollup-preserve-directives": "1.1.3",
     "sass": "^1.80.6",
-    "storybook": "^8.6.12",
+    "storybook": "^9.0.16",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.2.4",
-    "zod": "3.25.20"
+    "zod": "3.25.20",
+    "@internationalized/date": "^3.8.2"
   },
   "scripts": {
     "build": "tsc && vite build",

package/dist/components/data-table/column-picker.es.js

@@ -1,50 +0,0 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import "react";
-import "../../utils/form-context.es.js";
-import "../../utils/form-hook.es.js";
-import { Columns3 as m } from "lucide-react";
-import { DropdownMenu as p, DropdownMenuTrigger as u, DropdownMenuContent as a, DropdownMenuGroup as c, DropdownMenuCheckboxItem as n } from "../ui/dropdown-menu.es.js";
-import { Button as s } from "../ui/button.es.js";
-import { getResourceDisplayName as h } from "./table-utils/constants.es.js";
-function x({
-  toggleAllColumnsVisible: o,
-  getIsAllColumnsVisible: t,
-  getAllColumns: d
-}) {
-  return /* @__PURE__ */ i(p, { children: [
-    /* @__PURE__ */ r(u, { asChild: !0, children: /* @__PURE__ */ r(s, { icon: () => m, variant: "outline", children: "Columns" }) }),
-    /* @__PURE__ */ r(a, { children: /* @__PURE__ */ i(c, { children: [
-      /* @__PURE__ */ r(
-        n,
-        {
-          className: "italic",
-          onSelect: (e) => {
-            e.preventDefault(), o();
-          },
-          checked: t(),
-          children: "(Select all)"
-        }
-      ),
-      d().map((e) => /* @__PURE__ */ i(
-        n,
-        {
-          onSelect: (l) => {
-            l.preventDefault(), e.toggleVisibility();
-          },
-          disabled: !e.getCanHide(),
-          checked: e.getIsVisible(),
-          children: [
-            e.getIsSorted(),
-            " ",
-            h(e.id, "admin-portal")
-          ]
-        },
-        e.id
-      ))
-    ] }) })
-  ] });
-}
-export {
-  x as ColumnPicker
-};
-//# sourceMappingURL=column-picker.es.js.map

package/dist/components/data-table/column-picker.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n\tButton,\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuTrigger,\n\tgetResourceDisplayName,\n} from \"@/index\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { Columns3 } from \"lucide-react\";\n\nexport function ColumnPicker({\n\ttoggleAllColumnsVisible,\n\tgetIsAllColumnsVisible,\n\tgetAllColumns,\n}: {\n\ttoggleAllColumnsVisible: () => void;\n\tgetIsAllColumnsVisible: () => boolean;\n\tgetAllColumns: () => Column<any, any>[];\n}) {\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Button icon={() => Columns3} variant={\"outline\"}>\n\t\t\t\t\tColumns\n\t\t\t\t</Button>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent>\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\tclassName=\"italic\"\n\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\ttoggleAllColumnsVisible();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tchecked={getIsAllColumnsVisible()}\n\t\t\t\t\t>\n\t\t\t\t\t\t(Select all)\n\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t\t{getAllColumns().map((col) => (\n\t\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tcol.toggleVisibility();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={col.id}\n\t\t\t\t\t\t\tdisabled={!col.getCanHide()}\n\t\t\t\t\t\t\tchecked={col.getIsVisible()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{col.getIsSorted()}{\" \"}\n\t\t\t\t\t\t\t{getResourceDisplayName(col.id, \"admin-portal\")}\n\t\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t\t))}\n\t\t\t\t\t{/* TODO getResourceDisplayName needs some review here. */}\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n"],"names":["ColumnPicker","toggleAllColumnsVisible","getIsAllColumnsVisible","getAllColumns","DropdownMenu","jsx","DropdownMenuTrigger","Button","Columns3","DropdownMenuContent","jsxs","DropdownMenuGroup","DropdownMenuCheckboxItem","col","e","getResourceDisplayName"],"mappings":";;;;;;;;AAYO,SAASA,EAAa;AAAA,EAC5B,yBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,eAAAC;AACD,GAIG;AACF,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAO,IAC3B,UAAA,gBAAAD,EAACE,GAAA,EAAO,MAAM,MAAMC,GAAU,SAAS,WAAW,UAAA,UAAA,CAElD,GACD;AAAA,IACA,gBAAAH,EAACI,GAAA,EACA,UAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACA,WAAU;AAAA,UACV,UAAU,CAAC,MAAM;AAChB,cAAE,eAAA,GACFX,EAAA;AAAA,UACD;AAAA,UACA,SAASC,EAAA;AAAA,UACT,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGAC,IAAgB,IAAI,CAACU,MACrB,gBAAAH;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,UAAU,CAACE,MAAM;AAChB,YAAAA,EAAE,eAAA,GACFD,EAAI,iBAAA;AAAA,UACL;AAAA,UAEA,UAAU,CAACA,EAAI,WAAA;AAAA,UACf,SAASA,EAAI,aAAA;AAAA,UAEZ,UAAA;AAAA,YAAAA,EAAI,YAAA;AAAA,YAAe;AAAA,YACnBE,EAAuBF,EAAI,IAAI,cAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QALzCA,EAAI;AAAA,MAAA,CAOV;AAAA,IAAA,EAAA,CAEF,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}

package/dist/components/data-table/page-size.es.js

@@ -1,25 +0,0 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { Button as d } from "../ui/button.es.js";
-import { DropdownMenu as u, DropdownMenuTrigger as l, DropdownMenuContent as p, DropdownMenuRadioGroup as c, DropdownMenuRadioItem as m } from "../ui/dropdown-menu.es.js";
-import { Menu as a } from "lucide-react";
-function w({
-  size: r,
-  onSelect: e
-}) {
-  const t = [10, 20, 30, 40, 50];
-  return /* @__PURE__ */ i(u, { children: [
-    /* @__PURE__ */ o(l, { asChild: !0, children: /* @__PURE__ */ o(d, { icon: () => a, variant: "outline", children: r }) }),
-    /* @__PURE__ */ o(p, { children: /* @__PURE__ */ o(c, { value: r.toString(), children: t.map((n) => /* @__PURE__ */ o(
-      m,
-      {
-        value: n.toString(),
-        onSelect: () => e(n),
-        children: n
-      }
-    )) }) })
-  ] });
-}
-export {
-  w as PageSize
-};
-//# sourceMappingURL=page-size.es.js.map

package/dist/components/data-table/page-size.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"page-size.es.js","sources":["../../../lib/components/data-table/page-size.tsx"],"sourcesContent":["import { Button } from \"@/components/ui/button\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Menu } from \"lucide-react\";\n\nexport function PageSize({\n\tsize,\n\tonSelect,\n}: { size: number; onSelect: (v: number) => void }) {\n\t// const currentPageSize = table.getState().pagination.pageSize;\n\tconst pageSizes = [10, 20, 30, 40, 50];\n\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Button icon={() => Menu} variant=\"outline\">\n\t\t\t\t\t{size}\n\t\t\t\t</Button>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent>\n\t\t\t\t<DropdownMenuRadioGroup value={size.toString()}>\n\t\t\t\t\t{pageSizes.map((pageSize) => (\n\t\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\t\tvalue={pageSize.toString()}\n\t\t\t\t\t\t\tonSelect={() => onSelect(pageSize)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{pageSize}\n\t\t\t\t\t\t</DropdownMenuRadioItem>\n\t\t\t\t\t))}\n\t\t\t\t</DropdownMenuRadioGroup>\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n"],"names":["PageSize","size","onSelect","pageSizes","DropdownMenu","jsx","DropdownMenuTrigger","Button","Menu","DropdownMenuContent","DropdownMenuRadioGroup","pageSize","DropdownMenuRadioItem"],"mappings":";;;;AAUO,SAASA,EAAS;AAAA,EACxB,MAAAC;AAAA,EACA,UAAAC;AACD,GAAoD;AAEnD,QAAMC,IAAY,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AAErC,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAO,IAC3B,UAAA,gBAAAD,EAACE,GAAA,EAAO,MAAM,MAAMC,GAAM,SAAQ,WAChC,UAAAP,EAAA,CACF,GACD;AAAA,IACA,gBAAAI,EAACI,GAAA,EACA,UAAA,gBAAAJ,EAACK,GAAA,EAAuB,OAAOT,EAAK,SAAA,GAClC,UAAAE,EAAU,IAAI,CAACQ,MACf,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QACA,OAAOD,EAAS,SAAA;AAAA,QAChB,UAAU,MAAMT,EAASS,CAAQ;AAAA,QAEhC,UAAAA;AAAA,MAAA;AAAA,IAAA,CAEF,GACF,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}

package/dist/components/data-table/paginator.es.js

@@ -1,64 +0,0 @@
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import { Button as e } from "../ui/button.es.js";
-import { ChevronFirst as d, ChevronLeft as m, ChevronRight as h, ChevronLast as v } from "lucide-react";
-function g({
-  getCanPreviousPage: o,
-  getCanNextPage: c,
-  firstPage: s,
-  previousPage: l,
-  nextPage: r,
-  lastPage: t,
-  getState: n,
-  rowCount: a
-}) {
-  return /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ i("span", { className: "whitespace-nowrap caption text-muted", children: `${n().pagination.pageIndex * n().pagination.pageSize + 1} - ${Math.min(
-      (n().pagination.pageIndex + 1) * n().pagination.pageSize,
-      a
-    )} of ${a == null ? void 0 : a.toLocaleString()}` }),
-    /* @__PURE__ */ i(
-      e,
-      {
-        onClick: () => s(),
-        disabled: !o(),
-        variant: "outline",
-        size: "icon",
-        icon: () => d
-      }
-    ),
-    /* @__PURE__ */ i(
-      e,
-      {
-        onClick: () => l(),
-        disabled: !o(),
-        variant: "outline",
-        size: "icon",
-        icon: () => m
-      }
-    ),
-    /* @__PURE__ */ i(
-      e,
-      {
-        onClick: () => r(),
-        disabled: !c(),
-        variant: "outline",
-        size: "icon",
-        icon: () => h
-      }
-    ),
-    /* @__PURE__ */ i(
-      e,
-      {
-        onClick: () => t(),
-        disabled: !c(),
-        variant: "outline",
-        size: "icon",
-        icon: () => v
-      }
-    )
-  ] });
-}
-export {
-  g as Paginator
-};
-//# sourceMappingURL=paginator.es.js.map

package/dist/components/data-table/paginator.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"paginator.es.js","sources":["../../../lib/components/data-table/paginator.tsx"],"sourcesContent":["import { Button } from \"@/components/ui/button\";\nimport type { TableState } from \"@tanstack/react-table\";\nimport {\n\tChevronFirst,\n\tChevronLast,\n\tChevronLeft,\n\tChevronRight,\n} from \"lucide-react\";\n\nexport function Paginator({\n\tgetCanPreviousPage,\n\tgetCanNextPage,\n\tfirstPage,\n\tpreviousPage,\n\tnextPage,\n\tlastPage,\n\tgetState,\n\trowCount,\n}: {\n\tgetCanPreviousPage: () => boolean;\n\tgetCanNextPage: () => boolean;\n\tfirstPage: () => void;\n\tpreviousPage: () => void;\n\tnextPage: () => void;\n\tlastPage: () => void;\n\tgetState: () => TableState;\n\trowCount: number;\n}) {\n\treturn (\n\t\t<div className=\"flex items-center gap-2\">\n\t\t\t<span className=\"whitespace-nowrap caption text-muted\">\n\t\t\t\t{`${getState().pagination.pageIndex * getState().pagination.pageSize + 1} - ${Math.min(\n\t\t\t\t\t(getState().pagination.pageIndex + 1) *\n\t\t\t\t\t\tgetState().pagination.pageSize,\n\t\t\t\t\trowCount,\n\t\t\t\t)} of ${rowCount?.toLocaleString()}`}\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tonClick={() => firstPage()}\n\t\t\t\tdisabled={!getCanPreviousPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronFirst}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tonClick={() => previousPage()}\n\t\t\t\tdisabled={!getCanPreviousPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronLeft}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tonClick={() => nextPage()}\n\t\t\t\tdisabled={!getCanNextPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronRight}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tonClick={() => lastPage()}\n\t\t\t\tdisabled={!getCanNextPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronLast}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"names":["Paginator","getCanPreviousPage","getCanNextPage","firstPage","previousPage","nextPage","lastPage","getState","rowCount","jsxs","jsx","Button","ChevronFirst","ChevronLeft","ChevronRight","ChevronLast"],"mappings":";;;AASO,SAASA,EAAU;AAAA,EACzB,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACD,GASG;AACF,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BACd,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,wCACd,UAAA,GAAGH,IAAW,WAAW,YAAYA,EAAA,EAAW,WAAW,WAAW,CAAC,MAAM,KAAK;AAAA,OACjFA,IAAW,WAAW,YAAY,KAClCA,EAAA,EAAW,WAAW;AAAA,MACvBC;AAAA,IAAA,CACA,OAAOA,KAAA,gBAAAA,EAAU,gBAAgB,GAAA,CACnC;AAAA,IAEA,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAMR,EAAA;AAAA,QACf,UAAU,CAACF,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMW;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAMP,EAAA;AAAA,QACf,UAAU,CAACH,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAMN,EAAA;AAAA,QACf,UAAU,CAACH,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb,gBAAAJ;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAML,EAAA;AAAA,QACf,UAAU,CAACJ,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMa;AAAA,MAAA;AAAA,IAAA;AAAA,EACb,GACD;AAEF;"}

package/dist/components/data-table/table-actions.es.js

@@ -1,26 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { RotateCw as o } from "lucide-react";
-import { Button as i } from "../ui/button.es.js";
-import { useState as r } from "react";
-function p({
-  tableActions: n,
-  getSelectedRowModel: a,
-  handleSearching: c,
-  dataQuery: t
-}) {
-  const [l, s] = r("");
-  return /* @__PURE__ */ e("div", { className: "flex bg-card justify-between my-0 p-4 border gap-4 overflow-auto", children: /* @__PURE__ */ e("div", { className: "flex gap-4", children: /* @__PURE__ */ e(
-    i,
-    {
-      loading: t.isFetching,
-      icon: () => o,
-      onClick: () => t.refetch(),
-      variant: "outline",
-      size: "icon"
-    }
-  ) }) });
-}
-export {
-  p as default
-};
-//# sourceMappingURL=table-actions.es.js.map

package/dist/components/data-table/table-actions.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"table-actions.es.js","sources":["../../../lib/components/data-table/table-actions.tsx"],"sourcesContent":["import { RotateCw } from \"lucide-react\";\n\nimport type { TableActions } from \"@/components/data-table/table-utils/index\";\nimport { Button } from \"@/components/ui/button\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport type { RowModel } from \"@tanstack/react-table\";\nimport { useState } from \"react\";\n\nexport default function Actions({\n\ttableActions,\n\tgetSelectedRowModel,\n\thandleSearching,\n\tdataQuery,\n}: {\n\ttableActions: TableActions;\n\tgetSelectedRowModel: () => RowModel<any>;\n\thandleSearching: (value: string) => void;\n\tdataQuery: UseQueryResult<any, unknown>;\n}) {\n\t// const { location: { href } = {} } = useRouterState();\n\tconst [search, setSearch] = useState<string>(\"\");\n\treturn (\n\t\t<div className=\"flex bg-card justify-between my-0 p-4 border gap-4 overflow-auto\">\n\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t<Button\n\t\t\t\t\tloading={dataQuery.isFetching}\n\t\t\t\t\ticon={() => RotateCw}\n\t\t\t\t\tonClick={() => dataQuery.refetch()}\n\t\t\t\t\tvariant={\"outline\"}\n\t\t\t\t\tsize={\"icon\"}\n\t\t\t\t/>\n\t\t\t\t{/* //TODO: we can  show the create, delete button based on permsission\n\t\t\t\t{/* All the creating routes will be with url /create in host app */}\n\t\t\t\t{/*  */}\n\t\t\t</div>\n\t\t\t{/* {tableActions?.search && (\n\t\t\t\t<SearchInput\n\t\t\t\t\tvalue={search}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tsetSearch(e);\n\t\t\t\t\t\thandleSearching(e);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)} */}\n\t\t</div>\n\t);\n}\n"],"names":["Actions","tableActions","getSelectedRowModel","handleSearching","dataQuery","search","setSearch","useState","jsx","Button","RotateCw"],"mappings":";;;;AAQA,SAAwBA,EAAQ;AAAA,EAC/B,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACD,GAKG;AAEF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAiB,EAAE;AAC/C,2BACE,OAAA,EAAI,WAAU,oEACd,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,cACd,UAAA,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAASL,EAAU;AAAA,MACnB,MAAM,MAAMM;AAAA,MACZ,SAAS,MAAMN,EAAU,QAAA;AAAA,MACzB,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EAAA,GAKR,EAAA,CAUD;AAEF;"}

package/dist/components/data-table/table-content.es.js

@@ -1,65 +0,0 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { ACTIONS_COLUMN_ID as l } from "./data-table.es.js";
-import { Table as d, TableHeader as p, TableRow as a, TableHead as u, TableBody as f, TableCell as g } from "../ui/table.es.js";
-import { flexRender as s } from "@tanstack/react-table";
-import { ArrowDownNarrowWide as x, ArrowDownWideNarrow as w, ArrowUpDown as b } from "lucide-react";
-import { Button as h } from "../ui/button.es.js";
-function k({
-  className: c,
-  getHeaderGroups: m,
-  getRowModel: r
-}) {
-  return /* @__PURE__ */ i(d, { className: c, children: [
-    /* @__PURE__ */ t(p, { className: "sticky top-0 z-10", children: m().map((o) => /* @__PURE__ */ t(a, { children: o.headers.map((e) => /* @__PURE__ */ t(
-      u,
-      {
-        className: `px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${e.id === l ? "sticky right-0 z-50 text-center" : ""}`,
-        children: /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-1", children: [
-          /* @__PURE__ */ t("span", { children: e.isPlaceholder ? null : s(
-            e.column.columnDef.header,
-            e.getContext()
-          ) }),
-          e.column.getCanSort() && /* @__PURE__ */ t(
-            h,
-            {
-              size: "icon",
-              variant: "ghost",
-              onClick: e.column.getToggleSortingHandler(),
-              icon: () => {
-                const n = e.column.getIsSorted();
-                return n === "asc" ? x : n === "desc" ? w : b;
-              }
-            }
-          )
-        ] })
-      },
-      e.id
-    )) }, o.id)) }),
-    /* @__PURE__ */ t(f, { className: "flex-1 overflow-y-auto relative", children: r().rows.length !== 0 && r().rows.map((o) => /* @__PURE__ */ t(
-      a,
-      {
-        className: "h-input transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20",
-        "data-state": o.getIsSelected() && "selected",
-        children: o.getVisibleCells().map((e) => /* @__PURE__ */ t(
-          g,
-          {
-            className: `
-                    px-4 py-2 text-left text-sm whitespace-nowrap
-                    ${e.column.id === l ? "sticky right-0 w-20 bg-card" : ""}
-                  `,
-            children: s(
-              e.column.columnDef.cell,
-              e.getContext()
-            )
-          },
-          e.id
-        ))
-      },
-      o.id
-    )) })
-  ] });
-}
-export {
-  k as TableContent
-};
-//# sourceMappingURL=table-content.es.js.map

package/dist/components/data-table/table-content.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown\n} from \"lucide-react\";\n\n// TODO, automate checking valid HTML\nexport function TableContent({\n\tclassName,\n\tgetHeaderGroups,\n\tgetRowModel,\n}: {\n\tclassName?: string;\n\tgetRowModel: () => RowModel<any>;\n\tgetHeaderGroups: () => HeaderGroup<any>[];\n}) {\n\treturn (\n\t\t<TableComponent className={className}>\n\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t{getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\tclassName={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? \"sticky right-0 z-50 text-center\" : \"\"}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\ticon={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst sort = header.column.getIsSorted();\n\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"asc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownNarrowWide;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"desc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownWideNarrow;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowUpDown;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableHeader>\n\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t{getRowModel().rows.length !== 0 &&\n\t\t\t\t\tgetRowModel().rows.map((row) => (\n\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\tclassName=\"h-input transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20\"\n\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\tclassName={`\n                    px-4 py-2 text-left text-sm whitespace-nowrap\n                    ${cell.column.id === ACTIONS_COLUMN_ID\n\t\t\t\t\t\t\t\t\t\t\t? \"sticky right-0 w-20 bg-card\"\n\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t\t}\n                  `}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t</TableComponent>\n\t);\n}\n"],"names":["TableContent","className","getHeaderGroups","getRowModel","jsxs","TableComponent","jsx","TableHeader","headerGroup","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","sort","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","TableBody","row","cell","TableCell"],"mappings":";;;;;;AAsBO,SAASA,EAAa;AAAA,EAC5B,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AACD,GAIG;AACF,SACC,gBAAAC,EAACC,KAAe,WAAAJ,GACf,UAAA;AAAA,IAAA,gBAAAK,EAACC,GAAA,EAAY,WAAU,qBACrB,UAAAL,EAAA,EAAkB,IAAI,CAACM,MACvB,gBAAAF,EAACG,GAAA,EACC,UAAAD,EAAY,QAAQ,IAAI,CAACE,MACzB,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QAEA,WAAW,qEAAqED,EAAO,OAAOE,IAAoB,oCAAoC,EAAE;AAAA,QAExJ,UAAA,gBAAAR,EAAC,QAAA,EAAK,WAAU,kCACf,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EACC,UAAAI,EAAO,gBACL,OACAG;AAAA,YACDH,EAAO,OAAO,UAAU;AAAA,YACxBA,EAAO,WAAA;AAAA,UAAW,GAErB;AAAA,UACCA,EAAO,OAAO,WAAA,KACd,gBAAAJ;AAAA,YAACQ;AAAA,YAAA;AAAA,cACA,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,SAASJ,EAAO,OAAO,wBAAA;AAAA,cACvB,MAAM,MAAM;AACX,sBAAMK,IAAOL,EAAO,OAAO,YAAA;AAC3B,uBAAIK,MAAS,QACLC,IAEJD,MAAS,SACLE,IAGDC;AAAA,cACR;AAAA,YAAA;AAAA,UAAA;AAAA,QACD,EAAA,CAEF;AAAA,MAAA;AAAA,MA9BKR,EAAO;AAAA,IAAA,CAgCb,KAnCaF,EAAY,EAoC3B,CACA,EAAA,CACF;AAAA,IACA,gBAAAF,EAACa,GAAA,EAAU,WAAU,mCACnB,cAAc,KAAK,WAAW,KAC9BhB,EAAA,EAAc,KAAK,IAAI,CAACiB,MACvB,gBAAAd;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QAEV,cAAYW,EAAI,cAAA,KAAmB;AAAA,QAElC,UAAAA,EAAI,gBAAA,EAAkB,IAAI,CAACC,MAC3B,gBAAAf;AAAA,UAACgB;AAAA,UAAA;AAAA,YAEA,WAAW;AAAA;AAAA,sBAEED,EAAK,OAAO,OAAOT,IAC5B,gCACA,EACH;AAAA;AAAA,YAGA,UAAAC;AAAA,cACAQ,EAAK,OAAO,UAAU;AAAA,cACtBA,EAAK,WAAA;AAAA,YAAW;AAAA,UACjB;AAAA,UAZKA,EAAK;AAAA,QAAA,CAcX;AAAA,MAAA;AAAA,MAnBID,EAAI;AAAA,IAAA,CAqBV,EAAA,CACH;AAAA,EAAA,GACD;AAEF;"}