@lmb-it/kitsconcerto-native 0.1.236

package/components/Button/Button.cjs

@@ -0,0 +1,242 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+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('../../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');
+var index_native = require('../../assets/Icons/index.cjs');
+var locale = require('../../hooks/locale.cjs');
+require('../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../hooks/useComponentDefaults.cjs');
+var useSeverityColors = require('../../hooks/useSeverityColors.cjs');
+var useThemedFont = require('../../hooks/useThemedFont.cjs');
+
+const SIZE_MAP = {
+  sm: { height: 32, fontSize: 12, px: 10, py: 6, gap: 6, iconSize: 14 },
+  md: { height: 40, fontSize: 14, px: 16, py: 10, gap: 8, iconSize: 16 },
+  lg: { height: 48, fontSize: 16, px: 24, py: 12, gap: 10, iconSize: 18 }
+};
+function resolveIcon(icon, color, iconSize) {
+  if (!icon) return null;
+  if (React.isValidElement(icon)) {
+    return React.cloneElement(icon, { color, size: iconSize });
+  }
+  if (typeof icon === "function") {
+    const Comp = icon;
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { size: iconSize, color });
+  }
+  if (typeof icon !== "string") return null;
+  const piMatches = icon.match(/pi-([a-z-]+)/g);
+  const iconName = piMatches ? piMatches[piMatches.length - 1].replace("pi-", "") : icon;
+  const Component = index_native.IconMap[iconName];
+  if (Component) return /* @__PURE__ */ jsxRuntime.jsx(Component, { size: iconSize, color });
+  return null;
+}
+function Button(rawProps) {
+  const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults.default("Button", rawProps);
+  const {
+    children,
+    label,
+    isLoadingText,
+    severity = "brand",
+    size = "md",
+    loading,
+    iconPos = "left",
+    icon,
+    disabled,
+    outlined,
+    raised,
+    rounded,
+    testID,
+    style: styleProp,
+    onPress,
+    onClick,
+    ...rest
+  } = props;
+  const { t } = locale.useLanguage();
+  const labelFont = useThemedFont.default("body");
+  const { cssProps, nativeProps } = useSeparator.default(rest);
+  const sevColors = useSeverityColors.useSeverityColors(severity ?? "brand");
+  const sizeConfig = SIZE_MAP[size] ?? SIZE_MAP.md;
+  const isDisabled = disabled || loading;
+  const resolvedLabel = typeof children === "string" ? children : loading && isLoadingText ? isLoadingText : label ? t(label) : "";
+  const hasLabel = !!resolvedLabel;
+  const isIconOnly = !hasLabel && !!icon;
+  const textColor = outlined ? sevColors.solid : sevColors.solidText;
+  const bgColor = outlined ? "transparent" : sevColors.solid;
+  const borderColor = sevColors.border || sevColors.solid;
+  const computedCss = React.useMemo(() => ({
+    backgroundColor: bgColor,
+    borderColor,
+    borderWidth: 1,
+    height: sizeConfig.height,
+    paddingLeft: hasLabel ? sizeConfig.px : sizeConfig.py,
+    paddingRight: hasLabel ? sizeConfig.px : sizeConfig.py,
+    paddingTop: sizeConfig.py,
+    paddingBottom: sizeConfig.py,
+    borderRadius: rounded ? 9999 : 6,
+    flexDirection: iconPos === "top" || iconPos === "bottom" ? iconPos === "bottom" ? "column-reverse" : "column" : iconPos === "right" ? "row-reverse" : "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: sizeConfig.gap,
+    opacity: isDisabled ? 50 : 100,
+    alignSelf: "flex-start",
+    overflow: "hidden",
+    ...raised ? {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 3 },
+      shadowOpacity: 0.16,
+      shadowRadius: 6,
+      elevation: 4
+    } : {},
+    // Theme overrides the defaults above: shared `root` first, then the
+    // `text` slot (label buttons) or the `iconOnly` slot. Icon-only buttons
+    // are forced square so a `root`/`text` height can never stretch them —
+    // the `iconOnly` slot can still override the square if needed.
+    ...themeStyle,
+    ...elementStyles.root || {},
+    ...isIconOnly ? {
+      width: sizeConfig.height,
+      height: sizeConfig.height,
+      minWidth: sizeConfig.height,
+      ...elementStyles.iconOnly || {}
+    } : elementStyles.text || {},
+    ...cssProps,
+    ...styleProp
+  }), [
+    themeStyle,
+    elementStyles,
+    cssProps,
+    bgColor,
+    borderColor,
+    sizeConfig,
+    hasLabel,
+    icon,
+    iconPos,
+    rounded,
+    raised,
+    isDisabled,
+    styleProp,
+    isIconOnly
+  ]);
+  const iconElement = loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: textColor }) : resolveIcon(icon, textColor, sizeConfig.iconSize);
+  const labelStyle = React.useMemo(() => ({
+    color: textColor,
+    fontSize: sizeConfig.fontSize,
+    fontWeight: "600",
+    lineHeight: sizeConfig.fontSize * 1.2,
+    ...labelFont ? { fontFamily: labelFont } : {},
+    // Theme/per-instance label slot wins — e.g. theme.components.Button.label.style
+    // = { lineHeight: 22 } to stop Arabic (NotoKufiArabic) glyphs clipping.
+    ...elementStyles.label || {}
+  }), [textColor, sizeConfig, labelFont, elementStyles.label]);
+  const handlePress = React.useCallback((e) => {
+    if (isDisabled) return;
+    if (onPress) onPress(e);
+    if (onClick) onClick(e);
+  }, [isDisabled, onPress, onClick]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ResponsiveElement.default,
+    {
+      as: "Pressable",
+      cssProps: computedCss,
+      nativeProps: {
+        ...nativeProps,
+        onPress: handlePress,
+        disabled: isDisabled,
+        testID,
+        accessibilityRole: "button",
+        accessibilityState: { disabled: isDisabled, busy: loading },
+        accessibilityLabel: resolvedLabel || void 0
+      },
+      children: [
+        iconElement,
+        !!hasLabel && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: labelStyle, numberOfLines: 1, children: resolvedLabel }),
+        typeof children !== "string" ? children : void 0
+      ]
+    }
+  );
+}
+
+exports.Button = Button;
+exports.default = Button;
+//# sourceMappingURL=Button.cjs.map

package/components/Button/Button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.native.tsx"],"sourcesContent":["import React, {useMemo, useCallback, type ElementType, type ReactElement} from 'react';\nimport {\n    ActivityIndicator,\n    Text as RNText,\n    type TextStyle,\n    type GestureResponderEvent,\n} from 'react-native';\nimport type {IButtonProps, IconName, IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {ResponsiveElement, useSeparator, style as resolveStyle} from '@lmb-it/kitsconcertomobile';\nimport {IconMap} from '../../assets/Icons';\nimport {useLanguage, useComponentDefaults, useThemedFont} from '../../hooks';\nimport {useSeverityColors} from '../../hooks/useSeverityColors';\n\n/* ─── Size configuration (matches web) ────────────────────────── */\nconst SIZE_MAP = {\n    sm: {height: 32, fontSize: 12, px: 10, py: 6, gap: 6, iconSize: 14},\n    md: {height: 40, fontSize: 14, px: 16, py: 10, gap: 8, iconSize: 16},\n    lg: {height: 48, fontSize: 16, px: 24, py: 12, gap: 10, iconSize: 18},\n} as const;\n\n/* ─── Icon resolver ──────────────────────────────────────────── */\nfunction resolveIcon(\n    icon: unknown,\n    color: string,\n    iconSize: number,\n): React.ReactNode {\n    if (!icon) return null;\n    if (React.isValidElement(icon)) {\n        return React.cloneElement(icon as ReactElement<any>, {color, size: iconSize});\n    }\n    if (typeof icon === 'function') {\n        const Comp = icon as ElementType;\n        return <Comp size={iconSize} color={color} />;\n    }\n    if (typeof icon !== 'string') return null;\n    const piMatches = icon.match(/pi-([a-z-]+)/g);\n    const iconName = piMatches\n        ? (piMatches[piMatches.length - 1]!.replace('pi-', '') as IconName)\n        : (icon as IconName);\n    const Component = IconMap[iconName];\n    if (Component) return <Component size={iconSize} color={color} />;\n    return null;\n}\n\n/* ─── Button Component ───────────────────────────────────────── */\nexport function Button(rawProps: IButtonProps<IconName | string | ElementType | ReactElement>) {\n    const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('Button', rawProps);\n    const {\n        children,\n        label,\n        isLoadingText,\n        severity = 'brand',\n        size = 'md',\n        loading,\n        iconPos = 'left',\n        icon,\n        disabled,\n        outlined,\n        raised,\n        rounded,\n        testID,\n        style: styleProp,\n        onPress,\n        onClick,\n        ...rest\n    } = props;\n\n    const {t} = useLanguage();\n    const labelFont = useThemedFont('body');\n    const {cssProps, nativeProps} = useSeparator<Record<any, any>>(rest);\n    const sevColors = useSeverityColors((severity as any) ?? 'brand');\n\n    const sizeConfig = SIZE_MAP[size as keyof typeof SIZE_MAP] ?? SIZE_MAP.md;\n    const isDisabled = disabled || loading;\n\n    /* ── Resolve label text ── */\n    const resolvedLabel = typeof children === 'string'\n        ? children\n        : loading && isLoadingText\n            ? isLoadingText\n            : label ? t(label) : '';\n\n    const hasLabel = !!resolvedLabel;\n    const isIconOnly = !hasLabel && !!icon;\n\n    /* ── Severity colors ── */\n    const textColor = outlined ? sevColors.solid : sevColors.solidText;\n    const bgColor = outlined ? 'transparent' : sevColors.solid;\n    const borderColor = sevColors.border || sevColors.solid;\n\n    /* ── Build CSS props for ResponsiveElement ── */\n    const computedCss:IStyleClasses = useMemo(() => ({\n        backgroundColor: bgColor,\n        borderColor,\n        borderWidth: 1,\n        height: sizeConfig.height,\n        paddingLeft: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingRight: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingTop: sizeConfig.py,\n        paddingBottom: sizeConfig.py,\n        borderRadius: rounded ? 9999 : 6,\n        flexDirection: iconPos === 'top' || iconPos === 'bottom'\n            ? (iconPos === 'bottom' ? 'column-reverse' : 'column')\n            : (iconPos === 'right' ? 'row-reverse' : 'row'),\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: sizeConfig.gap,\n        opacity: isDisabled ? 50 : 100,\n        alignSelf: 'flex-start',\n        overflow: 'hidden',\n        ...(raised ? {\n            shadowColor: '#000',\n            shadowOffset: {width: 0, height: 3},\n            shadowOpacity: 0.16,\n            shadowRadius: 6,\n            elevation: 4,\n        } : {}),\n        // Theme overrides the defaults above: shared `root` first, then the\n        // `text` slot (label buttons) or the `iconOnly` slot. Icon-only buttons\n        // are forced square so a `root`/`text` height can never stretch them —\n        // the `iconOnly` slot can still override the square if needed.\n        ...themeStyle,\n        ...(elementStyles.root || {}),\n        ...(isIconOnly\n            ? {\n                width: sizeConfig.height,\n                height: sizeConfig.height,\n                minWidth: sizeConfig.height,\n                ...(elementStyles.iconOnly || {}),\n              }\n            : (elementStyles.text || {})),\n        ...cssProps,\n        ...styleProp,\n    }), [themeStyle, elementStyles, cssProps, bgColor, borderColor, sizeConfig,\n        hasLabel, icon, iconPos, rounded, raised, isDisabled, styleProp, isIconOnly]);\n\n    /* ── Icon element ── */\n    const iconElement = loading\n        ? <ActivityIndicator size=\"small\" color={textColor} />\n        : resolveIcon(icon, textColor, sizeConfig.iconSize);\n\n    /* ── Text style ── */\n    const labelStyle: TextStyle = useMemo(() => ({\n        color: textColor,\n        fontSize: sizeConfig.fontSize,\n        fontWeight: '600',\n        lineHeight: sizeConfig.fontSize * 1.2,\n        ...(labelFont ? {fontFamily: labelFont} : {}),\n        // Theme/per-instance label slot wins — e.g. theme.components.Button.label.style\n        // = { lineHeight: 22 } to stop Arabic (NotoKufiArabic) glyphs clipping.\n        ...((elementStyles.label as TextStyle) || {}),\n    }), [textColor, sizeConfig, labelFont, elementStyles.label]);\n\n    /* ── Press handler ── */\n    const handlePress = useCallback((e: GestureResponderEvent) => {\n        if (isDisabled) return;\n        if (onPress) onPress(e as any);\n        if (onClick) onClick(e as any);\n    }, [isDisabled, onPress, onClick]);\n\n    return (\n        <ResponsiveElement\n            as=\"Pressable\"\n            cssProps={computedCss}\n            nativeProps={{\n                ...nativeProps,\n                onPress: handlePress,\n                disabled: isDisabled,\n                testID,\n                accessibilityRole: 'button',\n                accessibilityState: {disabled: isDisabled, busy: loading},\n                accessibilityLabel: resolvedLabel || undefined,\n            }}\n        >\n            {iconElement}\n            {!!hasLabel && (\n                <RNText style={labelStyle} numberOfLines={1}>\n                    {resolvedLabel}\n                </RNText>\n            )}\n            {typeof children !== 'string' ? children : undefined}\n        </ResponsiveElement>\n    );\n}\n\nexport default Button;\n"],"names":["jsx","IconMap","useComponentDefaults","useLanguage","useThemedFont","useSeparator","useSeverityColors","useMemo","ActivityIndicator","useCallback","jsxs","ResponsiveElement","RNText"],"mappings":"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"}

package/components/Button/Button.js

@@ -0,0 +1,237 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useMemo, useCallback } from 'react';
+import { ActivityIndicator, Text } from 'react-native';
+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 '../../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 { IconMap } from '../../assets/Icons/index.js';
+import { useLanguage } from '../../hooks/locale.js';
+import '../../contexts/DialogContext.js';
+import useComponentDefaults from '../../hooks/useComponentDefaults.js';
+import { useSeverityColors } from '../../hooks/useSeverityColors.js';
+import useThemedFont from '../../hooks/useThemedFont.js';
+
+const SIZE_MAP = {
+  sm: { height: 32, fontSize: 12, px: 10, py: 6, gap: 6, iconSize: 14 },
+  md: { height: 40, fontSize: 14, px: 16, py: 10, gap: 8, iconSize: 16 },
+  lg: { height: 48, fontSize: 16, px: 24, py: 12, gap: 10, iconSize: 18 }
+};
+function resolveIcon(icon, color, iconSize) {
+  if (!icon) return null;
+  if (React.isValidElement(icon)) {
+    return React.cloneElement(icon, { color, size: iconSize });
+  }
+  if (typeof icon === "function") {
+    const Comp = icon;
+    return /* @__PURE__ */ jsx(Comp, { size: iconSize, color });
+  }
+  if (typeof icon !== "string") return null;
+  const piMatches = icon.match(/pi-([a-z-]+)/g);
+  const iconName = piMatches ? piMatches[piMatches.length - 1].replace("pi-", "") : icon;
+  const Component = IconMap[iconName];
+  if (Component) return /* @__PURE__ */ jsx(Component, { size: iconSize, color });
+  return null;
+}
+function Button(rawProps) {
+  const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults("Button", rawProps);
+  const {
+    children,
+    label,
+    isLoadingText,
+    severity = "brand",
+    size = "md",
+    loading,
+    iconPos = "left",
+    icon,
+    disabled,
+    outlined,
+    raised,
+    rounded,
+    testID,
+    style: styleProp,
+    onPress,
+    onClick,
+    ...rest
+  } = props;
+  const { t } = useLanguage();
+  const labelFont = useThemedFont("body");
+  const { cssProps, nativeProps } = useSeparator(rest);
+  const sevColors = useSeverityColors(severity ?? "brand");
+  const sizeConfig = SIZE_MAP[size] ?? SIZE_MAP.md;
+  const isDisabled = disabled || loading;
+  const resolvedLabel = typeof children === "string" ? children : loading && isLoadingText ? isLoadingText : label ? t(label) : "";
+  const hasLabel = !!resolvedLabel;
+  const isIconOnly = !hasLabel && !!icon;
+  const textColor = outlined ? sevColors.solid : sevColors.solidText;
+  const bgColor = outlined ? "transparent" : sevColors.solid;
+  const borderColor = sevColors.border || sevColors.solid;
+  const computedCss = useMemo(() => ({
+    backgroundColor: bgColor,
+    borderColor,
+    borderWidth: 1,
+    height: sizeConfig.height,
+    paddingLeft: hasLabel ? sizeConfig.px : sizeConfig.py,
+    paddingRight: hasLabel ? sizeConfig.px : sizeConfig.py,
+    paddingTop: sizeConfig.py,
+    paddingBottom: sizeConfig.py,
+    borderRadius: rounded ? 9999 : 6,
+    flexDirection: iconPos === "top" || iconPos === "bottom" ? iconPos === "bottom" ? "column-reverse" : "column" : iconPos === "right" ? "row-reverse" : "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: sizeConfig.gap,
+    opacity: isDisabled ? 50 : 100,
+    alignSelf: "flex-start",
+    overflow: "hidden",
+    ...raised ? {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 3 },
+      shadowOpacity: 0.16,
+      shadowRadius: 6,
+      elevation: 4
+    } : {},
+    // Theme overrides the defaults above: shared `root` first, then the
+    // `text` slot (label buttons) or the `iconOnly` slot. Icon-only buttons
+    // are forced square so a `root`/`text` height can never stretch them —
+    // the `iconOnly` slot can still override the square if needed.
+    ...themeStyle,
+    ...elementStyles.root || {},
+    ...isIconOnly ? {
+      width: sizeConfig.height,
+      height: sizeConfig.height,
+      minWidth: sizeConfig.height,
+      ...elementStyles.iconOnly || {}
+    } : elementStyles.text || {},
+    ...cssProps,
+    ...styleProp
+  }), [
+    themeStyle,
+    elementStyles,
+    cssProps,
+    bgColor,
+    borderColor,
+    sizeConfig,
+    hasLabel,
+    icon,
+    iconPos,
+    rounded,
+    raised,
+    isDisabled,
+    styleProp,
+    isIconOnly
+  ]);
+  const iconElement = loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: textColor }) : resolveIcon(icon, textColor, sizeConfig.iconSize);
+  const labelStyle = useMemo(() => ({
+    color: textColor,
+    fontSize: sizeConfig.fontSize,
+    fontWeight: "600",
+    lineHeight: sizeConfig.fontSize * 1.2,
+    ...labelFont ? { fontFamily: labelFont } : {},
+    // Theme/per-instance label slot wins — e.g. theme.components.Button.label.style
+    // = { lineHeight: 22 } to stop Arabic (NotoKufiArabic) glyphs clipping.
+    ...elementStyles.label || {}
+  }), [textColor, sizeConfig, labelFont, elementStyles.label]);
+  const handlePress = useCallback((e) => {
+    if (isDisabled) return;
+    if (onPress) onPress(e);
+    if (onClick) onClick(e);
+  }, [isDisabled, onPress, onClick]);
+  return /* @__PURE__ */ jsxs(
+    ResponsiveElement,
+    {
+      as: "Pressable",
+      cssProps: computedCss,
+      nativeProps: {
+        ...nativeProps,
+        onPress: handlePress,
+        disabled: isDisabled,
+        testID,
+        accessibilityRole: "button",
+        accessibilityState: { disabled: isDisabled, busy: loading },
+        accessibilityLabel: resolvedLabel || void 0
+      },
+      children: [
+        iconElement,
+        !!hasLabel && /* @__PURE__ */ jsx(Text, { style: labelStyle, numberOfLines: 1, children: resolvedLabel }),
+        typeof children !== "string" ? children : void 0
+      ]
+    }
+  );
+}
+
+export { Button, Button as default };
+//# sourceMappingURL=Button.js.map

package/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.native.tsx"],"sourcesContent":["import React, {useMemo, useCallback, type ElementType, type ReactElement} from 'react';\nimport {\n    ActivityIndicator,\n    Text as RNText,\n    type TextStyle,\n    type GestureResponderEvent,\n} from 'react-native';\nimport type {IButtonProps, IconName, IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {ResponsiveElement, useSeparator, style as resolveStyle} from '@lmb-it/kitsconcertomobile';\nimport {IconMap} from '../../assets/Icons';\nimport {useLanguage, useComponentDefaults, useThemedFont} from '../../hooks';\nimport {useSeverityColors} from '../../hooks/useSeverityColors';\n\n/* ─── Size configuration (matches web) ────────────────────────── */\nconst SIZE_MAP = {\n    sm: {height: 32, fontSize: 12, px: 10, py: 6, gap: 6, iconSize: 14},\n    md: {height: 40, fontSize: 14, px: 16, py: 10, gap: 8, iconSize: 16},\n    lg: {height: 48, fontSize: 16, px: 24, py: 12, gap: 10, iconSize: 18},\n} as const;\n\n/* ─── Icon resolver ──────────────────────────────────────────── */\nfunction resolveIcon(\n    icon: unknown,\n    color: string,\n    iconSize: number,\n): React.ReactNode {\n    if (!icon) return null;\n    if (React.isValidElement(icon)) {\n        return React.cloneElement(icon as ReactElement<any>, {color, size: iconSize});\n    }\n    if (typeof icon === 'function') {\n        const Comp = icon as ElementType;\n        return <Comp size={iconSize} color={color} />;\n    }\n    if (typeof icon !== 'string') return null;\n    const piMatches = icon.match(/pi-([a-z-]+)/g);\n    const iconName = piMatches\n        ? (piMatches[piMatches.length - 1]!.replace('pi-', '') as IconName)\n        : (icon as IconName);\n    const Component = IconMap[iconName];\n    if (Component) return <Component size={iconSize} color={color} />;\n    return null;\n}\n\n/* ─── Button Component ───────────────────────────────────────── */\nexport function Button(rawProps: IButtonProps<IconName | string | ElementType | ReactElement>) {\n    const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('Button', rawProps);\n    const {\n        children,\n        label,\n        isLoadingText,\n        severity = 'brand',\n        size = 'md',\n        loading,\n        iconPos = 'left',\n        icon,\n        disabled,\n        outlined,\n        raised,\n        rounded,\n        testID,\n        style: styleProp,\n        onPress,\n        onClick,\n        ...rest\n    } = props;\n\n    const {t} = useLanguage();\n    const labelFont = useThemedFont('body');\n    const {cssProps, nativeProps} = useSeparator<Record<any, any>>(rest);\n    const sevColors = useSeverityColors((severity as any) ?? 'brand');\n\n    const sizeConfig = SIZE_MAP[size as keyof typeof SIZE_MAP] ?? SIZE_MAP.md;\n    const isDisabled = disabled || loading;\n\n    /* ── Resolve label text ── */\n    const resolvedLabel = typeof children === 'string'\n        ? children\n        : loading && isLoadingText\n            ? isLoadingText\n            : label ? t(label) : '';\n\n    const hasLabel = !!resolvedLabel;\n    const isIconOnly = !hasLabel && !!icon;\n\n    /* ── Severity colors ── */\n    const textColor = outlined ? sevColors.solid : sevColors.solidText;\n    const bgColor = outlined ? 'transparent' : sevColors.solid;\n    const borderColor = sevColors.border || sevColors.solid;\n\n    /* ── Build CSS props for ResponsiveElement ── */\n    const computedCss:IStyleClasses = useMemo(() => ({\n        backgroundColor: bgColor,\n        borderColor,\n        borderWidth: 1,\n        height: sizeConfig.height,\n        paddingLeft: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingRight: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingTop: sizeConfig.py,\n        paddingBottom: sizeConfig.py,\n        borderRadius: rounded ? 9999 : 6,\n        flexDirection: iconPos === 'top' || iconPos === 'bottom'\n            ? (iconPos === 'bottom' ? 'column-reverse' : 'column')\n            : (iconPos === 'right' ? 'row-reverse' : 'row'),\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: sizeConfig.gap,\n        opacity: isDisabled ? 50 : 100,\n        alignSelf: 'flex-start',\n        overflow: 'hidden',\n        ...(raised ? {\n            shadowColor: '#000',\n            shadowOffset: {width: 0, height: 3},\n            shadowOpacity: 0.16,\n            shadowRadius: 6,\n            elevation: 4,\n        } : {}),\n        // Theme overrides the defaults above: shared `root` first, then the\n        // `text` slot (label buttons) or the `iconOnly` slot. Icon-only buttons\n        // are forced square so a `root`/`text` height can never stretch them —\n        // the `iconOnly` slot can still override the square if needed.\n        ...themeStyle,\n        ...(elementStyles.root || {}),\n        ...(isIconOnly\n            ? {\n                width: sizeConfig.height,\n                height: sizeConfig.height,\n                minWidth: sizeConfig.height,\n                ...(elementStyles.iconOnly || {}),\n              }\n            : (elementStyles.text || {})),\n        ...cssProps,\n        ...styleProp,\n    }), [themeStyle, elementStyles, cssProps, bgColor, borderColor, sizeConfig,\n        hasLabel, icon, iconPos, rounded, raised, isDisabled, styleProp, isIconOnly]);\n\n    /* ── Icon element ── */\n    const iconElement = loading\n        ? <ActivityIndicator size=\"small\" color={textColor} />\n        : resolveIcon(icon, textColor, sizeConfig.iconSize);\n\n    /* ── Text style ── */\n    const labelStyle: TextStyle = useMemo(() => ({\n        color: textColor,\n        fontSize: sizeConfig.fontSize,\n        fontWeight: '600',\n        lineHeight: sizeConfig.fontSize * 1.2,\n        ...(labelFont ? {fontFamily: labelFont} : {}),\n        // Theme/per-instance label slot wins — e.g. theme.components.Button.label.style\n        // = { lineHeight: 22 } to stop Arabic (NotoKufiArabic) glyphs clipping.\n        ...((elementStyles.label as TextStyle) || {}),\n    }), [textColor, sizeConfig, labelFont, elementStyles.label]);\n\n    /* ── Press handler ── */\n    const handlePress = useCallback((e: GestureResponderEvent) => {\n        if (isDisabled) return;\n        if (onPress) onPress(e as any);\n        if (onClick) onClick(e as any);\n    }, [isDisabled, onPress, onClick]);\n\n    return (\n        <ResponsiveElement\n            as=\"Pressable\"\n            cssProps={computedCss}\n            nativeProps={{\n                ...nativeProps,\n                onPress: handlePress,\n                disabled: isDisabled,\n                testID,\n                accessibilityRole: 'button',\n                accessibilityState: {disabled: isDisabled, busy: loading},\n                accessibilityLabel: resolvedLabel || undefined,\n            }}\n        >\n            {iconElement}\n            {!!hasLabel && (\n                <RNText style={labelStyle} numberOfLines={1}>\n                    {resolvedLabel}\n                </RNText>\n            )}\n            {typeof children !== 'string' ? children : undefined}\n        </ResponsiveElement>\n    );\n}\n\nexport default Button;\n"],"names":["RNText"],"mappings":"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"}

package/components/Carousel/index.cjs

@@ -0,0 +1,95 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactNative = require('react-native');
+var Animated = require('react-native-reanimated');
+var index = require('../../primitives/Box/index.cjs');
+var index_native = require('../../primitives/Text/index.cjs');
+require('../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../hooks/useComponentDefaults.cjs');
+
+const DOT = 7;
+const DOT_GAP = 6;
+const STEP = DOT + DOT_GAP;
+function Carousel(rawProps) {
+  const props = useComponentDefaults.default("Carousel", rawProps).mergedProps;
+  const { images, aspectRatio = 1.2, radius = 0, showCounter = true, showDots = true, onIndexChange, testID } = props;
+  const [w, setW] = React.useState(0);
+  const [active, setActive] = React.useState(0);
+  const scrollRef = React.useRef(null);
+  const h = w > 0 ? Math.round(w / aspectRatio) : 0;
+  const indicatorStyle = Animated.useAnimatedStyle(() => ({
+    transform: [{ translateX: Animated.withTiming(active * STEP, { duration: 250 }) }]
+  }));
+  const onMomentumEnd = (e) => {
+    const vw = e.nativeEvent.layoutMeasurement.width || w || 1;
+    const i = Math.max(0, Math.min(images.length - 1, Math.round(e.nativeEvent.contentOffset.x / vw)));
+    if (i !== active) {
+      setActive(i);
+      onIndexChange?.(i);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      testID,
+      onLayout: (e) => setW(e.nativeEvent.layout.width),
+      style: { width: "100%", position: "relative", borderRadius: radius, overflow: "hidden" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.ScrollView,
+          {
+            ref: scrollRef,
+            horizontal: true,
+            pagingEnabled: true,
+            showsHorizontalScrollIndicator: false,
+            onMomentumScrollEnd: onMomentumEnd,
+            scrollEventThrottle: 16,
+            children: images.map((src, i) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.Image, { source: { uri: src }, resizeMode: "cover", style: { width: w, height: h } }, i))
+          }
+        ),
+        showCounter && images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          index.default,
+          {
+            position: "absolute",
+            top: 8,
+            right: 8,
+            bgColor: "rgba(0,0,0,0.55)",
+            paddingLeft: 8,
+            paddingRight: 8,
+            paddingTop: 2,
+            paddingBottom: 2,
+            borderRadius: 999,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(index_native.default, { color: "#FFFFFF", fontSize: 11, fontWeight: "700", children: [
+              active + 1,
+              " / ",
+              images.length
+            ] })
+          }
+        ),
+        showDots && images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { position: "absolute", bottom: 8, left: 0, right: 0, flexDirection: "row", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { position: "relative", flexDirection: "row", gap: DOT_GAP }, children: [
+          images.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: { width: DOT, height: DOT, borderRadius: DOT / 2, backgroundColor: "rgba(255,255,255,0.5)" }
+            },
+            i
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Animated.View,
+            {
+              style: [
+                { position: "absolute", top: 0, left: 0, width: DOT, height: DOT, borderRadius: DOT / 2, backgroundColor: "#FFFFFF" },
+                indicatorStyle
+              ]
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+
+exports.Carousel = Carousel;
+//# sourceMappingURL=index.cjs.map