@konstructio/ui 0.1.2-alpha.44 → 0.1.2-alpha.47

package/dist/components/TimePicker/components/Wrapper/Wrapper.js

@@ -1,30 +1,31 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { useId as N, useState as y, useRef as E, useCallback as O, useEffect as I } from "react";
-import { cn as c } from "../../../../utils/index.js";
-import { timePickerVariants as L } from "../../TimePicker.variants.js";
+import { useId as N, useState as E, useRef as L, useCallback as O, useEffect as I } from "react";
+import { Typography as c } from "../../../Typography/Typography.js";
+import { cn as d } from "../../../../utils/index.js";
+import { timePickerVariants as T } from "../../TimePicker.variants.js";
 import { WrapperList as j } from "../WrapperList/WrapperList.js";
 import { C as P } from "../../../../chevron-down-DgT-uSF9.js";
 import { useTimePickerContext as R } from "../../contexts/time-picker.hook.js";
-const V = ({
-  name: d,
-  label: l,
-  required: p,
-  scrollBehavior: f,
-  className: u,
+const q = ({
+  name: p,
+  label: i,
+  isRequired: f,
+  scrollBehavior: u,
+  className: h,
   listClassName: x,
-  listItemClassName: h,
-  listItemButtonClassName: w
+  listItemClassName: w,
+  listItemButtonClassName: b
 }) => {
-  const b = N(), [n, r] = y(!1), i = E(null), { format: k, formattedTime: m } = R(), s = d ?? `time-${b}`, g = O(() => r((e) => !e), []);
+  const g = N(), [n, r] = E(!1), l = L(null), { format: k, formattedTime: m } = R(), o = p ?? `time-${g}`, v = O(() => r((e) => !e), []);
   return I(() => {
-    const e = new AbortController(), v = (o) => {
-      o.key === "Escape" && r(!1);
-    }, C = (o) => {
-      i.current?.contains(o.target) || r(!1);
+    const e = new AbortController(), y = (s) => {
+      s.key === "Escape" && r(!1);
+    }, C = (s) => {
+      l.current?.contains(s.target) || r(!1);
     };
     return document.addEventListener("mousedown", C, {
       signal: e.signal
-    }), document.addEventListener("keydown", v, {
+    }), document.addEventListener("keydown", y, {
       signal: e.signal
     }), () => {
       e.abort();
@@ -32,21 +33,35 @@ const V = ({
   }, []), /* @__PURE__ */ t(
     "div",
     {
-      ref: i,
-      className: c(
-        "w-max text-slate-800 text-sm flex flex-col gap-2",
-        k === "12" ? "w-52" : "w-[140px]"
+      ref: l,
+      className: d(
+        "w-max",
+        "text-slate-800",
+        "text-sm",
+        "flex",
+        "flex-col",
+        "gap-2",
+        k === "12" ? "w-53 min-w-53" : "w-36 min-w-36"
       ),
       children: [
-        l ? /* @__PURE__ */ t(
-          "label",
+        i ? /* @__PURE__ */ t(
+          c,
           {
-            htmlFor: s,
-            className: "text-slate-500 dark:text-metal-50 font-medium",
+            component: "label",
+            variant: "labelLarge",
+            htmlFor: o,
+            className: "font-medium",
             children: [
-              l,
+              i,
               " ",
-              p && /* @__PURE__ */ a("span", { className: "text-red-600", children: "*" })
+              f && /* @__PURE__ */ a(
+                c,
+                {
+                  component: "span",
+                  className: "text-red-500 dark:text-red-500 text-sm font-normal",
+                  children: "*"
+                }
+              )
             ]
           }
         ) : null,
@@ -54,13 +69,13 @@ const V = ({
           /* @__PURE__ */ t(
             "button",
             {
-              "aria-label": s,
+              "aria-label": o,
               "aria-haspopup": "listbox",
               "aria-expanded": "true",
               "aria-controls": "time-options",
-              className: c(L({ className: u })),
+              className: d(T({ className: h })),
               "data-open": n,
-              onClick: g,
+              onClick: v,
               children: [
                 m,
                 /* @__PURE__ */ a(
@@ -77,10 +92,10 @@ const V = ({
             j,
             {
               isOpen: n,
-              scrollBehavior: f,
+              scrollBehavior: u,
               listClassName: x,
-              listItemClassName: h,
-              listItemButtonClassName: w
+              listItemClassName: w,
+              listItemButtonClassName: b
             }
           )
         ] }),
@@ -88,7 +103,7 @@ const V = ({
           "input",
           {
             type: "hidden",
-            name: s,
+            name: o,
             value: m,
             className: "hidden"
           }
@@ -98,5 +113,5 @@ const V = ({
   );
 };
 export {
-  V as Wrapper
+  q as Wrapper
 };

package/dist/components/Typography/Typography.js

@@ -1,30 +1,26 @@
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { cn as n } from "../../utils/index.js";
-import { typographyVariants as c } from "./Typography.variants.js";
-const d = f(
-  ({ className: t, theme: r, children: p, variant: o, component: e, ...m }, a) => {
-    const s = e ?? (o?.includes("h") ? o : "p");
-    return /* @__PURE__ */ y(
-      s,
-      {
-        ref: a,
-        "data-theme": r,
-        className: n(
-          "text-slate-800",
-          "dark:text-metal-50",
-          c({
-            className: t,
-            variant: o
-          })
-        ),
-        ...m,
-        children: p
-      }
-    );
-  }
-);
-d.displayName = "Typography";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { cn as c } from "../../utils/index.js";
+import { typographyVariants as f } from "./Typography.variants.js";
+const h = y(({ className: r, theme: p, children: t, variant: o, component: m, ...e }, s) => {
+  const a = m ?? (o?.includes("h") ? o : "p");
+  return /* @__PURE__ */ n(
+    a,
+    {
+      ref: s,
+      "data-theme": p,
+      className: c(
+        f({
+          className: r,
+          variant: o
+        })
+      ),
+      ...e,
+      children: t
+    }
+  );
+});
+h.displayName = "KonstructTypography";
 export {
-  d as Typography
+  h as Typography
 };

package/dist/components/Typography/Typography.variants.js

@@ -1,52 +1,55 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const a = t([], {
-  variants: {
-    variant: {
-      h1: ["text-[57px]", "leading-16"],
-      h2: ["text-[45px]", "leading-[52px]"],
-      h3: ["text-4xl", "leading-11"],
-      h4: ["text-[32px]", "leading-10"],
-      h5: ["text-[28px]", "leading-9"],
-      h6: ["text-2xl", "font-medium", "leading-8", "tracking-[0.15px]"],
-      subtitle1: ["text-[22px]", "leading-7"],
-      subtitle2: ["text-sm", "font-medium", "leading-6", "tracking-[0.15px]"],
-      subtitle3: [
-        "text-[14px]",
-        "font-medium",
-        "leading-5",
-        "tracking-[0.1px]"
-      ],
-      labelLarge: ["text-sm", "leading-5", "tracking-[0.1px]"],
-      labelMedium: [
-        "text-[12px]",
-        "font-medium",
-        "leading-4",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      labelSmall: [
-        "text-[11px]",
-        "font-medium",
-        "leading-4",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      buttonSmall: [
-        "text-[14px]",
-        "font-semibold",
-        "leading-5",
-        "tracking-[0.25px]"
-      ],
-      body1: ["text-base", "leading-6", "tracking-[0.5px]"],
-      body2: ["text-sm", "leading-5", "tracking-[0.25px]"],
-      body3: ["text-xs", "leading-4", "tracking-[0.4px]"],
-      tooltip: ["text-sm", "leading-[22px]"]
+const a = t(
+  ["text-slate-800", "dark:text-metal-50"],
+  {
+    variants: {
+      variant: {
+        h1: ["text-[57px]", "leading-16"],
+        h2: ["text-[45px]", "leading-13"],
+        h3: ["text-4xl", "leading-11"],
+        h4: ["text-[32px]", "leading-10"],
+        h5: ["text-[28px]", "leading-9"],
+        h6: ["text-2xl", "font-medium", "leading-8", "tracking-[0.15px]"],
+        subtitle1: ["text-[22px]", "leading-7"],
+        subtitle2: ["text-sm", "font-medium", "leading-6", "tracking-[0.15px]"],
+        subtitle3: [
+          "text-[14px]",
+          "font-medium",
+          "leading-5",
+          "tracking-[0.1px]"
+        ],
+        labelLarge: ["text-sm", "leading-5", "tracking-[0.1px]"],
+        labelMedium: [
+          "text-[12px]",
+          "font-medium",
+          "leading-4",
+          "tracking-[0.5px]",
+          "uppercase"
+        ],
+        labelSmall: [
+          "text-[11px]",
+          "font-medium",
+          "leading-4",
+          "tracking-[0.5px]",
+          "uppercase"
+        ],
+        buttonSmall: [
+          "text-[14px]",
+          "font-semibold",
+          "leading-5",
+          "tracking-[0.25px]"
+        ],
+        body1: ["text-base", "leading-6", "tracking-[0.5px]"],
+        body2: ["text-sm", "leading-5", "tracking-[0.25px]"],
+        body3: ["text-xs", "leading-4", "tracking-[0.4px]"],
+        tooltip: ["text-sm", "leading-5.5"]
+      }
+    },
+    defaultVariants: {
+      variant: "body1"
     }
-  },
-  defaultVariants: {
-    variant: "body1"
   }
-});
+);
 export {
   a as typographyVariants
 };

package/dist/components/VirtualizedTable/components/Actions/Actions.js

@@ -1,20 +1,20 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { Button as t } from "../../../Button/Button.js";
+import { Button as a } from "../../../Button/Button.js";
 import { cn as e } from "../../../../utils/index.js";
 import { E as m } from "../../../../ellipsis-vertical-BVPtjl5f.js";
 const b = ({
-  actions: a,
+  actions: t,
   wrapperClassName: l,
-  triggerButtonClassName: s,
-  iconTriggerButtonClassName: n,
+  triggerButtonClassName: n,
+  iconTriggerButtonClassName: s,
   wrapperActionsClassName: d,
   wrapperContentActionsClassName: c,
   ...h
-}) => a ? /* @__PURE__ */ i("div", { className: e("relative group", l), children: [
+}) => t ? /* @__PURE__ */ i("div", { className: e("relative group", l), children: [
   /* @__PURE__ */ i(
-    t,
+    a,
     {
-      variant: "text",
+      variant: "link",
       shape: "circle",
       size: "large",
       className: e(
@@ -24,7 +24,7 @@ const b = ({
         "dark:text-metal-400",
         "dark:group-hover:text-aurora-500",
         "dark:group-hover:bg-aurora-900",
-        s
+        n
       ),
       role: "presentation",
       children: [
@@ -32,7 +32,7 @@ const b = ({
           m,
           {
             "aria-hidden": "true",
-            className: e("w-7 h-7", n)
+            className: e("w-7 h-7", s)
           }
         ),
         /* @__PURE__ */ r("span", { className: "sr-only", children: "Show Actions" })
@@ -46,7 +46,7 @@ const b = ({
         "absolute",
         "top-full",
         "right-0",
-        "w-[215px]",
+        "w-53.75",
         "hidden",
         "group-hover:block",
         "z-10",
@@ -67,8 +67,8 @@ const b = ({
             "fade-in-0",
             c
           ),
-          children: a.map(({ label: o, className: p, onClick: u }) => /* @__PURE__ */ r(
-            t,
+          children: t.map(({ label: o, className: p, onClick: u }) => /* @__PURE__ */ r(
+            a,
             {
               className: e(
                 "w-full",
@@ -87,10 +87,10 @@ const b = ({
                 "px-6",
                 p
               ),
-              variant: "text",
+              variant: "link",
               asChild: !0,
               role: "presentation",
-              children: /* @__PURE__ */ r(t, { onClick: () => u(h.row.original), children: o })
+              children: /* @__PURE__ */ r(a, { onClick: () => u(h.row.original), children: o })
             },
             o
           ))

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.js

@@ -1,15 +1,15 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import { useMemo as l, useCallback as p } from "react";
-import { Dropdown as g } from "../../../Dropdown/Dropdown.js";
-import { DEFAULT_PAGE_SIZES as c } from "../../constants/pagination.js";
-import { useTableContext as d } from "../../contexts/table.hook.js";
+import { Select as c } from "../../../Select/Select.js";
+import { DEFAULT_PAGE_SIZES as g } from "../../constants/pagination.js";
+import { useTableContext as x } from "../../contexts/table.hook.js";
 const u = ({
-  pageSizes: r = c
+  pageSizes: r = g
 }) => {
-  const { pageSize: n, onPageSize: t, handlePage: a } = d(), s = l(
+  const { pageSize: s, onPageSize: t, handlePage: a } = x(), m = l(
     () => r.map(String).map((e) => ({ label: e, value: e })),
     []
-  ), m = p(
+  ), n = p(
     (e) => {
       t(Number(e)), a(0);
     },
@@ -18,13 +18,13 @@ const u = ({
   return /* @__PURE__ */ i("div", { className: "flex items-center gap-2 dark:text-metal-300", children: [
     /* @__PURE__ */ o("span", { children: "Show" }),
     /* @__PURE__ */ o(
-      g,
+      c,
       {
         className: "w-22 [&>div>p]:text-xs bg-white",
         listItemClassName: "[&>p]:text-xs dark:bg-metal-800",
-        options: s,
-        value: n.toString(),
-        onChange: ({ target: e }) => m(e.value)
+        options: m,
+        value: s.toString(),
+        onChange: ({ target: e }) => n(e.value)
       }
     )
   ] });

package/dist/components/VirtualizedTable/components/Skeleton/Skeleton.js

@@ -72,7 +72,7 @@ const N = ({ numberOfRows: i, table: o }) => {
             children: /* @__PURE__ */ r(
               m,
               {
-                variant: "text",
+                variant: "link",
                 shape: "circle",
                 size: "large",
                 disabled: !0,

package/dist/components/index.js

@@ -2,103 +2,107 @@ import { Alert as e } from "./Alert/Alert.js";
 import { AlertDialog as p } from "./AlertDialog/AlertDialog.js";
 import { Autocomplete as x } from "./Autocomplete/Autocomplete.js";
 import { Badge as a } from "./Badge/Badge.js";
-import { Breadcrumb as d } from "./Breadcrumb/Breadcrumb.js";
+import { Breadcrumb as n } from "./Breadcrumb/Breadcrumb.js";
 import { Button as l } from "./Button/Button.js";
-import { Card as u } from "./Card/Card.js";
+import { Card as g } from "./Card/Card.js";
 import { Checkbox as c } from "./Checkbox/Checkbox.js";
+import { Counter as b, Counter as s } from "./Counter/Counter.js";
 import { DatePicker as D } from "./Datepicker/DatePicker.js";
-import { Divider as s } from "./Divider/Divider.js";
-import { Dropdown as C } from "./Dropdown/Dropdown.js";
-import { DropdownButton as h } from "./DropdownButton/DropdownButton.js";
-import { Filter as w } from "./Filter/Filter.js";
-import { Input as R } from "./Input/Input.js";
-import { Loading as M } from "./Loading/Loading.js";
-import { M as F } from "../Modal-CjC-CIJ8.js";
-import { MultiSelectDropdown as I } from "./MultiSelectDropdown/MultiSelectDropdown.js";
-import { NumberInput as y } from "./NumberInput/NumberInput.js";
-import { PhoneNumberInput as O } from "./PhoneNumberInput/PhoneNumberInput.js";
+import { Divider as N } from "./Divider/Divider.js";
+import { DropdownButton as v } from "./DropdownButton/DropdownButton.js";
+import { Filter as P } from "./Filter/Filter.js";
+import { ImageUpload as A } from "./ImageUpload/ImageUpload.js";
+import { Input as M } from "./Input/Input.js";
+import { Loading as F } from "./Loading/Loading.js";
+import { M as L } from "../Modal-CjC-CIJ8.js";
+import { MultiSelectDropdown as z } from "./MultiSelectDropdown/MultiSelectDropdown.js";
+import { PhoneNumberInput as U } from "./PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as j } from "./PieChart/PieChart.js";
 import { ProgressBar as E } from "./ProgressBar/ProgressBar.js";
 import { Radio as J } from "./Radio/Radio.js";
 import { RadioCard as Q } from "./RadioCard/RadioCard.js";
-import { RadioCardGroup as W } from "./RadioCardGroup/RadioCardGroup.js";
-import { RadioGroup as Y } from "./RadioGroup/RadioGroup.js";
-import { Range as _ } from "./Range/Range.js";
-import { Sidebar as oo } from "./Sidebar/Sidebar.js";
-import { Slider as eo } from "./Slider/Slider.js";
-import { Switch as po } from "./Switch/Switch.js";
-import { Table as xo } from "./Table/Table.js";
-import { Tabs as ao } from "./Tabs/Tabs.js";
-import { Tag as no } from "./Tag/Tag.js";
-import { TagSelect as go } from "./TagSelect/TagSelect.js";
-import { TextArea as To } from "./TextArea/TextArea.js";
-import { TimePicker as bo } from "./TimePicker/TimePicker.js";
-import { Toast as So } from "./Toast/Toast.js";
-import { Tooltip as Bo } from "./Tooltip/Tooltip.js";
-import { Typography as No } from "./Typography/Typography.js";
-import { VirtualizedTable as vo } from "./VirtualizedTable/VirtualizedTable.js";
-import { BadgeMultiSelect as Po } from "./Filter/components/BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as Ao } from "./Filter/components/DateFilterDropdown/DateFilterDropdown.js";
-import { Footer as ko } from "./Sidebar/components/Footer/Footer.js";
-import { Logo as Go } from "./Sidebar/components/Logo/Logo.js";
-import { Navigation as Lo } from "./Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as zo } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as Vo } from "./Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as qo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Content as Ho } from "./Tabs/components/Content.js";
-import { List as Ko } from "./Tabs/components/List.js";
-import { Trigger as Uo } from "./Tabs/components/Trigger.js";
-import { TruncateText as Xo } from "./VirtualizedTable/components/TruncateText/TruncateText.js";
+import { RadioCardGroup as X } from "./RadioCardGroup/RadioCardGroup.js";
+import { RadioGroup as Z } from "./RadioGroup/RadioGroup.js";
+import { Range as $ } from "./Range/Range.js";
+import { Select as ro, Select as eo } from "./Select/Select.js";
+import { Sidebar as po } from "./Sidebar/Sidebar.js";
+import { Slider as xo } from "./Slider/Slider.js";
+import { Switch as ao } from "./Switch/Switch.js";
+import { Table as no } from "./Table/Table.js";
+import { Tabs as uo } from "./Tabs/Tabs.js";
+import { Tag as To } from "./Tag/Tag.js";
+import { TagSelect as So } from "./TagSelect/TagSelect.js";
+import { TextArea as so } from "./TextArea/TextArea.js";
+import { TimePicker as Do } from "./TimePicker/TimePicker.js";
+import { Toast as No } from "./Toast/Toast.js";
+import { Tooltip as vo } from "./Tooltip/Tooltip.js";
+import { Typography as Po } from "./Typography/Typography.js";
+import { VirtualizedTable as Ao } from "./VirtualizedTable/VirtualizedTable.js";
+import { BadgeMultiSelect as Mo } from "./Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as Fo } from "./Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { Footer as Lo } from "./Sidebar/components/Footer/Footer.js";
+import { Logo as zo } from "./Sidebar/components/Logo/Logo.js";
+import { Navigation as Uo } from "./Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as jo } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as Eo } from "./Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as Jo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Content as Qo } from "./Tabs/components/Content.js";
+import { List as Xo } from "./Tabs/components/List.js";
+import { Trigger as Zo } from "./Tabs/components/Trigger.js";
+import { TruncateText as $o } from "./VirtualizedTable/components/TruncateText/TruncateText.js";
 export {
   e as Alert,
   p as AlertDialog,
   x as Autocomplete,
   a as Badge,
-  Po as BadgeMultiSelect,
-  d as Breadcrumb,
+  Mo as BadgeMultiSelect,
+  n as Breadcrumb,
   l as Button,
-  u as Card,
+  g as Card,
   c as Checkbox,
-  Ho as Content,
-  Ao as DateFilterDropdown,
+  Qo as Content,
+  b as Counter,
+  Fo as DateFilterDropdown,
   D as DatePicker,
-  s as Divider,
-  C as Dropdown,
-  h as DropdownButton,
-  w as Filter,
-  ko as Footer,
-  R as Input,
-  Ko as List,
-  M as Loading,
-  Go as Logo,
-  F as Modal,
-  I as MultiSelectDropdown,
-  Lo as Navigation,
-  zo as NavigationGroup,
-  Vo as NavigationOption,
-  qo as NavigationSeparator,
-  y as NumberInput,
-  O as PhoneNumberInput,
+  N as Divider,
+  ro as Dropdown,
+  v as DropdownButton,
+  P as Filter,
+  Lo as Footer,
+  A as ImageUpload,
+  M as Input,
+  Xo as List,
+  F as Loading,
+  zo as Logo,
+  L as Modal,
+  z as MultiSelectDropdown,
+  Uo as Navigation,
+  jo as NavigationGroup,
+  Eo as NavigationOption,
+  Jo as NavigationSeparator,
+  s as NumberInput,
+  U as PhoneNumberInput,
   j as PieChart,
   E as ProgressBar,
   J as Radio,
   Q as RadioCard,
-  W as RadioCardGroup,
-  Y as RadioGroup,
-  _ as Range,
-  oo as Sidebar,
-  eo as Slider,
-  po as Switch,
-  xo as Table,
-  ao as Tabs,
-  no as Tag,
-  go as TagSelect,
-  To as TextArea,
-  bo as TimePicker,
-  So as Toast,
-  Bo as Tooltip,
-  Uo as Trigger,
-  Xo as TruncateText,
-  No as Typography,
-  vo as VirtualizedTable
+  X as RadioCardGroup,
+  Z as RadioGroup,
+  $ as Range,
+  eo as Select,
+  po as Sidebar,
+  xo as Slider,
+  ao as Switch,
+  no as Table,
+  uo as Tabs,
+  To as Tag,
+  So as TagSelect,
+  so as TextArea,
+  Do as TimePicker,
+  No as Toast,
+  vo as Tooltip,
+  Zo as Trigger,
+  $o as TruncateText,
+  Po as Typography,
+  Ao as VirtualizedTable
 };