@konstructio/ui 0.0.12-alpha.1 → 0.0.12-alpha.2

package/dist/index-B_6_jmOO.js

@@ -0,0 +1,68 @@
+import * as i from "react";
+import { jsx as c, Fragment as m } from "react/jsx-runtime";
+function p(e, r) {
+  if (typeof e == "function")
+    return e(r);
+  e != null && (e.current = r);
+}
+function d(...e) {
+  return (r) => {
+    let n = !1;
+    const o = e.map((t) => {
+      const l = p(t, r);
+      return !n && typeof l == "function" && (n = !0), l;
+    });
+    if (n)
+      return () => {
+        for (let t = 0; t < o.length; t++) {
+          const l = o[t];
+          typeof l == "function" ? l() : p(e[t], null);
+        }
+      };
+  };
+}
+function S(...e) {
+  return i.useCallback(d(...e), e);
+}
+var y = i.forwardRef((e, r) => {
+  const { children: n, ...o } = e, t = i.Children.toArray(n), l = t.find(h);
+  if (l) {
+    const s = l.props.children, a = t.map((f) => f === l ? i.Children.count(s) > 1 ? i.Children.only(null) : i.isValidElement(s) ? s.props.children : null : f);
+    return /* @__PURE__ */ c(u, { ...o, ref: r, children: i.isValidElement(s) ? i.cloneElement(s, void 0, a) : null });
+  }
+  return /* @__PURE__ */ c(u, { ...o, ref: r, children: n });
+});
+y.displayName = "Slot";
+var u = i.forwardRef((e, r) => {
+  const { children: n, ...o } = e;
+  if (i.isValidElement(n)) {
+    const t = R(n), l = C(o, n.props);
+    return n.type !== i.Fragment && (l.ref = r ? d(r, t) : t), i.cloneElement(n, l);
+  }
+  return i.Children.count(n) > 1 ? i.Children.only(null) : null;
+});
+u.displayName = "SlotClone";
+var g = ({ children: e }) => /* @__PURE__ */ c(m, { children: e });
+function h(e) {
+  return i.isValidElement(e) && e.type === g;
+}
+function C(e, r) {
+  const n = { ...r };
+  for (const o in r) {
+    const t = e[o], l = r[o];
+    /^on[A-Z]/.test(o) ? t && l ? n[o] = (...a) => {
+      l(...a), t(...a);
+    } : t && (n[o] = t) : o === "style" ? n[o] = { ...t, ...l } : o === "className" && (n[o] = [t, l].filter(Boolean).join(" "));
+  }
+  return { ...e, ...n };
+}
+function R(e) {
+  var o, t;
+  let r = (o = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : o.get, n = r && "isReactWarning" in r && r.isReactWarning;
+  return n ? e.ref : (r = (t = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : t.get, n = r && "isReactWarning" in r && r.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
+}
+export {
+  y as S,
+  g as a,
+  S as u
+};

package/dist/{index-BBjak_0p.js → index-BbsJ0VIJ.js}

@@ -1,6 +1,6 @@
 import n from "react";
-import { c as O } from "./index-8vgf-x5i.js";
-import { u as I, S as x } from "./index-DoOsnuB6.js";
+import { c as O } from "./index-Cva-e5M4.js";
+import { u as I, S as x } from "./index-B_6_jmOO.js";
 import { jsx as m } from "react/jsx-runtime";
 function L(s) {
   const f = s + "CollectionProvider", [A, N] = O(f), [_, a] = A(

package/dist/{index-CJsYodgi.js → index-C6WtlN_F.js}

@@ -1,9 +1,9 @@
 import * as d from "react";
-import { c as ae, a as ce, d as _ } from "./index-8vgf-x5i.js";
-import { u as K } from "./index-DoOsnuB6.js";
-import { a as le, u as de } from "./index-BxeV34ij.js";
-import { P as T } from "./index-1GLoikpT.js";
-import { c as ue } from "./index-BBjak_0p.js";
+import { a as ae, c as ce, b as _ } from "./index-Cva-e5M4.js";
+import { u as K } from "./index-B_6_jmOO.js";
+import { a as le, u as de } from "./index-4ecjw_Aj.js";
+import { P as T } from "./index-BTeAm7mx.js";
+import { c as ue } from "./index-BbsJ0VIJ.js";
 import { jsx as g, jsxs as fe } from "react/jsx-runtime";
 function $(e, [t, n]) {
   return Math.min(n, Math.max(t, e));
@@ -18,7 +18,7 @@ var j = ["PageUp", "PageDown"], X = ["ArrowUp", "ArrowDown", "ArrowLeft", "Arrow
   "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
   "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
   "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
-}, M = "Slider", [N, he, Se] = ue(M), [W, ke] = ae(M, [
+}, M = "Slider", [N, he, Se] = ue(M), [W, ke] = ce(M, [
   Se
 ]), [ge, B] = W(M), q = d.forwardRef(
   (e, t) => {
@@ -39,7 +39,7 @@ var j = ["PageUp", "PageDown"], X = ["ArrowUp", "ArrowDown", "ArrowLeft", "Arrow
       inverted: v = !1,
       form: P,
       ...S
-    } = e, p = d.useRef(/* @__PURE__ */ new Set()), f = d.useRef(0), w = r === "horizontal" ? ve : we, [h = [], A] = ce({
+    } = e, p = d.useRef(/* @__PURE__ */ new Set()), f = d.useRef(0), w = r === "horizontal" ? ve : we, [h = [], A] = ae({
       prop: x,
       defaultProp: m,
       onChange: (b) => {
@@ -418,6 +418,6 @@ var He = q, ze = te, Ne = ne, Oe = oe;
 export {
   He as R,
   ze as T,
-  Oe as a,
-  Ne as b
+  Ne as a,
+  Oe as b
 };

package/dist/{index-8vgf-x5i.js → index-Cva-e5M4.js}

@@ -110,9 +110,9 @@ function $({
 }
 export {
   j as a,
-  P as b,
+  M as b,
   y as c,
-  M as d,
+  P as d,
   _ as e,
   R as u
 };

package/dist/{index-D4Q2rMby.js → index-Dj1pom3_.js}

@@ -1,6 +1,6 @@
 import * as a from "react";
-import { u as T } from "./index-DoOsnuB6.js";
-import { u as A } from "./index-8vgf-x5i.js";
+import { u as T } from "./index-B_6_jmOO.js";
+import { u as A } from "./index-Cva-e5M4.js";
 function E(n, e) {
   return a.useReducer((r, t) => e[r][t] ?? r, n);
 }

package/dist/{index-KEdwcThH.js → index-Z1voPZOH.js}

@@ -1,5 +1,5 @@
 import * as e from "react";
-import { P as o } from "./index-1GLoikpT.js";
+import { P as o } from "./index-BTeAm7mx.js";
 import { jsx as t } from "react/jsx-runtime";
 var d = "VisuallyHidden", a = e.forwardRef(
   (r, i) => /* @__PURE__ */ t(

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { Config } from 'tailwindcss/types/config';
 import { Context } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { HtmlHTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
@@ -14,6 +15,8 @@ import { RefAttributes } from 'react';
 import { SliderProps } from '@radix-ui/react-slider';
 import { VariantProps } from 'class-variance-authority';
 
+export declare const Alert: FC<AlertProps>;
+
 export declare const AlertDialog: FC<AlertDialogProps>;
 
 declare interface AlertDialogProps extends PropsWithChildren, VariantProps<typeof buttonAlertDialogVariants> {
@@ -29,6 +32,19 @@ declare interface AlertDialogProps extends PropsWithChildren, VariantProps<typeo
     onConfirm?: () => void;
 }
 
+declare interface AlertProps extends VariantProps<typeof alertVariants> {
+    dismissible?: boolean;
+    content: string | ReactNode;
+    isVisible?: boolean;
+    showCloseButton?: boolean;
+}
+
+declare const alertVariants: (props?: ({
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+    type?: "sucess" | "info" | "warning" | "danger" | null | undefined;
+    isVisible?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const Autocomplete: ForwardRefExoticComponent<AutocompleteProps & RefAttributes<HTMLInputElement>>;
 
 declare interface AutocompleteProps extends VariantProps<typeof autocompleteVariants> {
@@ -73,7 +89,7 @@ declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "danger" | "text" | "circle" | null | undefined;
+    variant?: "danger" | "circle" | "text" | "primary" | "secondary" | null | undefined;
     version?: "default" | "alternate" | null | undefined;
     theme?: "kubefirst" | "colony" | "civo" | null | undefined;
     disabled?: boolean | null | undefined;
@@ -114,6 +130,8 @@ declare const checkboxVariants: (props?: ({
     checked?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Divider: FunctionComponent<HTMLAttributes<HTMLDivElement>>;
+
 export declare const Dropdown: FC<DropdownProps>;
 
 declare interface DropdownProps extends VariantProps<typeof dropdownVariants> {
@@ -149,7 +167,7 @@ declare interface InputProps extends InputHTMLAttributes<HTMLInputElement>, Vari
 }
 
 declare const inputVariants: (props?: ({
-    variant?: "default" | "error" | null | undefined;
+    variant?: "error" | "default" | null | undefined;
     theme?: "kubefirst" | "colony" | "civo" | null | undefined;
 } & ClassProp) | undefined) => string;
 
@@ -158,6 +176,16 @@ export declare const konstructPlugin: {
     config?: Partial<Config>;
 };
 
+export declare const Loading: FunctionComponent<LoadingProps>;
+
+declare interface LoadingProps extends InputHTMLAttributes<SVGSVGElement>, VariantProps<typeof loadingVariants> {
+}
+
+declare const loadingVariants: (props?: ({
+    variant?: "default" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const Logo: FC<LogoProps>;
 
 declare interface LogoProps extends PropsWithChildren, VariantProps<typeof logoVariants> {
@@ -511,6 +539,17 @@ declare const tooltipVariants: (props?: ({
     position?: "left" | "right" | "top" | "bottom" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Typography: FunctionComponent<TypographyProps>;
+
+declare interface TypographyProps extends InputHTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {
+    children: React.ReactNode;
+}
+
+declare const typographyVariants: (props?: ({
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "tooltip" | "subtitle1" | "subtitle2" | "subtitle3" | "labelLarge" | "labelMedium" | "labelSmall" | "buttonSmall" | "body1" | "body2" | "body3" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const useTheme: () => ThemeProps;
 
 export declare const useToggle: (initialState?: boolean) => [boolean, (value?: boolean) => void];

package/dist/index.js

@@ -1,72 +1,80 @@
-import { AlertDialog as e } from "./components/AlertDialog/AlertDialog.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 d } from "./components/Card/Card.js";
-import { Checkbox as n } from "./components/Checkbox/Checkbox.js";
-import { Dropdown as l } from "./components/Dropdown/Dropdown.js";
-import { Input as s } from "./components/Input/Input.js";
-import { M as h } from "./Modal-W2GbkC_F.js";
-import { NumberInput as C } from "./components/NumberInput/NumberInput.js";
-import { ProgressBar as R } from "./components/ProgressBar/ProgressBar.js";
-import { Radio as b } from "./components/Radio/Radio.js";
-import { RadioCard as B } from "./components/RadioCard/RadioCard.js";
-import { RadioCardGroup as P } from "./components/RadioCardGroup/RadioCardGroup.js";
-import { RadioGroup as w } from "./components/RadioGroup/RadioGroup.js";
-import { Range as I } from "./components/Range/Range.js";
+import { Alert as e } from "./components/Alert/Alert.js";
+import { AlertDialog as p } from "./components/AlertDialog/AlertDialog.js";
+import { Autocomplete as x } from "./components/Autocomplete/Autocomplete.js";
+import { Breadcrumb as a } from "./components/Breadcrumb/Breadcrumb.js";
+import { Button as d } from "./components/Button/Button.js";
+import { Card as n } from "./components/Card/Card.js";
+import { Checkbox as l } from "./components/Checkbox/Checkbox.js";
+import { Dropdown as s } from "./components/Dropdown/Dropdown.js";
+import { Input as h } from "./components/Input/Input.js";
+import { M as C } from "./Modal-DZUwNzSW.js";
+import { NumberInput as R } from "./components/NumberInput/NumberInput.js";
+import { ProgressBar as b } from "./components/ProgressBar/ProgressBar.js";
+import { Radio as B } from "./components/Radio/Radio.js";
+import { RadioCard as G } from "./components/RadioCard/RadioCard.js";
+import { RadioCardGroup as k } from "./components/RadioCardGroup/RadioCardGroup.js";
+import { RadioGroup as y } from "./components/RadioGroup/RadioGroup.js";
+import { Range as L } from "./components/Range/Range.js";
 import { Footer as F } from "./components/Sidebar/components/Footer/Footer.js";
-import { Logo as O } from "./components/Sidebar/components/Logo/Logo.js";
-import { Navigation as q } from "./components/Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as z } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as H } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as K } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Sidebar as U } from "./components/Sidebar/Sidebar.js";
-import { Slider as W } from "./components/Slider/Slider.js";
-import { Switch as Y } from "./components/Switch/Switch.js";
-import { Tag as _ } from "./components/Tag/Tag.js";
-import { TagSelect as oo } from "./components/TagSelect/TagSelect.js";
-import { TextArea as eo } from "./components/TextArea/TextArea.js";
-import { Toast as po } from "./components/Toast/Toast.js";
-import { Tooltip as xo } from "./components/Tooltip/Tooltip.js";
-import { ThemeContext as ao } from "./contexts/theme.context.js";
-import { useTheme as go } from "./contexts/theme.hook.js";
-import { ThemeProvider as uo } from "./contexts/theme.provider.js";
-import { useToggle as To } from "./hooks/useToggle.js";
-import { konstructPlugin as co } from "./plugins/konstruct.js";
+import { Logo as j } from "./components/Sidebar/components/Logo/Logo.js";
+import { Navigation as z } from "./components/Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as H } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as K } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as U } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Sidebar as W } from "./components/Sidebar/Sidebar.js";
+import { Slider as Y } from "./components/Slider/Slider.js";
+import { Switch as _ } from "./components/Switch/Switch.js";
+import { Tag as oo } from "./components/Tag/Tag.js";
+import { TagSelect as eo } from "./components/TagSelect/TagSelect.js";
+import { TextArea as po } from "./components/TextArea/TextArea.js";
+import { Toast as xo } from "./components/Toast/Toast.js";
+import { Tooltip as ao } from "./components/Tooltip/Tooltip.js";
+import { Loading as go } from "./components/Loading/Loading.js";
+import { Typography as uo } from "./components/Typography/Typography.js";
+import { Divider as To } from "./components/Divider/Divider.js";
+import { ThemeContext as co } from "./contexts/theme.context.js";
+import { useTheme as vo } from "./contexts/theme.hook.js";
+import { ThemeProvider as No } from "./contexts/theme.provider.js";
+import { useToggle as So } from "./hooks/useToggle.js";
+import { konstructPlugin as Ao } from "./plugins/konstruct.js";
 export {
-  e as AlertDialog,
-  p as Autocomplete,
-  x as Breadcrumb,
-  a as Button,
-  d as Card,
-  n as Checkbox,
-  l as Dropdown,
+  e as Alert,
+  p as AlertDialog,
+  x as Autocomplete,
+  a as Breadcrumb,
+  d as Button,
+  n as Card,
+  l as Checkbox,
+  To as Divider,
+  s as Dropdown,
   F as Footer,
-  s as Input,
-  O as Logo,
-  h as Modal,
-  q as Navigation,
-  z as NavigationGroup,
-  H as NavigationOption,
-  K as NavigationSeparator,
-  C as NumberInput,
-  R as ProgressBar,
-  b as Radio,
-  B as RadioCard,
-  P as RadioCardGroup,
-  w as RadioGroup,
-  I as Range,
-  U as Sidebar,
-  W as Slider,
-  Y as Switch,
-  _ as Tag,
-  oo as TagSelect,
-  eo as TextArea,
-  ao as ThemeContext,
-  uo as ThemeProvider,
-  po as Toast,
-  xo as Tooltip,
-  co as konstructPlugin,
-  go as useTheme,
-  To as useToggle
+  h as Input,
+  go as Loading,
+  j as Logo,
+  C as Modal,
+  z as Navigation,
+  H as NavigationGroup,
+  K as NavigationOption,
+  U as NavigationSeparator,
+  R as NumberInput,
+  b as ProgressBar,
+  B as Radio,
+  G as RadioCard,
+  k as RadioCardGroup,
+  y as RadioGroup,
+  L as Range,
+  W as Sidebar,
+  Y as Slider,
+  _ as Switch,
+  oo as Tag,
+  eo as TagSelect,
+  po as TextArea,
+  co as ThemeContext,
+  No as ThemeProvider,
+  xo as Toast,
+  ao as Tooltip,
+  uo as Typography,
+  Ao as konstructPlugin,
+  vo as useTheme,
+  So as useToggle
 };

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.0.12-alpha.0",
+  "version": "0.0.12-alpha.1",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -45,7 +45,6 @@
     "check:types": "tsc -p tsconfig.json",
     "ci": "npm run build && npm run check:prettier && vitest run",
     "deps:update": "npx npm-check-updates --interactive --format group",
-    "dev": "vite",
     "format:prettier": "prettier lib --write './**/*.{js,jsx,ts,tsx}' --config ./.prettierrc",
     "lint": "eslint lib --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prepare": "husky",
@@ -56,18 +55,18 @@
     "test:watch": "vitest dev"
   },
   "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.5",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-toast": "^1.2.5",
-    "@radix-ui/react-visually-hidden": "^1.1.1",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-visually-hidden": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "js-cookie": "^3.0.5",
     "react-feather": "^2.0.10",
-    "react-focus-lock": "^2.13.5",
+    "react-focus-lock": "^2.13.6",
     "react-remove-scroll": "^2.6.3",
     "tailwind-merge": "^3.0.1"
   },
@@ -101,27 +100,27 @@
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.1",
-    "@storybook/addon-docs": "^8.5.3",
-    "@storybook/addon-essentials": "^8.5.3",
-    "@storybook/addon-interactions": "^8.5.3",
-    "@storybook/addon-links": "^8.5.3",
+    "@storybook/addon-docs": "^8.5.6",
+    "@storybook/addon-essentials": "^8.5.6",
+    "@storybook/addon-interactions": "^8.5.6",
+    "@storybook/addon-links": "^8.5.6",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/blocks": "^8.5.3",
-    "@storybook/react": "^8.5.3",
-    "@storybook/react-vite": "^8.5.3",
-    "@storybook/test": "^8.5.3",
+    "@storybook/blocks": "^8.5.6",
+    "@storybook/react": "^8.5.6",
+    "@storybook/react-vite": "^8.5.6",
+    "@storybook/test": "^8.5.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.15",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.23.0",
-    "@typescript-eslint/parser": "^8.23.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.24.1",
+    "@typescript-eslint/parser": "^8.24.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/coverage-v8": "^3.0.6",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -133,18 +132,18 @@
     "jest-axe": "^9.0.0",
     "jsdom": "^26.0.0",
     "lodash": "^4.17.21",
-    "postcss": "^8.5.1",
-    "prettier": "^3.4.2",
+    "postcss": "^8.5.2",
+    "prettier": "^3.5.1",
     "rimraf": "^6.0.1",
-    "storybook": "^8.5.3",
+    "storybook": "^8.5.6",
     "tailwindcss": "^3.4.17",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.3",
-    "vite": "^6.0.11",
+    "vite": "^6.1.0",
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-lib-inject-css": "^2.2.1",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.5"
+    "vitest": "^3.0.6"
   }
 }

package/dist/plugins/konstruct.js

@@ -1,14 +1,15 @@
-import { g } from "../_commonjsHelpers-C6fGbg64.js";
-import { konstructColors as p } from "./utils/colors.js";
-var a = {}, l = {}, d;
-function m() {
-  return d || (d = 1, function(e) {
+import { g as m } from "../_commonjsHelpers-C6fGbg64.js";
+import { addAnimationStyles as p, defaultAnimationThemeValues as c } from "./utils/animation.styles.js";
+import { konstructColors as _ } from "./utils/colors.js";
+var o = {}, l = {}, s;
+function P() {
+  return s || (s = 1, function(e) {
     Object.defineProperty(e, "__esModule", {
       value: !0
     }), Object.defineProperty(e, "default", {
       enumerable: !0,
       get: function() {
-        return u;
+        return i;
       }
     });
     function n(r, t) {
@@ -18,21 +19,21 @@ function m() {
       };
     }
     n.withOptions = function(r, t = () => ({})) {
-      const i = function(o) {
+      const u = function(a) {
         return {
-          __options: o,
-          handler: r(o),
-          config: t(o)
+          __options: a,
+          handler: r(a),
+          config: t(a)
         };
       };
-      return i.__isOptionsFunction = !0, i.__pluginFunction = r, i.__configFunction = t, i;
+      return u.__isOptionsFunction = !0, u.__pluginFunction = r, u.__configFunction = t, u;
     };
-    const u = n;
+    const i = n;
   }(l)), l;
 }
-var s;
-function _() {
-  return s || (s = 1, function(e) {
+var f;
+function v() {
+  return f || (f = 1, function(e) {
     Object.defineProperty(e, "__esModule", {
       value: !0
     }), Object.defineProperty(e, "default", {
@@ -41,36 +42,37 @@ function _() {
         return r;
       }
     });
-    const n = /* @__PURE__ */ u(/* @__PURE__ */ m());
-    function u(t) {
+    const n = /* @__PURE__ */ i(/* @__PURE__ */ P());
+    function i(t) {
       return t && t.__esModule ? t : {
         default: t
       };
     }
     const r = n.default;
-  }(a)), a;
+  }(o)), o;
 }
-var c, f;
-function P() {
-  if (f) return c;
-  f = 1;
-  let e = /* @__PURE__ */ _();
-  return c = (e.__esModule ? e : { default: e }).default, c;
+var d, g;
+function b() {
+  if (g) return d;
+  g = 1;
+  let e = /* @__PURE__ */ v();
+  return d = (e.__esModule ? e : { default: e }).default, d;
 }
-var v = /* @__PURE__ */ P();
-const b = /* @__PURE__ */ g(v), w = b(
-  function({ addBase: e }) {
+var h = /* @__PURE__ */ b();
+const k = /* @__PURE__ */ m(h), q = k(
+  function({ addBase: e, addUtilities: n, matchUtilities: i, theme: r }) {
     e({
       ":root": {
         "--viewport-padding": "25px"
       }
-    });
+    }), p({ addUtilities: n, matchUtilities: i, theme: r });
   },
   {
     theme: {
       extend: {
-        colors: { ...p },
+        colors: { ..._ },
         viewportPadding: "",
+        ...c,
         backgroundImage: {
           "kubefirst-gradient": "linear-gradient(90deg, #81E2B4, #8851C8)"
         },
@@ -104,12 +106,13 @@ const b = /* @__PURE__ */ g(v), w = b(
             to: {
               transform: "translateX(calc(100% + var(--viewport-padding)))"
             }
-          }
+          },
+          ...c.keyframes
         }
       }
     }
   }
 );
 export {
-  w as konstructPlugin
+  q as konstructPlugin
 };