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

package/dist/index.js

@@ -1,66 +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 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 N } from "./components/NumberInput/NumberInput.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 { 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 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 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";
+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 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,
-  g as Card,
-  u as Checkbox,
-  T as Dropdown,
-  oo as Footer,
-  s as Input,
-  eo as Logo,
-  h as Modal,
-  po as Navigation,
-  xo as NavigationGroup,
-  ao as NavigationOption,
-  go as NavigationSeparator,
-  N as NumberInput,
+  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,
+  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,
-  P as Range,
-  w as Sidebar,
-  I as Slider,
-  R as Switch,
-  G as Tag,
-  O as TagSelect,
-  q as TextArea,
-  K as ThemeContext,
-  W as ThemeProvider,
-  z as Toast,
-  H as Tooltip,
-  _ as konstructPlugin,
-  U as useTheme,
-  Y as useToggle
+  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",
+  "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(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 = _();
-  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 = 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
 };

package/dist/plugins/utils/animation.styles.js

@@ -0,0 +1,162 @@
+function i(a) {
+  return Object.fromEntries(
+    Object.entries(a).filter(([e]) => e !== "DEFAULT")
+  );
+}
+const r = ({
+  addUtilities: a,
+  matchUtilities: e,
+  theme: n
+}) => {
+  a({
+    "@keyframes enter": n("keyframes.enter"),
+    "@keyframes exit": n("keyframes.exit"),
+    ".animate-in": {
+      animationName: "enter",
+      animationDuration: n("animationDuration.DEFAULT"),
+      "--tw-enter-opacity": "initial",
+      "--tw-enter-scale": "initial",
+      "--tw-enter-rotate": "initial",
+      "--tw-enter-translate-x": "initial",
+      "--tw-enter-translate-y": "initial"
+    },
+    ".animate-out": {
+      animationName: "exit",
+      animationDuration: n("animationDuration.DEFAULT"),
+      "--tw-exit-opacity": "initial",
+      "--tw-exit-scale": "initial",
+      "--tw-exit-rotate": "initial",
+      "--tw-exit-translate-x": "initial",
+      "--tw-exit-translate-y": "initial"
+    }
+  }), e(
+    {
+      "fade-in": (t) => ({ "--tw-enter-opacity": t }),
+      "fade-out": (t) => ({ "--tw-exit-opacity": t })
+    },
+    { values: n("animationOpacity") }
+  ), e(
+    {
+      "zoom-in": (t) => ({ "--tw-enter-scale": t }),
+      "zoom-out": (t) => ({ "--tw-exit-scale": t })
+    },
+    { values: n("animationScale") }
+  ), e(
+    {
+      "spin-in": (t) => ({ "--tw-enter-rotate": t }),
+      "spin-out": (t) => ({ "--tw-exit-rotate": t })
+    },
+    { values: n("animationRotate") }
+  ), e(
+    {
+      "slide-in-from-top": (t) => ({
+        "--tw-enter-translate-y": `-${t}`
+      }),
+      "slide-in-from-bottom": (t) => ({
+        "--tw-enter-translate-y": t
+      }),
+      "slide-in-from-left": (t) => ({
+        "--tw-enter-translate-x": `-${t}`
+      }),
+      "slide-in-from-right": (t) => ({
+        "--tw-enter-translate-x": t
+      }),
+      "slide-out-to-top": (t) => ({
+        "--tw-exit-translate-y": `-${t}`
+      }),
+      "slide-out-to-bottom": (t) => ({
+        "--tw-exit-translate-y": t
+      }),
+      "slide-out-to-left": (t) => ({
+        "--tw-exit-translate-x": `-${t}`
+      }),
+      "slide-out-to-right": (t) => ({
+        "--tw-exit-translate-x": t
+      })
+    },
+    { values: n("animationTranslate") }
+  ), e(
+    { duration: (t) => ({ animationDuration: t }) },
+    { values: i(n("animationDuration")) }
+  ), e(
+    { delay: (t) => ({ animationDelay: t }) },
+    { values: n("animationDelay") }
+  ), e(
+    { ease: (t) => ({ animationTimingFunction: t }) },
+    { values: i(n("animationTimingFunction")) }
+  ), a({
+    ".running": { animationPlayState: "running" },
+    ".paused": { animationPlayState: "paused" }
+  }), e(
+    { "fill-mode": (t) => ({ animationFillMode: t }) },
+    { values: n("animationFillMode") }
+  ), e(
+    { direction: (t) => ({ animationDirection: t }) },
+    { values: n("animationDirection") }
+  ), e(
+    { repeat: (t) => ({ animationIterationCount: t }) },
+    { values: n("animationRepeat") }
+  );
+}, o = {
+  animationDelay: ({ theme: a }) => ({
+    ...a("transitionDelay")
+  }),
+  animationDuration: ({ theme: a }) => ({
+    0: "0ms",
+    ...a("transitionDuration")
+  }),
+  animationTimingFunction: ({ theme: a }) => ({
+    ...a("transitionTimingFunction")
+  }),
+  animationFillMode: {
+    none: "none",
+    forwards: "forwards",
+    backwards: "backwards",
+    both: "both"
+  },
+  animationDirection: {
+    normal: "normal",
+    reverse: "reverse",
+    alternate: "alternate",
+    "alternate-reverse": "alternate-reverse"
+  },
+  animationOpacity: ({ theme: a }) => ({
+    DEFAULT: 0,
+    ...a("opacity")
+  }),
+  animationTranslate: ({ theme: a }) => ({
+    DEFAULT: "100%",
+    ...a("translate")
+  }),
+  animationScale: ({ theme: a }) => ({
+    DEFAULT: 0,
+    ...a("scale")
+  }),
+  animationRotate: ({ theme: a }) => ({
+    DEFAULT: "30deg",
+    ...a("rotate")
+  }),
+  animationRepeat: {
+    0: "0",
+    1: "1",
+    infinite: "infinite"
+  },
+  keyframes: {
+    enter: {
+      from: {
+        opacity: "var(--tw-enter-opacity, 1)",
+        transform: "translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))"
+      }
+    },
+    exit: {
+      to: {
+        opacity: "var(--tw-exit-opacity, 1)",
+        transform: "translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))"
+      }
+    }
+  }
+};
+export {
+  r as addAnimationStyles,
+  o as defaultAnimationThemeValues
+};

package/dist/plugins/utils/index.js

@@ -0,0 +1,7 @@
+import { addAnimationStyles as e, defaultAnimationThemeValues as r } from "./animation.styles.js";
+import { konstructColors as m } from "./colors.js";
+export {
+  e as addAnimationStyles,
+  r as defaultAnimationThemeValues,
+  m as konstructColors
+};