@krrli/cm-designsystem 1.32.0 → 1.32.2

package/dist/components/modal/Modal.js

@@ -1,62 +1,78 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import React from "react";
 import { tv } from "tailwind-variants";
-import { Cancel } from "../icons/generated";
-import { Heading } from "../typography/Heading";
+import { Heading } from "../typography/Heading.js";
+import { Cancel } from "../icons/generated/Cancel.js";
 const modalStyles = tv({
-    slots: {
-        overlay: ["fixed", "inset-0", "bg-black/20"],
-        content: [
-            "fixed",
-            "top-1/2",
-            "left-1/2",
-            "w-123",
-            "-translate-x-1/2",
-            "-translate-y-1/2",
-            "rounded-2xl",
-            "bg-white",
-        ],
-        title: [
-            "flex",
-            "justify-between",
-            "rounded-t-2xl",
-            "bg-violet-600",
-            "pt-6",
-            "pr-8",
-            "pb-6",
-            "pl-8",
-            "text-white",
-        ],
-        container: ["flex", "flex-col", "items-center", "gap-12", "p-8"],
-        actions: ["flex", "items-center", "gap-4", "w-full"],
-    },
+  slots: {
+    overlay: ["fixed", "inset-0", "bg-black/20"],
+    content: [
+      "fixed",
+      "top-1/2",
+      "left-1/2",
+      "w-123",
+      "-translate-x-1/2",
+      "-translate-y-1/2",
+      "rounded-2xl",
+      "bg-white"
+    ],
+    title: [
+      "flex",
+      "justify-between",
+      "rounded-t-2xl",
+      "bg-violet-600",
+      "pt-6",
+      "pr-8",
+      "pb-6",
+      "pl-8",
+      "text-white"
+    ],
+    container: ["flex", "flex-col", "items-center", "gap-12", "p-8"],
+    actions: ["flex", "items-center", "gap-4", "w-full"]
+  }
 });
-export const Modal = (props) => {
-    let modalBody = null;
-    let modalActions = null;
-    React.Children.forEach(props.children, (child) => {
-        if (!React.isValidElement(child))
-            return;
-        switch (child.type) {
-            case ModalBody:
-                modalBody = child;
-                break;
-            case ModalActions:
-                modalActions = child;
-                break;
-        }
-    });
-    const { overlay, content, title, container, actions } = modalStyles(props);
-    return (_jsx(RadixDialog.Root, { open: props.open, onOpenChange: props.onOpenChange, children: _jsxs(RadixDialog.Portal, { children: [_jsx(RadixDialog.Overlay, { className: overlay() }), _jsxs(RadixDialog.Content, { className: content(), children: [_jsxs(RadixDialog.Title, { className: title(), children: [_jsx(Heading, { as: "span", size: "3", children: props.title }), _jsx(RadixDialog.Close, { children: _jsx(Cancel, {}) })] }), _jsxs("div", { className: container(), children: [modalBody, _jsx("div", { className: actions(), children: modalActions })] })] })] }) }));
+const Modal = (props) => {
+  let modalBody = null;
+  let modalActions = null;
+  React.Children.forEach(props.children, (child) => {
+    if (!React.isValidElement(child)) return;
+    switch (child.type) {
+      case ModalBody:
+        modalBody = child;
+        break;
+      case ModalActions:
+        modalActions = child;
+        break;
+    }
+  });
+  const { overlay, content, title, container, actions } = modalStyles(props);
+  return /* @__PURE__ */ jsx(RadixDialog.Root, { open: props.open, onOpenChange: props.onOpenChange, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
+    /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: overlay() }),
+    /* @__PURE__ */ jsxs(RadixDialog.Content, { className: content(), children: [
+      /* @__PURE__ */ jsxs(RadixDialog.Title, { className: title(), children: [
+        /* @__PURE__ */ jsx(Heading, { as: "span", size: "3", children: props.title }),
+        /* @__PURE__ */ jsx(RadixDialog.Close, { children: /* @__PURE__ */ jsx(Cancel, {}) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: container(), children: [
+        modalBody,
+        /* @__PURE__ */ jsx("div", { className: actions(), children: modalActions })
+      ] })
+    ] })
+  ] }) });
 };
 ModalBody.displayName = "ModalBody";
-export function ModalBody({ children }) {
-    return children;
+function ModalBody({ children }) {
+  return children;
 }
 ModalActions.displayName = "ModalActions";
-export function ModalActions({ children }) {
-    return children;
+function ModalActions({ children }) {
+  return children;
 }
 Modal.Body = ModalBody;
 Modal.Actions = ModalActions;
+export {
+  Modal,
+  ModalActions,
+  ModalBody
+};

package/dist/components/navi-button/NaviButton.js

@@ -1,34 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { cn, tv } from "tailwind-variants";
-import { AccessibleButton, } from "../accessible-button/AccessibleButton";
-import { Label } from "../typography/Label";
+import { AccessibleButton } from "../accessible-button/AccessibleButton.js";
+import { Label } from "../typography/Label.js";
 const naviButtonStyles = tv({
-    base: [
-        "flex",
-        "flex-col",
-        "gap-1",
-        "transition",
-        "duration-300",
-        "ease-in-out",
-        "text-white",
-        "rounded-lg",
-        "items-center",
-        "pt-3",
-        "pb-3",
-        "pl-2",
-        "pr-2",
-    ],
-    variants: {
-        intent: {
-            secondary: ["bg-violet-600", "hover:bg-violet-700"],
-        },
-    },
+  base: [
+    "flex",
+    "flex-col",
+    "gap-1",
+    "transition",
+    "duration-300",
+    "ease-in-out",
+    "text-white",
+    "rounded-lg",
+    "items-center",
+    "pt-3",
+    "pb-3",
+    "pl-2",
+    "pr-2"
+  ],
+  variants: {
+    intent: {
+      secondary: ["bg-violet-600", "hover:bg-violet-700"]
+    }
+  }
 });
-/**
- * A navigation-style button component that combines an accessible,
- * keyboard-friendly button foundation with variant-based styling.
- */
-export const NaviButton = ({ intent = "secondary", className, ...props }) => {
-    return (_jsxs(AccessibleButton, { className: cn(naviButtonStyles({ intent, ...props }), className), ...props, children: [props.icon && _jsx(props.icon, { className: props.iconClassName }), _jsx(Label, { as: "span", size: "md", children: props.children })] }));
+const NaviButton = ({
+  intent = "secondary",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    AccessibleButton,
+    {
+      className: cn(naviButtonStyles({ intent, ...props }), className),
+      ...props,
+      children: [
+        props.icon && /* @__PURE__ */ jsx(props.icon, { className: props.iconClassName }),
+        /* @__PURE__ */ jsx(Label, { as: "span", size: "md", children: props.children })
+      ]
+    }
+  );
+};
+export {
+  NaviButton
 };

package/dist/components/navi-user-button/NaviUserButton.js

@@ -1,33 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn, tv } from "tailwind-variants";
-import { AccessibleButton, } from "../accessible-button/AccessibleButton";
-import { Avatar } from "../avatar/Avatar";
+import { AccessibleButton } from "../accessible-button/AccessibleButton.js";
+import { Avatar } from "../avatar/Avatar.js";
 const naviUserButtonStyles = tv({
-    base: [
-        "flex",
-        "flex-col",
-        "gap-1",
-        "transition",
-        "duration-300",
-        "ease-in-out",
-        "text-white",
-        "rounded-lg",
-        "items-center",
-        "pt-3",
-        "pb-3",
-        "pl-2",
-        "pr-2",
-    ],
-    variants: {
-        intent: {
-            secondary: ["bg-violet-600", "hover:bg-violet-700"],
-        },
-    },
+  base: [
+    "flex",
+    "flex-col",
+    "gap-1",
+    "transition",
+    "duration-300",
+    "ease-in-out",
+    "text-white",
+    "rounded-lg",
+    "items-center",
+    "pt-3",
+    "pb-3",
+    "pl-2",
+    "pr-2"
+  ],
+  variants: {
+    intent: {
+      secondary: ["bg-violet-600", "hover:bg-violet-700"]
+    }
+  }
 });
-/**
- * A user-focused navigation button that displays a user avatar and behaves
- * like an accessible, keyboard-friendly button.
- */
-export const NaviUserButton = ({ intent = "secondary", className, ...props }) => {
-    return (_jsx(AccessibleButton, { className: cn(naviUserButtonStyles({ intent, ...props }), className), ...props, children: _jsx(Avatar, { alt: props.alt, size: "sm", src: props.src }) }));
+const NaviUserButton = ({
+  intent = "secondary",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    AccessibleButton,
+    {
+      className: cn(naviUserButtonStyles({ intent, ...props }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Avatar, { alt: props.alt, size: "sm", src: props.src })
+    }
+  );
+};
+export {
+  NaviUserButton
 };

package/dist/components/round-button/RoundButton.js

@@ -1,33 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn, tv } from "tailwind-variants";
-import { AccessibleButton, } from "../accessible-button/AccessibleButton";
+import { AccessibleButton } from "../accessible-button/AccessibleButton.js";
 const roundButtonStyles = tv({
-    base: [
-        "text-white",
-        "rounded-full",
-        "hover:ring-3",
-        "active:ring-4",
-        "transition",
-        "duration-350",
-        "active:duration-300",
-        "ease-in-out",
-        "p-4",
-    ],
-    variants: {
-        intent: {
-            primary: [
-                "bg-slate-600",
-                "hover:bg-slate-700",
-                "hover:ring-slate-100",
-                "active:ring-violet-200",
-            ],
-        },
-    },
+  base: [
+    "text-white",
+    "rounded-full",
+    "hover:ring-3",
+    "active:ring-4",
+    "transition",
+    "duration-350",
+    "active:duration-300",
+    "ease-in-out",
+    "p-4"
+  ],
+  variants: {
+    intent: {
+      primary: [
+        "bg-slate-600",
+        "hover:bg-slate-700",
+        "hover:ring-slate-100",
+        "active:ring-violet-200"
+      ]
+    }
+  }
 });
-/**
- * A circular, icon-only button component that provides full accessibility,
- * keyboard interaction, and visual feedback through hover and active states.
- */
-export const RoundButton = ({ intent = "primary", className, ...props }) => {
-    return (_jsx(AccessibleButton, { className: cn(roundButtonStyles({ intent }), className), ...props, children: _jsx(props.icon, {}) }));
+const RoundButton = ({
+  intent = "primary",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    AccessibleButton,
+    {
+      className: cn(roundButtonStyles({ intent }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(props.icon, {})
+    }
+  );
+};
+export {
+  RoundButton
 };

package/dist/components/tabs/TabItem.js

@@ -1,13 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import * as RadixTabs from "@radix-ui/react-tabs";
 import React from "react";
 import { tv } from "tailwind-variants";
 const tabItemStyles = tv({});
-export const TabItem = (props) => {
-    return (_jsx(RadixTabs.Content, { value: props.value, className: tabItemStyles(props), children: React.Children.map(props.children, (child, index) => {
-            if (React.isValidElement(child)) {
-                return React.cloneElement(child, { key: props.value || index });
-            }
-            return child;
-        }) }));
+const TabItem = (props) => {
+  return /* @__PURE__ */ jsx(RadixTabs.Content, { value: props.value, className: tabItemStyles(props), children: React.Children.map(props.children, (child, index) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, { key: props.value || index });
+    }
+    return child;
+  }) });
+};
+export {
+  TabItem
 };

package/dist/components/tabs/Tabs.js

@@ -1,67 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import * as RadixTabs from "@radix-ui/react-tabs";
 import React from "react";
 import { tv } from "tailwind-variants";
-import { Label } from "../typography/Label";
+import { Label } from "../typography/Label.js";
 const tabStyles = tv({
-    slots: {
-        list: ["bg-slate-200", "rounded-lg", "p-1", "flex", "gap-2", "group"],
-        trigger: ["pt-2", "pb-2", "pr-3", "pl-3", "rounded-md"],
+  slots: {
+    list: ["bg-slate-200", "rounded-lg", "p-1", "flex", "gap-2", "group"],
+    trigger: ["pt-2", "pb-2", "pr-3", "pl-3", "rounded-md"]
+  },
+  variants: {
+    selected: {
+      false: {
+        trigger: ["bg-slate-200", "group-hover:text-slate-800"]
+      },
+      true: {
+        trigger: ["bg-white", "text-violet-600"]
+      }
     },
-    variants: {
-        selected: {
-            false: {
-                trigger: ["bg-slate-200", "group-hover:text-slate-800"],
-            },
-            true: {
-                trigger: ["bg-white", "text-violet-600"],
-            },
-        },
-        effect: {
-            first: {},
-            middle: {},
-            last: {},
-        },
+    effect: {
+      first: {},
+      middle: {},
+      last: {}
+    }
+  },
+  compoundVariants: [
+    {
+      selected: true,
+      effect: "first",
+      class: {
+        trigger: ["group-hover:pr-6"]
+      }
     },
-    compoundVariants: [
-        {
-            selected: true,
-            effect: "first",
-            class: {
-                trigger: ["group-hover:pr-6"],
-            },
-        },
-        {
-            selected: true,
-            effect: "middle",
-            class: {
-                trigger: ["group-hover:pr-6", "group-hover:pl-6"],
-            },
-        },
-        {
-            selected: true,
-            effect: "last",
-            class: {
-                trigger: ["group-hover:pl-6"],
-            },
-        },
-    ],
+    {
+      selected: true,
+      effect: "middle",
+      class: {
+        trigger: ["group-hover:pr-6", "group-hover:pl-6"]
+      }
+    },
+    {
+      selected: true,
+      effect: "last",
+      class: {
+        trigger: ["group-hover:pl-6"]
+      }
+    }
+  ]
 });
-export const Tabs = (props) => {
-    const { list, trigger } = tabStyles(props);
-    const [currentSelection, setSelection] = React.useState(props.value);
-    const getEffectVariant = (index, max) => index === 0 ? "first" : max === index ? "last" : "middle";
-    const onClick = (value) => {
-        setSelection(value);
-        props.onChange?.(value);
-    };
-    return (_jsxs(RadixTabs.Root, { defaultValue: props.value, children: [_jsx(RadixTabs.List, { className: list(), children: props.children.map((child, index) => (_jsx(RadixTabs.Trigger, { value: child.props.value, className: trigger({
-                        selected: child.props.value === currentSelection,
-                        effect: getEffectVariant(index, props.children.length - 1),
-                    }), onClick: () => onClick(child.props.value), children: _jsx(Label, { size: "lg", children: child.props.label }) }, child.props.value))) }), React.Children.map(props.children, (child, index) => {
-                if (React.isValidElement(child)) {
-                    return React.cloneElement(child, { key: props.value || index });
-                }
-                return child;
-            })] }));
+const Tabs = (props) => {
+  const { list, trigger } = tabStyles(props);
+  const [currentSelection, setSelection] = React.useState(props.value);
+  const getEffectVariant = (index, max) => index === 0 ? "first" : max === index ? "last" : "middle";
+  const onClick = (value) => {
+    setSelection(value);
+    props.onChange?.(value);
+  };
+  return /* @__PURE__ */ jsxs(RadixTabs.Root, { defaultValue: props.value, children: [
+    /* @__PURE__ */ jsx(RadixTabs.List, { className: list(), children: props.children.map((child, index) => /* @__PURE__ */ jsx(
+      RadixTabs.Trigger,
+      {
+        value: child.props.value,
+        className: trigger({
+          selected: child.props.value === currentSelection,
+          effect: getEffectVariant(index, props.children.length - 1)
+        }),
+        onClick: () => onClick(child.props.value),
+        children: /* @__PURE__ */ jsx(Label, { size: "lg", children: child.props.label })
+      },
+      child.props.value
+    )) }),
+    React.Children.map(props.children, (child, index) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, { key: props.value || index });
+      }
+      return child;
+    })
+  ] });
+};
+export {
+  Tabs
 };

package/dist/components/text-link/TextLink.js

@@ -1,15 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Label } from "../typography/Label";
+import { Label } from "../typography/Label.js";
 const textLinkStyles = tv({
-    base: [
-        "text-violet-600",
-        "underline",
-        "decoration-violet-600",
-        "underline-offset-2",
-        "hover:decoration-violet-200",
-    ],
+  base: [
+    "text-violet-600",
+    "underline",
+    "decoration-violet-600",
+    "underline-offset-2",
+    "hover:decoration-violet-200"
+  ]
 });
-export const TextLink = (props) => {
-    return (_jsx(Label, { size: "sm", as: "span", children: _jsx("a", { href: props.href, className: textLinkStyles(props), children: props.children }) }));
+const TextLink = (props) => {
+  return /* @__PURE__ */ jsx(Label, { size: "sm", as: "span", children: /* @__PURE__ */ jsx("a", { href: props.href, className: textLinkStyles(props), children: props.children }) });
+};
+export {
+  TextLink
 };