@lmb-it/kitsconcerto-native 0.1.236

package/components/PersonCard/index.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { Pressable } from 'react-native';
+import { PersonCardContent } from './content.js';
+
+function PersonCard(props) {
+  const { onPress, disabled = false, testID } = props;
+  if (!onPress) {
+    return /* @__PURE__ */ jsx(PersonCardContent, { ...props, testID });
+  }
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: props.name,
+      testID,
+      children: /* @__PURE__ */ jsx(PersonCardContent, { ...props, testID: void 0 })
+    }
+  );
+}
+
+export { PersonCard };
+//# sourceMappingURL=index.js.map

package/components/PersonCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/PersonCard/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {Pressable} from \"react-native\";\nimport type {IPersonCardProps} from \"@lmb-it/kitsconcerto-types\";\nimport PersonCardContent from \"./content\";\n\n/**\n * PersonCard (native) — avatar + name + subtitle/meta row used for member\n * rows and person confirmations inside sheets. All layout lives in the shared\n * `content.tsx`; this wrapper only adds the press behaviour.\n *\n * Press wrapper uses a STATIC Pressable (no style-as-function — that pattern\n * does not work with the RN style pipeline here) mirroring the Card primitive.\n */\nexport function PersonCard(props: IPersonCardProps) {\n    const {onPress, disabled = false, testID} = props;\n\n    if (!onPress) {\n        return <PersonCardContent {...props} testID={testID} />;\n    }\n\n    return (\n        <Pressable\n            onPress={disabled ? undefined : onPress}\n            disabled={disabled}\n            accessibilityRole=\"button\"\n            accessibilityLabel={props.name}\n            testID={testID}\n        >\n            <PersonCardContent {...props} testID={undefined} />\n        </Pressable>\n    );\n}\n\nexport default PersonCard;\n"],"names":[],"mappings":";;;;AAaO,SAAS,WAAW,KAAA,EAAyB;AAChD,EAAA,MAAM,EAAC,OAAA,EAAS,QAAA,GAAW,KAAA,EAAO,QAAM,GAAI,KAAA;AAE5C,EAAA,IAAI,CAAC,OAAA,EAAS;AACV,IAAA,uBAAO,GAAA,CAAC,iBAAA,EAAA,EAAmB,GAAG,KAAA,EAAO,MAAA,EAAgB,CAAA;AAAA,EACzD;AAEA,EAAA,uBACI,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACG,OAAA,EAAS,WAAW,MAAA,GAAY,OAAA;AAAA,MAChC,QAAA;AAAA,MACA,iBAAA,EAAkB,QAAA;AAAA,MAClB,oBAAoB,KAAA,CAAM,IAAA;AAAA,MAC1B,MAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAmB,GAAG,KAAA,EAAO,QAAQ,MAAA,EAAW;AAAA;AAAA,GACrD;AAER;;;;"}

package/components/ProgressBar/index.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../primitives/Box/index.cjs');
+var index_native = require('../../primitives/Text/index.cjs');
+require('react');
+require('../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../hooks/useComponentDefaults.cjs');
+
+function clamp(n, min, max) {
+  return Math.min(Math.max(n, min), max);
+}
+function ProgressBar(rawProps) {
+  const props = useComponentDefaults.default("ProgressBar", rawProps).mergedProps;
+  const {
+    value,
+    max = 100,
+    color = "brand",
+    trackColor = "gray.200",
+    thickness = 8,
+    rounded = true,
+    showLabel = false,
+    formatLabel,
+    testID,
+    ...rest
+  } = props;
+  const safeMax = max <= 0 ? 100 : max;
+  const pct = clamp(value / safeMax * 100, 0, 100);
+  const radius = rounded ? 999 : 0;
+  const caption = showLabel ? formatLabel ? formatLabel(value, safeMax, Math.round(pct)) : `${Math.round(pct)}%` : null;
+  const a11yProps = {
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": safeMax,
+    ...testID ? { testID, "data-testid": testID } : {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.default, { flexDirection: "column", gap: 6, ...rest, ...a11yProps, children: [
+    caption != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { fontSize: 12, fontWeight: "600", color: "text-secondary", children: caption }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { width: "100%", height: thickness, borderRadius: radius, bgColor: trackColor, overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { width: `${pct}%`, height: "100%", borderRadius: radius, bgColor: color }) })
+  ] });
+}
+
+exports.ProgressBar = ProgressBar;
+//# sourceMappingURL=index.cjs.map

package/components/ProgressBar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React from \"react\";\nimport type {IProgressBarProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Box, Text} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\nfunction clamp(n: number, min: number, max: number): number {\n    return Math.min(Math.max(n, min), max);\n}\n\n/**\n * ProgressBar — determinate linear progress.\n *\n * Cross-platform and presentational (Box + Text). Used for the verification\n * tier progress (\"2 of 6 approved · 67%\"), AI confidence, and upload progress.\n *\n *   <ProgressBar value={67} />\n *   <ProgressBar value={2} max={6} showLabel formatLabel={(v,m)=>`${v} of ${m}`} />\n */\nexport function ProgressBar(rawProps: IProgressBarProps) {\n    const props = useComponentDefaults<IProgressBarProps>(\"ProgressBar\", rawProps).mergedProps;\n    const {\n        value,\n        max = 100,\n        color = \"brand\",\n        trackColor = \"gray.200\",\n        thickness = 8,\n        rounded = true,\n        showLabel = false,\n        formatLabel,\n        testID,\n        ...rest\n    } = props;\n\n    const safeMax = max <= 0 ? 100 : max;\n    const pct = clamp((value / safeMax) * 100, 0, 100);\n    const radius = rounded ? 999 : 0;\n\n    const caption = showLabel ? (formatLabel ? formatLabel(value, safeMax, Math.round(pct)) : `${Math.round(pct)}%`) : null;\n\n    const a11yProps = {\n        role: \"progressbar\",\n        \"aria-valuenow\": value,\n        \"aria-valuemin\": 0,\n        \"aria-valuemax\": safeMax,\n        ...(testID ? {testID, \"data-testid\": testID} : {}),\n    } as Record<string, unknown>;\n\n    return (\n        <Box flexDirection=\"column\" gap={6} {...(rest as any)} {...(a11yProps as any)}>\n            {caption != null && (\n                <Text fontSize={12} fontWeight=\"600\" color=\"text-secondary\">\n                    {caption}\n                </Text>\n            )}\n            <Box width=\"100%\" height={thickness} borderRadius={radius} bgColor={trackColor} overflow=\"hidden\">\n                <Box width={`${pct}%`} height=\"100%\" borderRadius={radius} bgColor={color} />\n            </Box>\n        </Box>\n    );\n}\n\nexport default ProgressBar;\n"],"names":["useComponentDefaults","jsxs","Box","Text","jsx"],"mappings":";;;;;;;;;AAKA,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;AAWO,SAAS,YAAY,QAAA,EAA6B;AACrD,EAAA,MAAM,KAAA,GAAQA,4BAAA,CAAwC,aAAA,EAAe,QAAQ,CAAA,CAAE,WAAA;AAC/E,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,GAAA,GAAM,GAAA;AAAA,IACN,KAAA,GAAQ,OAAA;AAAA,IACR,UAAA,GAAa,UAAA;AAAA,IACb,SAAA,GAAY,CAAA;AAAA,IACZ,OAAA,GAAU,IAAA;AAAA,IACV,SAAA,GAAY,KAAA;AAAA,IACZ,WAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,KAAA;AAEJ,EAAA,MAAM,OAAA,GAAU,GAAA,IAAO,CAAA,GAAI,GAAA,GAAM,GAAA;AACjC,EAAA,MAAM,MAAM,KAAA,CAAO,KAAA,GAAQ,OAAA,GAAW,GAAA,EAAK,GAAG,GAAG,CAAA;AACjD,EAAA,MAAM,MAAA,GAAS,UAAU,GAAA,GAAM,CAAA;AAE/B,EAAA,MAAM,UAAU,SAAA,GAAa,WAAA,GAAc,WAAA,CAAY,KAAA,EAAO,SAAS,IAAA,CAAK,KAAA,CAAM,GAAG,CAAC,IAAI,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,GAAG,CAAC,CAAA,CAAA,CAAA,GAAO,IAAA;AAEnH,EAAA,MAAM,SAAA,GAAY;AAAA,IACd,IAAA,EAAM,aAAA;AAAA,IACN,eAAA,EAAiB,KAAA;AAAA,IACjB,eAAA,EAAiB,CAAA;AAAA,IACjB,eAAA,EAAiB,OAAA;AAAA,IACjB,GAAI,MAAA,GAAS,EAAC,QAAQ,aAAA,EAAe,MAAA,KAAU;AAAC,GACpD;AAEA,EAAA,uBACIC,eAAA,CAACC,iBAAI,aAAA,EAAc,QAAA,EAAS,KAAK,CAAA,EAAI,GAAI,IAAA,EAAe,GAAI,SAAA,EACvD,QAAA,EAAA;AAAA,IAAA,OAAA,IAAW,IAAA,mCACPC,oBAAA,EAAA,EAAK,QAAA,EAAU,IAAI,UAAA,EAAW,KAAA,EAAM,KAAA,EAAM,gBAAA,EACtC,QAAA,EAAA,OAAA,EACL,CAAA;AAAA,oBAEJC,cAAA,CAACF,aAAA,EAAA,EAAI,KAAA,EAAM,MAAA,EAAO,MAAA,EAAQ,WAAW,YAAA,EAAc,MAAA,EAAQ,OAAA,EAAS,UAAA,EAAY,QAAA,EAAS,QAAA,EACrF,yCAACA,aAAA,EAAA,EAAI,KAAA,EAAO,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA,EAAK,MAAA,EAAO,QAAO,YAAA,EAAc,MAAA,EAAQ,OAAA,EAAS,KAAA,EAAO,CAAA,EAC/E;AAAA,GAAA,EACJ,CAAA;AAER;;;;"}

package/components/ProgressBar/index.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '../../primitives/Box/index.js';
+import Text from '../../primitives/Text/index.js';
+import 'react';
+import '../../contexts/DialogContext.js';
+import useComponentDefaults from '../../hooks/useComponentDefaults.js';
+
+function clamp(n, min, max) {
+  return Math.min(Math.max(n, min), max);
+}
+function ProgressBar(rawProps) {
+  const props = useComponentDefaults("ProgressBar", rawProps).mergedProps;
+  const {
+    value,
+    max = 100,
+    color = "brand",
+    trackColor = "gray.200",
+    thickness = 8,
+    rounded = true,
+    showLabel = false,
+    formatLabel,
+    testID,
+    ...rest
+  } = props;
+  const safeMax = max <= 0 ? 100 : max;
+  const pct = clamp(value / safeMax * 100, 0, 100);
+  const radius = rounded ? 999 : 0;
+  const caption = showLabel ? formatLabel ? formatLabel(value, safeMax, Math.round(pct)) : `${Math.round(pct)}%` : null;
+  const a11yProps = {
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": safeMax,
+    ...testID ? { testID, "data-testid": testID } : {}
+  };
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 6, ...rest, ...a11yProps, children: [
+    caption != null && /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: "text-secondary", children: caption }),
+    /* @__PURE__ */ jsx(Box, { width: "100%", height: thickness, borderRadius: radius, bgColor: trackColor, overflow: "hidden", children: /* @__PURE__ */ jsx(Box, { width: `${pct}%`, height: "100%", borderRadius: radius, bgColor: color }) })
+  ] });
+}
+
+export { ProgressBar };
+//# sourceMappingURL=index.js.map

package/components/ProgressBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React from \"react\";\nimport type {IProgressBarProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Box, Text} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\nfunction clamp(n: number, min: number, max: number): number {\n    return Math.min(Math.max(n, min), max);\n}\n\n/**\n * ProgressBar — determinate linear progress.\n *\n * Cross-platform and presentational (Box + Text). Used for the verification\n * tier progress (\"2 of 6 approved · 67%\"), AI confidence, and upload progress.\n *\n *   <ProgressBar value={67} />\n *   <ProgressBar value={2} max={6} showLabel formatLabel={(v,m)=>`${v} of ${m}`} />\n */\nexport function ProgressBar(rawProps: IProgressBarProps) {\n    const props = useComponentDefaults<IProgressBarProps>(\"ProgressBar\", rawProps).mergedProps;\n    const {\n        value,\n        max = 100,\n        color = \"brand\",\n        trackColor = \"gray.200\",\n        thickness = 8,\n        rounded = true,\n        showLabel = false,\n        formatLabel,\n        testID,\n        ...rest\n    } = props;\n\n    const safeMax = max <= 0 ? 100 : max;\n    const pct = clamp((value / safeMax) * 100, 0, 100);\n    const radius = rounded ? 999 : 0;\n\n    const caption = showLabel ? (formatLabel ? formatLabel(value, safeMax, Math.round(pct)) : `${Math.round(pct)}%`) : null;\n\n    const a11yProps = {\n        role: \"progressbar\",\n        \"aria-valuenow\": value,\n        \"aria-valuemin\": 0,\n        \"aria-valuemax\": safeMax,\n        ...(testID ? {testID, \"data-testid\": testID} : {}),\n    } as Record<string, unknown>;\n\n    return (\n        <Box flexDirection=\"column\" gap={6} {...(rest as any)} {...(a11yProps as any)}>\n            {caption != null && (\n                <Text fontSize={12} fontWeight=\"600\" color=\"text-secondary\">\n                    {caption}\n                </Text>\n            )}\n            <Box width=\"100%\" height={thickness} borderRadius={radius} bgColor={trackColor} overflow=\"hidden\">\n                <Box width={`${pct}%`} height=\"100%\" borderRadius={radius} bgColor={color} />\n            </Box>\n        </Box>\n    );\n}\n\nexport default ProgressBar;\n"],"names":[],"mappings":";;;;;;;AAKA,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;AAWO,SAAS,YAAY,QAAA,EAA6B;AACrD,EAAA,MAAM,KAAA,GAAQ,oBAAA,CAAwC,aAAA,EAAe,QAAQ,CAAA,CAAE,WAAA;AAC/E,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,GAAA,GAAM,GAAA;AAAA,IACN,KAAA,GAAQ,OAAA;AAAA,IACR,UAAA,GAAa,UAAA;AAAA,IACb,SAAA,GAAY,CAAA;AAAA,IACZ,OAAA,GAAU,IAAA;AAAA,IACV,SAAA,GAAY,KAAA;AAAA,IACZ,WAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,KAAA;AAEJ,EAAA,MAAM,OAAA,GAAU,GAAA,IAAO,CAAA,GAAI,GAAA,GAAM,GAAA;AACjC,EAAA,MAAM,MAAM,KAAA,CAAO,KAAA,GAAQ,OAAA,GAAW,GAAA,EAAK,GAAG,GAAG,CAAA;AACjD,EAAA,MAAM,MAAA,GAAS,UAAU,GAAA,GAAM,CAAA;AAE/B,EAAA,MAAM,UAAU,SAAA,GAAa,WAAA,GAAc,WAAA,CAAY,KAAA,EAAO,SAAS,IAAA,CAAK,KAAA,CAAM,GAAG,CAAC,IAAI,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,GAAG,CAAC,CAAA,CAAA,CAAA,GAAO,IAAA;AAEnH,EAAA,MAAM,SAAA,GAAY;AAAA,IACd,IAAA,EAAM,aAAA;AAAA,IACN,eAAA,EAAiB,KAAA;AAAA,IACjB,eAAA,EAAiB,CAAA;AAAA,IACjB,eAAA,EAAiB,OAAA;AAAA,IACjB,GAAI,MAAA,GAAS,EAAC,QAAQ,aAAA,EAAe,MAAA,KAAU;AAAC,GACpD;AAEA,EAAA,uBACI,IAAA,CAAC,OAAI,aAAA,EAAc,QAAA,EAAS,KAAK,CAAA,EAAI,GAAI,IAAA,EAAe,GAAI,SAAA,EACvD,QAAA,EAAA;AAAA,IAAA,OAAA,IAAW,IAAA,wBACP,IAAA,EAAA,EAAK,QAAA,EAAU,IAAI,UAAA,EAAW,KAAA,EAAM,KAAA,EAAM,gBAAA,EACtC,QAAA,EAAA,OAAA,EACL,CAAA;AAAA,oBAEJ,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,MAAA,EAAO,MAAA,EAAQ,WAAW,YAAA,EAAc,MAAA,EAAQ,OAAA,EAAS,UAAA,EAAY,QAAA,EAAS,QAAA,EACrF,8BAAC,GAAA,EAAA,EAAI,KAAA,EAAO,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA,EAAK,MAAA,EAAO,QAAO,YAAA,EAAc,MAAA,EAAQ,OAAA,EAAS,KAAA,EAAO,CAAA,EAC/E;AAAA,GAAA,EACJ,CAAA;AAER;;;;"}

package/components/SegmentedControl/index.cjs

@@ -0,0 +1,204 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+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('react-native');
+require('../../apps/mobile/src/ui/form-control/index.cjs');
+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');
+var ResponsiveElement = require('../../apps/mobile/src/Factory/ResponsiveElement.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');
+var useSeparator = require('../../apps/mobile/src/Factory/useSeparator.cjs');
+require('../../apps/mobile/src/Factory/DimensionsContext.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');
+require('../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../hooks/useComponentDefaults.cjs');
+var KitsThemeProvider_native = require('../../contexts/Theme/KitsThemeProvider.cjs');
+
+const SIZE_MAP = {
+  sm: { height: 30, fontSize: 11, px: 8, py: 4, descSize: 9.5, gap: 2 },
+  md: { height: 36, fontSize: 12.5, px: 12, py: 6, descSize: 10.5, gap: 4 },
+  lg: { height: 44, fontSize: 14, px: 16, py: 10, descSize: 11, gap: 4 }
+};
+function SegmentedControl(rawProps) {
+  const { mergedProps: props, themeStyle } = useComponentDefaults.default(
+    "SegmentedControl",
+    rawProps
+  );
+  const {
+    options,
+    value,
+    onChange,
+    size = "md",
+    fullWidth = true,
+    disabled,
+    id,
+    testID,
+    ...rest
+  } = props;
+  const { cssProps, nativeProps } = useSeparator.default(rest);
+  const { resolveToken } = KitsThemeProvider_native.useKitsTheme();
+  const sizeConfig = SIZE_MAP[size] ?? SIZE_MAP.md;
+  const trackBg = resolveToken("surface-ground");
+  const borderColor = resolveToken("surface-border");
+  const inactiveText = resolveToken("text-secondary");
+  const containerCss = React.useMemo(
+    () => ({
+      ...themeStyle,
+      ...cssProps,
+      display: "inline-flex",
+      flexDirection: "row",
+      alignItems: "stretch",
+      gap: 2,
+      padding: 2,
+      backgroundColor: trackBg,
+      border: `1px solid ${borderColor}`,
+      borderRadius: 8,
+      ...fullWidth ? { width: "100%" } : {},
+      ...disabled ? { opacity: "0.55", pointerEvents: "none" } : {}
+    }),
+    [themeStyle, cssProps, trackBg, borderColor, fullWidth, disabled]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ResponsiveElement.default,
+    {
+      as: "Box",
+      cssProps: containerCss,
+      nativeProps: { ...nativeProps, id, "data-testid": testID, role: "tablist" },
+      additionalStyles: {},
+      children: options.map((opt) => {
+        const selected = opt.value === value;
+        const isDisabled = disabled || opt.disabled;
+        const accent = opt.color ? resolveToken(opt.color) : resolveToken("primary");
+        const buttonCss = {
+          flex: fullWidth ? 1 : void 0,
+          minHeight: sizeConfig.height,
+          paddingLeft: sizeConfig.px,
+          paddingRight: sizeConfig.px,
+          paddingTop: sizeConfig.py,
+          paddingBottom: sizeConfig.py,
+          borderRadius: 6,
+          border: "none",
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          background: selected ? accent : "transparent",
+          color: selected ? "#FFFFFF" : inactiveText,
+          fontFamily: "inherit",
+          fontWeight: "700",
+          fontSize: sizeConfig.fontSize,
+          lineHeight: "1.1",
+          transition: "background-color 0.15s, color 0.15s, box-shadow 0.15s",
+          boxShadow: selected ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
+          outline: "none",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: sizeConfig.gap,
+          textAlign: "center"
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": selected,
+            disabled: isDisabled,
+            onClick: () => !isDisabled && onChange(opt.value),
+            style: buttonCss,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { lineHeight: "1.1" }, children: opt.label }),
+              opt.description && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: sizeConfig.descSize,
+                    fontWeight: 600,
+                    opacity: selected ? 0.85 : 0.7
+                  },
+                  children: opt.description
+                }
+              )
+            ]
+          },
+          String(opt.value)
+        );
+      })
+    }
+  );
+}
+
+exports.SegmentedControl = SegmentedControl;
+exports.default = SegmentedControl;
+//# sourceMappingURL=index.cjs.map

package/components/SegmentedControl/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/SegmentedControl/index.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport type {ISegmentedControlProps} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport {useComponentDefaults} from \"../../hooks\";\nimport {useKitsTheme} from \"../../contexts/Theme\";\n\nconst SIZE_MAP = {\n    sm: {height: 30, fontSize: 11, px: 8, py: 4, descSize: 9.5, gap: 2},\n    md: {height: 36, fontSize: 12.5, px: 12, py: 6, descSize: 10.5, gap: 4},\n    lg: {height: 44, fontSize: 14, px: 16, py: 10, descSize: 11, gap: 4},\n} as const;\n\nexport function SegmentedControl<V extends string | number = string>(rawProps: ISegmentedControlProps<V>) {\n    const {mergedProps: props, themeStyle} = useComponentDefaults<ISegmentedControlProps<V>>(\n        \"SegmentedControl\",\n        rawProps as any,\n    );\n\n    const {\n        options,\n        value,\n        onChange,\n        size = \"md\",\n        fullWidth = true,\n        disabled,\n        id,\n        testID,\n        ...rest\n    } = props;\n\n    const {cssProps, nativeProps} = useSeparator<HTMLDivElement>(rest as any);\n    const {resolveToken} = useKitsTheme();\n    const sizeConfig = SIZE_MAP[size] ?? SIZE_MAP.md;\n\n    const trackBg = resolveToken(\"surface-ground\");\n    const borderColor = resolveToken(\"surface-border\");\n    const inactiveText = resolveToken(\"text-secondary\");\n\n    const containerCss = useMemo(\n        () => ({\n            ...themeStyle,\n            ...cssProps,\n            display: \"inline-flex\" as const,\n            flexDirection: \"row\" as const,\n            alignItems: \"stretch\" as const,\n            gap: 2,\n            padding: 2,\n            backgroundColor: trackBg,\n            border: `1px solid ${borderColor}`,\n            borderRadius: 8,\n            ...(fullWidth ? {width: \"100%\"} : {}),\n            ...(disabled ? {opacity: \"0.55\", pointerEvents: \"none\" as const} : {}),\n        }),\n        [themeStyle, cssProps, trackBg, borderColor, fullWidth, disabled],\n    );\n\n    return (\n        <ResponsiveElement\n            as=\"Box\"\n            //@ts-ignore\n            cssProps={containerCss}\n            nativeProps={{...nativeProps, id, \"data-testid\": testID, role: \"tablist\"}}\n            additionalStyles={{}}\n        >\n            {options.map(opt => {\n                const selected = opt.value === value;\n                const isDisabled = disabled || opt.disabled;\n                const accent = opt.color ? resolveToken(opt.color) : resolveToken(\"primary\");\n\n                const buttonCss = {\n                    flex: fullWidth ? 1 : undefined,\n                    minHeight: sizeConfig.height,\n                    paddingLeft: sizeConfig.px,\n                    paddingRight: sizeConfig.px,\n                    paddingTop: sizeConfig.py,\n                    paddingBottom: sizeConfig.py,\n                    borderRadius: 6,\n                    border: \"none\",\n                    cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n                    background: selected ? accent : \"transparent\",\n                    color: selected ? \"#FFFFFF\" : inactiveText,\n                    fontFamily: \"inherit\",\n                    fontWeight: \"700\",\n                    fontSize: sizeConfig.fontSize,\n                    lineHeight: \"1.1\",\n                    transition: \"background-color 0.15s, color 0.15s, box-shadow 0.15s\",\n                    boxShadow: selected ? \"0 1px 2px rgba(0,0,0,0.06)\" : \"none\",\n                    outline: \"none\",\n                    display: \"flex\",\n                    flexDirection: \"column\" as const,\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: sizeConfig.gap,\n                    textAlign: \"center\" as const,\n                };\n\n                return (\n                    <button\n                        key={String(opt.value)}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={selected}\n                        disabled={isDisabled}\n                        onClick={() => !isDisabled && onChange(opt.value)}\n                        style={buttonCss as any}\n                    >\n                        <span style={{lineHeight: \"1.1\"}}>{opt.label}</span>\n                        {opt.description && (\n                            <span\n                                style={{\n                                    fontSize: sizeConfig.descSize,\n                                    fontWeight: 600,\n                                    opacity: selected ? 0.85 : 0.7,\n                                }}\n                            >\n                                {opt.description}\n                            </span>\n                        )}\n                    </button>\n                );\n            })}\n        </ResponsiveElement>\n    );\n}\n\nexport default SegmentedControl;\n"],"names":["useComponentDefaults","useSeparator","useKitsTheme","useMemo","jsx","ResponsiveElement","jsxs"],"mappings":"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"}

package/components/SegmentedControl/index.js

@@ -0,0 +1,199 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import '../../apps/mobile/src/ui/accordion/index.js';
+import '../../apps/mobile/src/ui/actionsheet/index.js';
+import '../../apps/mobile/src/ui/alert/index.js';
+import '../../apps/mobile/src/ui/alert-dialog/index.js';
+import '../../apps/mobile/src/ui/avatar/index.js';
+import '../../apps/mobile/src/ui/badge/index.js';
+import '../../apps/mobile/src/ui/bottomsheet/index.js';
+import '../../apps/mobile/src/ui/box/index.js';
+import '../../apps/mobile/src/ui/button/index.js';
+import '../../apps/mobile/src/ui/card/index.js';
+import '../../apps/mobile/src/ui/center/index.js';
+import '../../apps/mobile/src/ui/checkbox/index.js';
+import '../../apps/mobile/src/ui/divider/index.js';
+import '../../apps/mobile/src/ui/drawer/index.js';
+import '../../apps/mobile/src/ui/fab/index.js';
+import 'react-native';
+import '../../apps/mobile/src/ui/form-control/index.js';
+import '../../apps/mobile/src/ui/gluestack-ui-provider/config.js';
+import '@gluestack-ui/core/overlay/creator';
+import '@gluestack-ui/core/toast/creator';
+import 'nativewind';
+import '../../apps/mobile/src/ui/grid/index.js';
+import '../../apps/mobile/src/ui/heading/index.js';
+import '../../apps/mobile/src/ui/hstack/index.js';
+import '../../apps/mobile/src/ui/icon/index.js';
+import '../../apps/mobile/src/ui/image/index.js';
+import '../../apps/mobile/src/ui/image-background/index.js';
+import '../../apps/mobile/src/ui/input/index.js';
+import '../../apps/mobile/src/ui/link/index.js';
+import '../../apps/mobile/src/ui/menu/index.js';
+import '../../apps/mobile/src/ui/modal/index.js';
+import '../../apps/mobile/src/ui/popover/index.js';
+import '../../apps/mobile/src/ui/portal/index.js';
+import '../../apps/mobile/src/ui/pressable/index.js';
+import '../../apps/mobile/src/ui/progress/index.js';
+import '../../apps/mobile/src/ui/radio/index.js';
+import 'react-native-safe-area-context';
+import '../../apps/mobile/src/ui/select/index.js';
+import '../../apps/mobile/src/ui/skeleton/index.js';
+import '../../apps/mobile/src/ui/slider/index.js';
+import '../../apps/mobile/src/ui/spinner/index.js';
+import '../../apps/mobile/src/ui/switch/index.js';
+import '../../apps/mobile/src/ui/table/index.js';
+import '../../apps/mobile/src/ui/text/index.js';
+import '../../apps/mobile/src/ui/textarea/index.js';
+import '../../apps/mobile/src/ui/toast/index.js';
+import '../../apps/mobile/src/ui/tooltip/index.js';
+import '../../apps/mobile/src/ui/vstack/index.js';
+import ResponsiveElement from '../../apps/mobile/src/Factory/ResponsiveElement.js';
+import 'react-icons/fa';
+import 'react-icons/ai';
+import 'react-icons/io';
+import '../../packages/types/src/Components/Molecules/Form/FilePicker/types/filesTypes.js';
+import 'yup';
+import '../../packages/types/src/Css/map/index.js';
+import '../../packages/types/src/Theme/shadows.js';
+import '../../packages/types/src/Theme/defaultTheme.js';
+import useSeparator from '../../apps/mobile/src/Factory/useSeparator.js';
+import '../../apps/mobile/src/Factory/DimensionsContext.js';
+import 'i18next';
+import 'react-i18next';
+import '../../apps/mobile/src/Core/AutoComplete/index.js';
+import '../../apps/mobile/src/Core/Dropdown/index.js';
+import '../../apps/mobile/src/Core/MultiSelect/index.js';
+import '../../apps/mobile/src/Core/Trees/components/CoreTree.js';
+import '../../apps/mobile/src/Core/Trees/components/CoreTreeSelect.js';
+import '../../apps/mobile/src/Core/Trees/components/CoreToolbar.js';
+import '../../apps/mobile/src/Core/Paginator/index.js';
+import 'lucide-react-native';
+import '../../apps/mobile/src/Core/SelectButton/index.js';
+import '../../apps/mobile/src/Core/DataTable/DataTable.js';
+import '../../apps/mobile/src/Core/Tag/index.js';
+import '../../apps/mobile/src/Core/Badge/index.js';
+import '../../apps/mobile/src/Core/ProgressBar/index.js';
+import '../../apps/mobile/src/Core/Checkbox/index.js';
+import '../../apps/mobile/src/Core/RadioButton/index.js';
+import '../../apps/mobile/src/Core/Input/index.js';
+import '../../apps/mobile/src/Core/Input/Field.js';
+import '../../apps/mobile/src/Core/Input/Slot.js';
+import '../../contexts/DialogContext.js';
+import useComponentDefaults from '../../hooks/useComponentDefaults.js';
+import { useKitsTheme } from '../../contexts/Theme/KitsThemeProvider.js';
+
+const SIZE_MAP = {
+  sm: { height: 30, fontSize: 11, px: 8, py: 4, descSize: 9.5, gap: 2 },
+  md: { height: 36, fontSize: 12.5, px: 12, py: 6, descSize: 10.5, gap: 4 },
+  lg: { height: 44, fontSize: 14, px: 16, py: 10, descSize: 11, gap: 4 }
+};
+function SegmentedControl(rawProps) {
+  const { mergedProps: props, themeStyle } = useComponentDefaults(
+    "SegmentedControl",
+    rawProps
+  );
+  const {
+    options,
+    value,
+    onChange,
+    size = "md",
+    fullWidth = true,
+    disabled,
+    id,
+    testID,
+    ...rest
+  } = props;
+  const { cssProps, nativeProps } = useSeparator(rest);
+  const { resolveToken } = useKitsTheme();
+  const sizeConfig = SIZE_MAP[size] ?? SIZE_MAP.md;
+  const trackBg = resolveToken("surface-ground");
+  const borderColor = resolveToken("surface-border");
+  const inactiveText = resolveToken("text-secondary");
+  const containerCss = useMemo(
+    () => ({
+      ...themeStyle,
+      ...cssProps,
+      display: "inline-flex",
+      flexDirection: "row",
+      alignItems: "stretch",
+      gap: 2,
+      padding: 2,
+      backgroundColor: trackBg,
+      border: `1px solid ${borderColor}`,
+      borderRadius: 8,
+      ...fullWidth ? { width: "100%" } : {},
+      ...disabled ? { opacity: "0.55", pointerEvents: "none" } : {}
+    }),
+    [themeStyle, cssProps, trackBg, borderColor, fullWidth, disabled]
+  );
+  return /* @__PURE__ */ jsx(
+    ResponsiveElement,
+    {
+      as: "Box",
+      cssProps: containerCss,
+      nativeProps: { ...nativeProps, id, "data-testid": testID, role: "tablist" },
+      additionalStyles: {},
+      children: options.map((opt) => {
+        const selected = opt.value === value;
+        const isDisabled = disabled || opt.disabled;
+        const accent = opt.color ? resolveToken(opt.color) : resolveToken("primary");
+        const buttonCss = {
+          flex: fullWidth ? 1 : void 0,
+          minHeight: sizeConfig.height,
+          paddingLeft: sizeConfig.px,
+          paddingRight: sizeConfig.px,
+          paddingTop: sizeConfig.py,
+          paddingBottom: sizeConfig.py,
+          borderRadius: 6,
+          border: "none",
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          background: selected ? accent : "transparent",
+          color: selected ? "#FFFFFF" : inactiveText,
+          fontFamily: "inherit",
+          fontWeight: "700",
+          fontSize: sizeConfig.fontSize,
+          lineHeight: "1.1",
+          transition: "background-color 0.15s, color 0.15s, box-shadow 0.15s",
+          boxShadow: selected ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
+          outline: "none",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: sizeConfig.gap,
+          textAlign: "center"
+        };
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": selected,
+            disabled: isDisabled,
+            onClick: () => !isDisabled && onChange(opt.value),
+            style: buttonCss,
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { lineHeight: "1.1" }, children: opt.label }),
+              opt.description && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: sizeConfig.descSize,
+                    fontWeight: 600,
+                    opacity: selected ? 0.85 : 0.7
+                  },
+                  children: opt.description
+                }
+              )
+            ]
+          },
+          String(opt.value)
+        );
+      })
+    }
+  );
+}
+
+export { SegmentedControl, SegmentedControl as default };
+//# sourceMappingURL=index.js.map

package/components/SegmentedControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/SegmentedControl/index.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport type {ISegmentedControlProps} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport {useComponentDefaults} from \"../../hooks\";\nimport {useKitsTheme} from \"../../contexts/Theme\";\n\nconst SIZE_MAP = {\n    sm: {height: 30, fontSize: 11, px: 8, py: 4, descSize: 9.5, gap: 2},\n    md: {height: 36, fontSize: 12.5, px: 12, py: 6, descSize: 10.5, gap: 4},\n    lg: {height: 44, fontSize: 14, px: 16, py: 10, descSize: 11, gap: 4},\n} as const;\n\nexport function SegmentedControl<V extends string | number = string>(rawProps: ISegmentedControlProps<V>) {\n    const {mergedProps: props, themeStyle} = useComponentDefaults<ISegmentedControlProps<V>>(\n        \"SegmentedControl\",\n        rawProps as any,\n    );\n\n    const {\n        options,\n        value,\n        onChange,\n        size = \"md\",\n        fullWidth = true,\n        disabled,\n        id,\n        testID,\n        ...rest\n    } = props;\n\n    const {cssProps, nativeProps} = useSeparator<HTMLDivElement>(rest as any);\n    const {resolveToken} = useKitsTheme();\n    const sizeConfig = SIZE_MAP[size] ?? SIZE_MAP.md;\n\n    const trackBg = resolveToken(\"surface-ground\");\n    const borderColor = resolveToken(\"surface-border\");\n    const inactiveText = resolveToken(\"text-secondary\");\n\n    const containerCss = useMemo(\n        () => ({\n            ...themeStyle,\n            ...cssProps,\n            display: \"inline-flex\" as const,\n            flexDirection: \"row\" as const,\n            alignItems: \"stretch\" as const,\n            gap: 2,\n            padding: 2,\n            backgroundColor: trackBg,\n            border: `1px solid ${borderColor}`,\n            borderRadius: 8,\n            ...(fullWidth ? {width: \"100%\"} : {}),\n            ...(disabled ? {opacity: \"0.55\", pointerEvents: \"none\" as const} : {}),\n        }),\n        [themeStyle, cssProps, trackBg, borderColor, fullWidth, disabled],\n    );\n\n    return (\n        <ResponsiveElement\n            as=\"Box\"\n            //@ts-ignore\n            cssProps={containerCss}\n            nativeProps={{...nativeProps, id, \"data-testid\": testID, role: \"tablist\"}}\n            additionalStyles={{}}\n        >\n            {options.map(opt => {\n                const selected = opt.value === value;\n                const isDisabled = disabled || opt.disabled;\n                const accent = opt.color ? resolveToken(opt.color) : resolveToken(\"primary\");\n\n                const buttonCss = {\n                    flex: fullWidth ? 1 : undefined,\n                    minHeight: sizeConfig.height,\n                    paddingLeft: sizeConfig.px,\n                    paddingRight: sizeConfig.px,\n                    paddingTop: sizeConfig.py,\n                    paddingBottom: sizeConfig.py,\n                    borderRadius: 6,\n                    border: \"none\",\n                    cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n                    background: selected ? accent : \"transparent\",\n                    color: selected ? \"#FFFFFF\" : inactiveText,\n                    fontFamily: \"inherit\",\n                    fontWeight: \"700\",\n                    fontSize: sizeConfig.fontSize,\n                    lineHeight: \"1.1\",\n                    transition: \"background-color 0.15s, color 0.15s, box-shadow 0.15s\",\n                    boxShadow: selected ? \"0 1px 2px rgba(0,0,0,0.06)\" : \"none\",\n                    outline: \"none\",\n                    display: \"flex\",\n                    flexDirection: \"column\" as const,\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: sizeConfig.gap,\n                    textAlign: \"center\" as const,\n                };\n\n                return (\n                    <button\n                        key={String(opt.value)}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={selected}\n                        disabled={isDisabled}\n                        onClick={() => !isDisabled && onChange(opt.value)}\n                        style={buttonCss as any}\n                    >\n                        <span style={{lineHeight: \"1.1\"}}>{opt.label}</span>\n                        {opt.description && (\n                            <span\n                                style={{\n                                    fontSize: sizeConfig.descSize,\n                                    fontWeight: 600,\n                                    opacity: selected ? 0.85 : 0.7,\n                                }}\n                            >\n                                {opt.description}\n                            </span>\n                        )}\n                    </button>\n                );\n            })}\n        </ResponsiveElement>\n    );\n}\n\nexport default SegmentedControl;\n"],"names":[],"mappings":"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"}

package/components/SkeletonRows/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index_native = require('../../primitives/Skeleton/index.cjs');
+
+const SkeletonRows = ({ rowsLength }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: rowsLength }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    index_native.default,
+    {
+      className: "h-12 mb-2",
+      container: { style: { borderRadius: 10 } }
+    },
+    i
+  )) });
+};
+
+exports.default = SkeletonRows;
+//# sourceMappingURL=index.cjs.map

package/components/SkeletonRows/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/SkeletonRows/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ISkeletonRowsProps } from \"@lmb-it/kitsconcerto-types\";\nimport Skeleton from \"../../primitives/Skeleton\";\n\nconst SkeletonRows = ({ rowsLength }: ISkeletonRowsProps) => {\n    return (\n        <>\n            {Array.from({ length: rowsLength }, (_, i) => (\n                <Skeleton\n                    key={i}\n                    className=\"h-12 mb-2\"\n                    container={{ style: { borderRadius: 10 } }}\n                />\n            ))}\n        </>\n    );\n};\n\nexport default SkeletonRows;\n"],"names":["jsx","Fragment","Skeleton"],"mappings":";;;;;;;AAIA,MAAM,YAAA,GAAe,CAAC,EAAE,UAAA,EAAW,KAA0B;AACzD,EAAA,uBACIA,cAAA,CAAAC,mBAAA,EAAA,EACK,gBAAM,IAAA,CAAK,EAAE,QAAQ,UAAA,EAAW,EAAG,CAAC,CAAA,EAAG,CAAA,qBACpCD,cAAA;AAAA,IAACE,oBAAA;AAAA,IAAA;AAAA,MAEG,SAAA,EAAU,WAAA;AAAA,MACV,WAAW,EAAE,KAAA,EAAO,EAAE,YAAA,EAAc,IAAG;AAAE,KAAA;AAAA,IAFpC;AAAA,GAIZ,CAAA,EACL,CAAA;AAER;;;;"}

package/components/SkeletonRows/index.js

@@ -0,0 +1,16 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import Skeleton from '../../primitives/Skeleton/index.js';
+
+const SkeletonRows = ({ rowsLength }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rowsLength }, (_, i) => /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: "h-12 mb-2",
+      container: { style: { borderRadius: 10 } }
+    },
+    i
+  )) });
+};
+
+export { SkeletonRows as default };
+//# sourceMappingURL=index.js.map

package/components/SkeletonRows/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/SkeletonRows/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ISkeletonRowsProps } from \"@lmb-it/kitsconcerto-types\";\nimport Skeleton from \"../../primitives/Skeleton\";\n\nconst SkeletonRows = ({ rowsLength }: ISkeletonRowsProps) => {\n    return (\n        <>\n            {Array.from({ length: rowsLength }, (_, i) => (\n                <Skeleton\n                    key={i}\n                    className=\"h-12 mb-2\"\n                    container={{ style: { borderRadius: 10 } }}\n                />\n            ))}\n        </>\n    );\n};\n\nexport default SkeletonRows;\n"],"names":[],"mappings":";;;AAIA,MAAM,YAAA,GAAe,CAAC,EAAE,UAAA,EAAW,KAA0B;AACzD,EAAA,uBACI,GAAA,CAAA,QAAA,EAAA,EACK,gBAAM,IAAA,CAAK,EAAE,QAAQ,UAAA,EAAW,EAAG,CAAC,CAAA,EAAG,CAAA,qBACpC,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAEG,SAAA,EAAU,WAAA;AAAA,MACV,WAAW,EAAE,KAAA,EAAO,EAAE,YAAA,EAAc,IAAG;AAAE,KAAA;AAAA,IAFpC;AAAA,GAIZ,CAAA,EACL,CAAA;AAER;;;;"}