@alveole/components 0.43.3 → 1.0.1

package/dist/ui/Button/Button.styles.d.ts

@@ -1,9 +1,9 @@
 export declare const useStyles: () => {
     container: {
-        borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderTopLeftRadius: import("@alveole/theme").Radius;
+        borderBottomLeftRadius: import("@alveole/theme").Radius;
+        borderTopRightRadius: import("@alveole/theme").Radius;
+        borderBottomRightRadius: import("@alveole/theme").Radius;
         display: "flex";
         flexDirection: "row";
         justifyContent: "center";
@@ -19,125 +19,124 @@ export declare const useStyles: () => {
     };
     title: {
         cursor: "pointer";
-        minWidth: import("@alveole/theme").Spacing;
         textAlign: "center";
     };
     primaryTitle: {
-        color: "#F2F9FF";
+        color: string;
     };
     primaryContainer: {
-        backgroundColor: "#002764";
+        backgroundColor: string;
     };
     primaryTitleHover: {
-        color: "#F2F9FF";
+        color: string;
     };
     primaryContainerHover: {
-        backgroundColor: "#0048AC";
+        backgroundColor: string;
     };
     primaryContainerPressed: {
-        backgroundColor: "#0048AC";
+        backgroundColor: string;
     };
     secondaryTitle: {
-        color: "#151617";
+        color: string;
     };
     secondaryContainer: {
         borderStyle: "solid";
         borderWidth: number;
-        borderColor: "#DEE3EC";
-        backgroundColor: "#FFFFFF";
+        borderColor: string;
+        backgroundColor: string;
     };
     secondaryTitleHover: {
-        color: "#151617";
+        color: string;
     };
     secondaryContainerHover: {
-        borderColor: "#DEE3EC";
-        backgroundColor: "rgba(0, 0, 0, 0.04)";
+        borderColor: string;
+        backgroundColor: string;
     };
     secondaryContainerPressed: {
-        borderColor: "#DEE3EC";
-        backgroundColor: "rgba(0, 0, 0, 0.04)";
+        borderColor: string;
+        backgroundColor: string;
     };
     tertiaryTitle: {
-        color: "#151617";
+        color: string;
     };
     tertiaryContainer: {};
     tertiaryTitleHover: {
-        color: "#151617";
+        color: string;
     };
     tertiaryContainerHover: {
-        backgroundColor: "rgba(0, 0, 0, 0.04)";
+        backgroundColor: string;
     };
     tertiaryContainerPressed: {
-        backgroundColor: "rgba(0, 0, 0, 0.04)";
+        backgroundColor: string;
     };
     dangerTitle: {
-        color: "#FFFFFF";
+        color: string;
     };
     dangerContainer: {
         borderStyle: "solid";
         borderWidth: number;
-        borderColor: "#C62416";
-        backgroundColor: "#C62416";
+        borderColor: string;
+        backgroundColor: string;
     };
     dangerTitleHover: {
-        color: "#C62416";
+        color: string;
     };
     dangerContainerHover: {
-        borderColor: "#DEE3EC";
-        backgroundColor: "#FFFFFF";
+        borderColor: string;
+        backgroundColor: string;
     };
     dangerContainerPressed: {
-        backgroundColor: `rgba${string}`;
+        backgroundColor: string;
     };
     dangerTitlePressed: {
-        color: "#FFFFFF";
+        color: string;
     };
     linkTitle: {
-        color: "#076D8A";
+        color: string;
     };
     linkContainer: {
-        backgroundColor: "transparent";
+        backgroundColor: string;
     };
     linkTitleHover: {
-        color: "#076D8A";
+        color: string;
     };
     linkContainerHover: {
-        backgroundColor: "transparent";
+        backgroundColor: string;
     };
     linkContainerPressed: {
-        backgroundColor: "transparent";
+        backgroundColor: string;
     };
     selectedContainer: {
-        backgroundColor: "#F2F9FF";
-        borderColor: "#0264C7";
+        backgroundColor: string;
+        borderColor: string;
         borderWidth: number;
     };
     selectedContainerHover: {};
     selectedTitle: {
-        color: "#012B53";
+        color: string;
     };
     selectedIcon: {
-        color: "#012B53";
+        color: string;
     };
     xsContainer: {
         paddingLeft: import("@alveole/theme").Spacing;
         paddingRight: import("@alveole/theme").Spacing;
         paddingTop: import("@alveole/theme").Spacing;
         paddingBottom: import("@alveole/theme").Spacing;
-        borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderTopLeftRadius: import("@alveole/theme").Radius;
+        borderBottomLeftRadius: import("@alveole/theme").Radius;
+        borderTopRightRadius: import("@alveole/theme").Radius;
+        borderBottomRightRadius: import("@alveole/theme").Radius;
     };
     smContainer: {
         paddingLeft: import("@alveole/theme").Spacing;
         paddingRight: import("@alveole/theme").Spacing;
         paddingTop: import("@alveole/theme").Spacing;
         paddingBottom: import("@alveole/theme").Spacing;
-        borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderTopLeftRadius: import("@alveole/theme").Radius;
+        borderBottomLeftRadius: import("@alveole/theme").Radius;
+        borderTopRightRadius: import("@alveole/theme").Radius;
+        borderBottomRightRadius: import("@alveole/theme").Radius;
     };
     mdContainer: {
         paddingLeft: import("@alveole/theme").Spacing;
@@ -208,77 +207,77 @@ export declare const useStyles: () => {
     };
     primaryTitleDisabled: {
         cursor: "not-allowed";
-        color: "#8D97AC";
+        color: string;
     };
     primaryContainerDisabled: {
         cursor: "not-allowed";
-        backgroundColor: "#E6EAF1";
+        backgroundColor: string;
     };
     secondaryTitleDisabled: {
         cursor: "not-allowed";
-        color: "#8D97AC";
+        color: string;
     };
     secondaryContainerDisabled: {
         cursor: "not-allowed";
-        borderColor: "#E6EAF1";
+        borderColor: string;
     };
     tertiaryTitleDisabled: {
         cursor: "not-allowed";
-        color: "#8D97AC";
+        color: string;
     };
     tertiaryContainerDisabled: {
         cursor: "not-allowed";
     };
     dangerTitleDisabled: {
         cursor: "not-allowed";
-        color: "#8D97AC";
+        color: string;
     };
     dangerContainerDisabled: {
         cursor: "not-allowed";
-        backgroundColor: "#FFFFFF";
-        borderColor: "#E6EAF1";
+        backgroundColor: string;
+        borderColor: string;
     };
     primaryIcon: {
-        color: "#F2F9FF";
+        color: string;
     };
     primaryIconHover: {
-        color: "#F2F9FF";
+        color: string;
     };
     primaryIconDisabled: {
-        color: "#8D97AC";
+        color: string;
     };
     secondaryIcon: {
-        color: "#151617";
+        color: string;
     };
     secondaryIconHover: {
-        color: "#151617";
+        color: string;
     };
     secondaryIconDisabled: {
-        color: "#8D97AC";
+        color: string;
     };
     tertiaryIcon: {
-        color: "#151617";
+        color: string;
     };
     tertiaryIconHover: {
-        color: "#151617";
+        color: string;
     };
     tertiaryIconDisabled: {
-        color: "#8D97AC";
+        color: string;
     };
     dangerIcon: {
-        color: "#F2F9FF";
+        color: string;
     };
     dangerIconHover: {
-        color: "#C62416";
+        color: string;
     };
     dangerIconDisabled: {
-        color: "#8D97AC";
+        color: string;
     };
     linkIcon: {
-        color: "#076D8A";
+        color: string;
     };
     linkIconDisabled: {
-        color: "#8D97AC";
+        color: string;
     };
 };
 //# sourceMappingURL=Button.styles.d.ts.map

package/dist/ui/Button/Button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkRnB,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiRnB,CAAC"}

package/dist/ui/Button/Button.styles.js

@@ -20,7 +20,6 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
     },
     title: {
         cursor: 'pointer',
-        minWidth: spacing('200'),
         textAlign: 'center',
     },
     // Variants

package/dist/ui/Button/ButtonIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAA8B,MAAM,cAAc,CAAC;AAErF,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5C,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAC/C,GAAG;IAEF,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;QAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;CAAE,CAAC;AAEzC,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAyFhD,CAAC"}
+{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAA8B,MAAM,cAAc,CAAC;AAErF,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5C,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAC/C,GAAG;IAEF,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;QAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;CAAE,CAAC;AAEzC,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAqFhD,CAAC"}

package/dist/ui/Button/ButtonIcon.js

@@ -4,8 +4,8 @@ import { Typography } from '../../core';
 import { LucideIcon } from '../LucideIcon';
 import { useStyles } from './Button.styles';
 export const ButtonIcon = (props) => {
-    const { size, variant, disabled, style, ...buttonProps } = props;
-    let { iconSize } = props;
+    const { size, variant, disabled, style, iconSize: iconSizeProp, ...buttonProps } = props;
+    const iconSize = iconSizeProp ?? (size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md');
     const styles = useStyles();
     const containerSize = size === 'sm'
         ? styles.smContainerIconOnly
@@ -38,9 +38,6 @@ export const ButtonIcon = (props) => {
         return { ...applicableStyles, ...containerSize, ...(style ?? {}) };
     };
     const iconStyle = (state) => {
-        if (!iconSize) {
-            iconSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md';
-        }
         if (variant === 'primary') {
             if (disabled)
                 return { size: iconSize, color: styles.primaryIconDisabled.color };

package/dist/ui/Card/Card.stories.d.ts

@@ -27,7 +27,7 @@ declare const _default: {
             alignItems: "center";
         };
         titleText: {
-            color: "#151617";
+            color: string;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -45,7 +45,7 @@ declare const _default: {
             alignItems: "center";
         };
         descriptionText: {
-            color: "#373A3F";
+            color: string;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -53,7 +53,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         disabledText: {
-            color: "#8D97AC";
+            color: string;
         };
     };
 };

package/dist/ui/Card/Card.styles.d.ts

@@ -4,12 +4,12 @@ export declare const useStyles: () => {
         width: "100%";
         gap: import("@alveole/theme").Spacing;
         padding: import("@alveole/theme").Spacing;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
         borderWidth: number;
-        borderColor: "#DEE3EC";
+        borderColor: string;
         borderStyle: "solid";
         boxSizing: "border-box";
-        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderRadius: import("@alveole/theme").Radius;
     };
 };
 //# sourceMappingURL=Card.styles.d.ts.map

package/dist/ui/Card/CardHeader.styles.d.ts

@@ -11,7 +11,7 @@ export declare const useStyles: () => {
         flex: number;
     };
     titre: {
-        color: "#151617";
+        color: string;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -19,7 +19,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sousTitre: {
-        color: "#373A3F";
+        color: string;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -27,7 +27,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     disabledText: {
-        color: "#8D97AC";
+        color: string;
     };
 };
 //# sourceMappingURL=CardHeader.styles.d.ts.map

package/dist/ui/Card/CardSection.styles.d.ts

@@ -16,7 +16,7 @@ export declare const useStyles: () => {
         alignItems: "center";
     };
     titleText: {
-        color: "#151617";
+        color: string;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -34,7 +34,7 @@ export declare const useStyles: () => {
         alignItems: "center";
     };
     descriptionText: {
-        color: "#373A3F";
+        color: string;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -42,7 +42,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     disabledText: {
-        color: "#8D97AC";
+        color: string;
     };
 };
 //# sourceMappingURL=CardSection.styles.d.ts.map

package/dist/ui/Checkbox/Checkbox.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CheckboxContainerProps } from './CheckboxContainer';
+import { CheckboxIndicatorProps } from './CheckboxIndicator';
+import { CheckboxLabelProps } from './CheckboxLabel';
+export type CheckboxProps = CheckboxContainerProps & CheckboxIndicatorProps & CheckboxLabelProps;
+export declare const Checkbox: React.ForwardRefExoticComponent<import("tamagui").StackNonStyleProps & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
+    scaleIcon?: number;
+    scaleSize?: number;
+    sizeAdjust?: number;
+    native?: import("tamagui").NativeValue<"web">;
+} & {
+    size?: import("tamagui").SizeTokens;
+    unstyled?: boolean;
+} & {
+    variant?: "small" | "medium";
+    error?: string;
+    success?: string;
+} & CheckboxIndicatorProps & CheckboxLabelProps & React.RefAttributes<import("tamagui").TamaguiElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/ui/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAqB,sBAAsB,EAAmB,MAAM,qBAAqB,CAAC;AACjG,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,sBAAsB,GAAG,sBAAsB,GAAG,kBAAkB,CAAC;AAEjG,eAAO,MAAM,QAAQ;;;;;;;;;;;;wGAuBnB,CAAC"}

package/dist/ui/Checkbox/Checkbox.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControlCaption } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import React, { useId } from 'react';
+import { useStyles } from './Checkbox.styles';
+import { CheckboxContainer } from './CheckboxContainer';
+import { CheckboxIndicator } from './CheckboxIndicator';
+import { CheckboxLabel } from './CheckboxLabel';
+export const Checkbox = React.forwardRef(function Checkbox(props, ref) {
+    const { variant, label, error, success, disabled, onCheckedChange } = props;
+    const baseProps = { variant, label, error, success, disabled, onCheckedChange };
+    const { spacing } = useTheme();
+    const styles = useStyles();
+    const uniqId = useId();
+    const id = `checkbox--${variant}--${uniqId}`;
+    return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? spacing('050') : 0, style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

package/dist/ui/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,93 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<import("tamagui").StackNonStyleProps & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
+        scaleIcon?: number;
+        scaleSize?: number;
+        sizeAdjust?: number;
+        native?: import("tamagui").NativeValue<"web">;
+    } & {
+        size?: import("tamagui").SizeTokens;
+        unstyled?: boolean;
+    } & {
+        variant?: "small" | "medium";
+        error?: string;
+        success?: string;
+    } & import("./CheckboxIndicator").CheckboxIndicatorProps & import("./CheckboxLabel").CheckboxLabelProps & import("react").RefAttributes<import("tamagui").TamaguiElement>>;
+    styleFn: () => {
+        checkboxContainer: {
+            display: "flex";
+            flexDirection: "column";
+        };
+        container: {
+            display: "flex";
+            flexDirection: "row";
+            gap: import("@alveole/theme").Spacing;
+        };
+        checkbox: {
+            height: import("@alveole/theme").Spacing;
+            width: import("@alveole/theme").Spacing;
+            backgroundColor: "transparent";
+            borderColor: string;
+            borderRadius: number;
+        };
+        checkboxSm: {
+            height: import("@alveole/theme").Spacing;
+            width: import("@alveole/theme").Spacing;
+            borderRadius: number;
+        };
+        checkboxDisabled: {
+            borderColor: string;
+            backgroundColor: "transparent";
+        };
+        checkboxError: {
+            borderColor: string;
+        };
+        checkboxSuccess: {
+            borderColor: string;
+        };
+        indicator: {
+            height: import("@alveole/theme").Spacing;
+            width: import("@alveole/theme").Spacing;
+            backgroundColor: string;
+            borderRadius: number;
+        };
+        indicatorDisabled: {
+            backgroundColor: string;
+        };
+        label: {
+            cursor: "pointer";
+            color: string;
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            width: "100%";
+        };
+        labelSm: {
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        labelDisabled: {
+            cursor: "not-allowed";
+            color: string;
+        };
+        labelError: {
+            color: string;
+        };
+        labelSuccess: {
+            color: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Variants: () => import("react").JSX.Element;
+export * as Sources from './Checkbox.stories.sources';
+//# sourceMappingURL=Checkbox.stories.d.ts.map

package/dist/ui/Checkbox/Checkbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAKpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/ui/Checkbox/Checkbox.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Checkbox } from './Checkbox';
+import { useStyles } from './Checkbox.styles';
+export default {
+    title: 'Checkbox',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Case à cocher avec label, gestion des états et variants de taille.',
+    component: Checkbox,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Checkbox, { label: "Non coch\u00E9" }), _jsx(Checkbox, { label: "Coch\u00E9", checked: true }), _jsx(Checkbox, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Checkbox, { label: "Coch\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true }), _jsx(Checkbox, { label: "Avec erreur", error: "Vous devez accepter les conditions" }), _jsx(Checkbox, { label: "Avec succ\u00E8s", success: "Valid\u00E9" })] }));
+export const Variants = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 16, children: [_jsx(Checkbox, { label: "Normal" }), _jsx(Checkbox, { label: "Small", variant: "small" })] }));
+export * as Sources from './Checkbox.stories.sources';

package/dist/ui/Checkbox/Checkbox.stories.sources.d.ts

@@ -0,0 +1,8 @@
+export declare const Default: () => string;
+export declare const Variants: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly Variants: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=Checkbox.stories.sources.d.ts.map

package/dist/ui/Checkbox/Checkbox.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+b,CAAC;AAEpd,eAAO,MAAM,QAAQ,cAAwM,CAAC;AAE9N,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/Checkbox/Checkbox.stories.sources.js

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Checkbox/Checkbox.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <Checkbox label=\"Non coché\" />\n    <Checkbox label=\"Coché\" checked />\n    <Checkbox label=\"Désactivé\" disabled />\n    <Checkbox label=\"Coché désactivé\" checked disabled />\n    <Checkbox label=\"Avec erreur\" error=\"Vous devez accepter les conditions\" />\n    <Checkbox label=\"Avec succès\" success=\"Validé\" />\n  </Box>\n);";
+export const Variants = () => "export const Variants = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={16}>\n    <Checkbox label=\"Normal\" />\n    <Checkbox label=\"Small\" variant=\"small\" />\n  </Box>\n);";
+export const storySources = {
+    Default,
+    Variants,
+};