@erquhart/heroui-native 1.0.0-beta.10.1

package/lib/module/components/card/card.md

@@ -0,0 +1,187 @@
+# Card
+
+Displays a card container with flexible layout sections for structured content.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { Card } from 'heroui-native';
+```
+
+## Usage
+
+### Basic Usage
+
+The Card component creates a container with built-in sections for organized content.
+
+```tsx
+<Card>
+  <Card.Body>...</Card.Body>
+</Card>
+```
+
+### With Title and Description
+
+Combine title and description components for structured text content.
+
+```tsx
+<Card>
+  <Card.Body>
+    <Card.Title>...</Card.Title>
+    <Card.Description>...</Card.Description>
+  </Card.Body>
+</Card>
+```
+
+### With Header and Footer
+
+Add header and footer sections for icons, badges, or actions.
+
+```tsx
+<Card>
+  <Card.Header>...</Card.Header>
+  <Card.Body>...</Card.Body>
+  <Card.Footer>...</Card.Footer>
+</Card>
+```
+
+### Variants
+
+Control the card's background appearance using different variants.
+
+```tsx
+<Card variant="default">...</Card>
+<Card variant="secondary">...</Card>
+<Card variant="tertiary">...</Card>
+<Card variant="quaternary">...</Card>
+<Card variant="transparent">...</Card>
+```
+
+### Horizontal Layout
+
+Create horizontal cards by using flex-row styling.
+
+```tsx
+<Card className="flex-row gap-4">
+  <Image source={...} className="size-24 rounded-lg" />
+</Card>
+```
+
+### Background Image
+
+Use an image as an absolute positioned background.
+
+```tsx
+<Card>
+  <Image source={...} className="absolute inset-0" />
+  <View className="gap-4">...</View>
+</Card>
+```
+
+## Example
+
+```tsx
+import { Button, Card } from 'heroui-native';
+import { Ionicons } from '@expo/vector-icons';
+import { View } from 'react-native';
+
+export default function CardExample() {
+  return (
+    <Card>
+      <View className="gap-4">
+        <Card.Body className="mb-4">
+          <View className="gap-1 mb-2">
+            <Card.Title className="text-pink-500">$450</Card.Title>
+            <Card.Title>Living room Sofa • Collection 2025</Card.Title>
+          </View>
+          <Card.Description>
+            This sofa is perfect for modern tropical spaces, baroque inspired
+            spaces.
+          </Card.Description>
+        </Card.Body>
+        <Card.Footer className="gap-3">
+          <Button variant="primary">Buy now</Button>
+          <Button variant="ghost">
+            <Button.Label>Add to cart</Button.Label>
+            <Ionicons name="bag-outline" size={16} />
+          </Button>
+        </Card.Footer>
+      </View>
+    </Card>
+  );
+}
+```
+
+## Anatomy
+
+```tsx
+<Card>
+  <Card.Header>...</Card.Header>
+  <Card.Body>
+    <Card.Title>...</Card.Title>
+    <Card.Description>...</Card.Description>
+  </Card.Body>
+  <Card.Footer>...</Card.Footer>
+</Card>
+```
+
+- **Card**: Main container that extends Surface component. Provides base card structure with configurable surface variants and handles overall layout.
+- **Card.Header**: Header section for top-aligned content like icons or badges.
+- **Card.Body**: Main content area with flex-1 that expands to fill all available space between Card.Header and Card.Footer.
+- **Card.Title**: Title text with foreground color and medium font weight.
+- **Card.Description**: Description text with muted color and smaller font size.
+- **Card.Footer**: Footer section for bottom-aligned actions like buttons.
+
+## API Reference
+
+### Card
+
+| prop           | type                                                                      | default     | description                                                                               |
+| -------------- | ------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------- |
+| `children`     | `React.ReactNode`                                                         | -           | Content to be rendered inside the card                                                    |
+| `variant`      | `'default' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'transparent'` | `'default'` | Visual variant of the card surface                                                        |
+| `className`    | `string`                                                                  | -           | Additional CSS classes to apply                                                           |
+| `animation`    | `"disable-all" \| undefined`                                              | `undefined` | Animation configuration. Use `"disable-all"` to disable all animations including children |
+| `...ViewProps` | `ViewProps`                                                               | -           | All standard React Native View props are supported                                        |
+
+### Card.Header
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Children elements to be rendered inside the header |
+| `className`    | `string`          | -       | Additional CSS classes                             |
+| `...ViewProps` | `ViewProps`       | -       | All standard React Native View props are supported |
+
+### Card.Body
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Children elements to be rendered inside the body   |
+| `className`    | `string`          | -       | Additional CSS classes                             |
+| `...ViewProps` | `ViewProps`       | -       | All standard React Native View props are supported |
+
+### Card.Footer
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Children elements to be rendered inside the footer |
+| `className`    | `string`          | -       | Additional CSS classes                             |
+| `...ViewProps` | `ViewProps`       | -       | All standard React Native View props are supported |
+
+### Card.Title
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Children elements to be rendered as the title text |
+| `className`    | `string`          | -       | Additional CSS classes                             |
+| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported |
+
+### Card.Description
+
+| prop           | type              | default | description                                              |
+| -------------- | ----------------- | ------- | -------------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Children elements to be rendered as the description text |
+| `className`    | `string`          | -       | Additional CSS classes                                   |
+| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported       |

package/lib/module/components/card/card.styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import { tv } from 'tailwind-variants';
+import { combineStyles } from "../../helpers/theme/utils/combine-styles.js";
+const root = tv({
+  base: ''
+});
+const header = tv({
+  base: ''
+});
+const body = tv({
+  base: ''
+});
+const footer = tv({
+  base: ''
+});
+const label = tv({
+  base: 'text-foreground font-medium text-lg'
+});
+const description = tv({
+  base: 'text-base text-muted'
+});
+const cardStyles = combineStyles({
+  root,
+  header,
+  body,
+  footer,
+  label,
+  description
+});
+export default cardStyles;
+//# sourceMappingURL=card.styles.js.map

package/lib/module/components/card/card.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tv","combineStyles","root","base","header","body","footer","label","description","cardStyles"],"sourceRoot":"../../../../src","sources":["components/card/card.styles.ts"],"mappings":";;AAAA,SAASA,EAAE,QAAQ,mBAAmB;AACtC,SAASC,aAAa,QAAQ,6CAA0C;AAExE,MAAMC,IAAI,GAAGF,EAAE,CAAC;EACdG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMC,MAAM,GAAGJ,EAAE,CAAC;EAChBG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAME,IAAI,GAAGL,EAAE,CAAC;EACdG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMG,MAAM,GAAGN,EAAE,CAAC;EAChBG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMI,KAAK,GAAGP,EAAE,CAAC;EACfG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMK,WAAW,GAAGR,EAAE,CAAC;EACrBG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMM,UAAU,GAAGR,aAAa,CAAC;EAC/BC,IAAI;EACJE,MAAM;EACNC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC;AACF,CAAC,CAAC;AAEF,eAAeC,UAAU","ignoreList":[]}

package/lib/module/components/card/card.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=card.types.js.map

package/lib/module/components/card/card.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/card/card.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/card/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as Card } from "./card.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","Card"],"sourceRoot":"../../../../src","sources":["components/card/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,IAAI,QAAQ,WAAQ","ignoreList":[]}

package/lib/module/components/checkbox/checkbox.animation.js

@@ -0,0 +1,164 @@
+"use strict";
+
+import { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useAnimationSettings } from "../../helpers/contexts/index.js";
+import { useCombinedAnimationDisabledState } from "../../helpers/hooks/index.js";
+import { createContext } from "../../helpers/utils/index.js";
+import { getAnimationState, getAnimationValueMergedConfig, getAnimationValueProperty, getIsAnimationDisabledValue, getRootAnimationState } from "../../helpers/utils/animation.js";
+import { useFormField } from "../form-field/form-field.context.js";
+const [CheckboxAnimationProvider, useCheckboxAnimation] = createContext({
+  name: 'CheckboxAnimationContext'
+});
+export { CheckboxAnimationProvider, useCheckboxAnimation };
+
+// --------------------------------------------------
+
+export function useCheckboxRootAnimation(options) {
+  const {
+    animation
+  } = options;
+  const isCheckboxPressed = useSharedValue(false);
+  const formFieldContext = useFormField();
+  const {
+    animationConfig,
+    isAnimationDisabled
+  } = getRootAnimationState(animation);
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled
+  });
+  const scaleValue = getAnimationValueProperty({
+    animationValue: animationConfig?.scale,
+    property: 'value',
+    defaultValue: [1, 0.96]
+  });
+  const scaleTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.scale,
+    property: 'timingConfig',
+    defaultValue: {
+      duration: 150
+    }
+  });
+  const rContainerStyle = useAnimatedStyle(() => {
+    if (isAnimationDisabledValue) {
+      return {};
+    }
+    const pressed = isCheckboxPressed.get() || (formFieldContext?.isPressed.get() ?? false);
+    return {
+      transform: [{
+        scale: withTiming(pressed ? scaleValue[1] : scaleValue[0], scaleTimingConfig)
+      }]
+    };
+  });
+  return {
+    rContainerStyle,
+    isCheckboxPressed,
+    isAllAnimationsDisabled
+  };
+}
+
+// --------------------------------------------------
+
+export function useCheckboxIndicatorAnimation(options) {
+  const {
+    animation,
+    isSelected
+  } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const {
+    isAllAnimationsDisabled
+  } = useAnimationSettings();
+  const {
+    animationConfig,
+    isAnimationDisabled
+  } = getAnimationState(animation);
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled
+  });
+
+  // Opacity animation
+  const opacityValue = getAnimationValueProperty({
+    animationValue: animationConfig?.opacity,
+    property: 'value',
+    defaultValue: [0, 1]
+  });
+  const opacityTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.opacity,
+    property: 'timingConfig',
+    defaultValue: {
+      duration: 100
+    }
+  });
+
+  // BorderRadius animation
+  const borderRadiusValue = getAnimationValueProperty({
+    animationValue: animationConfig?.borderRadius,
+    property: 'value',
+    defaultValue: [8, 0]
+  });
+  const borderRadiusTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.borderRadius,
+    property: 'timingConfig',
+    defaultValue: {
+      duration: 50
+    }
+  });
+
+  // TranslateX animation
+  const translateXValue = getAnimationValueProperty({
+    animationValue: animationConfig?.translateX,
+    property: 'value',
+    defaultValue: [-4, 0]
+  });
+  const translateXTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.translateX,
+    property: 'timingConfig',
+    defaultValue: {
+      duration: 100
+    }
+  });
+
+  // Scale animation
+  const scaleValue = getAnimationValueProperty({
+    animationValue: animationConfig?.scale,
+    property: 'value',
+    defaultValue: [0.8, 1]
+  });
+  const scaleTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.scale,
+    property: 'timingConfig',
+    defaultValue: {
+      duration: 100
+    }
+  });
+  const rContainerStyle = useAnimatedStyle(() => {
+    if (isAnimationDisabledValue) {
+      return {
+        opacity: isSelected ? opacityValue[1] : opacityValue[0],
+        borderRadius: isSelected ? borderRadiusValue[1] : borderRadiusValue[0],
+        transform: [{
+          translateX: isSelected ? translateXValue[1] : translateXValue[0]
+        }, {
+          scale: isSelected ? scaleValue[1] : scaleValue[0]
+        }]
+      };
+    }
+    return {
+      opacity: withTiming(isSelected ? opacityValue[1] : opacityValue[0], opacityTimingConfig),
+      borderRadius: withTiming(isSelected ? borderRadiusValue[1] : borderRadiusValue[0], borderRadiusTimingConfig),
+      transform: [{
+        translateX: withTiming(isSelected ? translateXValue[1] : translateXValue[0], translateXTimingConfig)
+      }, {
+        scale: withTiming(isSelected ? scaleValue[1] : scaleValue[0], scaleTimingConfig)
+      }]
+    };
+  });
+  return {
+    rContainerStyle,
+    isAnimationDisabled: isAnimationDisabled || isAllAnimationsDisabled
+  };
+}
+//# sourceMappingURL=checkbox.animation.js.map

package/lib/module/components/checkbox/checkbox.animation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAnimatedStyle","useSharedValue","withTiming","useAnimationSettings","useCombinedAnimationDisabledState","createContext","getAnimationState","getAnimationValueMergedConfig","getAnimationValueProperty","getIsAnimationDisabledValue","getRootAnimationState","useFormField","CheckboxAnimationProvider","useCheckboxAnimation","name","useCheckboxRootAnimation","options","animation","isCheckboxPressed","formFieldContext","animationConfig","isAnimationDisabled","isAllAnimationsDisabled","isAnimationDisabledValue","scaleValue","animationValue","scale","property","defaultValue","scaleTimingConfig","duration","rContainerStyle","pressed","get","isPressed","transform","useCheckboxIndicatorAnimation","isSelected","opacityValue","opacity","opacityTimingConfig","borderRadiusValue","borderRadius","borderRadiusTimingConfig","translateXValue","translateX","translateXTimingConfig"],"sourceRoot":"../../../../src","sources":["components/checkbox/checkbox.animation.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/checkbox/checkbox.constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+export const DISPLAY_NAME = {
+  CHECKBOX_ROOT: 'HeroUINative.Checkbox.Root',
+  CHECKBOX_INDICATOR: 'HeroUINative.Checkbox.Indicator'
+};
+export const DEFAULT_HIT_SLOP = 6;
+//# sourceMappingURL=checkbox.constants.js.map

package/lib/module/components/checkbox/checkbox.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DISPLAY_NAME","CHECKBOX_ROOT","CHECKBOX_INDICATOR","DEFAULT_HIT_SLOP"],"sourceRoot":"../../../../src","sources":["components/checkbox/checkbox.constants.ts"],"mappings":";;AAAA,OAAO,MAAMA,YAAY,GAAG;EAC1BC,aAAa,EAAE,4BAA4B;EAC3CC,kBAAkB,EAAE;AACtB,CAAU;AAEV,OAAO,MAAMC,gBAAgB,GAAG,CAAC","ignoreList":[]}

package/lib/module/components/checkbox/checkbox.js

@@ -0,0 +1,188 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { CheckIcon } from "../../helpers/components/index.js";
+import { AnimatedCheckIcon } from "../../helpers/components/animated-check-icon.js";
+import { AnimationSettingsProvider } from "../../helpers/contexts/animation-settings-context.js";
+import { useIsOnSurface, useThemeColor } from "../../helpers/theme/index.js";
+import * as CheckboxPrimitives from "../../primitives/checkbox/index.js";
+import { CheckboxAnimationProvider, useCheckboxIndicatorAnimation, useCheckboxRootAnimation } from "./checkbox.animation.js";
+import { DEFAULT_HIT_SLOP, DISPLAY_NAME } from "./checkbox.constants.js";
+import checkboxStyles, { styleSheet } from "./checkbox.styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedRootView = Animated.createAnimatedComponent(CheckboxPrimitives.Root);
+const AnimatedIndicatorView = Animated.createAnimatedComponent(CheckboxPrimitives.Indicator);
+const useCheckbox = CheckboxPrimitives.useCheckboxContext;
+
+// --------------------------------------------------
+
+const CheckboxRoot = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    isSelected,
+    onSelectedChange,
+    isDisabled = false,
+    isInvalid = false,
+    isOnSurface: isOnSurfaceProp,
+    hitSlop = DEFAULT_HIT_SLOP,
+    className,
+    style,
+    onPressIn,
+    onPressOut,
+    animation,
+    isAnimatedStyleActive = true,
+    ...restProps
+  } = props;
+  const isOnSurfaceAutoDetected = useIsOnSurface();
+  const isOnSurface = isOnSurfaceProp ?? isOnSurfaceAutoDetected;
+  const rootClassName = checkboxStyles.root({
+    isOnSurface,
+    isSelected,
+    isDisabled,
+    isInvalid,
+    className
+  });
+  const {
+    rContainerStyle,
+    isCheckboxPressed,
+    isAllAnimationsDisabled
+  } = useCheckboxRootAnimation({
+    animation
+  });
+  const rootStyle = isAnimatedStyleActive ? [rContainerStyle, styleSheet.root, style] : [styleSheet.root, style];
+  const animationContextValue = useMemo(() => ({
+    isCheckboxPressed
+  }), [isCheckboxPressed]);
+  const animationSettingsContextValue = useMemo(() => ({
+    isAllAnimationsDisabled
+  }), [isAllAnimationsDisabled]);
+  const handlePressIn = useCallback(event => {
+    isCheckboxPressed.set(true);
+    onPressIn?.(event);
+  }, [isCheckboxPressed, onPressIn]);
+  const handlePressOut = useCallback(event => {
+    isCheckboxPressed.set(false);
+    onPressOut?.(event);
+  }, [isCheckboxPressed, onPressOut]);
+  const renderProps = {
+    isSelected,
+    isInvalid,
+    isDisabled
+  };
+  const content = typeof children === 'function' ? children(renderProps) : children ?? /*#__PURE__*/_jsx(CheckboxIndicator, {});
+  return /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+    value: animationSettingsContextValue,
+    children: /*#__PURE__*/_jsx(CheckboxAnimationProvider, {
+      value: animationContextValue,
+      children: /*#__PURE__*/_jsx(AnimatedRootView, {
+        ref: ref,
+        className: rootClassName,
+        isSelected: isSelected,
+        onSelectedChange: onSelectedChange,
+        isDisabled: isDisabled,
+        isInvalid: isInvalid,
+        isOnSurface: isOnSurface,
+        hitSlop: hitSlop,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        style: rootStyle,
+        ...restProps,
+        children: content
+      })
+    })
+  });
+});
+
+// --------------------------------------------------
+
+const CheckboxIndicator = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    iconProps,
+    className,
+    style,
+    animation,
+    isAnimatedStyleActive = true,
+    ...restProps
+  } = props;
+  const {
+    isSelected,
+    isDisabled,
+    isInvalid
+  } = useCheckbox();
+  const themeColorAccentForeground = useThemeColor('accent-foreground');
+  const iconSize = iconProps?.size;
+  const iconStrokeWidth = iconProps?.strokeWidth;
+  const iconColor = iconProps?.color ?? themeColorAccentForeground;
+  const iconEnterDuration = iconProps?.enterDuration;
+  const iconExitDuration = iconProps?.exitDuration;
+  const indicatorClassName = checkboxStyles.indicator({
+    isInvalid,
+    className
+  });
+  const {
+    rContainerStyle,
+    isAnimationDisabled
+  } = useCheckboxIndicatorAnimation({
+    animation,
+    isSelected
+  });
+  const indicatorStyle = isAnimatedStyleActive ? [rContainerStyle, style] : style;
+  const renderProps = {
+    isSelected,
+    isInvalid: isInvalid ?? false,
+    isDisabled: isDisabled ?? false
+  };
+  const content = typeof children === 'function' ? children(renderProps) : children ?? (isAnimationDisabled ? /*#__PURE__*/_jsx(View, {
+    className: "translate-y-px",
+    children: /*#__PURE__*/_jsx(CheckIcon, {
+      size: iconSize,
+      color: iconColor
+    })
+  }) : /*#__PURE__*/_jsx(AnimatedCheckIcon, {
+    size: iconSize,
+    strokeWidth: iconStrokeWidth,
+    color: iconColor,
+    isSelected: isSelected,
+    enterDuration: iconEnterDuration,
+    exitDuration: iconExitDuration
+  }));
+  return /*#__PURE__*/_jsx(AnimatedIndicatorView, {
+    ref: ref,
+    className: indicatorClassName,
+    style: indicatorStyle,
+    ...restProps,
+    children: content
+  });
+});
+
+// --------------------------------------------------
+
+CheckboxRoot.displayName = DISPLAY_NAME.CHECKBOX_ROOT;
+CheckboxIndicator.displayName = DISPLAY_NAME.CHECKBOX_INDICATOR;
+
+/**
+ * Compound Checkbox component with sub-components
+ *
+ * @component Checkbox - Main container that handles selection state and user interaction.
+ * Renders default indicator with checkmark if no children provided.
+ * Animates background and border color based on selection state.
+ *
+ * @component Checkbox.Indicator - Optional checkmark container that scales in when selected.
+ * Renders default check icon if no children provided. Handles enter/exit animations
+ * and can be replaced with custom indicators.
+ *
+ * Props flow from Checkbox to sub-components via context (isSelected).
+ * The checkbox supports controlled and uncontrolled modes through isSelected/onSelectedChange.
+ *
+ * @see Full documentation: https://heroui.com/components/checkbox
+ */
+const CompoundCheckbox = Object.assign(CheckboxRoot, {
+  /** @optional Custom indicator with scale animations */
+  Indicator: CheckboxIndicator
+});
+export { useCheckbox };
+export default CompoundCheckbox;
+//# sourceMappingURL=checkbox.js.map

package/lib/module/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","View","Animated","CheckIcon","AnimatedCheckIcon","AnimationSettingsProvider","useIsOnSurface","useThemeColor","CheckboxPrimitives","CheckboxAnimationProvider","useCheckboxIndicatorAnimation","useCheckboxRootAnimation","DEFAULT_HIT_SLOP","DISPLAY_NAME","checkboxStyles","styleSheet","jsx","_jsx","AnimatedRootView","createAnimatedComponent","Root","AnimatedIndicatorView","Indicator","useCheckbox","useCheckboxContext","CheckboxRoot","props","ref","children","isSelected","onSelectedChange","isDisabled","isInvalid","isOnSurface","isOnSurfaceProp","hitSlop","className","style","onPressIn","onPressOut","animation","isAnimatedStyleActive","restProps","isOnSurfaceAutoDetected","rootClassName","root","rContainerStyle","isCheckboxPressed","isAllAnimationsDisabled","rootStyle","animationContextValue","animationSettingsContextValue","handlePressIn","event","set","handlePressOut","renderProps","content","CheckboxIndicator","value","iconProps","themeColorAccentForeground","iconSize","size","iconStrokeWidth","strokeWidth","iconColor","color","iconEnterDuration","enterDuration","iconExitDuration","exitDuration","indicatorClassName","indicator","isAnimationDisabled","indicatorStyle","displayName","CHECKBOX_ROOT","CHECKBOX_INDICATOR","CompoundCheckbox","Object","assign"],"sourceRoot":"../../../../src","sources":["components/checkbox/checkbox.tsx"],"mappings":"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","ignoreList":[]}