@app-studio/components 0.10.17

package/dist/native/components/Form/Selector/Selector/Selector.props.d.ts

@@ -0,0 +1,68 @@
+import { Elevation } from '../../../../utils/elevation';
+import { InputProps, Shadow, ViewProps } from 'app-studio';
+import { SelectorStyles, Shape, Size, Variant, Option } from './Selector.type';
+export interface SelectorProps extends Omit<InputProps, 'size' | 'shadow' | 'value'> {
+    id?: string;
+    error?: boolean;
+    name?: string;
+    label?: string;
+    helperText?: string;
+    placeholder?: string;
+    options: Option[];
+    isMulti?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    onChange?: (value: any) => void;
+    shape?: Shape;
+    variant?: Variant;
+    views?: SelectorStyles;
+    size?: Size;
+    shadow?: Shadow | Elevation | ViewProps;
+    isScrollable?: boolean;
+}
+export interface SelectorViewProps extends SelectorProps {
+    value: string | Array<string>;
+    setValue: Function;
+    hide: boolean;
+    setHide: Function;
+    isHovered: boolean;
+    setIsHovered: Function;
+    isFocused: boolean;
+    setIsFocused: Function;
+}
+export interface SelectorBoxProps {
+    options: Option[];
+    value?: string | Array<string>;
+    isDisabled?: boolean;
+    placeholder?: string;
+    removeOption?: Function;
+    views?: SelectorStyles;
+    size?: Size;
+}
+export interface MultiSelectorProps extends Omit<InputProps, 'size'> {
+    option: string;
+    removeOption: Function;
+    size?: Size;
+}
+export interface ItemProps extends Omit<InputProps, 'size' | 'style'> {
+    callback?: Function;
+    option: Option;
+    size?: Size;
+    style?: SelectorStyles;
+}
+export interface HiddenSelectorProps extends Omit<InputProps, 'size' | 'value'> {
+    id?: string;
+    name?: string;
+    value: string | Array<string>;
+    isMulti?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    onChange?: (value: any) => void;
+    options: Option[];
+}
+export interface DropDownProps extends Omit<InputProps, 'size'> {
+    size?: Size;
+    callback?: Function;
+    options: Option[];
+    views?: SelectorStyles;
+}

package/dist/native/components/Form/Selector/Selector/Selector.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Selector.props.js.map

package/dist/native/components/Form/Selector/Selector/Selector.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.props.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Selector/Selector/Selector.props.ts"],"names":[],"mappings":""}

package/dist/native/components/Form/Selector/Selector/Selector.state.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SelectorProps } from './Selector.props';
+export declare const useSelectorState: ({ placeholder, isMulti, options, id, }: SelectorProps) => {
+    id: string;
+    value: string | string[];
+    setValue: React.Dispatch<React.SetStateAction<string | string[]>>;
+    hide: boolean;
+    setHide: React.Dispatch<React.SetStateAction<boolean>>;
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isFocused: boolean;
+    setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
+    highlightedIndex: number;
+    setHighlightedIndex: React.Dispatch<React.SetStateAction<number>>;
+};
+export declare const useItemState: () => {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/native/components/Form/Selector/Selector/Selector.state.js

@@ -0,0 +1,36 @@
+import React from 'react';
+// This file defines custom React hooks (`useSelectorState` and `useItemState`) to manage the internal state and logic for the Selector component and its individual items, including value, visibility, and interaction states.
+export const useSelectorState = ({ placeholder, isMulti, options, id = `selector-${Math.random().toString(36).substr(2, 9)}`, }) => {
+    const defaultValue = placeholder
+        ? isMulti
+            ? []
+            : ''
+        : Array.isArray(options) && options.length > 0
+            ? options[0].value
+            : isMulti
+                ? []
+                : '';
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [value, setValue] = React.useState(defaultValue);
+    const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+    const [hide, setHide] = React.useState(true);
+    return {
+        id,
+        value,
+        setValue,
+        hide,
+        setHide,
+        isHovered,
+        setIsHovered,
+        isFocused,
+        setIsFocused,
+        highlightedIndex,
+        setHighlightedIndex,
+    };
+};
+export const useItemState = () => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    return { isHovered, setIsHovered };
+};
+//# sourceMappingURL=Selector.state.js.map

package/dist/native/components/Form/Selector/Selector/Selector.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.state.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Selector/Selector/Selector.state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,gOAAgO;AAChO,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,WAAW,EACX,OAAO,EACP,OAAO,EACP,EAAE,GAAG,YAAY,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAC5C,EAAE,EAAE;IAClB,MAAM,YAAY,GAAG,WAAW;QAC9B,CAAC,CAAC,OAAO;YACP,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,EAAE;QACN,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;YAC9C,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK;YAClB,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,EAAE,CAAC;IACP,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAoB,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO;QACL,EAAE;QACF,KAAK;QACL,QAAQ;QACR,IAAI;QACJ,OAAO;QACP,SAAS;QACT,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,gBAAgB;QAChB,mBAAmB;KACpB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AACrC,CAAC,CAAC"}

package/dist/native/components/Form/Selector/Selector/Selector.style.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'app-studio';
+import { Size } from './Selector.type';
+export declare const Sizes: Record<Size, ViewProps>;
+export declare const IconSizes: Record<Size, number>;
+export declare const dropdownStyles: ViewProps;
+export declare const optionStyles: ViewProps;

package/dist/native/components/Form/Selector/Selector/Selector.style.js

@@ -0,0 +1,48 @@
+// Defines a mapping of `Size` enums to `ViewProps` objects, specifying standard dimensions (height and width) for the Selector component based on its size (xs, sm, md, lg, xl).
+export const Sizes = {
+    xs: { height: '24px', width: '24px' },
+    sm: { height: '32px', width: '32px' },
+    md: { height: '40px', width: '40px' },
+    lg: { height: '48px', width: '48px' },
+    xl: { height: '56px', width: '56px' },
+};
+// Defines a mapping of `Size` enums to numeric values, specifying standard icon sizes that correspond to the Selector component's overall dimensions.
+export const IconSizes = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 28,
+};
+// Defines the standard `ViewProps` for the dropdown container, including its dimensions, scroll behavior, layering, background, borders, shadow, and transition effects.
+export const dropdownStyles = {
+    width: '100%',
+    maxHeight: '240px',
+    overflowY: 'auto',
+    zIndex: 1000,
+    backgroundColor: 'color-white',
+    borderRadius: '8px',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'color-gray-200',
+    boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.03)',
+    transition: 'opacity 0.2s ease, transform 0.2s ease',
+};
+// Defines the standard `ViewProps` for individual options within the dropdown, including padding, cursor, and transition effects, along with specific styles for hover, focus, and selected states.
+export const optionStyles = {
+    padding: '8px 12px',
+    cursor: 'pointer',
+    transition: 'background-color 0.15s ease, color 0.15s ease',
+    _hover: {
+        backgroundColor: 'color-gray-100',
+    },
+    _focus: {
+        backgroundColor: 'color-gray-100',
+        outline: 'none',
+    },
+    _selected: {
+        backgroundColor: 'theme-primary',
+        color: 'color-white',
+    },
+};
+//# sourceMappingURL=Selector.style.js.map

package/dist/native/components/Form/Selector/Selector/Selector.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.style.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Selector/Selector/Selector.style.ts"],"names":[],"mappings":"AAEA,iLAAiL;AACjL,MAAM,CAAC,MAAM,KAAK,GAA4B;IAC5C,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IACrC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IACrC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IACrC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IACrC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;CACtC,CAAC;AACF,sJAAsJ;AACtJ,MAAM,CAAC,MAAM,SAAS,GAAyB;IAC7C,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACP,CAAC;AACF,yKAAyK;AACzK,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,OAAO;IAClB,SAAS,EAAE,MAAM;IACjB,MAAM,EAAE,IAAI;IACZ,eAAe,EAAE,aAAa;IAC9B,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,KAAK;IAClB,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,gBAAgB;IAC7B,SAAS,EAAE,kEAAkE;IAC7E,UAAU,EAAE,wCAAwC;CACrD,CAAC;AACF,oMAAoM;AACpM,MAAM,CAAC,MAAM,YAAY,GAAc;IACrC,OAAO,EAAE,UAAU;IACnB,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,+CAA+C;IAC3D,MAAM,EAAE;QACN,eAAe,EAAE,gBAAgB;KAClC;IACD,MAAM,EAAE;QACN,eAAe,EAAE,gBAAgB;QACjC,OAAO,EAAE,MAAM;KAChB;IACD,SAAS,EAAE;QACT,eAAe,EAAE,eAAe;QAChC,KAAK,EAAE,aAAa;KACrB;CACF,CAAC"}

package/dist/native/components/Form/Selector/Selector/Selector.view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectorViewProps } from './Selector.props';
+declare const SelectorView: React.FC<SelectorViewProps>;
+export default SelectorView;

package/dist/native/components/Form/Selector/Selector/Selector.view.js

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import { Horizontal } from 'app-studio';
+import { Text } from 'app-studio';
+import { View } from 'app-studio';
+import { FieldContainer } from '../../../Input/FieldContainer/FieldContainer';
+import { InfoIcon } from '../../../Icon/Icon';
+const SelectorView = ({ id, name, label, value, views = {}, options = [], onChange = () => { }, setValue = () => { }, }) => {
+    const handleCallback = useCallback((option) => {
+        setValue(option.value);
+        if (onChange)
+            onChange(option.value);
+    }, [setValue, onChange]);
+    return (<FieldContainer id={id} width="100%" views={views}>
+      {label && (<Horizontal fontSize="10px" letterSpacing="wider" color="color-black-500" fontWeight="bold" marginBottom={12} alignItems="center" gap={6} style={{ textTransform: 'uppercase' }}>
+          <InfoIcon widthHeight={14}/> <Text>{label}</Text>
+        </Horizontal>)}
+      <Horizontal gap={0}>
+        {options.map((option, index, arr) => {
+            const isSelected = value === option.value;
+            const accent = option.color ?? 'theme-primary';
+            const borderToken = isSelected ? accent : 'color-gray-200';
+            const textToken = isSelected ? accent : 'color-gray-500';
+            const isFirst = index === 0;
+            const isLast = index === arr.length - 1;
+            const showRightBorder = isLast || isSelected;
+            return (<View key={option.value} as="button" type="button" onClick={() => handleCallback(option)} flex={1} paddingVertical={6} paddingHorizontal={12} fontSize="12px" fontWeight={isSelected ? 'bold' : 'normal'} cursor="pointer" backgroundColor="transparent" color={textToken} borderStyle="solid" borderColor={borderToken} borderTopWidth={1} borderBottomWidth={1} borderLeftWidth={1} borderRightWidth={showRightBorder ? 1 : 0} borderRadius={isFirst ? '6px 0 0 6px' : isLast ? '0 6px 6px 0' : '0'} zIndex={isSelected ? 1 : 0} transition="color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease" {...views.item}>
+              {option.label}
+            </View>);
+        })}
+      </Horizontal>
+      <input type="hidden" id={id} name={name} value={Array.isArray(value) ? value.join(',') : value} onChange={() => { }}/>
+    </FieldContainer>);
+};
+export default SelectorView;
+//# sourceMappingURL=Selector.view.js.map

package/dist/native/components/Form/Selector/Selector/Selector.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.view.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Selector/Selector/Selector.view.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/Form/Selector/Selector.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SelectorProps } from './Selector/Selector.props';
+export declare const Selector: React.FC<SelectorProps>;

package/dist/native/components/Form/Selector/Selector.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useSelectorState } from './Selector/Selector.state';
+import SelectorView from './Selector/Selector.view';
+// Defines the main functional component for the Selector, which takes `SelectorProps` to configure its behavior and appearance.
+const SelectorComponent = (props) => {
+    // Prepares a set of props for the component, ensuring that the `options` array always has a default empty array if not provided, enhancing robustness.
+    const safeProps = {
+        ...props,
+        options: props.options || [],
+    };
+    // Initializes the internal state and derived logic for the Selector component by utilizing a custom hook, `useSelectorState`, based on the processed `safeProps`.
+    const selectorStates = useSelectorState(safeProps);
+    return (<SelectorView {...selectorStates} {...safeProps} onClick={(e) => {
+            e.stopPropagation();
+            if (props.onClick)
+                props.onClick(e);
+        }}/>);
+};
+export const Selector = SelectorComponent;
+//# sourceMappingURL=Selector.js.map

package/dist/native/components/Form/Selector/Selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.js","sourceRoot":"","sources":["../../../../../src/components/Form/Selector/Selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,gIAAgI;AAChI,MAAM,iBAAiB,GAA4B,CAAC,KAAK,EAAE,EAAE;IAC3D,uJAAuJ;IACvJ,MAAM,SAAS,GAAG;QAChB,GAAG,KAAK;QACR,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,EAAE;KAC7B,CAAC;IACF,kKAAkK;IAClK,MAAM,cAAc,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACnD,OAAO,CACL,CAAC,YAAY,CACX,IAAI,cAAc,CAAC,CACnB,IAAI,SAAS,CAAC,CACd,OAAO,CAAC,CAAC,CAAC,CAAmC,EAAE,EAAE;YAC/C,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,KAAK,CAAC,OAAO;gBAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACtC,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,QAAQ,GAAG,iBAAiB,CAAC"}

package/dist/native/components/Form/Switch/Switch/Switch.props.d.ts

@@ -0,0 +1,28 @@
+import { Elevation } from '../../../../utils/elevation';
+import { InputProps, Shadow, ViewProps } from 'app-studio';
+import { Size, SwitchStyles } from './Switch.type';
+export interface SwitchProps extends Omit<InputProps, 'size' | 'onChange' | 'on' | 'shadow' | 'value'> {
+    activeChild?: React.ReactNode;
+    id?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    name?: string;
+    inActiveChild?: React.ReactNode;
+    views?: SwitchStyles;
+    shadow?: Shadow | Elevation | ViewProps;
+    size?: Size;
+    labelPosition?: 'left' | 'right';
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: string;
+}
+export interface SwitchViewProps extends SwitchProps {
+    isHovered: boolean;
+    setIsHovered: Function;
+    value?: boolean;
+    setValue?: Function;
+    on?: boolean;
+    setOn?: Function;
+}

package/dist/native/components/Form/Switch/Switch/Switch.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Switch.props.js.map

package/dist/native/components/Form/Switch/Switch/Switch.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.props.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Switch/Switch/Switch.props.ts"],"names":[],"mappings":""}

package/dist/native/components/Form/Switch/Switch/Switch.state.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SwitchProps } from './Switch.props';
+export declare const useSwitchState: ({ isDisabled, isChecked }: SwitchProps) => {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    on: boolean;
+    setOn: React.Dispatch<React.SetStateAction<boolean>>;
+    value: boolean;
+    setValue: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/native/components/Form/Switch/Switch/Switch.state.js

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+// This file defines a custom hook for managing the state of a Switch component.
+// It allows tracking whether the switch is hovered, and its on/off state based on 'isDisabled' and 'isChecked' properties.
+export const useSwitchState = ({ isDisabled, isChecked }) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [on, setOn] = React.useState(isChecked || false);
+    const [value, setValue] = React.useState(isChecked || false);
+    // Update the value when isChecked changes
+    useEffect(() => {
+        if (isChecked !== undefined) {
+            setOn(isChecked);
+            setValue(isChecked);
+        }
+    }, [isChecked]);
+    return {
+        isHovered,
+        setIsHovered,
+        on,
+        setOn,
+        value,
+        setValue,
+    };
+};
+//# sourceMappingURL=Switch.state.js.map

package/dist/native/components/Form/Switch/Switch/Switch.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.state.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Switch/Switch/Switch.state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,gFAAgF;AAChF,2HAA2H;AAC3H,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAe,EAAE,EAAE;IACvE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC;IAE7D,0CAA0C;IAC1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YAC5B,KAAK,CAAC,SAAS,CAAC,CAAC;YACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO;QACL,SAAS;QACT,YAAY;QACZ,EAAE;QACF,KAAK;QACL,KAAK;QACL,QAAQ;KACT,CAAC;AACJ,CAAC,CAAC"}

package/dist/native/components/Form/Switch/Switch/Switch.style.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Switch Styles
+ *
+ * Defines the styles for the Switch component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+import { ViewProps } from 'app-studio';
+import { Size } from './Switch.type';
+/**
+ * Knob (circle) sizes for the Switch component
+ * Following the 4px grid system - dimensions réduites
+ */
+export declare const KnobSizes: Record<Size, ViewProps>;
+/**
+ * Slider (track) sizes for the Switch component
+ * Following the 4px grid system - dimensions réduites
+ */
+export declare const SliderSizes: Record<Size, ViewProps>;
+/**
+ * Slider (track) sizes when the Switch has activeChild/inActiveChild content.
+ * Wider tracks ensure the text rendered alongside the knob is readable.
+ */
+export declare const ContentSliderSizes: Record<Size, ViewProps>;
+/**
+ * Default font sizes for activeChild/inActiveChild text — matched to the
+ * Switch size so the embedded label remains legible.
+ */
+export declare const ContentFontSizes: Record<Size, string>;
+/**
+ * Padding for the Switch slider - ajusté pour les nouvelles dimensions
+ * Following the 4px grid system
+ */
+export declare const SliderPadding: Record<Size, Record<string, number>>;
+/**
+ * Color schemes for the Switch component
+ */
+export declare const ColorSchemes: {
+    default: {
+        active: string;
+        inactive: string;
+        knob: string;
+        disabled: string;
+    };
+    states: {
+        hover: {
+            active: string;
+            inactive: string;
+            activeOpacity: number;
+        };
+        focus: {
+            active: {
+                outline: string;
+                boxShadow: string;
+            };
+            inactive: {
+                outline: string;
+                boxShadow: string;
+            };
+        };
+    };
+};
+/**
+ * Transition styles for the Switch component
+ */
+export declare const TransitionStyles: {
+    slider: {
+        transition: string;
+    };
+    knob: {
+        transition: string;
+    };
+};

package/dist/native/components/Form/Switch/Switch/Switch.style.js

@@ -0,0 +1,137 @@
+/**
+ * Switch Styles
+ *
+ * Defines the styles for the Switch component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+/**
+ * Knob (circle) sizes for the Switch component
+ * Following the 4px grid system - dimensions réduites
+ */
+export const KnobSizes = {
+    xs: { height: '10px', width: '10px' },
+    sm: { height: '14px', width: '14px' },
+    md: { height: '18px', width: '18px' },
+    lg: { height: '22px', width: '22px' },
+    xl: { height: '26px', width: '26px' },
+};
+/**
+ * Slider (track) sizes for the Switch component
+ * Following the 4px grid system - dimensions réduites
+ */
+export const SliderSizes = {
+    xs: {
+        height: '20px',
+        width: '40px',
+    },
+    sm: {
+        height: '24px',
+        width: '48px',
+    },
+    md: {
+        height: '28px',
+        width: '56px',
+    },
+    lg: {
+        height: '32px',
+        width: '64px',
+    },
+    xl: {
+        height: '36px',
+        width: '72px',
+    },
+};
+/**
+ * Slider (track) sizes when the Switch has activeChild/inActiveChild content.
+ * Wider tracks ensure the text rendered alongside the knob is readable.
+ */
+export const ContentSliderSizes = {
+    xs: {
+        height: '22px',
+        width: '52px',
+    },
+    sm: {
+        height: '26px',
+        width: '62px',
+    },
+    md: {
+        height: '30px',
+        width: '72px',
+    },
+    lg: {
+        height: '34px',
+        width: '84px',
+    },
+    xl: {
+        height: '38px',
+        width: '96px',
+    },
+};
+/**
+ * Default font sizes for activeChild/inActiveChild text — matched to the
+ * Switch size so the embedded label remains legible.
+ */
+export const ContentFontSizes = {
+    xs: '9px',
+    sm: '10px',
+    md: '11px',
+    lg: '12px',
+    xl: '13px',
+};
+/**
+ * Padding for the Switch slider - ajusté pour les nouvelles dimensions
+ * Following the 4px grid system
+ */
+export const SliderPadding = {
+    xs: { paddingVertical: 5, paddingHorizontal: 3 },
+    sm: { paddingVertical: 5, paddingHorizontal: 3 },
+    md: { paddingVertical: 5, paddingHorizontal: 5 },
+    lg: { paddingVertical: 5, paddingHorizontal: 5 },
+    xl: { paddingVertical: 5, paddingHorizontal: 5 },
+};
+/**
+ * Color schemes for the Switch component
+ */
+export const ColorSchemes = {
+    // Default colors
+    default: {
+        active: 'theme-primary',
+        inactive: 'color-gray-300',
+        knob: 'color-white',
+        disabled: 'color-gray-200',
+    },
+    // State-specific colors
+    states: {
+        hover: {
+            active: 'theme-primary',
+            inactive: 'color-gray-400',
+            activeOpacity: 0.9,
+        },
+        focus: {
+            active: {
+                outline: 'none',
+                boxShadow: '0 0 0 2px white, 0 0 0 4px theme-primary',
+            },
+            inactive: {
+                outline: 'none',
+                boxShadow: '0 0 0 2px white, 0 0 0 4px color-gray-200',
+            },
+        },
+    },
+};
+/**
+ * Transition styles for the Switch component
+ */
+export const TransitionStyles = {
+    slider: {
+        transition: 'all 0.2s ease-in-out',
+    },
+    knob: {
+        transition: 'all 0.2s ease-in-out',
+    },
+};
+//# sourceMappingURL=Switch.style.js.map

package/dist/native/components/Form/Switch/Switch/Switch.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.style.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Switch/Switch/Switch.style.ts"],"names":[],"mappings":"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"}

package/dist/native/components/Form/Switch/Switch/Switch.view.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Switch View Component
+ *
+ * Renders a switch toggle with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { SwitchViewProps } from './Switch.props';
+declare const SwitchView: React.FC<SwitchViewProps>;
+export default SwitchView;