@lmb-it/kitsconcerto-native 0.1.236

package/components/Stepper/index.cjs

@@ -0,0 +1,144 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../primitives/Box/index.cjs');
+var index_native = require('../../primitives/Text/index.cjs');
+var index_native$1 = require('../../primitives/Icon/index.cjs');
+require('react');
+require('../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../hooks/useComponentDefaults.cjs');
+
+const SIZE = {
+  sm: { bar: 4, dot: 6, node: 20, nodeFont: 10, gap: 6, connector: 2 },
+  md: { bar: 6, dot: 8, node: 28, nodeFont: 13, gap: 6, connector: 2 }
+};
+function clamp(n, min, max) {
+  return Math.min(Math.max(n, min), max);
+}
+function Stepper(rawProps) {
+  const props = useComponentDefaults.default("Stepper", rawProps).mergedProps;
+  const {
+    total,
+    current,
+    variant = "bar",
+    size = "md",
+    labels,
+    activeColor = "brand",
+    trackColor = "gray.200",
+    completeColor,
+    gap,
+    showLabel = false,
+    formatLabel,
+    testID,
+    ...rest
+  } = props;
+  const cfg = SIZE[size === "sm" ? "sm" : "md"];
+  const steps = Math.max(0, Math.floor(total));
+  const cur = clamp(Math.floor(current), 0, steps);
+  const reachedColor = activeColor;
+  const doneColor = completeColor ?? activeColor;
+  const segGap = gap ?? cfg.gap;
+  const a11yProps = {
+    role: "progressbar",
+    "aria-valuenow": cur,
+    "aria-valuemin": 0,
+    "aria-valuemax": steps,
+    ...testID ? { testID, "data-testid": testID } : {}
+  };
+  const caption = showLabel ? formatLabel ? formatLabel(cur, steps) : `Step ${cur} of ${steps}` : null;
+  const indices = Array.from({ length: steps }, (_, i) => i);
+  if (variant === "bar" || variant === "dots") {
+    const isDots = variant === "dots";
+    const segments = indices.map(
+      (i) => isDots ? /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          width: cfg.dot,
+          height: cfg.dot,
+          borderRadius: 999,
+          bgColor: i < cur ? reachedColor : trackColor
+        },
+        i
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          flex: 1,
+          height: cfg.bar,
+          borderRadius: 999,
+          bgColor: i < cur ? reachedColor : trackColor
+        },
+        i
+      )
+    );
+    if (!caption) {
+      return /* @__PURE__ */ jsxRuntime.jsx(index.default, { flexDirection: "row", alignItems: "center", gap: segGap, ...rest, ...a11yProps, children: segments });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.default, { flexDirection: "column", gap: 6, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { fontSize: size === "sm" ? 11 : 12, fontWeight: "600", color: "text-secondary", children: caption }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.default, { flexDirection: "row", alignItems: "center", gap: segGap, ...a11yProps, children: segments })
+    ] });
+  }
+  const node = cfg.node;
+  const half = (i, side) => {
+    const j = side === "left" ? i - 1 : i;
+    const has = side === "left" ? i > 0 : i < steps - 1;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        flex: 1,
+        height: cfg.connector,
+        bgColor: has ? j < cur - 1 ? doneColor : trackColor : "transparent"
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.default, { flexDirection: "column", gap: 6, ...rest, ...a11yProps, children: [
+    caption && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { fontSize: size === "sm" ? 11 : 12, fontWeight: "600", color: "text-secondary", children: caption }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { flexDirection: "row", alignItems: "flex-start", children: indices.map((i) => {
+      const done = i < cur - 1;
+      const active = i === cur - 1;
+      const label = labels?.[i];
+      return /* @__PURE__ */ jsxRuntime.jsxs(index.default, { flex: 1, flexDirection: "column", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(index.default, { flexDirection: "row", alignItems: "center", alignSelf: "stretch", children: [
+          half(i, "left"),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            index.default,
+            {
+              width: node,
+              height: node,
+              borderRadius: 999,
+              alignItems: "center",
+              justifyContent: "center",
+              bgColor: done ? doneColor : "surface-card",
+              borderWidth: done ? 0 : 2,
+              borderColor: active ? activeColor : trackColor,
+              children: done ? /* @__PURE__ */ jsxRuntime.jsx(index_native$1.Icon, { name: "check", size: Math.round(node * 0.5), color: "#FFFFFF" }) : /* @__PURE__ */ jsxRuntime.jsx(
+                index_native.default,
+                {
+                  fontSize: cfg.nodeFont,
+                  fontWeight: "700",
+                  color: active ? activeColor : "ink.400",
+                  children: i + 1
+                }
+              )
+            }
+          ),
+          half(i, "right")
+        ] }),
+        label != null && /* @__PURE__ */ jsxRuntime.jsx(
+          index_native.default,
+          {
+            marginTop: 6,
+            fontSize: size === "sm" ? 10 : 11,
+            fontWeight: active ? "700" : "500",
+            color: active || done ? "text" : "text-secondary",
+            textAlign: "center",
+            children: label
+          }
+        )
+      ] }, i);
+    }) })
+  ] });
+}
+
+exports.Stepper = Stepper;
+//# sourceMappingURL=index.cjs.map

package/components/Stepper/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Stepper/index.tsx"],"sourcesContent":["import React from \"react\";\nimport type {IStepperProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Box, Text, Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n/* ─── Size config ─────────────────────────────────────────────── */\nconst SIZE = {\n    sm: {bar: 4, dot: 6, node: 20, nodeFont: 10, gap: 6, connector: 2},\n    md: {bar: 6, dot: 8, node: 28, nodeFont: 13, gap: 6, connector: 2},\n} as const;\n\nfunction clamp(n: number, min: number, max: number): number {\n    return Math.min(Math.max(n, min), max);\n}\n\n/**\n * Stepper — horizontal progress indicator for multi-step flows.\n *\n * Cross-platform and presentational (Box + Text + Icon). Three variants:\n *  - `bar` (default) — segmented \"Step X of N\" progress bar used in every\n *    onboarding/KYC wizard header.\n *  - `dots` — compact dot row.\n *  - `nodes` — numbered/checked circles with connectors and optional labels\n *    (e.g. the \"Account · Legal · Career · KYC\" completion stepper).\n *\n *   <Stepper total={4} current={1} showLabel />\n *   <Stepper total={6} current={3} variant=\"dots\" />\n *   <Stepper total={4} current={3} variant=\"nodes\" labels={['Account','Legal','Career','KYC']} />\n */\nexport function Stepper(rawProps: IStepperProps) {\n    const props = useComponentDefaults<IStepperProps>(\"Stepper\", rawProps).mergedProps;\n    const {\n        total,\n        current,\n        variant = \"bar\",\n        size = \"md\",\n        labels,\n        activeColor = \"brand\",\n        trackColor = \"gray.200\",\n        completeColor,\n        gap,\n        showLabel = false,\n        formatLabel,\n        testID,\n        ...rest\n    } = props;\n\n    const cfg = SIZE[size === \"sm\" ? \"sm\" : \"md\"];\n    const steps = Math.max(0, Math.floor(total));\n    const cur = clamp(Math.floor(current), 0, steps);\n    const reachedColor = activeColor;\n    const doneColor = completeColor ?? activeColor;\n    const segGap = gap ?? cfg.gap;\n\n    const a11yProps = {\n        role: \"progressbar\",\n        \"aria-valuenow\": cur,\n        \"aria-valuemin\": 0,\n        \"aria-valuemax\": steps,\n        ...(testID ? {testID, \"data-testid\": testID} : {}),\n    } as Record<string, unknown>;\n\n    const caption = showLabel\n        ? (formatLabel ? formatLabel(cur, steps) : `Step ${cur} of ${steps}`)\n        : null;\n\n    const indices = Array.from({length: steps}, (_, i) => i);\n\n    /* ── bar / dots ─────────────────────────────────────────────── */\n    if (variant === \"bar\" || variant === \"dots\") {\n        const isDots = variant === \"dots\";\n        const segments = indices.map(i =>\n            isDots ? (\n                <Box\n                    key={i}\n                    width={cfg.dot}\n                    height={cfg.dot}\n                    borderRadius={999}\n                    bgColor={i < cur ? reachedColor : trackColor}\n                />\n            ) : (\n                <Box\n                    key={i}\n                    flex={1}\n                    height={cfg.bar}\n                    borderRadius={999}\n                    bgColor={i < cur ? reachedColor : trackColor}\n                />\n            ),\n        );\n\n        if (!caption) {\n            return (\n                <Box flexDirection=\"row\" alignItems=\"center\" gap={segGap} {...(rest as any)} {...(a11yProps as any)}>\n                    {segments}\n                </Box>\n            );\n        }\n        return (\n            <Box flexDirection=\"column\" gap={6} {...(rest as any)}>\n                <Text fontSize={size === \"sm\" ? 11 : 12} fontWeight=\"600\" color=\"text-secondary\">\n                    {caption}\n                </Text>\n                <Box flexDirection=\"row\" alignItems=\"center\" gap={segGap} {...(a11yProps as any)}>\n                    {segments}\n                </Box>\n            </Box>\n        );\n    }\n\n    /* ── nodes ──────────────────────────────────────────────────── */\n    const node = cfg.node;\n    const half = (i: number, side: \"left\" | \"right\") => {\n        // connector (j → j+1) is \"passed\" when j < cur-1\n        const j = side === \"left\" ? i - 1 : i;\n        const has = side === \"left\" ? i > 0 : i < steps - 1;\n        return (\n            <Box\n                flex={1}\n                height={cfg.connector}\n                bgColor={has ? (j < cur - 1 ? doneColor : trackColor) : \"transparent\"}\n            />\n        );\n    };\n\n    return (\n        <Box flexDirection=\"column\" gap={6} {...(rest as any)} {...(a11yProps as any)}>\n            {caption && (\n                <Text fontSize={size === \"sm\" ? 11 : 12} fontWeight=\"600\" color=\"text-secondary\">\n                    {caption}\n                </Text>\n            )}\n            <Box flexDirection=\"row\" alignItems=\"flex-start\">\n                {indices.map(i => {\n                    const done = i < cur - 1;\n                    const active = i === cur - 1;\n                    const label = labels?.[i];\n                    return (\n                        <Box key={i} flex={1} flexDirection=\"column\" alignItems=\"center\">\n                            {/* circle row with flanking connector halves */}\n                            <Box flexDirection=\"row\" alignItems=\"center\" alignSelf=\"stretch\">\n                                {half(i, \"left\")}\n                                <Box\n                                    width={node}\n                                    height={node}\n                                    borderRadius={999}\n                                    alignItems=\"center\"\n                                    justifyContent=\"center\"\n                                    bgColor={done ? doneColor : \"surface-card\"}\n                                    borderWidth={done ? 0 : 2}\n                                    borderColor={active ? activeColor : trackColor}\n                                >\n                                    {done ? (\n                                        <Icon name=\"check\" size={Math.round(node * 0.5)} color=\"#FFFFFF\" />\n                                    ) : (\n                                        <Text\n                                            fontSize={cfg.nodeFont}\n                                            fontWeight=\"700\"\n                                            color={active ? activeColor : \"ink.400\"}\n                                        >\n                                            {i + 1}\n                                        </Text>\n                                    )}\n                                </Box>\n                                {half(i, \"right\")}\n                            </Box>\n                            {label != null && (\n                                <Text\n                                    marginTop={6}\n                                    fontSize={size === \"sm\" ? 10 : 11}\n                                    fontWeight={active ? \"700\" : \"500\"}\n                                    color={active || done ? \"text\" : \"text-secondary\"}\n                                    textAlign=\"center\"\n                                >\n                                    {label}\n                                </Text>\n                            )}\n                        </Box>\n                    );\n                })}\n            </Box>\n        </Box>\n    );\n}\n\nexport default Stepper;\n"],"names":["useComponentDefaults","jsx","Box","Text","jsxs","Icon"],"mappings":";;;;;;;;;;AAMA,MAAM,IAAA,GAAO;AAAA,EACT,EAAA,EAAI,EAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAA,EAAG,IAAA,EAAM,EAAA,EAAI,QAAA,EAAU,EAAA,EAAI,GAAA,EAAK,CAAA,EAAG,WAAW,CAAA,EAAC;AAAA,EACjE,EAAA,EAAI,EAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAA,EAAG,IAAA,EAAM,EAAA,EAAI,QAAA,EAAU,EAAA,EAAI,GAAA,EAAK,CAAA,EAAG,WAAW,CAAA;AACpE,CAAA;AAEA,SAAS,KAAA,CAAM,CAAA,EAAW,GAAA,EAAa,GAAA,EAAqB;AACxD,EAAA,OAAO,KAAK,GAAA,CAAI,IAAA,CAAK,IAAI,CAAA,EAAG,GAAG,GAAG,GAAG,CAAA;AACzC;AAgBO,SAAS,QAAQ,QAAA,EAAyB;AAC7C,EAAA,MAAM,KAAA,GAAQA,4BAAA,CAAoC,SAAA,EAAW,QAAQ,CAAA,CAAE,WAAA;AACvE,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA,GAAU,KAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,MAAA;AAAA,IACA,WAAA,GAAc,OAAA;AAAA,IACd,UAAA,GAAa,UAAA;AAAA,IACb,aAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,WAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,KAAA;AAEJ,EAAA,MAAM,GAAA,GAAM,IAAA,CAAK,IAAA,KAAS,IAAA,GAAO,OAAO,IAAI,CAAA;AAC5C,EAAA,MAAM,QAAQ,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,KAAA,CAAM,KAAK,CAAC,CAAA;AAC3C,EAAA,MAAM,MAAM,KAAA,CAAM,IAAA,CAAK,MAAM,OAAO,CAAA,EAAG,GAAG,KAAK,CAAA;AAC/C,EAAA,MAAM,YAAA,GAAe,WAAA;AACrB,EAAA,MAAM,YAAY,aAAA,IAAiB,WAAA;AACnC,EAAA,MAAM,MAAA,GAAS,OAAO,GAAA,CAAI,GAAA;AAE1B,EAAA,MAAM,SAAA,GAAY;AAAA,IACd,IAAA,EAAM,aAAA;AAAA,IACN,eAAA,EAAiB,GAAA;AAAA,IACjB,eAAA,EAAiB,CAAA;AAAA,IACjB,eAAA,EAAiB,KAAA;AAAA,IACjB,GAAI,MAAA,GAAS,EAAC,QAAQ,aAAA,EAAe,MAAA,KAAU;AAAC,GACpD;AAEA,EAAA,MAAM,OAAA,GAAU,SAAA,GACT,WAAA,GAAc,WAAA,CAAY,GAAA,EAAK,KAAK,CAAA,GAAI,CAAA,KAAA,EAAQ,GAAG,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA,GAChE,IAAA;AAEN,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,IAAA,CAAK,EAAC,MAAA,EAAQ,OAAK,EAAG,CAAC,CAAA,EAAG,CAAA,KAAM,CAAC,CAAA;AAGvD,EAAA,IAAI,OAAA,KAAY,KAAA,IAAS,OAAA,KAAY,MAAA,EAAQ;AACzC,IAAA,MAAM,SAAS,OAAA,KAAY,MAAA;AAC3B,IAAA,MAAM,WAAW,OAAA,CAAQ,GAAA;AAAA,MAAI,OACzB,MAAA,mBACIC,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UAEG,OAAO,GAAA,CAAI,GAAA;AAAA,UACX,QAAQ,GAAA,CAAI,GAAA;AAAA,UACZ,YAAA,EAAc,GAAA;AAAA,UACd,OAAA,EAAS,CAAA,GAAI,GAAA,GAAM,YAAA,GAAe;AAAA,SAAA;AAAA,QAJ7B;AAAA,OAKT,mBAEAD,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UAEG,IAAA,EAAM,CAAA;AAAA,UACN,QAAQ,GAAA,CAAI,GAAA;AAAA,UACZ,YAAA,EAAc,GAAA;AAAA,UACd,OAAA,EAAS,CAAA,GAAI,GAAA,GAAM,YAAA,GAAe;AAAA,SAAA;AAAA,QAJ7B;AAAA;AAKT,KAER;AAEA,IAAA,IAAI,CAAC,OAAA,EAAS;AACV,MAAA,uBACID,cAAA,CAACC,aAAA,EAAA,EAAI,aAAA,EAAc,KAAA,EAAM,UAAA,EAAW,QAAA,EAAS,GAAA,EAAK,MAAA,EAAS,GAAI,IAAA,EAAe,GAAI,SAAA,EAC7E,QAAA,EAAA,QAAA,EACL,CAAA;AAAA,IAER;AACA,IAAA,uCACKA,aAAA,EAAA,EAAI,aAAA,EAAc,UAAS,GAAA,EAAK,CAAA,EAAI,GAAI,IAAA,EACrC,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAACE,oBAAA,EAAA,EAAK,QAAA,EAAU,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,IAAI,UAAA,EAAW,KAAA,EAAM,KAAA,EAAM,gBAAA,EAC3D,QAAA,EAAA,OAAA,EACL,CAAA;AAAA,sBACAF,cAAA,CAACC,aAAA,EAAA,EAAI,aAAA,EAAc,KAAA,EAAM,UAAA,EAAW,UAAS,GAAA,EAAK,MAAA,EAAS,GAAI,SAAA,EAC1D,QAAA,EAAA,QAAA,EACL;AAAA,KAAA,EACJ,CAAA;AAAA,EAER;AAGA,EAAA,MAAM,OAAO,GAAA,CAAI,IAAA;AACjB,EAAA,MAAM,IAAA,GAAO,CAAC,CAAA,EAAW,IAAA,KAA2B;AAEhD,IAAA,MAAM,CAAA,GAAI,IAAA,KAAS,MAAA,GAAS,CAAA,GAAI,CAAA,GAAI,CAAA;AACpC,IAAA,MAAM,MAAM,IAAA,KAAS,MAAA,GAAS,CAAA,GAAI,CAAA,GAAI,IAAI,KAAA,GAAQ,CAAA;AAClD,IAAA,uBACID,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACG,IAAA,EAAM,CAAA;AAAA,QACN,QAAQ,GAAA,CAAI,SAAA;AAAA,QACZ,SAAS,GAAA,GAAO,CAAA,GAAI,GAAA,GAAM,CAAA,GAAI,YAAY,UAAA,GAAc;AAAA;AAAA,KAC5D;AAAA,EAER,CAAA;AAEA,EAAA,uBACIE,eAAA,CAACF,iBAAI,aAAA,EAAc,QAAA,EAAS,KAAK,CAAA,EAAI,GAAI,IAAA,EAAe,GAAI,SAAA,EACvD,QAAA,EAAA;AAAA,IAAA,OAAA,oBACGD,cAAA,CAACE,oBAAA,EAAA,EAAK,QAAA,EAAU,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,EAAA,EAAI,UAAA,EAAW,KAAA,EAAM,KAAA,EAAM,gBAAA,EAC3D,QAAA,EAAA,OAAA,EACL,CAAA;AAAA,oBAEJF,cAAA,CAACC,iBAAI,aAAA,EAAc,KAAA,EAAM,YAAW,YAAA,EAC/B,QAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,CAAA,KAAK;AACd,MAAA,MAAM,IAAA,GAAO,IAAI,GAAA,GAAM,CAAA;AACvB,MAAA,MAAM,MAAA,GAAS,MAAM,GAAA,GAAM,CAAA;AAC3B,MAAA,MAAM,KAAA,GAAQ,SAAS,CAAC,CAAA;AACxB,MAAA,uCACKA,aAAA,EAAA,EAAY,IAAA,EAAM,GAAG,aAAA,EAAc,QAAA,EAAS,YAAW,QAAA,EAEpD,QAAA,EAAA;AAAA,wBAAAE,eAAA,CAACF,iBAAI,aAAA,EAAc,KAAA,EAAM,UAAA,EAAW,QAAA,EAAS,WAAU,SAAA,EAClD,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,GAAG,MAAM,CAAA;AAAA,0BACfD,cAAA;AAAA,YAACC,aAAA;AAAA,YAAA;AAAA,cACG,KAAA,EAAO,IAAA;AAAA,cACP,MAAA,EAAQ,IAAA;AAAA,cACR,YAAA,EAAc,GAAA;AAAA,cACd,UAAA,EAAW,QAAA;AAAA,cACX,cAAA,EAAe,QAAA;AAAA,cACf,OAAA,EAAS,OAAO,SAAA,GAAY,cAAA;AAAA,cAC5B,WAAA,EAAa,OAAO,CAAA,GAAI,CAAA;AAAA,cACxB,WAAA,EAAa,SAAS,WAAA,GAAc,UAAA;AAAA,cAEnC,QAAA,EAAA,IAAA,mBACGD,cAAA,CAACI,mBAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,IAAA,EAAM,IAAA,CAAK,KAAA,CAAM,IAAA,GAAO,GAAG,CAAA,EAAG,KAAA,EAAM,WAAU,CAAA,mBAEjEJ,cAAA;AAAA,gBAACE,oBAAA;AAAA,gBAAA;AAAA,kBACG,UAAU,GAAA,CAAI,QAAA;AAAA,kBACd,UAAA,EAAW,KAAA;AAAA,kBACX,KAAA,EAAO,SAAS,WAAA,GAAc,SAAA;AAAA,kBAE7B,QAAA,EAAA,CAAA,GAAI;AAAA;AAAA;AACT;AAAA,WAER;AAAA,UACC,IAAA,CAAK,GAAG,OAAO;AAAA,SAAA,EACpB,CAAA;AAAA,QACC,SAAS,IAAA,oBACNF,cAAA;AAAA,UAACE,oBAAA;AAAA,UAAA;AAAA,YACG,SAAA,EAAW,CAAA;AAAA,YACX,QAAA,EAAU,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,EAAA;AAAA,YAC/B,UAAA,EAAY,SAAS,KAAA,GAAQ,KAAA;AAAA,YAC7B,KAAA,EAAO,MAAA,IAAU,IAAA,GAAO,MAAA,GAAS,gBAAA;AAAA,YACjC,SAAA,EAAU,QAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACL,OAAA,EAAA,EArCE,CAuCV,CAAA;AAAA,IAER,CAAC,CAAA,EACL;AAAA,GAAA,EACJ,CAAA;AAER;;;;"}

package/components/Stepper/index.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from '../../primitives/Box/index.js';
+import Text from '../../primitives/Text/index.js';
+import { Icon } from '../../primitives/Icon/index.js';
+import 'react';
+import '../../contexts/DialogContext.js';
+import useComponentDefaults from '../../hooks/useComponentDefaults.js';
+
+const SIZE = {
+  sm: { bar: 4, dot: 6, node: 20, nodeFont: 10, gap: 6, connector: 2 },
+  md: { bar: 6, dot: 8, node: 28, nodeFont: 13, gap: 6, connector: 2 }
+};
+function clamp(n, min, max) {
+  return Math.min(Math.max(n, min), max);
+}
+function Stepper(rawProps) {
+  const props = useComponentDefaults("Stepper", rawProps).mergedProps;
+  const {
+    total,
+    current,
+    variant = "bar",
+    size = "md",
+    labels,
+    activeColor = "brand",
+    trackColor = "gray.200",
+    completeColor,
+    gap,
+    showLabel = false,
+    formatLabel,
+    testID,
+    ...rest
+  } = props;
+  const cfg = SIZE[size === "sm" ? "sm" : "md"];
+  const steps = Math.max(0, Math.floor(total));
+  const cur = clamp(Math.floor(current), 0, steps);
+  const reachedColor = activeColor;
+  const doneColor = completeColor ?? activeColor;
+  const segGap = gap ?? cfg.gap;
+  const a11yProps = {
+    role: "progressbar",
+    "aria-valuenow": cur,
+    "aria-valuemin": 0,
+    "aria-valuemax": steps,
+    ...testID ? { testID, "data-testid": testID } : {}
+  };
+  const caption = showLabel ? formatLabel ? formatLabel(cur, steps) : `Step ${cur} of ${steps}` : null;
+  const indices = Array.from({ length: steps }, (_, i) => i);
+  if (variant === "bar" || variant === "dots") {
+    const isDots = variant === "dots";
+    const segments = indices.map(
+      (i) => isDots ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          width: cfg.dot,
+          height: cfg.dot,
+          borderRadius: 999,
+          bgColor: i < cur ? reachedColor : trackColor
+        },
+        i
+      ) : /* @__PURE__ */ jsx(
+        Box,
+        {
+          flex: 1,
+          height: cfg.bar,
+          borderRadius: 999,
+          bgColor: i < cur ? reachedColor : trackColor
+        },
+        i
+      )
+    );
+    if (!caption) {
+      return /* @__PURE__ */ jsx(Box, { flexDirection: "row", alignItems: "center", gap: segGap, ...rest, ...a11yProps, children: segments });
+    }
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 6, ...rest, children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: size === "sm" ? 11 : 12, fontWeight: "600", color: "text-secondary", children: caption }),
+      /* @__PURE__ */ jsx(Box, { flexDirection: "row", alignItems: "center", gap: segGap, ...a11yProps, children: segments })
+    ] });
+  }
+  const node = cfg.node;
+  const half = (i, side) => {
+    const j = side === "left" ? i - 1 : i;
+    const has = side === "left" ? i > 0 : i < steps - 1;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        flex: 1,
+        height: cfg.connector,
+        bgColor: has ? j < cur - 1 ? doneColor : trackColor : "transparent"
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 6, ...rest, ...a11yProps, children: [
+    caption && /* @__PURE__ */ jsx(Text, { fontSize: size === "sm" ? 11 : 12, fontWeight: "600", color: "text-secondary", children: caption }),
+    /* @__PURE__ */ jsx(Box, { flexDirection: "row", alignItems: "flex-start", children: indices.map((i) => {
+      const done = i < cur - 1;
+      const active = i === cur - 1;
+      const label = labels?.[i];
+      return /* @__PURE__ */ jsxs(Box, { flex: 1, flexDirection: "column", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", alignSelf: "stretch", children: [
+          half(i, "left"),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              width: node,
+              height: node,
+              borderRadius: 999,
+              alignItems: "center",
+              justifyContent: "center",
+              bgColor: done ? doneColor : "surface-card",
+              borderWidth: done ? 0 : 2,
+              borderColor: active ? activeColor : trackColor,
+              children: done ? /* @__PURE__ */ jsx(Icon, { name: "check", size: Math.round(node * 0.5), color: "#FFFFFF" }) : /* @__PURE__ */ jsx(
+                Text,
+                {
+                  fontSize: cfg.nodeFont,
+                  fontWeight: "700",
+                  color: active ? activeColor : "ink.400",
+                  children: i + 1
+                }
+              )
+            }
+          ),
+          half(i, "right")
+        ] }),
+        label != null && /* @__PURE__ */ jsx(
+          Text,
+          {
+            marginTop: 6,
+            fontSize: size === "sm" ? 10 : 11,
+            fontWeight: active ? "700" : "500",
+            color: active || done ? "text" : "text-secondary",
+            textAlign: "center",
+            children: label
+          }
+        )
+      ] }, i);
+    }) })
+  ] });
+}
+
+export { Stepper };
+//# sourceMappingURL=index.js.map

package/components/Stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Stepper/index.tsx"],"sourcesContent":["import React from \"react\";\nimport type {IStepperProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Box, Text, Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n/* ─── Size config ─────────────────────────────────────────────── */\nconst SIZE = {\n    sm: {bar: 4, dot: 6, node: 20, nodeFont: 10, gap: 6, connector: 2},\n    md: {bar: 6, dot: 8, node: 28, nodeFont: 13, gap: 6, connector: 2},\n} as const;\n\nfunction clamp(n: number, min: number, max: number): number {\n    return Math.min(Math.max(n, min), max);\n}\n\n/**\n * Stepper — horizontal progress indicator for multi-step flows.\n *\n * Cross-platform and presentational (Box + Text + Icon). Three variants:\n *  - `bar` (default) — segmented \"Step X of N\" progress bar used in every\n *    onboarding/KYC wizard header.\n *  - `dots` — compact dot row.\n *  - `nodes` — numbered/checked circles with connectors and optional labels\n *    (e.g. the \"Account · Legal · Career · KYC\" completion stepper).\n *\n *   <Stepper total={4} current={1} showLabel />\n *   <Stepper total={6} current={3} variant=\"dots\" />\n *   <Stepper total={4} current={3} variant=\"nodes\" labels={['Account','Legal','Career','KYC']} />\n */\nexport function Stepper(rawProps: IStepperProps) {\n    const props = useComponentDefaults<IStepperProps>(\"Stepper\", rawProps).mergedProps;\n    const {\n        total,\n        current,\n        variant = \"bar\",\n        size = \"md\",\n        labels,\n        activeColor = \"brand\",\n        trackColor = \"gray.200\",\n        completeColor,\n        gap,\n        showLabel = false,\n        formatLabel,\n        testID,\n        ...rest\n    } = props;\n\n    const cfg = SIZE[size === \"sm\" ? \"sm\" : \"md\"];\n    const steps = Math.max(0, Math.floor(total));\n    const cur = clamp(Math.floor(current), 0, steps);\n    const reachedColor = activeColor;\n    const doneColor = completeColor ?? activeColor;\n    const segGap = gap ?? cfg.gap;\n\n    const a11yProps = {\n        role: \"progressbar\",\n        \"aria-valuenow\": cur,\n        \"aria-valuemin\": 0,\n        \"aria-valuemax\": steps,\n        ...(testID ? {testID, \"data-testid\": testID} : {}),\n    } as Record<string, unknown>;\n\n    const caption = showLabel\n        ? (formatLabel ? formatLabel(cur, steps) : `Step ${cur} of ${steps}`)\n        : null;\n\n    const indices = Array.from({length: steps}, (_, i) => i);\n\n    /* ── bar / dots ─────────────────────────────────────────────── */\n    if (variant === \"bar\" || variant === \"dots\") {\n        const isDots = variant === \"dots\";\n        const segments = indices.map(i =>\n            isDots ? (\n                <Box\n                    key={i}\n                    width={cfg.dot}\n                    height={cfg.dot}\n                    borderRadius={999}\n                    bgColor={i < cur ? reachedColor : trackColor}\n                />\n            ) : (\n                <Box\n                    key={i}\n                    flex={1}\n                    height={cfg.bar}\n                    borderRadius={999}\n                    bgColor={i < cur ? reachedColor : trackColor}\n                />\n            ),\n        );\n\n        if (!caption) {\n            return (\n                <Box flexDirection=\"row\" alignItems=\"center\" gap={segGap} {...(rest as any)} {...(a11yProps as any)}>\n                    {segments}\n                </Box>\n            );\n        }\n        return (\n            <Box flexDirection=\"column\" gap={6} {...(rest as any)}>\n                <Text fontSize={size === \"sm\" ? 11 : 12} fontWeight=\"600\" color=\"text-secondary\">\n                    {caption}\n                </Text>\n                <Box flexDirection=\"row\" alignItems=\"center\" gap={segGap} {...(a11yProps as any)}>\n                    {segments}\n                </Box>\n            </Box>\n        );\n    }\n\n    /* ── nodes ──────────────────────────────────────────────────── */\n    const node = cfg.node;\n    const half = (i: number, side: \"left\" | \"right\") => {\n        // connector (j → j+1) is \"passed\" when j < cur-1\n        const j = side === \"left\" ? i - 1 : i;\n        const has = side === \"left\" ? i > 0 : i < steps - 1;\n        return (\n            <Box\n                flex={1}\n                height={cfg.connector}\n                bgColor={has ? (j < cur - 1 ? doneColor : trackColor) : \"transparent\"}\n            />\n        );\n    };\n\n    return (\n        <Box flexDirection=\"column\" gap={6} {...(rest as any)} {...(a11yProps as any)}>\n            {caption && (\n                <Text fontSize={size === \"sm\" ? 11 : 12} fontWeight=\"600\" color=\"text-secondary\">\n                    {caption}\n                </Text>\n            )}\n            <Box flexDirection=\"row\" alignItems=\"flex-start\">\n                {indices.map(i => {\n                    const done = i < cur - 1;\n                    const active = i === cur - 1;\n                    const label = labels?.[i];\n                    return (\n                        <Box key={i} flex={1} flexDirection=\"column\" alignItems=\"center\">\n                            {/* circle row with flanking connector halves */}\n                            <Box flexDirection=\"row\" alignItems=\"center\" alignSelf=\"stretch\">\n                                {half(i, \"left\")}\n                                <Box\n                                    width={node}\n                                    height={node}\n                                    borderRadius={999}\n                                    alignItems=\"center\"\n                                    justifyContent=\"center\"\n                                    bgColor={done ? doneColor : \"surface-card\"}\n                                    borderWidth={done ? 0 : 2}\n                                    borderColor={active ? activeColor : trackColor}\n                                >\n                                    {done ? (\n                                        <Icon name=\"check\" size={Math.round(node * 0.5)} color=\"#FFFFFF\" />\n                                    ) : (\n                                        <Text\n                                            fontSize={cfg.nodeFont}\n                                            fontWeight=\"700\"\n                                            color={active ? activeColor : \"ink.400\"}\n                                        >\n                                            {i + 1}\n                                        </Text>\n                                    )}\n                                </Box>\n                                {half(i, \"right\")}\n                            </Box>\n                            {label != null && (\n                                <Text\n                                    marginTop={6}\n                                    fontSize={size === \"sm\" ? 10 : 11}\n                                    fontWeight={active ? \"700\" : \"500\"}\n                                    color={active || done ? \"text\" : \"text-secondary\"}\n                                    textAlign=\"center\"\n                                >\n                                    {label}\n                                </Text>\n                            )}\n                        </Box>\n                    );\n                })}\n            </Box>\n        </Box>\n    );\n}\n\nexport default Stepper;\n"],"names":[],"mappings":";;;;;;;;AAMA,MAAM,IAAA,GAAO;AAAA,EACT,EAAA,EAAI,EAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAA,EAAG,IAAA,EAAM,EAAA,EAAI,QAAA,EAAU,EAAA,EAAI,GAAA,EAAK,CAAA,EAAG,WAAW,CAAA,EAAC;AAAA,EACjE,EAAA,EAAI,EAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAA,EAAG,IAAA,EAAM,EAAA,EAAI,QAAA,EAAU,EAAA,EAAI,GAAA,EAAK,CAAA,EAAG,WAAW,CAAA;AACpE,CAAA;AAEA,SAAS,KAAA,CAAM,CAAA,EAAW,GAAA,EAAa,GAAA,EAAqB;AACxD,EAAA,OAAO,KAAK,GAAA,CAAI,IAAA,CAAK,IAAI,CAAA,EAAG,GAAG,GAAG,GAAG,CAAA;AACzC;AAgBO,SAAS,QAAQ,QAAA,EAAyB;AAC7C,EAAA,MAAM,KAAA,GAAQ,oBAAA,CAAoC,SAAA,EAAW,QAAQ,CAAA,CAAE,WAAA;AACvE,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA,GAAU,KAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,MAAA;AAAA,IACA,WAAA,GAAc,OAAA;AAAA,IACd,UAAA,GAAa,UAAA;AAAA,IACb,aAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,WAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,KAAA;AAEJ,EAAA,MAAM,GAAA,GAAM,IAAA,CAAK,IAAA,KAAS,IAAA,GAAO,OAAO,IAAI,CAAA;AAC5C,EAAA,MAAM,QAAQ,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,KAAA,CAAM,KAAK,CAAC,CAAA;AAC3C,EAAA,MAAM,MAAM,KAAA,CAAM,IAAA,CAAK,MAAM,OAAO,CAAA,EAAG,GAAG,KAAK,CAAA;AAC/C,EAAA,MAAM,YAAA,GAAe,WAAA;AACrB,EAAA,MAAM,YAAY,aAAA,IAAiB,WAAA;AACnC,EAAA,MAAM,MAAA,GAAS,OAAO,GAAA,CAAI,GAAA;AAE1B,EAAA,MAAM,SAAA,GAAY;AAAA,IACd,IAAA,EAAM,aAAA;AAAA,IACN,eAAA,EAAiB,GAAA;AAAA,IACjB,eAAA,EAAiB,CAAA;AAAA,IACjB,eAAA,EAAiB,KAAA;AAAA,IACjB,GAAI,MAAA,GAAS,EAAC,QAAQ,aAAA,EAAe,MAAA,KAAU;AAAC,GACpD;AAEA,EAAA,MAAM,OAAA,GAAU,SAAA,GACT,WAAA,GAAc,WAAA,CAAY,GAAA,EAAK,KAAK,CAAA,GAAI,CAAA,KAAA,EAAQ,GAAG,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA,GAChE,IAAA;AAEN,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,IAAA,CAAK,EAAC,MAAA,EAAQ,OAAK,EAAG,CAAC,CAAA,EAAG,CAAA,KAAM,CAAC,CAAA;AAGvD,EAAA,IAAI,OAAA,KAAY,KAAA,IAAS,OAAA,KAAY,MAAA,EAAQ;AACzC,IAAA,MAAM,SAAS,OAAA,KAAY,MAAA;AAC3B,IAAA,MAAM,WAAW,OAAA,CAAQ,GAAA;AAAA,MAAI,OACzB,MAAA,mBACI,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UAEG,OAAO,GAAA,CAAI,GAAA;AAAA,UACX,QAAQ,GAAA,CAAI,GAAA;AAAA,UACZ,YAAA,EAAc,GAAA;AAAA,UACd,OAAA,EAAS,CAAA,GAAI,GAAA,GAAM,YAAA,GAAe;AAAA,SAAA;AAAA,QAJ7B;AAAA,OAKT,mBAEA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UAEG,IAAA,EAAM,CAAA;AAAA,UACN,QAAQ,GAAA,CAAI,GAAA;AAAA,UACZ,YAAA,EAAc,GAAA;AAAA,UACd,OAAA,EAAS,CAAA,GAAI,GAAA,GAAM,YAAA,GAAe;AAAA,SAAA;AAAA,QAJ7B;AAAA;AAKT,KAER;AAEA,IAAA,IAAI,CAAC,OAAA,EAAS;AACV,MAAA,uBACI,GAAA,CAAC,GAAA,EAAA,EAAI,aAAA,EAAc,KAAA,EAAM,UAAA,EAAW,QAAA,EAAS,GAAA,EAAK,MAAA,EAAS,GAAI,IAAA,EAAe,GAAI,SAAA,EAC7E,QAAA,EAAA,QAAA,EACL,CAAA;AAAA,IAER;AACA,IAAA,4BACK,GAAA,EAAA,EAAI,aAAA,EAAc,UAAS,GAAA,EAAK,CAAA,EAAI,GAAI,IAAA,EACrC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,QAAA,EAAU,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,IAAI,UAAA,EAAW,KAAA,EAAM,KAAA,EAAM,gBAAA,EAC3D,QAAA,EAAA,OAAA,EACL,CAAA;AAAA,sBACA,GAAA,CAAC,GAAA,EAAA,EAAI,aAAA,EAAc,KAAA,EAAM,UAAA,EAAW,UAAS,GAAA,EAAK,MAAA,EAAS,GAAI,SAAA,EAC1D,QAAA,EAAA,QAAA,EACL;AAAA,KAAA,EACJ,CAAA;AAAA,EAER;AAGA,EAAA,MAAM,OAAO,GAAA,CAAI,IAAA;AACjB,EAAA,MAAM,IAAA,GAAO,CAAC,CAAA,EAAW,IAAA,KAA2B;AAEhD,IAAA,MAAM,CAAA,GAAI,IAAA,KAAS,MAAA,GAAS,CAAA,GAAI,CAAA,GAAI,CAAA;AACpC,IAAA,MAAM,MAAM,IAAA,KAAS,MAAA,GAAS,CAAA,GAAI,CAAA,GAAI,IAAI,KAAA,GAAQ,CAAA;AAClD,IAAA,uBACI,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACG,IAAA,EAAM,CAAA;AAAA,QACN,QAAQ,GAAA,CAAI,SAAA;AAAA,QACZ,SAAS,GAAA,GAAO,CAAA,GAAI,GAAA,GAAM,CAAA,GAAI,YAAY,UAAA,GAAc;AAAA;AAAA,KAC5D;AAAA,EAER,CAAA;AAEA,EAAA,uBACI,IAAA,CAAC,OAAI,aAAA,EAAc,QAAA,EAAS,KAAK,CAAA,EAAI,GAAI,IAAA,EAAe,GAAI,SAAA,EACvD,QAAA,EAAA;AAAA,IAAA,OAAA,oBACG,GAAA,CAAC,IAAA,EAAA,EAAK,QAAA,EAAU,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,EAAA,EAAI,UAAA,EAAW,KAAA,EAAM,KAAA,EAAM,gBAAA,EAC3D,QAAA,EAAA,OAAA,EACL,CAAA;AAAA,oBAEJ,GAAA,CAAC,OAAI,aAAA,EAAc,KAAA,EAAM,YAAW,YAAA,EAC/B,QAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,CAAA,KAAK;AACd,MAAA,MAAM,IAAA,GAAO,IAAI,GAAA,GAAM,CAAA;AACvB,MAAA,MAAM,MAAA,GAAS,MAAM,GAAA,GAAM,CAAA;AAC3B,MAAA,MAAM,KAAA,GAAQ,SAAS,CAAC,CAAA;AACxB,MAAA,4BACK,GAAA,EAAA,EAAY,IAAA,EAAM,GAAG,aAAA,EAAc,QAAA,EAAS,YAAW,QAAA,EAEpD,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,OAAI,aAAA,EAAc,KAAA,EAAM,UAAA,EAAW,QAAA,EAAS,WAAU,SAAA,EAClD,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,GAAG,MAAM,CAAA;AAAA,0BACf,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACG,KAAA,EAAO,IAAA;AAAA,cACP,MAAA,EAAQ,IAAA;AAAA,cACR,YAAA,EAAc,GAAA;AAAA,cACd,UAAA,EAAW,QAAA;AAAA,cACX,cAAA,EAAe,QAAA;AAAA,cACf,OAAA,EAAS,OAAO,SAAA,GAAY,cAAA;AAAA,cAC5B,WAAA,EAAa,OAAO,CAAA,GAAI,CAAA;AAAA,cACxB,WAAA,EAAa,SAAS,WAAA,GAAc,UAAA;AAAA,cAEnC,QAAA,EAAA,IAAA,mBACG,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,IAAA,EAAM,IAAA,CAAK,KAAA,CAAM,IAAA,GAAO,GAAG,CAAA,EAAG,KAAA,EAAM,WAAU,CAAA,mBAEjE,GAAA;AAAA,gBAAC,IAAA;AAAA,gBAAA;AAAA,kBACG,UAAU,GAAA,CAAI,QAAA;AAAA,kBACd,UAAA,EAAW,KAAA;AAAA,kBACX,KAAA,EAAO,SAAS,WAAA,GAAc,SAAA;AAAA,kBAE7B,QAAA,EAAA,CAAA,GAAI;AAAA;AAAA;AACT;AAAA,WAER;AAAA,UACC,IAAA,CAAK,GAAG,OAAO;AAAA,SAAA,EACpB,CAAA;AAAA,QACC,SAAS,IAAA,oBACN,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACG,SAAA,EAAW,CAAA;AAAA,YACX,QAAA,EAAU,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,EAAA;AAAA,YAC/B,UAAA,EAAY,SAAS,KAAA,GAAQ,KAAA;AAAA,YAC7B,KAAA,EAAO,MAAA,IAAU,IAAA,GAAO,MAAA,GAAS,gBAAA;AAAA,YACjC,SAAA,EAAU,QAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACL,OAAA,EAAA,EArCE,CAuCV,CAAA;AAAA,IAER,CAAC,CAAA,EACL;AAAA,GAAA,EACJ,CAAA;AAER;;;;"}

package/components/Tabs/index.cjs

@@ -0,0 +1,149 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactNative = require('react-native');
+require('../../apps/mobile/src/ui/accordion/index.cjs');
+require('../../apps/mobile/src/ui/actionsheet/index.cjs');
+require('../../apps/mobile/src/ui/alert/index.cjs');
+require('../../apps/mobile/src/ui/alert-dialog/index.cjs');
+require('../../apps/mobile/src/ui/avatar/index.cjs');
+require('../../apps/mobile/src/ui/badge/index.cjs');
+require('../../apps/mobile/src/ui/bottomsheet/index.cjs');
+require('../../apps/mobile/src/ui/box/index.cjs');
+require('../../apps/mobile/src/ui/button/index.cjs');
+require('../../apps/mobile/src/ui/card/index.cjs');
+require('../../apps/mobile/src/ui/center/index.cjs');
+require('../../apps/mobile/src/ui/checkbox/index.cjs');
+require('../../apps/mobile/src/ui/divider/index.cjs');
+require('../../apps/mobile/src/ui/drawer/index.cjs');
+require('../../apps/mobile/src/ui/fab/index.cjs');
+require('../../apps/mobile/src/ui/form-control/index.cjs');
+require('react');
+require('../../apps/mobile/src/ui/gluestack-ui-provider/config.cjs');
+require('@gluestack-ui/core/overlay/creator');
+require('@gluestack-ui/core/toast/creator');
+require('nativewind');
+require('../../apps/mobile/src/ui/grid/index.cjs');
+require('../../apps/mobile/src/ui/heading/index.cjs');
+require('../../apps/mobile/src/ui/hstack/index.cjs');
+require('../../apps/mobile/src/ui/icon/index.cjs');
+require('../../apps/mobile/src/ui/image/index.cjs');
+require('../../apps/mobile/src/ui/image-background/index.cjs');
+require('../../apps/mobile/src/ui/input/index.cjs');
+require('../../apps/mobile/src/ui/link/index.cjs');
+require('../../apps/mobile/src/ui/menu/index.cjs');
+require('../../apps/mobile/src/ui/modal/index.cjs');
+require('../../apps/mobile/src/ui/popover/index.cjs');
+require('../../apps/mobile/src/ui/portal/index.cjs');
+require('../../apps/mobile/src/ui/pressable/index.cjs');
+require('../../apps/mobile/src/ui/progress/index.cjs');
+require('../../apps/mobile/src/ui/radio/index.cjs');
+require('react-native-safe-area-context');
+require('../../apps/mobile/src/ui/select/index.cjs');
+require('../../apps/mobile/src/ui/skeleton/index.cjs');
+require('../../apps/mobile/src/ui/slider/index.cjs');
+require('../../apps/mobile/src/ui/spinner/index.cjs');
+require('../../apps/mobile/src/ui/switch/index.cjs');
+require('../../apps/mobile/src/ui/table/index.cjs');
+require('../../apps/mobile/src/ui/text/index.cjs');
+require('../../apps/mobile/src/ui/textarea/index.cjs');
+require('../../apps/mobile/src/ui/toast/index.cjs');
+require('../../apps/mobile/src/ui/tooltip/index.cjs');
+require('../../apps/mobile/src/ui/vstack/index.cjs');
+require('react-native-reanimated');
+var style = require('../../apps/mobile/src/Factory/helpers/style.cjs');
+require('../../apps/mobile/src/Factory/DimensionsContext.cjs');
+require('react-icons/fa');
+require('react-icons/ai');
+require('react-icons/io');
+require('../../packages/types/src/Components/Molecules/Form/FilePicker/types/filesTypes.cjs');
+require('yup');
+require('../../packages/types/src/Css/map/index.cjs');
+require('../../packages/types/src/Theme/shadows.cjs');
+require('../../packages/types/src/Theme/defaultTheme.cjs');
+require('i18next');
+require('react-i18next');
+require('../../apps/mobile/src/Core/AutoComplete/index.cjs');
+require('../../apps/mobile/src/Core/Dropdown/index.cjs');
+require('../../apps/mobile/src/Core/MultiSelect/index.cjs');
+require('../../apps/mobile/src/Core/Trees/components/CoreTree.cjs');
+require('../../apps/mobile/src/Core/Trees/components/CoreTreeSelect.cjs');
+require('../../apps/mobile/src/Core/Trees/components/CoreToolbar.cjs');
+require('../../apps/mobile/src/Core/Paginator/index.cjs');
+require('lucide-react-native');
+require('../../apps/mobile/src/Core/SelectButton/index.cjs');
+require('../../apps/mobile/src/Core/DataTable/DataTable.cjs');
+require('../../apps/mobile/src/Core/Tag/index.cjs');
+require('../../apps/mobile/src/Core/Badge/index.cjs');
+require('../../apps/mobile/src/Core/ProgressBar/index.cjs');
+require('../../apps/mobile/src/Core/Checkbox/index.cjs');
+require('../../apps/mobile/src/Core/RadioButton/index.cjs');
+require('../../apps/mobile/src/Core/Input/index.cjs');
+require('../../apps/mobile/src/Core/Input/Field.cjs');
+require('../../apps/mobile/src/Core/Input/Slot.cjs');
+var index_native$1 = require('../../primitives/Text/index.cjs');
+var index_native = require('../../primitives/Icon/index.cjs');
+require('../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../hooks/useComponentDefaults.cjs');
+
+const SIZE = {
+  sm: { h: 28, px: 12, fs: 12 },
+  md: { h: 32, px: 14, fs: 13 },
+  lg: { h: 40, px: 18, fs: 15 }
+};
+function Tabs(rawProps) {
+  const props = useComponentDefaults.default("Tabs", rawProps).mergedProps;
+  const { items, value, onChange, size = "md", activeColor = "brand", scrollable = true, gap = 8, testID } = props;
+  const cfg = SIZE[size] ?? SIZE.md;
+  const activeBg = style.resolveThemeTokenForNative(activeColor);
+  const inactiveBg = style.resolveThemeTokenForNative("gray.100");
+  const inactiveText = style.resolveThemeTokenForNative("text-secondary");
+  const renderChip = (item) => {
+    const active = item.key === value;
+    const label = item.count != null ? `${item.label}  ${item.count}` : item.label;
+    const fg = active ? "#FFFFFF" : inactiveText;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.TouchableOpacity,
+      {
+        activeOpacity: 0.75,
+        disabled: item.disabled,
+        onPress: () => onChange(item.key),
+        accessibilityRole: "button",
+        accessibilityState: { selected: active },
+        style: {
+          height: cfg.h,
+          borderRadius: 999,
+          paddingHorizontal: cfg.px,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          backgroundColor: active ? activeBg : inactiveBg,
+          opacity: item.disabled ? 0.5 : 1
+        },
+        children: [
+          item.icon != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.Icon, { name: item.icon, size: cfg.fs + 1, color: fg }),
+          /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { fontSize: cfg.fs, fontWeight: "600", color: fg, children: label })
+        ]
+      },
+      item.key
+    );
+  };
+  if (!scrollable) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap }, testID, children: items.map(renderChip) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      contentContainerStyle: { flexDirection: "row", alignItems: "center", gap, paddingVertical: 4 },
+      testID,
+      children: items.map(renderChip)
+    }
+  );
+}
+
+exports.Tabs = Tabs;
+//# sourceMappingURL=index.cjs.map

package/components/Tabs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Tabs/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {ScrollView, TouchableOpacity, View} from \"react-native\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {ITabsProps, ITabItem} from \"@lmb-it/kitsconcerto-types\";\nimport {Text, Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n// Mirrors the app's FilterChips (App/src/components/shared/FilterChips).\nconst SIZE = {\n    sm: {h: 28, px: 12, fs: 12},\n    md: {h: 32, px: 14, fs: 13},\n    lg: {h: 40, px: 18, fs: 15},\n} as const;\n\n/**\n * Tabs (native) — horizontally-scrollable selectable filter row.\n *\n * Built like the app's working `FilterChips`: a RN horizontal `ScrollView` of\n * `TouchableOpacity` pills + the library `Text`. Active = filled `activeColor`;\n * inactive = neutral tint. Colours resolve via the standalone token resolver.\n */\nexport function Tabs<K extends string = string>(rawProps: ITabsProps<K>) {\n    const props = useComponentDefaults<ITabsProps<K>>(\"Tabs\", rawProps).mergedProps;\n    const {items, value, onChange, size = \"md\", activeColor = \"brand\", scrollable = true, gap = 8, testID} = props;\n\n    const cfg = SIZE[size] ?? SIZE.md;\n    const activeBg = resolveThemeTokenForNative(activeColor);\n    const inactiveBg = resolveThemeTokenForNative(\"gray.100\");\n    const inactiveText = resolveThemeTokenForNative(\"text-secondary\");\n\n    const renderChip = (item: ITabItem<K>) => {\n        const active = item.key === value;\n        const label = item.count != null ? `${item.label}  ${item.count}` : item.label;\n        const fg = active ? \"#FFFFFF\" : inactiveText;\n        return (\n            <TouchableOpacity\n                key={item.key}\n                activeOpacity={0.75}\n                disabled={item.disabled}\n                onPress={() => onChange(item.key)}\n                accessibilityRole=\"button\"\n                accessibilityState={{selected: active}}\n                style={{\n                    height: cfg.h,\n                    borderRadius: 999,\n                    paddingHorizontal: cfg.px,\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: 6,\n                    backgroundColor: active ? activeBg : inactiveBg,\n                    opacity: item.disabled ? 0.5 : 1,\n                }}\n            >\n                {item.icon != null && <Icon name={item.icon as never} size={cfg.fs + 1} color={fg} />}\n                <Text fontSize={cfg.fs} fontWeight=\"600\" color={fg}>\n                    {label}\n                </Text>\n            </TouchableOpacity>\n        );\n    };\n\n    if (!scrollable) {\n        return (\n            <View style={{flexDirection: \"row\", flexWrap: \"wrap\", alignItems: \"center\", gap}} testID={testID}>\n                {items.map(renderChip)}\n            </View>\n        );\n    }\n\n    return (\n        <ScrollView\n            horizontal\n            showsHorizontalScrollIndicator={false}\n            keyboardShouldPersistTaps=\"handled\"\n            contentContainerStyle={{flexDirection: \"row\", alignItems: \"center\", gap, paddingVertical: 4}}\n            testID={testID}\n        >\n            {items.map(renderChip)}\n        </ScrollView>\n    );\n}\n\nexport default Tabs;\n"],"names":["useComponentDefaults","resolveThemeTokenForNative","jsxs","TouchableOpacity","jsx","Icon","Text","View","ScrollView"],"mappings":"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"}