@cryptlex/web-components 3.3.0 → 3.3.2

package/dist/components/ui/timeline.es.js

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { jsx as n, jsxs as a } from "react/jsx-runtime";
 import { Separator as c } from "./separator.es.js";
-import { cn as r } from "../../utils/index.es.js";
+import { cn as i } from "../../utils/index.es.js";
 import { cva as l } from "class-variance-authority";
-function x({ className: e, ...i }) {
-  return /* @__PURE__ */ t("ol", { className: r("flex flex-col gap-4", e), ...i });
+function p({ className: t, ...e }) {
+  return /* @__PURE__ */ n("ol", { className: i("flex flex-col gap-4", t), ...e });
 }
 const m = l(
   "p-1 rounded-full",
@@ -20,23 +20,28 @@ const m = l(
     }
   }
 );
-function v({ date: e, className: i, icon: n, children: s, iconVariant: o }) {
-  return /* @__PURE__ */ a("li", { className: "flex list-none gap-4", children: [
-    e && /* @__PURE__ */ t("time", { dateTime: e.toISOString(), className: "leading-none text-muted", children: e.toLocaleDateString() }),
-    /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-2", children: [
-      /* @__PURE__ */ t("div", { className: r(m(o)), children: n && /* @__PURE__ */ t(n, { className: "size-icon " }) }),
-      /* @__PURE__ */ t(c, { decorative: !0, orientation: "vertical" })
-    ] }),
-    /* @__PURE__ */ t("section", { className: r("grow", i), children: s })
+function x({ className: t, ...e }) {
+  return /* @__PURE__ */ n("li", { className: i("flex list-none gap-4", t), ...e });
+}
+function v({ icon: t, className: e, variant: r, ...o }) {
+  return /* @__PURE__ */ a("div", { ...o, className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ n("div", { className: i(m({ variant: r, className: e })), children: /* @__PURE__ */ n(t, { className: "size-icon " }) }),
+    /* @__PURE__ */ n(c, { decorative: !0, orientation: "vertical" })
   ] });
 }
-function p({ date: e }) {
-  return /* @__PURE__ */ t("time", { dateTime: e.toISOString(), className: "text-muted", children: e.toDateString() });
+function N({ className: t, date: e, dateFormatter: r, ...o }) {
+  const s = `${(e.getMonth() + 1).toString().padStart(2, "0")}-${e.getFullYear()}`;
+  return /* @__PURE__ */ n("time", { ...o, dateTime: e.toISOString(), className: i("font-mono leading-none text-muted", t), children: r ? r(e) : s });
+}
+function T({ className: t, ...e }) {
+  return /* @__PURE__ */ n("section", { className: i("", t), ...e });
 }
 export {
-  x as Timeline,
-  v as TimelineItem,
-  p as TimelineTime,
+  p as Timeline,
+  T as TimelineContent,
+  N as TimelineDate,
+  v as TimelineIcon,
+  x as TimelineItem,
   m as timelineIconVariants
 };
 //# sourceMappingURL=timeline.es.js.map

package/dist/components/ui/timeline.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.es.js","sources":["../../../lib/components/ui/timeline.tsx"],"sourcesContent":["import { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { LucideIcon } from \"lucide-react\";\n\nexport function Timeline({ className, ...props }: React.ComponentProps<'ol'>) {\n    return <ol className={cn(\"flex flex-col gap-4\", className)} {...props} />\n}\n\nexport const timelineIconVariants = cva(\n    `p-1 rounded-full`,\n    {\n        variants: {\n            variant: {\n                destructive: \"text-destructive-foreground bg-destructive\",\n                success: \"text-success-foreground bg-success\",\n                muted: \"text-muted-foreground bg-muted\",\n            },\n        },\n        defaultVariants: {\n            variant: \"muted\",\n        },\n    },\n);\nexport function TimelineItem({ date, className, icon: Icon, children, iconVariant }: React.ComponentProps<'div'> & { date: Date, icon?: LucideIcon, iconVariant?: VariantProps<typeof timelineIconVariants> }) {\n    return (\n        <li className=\"flex list-none gap-4\">\n            {date && <time dateTime={date.toISOString()} className=\"leading-none text-muted\">{date.toLocaleDateString()}</time>}\n            {/* Status?? */}\n            <div className=\"flex flex-col items-center gap-2\">\n                <div className={cn(timelineIconVariants(iconVariant))}>\n                    {Icon && <Icon className=\"size-icon \" />}\n                </div>\n                <Separator decorative={true} orientation=\"vertical\" />\n            </div>\n\n            <section className={cn(\"grow\", className)}>\n                {children}\n            </section>\n        </li>\n    )\n}\n\nexport function TimelineTime({ date }: React.ComponentProps<'time'> & {\n    date: Date\n}) {\n    return <time dateTime={date.toISOString()} className=\"text-muted\">{date.toDateString()}</time>\n}\n\n// export function TimelineIcon()"],"names":["Timeline","className","props","jsx","cn","timelineIconVariants","cva","TimelineItem","date","Icon","children","iconVariant","jsxs","Separator","TimelineTime"],"mappings":";;;;AAKO,SAASA,EAAS,EAAE,WAAAC,GAAW,GAAGC,KAAqC;AACnE,SAAA,gBAAAC,EAAC,QAAG,WAAWC,EAAG,uBAAuBH,CAAS,GAAI,GAAGC,GAAO;AAC3E;AAEO,MAAMG,IAAuBC;AAAA,EAChC;AAAA,EACA;AAAA,IACI,UAAU;AAAA,MACN,SAAS;AAAA,QACL,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IAEf;AAAA,IACA,iBAAiB;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EACb;AAER;AACgB,SAAAC,EAAa,EAAE,MAAAC,GAAM,WAAAP,GAAW,MAAMQ,GAAM,UAAAC,GAAU,aAAAC,KAAyI;AAEvM,SAAA,gBAAAC,EAAC,MAAG,EAAA,WAAU,wBACT,UAAA;AAAA,IAAQJ,KAAA,gBAAAL,EAAC,QAAK,EAAA,UAAUK,EAAK,eAAe,WAAU,2BAA2B,UAAKA,EAAA,mBAAqB,EAAA,CAAA;AAAA,IAE5G,gBAAAI,EAAC,OAAI,EAAA,WAAU,oCACX,UAAA;AAAA,MAAA,gBAAAT,EAAC,OAAI,EAAA,WAAWC,EAAGC,EAAqBM,CAAW,CAAC,GAC/C,UAAAF,KAAS,gBAAAN,EAAAM,GAAA,EAAK,WAAU,aAAa,CAAA,GAC1C;AAAA,MACC,gBAAAN,EAAAU,GAAA,EAAU,YAAY,IAAM,aAAY,WAAW,CAAA;AAAA,IAAA,GACxD;AAAA,sBAEC,WAAQ,EAAA,WAAWT,EAAG,QAAQH,CAAS,GACnC,UAAAS,EACL,CAAA;AAAA,EAAA,GACJ;AAER;AAEgB,SAAAI,EAAa,EAAE,MAAAN,KAE5B;AACQ,SAAA,gBAAAL,EAAC,QAAK,EAAA,UAAUK,EAAK,YAAA,GAAe,WAAU,cAAc,UAAKA,EAAA,aAAe,EAAA,CAAA;AAC3F;"}
+{"version":3,"file":"timeline.es.js","sources":["../../../lib/components/ui/timeline.tsx"],"sourcesContent":["import { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { LucideIcon } from \"lucide-react\";\n\nexport function Timeline({ className, ...props }: React.ComponentProps<'ol'>) {\n    return <ol className={cn(\"flex flex-col gap-4\", className)} {...props} />\n}\n\nexport const timelineIconVariants = cva(\n    `p-1 rounded-full`,\n    {\n        variants: {\n            variant: {\n                destructive: \"text-destructive-foreground bg-destructive\",\n                success: \"text-success-foreground bg-success\",\n                muted: \"text-muted-foreground bg-muted\",\n            },\n        },\n        defaultVariants: {\n            variant: \"muted\",\n        },\n    },\n);\nexport function TimelineItem({ className, ...props }: React.ComponentProps<'li'> & {}) {\n\n    return (\n        <li className={cn(\"flex list-none gap-4\", className)} {...props} />\n    )\n}\n\nexport function TimelineIcon({ icon: Icon, className, variant, ...props }: Omit<React.ComponentProps<'div'>, 'children'> & VariantProps<typeof timelineIconVariants> & {\n    icon: LucideIcon\n}) {\n    return <div {...props} className=\"flex flex-col items-center gap-2\">\n        <div className={cn(timelineIconVariants({ variant, className }))}>\n            <Icon className=\"size-icon \" />\n        </div>\n        <Separator decorative orientation=\"vertical\" />\n    </div>\n}\n\nexport function TimelineDate({ className, date, dateFormatter, ...props }: Omit<React.ComponentProps<'time'>, 'dateTime' | 'children'> & {\n    date: Date\n    dateFormatter?: (d: Date) => string;\n}) {\n    const defaultDateDisplay = `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getFullYear()}`;\n    return <time {...props} dateTime={date.toISOString()} className={cn(\"font-mono leading-none text-muted\", className)}>{dateFormatter ? dateFormatter(date) : defaultDateDisplay}</time>\n}\n\nexport function TimelineContent({ className, ...props }: React.ComponentProps<'section'>) {\n    return <section className={cn(\"\", className)} {...props} />;\n}"],"names":["Timeline","className","props","jsx","cn","timelineIconVariants","cva","TimelineItem","TimelineIcon","Icon","variant","jsxs","Separator","TimelineDate","date","dateFormatter","defaultDateDisplay","TimelineContent"],"mappings":";;;;AAKO,SAASA,EAAS,EAAE,WAAAC,GAAW,GAAGC,KAAqC;AACnE,SAAA,gBAAAC,EAAC,QAAG,WAAWC,EAAG,uBAAuBH,CAAS,GAAI,GAAGC,GAAO;AAC3E;AAEO,MAAMG,IAAuBC;AAAA,EAChC;AAAA,EACA;AAAA,IACI,UAAU;AAAA,MACN,SAAS;AAAA,QACL,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IAEf;AAAA,IACA,iBAAiB;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EACb;AAER;AACO,SAASC,EAAa,EAAE,WAAAN,GAAW,GAAGC,KAA0C;AAG/E,SAAA,gBAAAC,EAAC,QAAG,WAAWC,EAAG,wBAAwBH,CAAS,GAAI,GAAGC,GAAO;AAEzE;AAEgB,SAAAM,EAAa,EAAE,MAAMC,GAAM,WAAAR,GAAW,SAAAS,GAAS,GAAGR,KAE/D;AACC,SAAQ,gBAAAS,EAAA,OAAA,EAAK,GAAGT,GAAO,WAAU,oCAC7B,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,EAAqB,EAAE,SAAAK,GAAS,WAAAT,EAAA,CAAW,CAAC,GAC3D,UAAA,gBAAAE,EAACM,GAAK,EAAA,WAAU,aAAa,CAAA,GACjC;AAAA,IACC,gBAAAN,EAAAS,GAAA,EAAU,YAAU,IAAC,aAAY,WAAW,CAAA;AAAA,EAAA,GACjD;AACJ;AAEO,SAASC,EAAa,EAAE,WAAAZ,GAAW,MAAAa,GAAM,eAAAC,GAAe,GAAGb,KAG/D;AACC,QAAMc,IAAqB,IAAIF,EAAK,SAAA,IAAa,GAAG,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIA,EAAK,aAAa;AACrG,2BAAQ,QAAM,EAAA,GAAGZ,GAAO,UAAUY,EAAK,YAAY,GAAG,WAAWV,EAAG,qCAAqCH,CAAS,GAAI,cAAgBc,EAAcD,CAAI,IAAIE,GAAmB;AACnL;AAEO,SAASC,EAAgB,EAAE,WAAAhB,GAAW,GAAGC,KAA0C;AAC/E,SAAA,gBAAAC,EAAC,aAAQ,WAAWC,EAAG,IAAIH,CAAS,GAAI,GAAGC,GAAO;AAC7D;"}

package/dist/index.es.d.ts

@@ -691,20 +691,23 @@ export declare interface TfTextareaProps extends Omit<React_2.ComponentProps<typ
 
 export declare function Timeline({ className, ...props }: React.ComponentProps<'ol'>): JSX.Element;
 
-export declare const timelineIconVariants: (props?: ({
-    variant?: "destructive" | "success" | "muted" | null | undefined;
-} & ClassProp) | undefined) => string;
+export declare function TimelineContent({ className, ...props }: React.ComponentProps<'section'>): JSX.Element;
 
-export declare function TimelineItem({ date, className, icon: Icon, children, iconVariant }: React.ComponentProps<'div'> & {
+export declare function TimelineDate({ className, date, dateFormatter, ...props }: Omit<React.ComponentProps<'time'>, 'dateTime' | 'children'> & {
     date: Date;
-    icon?: LucideIcon;
-    iconVariant?: VariantProps<typeof timelineIconVariants>;
+    dateFormatter?: (d: Date) => string;
 }): JSX.Element;
 
-export declare function TimelineTime({ date }: React.ComponentProps<'time'> & {
-    date: Date;
+export declare function TimelineIcon({ icon: Icon, className, variant, ...props }: Omit<React.ComponentProps<'div'>, 'children'> & VariantProps<typeof timelineIconVariants> & {
+    icon: LucideIcon;
 }): JSX.Element;
 
+export declare const timelineIconVariants: (props?: ({
+    variant?: "destructive" | "success" | "muted" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare function TimelineItem({ className, ...props }: React.ComponentProps<'li'> & {}): JSX.Element;
+
 export declare function Toaster({ ...props }: ToasterProps): JSX.Element;
 
 declare type ToasterProps = React.ComponentProps<typeof Toaster_2>;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { useIsMobile as o } from "./hooks/use-mobile.es.js";
-import { cn as a, getThemeHue as i, logout as n, setThemeHue as p } from "./utils/index.es.js";
+import { cn as a, getThemeHue as n, logout as i, setThemeHue as p } from "./utils/index.es.js";
 import { fieldContext as T, formContext as m, useFieldContext as d } from "./utils/form-context.es.js";
 import { useAppForm as S } from "./utils/form-hook.es.js";
 import { ACTIONS_COLUMN_ID as x, DataTable as f } from "./components/data-table/data-table.es.js";
@@ -14,7 +14,7 @@ import { Checkbox as q, TfCheckbox as J } from "./components/inputs/checkbox.es.
 import { CountrySelect as W, TfCountrySelect as Z } from "./components/inputs/country-select.es.js";
 import { FormField as ee } from "./components/inputs/form-field.es.js";
 import { Input as oe, TfInput as te } from "./components/inputs/input.es.js";
-import { InputOTP as ie, InputOTPGroup as ne, InputOTPSeparator as pe, InputOTPSlot as le } from "./components/inputs/input-otp.es.js";
+import { InputOTP as ne, InputOTPGroup as ie, InputOTPSeparator as pe, InputOTPSlot as le } from "./components/inputs/input-otp.es.js";
 import { TfLicenseTypeSelect as me } from "./components/inputs/license-type-select.es.js";
 import { MultiSelect as ue, TfMultiSelect as Se } from "./components/inputs/multi-select.es.js";
 import { PasswordInput as xe } from "./components/inputs/password-input.es.js";
@@ -30,14 +30,14 @@ import { Badge as He } from "./components/ui/badge.es.js";
 import { Breadcrumb as Ve, BreadcrumbEllipsis as Ye, BreadcrumbItem as Ke, BreadcrumbLink as ze, BreadcrumbList as Xe, BreadcrumbPage as je, BreadcrumbSeparator as qe } from "./components/ui/breadcrumb.es.js";
 import { Button as Qe, buttonVariants as We } from "./components/ui/button.es.js";
 import { Card as $e, CardContent as er, CardDescription as rr, CardFooter as or, CardHeader as tr, CardTitle as ar } from "./components/ui/card.es.js";
-import { Collapsible as nr, CollapsibleContent as pr, CollapsibleTrigger as lr } from "./components/ui/collapsible.es.js";
+import { Collapsible as ir, CollapsibleContent as pr, CollapsibleTrigger as lr } from "./components/ui/collapsible.es.js";
 import { COPY_BUTTON_STATE_TIMEOUT as mr, CopyButton as dr } from "./components/ui/copy-button.es.js";
 import { Dialog as Sr, DialogClose as br, DialogContent as xr, DialogDescription as fr, DialogFooter as Cr, DialogHeader as Dr, DialogOverlay as gr, DialogPortal as sr, DialogTitle as cr, DialogTrigger as Ir } from "./components/ui/dialog.es.js";
 import { Drawer as Mr, DrawerClose as Er, DrawerContent as Or, DrawerDescription as Lr, DrawerFooter as Ar, DrawerHeader as _r, DrawerOverlay as Rr, DrawerPortal as wr, DrawerTitle as Fr, DrawerTrigger as Br } from "./components/ui/drawer.es.js";
 import { DropdownMenu as Nr, DropdownMenuCheckboxItem as vr, DropdownMenuContent as yr, DropdownMenuGroup as Ur, DropdownMenuItem as Gr, DropdownMenuLabel as Hr, DropdownMenuPortal as kr, DropdownMenuRadioGroup as Vr, DropdownMenuRadioItem as Yr, DropdownMenuSub as Kr, DropdownMenuSubContent as zr, DropdownMenuSubTrigger as Xr, DropdownMenuTrigger as jr } from "./components/ui/dropdown-menu.es.js";
 import { Label as Jr } from "./components/ui/label.es.js";
 import { Loader as Wr } from "./components/ui/loader.es.js";
-import { Pagination as $r, PaginationContent as eo, PaginationEllipsis as ro, PaginationItem as oo, PaginationLink as to, PaginationNext as ao, PaginationPrevious as io } from "./components/ui/pagination.es.js";
+import { Pagination as $r, PaginationContent as eo, PaginationEllipsis as ro, PaginationItem as oo, PaginationLink as to, PaginationNext as ao, PaginationPrevious as no } from "./components/ui/pagination.es.js";
 import { Popover as po, PopoverAnchor as lo, PopoverContent as To, PopoverTrigger as mo } from "./components/ui/popover.es.js";
 import { Separator as So } from "./components/ui/separator.es.js";
 import { Sheet as xo, SheetClose as fo, SheetContent as Co, SheetDescription as Do, SheetFooter as go, SheetHeader as so, SheetOverlay as co, SheetPortal as Io, SheetTitle as Po, SheetTrigger as Mo } from "./components/ui/sheet.es.js";
@@ -45,11 +45,11 @@ import { Sidebar as Oo, SidebarContent as Lo, SidebarContext as Ao, SidebarFoote
 import { Skeleton as Qo } from "./components/ui/skeleton.es.js";
 import { Toaster as Zo } from "./components/ui/sonner.es.js";
 import { StaticDataTable as et } from "./components/ui/static-data-table.es.js";
-import { Table as ot, TableBody as tt, TableCaption as at, TableCell as it, TableFooter as nt, TableHead as pt, TableHeader as lt, TableRow as Tt } from "./components/ui/table.es.js";
+import { Table as ot, TableBody as tt, TableCaption as at, TableCell as nt, TableFooter as it, TableHead as pt, TableHeader as lt, TableRow as Tt } from "./components/ui/table.es.js";
 import { TablePageLayout as dt } from "./components/ui/table-page-layout.es.js";
 import { Tabs as St, TabsContent as bt, TabsList as xt, TabsTrigger as ft } from "./components/ui/tabs.es.js";
-import { Timeline as Dt, TimelineItem as gt, TimelineTime as st, timelineIconVariants as ct } from "./components/ui/timeline.es.js";
-import { Tooltip as Pt, TooltipContent as Mt, TooltipProvider as Et, TooltipTrigger as Ot } from "./components/ui/tooltip.es.js";
+import { Timeline as Dt, TimelineContent as gt, TimelineDate as st, TimelineIcon as ct, TimelineItem as It, timelineIconVariants as Pt } from "./components/ui/timeline.es.js";
+import { Tooltip as Et, TooltipContent as Ot, TooltipProvider as Lt, TooltipTrigger as At } from "./components/ui/tooltip.es.js";
 export {
   x as ACTIONS_COLUMN_ID,
   I as ALL_OS,
@@ -78,7 +78,7 @@ export {
   tr as CardHeader,
   ar as CardTitle,
   q as Checkbox,
-  nr as Collapsible,
+  ir as Collapsible,
   pr as CollapsibleContent,
   lr as CollapsibleTrigger,
   dr as CopyButton,
@@ -124,8 +124,8 @@ export {
   ee as FormField,
   U as FormatDate,
   oe as Input,
-  ie as InputOTP,
-  ne as InputOTPGroup,
+  ne as InputOTP,
+  ie as InputOTPGroup,
   pe as InputOTPSeparator,
   le as InputOTPSlot,
   Ae as KeyValueCard,
@@ -139,7 +139,7 @@ export {
   oo as PaginationItem,
   to as PaginationLink,
   ao as PaginationNext,
-  io as PaginationPrevious,
+  no as PaginationPrevious,
   xe as PasswordInput,
   po as Popover,
   lo as PopoverAnchor,
@@ -192,8 +192,8 @@ export {
   ot as Table,
   tt as TableBody,
   at as TableCaption,
-  it as TableCell,
-  nt as TableFooter,
+  nt as TableCell,
+  it as TableFooter,
   pt as TableHead,
   lt as TableHeader,
   dt as TablePageLayout,
@@ -211,13 +211,15 @@ export {
   Pe as TfSingleSelect,
   Oe as TfTextarea,
   Dt as Timeline,
-  gt as TimelineItem,
-  st as TimelineTime,
+  gt as TimelineContent,
+  st as TimelineDate,
+  ct as TimelineIcon,
+  It as TimelineItem,
   Zo as Toaster,
-  Pt as Tooltip,
-  Mt as TooltipContent,
-  Et as TooltipProvider,
-  Ot as TooltipTrigger,
+  Et as Tooltip,
+  Ot as TooltipContent,
+  Lt as TooltipProvider,
+  At as TooltipTrigger,
   ve as alertVariants,
   We as buttonVariants,
   a as cn,
@@ -228,14 +230,14 @@ export {
   m as formContext,
   R as getLicenseStatus,
   w as getResourceDisplayName,
-  i as getThemeHue,
+  n as getThemeHue,
   F as getValidityDisplay,
   B as getValueFromData,
-  n as logout,
+  i as logout,
   V as pluralizeTimes,
   h as secondsToDuration,
   p as setThemeHue,
-  ct as timelineIconVariants,
+  Pt as timelineIconVariants,
   S as useAppForm,
   d as useFieldContext,
   o as useIsMobile,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",