@konstructio/ui 0.0.10 → 0.0.12-alpha.0

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

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

package/dist/components/Button/Button.variants.js

@@ -1,5 +1,5 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const t = e(
+const a = e(
   [
     "border",
     "cursor-pointer",
@@ -15,7 +15,10 @@ const t = e(
     "justify-center",
     "rounded",
     "transition-colors",
-    "whitespace-nowrap"
+    "whitespace-nowrap",
+    "h-10",
+    "p-4",
+    "text-sm"
   ],
   {
     variants: {
@@ -29,7 +32,8 @@ const t = e(
           "hover:bg-red-700",
           "hover:border-red-700"
         ],
-        text: ["bg-transparent", "border-transparent", "text-slate-500"]
+        text: ["bg-transparent", "border-transparent", "text-slate-500"],
+        circle: ["rounded-full", "p-1"]
       },
       version: {
         default: "",
@@ -40,12 +44,13 @@ const t = e(
         colony: "",
         kubefirst: ""
       },
-      size: {
-        default: "h-10 p-4 text-sm"
-      },
       disabled: {
         true: ["text-zinc-500", "border-zinc-200", "bg-zinc-200"],
         false: ""
+      },
+      size: {
+        medium: "",
+        large: ""
       }
     },
     compoundVariants: [
@@ -185,17 +190,146 @@ const t = e(
         variant: "text",
         disabled: !0,
         class: ["bg-transparent", "border-transparent", "text-zinc-400"]
+      },
+      {
+        variant: "circle",
+        size: "medium",
+        theme: "kubefirst",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-kubefirst-primary/5",
+          "hover:text-kubefirst-primary",
+          "w-8",
+          "h-8",
+          "[&>svg]:w-5",
+          "[&>svg]:h-5"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "large",
+        theme: "kubefirst",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-kubefirst-primary/5",
+          "hover:text-kubefirst-primary",
+          "w-11",
+          "h-11",
+          "[&>svg]:w-6",
+          "[&>svg]:h-6"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "medium",
+        theme: "colony",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-colony-primary/5",
+          "hover:text-colony-primary",
+          "w-8",
+          "h-8",
+          "[&>svg]:w-5",
+          "[&>svg]:h-5"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "large",
+        theme: "colony",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-colony-primary/5",
+          "hover:text-colony-primary",
+          "w-11",
+          "h-11",
+          "[&>svg]:w-6",
+          "[&>svg]:h-6"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "medium",
+        theme: "civo",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-civo-primary/5",
+          "hover:text-civo-primary",
+          "w-8",
+          "h-8",
+          "[&>svg]:w-5",
+          "[&>svg]:h-5"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "large",
+        theme: "civo",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-civo-primary/5",
+          "hover:text-civo-primary",
+          "w-11",
+          "h-11",
+          "[&>svg]:w-6",
+          "[&>svg]:h-6"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "medium",
+        disabled: !0,
+        class: [
+          "text-slate-300",
+          "bg-transparent",
+          "border-transparent",
+          "w-8",
+          "h-8",
+          "[&>svg]:w-5",
+          "[&>svg]:h-5"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "large",
+        disabled: !0,
+        class: [
+          "text-slate-300",
+          "bg-transparent",
+          "border-transparent",
+          "w-11",
+          "h-11",
+          "[&>svg]:w-6",
+          "[&>svg]:h-6"
+        ]
       }
     ],
     defaultVariants: {
       variant: "primary",
       theme: "kubefirst",
       version: "default",
-      size: "default",
       disabled: !1
     }
   }
 );
 export {
-  t as buttonVariants
+  a as buttonVariants
 };

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { Footer, Logo, Navigation, NavigationGroup, NavigationOption, NavigationSeparator } from './components';
+import { SidebarChildrenProps, SidebarProps } from './Sidebar.types';
+declare const Sidebar: FC<SidebarProps> & SidebarChildrenProps;
+export { Footer, Logo, Navigation, NavigationGroup, NavigationOption, NavigationSeparator, Sidebar, };

package/dist/components/Sidebar/Sidebar.js

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import "../../contexts/theme.context.js";
+import "react";
+import { ThemeProvider as t } from "../../contexts/theme.provider.js";
+import { Footer as a } from "./components/Footer/Footer.js";
+import { Logo as m } from "./components/Logo/Logo.js";
+import { Navigation as p } from "./components/Navigation/Navigation.js";
+import { NavigationGroup as n } from "./components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as e } from "./components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as g } from "./components/NavigationSeparator/NavigationSeparator.js";
+import { Wrapper as f } from "./components/Wrapper/Wrapper.js";
+const o = (i) => /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(f, { ...i }) });
+o.Footer = a;
+o.Logo = m;
+o.Navigation = p;
+o.NavigationGroup = n;
+o.NavigationOption = e;
+o.NavigationSeparator = g;
+export {
+  a as Footer,
+  m as Logo,
+  p as Navigation,
+  n as NavigationGroup,
+  e as NavigationOption,
+  g as NavigationSeparator,
+  o as Sidebar
+};

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

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+import { FC, PropsWithChildren } from 'react';
+import { wrapperSiderbarVariants } from './Sidebar.variants';
+import { FooterProps, LogoProps, NavigationGroupProps, NavigationOptionProps, NavigationProps, NavigationSeparatorProps } from './components';
+export interface SidebarProps extends VariantProps<typeof wrapperSiderbarVariants>, PropsWithChildren {
+    wrapperClassName?: string;
+    minWith?: number;
+    maxWith?: number;
+    canResize?: boolean;
+}
+export type SidebarChildrenProps = {
+    Footer: FC<FooterProps>;
+    Logo: FC<LogoProps>;
+    Navigation: FC<NavigationProps>;
+    NavigationGroup: FC<NavigationGroupProps>;
+    NavigationOption: FC<NavigationOptionProps>;
+    NavigationSeparator: FC<NavigationSeparatorProps>;
+};

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

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1,57 @@
+import { c as a } from "../../index-BNmRGtA6.js";
+const r = a(
+  [
+    "duration-200",
+    "ease-linear",
+    "flex",
+    "flex-col",
+    "flex-shrink-0",
+    "group/sidebar",
+    "h-full",
+    "px-4",
+    "relative",
+    "transition-all",
+    "w-[256px]"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: ["bg-kubefirst-dark-blue-900"],
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), t = a(
+  [
+    "absolute",
+    "top-0",
+    "right-0",
+    "h-full",
+    "opacity-0",
+    "group-hover/sidebar:opacity-100",
+    "cursor-col-resize",
+    "w-[2px]",
+    "shadow",
+    "shadow-slate-200"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: ["bg-slate-200"],
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  t as dragVariants,
+  r as wrapperSiderbarVariants
+};

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

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

package/dist/components/Sidebar/components/Footer/Footer.js

@@ -0,0 +1,22 @@
+import { jsx as m } from "react/jsx-runtime";
+import "../../../../contexts/theme.context.js";
+import { useTheme as i } from "../../../../contexts/theme.hook.js";
+import "react";
+import "../../../../js.cookie-OLEfuq_g.js";
+import { cn as p } from "../../../../utils/index.js";
+import { footerVariants as s } from "./Footer.variants.js";
+const T = ({ theme: o, className: t, children: r }) => {
+  const { theme: e } = i();
+  return /* @__PURE__ */ m(
+    "footer",
+    {
+      className: p(
+        s({ theme: o ?? e, className: t })
+      ),
+      children: r
+    }
+  );
+};
+export {
+  T as Footer
+};

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

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { footerVariants } from './Footer.variants';
+export interface FooterProps extends PropsWithChildren, VariantProps<typeof footerVariants> {
+    className?: string;
+}

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

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1,19 @@
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const a = t(
+  ["p-2", "pb-5", "text-white", "flex", "flex-col", "gap-2"],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  a as footerVariants
+};

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

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

package/dist/components/Sidebar/components/Logo/Logo.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import "../../../../contexts/theme.context.js";
+import { useTheme as i } from "../../../../contexts/theme.hook.js";
+import "react";
+import "../../../../js.cookie-OLEfuq_g.js";
+import { cn as p } from "../../../../utils/index.js";
+import { logoVariants as s } from "./Logo.variants.js";
+const l = ({ children: o, theme: m, className: r }) => {
+  const { theme: t } = i();
+  return /* @__PURE__ */ e(
+    "header",
+    {
+      className: p(s({ theme: m ?? t, className: r })),
+      children: o
+    }
+  );
+};
+export {
+  l as Logo
+};

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

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { logoVariants } from './Logo.variants';
+export interface LogoProps extends PropsWithChildren, VariantProps<typeof logoVariants> {
+    className?: string;
+}

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

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1,45 @@
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const s = t(
+  [
+    "px-4",
+    "py-5",
+    "flex",
+    "flex-col",
+    "items-center",
+    "items-center",
+    "justify-center",
+    "gap-1",
+    "group",
+    "relative",
+    "mb-8",
+    "[&>span]:text-gray-100",
+    "[&>span]:text-xs",
+    "[&>span]:font-semibold",
+    "[&>span]:pl-14",
+    "[&>span]:-mt-2",
+    "[&>img]:pt-3",
+    "[&>*>span]:text-gray-100",
+    "[&>*>span]:text-xs",
+    "[&>*>span]:font-semibold",
+    "[&>*>span]:absolute",
+    "[&>*>span]:bottom-0",
+    "[&>*>span]:-mt-2",
+    "[&>*>img]:pt-3",
+    "cursor-pointer"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  s as logoVariants
+};

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

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

package/dist/components/Sidebar/components/Navigation/Navigation.js

@@ -0,0 +1,34 @@
+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 p } from "../../../../utils/index.js";
+import { NavigationGroup as e } from "../NavigationGroup/NavigationGroup.js";
+import { NavigationOption as v } from "../NavigationOption/NavigationOption.js";
+import { NavigationSeparator as g } from "../NavigationSeparator/NavigationSeparator.js";
+import { NavigationTitle as N } from "../NavigationTitle/NavigationTitle.js";
+import { navigationVariants as f } from "./Navigation.variants.js";
+const o = ({
+  className: i,
+  theme: t,
+  children: a
+}) => {
+  const { theme: r } = n();
+  return /* @__PURE__ */ m(
+    "nav",
+    {
+      className: p(
+        f({ theme: t ?? r, className: i })
+      ),
+      children: a
+    }
+  );
+};
+o.NavigationGroup = e;
+o.NavigationOption = v;
+o.NavigationSeparator = g;
+o.NavigationTitle = N;
+export {
+  o as Navigation
+};

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

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+import { FC, PropsWithChildren } from 'react';
+import { NavigationGroupProps } from '../NavigationGroup/NavigationGroup.types';
+import { NavigationOptionProps } from '../NavigationOption/NavigationOption.types';
+import { NavigationSeparatorProps } from '../NavigationSeparator/NavigationSeparator.types';
+import { NavigationTitleProps } from '../NavigationTitle/NavigationTitle.types';
+import { navigationVariants } from './Navigation.variants';
+export interface NavigationProps extends PropsWithChildren, VariantProps<typeof navigationVariants> {
+    className?: string;
+}
+export type NavigationChildrenProps = {
+    NavigationGroup: FC<NavigationGroupProps>;
+    NavigationOption: FC<NavigationOptionProps>;
+    NavigationSeparator: FC<NavigationSeparatorProps>;
+    NavigationTitle: FC<NavigationTitleProps>;
+};

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

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1,19 @@
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const e = t(
+  ["flex", "flex-1", "w-full", "flex-col"],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  e as navigationVariants
+};

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

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

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.js

@@ -0,0 +1,41 @@
+import { jsxs as p, Fragment as u, jsx as o } from "react/jsx-runtime";
+import { cn as l } from "../../../../utils/index.js";
+import { NavigationTitle as c } from "../NavigationTitle/NavigationTitle.js";
+import { navigationGroupsVariants as f } from "./NavigationGroup.variants.js";
+import "../../../../contexts/theme.context.js";
+import { useTheme as h } from "../../../../contexts/theme.hook.js";
+import "react";
+import "../../../../js.cookie-OLEfuq_g.js";
+const F = ({
+  children: t,
+  title: r,
+  className: m,
+  theme: e,
+  titleClassName: i,
+  isVisible: n = !0,
+  ...a
+}) => {
+  const { theme: s } = h();
+  return n ? /* @__PURE__ */ p(u, { children: [
+    r ? /* @__PURE__ */ o(
+      c,
+      {
+        title: r,
+        className: i,
+        ...a
+      }
+    ) : null,
+    /* @__PURE__ */ o(
+      "ul",
+      {
+        className: l(
+          f({ theme: e ?? s, className: m })
+        ),
+        children: t
+      }
+    )
+  ] }) : null;
+};
+export {
+  F as NavigationGroup
+};

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

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+import { HtmlHTMLAttributes, PropsWithChildren } from 'react';
+import { navigationGroupsVariants } from './NavigationGroup.variants';
+export interface NavigationGroupProps extends PropsWithChildren, VariantProps<typeof navigationGroupsVariants>, Pick<HtmlHTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
+    title?: string;
+    titleClassName?: string;
+    isVisible?: boolean;
+}

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

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1,16 @@
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const e = t(["flex", "flex-col"], {
+  variants: {
+    theme: {
+      colony: "",
+      kubefirst: "",
+      civo: ""
+    }
+  },
+  defaultVariants: {
+    theme: "kubefirst"
+  }
+});
+export {
+  e as navigationGroupsVariants
+};

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

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