@lmb-it/kitsconcerto-native 0.1.236

package/form/inputs/ColorPicker/index.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { View } from 'react-native';
+import ColorPicker, { colorKit, Panel1, HueSlider, OpacitySlider, Swatches, PreviewText } from 'reanimated-color-picker';
+import KitsContainer from '../../helpers/FormContainer/index.js';
+import { useFormInputController } from '../../helpers/useFormInputController/useFormInputController.js';
+import { createColorPickerStyle } from './colorPickerStyle.js';
+import '../../../contexts/DialogContext.js';
+import useComponentDefaults from '../../../hooks/useComponentDefaults.js';
+import useResolvedStyle from '../../../hooks/useResolvedStyle.js';
+import { useKitsTheme } from '../../../contexts/Theme/KitsThemeProvider.js';
+
+const KitsInputColorPicker = ({ ref, ...rawProps }) => {
+  const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults("ColorPicker", rawProps, "Input");
+  const resolvedThemeStyle = useResolvedStyle(themeStyle);
+  const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});
+  const { resolveToken } = useKitsTheme();
+  const colorPickerStyle = createColorPickerStyle(resolveToken);
+  const {
+    id,
+    label,
+    required,
+    disabled,
+    errors,
+    invalid,
+    helperText,
+    value,
+    defaultValue,
+    onChange,
+    leftAddon,
+    rightAddon,
+    colorFormat,
+    // optional: may not be used directly in reanimated-color-picker
+    localProps = {},
+    ...rest
+  } = props;
+  const customSwatches = new Array(6).fill("#fff").map(() => colorKit.randomRgbColor().hex());
+  const [resultColor, setResultColor] = useState(customSwatches[0]);
+  const { emitChange, onWorkletChange} = useFormInputController({
+    value,
+    defaultValue,
+    onChange
+  });
+  const onColorChange = (color) => {
+    "worklet";
+    onWorkletChange(color.hex);
+  };
+  return /* @__PURE__ */ jsx(
+    KitsContainer,
+    {
+      id,
+      label,
+      helperText,
+      errors,
+      invalid,
+      disabled,
+      required,
+      leftAddon,
+      rightAddon,
+      elementStyles,
+      children: /* @__PURE__ */ jsx(View, { style: { width: "100%", ...resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle }, children: /* @__PURE__ */ jsxs(
+        ColorPicker,
+        {
+          value: resultColor,
+          sliderThickness: 25,
+          thumbSize: 24,
+          thumbShape: "circle",
+          onChange: onColorChange,
+          onCompleteJS: (color) => emitChange(color.hex),
+          style: colorPickerStyle.picker,
+          boundedThumb: true,
+          children: [
+            /* @__PURE__ */ jsx(Panel1, { style: colorPickerStyle.panelStyle }),
+            /* @__PURE__ */ jsx(HueSlider, { style: colorPickerStyle.sliderStyle }),
+            /* @__PURE__ */ jsx(OpacitySlider, { style: colorPickerStyle.sliderStyle }),
+            /* @__PURE__ */ jsx(
+              Swatches,
+              {
+                style: colorPickerStyle.swatchesContainer,
+                swatchStyle: colorPickerStyle.swatchStyle,
+                colors: customSwatches
+              }
+            ),
+            /* @__PURE__ */ jsx(PreviewText, { style: colorPickerStyle.previewTxt, colorFormat: "hwba" })
+          ]
+        }
+      ) })
+    }
+  );
+};
+
+export { KitsInputColorPicker as default };
+//# sourceMappingURL=index.js.map

package/form/inputs/ColorPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/form/inputs/ColorPicker/index.native.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport { View } from \"react-native\";\nimport ColorPicker, { colorKit, HueSlider, OpacitySlider, Panel1, PreviewText, Swatches, type ColorFormatsObject } from 'reanimated-color-picker';\nimport type { IKitsInputColorPicker } from \"@lmb-it/kitsconcerto-types\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport { useFormInputController } from \"../../helpers/useFormInputController\";\nimport { createColorPickerStyle } from './colorPickerStyle';\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {useKitsTheme} from \"../../../contexts/Theme\";\n\nconst KitsInputColorPicker = ({ ref, ...rawProps }: IKitsInputColorPicker) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('ColorPicker', rawProps, 'Input');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {resolveToken} = useKitsTheme();\n    const colorPickerStyle = createColorPickerStyle(resolveToken);\n    const {\n        id,\n        label,\n        required,\n        disabled,\n        errors,\n        invalid,\n        helperText,\n        value,\n        defaultValue,\n        onChange,\n        leftAddon,\n        rightAddon,\n        colorFormat, // optional: may not be used directly in reanimated-color-picker\n        localProps = {},\n        ...rest\n    } = props;\n\n    const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());\n\n    const [resultColor, setResultColor] = useState(customSwatches[0]);\n\n\n\n    // Unified controlled/uncontrolled logic\n    const { value: displayValue, emitChange, onWorkletChange, currentReanimatedValue } = useFormInputController<any>({\n        value,\n        defaultValue,\n        onChange\n    });\n\n    const onColorChange = (color: ColorFormatsObject) => {\n        'worklet';\n        onWorkletChange(color.hex);\n    };\n\n\n    return (\n        <KitsContainer\n            id={id}\n            label={label}\n            helperText={helperText}\n            errors={errors}\n            invalid={invalid}\n            disabled={disabled}\n            required={required}\n            leftAddon={leftAddon}\n            rightAddon={rightAddon}\n            elementStyles={elementStyles}\n        >\n            {/* Addons are rendered by KitsContainer (matches every other input\n                + web behaviour). This component owns only the picker surface. */}\n            <View style={{ width: \"100%\", ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}>\n                <ColorPicker\n                    value={resultColor}\n                    sliderThickness={25}\n                    thumbSize={24}\n                    thumbShape='circle'\n                    onChange={onColorChange}\n                    onCompleteJS={(color: ColorFormatsObject)=>emitChange(color.hex)}\n                    style={colorPickerStyle.picker}\n                    boundedThumb\n                >\n                    <Panel1 style={colorPickerStyle.panelStyle} />\n                    <HueSlider style={colorPickerStyle.sliderStyle} />\n                    <OpacitySlider style={colorPickerStyle.sliderStyle} />\n\n                    {/*<Divider />*/}\n                    <Swatches\n                        style={colorPickerStyle.swatchesContainer}\n                        swatchStyle={colorPickerStyle.swatchStyle}\n                        colors={customSwatches}\n                    />\n                    {/*<Divider />*/}\n\n                    <PreviewText style={colorPickerStyle.previewTxt} colorFormat='hwba' />\n                </ColorPicker>\n            </View>\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputColorPicker;\n"],"names":[],"mappings":"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"}

package/form/inputs/Datepicker/index.cjs

@@ -0,0 +1,217 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactNative = require('react-native');
+var DateTimePicker = require('@react-native-community/datetimepicker');
+var index_native = require('../../helpers/FormContainer/index.cjs');
+var useFormInputController_native = require('../../helpers/useFormInputController/useFormInputController.cjs');
+require('../../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../../hooks/useComponentDefaults.cjs');
+var useResolvedStyle = require('../../../hooks/useResolvedStyle.cjs');
+var useThemedFont = require('../../../hooks/useThemedFont.cjs');
+var KitsThemeProvider_native = require('../../../contexts/Theme/KitsThemeProvider.cjs');
+var index_native$1 = require('../../../primitives/Text/index.cjs');
+
+const KitsInputCalendar = ({
+  ref: _ref,
+  placeholder,
+  ...rawProps
+}) => {
+  const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults.default(
+    "Datepicker",
+    rawProps,
+    "Input"
+  );
+  const resolvedThemeStyle = useResolvedStyle.default(themeStyle);
+  const resolvedRootStyle = useResolvedStyle.default(elementStyles?.root || {});
+  const { resolveToken } = KitsThemeProvider_native.useKitsTheme();
+  const themedFont = useThemedFont.default("body");
+  const {
+    id,
+    label,
+    helperText,
+    errors,
+    invalid,
+    required,
+    hideError,
+    disabled,
+    isFloatedLabel,
+    leftAddon,
+    rightAddon,
+    value,
+    defaultValue,
+    onChange,
+    containerStyle,
+    localProps = {}
+  } = props;
+  const { value: internalVal, emitChange } = useFormInputController_native.useFormInputController({
+    value,
+    defaultValue,
+    onChange: (event) => {
+      onChange?.(event.target.value);
+    }
+  });
+  const val = internalVal instanceof Date ? internalVal : null;
+  const [iosOpen, setIosOpen] = React.useState(false);
+  const handleNativeChange = React.useCallback(
+    (_event, picked) => {
+      if (picked) emitChange(picked);
+    },
+    [emitChange]
+  );
+  const openPicker = React.useCallback(() => {
+    if (disabled) return;
+    if (reactNative.Platform.OS === "android") {
+      DateTimePicker.DateTimePickerAndroid.open({
+        value: val ?? /* @__PURE__ */ new Date(),
+        mode: "date",
+        onChange: handleNativeChange,
+        ...localProps
+      });
+      return;
+    }
+    setIosOpen(true);
+  }, [disabled, val, handleNativeChange, localProps]);
+  const rootStyle = resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : resolvedThemeStyle;
+  const valueColor = rootStyle?.color ?? resolveToken("text-primary");
+  const placeholderColor = resolveToken("text-muted");
+  const isEmpty = !val;
+  const displayText = val ? val.toLocaleDateString() : placeholder ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    index_native.default,
+    {
+      id,
+      helperText,
+      errors,
+      invalid,
+      label,
+      required,
+      hideError,
+      isFloatedLabel,
+      disabled,
+      leftAddon,
+      rightAddon,
+      containerStyle,
+      elementStyles,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            onPress: openPicker,
+            disabled,
+            accessibilityRole: "button",
+            accessibilityState: { disabled: !!disabled },
+            accessibilityLabel: typeof label === "string" ? label : label?.text ?? "Date picker",
+            style: ({ pressed }) => ({
+              flex: 1,
+              alignSelf: "stretch",
+              justifyContent: "center",
+              paddingHorizontal: 12,
+              opacity: pressed && !disabled ? 0.7 : 1,
+              // `root` slot wins last — backgroundColor, color,
+              // borderRadius, fontSize etc. all flow from the theme.
+              ...rootStyle || {}
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              index_native$1.default,
+              {
+                style: {
+                  ...themedFont ? { fontFamily: themedFont } : {},
+                  fontSize: rootStyle?.fontSize ?? 14,
+                  color: isEmpty ? placeholderColor : valueColor
+                },
+                numberOfLines: 1,
+                children: displayText
+              }
+            )
+          }
+        ),
+        reactNative.Platform.OS === "ios" && iosOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Modal,
+          {
+            transparent: true,
+            animationType: "fade",
+            visible: iosOpen,
+            onRequestClose: () => setIosOpen(false),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Pressable,
+              {
+                onPress: () => setIosOpen(false),
+                style: {
+                  flex: 1,
+                  backgroundColor: "rgba(0,0,0,0.4)",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  reactNative.Pressable,
+                  {
+                    onPress: () => {
+                    },
+                    style: {
+                      backgroundColor: rootStyle?.backgroundColor ?? resolveToken("surface-card"),
+                      borderTopLeftRadius: 16,
+                      borderTopRightRadius: 16,
+                      paddingTop: 8,
+                      paddingBottom: 24
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        reactNative.View,
+                        {
+                          style: {
+                            flexDirection: "row",
+                            justifyContent: "flex-end",
+                            paddingHorizontal: 16,
+                            paddingBottom: 4
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            reactNative.Pressable,
+                            {
+                              onPress: () => setIosOpen(false),
+                              accessibilityRole: "button",
+                              accessibilityLabel: "Done",
+                              hitSlop: 8,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                index_native$1.default,
+                                {
+                                  style: {
+                                    ...themedFont ? { fontFamily: themedFont } : {},
+                                    color: resolveToken("primary"),
+                                    fontWeight: "600",
+                                    fontSize: 16
+                                  },
+                                  children: "Done"
+                                }
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        DateTimePicker,
+                        {
+                          value: val ?? /* @__PURE__ */ new Date(),
+                          mode: "date",
+                          display: "spinner",
+                          onChange: handleNativeChange,
+                          disabled,
+                          ...localProps
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+exports.default = KitsInputCalendar;
+//# sourceMappingURL=index.cjs.map

package/form/inputs/Datepicker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form/inputs/Datepicker/index.native.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Modal, Platform, Pressable, View } from 'react-native';\nimport DateTimePicker, {\n    DateTimePickerAndroid,\n    type DatePickerOptions,\n} from '@react-native-community/datetimepicker';\nimport type { IKitsInputCalendar } from '@lmb-it/kitsconcerto-types';\nimport KitsContainer from '../../helpers/FormContainer';\nimport { useFormInputController } from '../../helpers/useFormInputController';\nimport { Text } from '../../../_compat';\nimport {\n    useComponentDefaults,\n    useResolvedStyle,\n    useThemedFont,\n} from '@lmb-it/kitsconcerto/hooks';\nimport { useKitsTheme } from '../../../contexts/Theme';\n\n/**\n * KitsInputCalendar (native).\n *\n * The previous implementation painted the native `DateTimePicker` underneath\n * an absolute-positioned cover with `pointerEvents='none'`. Taps fell through\n * to the native widget — but on iOS that widget renders as a small \"pill\"\n * centred in its parent, so the rest of the full-width row was un-tappable\n * even though it looked like an input.\n *\n * The picker is now opened *imperatively* on tap:\n *   • Android → `DateTimePickerAndroid.open(...)` (modal dialog).\n *   • iOS     → a `Modal` hosting an inline spinner `DateTimePicker`.\n *\n * The visible field is a single `Pressable` styled exactly like the other\n * inputs — `Input.root` + theme `root` slot — so design tokens\n * (background, border via FormContainer's `inputGroup`, font, colour)\n * stay in charge of the look. The Pressable fills the FormContainer's\n * inner cell via `flex: 1`, so the entire row becomes a tap target.\n */\nconst KitsInputCalendar = <T = DatePickerOptions,>({\n    ref: _ref,\n    placeholder,\n    ...rawProps\n}: IKitsInputCalendar<T>) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults(\n        'Datepicker',\n        rawProps as any,\n        'Input',\n    );\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const { resolveToken } = useKitsTheme();\n    const themedFont = useThemedFont('body');\n\n    const {\n        id,\n        label,\n        helperText,\n        errors,\n        invalid,\n        required,\n        hideError,\n        disabled,\n        isFloatedLabel,\n        leftAddon,\n        rightAddon,\n        value,\n        defaultValue,\n        onChange,\n        containerStyle,\n        localProps = {} as DatePickerOptions,\n    } = props as any;\n\n    const { value: internalVal, emitChange } = useFormInputController<Date | null>({\n        value: value as Date | null,\n        defaultValue: defaultValue as Date | null,\n        onChange: (event) => {\n            onChange?.(event.target.value);\n        },\n    });\n\n    const val: Date | null = internalVal instanceof Date ? internalVal : null;\n\n    // Inline iOS picker visibility — Android uses the imperative API and never\n    // needs this state.\n    const [iosOpen, setIosOpen] = useState(false);\n\n    const handleNativeChange = useCallback(\n        (_event: any, picked?: Date) => {\n            if (picked) emitChange(picked);\n        },\n        [emitChange],\n    );\n\n    const openPicker = useCallback(() => {\n        if (disabled) return;\n        if (Platform.OS === 'android') {\n            DateTimePickerAndroid.open({\n                value: val ?? new Date(),\n                mode: 'date',\n                onChange: handleNativeChange,\n                ...(localProps as any),\n            });\n            return;\n        }\n        setIosOpen(true);\n    }, [disabled, val, handleNativeChange, localProps]);\n\n    // `Input.root` carries `color: 'text'` and the font-size used by every\n    // other input. We layer the per-instance `root` slot on top so consumers\n    // can still override colour, fontWeight, padding, etc. via theme tokens.\n    const rootStyle =\n        resolvedRootStyle && Object.keys(resolvedRootStyle).length\n            ? resolvedRootStyle\n            : resolvedThemeStyle;\n\n    const valueColor =\n        (rootStyle as any)?.color ?? resolveToken('text-primary');\n    // Placeholder colour mirrors the muted token used by Select/InputText.\n    const placeholderColor = resolveToken('text-muted');\n\n    const isEmpty = !val;\n    const displayText = val\n        ? val.toLocaleDateString()\n        : (placeholder as string | undefined) ?? '';\n\n    return (\n        <KitsContainer\n            id={id}\n            helperText={helperText}\n            errors={errors}\n            invalid={invalid}\n            label={label}\n            required={required}\n            hideError={hideError}\n            isFloatedLabel={isFloatedLabel}\n            disabled={disabled}\n            leftAddon={leftAddon}\n            rightAddon={rightAddon}\n            containerStyle={containerStyle}\n            elementStyles={elementStyles}\n        >\n            {/* The Pressable IS the input surface.\n                `flex: 1, alignSelf: 'stretch'` makes the tap target fill the\n                full row provided by FormContainer's inner `<View flex: 1>`\n                cell — including the horizontal padding, the empty area to\n                the right of the value, everything. `justifyContent: 'center'`\n                vertically centres the text the same way other inputs are\n                centred inside the 52-px inputGroup. */}\n            <Pressable\n                onPress={openPicker}\n                disabled={disabled}\n                accessibilityRole=\"button\"\n                accessibilityState={{ disabled: !!disabled }}\n                accessibilityLabel={\n                    typeof label === 'string'\n                        ? label\n                        : (label as any)?.text ?? 'Date picker'\n                }\n                style={({ pressed }) => ({\n                    flex: 1,\n                    alignSelf: 'stretch',\n                    justifyContent: 'center',\n                    paddingHorizontal: 12,\n                    opacity: pressed && !disabled ? 0.7 : 1,\n                    // `root` slot wins last — backgroundColor, color,\n                    // borderRadius, fontSize etc. all flow from the theme.\n                    ...(rootStyle || {}),\n                })}\n            >\n                <Text\n                    style={{\n                        ...(themedFont ? { fontFamily: themedFont } : {}),\n                        fontSize: (rootStyle as any)?.fontSize ?? 14,\n                        color: isEmpty ? placeholderColor : valueColor,\n                    }}\n                    numberOfLines={1}\n                >\n                    {displayText}\n                </Text>\n            </Pressable>\n\n            {Platform.OS === 'ios' && iosOpen ? (\n                <Modal\n                    transparent\n                    animationType=\"fade\"\n                    visible={iosOpen}\n                    onRequestClose={() => setIosOpen(false)}\n                >\n                    {/* Scrim — tap outside dismisses, matches Dialog UX. */}\n                    <Pressable\n                        onPress={() => setIosOpen(false)}\n                        style={{\n                            flex: 1,\n                            backgroundColor: 'rgba(0,0,0,0.4)',\n                            justifyContent: 'flex-end',\n                        }}\n                    >\n                        {/* Sheet — swallow taps so the scrim doesn't dismiss\n                            while the user is spinning the wheels. */}\n                        <Pressable\n                            onPress={() => {\n                                /* swallow */\n                            }}\n                            style={{\n                                backgroundColor:\n                                    (rootStyle as any)?.backgroundColor ??\n                                    resolveToken('surface-card'),\n                                borderTopLeftRadius: 16,\n                                borderTopRightRadius: 16,\n                                paddingTop: 8,\n                                paddingBottom: 24,\n                            }}\n                        >\n                            {/* Header row with a \"Done\" affordance. The\n                                wheel commits values as the user spins on\n                                iOS, so the button only dismisses the\n                                sheet — no extra emitChange needed. */}\n                            <View\n                                style={{\n                                    flexDirection: 'row',\n                                    justifyContent: 'flex-end',\n                                    paddingHorizontal: 16,\n                                    paddingBottom: 4,\n                                }}\n                            >\n                                <Pressable\n                                    onPress={() => setIosOpen(false)}\n                                    accessibilityRole=\"button\"\n                                    accessibilityLabel=\"Done\"\n                                    hitSlop={8}\n                                >\n                                    <Text\n                                        style={{\n                                            ...(themedFont\n                                                ? { fontFamily: themedFont }\n                                                : {}),\n                                            color: resolveToken('primary'),\n                                            fontWeight: '600',\n                                            fontSize: 16,\n                                        }}\n                                    >\n                                        Done\n                                    </Text>\n                                </Pressable>\n                            </View>\n                            <DateTimePicker\n                                value={val ?? new Date()}\n                                mode=\"date\"\n                                display=\"spinner\"\n                                onChange={handleNativeChange}\n                                disabled={disabled}\n                                {...(localProps as any)}\n                            />\n                        </Pressable>\n                    </Pressable>\n                </Modal>\n            ) : null}\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputCalendar;\n"],"names":["useComponentDefaults","useResolvedStyle","useKitsTheme","useThemedFont","useFormInputController","useState","useCallback","Platform","DateTimePickerAndroid","jsxs","KitsContainer","jsx","Pressable","Text","Modal","View"],"mappings":"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"}

package/form/inputs/Datepicker/index.js

@@ -0,0 +1,213 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { Platform, Pressable, Modal, View } from 'react-native';
+import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
+import KitsContainer from '../../helpers/FormContainer/index.js';
+import { useFormInputController } from '../../helpers/useFormInputController/useFormInputController.js';
+import '../../../contexts/DialogContext.js';
+import useComponentDefaults from '../../../hooks/useComponentDefaults.js';
+import useResolvedStyle from '../../../hooks/useResolvedStyle.js';
+import useThemedFont from '../../../hooks/useThemedFont.js';
+import { useKitsTheme } from '../../../contexts/Theme/KitsThemeProvider.js';
+import Text from '../../../primitives/Text/index.js';
+
+const KitsInputCalendar = ({
+  ref: _ref,
+  placeholder,
+  ...rawProps
+}) => {
+  const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults(
+    "Datepicker",
+    rawProps,
+    "Input"
+  );
+  const resolvedThemeStyle = useResolvedStyle(themeStyle);
+  const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});
+  const { resolveToken } = useKitsTheme();
+  const themedFont = useThemedFont("body");
+  const {
+    id,
+    label,
+    helperText,
+    errors,
+    invalid,
+    required,
+    hideError,
+    disabled,
+    isFloatedLabel,
+    leftAddon,
+    rightAddon,
+    value,
+    defaultValue,
+    onChange,
+    containerStyle,
+    localProps = {}
+  } = props;
+  const { value: internalVal, emitChange } = useFormInputController({
+    value,
+    defaultValue,
+    onChange: (event) => {
+      onChange?.(event.target.value);
+    }
+  });
+  const val = internalVal instanceof Date ? internalVal : null;
+  const [iosOpen, setIosOpen] = useState(false);
+  const handleNativeChange = useCallback(
+    (_event, picked) => {
+      if (picked) emitChange(picked);
+    },
+    [emitChange]
+  );
+  const openPicker = useCallback(() => {
+    if (disabled) return;
+    if (Platform.OS === "android") {
+      DateTimePickerAndroid.open({
+        value: val ?? /* @__PURE__ */ new Date(),
+        mode: "date",
+        onChange: handleNativeChange,
+        ...localProps
+      });
+      return;
+    }
+    setIosOpen(true);
+  }, [disabled, val, handleNativeChange, localProps]);
+  const rootStyle = resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : resolvedThemeStyle;
+  const valueColor = rootStyle?.color ?? resolveToken("text-primary");
+  const placeholderColor = resolveToken("text-muted");
+  const isEmpty = !val;
+  const displayText = val ? val.toLocaleDateString() : placeholder ?? "";
+  return /* @__PURE__ */ jsxs(
+    KitsContainer,
+    {
+      id,
+      helperText,
+      errors,
+      invalid,
+      label,
+      required,
+      hideError,
+      isFloatedLabel,
+      disabled,
+      leftAddon,
+      rightAddon,
+      containerStyle,
+      elementStyles,
+      children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            onPress: openPicker,
+            disabled,
+            accessibilityRole: "button",
+            accessibilityState: { disabled: !!disabled },
+            accessibilityLabel: typeof label === "string" ? label : label?.text ?? "Date picker",
+            style: ({ pressed }) => ({
+              flex: 1,
+              alignSelf: "stretch",
+              justifyContent: "center",
+              paddingHorizontal: 12,
+              opacity: pressed && !disabled ? 0.7 : 1,
+              // `root` slot wins last — backgroundColor, color,
+              // borderRadius, fontSize etc. all flow from the theme.
+              ...rootStyle || {}
+            }),
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  ...themedFont ? { fontFamily: themedFont } : {},
+                  fontSize: rootStyle?.fontSize ?? 14,
+                  color: isEmpty ? placeholderColor : valueColor
+                },
+                numberOfLines: 1,
+                children: displayText
+              }
+            )
+          }
+        ),
+        Platform.OS === "ios" && iosOpen ? /* @__PURE__ */ jsx(
+          Modal,
+          {
+            transparent: true,
+            animationType: "fade",
+            visible: iosOpen,
+            onRequestClose: () => setIosOpen(false),
+            children: /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: () => setIosOpen(false),
+                style: {
+                  flex: 1,
+                  backgroundColor: "rgba(0,0,0,0.4)",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ jsxs(
+                  Pressable,
+                  {
+                    onPress: () => {
+                    },
+                    style: {
+                      backgroundColor: rootStyle?.backgroundColor ?? resolveToken("surface-card"),
+                      borderTopLeftRadius: 16,
+                      borderTopRightRadius: 16,
+                      paddingTop: 8,
+                      paddingBottom: 24
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        View,
+                        {
+                          style: {
+                            flexDirection: "row",
+                            justifyContent: "flex-end",
+                            paddingHorizontal: 16,
+                            paddingBottom: 4
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            Pressable,
+                            {
+                              onPress: () => setIosOpen(false),
+                              accessibilityRole: "button",
+                              accessibilityLabel: "Done",
+                              hitSlop: 8,
+                              children: /* @__PURE__ */ jsx(
+                                Text,
+                                {
+                                  style: {
+                                    ...themedFont ? { fontFamily: themedFont } : {},
+                                    color: resolveToken("primary"),
+                                    fontWeight: "600",
+                                    fontSize: 16
+                                  },
+                                  children: "Done"
+                                }
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        DateTimePicker,
+                        {
+                          value: val ?? /* @__PURE__ */ new Date(),
+                          mode: "date",
+                          display: "spinner",
+                          onChange: handleNativeChange,
+                          disabled,
+                          ...localProps
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+export { KitsInputCalendar as default };
+//# sourceMappingURL=index.js.map

package/form/inputs/Datepicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/form/inputs/Datepicker/index.native.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Modal, Platform, Pressable, View } from 'react-native';\nimport DateTimePicker, {\n    DateTimePickerAndroid,\n    type DatePickerOptions,\n} from '@react-native-community/datetimepicker';\nimport type { IKitsInputCalendar } from '@lmb-it/kitsconcerto-types';\nimport KitsContainer from '../../helpers/FormContainer';\nimport { useFormInputController } from '../../helpers/useFormInputController';\nimport { Text } from '../../../_compat';\nimport {\n    useComponentDefaults,\n    useResolvedStyle,\n    useThemedFont,\n} from '@lmb-it/kitsconcerto/hooks';\nimport { useKitsTheme } from '../../../contexts/Theme';\n\n/**\n * KitsInputCalendar (native).\n *\n * The previous implementation painted the native `DateTimePicker` underneath\n * an absolute-positioned cover with `pointerEvents='none'`. Taps fell through\n * to the native widget — but on iOS that widget renders as a small \"pill\"\n * centred in its parent, so the rest of the full-width row was un-tappable\n * even though it looked like an input.\n *\n * The picker is now opened *imperatively* on tap:\n *   • Android → `DateTimePickerAndroid.open(...)` (modal dialog).\n *   • iOS     → a `Modal` hosting an inline spinner `DateTimePicker`.\n *\n * The visible field is a single `Pressable` styled exactly like the other\n * inputs — `Input.root` + theme `root` slot — so design tokens\n * (background, border via FormContainer's `inputGroup`, font, colour)\n * stay in charge of the look. The Pressable fills the FormContainer's\n * inner cell via `flex: 1`, so the entire row becomes a tap target.\n */\nconst KitsInputCalendar = <T = DatePickerOptions,>({\n    ref: _ref,\n    placeholder,\n    ...rawProps\n}: IKitsInputCalendar<T>) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults(\n        'Datepicker',\n        rawProps as any,\n        'Input',\n    );\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const { resolveToken } = useKitsTheme();\n    const themedFont = useThemedFont('body');\n\n    const {\n        id,\n        label,\n        helperText,\n        errors,\n        invalid,\n        required,\n        hideError,\n        disabled,\n        isFloatedLabel,\n        leftAddon,\n        rightAddon,\n        value,\n        defaultValue,\n        onChange,\n        containerStyle,\n        localProps = {} as DatePickerOptions,\n    } = props as any;\n\n    const { value: internalVal, emitChange } = useFormInputController<Date | null>({\n        value: value as Date | null,\n        defaultValue: defaultValue as Date | null,\n        onChange: (event) => {\n            onChange?.(event.target.value);\n        },\n    });\n\n    const val: Date | null = internalVal instanceof Date ? internalVal : null;\n\n    // Inline iOS picker visibility — Android uses the imperative API and never\n    // needs this state.\n    const [iosOpen, setIosOpen] = useState(false);\n\n    const handleNativeChange = useCallback(\n        (_event: any, picked?: Date) => {\n            if (picked) emitChange(picked);\n        },\n        [emitChange],\n    );\n\n    const openPicker = useCallback(() => {\n        if (disabled) return;\n        if (Platform.OS === 'android') {\n            DateTimePickerAndroid.open({\n                value: val ?? new Date(),\n                mode: 'date',\n                onChange: handleNativeChange,\n                ...(localProps as any),\n            });\n            return;\n        }\n        setIosOpen(true);\n    }, [disabled, val, handleNativeChange, localProps]);\n\n    // `Input.root` carries `color: 'text'` and the font-size used by every\n    // other input. We layer the per-instance `root` slot on top so consumers\n    // can still override colour, fontWeight, padding, etc. via theme tokens.\n    const rootStyle =\n        resolvedRootStyle && Object.keys(resolvedRootStyle).length\n            ? resolvedRootStyle\n            : resolvedThemeStyle;\n\n    const valueColor =\n        (rootStyle as any)?.color ?? resolveToken('text-primary');\n    // Placeholder colour mirrors the muted token used by Select/InputText.\n    const placeholderColor = resolveToken('text-muted');\n\n    const isEmpty = !val;\n    const displayText = val\n        ? val.toLocaleDateString()\n        : (placeholder as string | undefined) ?? '';\n\n    return (\n        <KitsContainer\n            id={id}\n            helperText={helperText}\n            errors={errors}\n            invalid={invalid}\n            label={label}\n            required={required}\n            hideError={hideError}\n            isFloatedLabel={isFloatedLabel}\n            disabled={disabled}\n            leftAddon={leftAddon}\n            rightAddon={rightAddon}\n            containerStyle={containerStyle}\n            elementStyles={elementStyles}\n        >\n            {/* The Pressable IS the input surface.\n                `flex: 1, alignSelf: 'stretch'` makes the tap target fill the\n                full row provided by FormContainer's inner `<View flex: 1>`\n                cell — including the horizontal padding, the empty area to\n                the right of the value, everything. `justifyContent: 'center'`\n                vertically centres the text the same way other inputs are\n                centred inside the 52-px inputGroup. */}\n            <Pressable\n                onPress={openPicker}\n                disabled={disabled}\n                accessibilityRole=\"button\"\n                accessibilityState={{ disabled: !!disabled }}\n                accessibilityLabel={\n                    typeof label === 'string'\n                        ? label\n                        : (label as any)?.text ?? 'Date picker'\n                }\n                style={({ pressed }) => ({\n                    flex: 1,\n                    alignSelf: 'stretch',\n                    justifyContent: 'center',\n                    paddingHorizontal: 12,\n                    opacity: pressed && !disabled ? 0.7 : 1,\n                    // `root` slot wins last — backgroundColor, color,\n                    // borderRadius, fontSize etc. all flow from the theme.\n                    ...(rootStyle || {}),\n                })}\n            >\n                <Text\n                    style={{\n                        ...(themedFont ? { fontFamily: themedFont } : {}),\n                        fontSize: (rootStyle as any)?.fontSize ?? 14,\n                        color: isEmpty ? placeholderColor : valueColor,\n                    }}\n                    numberOfLines={1}\n                >\n                    {displayText}\n                </Text>\n            </Pressable>\n\n            {Platform.OS === 'ios' && iosOpen ? (\n                <Modal\n                    transparent\n                    animationType=\"fade\"\n                    visible={iosOpen}\n                    onRequestClose={() => setIosOpen(false)}\n                >\n                    {/* Scrim — tap outside dismisses, matches Dialog UX. */}\n                    <Pressable\n                        onPress={() => setIosOpen(false)}\n                        style={{\n                            flex: 1,\n                            backgroundColor: 'rgba(0,0,0,0.4)',\n                            justifyContent: 'flex-end',\n                        }}\n                    >\n                        {/* Sheet — swallow taps so the scrim doesn't dismiss\n                            while the user is spinning the wheels. */}\n                        <Pressable\n                            onPress={() => {\n                                /* swallow */\n                            }}\n                            style={{\n                                backgroundColor:\n                                    (rootStyle as any)?.backgroundColor ??\n                                    resolveToken('surface-card'),\n                                borderTopLeftRadius: 16,\n                                borderTopRightRadius: 16,\n                                paddingTop: 8,\n                                paddingBottom: 24,\n                            }}\n                        >\n                            {/* Header row with a \"Done\" affordance. The\n                                wheel commits values as the user spins on\n                                iOS, so the button only dismisses the\n                                sheet — no extra emitChange needed. */}\n                            <View\n                                style={{\n                                    flexDirection: 'row',\n                                    justifyContent: 'flex-end',\n                                    paddingHorizontal: 16,\n                                    paddingBottom: 4,\n                                }}\n                            >\n                                <Pressable\n                                    onPress={() => setIosOpen(false)}\n                                    accessibilityRole=\"button\"\n                                    accessibilityLabel=\"Done\"\n                                    hitSlop={8}\n                                >\n                                    <Text\n                                        style={{\n                                            ...(themedFont\n                                                ? { fontFamily: themedFont }\n                                                : {}),\n                                            color: resolveToken('primary'),\n                                            fontWeight: '600',\n                                            fontSize: 16,\n                                        }}\n                                    >\n                                        Done\n                                    </Text>\n                                </Pressable>\n                            </View>\n                            <DateTimePicker\n                                value={val ?? new Date()}\n                                mode=\"date\"\n                                display=\"spinner\"\n                                onChange={handleNativeChange}\n                                disabled={disabled}\n                                {...(localProps as any)}\n                            />\n                        </Pressable>\n                    </Pressable>\n                </Modal>\n            ) : null}\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputCalendar;\n"],"names":[],"mappings":"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"}