@komarcalabs/design-system 0.1.0

package/dist/react/components/KmAlert.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { AlertVariants } from '../../variants';
+export type KmAlertProps = HTMLAttributes<HTMLDivElement> & {
+    tone?: AlertVariants["tone"];
+    title?: ReactNode;
+};
+export declare function KmAlert({ tone, title, children, className, ...props }: KmAlertProps): import("react").JSX.Element;
+//# sourceMappingURL=KmAlert.d.ts.map

package/dist/react/components/KmAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmAlert.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGnE,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EAAE,IAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAS/F"}

package/dist/react/components/KmBadge.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { BadgeVariants } from '../../variants';
+export type KmBadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    tone?: BadgeVariants["tone"];
+};
+export declare function KmBadge({ tone, className, ...props }: KmBadgeProps): import("react").JSX.Element;
+//# sourceMappingURL=KmBadge.d.ts.map

package/dist/react/components/KmBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmBadge.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,OAAO,CAAC,EAAE,IAAgB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAE9E"}

package/dist/react/components/KmButton.d.ts

@@ -0,0 +1,18 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonVariants } from '../../variants';
+type CommonProps = {
+    children?: ReactNode;
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+    loading?: boolean;
+};
+type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & {
+    as?: "button";
+};
+type AnchorProps = CommonProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    as: "a";
+};
+export type KmButtonProps = ButtonProps | AnchorProps;
+export declare function KmButton(props: KmButtonProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=KmButton.d.ts.map

package/dist/react/components/KmButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmButton.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErE,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,WAAW,GAAG,WAAW,GAC5B,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACxC,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf,CAAC;AAEJ,KAAK,WAAW,GAAG,WAAW,GAC5B,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACxC,EAAE,EAAE,GAAG,CAAC;CACT,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC;AAEtD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAgD5C"}

package/dist/react/components/KmCard.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type KmCardProps = HTMLAttributes<HTMLElement> & {
+    header?: ReactNode;
+    footer?: ReactNode;
+};
+export declare function KmCard({ header, footer, children, className, ...props }: KmCardProps): import("react").JSX.Element;
+//# sourceMappingURL=KmCard.d.ts.map

package/dist/react/components/KmCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmCard.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACtD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAUpF"}

package/dist/react/components/KmInput.d.ts

@@ -0,0 +1,14 @@
+import { InputHTMLAttributes } from 'react';
+export type KmInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "id"> & {
+    id?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+};
+export declare const KmInput: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "id"> & {
+    id?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+} & import('react').RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=KmInput.d.ts.map

package/dist/react/components/KmInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmInput.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,mBAAmB,EAAS,MAAM,OAAO,CAAC;AAIpE,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,IAAI,CAAC,GAAG;IAC7E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,OAAO;SANb,MAAM;YACH,MAAM;WACP,MAAM;YACL,MAAM;oDAkCd,CAAC"}

package/dist/react/components/KmSelect.d.ts

@@ -0,0 +1,23 @@
+import { SelectHTMLAttributes } from 'react';
+export type KmSelectOption = {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+};
+export type KmSelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> & {
+    id?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    options: KmSelectOption[];
+};
+export declare const KmSelect: import('react').ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> & {
+    id?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    options: KmSelectOption[];
+} & import('react').RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=KmSelect.d.ts.map

package/dist/react/components/KmSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmSelect.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAS,MAAM,OAAO,CAAC;AAIrE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,QAAQ;SARd,MAAM;YACH,MAAM;WACP,MAAM;YACL,MAAM;kBACA,MAAM;aACX,cAAc,EAAE;qDA6CzB,CAAC"}

package/dist/react/components/KmStack.d.ts

@@ -0,0 +1,13 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { StackVariants } from '../../variants';
+export type KmStackProps = HTMLAttributes<HTMLElement> & {
+    as?: ElementType;
+    children?: ReactNode;
+    direction?: StackVariants["direction"];
+    gap?: StackVariants["gap"];
+    align?: StackVariants["align"];
+    justify?: StackVariants["justify"];
+    wrap?: StackVariants["wrap"];
+};
+export declare function KmStack({ as: Component, children, className, direction, gap, align, justify, wrap, ...props }: KmStackProps): import("react").JSX.Element;
+//# sourceMappingURL=KmStack.d.ts.map

package/dist/react/components/KmStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmStack.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGnE,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,EAAE,EAAE,SAAiB,EACrB,QAAQ,EACR,SAAS,EACT,SAAoB,EACpB,GAAU,EACV,KAAiB,EACjB,OAAiB,EACjB,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,YAAY,+BASd"}

package/dist/react/components/KmStepper.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+interface Step {
+    title: string;
+    description?: string;
+}
+export interface KmStepperProps {
+    steps: Step[];
+    currentStep: number;
+    orientation?: "vertical" | "horizontal";
+    mode?: "desktop" | "mobile" | "auto";
+    mobileLayout?: "circular" | "horizontal";
+    mobileLabel?: string;
+    className?: string;
+}
+export declare const KmStepper: React.FC<KmStepperProps>;
+export {};
+//# sourceMappingURL=KmStepper.d.ts.map

package/dist/react/components/KmStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmStepper.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,YAAY,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiO9C,CAAC"}

package/dist/react/components/KmTextarea.d.ts

@@ -0,0 +1,14 @@
+import { TextareaHTMLAttributes } from 'react';
+export type KmTextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    id?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+};
+export declare const KmTextarea: import('react').ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    id?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+} & import('react').RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=KmTextarea.d.ts.map

package/dist/react/components/KmTextarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmTextarea.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmTextarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,sBAAsB,EAAS,MAAM,OAAO,CAAC;AAIvE,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,GAAG;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,UAAU;SANhB,MAAM;YACH,MAAM;WACP,MAAM;YACL,MAAM;uDAkCd,CAAC"}

package/dist/react/components/KmToggleSwitch.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface KmToggleSwitchProps {
+    isChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    className?: string;
+}
+export declare const KmToggleSwitch: React.FC<KmToggleSwitchProps>;
+//# sourceMappingURL=KmToggleSwitch.d.ts.map

package/dist/react/components/KmToggleSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsDxD,CAAC"}

package/dist/react/components/index.d.ts

@@ -0,0 +1,11 @@
+export * from './KmAlert';
+export * from './KmBadge';
+export * from './KmButton';
+export * from './KmCard';
+export * from './KmInput';
+export * from './KmSelect';
+export * from './KmStack';
+export * from './KmTextarea';
+export * from './KmStepper';
+export * from './KmToggleSwitch';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

package/dist/react/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/react.d.ts

@@ -0,0 +1,2 @@
+export * from './react/index';
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,cAAc,eAAe,CAAC"}

package/dist/react.js

@@ -0,0 +1,363 @@
+/* empty css               */
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { a as H, b as j, c as W, d as A, f as I, i as D, s as S, e as P, t as F, g as w, h as q } from "./toggleSwitch-CpBXc_jq.js";
+import { forwardRef as K, useId as V, useState as B, useEffect as E, useMemo as M } from "react";
+function k(...a) {
+  return a.filter(Boolean).join(" ");
+}
+function Z({ tone: a = "neutral", title: t, children: l, className: i, ...s }) {
+  const n = H({ tone: a });
+  return /* @__PURE__ */ c("div", { className: k(n.root(), i), role: "status", ...s, children: [
+    t ? /* @__PURE__ */ e("div", { className: n.title(), children: t }) : null,
+    /* @__PURE__ */ e("div", { className: n.description(), children: l })
+  ] });
+}
+function J({ tone: a = "neutral", className: t, ...l }) {
+  return /* @__PURE__ */ e("span", { className: k(j({ tone: a }), t), ...l });
+}
+function Q(a) {
+  const { as: t = "button", className: l, variant: i = "solid", size: s = "md", loading: n, children: m, ...f } = a, h = k(W({ variant: i, size: s, loading: n }), l);
+  if (t === "a")
+    return /* @__PURE__ */ e("a", { className: h, ...f, children: m });
+  const r = f;
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      className: h,
+      type: "button",
+      disabled: r.disabled || n,
+      "aria-busy": n ? "true" : void 0,
+      ...r,
+      children: [
+        n && /* @__PURE__ */ c(
+          "svg",
+          {
+            className: "animate-spin h-4 w-4 mr-2 inline",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ e(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ),
+        m
+      ]
+    }
+  );
+}
+function X({ header: a, footer: t, children: l, className: i, ...s }) {
+  const n = A();
+  return /* @__PURE__ */ c("section", { className: k(n.root(), i), ...s, children: [
+    a ? /* @__PURE__ */ e("header", { className: n.header(), children: a }) : null,
+    /* @__PURE__ */ e("div", { className: n.body(), children: l }),
+    t ? /* @__PURE__ */ e("footer", { className: n.footer(), children: t }) : null
+  ] });
+}
+const Y = K(function({ id: t, label: l, hint: i, error: s, className: n, ...m }, f) {
+  const h = V(), r = t || h, u = s ? `${r}-error` : i ? `${r}-hint` : void 0, d = I();
+  return /* @__PURE__ */ c("label", { className: d.root(), htmlFor: r, children: [
+    l ? /* @__PURE__ */ e("span", { className: d.label(), children: l }) : null,
+    /* @__PURE__ */ e(
+      "input",
+      {
+        ref: f,
+        id: r,
+        className: k(D(), n),
+        "aria-invalid": s ? "true" : void 0,
+        "aria-describedby": u,
+        ...m
+      }
+    ),
+    s ? /* @__PURE__ */ e("span", { id: `${r}-error`, className: d.error(), children: s }) : i ? /* @__PURE__ */ e("span", { id: `${r}-hint`, className: d.hint(), children: i }) : null
+  ] });
+}), ee = K(function({ id: t, label: l, hint: i, error: s, placeholder: n, options: m, className: f, ...h }, r) {
+  const u = V(), d = t || u, x = s ? `${d}-error` : i ? `${d}-hint` : void 0, b = I();
+  return /* @__PURE__ */ c("label", { className: b.root(), htmlFor: d, children: [
+    l ? /* @__PURE__ */ e("span", { className: b.label(), children: l }) : null,
+    /* @__PURE__ */ c(
+      "select",
+      {
+        ref: r,
+        id: d,
+        className: k(S(), f),
+        "aria-invalid": s ? "true" : void 0,
+        "aria-describedby": x,
+        ...h,
+        children: [
+          n ? /* @__PURE__ */ e("option", { value: "", disabled: !0, children: n }) : null,
+          m.map((g) => /* @__PURE__ */ e("option", { value: g.value, disabled: g.disabled, children: g.label }, String(g.value)))
+        ]
+      }
+    ),
+    s ? /* @__PURE__ */ e("span", { id: `${d}-error`, className: b.error(), children: s }) : i ? /* @__PURE__ */ e("span", { id: `${d}-hint`, className: b.hint(), children: i }) : null
+  ] });
+});
+function ae({
+  as: a = "div",
+  children: t,
+  className: l,
+  direction: i = "column",
+  gap: s = "md",
+  align: n = "stretch",
+  justify: m = "start",
+  wrap: f = !1,
+  ...h
+}) {
+  return /* @__PURE__ */ e(
+    a,
+    {
+      className: k(P({ direction: i, gap: s, align: n, justify: m, wrap: f }), l),
+      ...h,
+      children: t
+    }
+  );
+}
+const te = K(function({ id: t, label: l, hint: i, error: s, className: n, ...m }, f) {
+  const h = V(), r = t || h, u = s ? `${r}-error` : i ? `${r}-hint` : void 0, d = I();
+  return /* @__PURE__ */ c("label", { className: d.root(), htmlFor: r, children: [
+    l ? /* @__PURE__ */ e("span", { className: d.label(), children: l }) : null,
+    /* @__PURE__ */ e(
+      "textarea",
+      {
+        ref: f,
+        id: r,
+        className: k(F(), n),
+        "aria-invalid": s ? "true" : void 0,
+        "aria-describedby": u,
+        ...m
+      }
+    ),
+    s ? /* @__PURE__ */ e("span", { id: `${r}-error`, className: d.error(), children: s }) : i ? /* @__PURE__ */ e("span", { id: `${r}-hint`, className: d.hint(), children: i }) : null
+  ] });
+}), se = ({
+  steps: a,
+  currentStep: t,
+  orientation: l = "vertical",
+  mode: i = "auto",
+  mobileLayout: s = "circular",
+  mobileLabel: n = "",
+  className: m = ""
+}) => {
+  var L;
+  const [f, h] = B(!1);
+  E(() => {
+    if (i === "auto") {
+      h(window.innerWidth < 640);
+      const o = () => {
+        h(window.innerWidth < 640);
+      };
+      return window.addEventListener("resize", o), () => {
+        window.removeEventListener("resize", o);
+      };
+    }
+  }, [i]);
+  const r = i === "mobile" ? !0 : i === "desktop" ? !1 : f, u = 20, d = 5, x = 2 * Math.PI * u, b = (u + d) * 2, g = 7, $ = M(() => {
+    const o = a.length;
+    return (x - o * g) / o;
+  }, [a.length, x, g]), R = M(() => {
+    const o = Math.min(Math.max(t, 1), a.length);
+    return Array.from(
+      { length: o },
+      (p, v) => `${$} ${v < o - 1 ? g : x}`
+    ).join(" ");
+  }, [t, a.length, $, x, g]), z = ((L = a[Math.min(Math.max(t - 1, 0), a.length - 1)]) == null ? void 0 : L.title) || "", T = n || `Paso ${t} de ${a.length}`, C = (o) => {
+    const p = o + 1;
+    return p < t ? "completed" : p === t ? "active" : "upcoming";
+  }, N = w();
+  return r ? s === "circular" ? /* @__PURE__ */ c("div", { className: `${N.mobileRoot()} ${m}`.trim(), children: [
+    /* @__PURE__ */ c("div", { className: N.mobileInfo(), children: [
+      /* @__PURE__ */ e("span", { className: N.mobileTitle(), children: z }),
+      /* @__PURE__ */ e("span", { className: N.mobileLabel(), children: T })
+    ] }),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: N.mobileProgress(),
+        style: { width: `${b}px`, height: `${b}px` },
+        children: [
+          /* @__PURE__ */ c("svg", { width: b, height: b, className: "-rotate-90", children: [
+            /* @__PURE__ */ e(
+              "circle",
+              {
+                cx: b / 2,
+                cy: b / 2,
+                r: u,
+                fill: "none",
+                className: "stroke-km-border",
+                strokeWidth: d,
+                strokeDasharray: `${$} ${g}`,
+                strokeLinecap: "square"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "circle",
+              {
+                cx: b / 2,
+                cy: b / 2,
+                r: u,
+                fill: "none",
+                className: "stroke-km-primary",
+                strokeWidth: d,
+                strokeDasharray: R,
+                strokeLinecap: "square"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ c("span", { className: N.mobilePercentText(), children: [
+            t,
+            "/",
+            a.length
+          ] })
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ c("div", { className: `${N.mobileHorizRoot()} ${m}`.trim(), children: [
+    /* @__PURE__ */ c("div", { className: N.mobileHorizHeader(), children: [
+      /* @__PURE__ */ e("span", { className: N.mobileHorizTitle(), children: z }),
+      /* @__PURE__ */ c("span", { className: N.mobileHorizSteps(), children: [
+        t,
+        "/",
+        a.length
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: N.mobileHorizTrack(), children: a.map((o, p) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: `${N.mobileHorizBar()} ${p + 1 <= t ? "bg-km-primary" : "bg-km-border"}`.trim()
+      },
+      p
+    )) })
+  ] }) : l === "horizontal" ? /* @__PURE__ */ e("ol", { className: `flex flex-row items-center justify-between w-full gap-4 ${m}`.trim(), children: a.map((o, p) => {
+    const v = C(p), y = p === a.length - 1;
+    return /* @__PURE__ */ c("li", { className: "flex items-center flex-1 last:flex-none gap-4", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-3 shrink-0", children: [
+        /* @__PURE__ */ e("div", { className: w({ state: v }).stepCircle(), children: v === "completed" ? /* @__PURE__ */ e(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "w-5 h-5",
+            children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ) : /* @__PURE__ */ e("span", { className: "text-sm font-bold", children: p + 1 }) }),
+        /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ e("span", { className: `${w({ state: v }).title()} text-sm font-bold whitespace-nowrap`, children: o.title }),
+          o.description && /* @__PURE__ */ e("span", { className: "text-xs text-km-muted-foreground whitespace-nowrap max-w-[150px] truncate", children: o.description })
+        ] })
+      ] }),
+      !y && /* @__PURE__ */ e(
+        "div",
+        {
+          className: `flex-1 h-[3px] rounded-full transition-all duration-300 ${v === "completed" ? "bg-km-success" : v === "active" ? "bg-gradient-to-r from-km-primary to-km-border" : "bg-km-border"}`.trim()
+        }
+      )
+    ] }, o.title);
+  }) }) : /* @__PURE__ */ e("ol", { className: `${w({ orientation: "vertical" }).root()} ${m}`.trim(), children: a.map((o, p) => {
+    const v = C(p), y = p === a.length - 1;
+    return /* @__PURE__ */ c("li", { className: N.step(), children: [
+      /* @__PURE__ */ c("div", { className: N.stepContainer(), children: [
+        /* @__PURE__ */ e("div", { className: w({ state: v }).stepCircle(), children: v === "completed" ? /* @__PURE__ */ e(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "w-5 h-5",
+            children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ) : /* @__PURE__ */ e("span", { className: "text-sm font-bold", children: p + 1 }) }),
+        !y && /* @__PURE__ */ e(
+          "div",
+          {
+            className: `${w({ state: v, orientation: "vertical" }).connector()} ${v === "active" ? "bg-gradient-to-b from-km-primary to-km-border" : ""}`.trim()
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c("div", { className: N.content(), children: [
+        /* @__PURE__ */ e("span", { className: w({ state: v }).title(), children: o.title }),
+        o.description && /* @__PURE__ */ e("span", { className: N.description(), children: o.description })
+      ] })
+    ] }, o.title);
+  }) });
+}, ie = ({
+  isChecked: a = !1,
+  onChange: t,
+  label: l = "",
+  size: i = "medium",
+  disabled: s = !1,
+  className: n = ""
+}) => {
+  const [m, f] = B(a);
+  E(() => {
+    f(a);
+  }, [a]);
+  const h = () => {
+    if (s) return;
+    const u = !m;
+    f(u), t && t(u);
+  }, r = q({
+    size: i,
+    checked: m,
+    disabled: s
+  });
+  return /* @__PURE__ */ c("div", { className: `${r.root()} ${n}`.trim(), children: [
+    l && /* @__PURE__ */ e("span", { className: r.label(), onClick: h, children: l }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: r.track(),
+        onClick: h,
+        role: "checkbox",
+        "aria-checked": m,
+        "aria-disabled": s,
+        tabIndex: 0,
+        onKeyDown: (u) => {
+          (u.key === " " || u.key === "Enter") && (u.preventDefault(), h());
+        },
+        children: /* @__PURE__ */ e("div", { className: r.thumb() })
+      }
+    )
+  ] });
+};
+export {
+  Z as KmAlert,
+  J as KmBadge,
+  Q as KmButton,
+  X as KmCard,
+  Y as KmInput,
+  ee as KmSelect,
+  ae as KmStack,
+  se as KmStepper,
+  te as KmTextarea,
+  ie as KmToggleSwitch
+};