@konstructio/ui 0.0.10 → 0.0.12-alpha.0

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.js

@@ -0,0 +1,35 @@
+import { jsx as p } from "react/jsx-runtime";
+import "../../../../contexts/theme.context.js";
+import { useTheme as a } from "../../../../contexts/theme.hook.js";
+import "react";
+import "../../../../js.cookie-OLEfuq_g.js";
+import { cn as s } from "../../../../utils/index.js";
+import { navigationOptionVariants as c } from "./NavigationOption.variants.js";
+const N = ({
+  children: t,
+  className: o,
+  theme: r,
+  isVisible: i = !0,
+  isActive: e,
+  ...m
+}) => {
+  const { theme: n } = a();
+  return i ? /* @__PURE__ */ p(
+    "li",
+    {
+      ...m,
+      role: "option",
+      className: s(
+        c({
+          theme: r ?? n,
+          className: o,
+          isActive: e
+        })
+      ),
+      children: t
+    }
+  ) : null;
+};
+export {
+  N as NavigationOption
+};

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.types.d.ts

@@ -0,0 +1,17 @@
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+import { navigationOptionVariants } from './NavigationOption.variants';
+type NavigationOption = VariantProps<typeof navigationOptionVariants> & {
+    className?: string;
+    isVisible?: boolean;
+    isActive?: boolean;
+};
+export type NavigationOptionProps = NavigationOption & ({
+    role: 'button';
+    children: ReactNode;
+    onClick: VoidFunction;
+} | {
+    role?: never;
+    children: ReactNode;
+});
+export {};

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.types.js

@@ -0,0 +1 @@
+

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.variants.d.ts

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

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.variants.js

@@ -0,0 +1,52 @@
+import { c as e } from "../../../../index-BNmRGtA6.js";
+const a = e(
+  [
+    "[&>a]:flex",
+    "[&>a]:gap-2",
+    "[&>a]:no-underline",
+    "[&>a]:text-inherit",
+    "[&>a]:w-full",
+    "cursor-pointer",
+    "flex",
+    "font-normal",
+    "font-normal",
+    "gap-2",
+    "hover:rounded-xl",
+    "px-4",
+    "py-2.5",
+    "text-black",
+    "w-full"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: [
+          "text-[#9ea2c6]",
+          "hover:text-white",
+          "hover:bg-[#252a41]",
+          "selection:bg-powder-500",
+          "selection:text-white"
+        ],
+        civo: ""
+      },
+      isActive: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        theme: "kubefirst",
+        isActive: !0,
+        class: ["text-white", "bg-[#252a41]"]
+      }
+    ],
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  a as navigationOptionVariants
+};

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.d.ts

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

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.js

@@ -0,0 +1,24 @@
+import { jsx as m } from "react/jsx-runtime";
+import "../../../../contexts/theme.context.js";
+import { useTheme as e } from "../../../../contexts/theme.hook.js";
+import "react";
+import "../../../../js.cookie-OLEfuq_g.js";
+import { cn as i } from "../../../../utils/index.js";
+import { navigationSeparatorVariant as a } from "./NavigationSeparator.variants.js";
+const x = ({
+  className: t,
+  theme: o
+}) => {
+  const { theme: r } = e();
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: i(
+        a({ className: t, theme: o ?? r })
+      )
+    }
+  );
+};
+export {
+  x as NavigationSeparator
+};

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.types.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
+import { navigationSeparatorVariant } from './NavigationSeparator.variants';
+export interface NavigationSeparatorProps extends Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>, VariantProps<typeof navigationSeparatorVariant> {
+}

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.types.js

@@ -0,0 +1 @@
+

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.variants.d.ts

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

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.variants.js

@@ -0,0 +1,19 @@
+import { c as r } from "../../../../index-BNmRGtA6.js";
+const a = r(
+  ["border-t", "rounded-full", "my-1.5"],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "border-t-[#9ea2c6]/30",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  a as navigationSeparatorVariant
+};

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.d.ts

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

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.js

@@ -0,0 +1,27 @@
+import { jsx as m } from "react/jsx-runtime";
+import "../../../../contexts/theme.context.js";
+import { useTheme as n } from "../../../../contexts/theme.hook.js";
+import "react";
+import "../../../../js.cookie-OLEfuq_g.js";
+import { cn as a } from "../../../../utils/index.js";
+import { navigationTitleVariants as p } from "./NavigationTitle.variants.js";
+const x = ({
+  title: t,
+  className: r,
+  theme: e,
+  isVisible: o = !0
+}) => {
+  const { theme: i } = n();
+  return o ? /* @__PURE__ */ m(
+    "h2",
+    {
+      className: a(
+        p({ theme: e ?? i, className: r })
+      ),
+      children: t
+    }
+  ) : null;
+};
+export {
+  x as NavigationTitle
+};

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.types.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+import { HtmlHTMLAttributes } from 'react';
+import { navigationTitleVariants } from './NavigationTitle.variants';
+export interface NavigationTitleProps extends VariantProps<typeof navigationTitleVariants>, Pick<HtmlHTMLAttributes<HTMLHeadingElement>, 'className'> {
+    title: string;
+    className?: string;
+    isVisible?: boolean;
+}

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.types.js

@@ -0,0 +1 @@
+

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.variants.d.ts

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

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.variants.js

@@ -0,0 +1,23 @@
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const i = t(
+  ["text-sm", "font-bold", "px-4", "mt-3", "mb-2"],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: [
+          "text-white",
+          "selection:bg-powder-500",
+          "selection:text-white"
+        ],
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  i as navigationTitleVariants
+};

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

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

package/dist/components/Sidebar/components/Wrapper/Wrapper.js

@@ -0,0 +1,85 @@
+import { jsxs as x, jsx as C } from "react/jsx-runtime";
+import { useRef as d, useCallback as l, useMemo as s, Children as a, isValidElement as v, useEffect as D } from "react";
+import "../../../../contexts/theme.context.js";
+import { useTheme as T } from "../../../../contexts/theme.hook.js";
+import "../../../../js.cookie-OLEfuq_g.js";
+import { cn as E } from "../../../../utils/index.js";
+import { wrapperSiderbarVariants as V, dragVariants as b } from "../../Sidebar.variants.js";
+import { Footer as j } from "../Footer/Footer.js";
+import { Logo as z } from "../Logo/Logo.js";
+import { Navigation as k } from "../Navigation/Navigation.js";
+const I = ({
+  canResize: M = !0,
+  children: y,
+  maxWith: i = 300,
+  minWith: m = 240,
+  theme: c,
+  wrapperClassName: w
+}) => {
+  const r = d(null), u = d(null), f = d(!1), { theme: g, setTheme: L } = T(), n = l(
+    (e) => {
+      if (!f.current) {
+        r.current && (r.current.style.opacity = "0");
+        return;
+      }
+      let o = e.clientX;
+      o < m && (o = m), o > i && (o = i), u.current && r.current && (u.current.style.width = `${o}px`, r.current.classList.add("opacity-100"));
+    },
+    [i, m]
+  ), p = l(() => {
+    f.current = !1, r.current && r.current.classList.remove("opacity-100"), document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", p);
+  }, [n]), R = l(
+    (e) => {
+      e.preventDefault(), e.stopPropagation(), f.current = !0, document.addEventListener("mousemove", n), document.addEventListener("mouseup", p);
+    },
+    [n, p]
+  ), t = s(
+    () => a.toArray(y),
+    [y]
+  ), h = s(
+    () => a.toArray(t).find(
+      (e) => v(e) && e.type === z
+    ),
+    [t]
+  ), A = s(
+    () => a.toArray(t).find(
+      (e) => v(e) && e.type === k
+    ),
+    [t]
+  ), N = s(
+    () => a.toArray(t).find(
+      (e) => v(e) && e.type === j
+    ),
+    [t]
+  );
+  return D(() => {
+    c && L(c);
+  }, [L, c]), /* @__PURE__ */ x(
+    "aside",
+    {
+      ref: u,
+      className: E(
+        V({
+          className: w,
+          theme: g
+        })
+      ),
+      children: [
+        h,
+        A,
+        N,
+        M && /* @__PURE__ */ C(
+          "div",
+          {
+            ref: r,
+            className: E(b({ theme: g })),
+            onMouseDown: R
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  I as Wrapper
+};

package/dist/components/Sidebar/components/index.d.ts

@@ -0,0 +1,15 @@
+export * from './Footer/Footer';
+export type * from './Footer/Footer.types';
+export * from './Logo/Logo';
+export type * from './Logo/Logo.types';
+export * from './Navigation/Navigation';
+export type * from './Navigation/Navigation.types';
+export * from './NavigationGroup/NavigationGroup';
+export type * from './NavigationGroup/NavigationGroup.types';
+export * from './NavigationOption/NavigationOption';
+export type * from './NavigationOption/NavigationOption.types';
+export * from './NavigationSeparator/NavigationSeparator';
+export type * from './NavigationSeparator/NavigationSeparator.types';
+export * from './NavigationTitle/NavigationTitle';
+export type * from './NavigationTitle/NavigationTitle.types';
+export * from './Wrapper/Wrapper';

package/dist/components/Sidebar/components/index.js

@@ -0,0 +1,18 @@
+import { Footer as t } from "./Footer/Footer.js";
+import { Logo as p } from "./Logo/Logo.js";
+import { Navigation as i } from "./Navigation/Navigation.js";
+import { NavigationGroup as m } from "./NavigationGroup/NavigationGroup.js";
+import { NavigationOption as g } from "./NavigationOption/NavigationOption.js";
+import { NavigationSeparator as v } from "./NavigationSeparator/NavigationSeparator.js";
+import { NavigationTitle as l } from "./NavigationTitle/NavigationTitle.js";
+import { Wrapper as F } from "./Wrapper/Wrapper.js";
+export {
+  t as Footer,
+  p as Logo,
+  i as Navigation,
+  m as NavigationGroup,
+  g as NavigationOption,
+  v as NavigationSeparator,
+  l as NavigationTitle,
+  F as Wrapper
+};

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ export * from './NumberInput/NumberInput';
 export * from './ProgressBar/ProgressBar';
 export * from './Radio/Radio';
 export * from './Range/Range';
+export * from './Sidebar/Sidebar';
 export * from './Slider/Slider';
 export * from './Switch/Switch';
 export * from './Tag/Tag';

package/dist/components/index.js

@@ -1,42 +1,56 @@
-import { AlertDialog as e } from "./AlertDialog/AlertDialog.js";
+import { AlertDialog as t } from "./AlertDialog/AlertDialog.js";
 import { Autocomplete as p } from "./Autocomplete/Autocomplete.js";
 import { Breadcrumb as x } from "./Breadcrumb/Breadcrumb.js";
 import { Button as a } from "./Button/Button.js";
-import { Card as d } from "./Card/Card.js";
-import { Checkbox as c } from "./Checkbox/Checkbox.js";
-import { Dropdown as i } from "./Dropdown/Dropdown.js";
-import { Input as T } from "./Input/Input.js";
-import { M as b } from "../Modal-L73dmnHv.js";
-import { NumberInput as B } from "./NumberInput/NumberInput.js";
-import { ProgressBar as h } from "./ProgressBar/ProgressBar.js";
-import { Radio as C } from "./Radio/Radio.js";
-import { Range as I } from "./Range/Range.js";
+import { Card as g } from "./Card/Card.js";
+import { Checkbox as d } from "./Checkbox/Checkbox.js";
+import { Dropdown as u } from "./Dropdown/Dropdown.js";
+import { Input as N } from "./Input/Input.js";
+import { M as T } from "../Modal-L73dmnHv.js";
+import { NumberInput as s } from "./NumberInput/NumberInput.js";
+import { ProgressBar as A } from "./ProgressBar/ProgressBar.js";
+import { Radio as h } from "./Radio/Radio.js";
+import { Range as C } from "./Range/Range.js";
+import { Sidebar as I } from "./Sidebar/Sidebar.js";
 import { Slider as R } from "./Slider/Slider.js";
-import { Switch as N } from "./Switch/Switch.js";
-import { Tag as j } from "./Tag/Tag.js";
-import { TagSelect as v } from "./TagSelect/TagSelect.js";
-import { TextArea as z } from "./TextArea/TextArea.js";
-import { Toast as F } from "./Toast/Toast.js";
+import { Switch as F } from "./Switch/Switch.js";
+import { Tag as L } from "./Tag/Tag.js";
+import { TagSelect as P } from "./TagSelect/TagSelect.js";
+import { TextArea as q } from "./TextArea/TextArea.js";
+import { Toast as z } from "./Toast/Toast.js";
 import { Tooltip as H } from "./Tooltip/Tooltip.js";
+import { Footer as K } from "./Sidebar/components/Footer/Footer.js";
+import { Logo as U } from "./Sidebar/components/Logo/Logo.js";
+import { Navigation as W } from "./Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as Y } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as _ } from "./Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as oo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
 export {
-  e as AlertDialog,
+  t as AlertDialog,
   p as Autocomplete,
   x as Breadcrumb,
   a as Button,
-  d as Card,
-  c as Checkbox,
-  i as Dropdown,
-  T as Input,
-  b as Modal,
-  B as NumberInput,
-  h as ProgressBar,
-  C as Radio,
-  I as Range,
+  g as Card,
+  d as Checkbox,
+  u as Dropdown,
+  K as Footer,
+  N as Input,
+  U as Logo,
+  T as Modal,
+  W as Navigation,
+  Y as NavigationGroup,
+  _ as NavigationOption,
+  oo as NavigationSeparator,
+  s as NumberInput,
+  A as ProgressBar,
+  h as Radio,
+  C as Range,
+  I as Sidebar,
   R as Slider,
-  N as Switch,
-  j as Tag,
-  v as TagSelect,
-  z as TextArea,
-  F as Toast,
+  F as Switch,
+  L as Tag,
+  P as TagSelect,
+  q as TextArea,
+  z as Toast,
   H as Tooltip
 };

package/dist/index.js

@@ -1,52 +1,66 @@
 import { AlertDialog as e } from "./components/AlertDialog/AlertDialog.js";
-import { Autocomplete as m } from "./components/Autocomplete/Autocomplete.js";
+import { Autocomplete as p } from "./components/Autocomplete/Autocomplete.js";
 import { Breadcrumb as x } from "./components/Breadcrumb/Breadcrumb.js";
 import { Button as a } from "./components/Button/Button.js";
-import { Card as l } from "./components/Card/Card.js";
-import { Checkbox as g } from "./components/Checkbox/Checkbox.js";
-import { Dropdown as d } from "./components/Dropdown/Dropdown.js";
+import { Card as g } from "./components/Card/Card.js";
+import { Checkbox as u } from "./components/Checkbox/Checkbox.js";
+import { Dropdown as T } from "./components/Dropdown/Dropdown.js";
 import { Input as s } from "./components/Input/Input.js";
 import { M as h } from "./Modal-L73dmnHv.js";
-import { NumberInput as A } from "./components/NumberInput/NumberInput.js";
-import { ProgressBar as C } from "./components/ProgressBar/ProgressBar.js";
-import { Radio as S } from "./components/Radio/Radio.js";
-import { Range as w } from "./components/Range/Range.js";
+import { NumberInput as N } from "./components/NumberInput/NumberInput.js";
+import { ProgressBar as b } from "./components/ProgressBar/ProgressBar.js";
+import { Radio as B } from "./components/Radio/Radio.js";
+import { Range as P } from "./components/Range/Range.js";
+import { Sidebar as w } from "./components/Sidebar/Sidebar.js";
 import { Slider as I } from "./components/Slider/Slider.js";
 import { Switch as R } from "./components/Switch/Switch.js";
-import { Tag as N } from "./components/Tag/Tag.js";
-import { TagSelect as q } from "./components/TagSelect/TagSelect.js";
-import { TextArea as z } from "./components/TextArea/TextArea.js";
-import { Toast as F } from "./components/Toast/Toast.js";
+import { Tag as G } from "./components/Tag/Tag.js";
+import { TagSelect as O } from "./components/TagSelect/TagSelect.js";
+import { TextArea as q } from "./components/TextArea/TextArea.js";
+import { Toast as z } from "./components/Toast/Toast.js";
 import { Tooltip as H } from "./components/Tooltip/Tooltip.js";
 import { ThemeContext as K } from "./contexts/theme.context.js";
-import { useTheme as O } from "./contexts/theme.hook.js";
-import { ThemeProvider as U } from "./contexts/theme.provider.js";
-import { useToggle as W } from "./hooks/useToggle.js";
-import { konstructPlugin as Y } from "./plugins/konstruct.js";
+import { useTheme as U } from "./contexts/theme.hook.js";
+import { ThemeProvider as W } from "./contexts/theme.provider.js";
+import { useToggle as Y } from "./hooks/useToggle.js";
+import { konstructPlugin as _ } from "./plugins/konstruct.js";
+import { Footer as oo } from "./components/Sidebar/components/Footer/Footer.js";
+import { Logo as eo } from "./components/Sidebar/components/Logo/Logo.js";
+import { Navigation as po } from "./components/Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as xo } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as ao } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as go } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
 export {
   e as AlertDialog,
-  m as Autocomplete,
+  p as Autocomplete,
   x as Breadcrumb,
   a as Button,
-  l as Card,
-  g as Checkbox,
-  d as Dropdown,
+  g as Card,
+  u as Checkbox,
+  T as Dropdown,
+  oo as Footer,
   s as Input,
+  eo as Logo,
   h as Modal,
-  A as NumberInput,
-  C as ProgressBar,
-  S as Radio,
-  w as Range,
+  po as Navigation,
+  xo as NavigationGroup,
+  ao as NavigationOption,
+  go as NavigationSeparator,
+  N as NumberInput,
+  b as ProgressBar,
+  B as Radio,
+  P as Range,
+  w as Sidebar,
   I as Slider,
   R as Switch,
-  N as Tag,
-  q as TagSelect,
-  z as TextArea,
+  G as Tag,
+  O as TagSelect,
+  q as TextArea,
   K as ThemeContext,
-  U as ThemeProvider,
-  F as Toast,
+  W as ThemeProvider,
+  z as Toast,
   H as Tooltip,
-  Y as konstructPlugin,
-  O as useTheme,
-  W as useToggle
+  _ as konstructPlugin,
+  U as useTheme,
+  Y as useToggle
 };