@konstructio/ui 0.0.12-alpha.1 → 0.0.12

package/dist/components/Breadcrumb/Breadcrumb.variants.js

@@ -1,5 +1,5 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const a = e(["text-slate-500"], {
+const s = e(["flex", "gap-1.5", "items-center"], {
   variants: {
     theme: {
       kubefirst: "",
@@ -14,9 +14,10 @@ const a = e(["text-slate-500"], {
     }
   },
   defaultVariants: {
-    theme: "kubefirst"
+    theme: "kubefirst",
+    size: "base"
   }
-}), s = e(["flex", "gap-1", "items-center"], {
+}), a = e(["text-slate-400", "font-semibold"], {
   variants: {
     theme: {
       kubefirst: "",
@@ -24,28 +25,28 @@ const a = e(["text-slate-500"], {
       civo: ""
     },
     size: {
-      sm: "",
-      base: "",
-      lg: "",
-      xl: ""
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl"
     }
   },
   defaultVariants: {
     theme: "kubefirst",
     size: "base"
   }
-}), r = e("text-[#abadc6]", {
+}), i = e("", {
   variants: {
     theme: {
-      kubefirst: "",
-      colony: "",
+      kubefirst: "text-kubefirst-primary",
+      colony: "text-red-500",
       civo: ""
     },
     size: {
-      sm: ["w-3", "h-3"],
-      base: ["w-4", "h-4"],
-      lg: ["w-5", "h-5"],
-      xl: ["w-6", "h-6"]
+      sm: ["w-2", "h-2"],
+      base: ["w-3", "h-3"],
+      lg: ["w-4", "h-4"],
+      xl: ["w-5", "h-5"]
     }
   },
   defaultVariants: {
@@ -54,7 +55,7 @@ const a = e(["text-slate-500"], {
   }
 });
 export {
+  a as breadcrumbItemVariants,
   s as breadcrumbVariants,
-  a as breadcrumbWrapperVariants,
-  r as chevronVariants
+  i as chevronVariants
 };

package/dist/components/Breadcrumb/hooks/useBreadcrumb.d.ts

@@ -0,0 +1,3 @@
+export declare const useBreadcrumb: () => {
+    isInsideRouter: boolean;
+};

package/dist/components/Breadcrumb/hooks/useBreadcrumb.js

@@ -1,4 +1,5 @@
-import { u } from "../../../useBreadcrumb-CojbXFVD.js";
+import "react";
+import { u as o } from "../../../useBreadcrumb-DxYsZvj_.js";
 export {
-  u as useBreadcrumb
+  o as useBreadcrumb
 };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ButtonProps } from './Button.types';
+declare const Button: FC<ButtonProps>;
+export { Button };

package/dist/components/Button/Button.js

@@ -2,36 +2,38 @@ import { jsx as h } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
 import { S as u } from "../../index-DoOsnuB6.js";
 import { cn as l } from "../../utils/index.js";
-import { buttonVariants as x } from "./Button.variants.js";
-import { useTheme as T } from "../../contexts/theme.hook.js";
+import "../../contexts/theme.context.js";
+import { useTheme as x } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
+import { buttonVariants as T } from "./Button.variants.js";
 const B = c(
   ({
     className: o,
-    variant: e,
-    theme: m,
+    variant: m,
+    theme: e,
     size: r,
     version: n,
     disabled: t = !1,
-    asChild: s = !1,
-    ...i
-  }, f) => {
-    const a = s ? u : "button", { theme: p } = T();
+    asChild: i = !1,
+    ...s
+  }, p) => {
+    const f = i ? u : "button", { theme: a } = x();
     return /* @__PURE__ */ h(
-      a,
+      f,
       {
-        ref: f,
+        ref: p,
         className: l(
-          x({
-            variant: e,
+          T({
+            variant: m,
             disabled: t,
-            theme: m ?? p,
+            theme: e ?? a,
             size: r,
             className: o,
             version: n
           })
         ),
         disabled: t,
-        ...i
+        ...s
       }
     );
   }

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+import { ButtonHTMLAttributes } from 'react';
+import { buttonVariants } from './Button.variants';
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    disabled?: boolean;
+}

package/dist/components/Button/Button.types.js

@@ -0,0 +1 @@
+

package/dist/components/Button/Button.variants.d.ts

@@ -0,0 +1,7 @@
+export declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "danger" | "text" | "circle" | null | undefined;
+    version?: "default" | "alternate" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+    disabled?: boolean | null | undefined;
+    size?: "medium" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CardProps } from './Card.types';
+declare const Card: FC<CardProps>;
+export { Card };

package/dist/components/Card/Card.js

@@ -1,18 +1,20 @@
 import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
+import { forwardRef as c } from "react";
+import "../../contexts/theme.context.js";
+import { useTheme as f } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
 import { cn as t } from "../../utils/index.js";
-import { cardBaseVariants as n, cardVariants as p } from "./Card.variants.js";
-import { useTheme as h } from "../../contexts/theme.hook.js";
-const l = f(
-  ({ className: s, theme: r, isActive: m, canHover: a, wrapperClassName: d, ...i }, c) => {
-    const { theme: e } = h();
+import { cardBaseVariants as n, cardVariants as h } from "./Card.variants.js";
+const l = c(
+  ({ className: s, theme: r, isActive: m, canHover: a, wrapperClassName: i, ...d }, p) => {
+    const { theme: e } = f();
     return /* @__PURE__ */ o(
       "div",
       {
         className: t(
           n({
             canHover: a,
-            className: d,
+            className: i,
             isActive: m,
             theme: r ?? e
           })
@@ -20,16 +22,16 @@ const l = f(
         children: /* @__PURE__ */ o(
           "div",
           {
-            ref: c,
+            ref: p,
             className: t(
-              p({
+              h({
                 className: s,
                 theme: r ?? e,
                 isActive: m,
                 canHover: a
               })
             ),
-            ...i
+            ...d
           }
         )
       }

package/dist/components/Card/Card.types.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { cardVariants } from './Card.variants';
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>, PropsWithChildren {
+    isActive?: boolean;
+    canHover?: boolean;
+    wrapperClassName?: string;
+}

package/dist/components/Card/Card.types.js

@@ -0,0 +1 @@
+

package/dist/components/Card/Card.variants.d.ts

@@ -0,0 +1,10 @@
+export declare const cardBaseVariants: (props?: ({
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+    isActive?: boolean | null | undefined;
+    canHover?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const cardVariants: (props?: ({
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+    isActive?: boolean | null | undefined;
+    canHover?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { CheckboxProps } from './Checkbox.types';
+export declare const Checkbox: FC<CheckboxProps>;

package/dist/components/Checkbox/Checkbox.js

@@ -2,15 +2,17 @@ import { jsxs as S, jsx as f } from "react/jsx-runtime";
 import * as u from "react";
 import j, { forwardRef as _, useId as A, useCallback as H } from "react";
 import { u as K } from "../../index-DoOsnuB6.js";
-import { a as W, d as I, c as $ } from "../../index-8vgf-x5i.js";
+import { c as W, a as $, d as I } from "../../index-8vgf-x5i.js";
 import { u as q, a as F } from "../../index-BxeV34ij.js";
 import { P as V } from "../../index-D4Q2rMby.js";
-import { P as T } from "../../index-1GLoikpT.js";
+import { P as T } from "../../index-BaNV0qac.js";
+import "../../contexts/theme.context.js";
+import { useTheme as X } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
 import { cn as N } from "../../utils/index.js";
-import { checkboxVariants as X, labelVariants as G } from "./Checkbox.variants.js";
-import { useToggle as J } from "../../hooks/useToggle.js";
-import { P } from "../../index-C5psggHV.js";
-import { useTheme as Q } from "../../contexts/theme.hook.js";
+import { useToggle as G } from "../../hooks/useToggle.js";
+import { checkboxVariants as J, labelVariants as Q } from "./Checkbox.variants.js";
+import { P } from "../../index-D68N8v8R.js";
 function E() {
   return E = Object.assign || function(e) {
     for (var s = 1; s < arguments.length; s++) {
@@ -60,7 +62,7 @@ O.propTypes = {
   size: P.oneOfType([P.string, P.number])
 };
 O.displayName = "Check";
-var R = "Checkbox", [Z, ke] = $(R), [ee, te] = Z(R), z = u.forwardRef(
+var R = "Checkbox", [Z, Ce] = W(R), [ee, te] = Z(R), z = u.forwardRef(
   (e, s) => {
     const {
       __scopeCheckbox: t,
@@ -73,7 +75,7 @@ var R = "Checkbox", [Z, ke] = $(R), [ee, te] = Z(R), z = u.forwardRef(
       onCheckedChange: C,
       form: d,
       ...p
-    } = e, [i, k] = u.useState(null), v = K(s, (c) => k(c)), x = u.useRef(!1), g = i ? d || !!i.closest("form") : !0, [m = !1, w] = W({
+    } = e, [i, k] = u.useState(null), v = K(s, (c) => k(c)), x = u.useRef(!1), g = i ? d || !!i.closest("form") : !0, [m = !1, w] = $({
       prop: n,
       defaultProp: r,
       onChange: C
@@ -178,7 +180,7 @@ function B(e) {
   return h(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
 var oe = z, ne = D;
-const ve = _(
+const xe = _(
   ({
     ariaLabelledBy: e,
     className: s,
@@ -193,7 +195,7 @@ const ve = _(
     variant: d,
     onChange: p
   }, i) => {
-    const [k, v] = J(t), x = A(), { theme: g } = Q(), m = H(() => {
+    const [k, v] = G(t), x = A(), { theme: g } = X(), m = H(() => {
       v(), p == null || p();
     }, [p, v]);
     return /* @__PURE__ */ S("div", { className: "flex items-center gap-2", children: [
@@ -208,7 +210,7 @@ const ve = _(
           "aria-labelledby": e,
           title: C,
           className: N(
-            X({
+            J({
               className: s,
               theme: b ?? g,
               variant: d,
@@ -224,7 +226,7 @@ const ve = _(
         {
           htmlFor: a ?? n,
           className: N(
-            G({
+            Q({
               variant: d,
               theme: b,
               className: l
@@ -237,5 +239,5 @@ const ve = _(
   }
 );
 export {
-  ve as Checkbox
+  xe as Checkbox
 };

package/dist/components/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,14 @@
+import { InputHTMLAttributes } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { checkboxVariants } from './Checkbox.variants';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked'>, VariantProps<typeof checkboxVariants> {
+    ariaLabelledBy?: string;
+    className?: string;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    id?: string;
+    label?: string;
+    labelClassName?: string;
+    name?: string;
+    onChange?: () => void;
+}

package/dist/components/Checkbox/Checkbox.types.js

@@ -0,0 +1 @@
+

package/dist/components/Checkbox/Checkbox.variants.d.ts

@@ -0,0 +1,9 @@
+export declare const checkboxVariants: (props?: ({
+    variant?: "default" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelVariants: (props?: ({
+    variant?: "default" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DropdownProps } from './Dropdown.types';
+export declare const Dropdown: FC<DropdownProps>;

package/dist/components/Dropdown/Dropdown.js

@@ -1,8 +1,10 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { DropdownProvider as i } from "./contexts/dropdown.provider.js";
+import { forwardRef as i } from "react";
+import "./components/List/List.js";
 import { Wrapper as t } from "./components/Wrapper.js";
-const a = f(({ onChange: o, ...p }, m) => /* @__PURE__ */ r(i, { onChange: o, children: /* @__PURE__ */ r(t, { ref: m, ...p }) }));
+import "./contexts/dropdown.context.js";
+import { DropdownProvider as f } from "./contexts/dropdown.provider.js";
+const s = i(({ onChange: o, ...p }, m) => /* @__PURE__ */ r(f, { onChange: o, children: /* @__PURE__ */ r(t, { ref: m, ...p }) }));
 export {
-  a as Dropdown
+  s as Dropdown
 };

package/dist/components/Dropdown/Dropdown.types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { dropdownVariants } from './Dropdown.variants';
+export type Option = {
+    label: string | ReactNode;
+    leftIcon?: ReactNode | string;
+    value: string;
+};
+export interface DropdownProps extends VariantProps<typeof dropdownVariants> {
+    defaultValue?: string;
+    label?: string;
+    name?: string;
+    options: Option[];
+    placeholder?: string;
+    onChange?: (value: Option) => void;
+}

package/dist/components/Dropdown/Dropdown.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dropdown/Dropdown.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const dropdownVariants: (props?: ({
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Dropdown/components/EmptyList.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const EmptyList: FC;

package/dist/components/Dropdown/components/List/List.d.ts

@@ -0,0 +1,3 @@
+import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ListProps } from './List.types';
+export declare const List: ForwardRefExoticComponent<ListProps & RefAttributes<ComponentRef<'ul'>>>;

package/dist/components/Dropdown/components/List/List.js

@@ -1,25 +1,26 @@
 import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as a, useRef as p, useImperativeHandle as u } from "react";
+import { forwardRef as p, useRef as a, useImperativeHandle as u } from "react";
 import { cn as c } from "../../../../utils/index.js";
 import { useNavigationUlList as d } from "../../hooks/useNavigationList.js";
-import { ListItem as x } from "../ListItem/ListItem.js";
-import { listVariants as v } from "./List.variants.js";
-import { useDropdownContext as L } from "../../contexts/dropdown.hook.js";
-const j = a(
+import { useDropdownContext as x } from "../../contexts/dropdown.hook.js";
+import "../../contexts/dropdown.context.js";
+import { ListItem as v } from "../ListItem/ListItem.js";
+import { listVariants as L } from "./List.variants.js";
+const C = p(
   ({ options: i, theme: t, wrapperRef: m, wrapperInputRef: s, name: l }, n) => {
-    const r = p(null), { isOpen: f } = L();
+    const r = a(null), { isOpen: f } = x();
     return u(n, () => r.current, [r]), d({ ulRef: r, wrapperRef: m, wrapperInputRef: s }), /* @__PURE__ */ e(
       "ul",
       {
         ref: r,
         title: l,
         role: "listbox",
-        className: c(v({ theme: t }), f ? "flex" : "hidden"),
-        children: i.map((o) => /* @__PURE__ */ e(x, { theme: t, ...o }, o.value))
+        className: c(L({ theme: t }), f ? "flex" : "hidden"),
+        children: i.map((o) => /* @__PURE__ */ e(v, { theme: t, ...o }, o.value))
       }
     );
   }
 );
 export {
-  j as List
+  C as List
 };

package/dist/components/Dropdown/components/List/List.types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentRef, RefObject } from 'react';
+import { DropdownProps } from '../../Dropdown.types';
+export type ListProps = Pick<DropdownProps, 'name' | 'options' | 'theme'> & {
+    wrapperRef: RefObject<ComponentRef<'div'> | null>;
+    wrapperInputRef: RefObject<ComponentRef<'div'> | null>;
+};

package/dist/components/Dropdown/components/List/List.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dropdown/components/List/List.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const listVariants: (props?: ({
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Dropdown/components/ListItem/ListItem.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ListItemProps } from './ListItem.types';
+export declare const ListItem: FC<ListItemProps>;

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,36 +1,37 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { useRef as u, useCallback as r } from "react";
-import { cn as d } from "../../../../utils/index.js";
-import { listItemVariants as p } from "./ListItem.variants.js";
-import { useDropdownContext as x } from "../../contexts/dropdown.hook.js";
-const C = ({ theme: o, ...e }) => {
-  const { setValue: n, toggleOpen: s } = x(), c = u(null), t = r(
-    (l) => {
-      n(l), s(!1);
+import { jsxs as i, jsx as f } from "react/jsx-runtime";
+import { useRef as u, useCallback as s } from "react";
+import { cn as p } from "../../../../utils/index.js";
+import { useDropdownContext as d } from "../../contexts/dropdown.hook.js";
+import "../../contexts/dropdown.context.js";
+import { listItemVariants as x } from "./ListItem.variants.js";
+const b = ({ theme: o, ...e }) => {
+  const { setValue: n, toggleOpen: r } = d(), c = u(null), l = s(
+    (t) => {
+      n(t), r(!1);
     },
-    [n, s]
-  ), a = r(
-    (l, m) => {
-      l.key === "Enter" && t(m);
+    [n, r]
+  ), m = s(
+    (t, a) => {
+      t.key === "Enter" && l(a);
     },
-    [t]
+    [l]
   );
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ i(
     "li",
     {
       ref: c,
       role: "option",
-      className: d(p({ theme: o })),
+      className: p(x({ theme: o })),
       tabIndex: 0,
-      onClick: () => t(e),
-      onKeyDown: (l) => a(l, e),
+      onClick: () => l(e),
+      onKeyDown: (t) => m(t, e),
       children: [
-        e.leftIcon ? /* @__PURE__ */ i("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null,
+        e.leftIcon ? /* @__PURE__ */ f("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null,
         e.label
       ]
     }
   );
 };
 export {
-  C as ListItem
+  b as ListItem
 };

package/dist/components/Dropdown/components/ListItem/ListItem.types.d.ts

@@ -0,0 +1,4 @@
+import { DropdownProps, Option } from '../../Dropdown.types';
+export type ListItemProps = Option & {
+    theme: DropdownProps['theme'];
+};

package/dist/components/Dropdown/components/ListItem/ListItem.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dropdown/components/ListItem/ListItem.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const listItemVariants: (props?: ({
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Dropdown/components/Wrapper.d.ts

@@ -0,0 +1,3 @@
+import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { DropdownProps } from '../Dropdown.types';
+export declare const Wrapper: ForwardRefExoticComponent<DropdownProps & RefAttributes<ComponentRef<'input'>>>;