@kjaniec-dev/ui 0.2.0

package/dist/index.cjs

@@ -0,0 +1,976 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var React16 = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React16__namespace = /*#__PURE__*/_interopNamespace(React16);
+
+// src/lib/cn.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap select-none",
+    "font-sans font-semibold leading-none",
+    "border border-transparent rounded-kj-md cursor-pointer",
+    "transition-[background-color,color,border-color,box-shadow,transform] duration-150",
+    "active:translate-y-px",
+    "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45",
+    "disabled:opacity-50 disabled:pointer-events-none"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+        outline: "bg-transparent text-foreground border-border hover:bg-muted hover:border-muted-foreground",
+        ghost: "bg-transparent text-foreground hover:bg-muted",
+        danger: "bg-danger text-white hover:brightness-95"
+      },
+      size: {
+        sm: "h-8 px-3 text-[0.8rem] rounded-kj-sm",
+        md: "h-10 px-[1.1rem] text-sm",
+        lg: "h-12 px-6 text-base",
+        icon: "h-10 w-10 p-0",
+        "icon-sm": "h-8 w-8 p-0 rounded-kj-sm"
+      }
+    },
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+var Button = React16__namespace.forwardRef(
+  ({ className, variant, size, loading, leadingIcon, trailingIcon, children, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size }), loading && "relative", className),
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute h-[1em] w-[1em] rounded-full border-2 border-current border-t-transparent animate-spin"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("contents", loading && "invisible"), children: [
+            leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[&_svg]:h-[1.05em] [&_svg]:w-[1.05em]", children: leadingIcon }),
+            children,
+            trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[&_svg]:h-[1.05em] [&_svg]:w-[1.05em]", children: trailingIcon })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center gap-1.5 px-2.5 py-0.5 text-xs font-semibold leading-snug rounded-full border border-transparent",
+  {
+    variants: {
+      variant: {
+        neutral: "bg-muted text-muted-foreground",
+        primary: "bg-primary/15 text-primary-hover dark:text-primary",
+        success: "bg-success-surface text-success",
+        warning: "bg-warning-surface text-warning",
+        danger: "bg-danger-surface text-danger",
+        info: "bg-info-surface text-info",
+        solid: "bg-primary text-primary-foreground"
+      }
+    },
+    defaultVariants: { variant: "neutral" }
+  }
+);
+var Badge = React16__namespace.forwardRef(
+  ({ className, variant, dot, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className: cn(badgeVariants({ variant }), className), ...props, children: [
+    dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current", "aria-hidden": true }),
+    children
+  ] })
+);
+Badge.displayName = "Badge";
+var alertVariants = classVarianceAuthority.cva(
+  "flex gap-3 items-start p-[0.9rem_1.1rem] rounded-kj-md border text-sm",
+  {
+    variants: {
+      variant: {
+        info: "bg-info-surface border-info/30",
+        success: "bg-success-surface border-success/30",
+        warning: "bg-warning-surface border-warning/30",
+        danger: "bg-danger-surface border-danger/30"
+      }
+    },
+    defaultVariants: { variant: "info" }
+  }
+);
+var iconColor = {
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger"
+};
+var Alert = React16__namespace.forwardRef(
+  ({ className, variant = "info", icon, title, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props, children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0 mt-0.5 [&_svg]:h-[1.15rem] [&_svg]:w-[1.15rem]", iconColor[variant ?? "info"]), children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-foreground", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-bold m-0 mb-0.5 text-sm", children: title }),
+      children && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 opacity-85", children })
+    ] })
+  ] })
+);
+Alert.displayName = "Alert";
+var Spinner = React16__namespace.forwardRef(
+  ({ className, size = 24, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      role: "status",
+      "aria-label": "Loading",
+      className: cn(
+        "inline-block rounded-full border-[2.5px] border-muted border-t-primary animate-spin align-middle",
+        className
+      ),
+      style: { width: size, height: size, ...style },
+      ...props
+    }
+  )
+);
+Spinner.displayName = "Spinner";
+var Progress = React16__namespace.forwardRef(
+  ({ className, value = 0, tone = "primary", ...props }, ref) => {
+    const pct = Math.max(0, Math.min(100, value));
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": pct,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        className: cn("h-2 w-full overflow-hidden rounded-full bg-muted", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "block h-full rounded-full transition-[width] duration-500 ease-out",
+              tone === "secondary" ? "bg-secondary" : "bg-primary"
+            ),
+            style: { width: `${pct}%` }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+var baseField = "w-full font-sans text-sm text-foreground bg-surface border rounded-kj-md px-[0.85rem] transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground focus:outline-none focus:border-ring focus:ring-[3px] focus:ring-ring/30 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed";
+var Input = React16__namespace.forwardRef(
+  ({ className, error, leadingIcon, style, ...props }, ref) => {
+    const field = /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref,
+        "aria-invalid": error || void 0,
+        className: cn(
+          baseField,
+          "py-[calc(0.6rem*var(--kj-density,1))]",
+          error ? "border-danger focus:border-danger focus:ring-danger/25" : "border-input",
+          leadingIcon && "pl-[2.3rem]",
+          className
+        ),
+        ...props
+      }
+    );
+    if (!leadingIcon) return field;
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-[0.8rem] text-muted-foreground [&_svg]:h-[1.05rem] [&_svg]:w-[1.05rem] pointer-events-none", children: leadingIcon }),
+      field
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Textarea = React16__namespace.forwardRef(
+  ({ className, error, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ref,
+      "aria-invalid": error || void 0,
+      className: cn(
+        baseField,
+        "py-[calc(0.6rem*var(--kj-density,1))] min-h-[84px] leading-relaxed resize-y",
+        error ? "border-danger focus:border-danger focus:ring-danger/25" : "border-input",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+var Label = React16__namespace.forwardRef(
+  ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, className: cn("text-[0.8rem] font-semibold text-foreground", className), ...props, children: [
+    children,
+    required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-danger", children: " *" })
+  ] })
+);
+Label.displayName = "Label";
+var Hint = React16__namespace.forwardRef(
+  ({ className, error, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: cn("text-[0.76rem]", error ? "text-danger" : "text-muted-foreground", className),
+      ...props
+    }
+  )
+);
+Hint.displayName = "Hint";
+var Field = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props })
+);
+Field.displayName = "Field";
+var chevron = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E";
+var Select = React16__namespace.forwardRef(
+  ({ className, error, style, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      ref,
+      "aria-invalid": error || void 0,
+      className: cn(
+        "w-full appearance-none cursor-pointer font-sans text-sm text-foreground bg-surface",
+        "border rounded-kj-md py-[calc(0.6rem*var(--kj-density,1))] pl-[0.85rem] pr-9",
+        "transition-[border-color,box-shadow] duration-150",
+        "focus:outline-none focus:border-ring focus:ring-[3px] focus:ring-ring/30",
+        "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
+        error ? "border-danger" : "border-input",
+        className
+      ),
+      style: {
+        backgroundImage: `url("${chevron}")`,
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "right 0.75rem center",
+        backgroundSize: "1rem",
+        ...style
+      },
+      ...props,
+      children
+    }
+  )
+);
+Select.displayName = "Select";
+var Checkbox = React16__namespace.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const autoId = React16__namespace.useId();
+    const inputId = id ?? autoId;
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { ref, id: inputId, type: "checkbox", className: "peer sr-only", ...props }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid place-items-center h-[1.15rem] w-[1.15rem] shrink-0 rounded-[0.4rem] border-[1.5px] border-input bg-surface transition-all duration-150 peer-checked:bg-primary peer-checked:border-primary peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/35 peer-checked:[&_svg]:opacity-100 peer-checked:[&_svg]:scale-100", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", className: "h-3 w-3 text-primary-foreground opacity-0 scale-50 transition-all duration-150", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
+      label
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Radio = React16__namespace.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const autoId = React16__namespace.useId();
+    const inputId = id ?? autoId;
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { ref, id: inputId, type: "radio", className: "peer sr-only", ...props }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid place-items-center h-[1.15rem] w-[1.15rem] shrink-0 rounded-full border-[1.5px] border-input bg-surface transition-all duration-150 peer-checked:bg-primary peer-checked:border-primary peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/35 peer-checked:[&>span]:opacity-100 peer-checked:[&>span]:scale-100", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-primary-foreground opacity-0 scale-[0.4] transition-all duration-150" }) }),
+      label
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var Switch = React16__namespace.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const autoId = React16__namespace.useId();
+    const inputId = id ?? autoId;
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { ref, id: inputId, type: "checkbox", role: "switch", className: "peer sr-only", ...props }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative h-[1.45rem] w-[2.6rem] shrink-0 rounded-full bg-input transition-colors duration-200 peer-checked:bg-primary peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/35 after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:h-[calc(1.45rem-4px)] after:w-[calc(1.45rem-4px)] after:rounded-full after:bg-white after:shadow-kj-sm after:transition-transform after:duration-200 peer-checked:after:translate-x-[1.15rem]" }),
+      label
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+var Slider = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      type: "range",
+      className: cn(
+        "kj-slider w-full h-1.5 rounded-full bg-input appearance-none cursor-pointer",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Slider.displayName = "Slider";
+var sliderThumbCSS = `
+.kj-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:9999px;background:var(--kj-primary);border:3px solid var(--kj-surface);box-shadow:var(--kj-shadow-sm);cursor:pointer}
+.kj-slider::-moz-range-thumb{width:18px;height:18px;border-radius:9999px;background:var(--kj-primary);border:3px solid var(--kj-surface);box-shadow:var(--kj-shadow-sm);cursor:pointer}
+`;
+function Segmented({
+  options,
+  value,
+  onChange,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tablist",
+      className: cn("inline-flex gap-0.5 p-[3px] rounded-kj-md bg-muted", className),
+      ...props,
+      children: options.map((opt) => {
+        const active = opt.value === value;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => onChange(opt.value),
+            className: cn(
+              "px-3.5 py-1.5 text-[0.82rem] font-semibold rounded-[calc(var(--kj-radius-md)-3px)] cursor-pointer transition-all duration-150",
+              active ? "bg-surface text-foreground shadow-kj-xs" : "bg-transparent text-muted-foreground hover:text-foreground"
+            ),
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
+var Card = React16__namespace.forwardRef(
+  ({ className, elevated, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "bg-card text-card-foreground rounded-kj-xl overflow-hidden border",
+        elevated ? "border-transparent shadow-kj-lg" : "border-border shadow-kj-sm",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-[1.35rem] flex flex-col gap-1", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("m-0 text-base font-bold tracking-[-0.01em]", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("m-0 text-[0.85rem] text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("px-[1.35rem] pb-[1.35rem]", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex gap-2.5 px-[1.35rem] py-[1.1rem] border-t border-border bg-muted/40", className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+var Stat = React16__namespace.forwardRef(
+  ({ className, label, value, delta, trend, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { ref, className: cn("p-[1.35rem] flex flex-col gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.78rem] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[2rem] font-bold tracking-[-0.03em] tabular-nums leading-none", children: value }),
+    delta && /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 text-[0.8rem] font-semibold",
+          trend === "down" ? "text-danger" : "text-success"
+        ),
+        children: [
+          trend === "down" ? "\u25BC" : "\u25B2",
+          " ",
+          delta
+        ]
+      }
+    )
+  ] })
+);
+Stat.displayName = "Stat";
+var avatarVariants = classVarianceAuthority.cva(
+  "grid place-items-center shrink-0 rounded-full font-semibold border-2 border-surface",
+  {
+    variants: {
+      size: {
+        sm: "h-7 w-7 text-[0.7rem]",
+        md: "h-9 w-9 text-[0.8rem]",
+        lg: "h-12 w-12 text-base"
+      },
+      tone: {
+        secondary: "bg-secondary text-secondary-foreground",
+        primary: "bg-primary text-primary-foreground",
+        info: "bg-info text-white",
+        muted: "bg-muted text-muted-foreground"
+      }
+    },
+    defaultVariants: { size: "md", tone: "secondary" }
+  }
+);
+var Avatar = React16__namespace.forwardRef(
+  ({ className, size, tone, src, alt, status, children, ...props }, ref) => {
+    const node = /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn(avatarVariants({ size, tone }), "overflow-hidden", className), ...props, children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "h-full w-full object-cover" }) : children });
+    if (!status) return node;
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex", children: [
+      node,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -right-px -bottom-px h-[0.7rem] w-[0.7rem] rounded-full bg-success border-2 border-surface" })
+    ] });
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarGroup = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex [&>*:not(:first-child)]:-ml-2.5", className), ...props })
+);
+AvatarGroup.displayName = "AvatarGroup";
+var TabsContext = React16__namespace.createContext(null);
+function useTabs() {
+  const ctx = React16__namespace.useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs.* must be used within <Tabs>");
+  return ctx;
+}
+function Tabs({ value, defaultValue, onValueChange, className, children, ...props }) {
+  const [internal, setInternal] = React16__namespace.useState(defaultValue ?? "");
+  const current = value ?? internal;
+  const setValue = React16__namespace.useCallback(
+    (v) => {
+      if (value === void 0) setInternal(v);
+      onValueChange?.(v);
+    },
+    [value, onValueChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, setValue }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, ...props, children }) });
+}
+var TabsList = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "tablist", className: cn("flex gap-1 border-b border-border", className), ...props })
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = React16__namespace.forwardRef(
+  ({ className, value, children, ...props }, ref) => {
+    const { value: current, setValue } = useTabs();
+    const active = current === value;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "tab",
+        "aria-selected": active,
+        onClick: () => setValue(value),
+        className: cn(
+          "relative px-[0.9rem] py-2.5 text-sm font-semibold cursor-pointer transition-colors duration-150",
+          "after:content-[''] after:absolute after:left-[0.9rem] after:right-[0.9rem] after:-bottom-px after:h-0.5 after:rounded-sm after:transition-colors",
+          active ? "text-foreground after:bg-primary" : "text-muted-foreground hover:text-foreground after:bg-transparent",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React16__namespace.forwardRef(
+  ({ className, value, ...props }, ref) => {
+    const { value: current } = useTabs();
+    if (current !== value) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "tabpanel", className: cn("pt-5 text-[0.9rem] text-muted-foreground", className), ...props });
+  }
+);
+TabsContent.displayName = "TabsContent";
+var AccordionContext = React16__namespace.createContext(null);
+function Accordion({ type = "single", defaultValue = [], className, children, ...props }) {
+  const [open, setOpen] = React16__namespace.useState(defaultValue);
+  const toggle = React16__namespace.useCallback(
+    (v) => {
+      setOpen((prev) => {
+        const isOpen = prev.includes(v);
+        if (type === "single") return isOpen ? [] : [v];
+        return isOpen ? prev.filter((x) => x !== v) : [...prev, v];
+      });
+    },
+    [type]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: { open, toggle }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border border-border rounded-kj-lg overflow-hidden", className), ...props, children }) });
+}
+var ItemContext = React16__namespace.createContext("");
+var AccordionItem = React16__namespace.forwardRef(
+  ({ className, value, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ItemContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("border-t border-border first:border-t-0", className), ...props }) })
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React16__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const ctx = React16__namespace.useContext(AccordionContext);
+    const value = React16__namespace.useContext(ItemContext);
+    const isOpen = ctx.open.includes(value);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-expanded": isOpen,
+        onClick: () => ctx.toggle(value),
+        className: cn(
+          "w-full flex justify-between items-center gap-4 text-left px-[1.2rem] py-4 bg-card text-foreground text-[0.9rem] font-semibold cursor-pointer hover:bg-muted transition-colors",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: cn("shrink-0 text-muted-foreground transition-transform duration-200", isOpen && "rotate-180"),
+              width: 18,
+              height: 18,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React16__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const ctx = React16__namespace.useContext(AccordionContext);
+    const value = React16__namespace.useContext(ItemContext);
+    const isOpen = ctx.open.includes(value);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("grid transition-[grid-template-rows] duration-200 ease-out", isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-[1.2rem] pb-[1.1rem] text-[0.85rem] text-muted-foreground", className), children }) })
+      }
+    );
+  }
+);
+AccordionContent.displayName = "AccordionContent";
+var MenuContext = React16__namespace.createContext(null);
+function DropdownMenu({ children, className }) {
+  const [open, setOpen] = React16__namespace.useState(false);
+  const ref = React16__namespace.useRef(null);
+  React16__namespace.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const onEsc = (e) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onEsc);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: { open, setOpen }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block", className), children }) });
+}
+var DropdownMenuTrigger = React16__namespace.forwardRef(({ onClick, ...props }, ref) => {
+  const ctx = React16__namespace.useContext(MenuContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-haspopup": "menu",
+      "aria-expanded": ctx.open,
+      onClick: (e) => {
+        ctx.setOpen(!ctx.open);
+        onClick?.(e);
+      },
+      ...props
+    }
+  );
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+function DropdownMenuContent({ className, align = "start", children, ...props }) {
+  const ctx = React16__namespace.useContext(MenuContext);
+  if (!ctx.open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "menu",
+      className: cn(
+        "absolute top-[calc(100%+6px)] z-40 min-w-[200px] p-1.5 rounded-kj-md bg-surface border border-border shadow-kj-lg",
+        "animate-[kjpop_.12s_ease]",
+        align === "end" ? "right-0" : "left-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var DropdownMenuItem = React16__namespace.forwardRef(
+  ({ className, danger, icon, children, onClick, ...props }, ref) => {
+    const ctx = React16__namespace.useContext(MenuContext);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "menuitem",
+        onClick: (e) => {
+          onClick?.(e);
+          ctx.setOpen(false);
+        },
+        className: cn(
+          "w-full flex items-center gap-2.5 text-left px-2.5 py-2 rounded-kj-sm text-[0.85rem] cursor-pointer transition-colors",
+          "[&_svg]:h-4 [&_svg]:w-4",
+          danger ? "text-danger hover:bg-danger-surface" : "text-foreground hover:bg-muted",
+          className
+        ),
+        ...props,
+        children: [
+          icon,
+          children
+        ]
+      }
+    );
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+function DropdownMenuSeparator({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-px bg-border my-1.5", className), role: "separator" });
+}
+var Breadcrumb = React16__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("flex items-center gap-1.5 text-[0.85rem] text-muted-foreground", className), ...props, children })
+);
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbItem = React16__namespace.forwardRef(
+  ({ className, current, children, ...props }, ref) => {
+    if (current) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": "page", className: cn("text-foreground font-semibold", className), children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { ref, className: cn("text-inherit no-underline hover:text-foreground transition-colors", className), ...props, children });
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+function BreadcrumbSeparator() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-muted-foreground/70", children: "/" });
+}
+function range(start, end) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function paginate(page, pageCount) {
+  if (pageCount <= 7) return range(1, pageCount);
+  const left = Math.max(2, page - 1);
+  const right = Math.min(pageCount - 1, page + 1);
+  const items = [1];
+  if (left > 2) items.push("\u2026");
+  items.push(...range(left, right));
+  if (right < pageCount - 1) items.push("\u2026");
+  items.push(pageCount);
+  return items;
+}
+var Chevron = ({ dir }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: dir === "left" ? "15 18 9 12 15 6" : "9 18 15 12 9 6" }) });
+function Pagination({ page, pageCount, onPageChange, className }) {
+  const items = paginate(page, pageCount);
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": "Paginacja", className: cn("flex items-center gap-1", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Previous", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { dir: "left" }) }),
+    items.map(
+      (it, i) => it === "\u2026" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 text-muted-foreground select-none", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: it === page ? "primary" : "ghost",
+          size: "icon-sm",
+          "aria-current": it === page ? "page" : void 0,
+          onClick: () => onPageChange(it),
+          children: it
+        },
+        it
+      )
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { dir: "right" }) })
+  ] });
+}
+var TableWrap = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("border border-border rounded-kj-lg overflow-hidden", className), ...props })
+);
+TableWrap.displayName = "TableWrap";
+var Table = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: cn("w-full border-collapse text-[0.85rem]", className), ...props })
+);
+Table.displayName = "Table";
+var TableHeader = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className, ...props })
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className, ...props })
+);
+TableBody.displayName = "TableBody";
+var TableRow = React16__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn("transition-colors hover:bg-muted/50", className), ...props })
+);
+TableRow.displayName = "TableRow";
+var TableHead = React16__namespace.forwardRef(
+  ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ref,
+      className: cn(
+        "px-4 py-3 bg-muted border-b border-border text-[0.72rem] font-semibold uppercase tracking-[0.05em] text-muted-foreground",
+        numeric ? "text-right" : "text-left",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell = React16__namespace.forwardRef(
+  ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      ref,
+      className: cn(
+        "px-4 py-3 border-b border-border [tr:last-child_&]:border-b-0",
+        numeric && "text-right tabular-nums",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableCell.displayName = "TableCell";
+function Tooltip({ content, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("relative inline-flex group", className), tabIndex: 0, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        role: "tooltip",
+        className: cn(
+          "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap",
+          "rounded-kj-sm bg-foreground text-background text-xs font-medium px-2.5 py-1.5 shadow-kj-md",
+          "opacity-0 transition-all duration-150 group-hover:opacity-100 group-hover:translate-y-0 group-focus-visible:opacity-100 group-focus-visible:translate-y-0",
+          "after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-[5px] after:border-transparent after:border-t-foreground"
+        ),
+        children: content
+      }
+    )
+  ] });
+}
+function Modal({ open, onClose, children, width = 440, className }) {
+  React16__namespace.useEffect(() => {
+    if (!open) return;
+    const onEsc = (e) => e.key === "Escape" && onClose();
+    document.addEventListener("keydown", onEsc);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onEsc);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      onClick: (e) => e.target === e.currentTarget && onClose(),
+      className: cn(
+        "fixed inset-0 z-[100] grid place-items-center p-6 backdrop-blur-[3px] transition-opacity duration-200",
+        "bg-[color-mix(in_oklch,#09090b_55%,transparent)]",
+        open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          style: { maxWidth: width },
+          className: cn(
+            "w-full p-7 rounded-kj-2xl bg-surface border border-border shadow-kj-lg transition-transform duration-200",
+            open ? "scale-100 translate-y-0" : "scale-95 translate-y-2",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function ModalTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("m-0 mb-2 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props });
+}
+function ModalDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("m-0 text-[0.9rem] text-muted-foreground", className), ...props });
+}
+function ModalActions({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2.5 justify-end mt-6", className), ...props });
+}
+var ToastContext = React16__namespace.createContext(null);
+function useToast() {
+  const ctx = React16__namespace.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
+  return ctx;
+}
+var icons = {
+  default: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "text-primary", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v-4M12 8h.01" })
+  ] }),
+  success: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "text-success", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }),
+  danger: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "text-danger", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9-6 6M9 9l6 6" })
+  ] })
+};
+var toneBorder = {
+  default: "border-l-primary",
+  success: "border-l-success",
+  danger: "border-l-danger"
+};
+function ToastProvider({ children }) {
+  const [items, setItems] = React16__namespace.useState([]);
+  const idRef = React16__namespace.useRef(0);
+  const remove = React16__namespace.useCallback((id) => {
+    setItems((prev) => prev.map((t) => t.id === id ? { ...t, leaving: true } : t));
+    setTimeout(() => setItems((prev) => prev.filter((t) => t.id !== id)), 250);
+  }, []);
+  const toast = React16__namespace.useCallback(
+    ({ message, tone = "default", duration = 3200 }) => {
+      const id = ++idRef.current;
+      setItems((prev) => [...prev, { id, message, tone, duration }]);
+      if (duration > 0) setTimeout(() => remove(id), duration);
+    },
+    [remove]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-6 right-6 z-[200] flex flex-col gap-2.5", children: items.map((t) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "status",
+        onClick: () => remove(t.id),
+        className: cn(
+          "flex items-center gap-2.5 min-w-[280px] px-4 py-3 cursor-pointer",
+          "bg-surface border border-border border-l-[3px] rounded-kj-md shadow-kj-lg text-[0.85rem] font-medium",
+          toneBorder[t.tone],
+          t.leaving ? "animate-[kjtoastout_.25s_ease_forwards]" : "animate-[kjtoastin_.25s_ease]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid place-items-center", children: icons[t.tone] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.message })
+        ]
+      },
+      t.id
+    )) })
+  ] });
+}
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
+exports.Alert = Alert;
+exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
+exports.Badge = Badge;
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbItem = BreadcrumbItem;
+exports.BreadcrumbSeparator = BreadcrumbSeparator;
+exports.Button = Button;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+exports.Checkbox = Checkbox;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.Field = Field;
+exports.Hint = Hint;
+exports.Input = Input;
+exports.Label = Label;
+exports.Modal = Modal;
+exports.ModalActions = ModalActions;
+exports.ModalDescription = ModalDescription;
+exports.ModalTitle = ModalTitle;
+exports.Pagination = Pagination;
+exports.Progress = Progress;
+exports.Radio = Radio;
+exports.Segmented = Segmented;
+exports.Select = Select;
+exports.Slider = Slider;
+exports.Spinner = Spinner;
+exports.Stat = Stat;
+exports.Switch = Switch;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.TableWrap = TableWrap;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
+exports.Textarea = Textarea;
+exports.ToastProvider = ToastProvider;
+exports.Tooltip = Tooltip;
+exports.badgeVariants = badgeVariants;
+exports.buttonVariants = buttonVariants;
+exports.cn = cn;
+exports.sliderThumbCSS = sliderThumbCSS;
+exports.useToast = useToast;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map