@app-studio/components 0.10.17

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

@@ -0,0 +1,86 @@
+/**
+ * Radio View Component (React Native)
+ *
+ * RN counterpart of Radio.view.tsx. No native radio in RN — we simulate it
+ * with a pressable circle <View/> containing an inner filled dot when
+ * selected. Drops web-only concepts: cursor, transitions, _hover.
+ */
+import React from 'react';
+import { Typography } from 'app-studio';
+import { Center } from 'app-studio';
+import { Sizes, DotSizes, VariantStyles, StateStyles, DotStyles, DotStateStyles, } from './Radio.style';
+import { Text } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { View } from 'app-studio';
+const RadioView = ({ id, icon, name, label, value, isChecked, onChange, onValueChange, shadow = {}, labelPosition = 'right', size = 'md', error = false, isSelected = false, isHovered = false, isDisabled = false, isReadOnly = false, defaultIsSelected = false, setIsSelected = () => { }, setIsHovered = () => { }, views = { radio: {}, label: {} }, infoText, helperText, ...props }) => {
+    const handleChange = () => {
+        if (!isReadOnly && !isDisabled) {
+            if (setIsSelected)
+                setIsSelected(true);
+            if (onChange)
+                onChange(value);
+            if (onValueChange)
+                onValueChange(value);
+        }
+    };
+    const variant = isChecked || isSelected ? 'selected' : 'unselected';
+    const stateStyle = error
+        ? StateStyles.error[variant]
+        : isDisabled
+            ? StateStyles.disabled[variant]
+            : {};
+    const dotStateStyle = error
+        ? DotStateStyles.error[variant]
+        : isDisabled
+            ? DotStateStyles.disabled[variant]
+            : {};
+    const containerStyle = {
+        gap: 8,
+        color: error
+            ? 'color-red-600'
+            : isDisabled
+                ? 'color-gray-400'
+                : 'inherit',
+        opacity: isDisabled ? 0.6 : 1,
+        ...views['label'],
+    };
+    const radioStyle = {
+        ...VariantStyles[variant],
+        ...stateStyle,
+        borderRadius: 9999,
+        backgroundColor: 'color-white',
+        ...Sizes[size],
+        ...shadow,
+        ...views['radio'],
+    };
+    const dotStyle = {
+        ...DotStyles[variant],
+        ...dotStateStyle,
+        borderRadius: 9999,
+        ...DotSizes[size],
+    };
+    return (<View onPress={handleChange} fontSize={Typography.fontSizes[size]} {...containerStyle} {...props}>
+      <Vertical gap={8}>
+        <Horizontal gap={12} alignItems="center">
+          {labelPosition === 'left' && label && (<Text size={size} fontWeight="500" {...views?.label}>
+              {label}
+            </Text>)}
+          <Center {...radioStyle}>
+            {(isChecked || isSelected) && <View {...dotStyle}/>}
+          </Center>
+          {labelPosition === 'right' && label && (<Text size={size} fontWeight="500" {...views?.label}>
+              {label}
+            </Text>)}
+        </Horizontal>
+        {infoText && (<Text marginLeft={labelPosition === 'left' ? 0 : 36} color="color-gray-500" size="sm" fontWeight="400" lineHeight={20} {...views?.infoText}>
+            {infoText}
+          </Text>)}
+      </Vertical>
+      {error && (<Text size="xs" marginTop={4} marginHorizontal={0} color="color-red-500" fontWeight="500">
+          {error}
+        </Text>)}
+    </View>);
+};
+export default RadioView;
+//# sourceMappingURL=Radio.view.native.js.map

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

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

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useRadioState } from './Radio/Radio.state';
+import RadioView from './Radio/Radio.view';
+import { useMergedDesignSystemComponentProps } from '../../../design-system';
+// Defines the main Radio component, serving as the orchestrator that integrates component properties (`RadioProps`), state management logic (`useRadioState`), and the visual presentation (`RadioView`) into a single functional component.
+const RadioComponent = (props) => {
+    const mergedProps = useMergedDesignSystemComponentProps('radio', props);
+    const radioStates = useRadioState(mergedProps);
+    return <RadioView {...radioStates} {...mergedProps}/>;
+};
+export const Radio = RadioComponent;
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../../src/components/Form/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,mCAAmC,EAAE,MAAM,mBAAmB,CAAC;AACxE,6OAA6O;AAC7O,MAAM,cAAc,GAAyB,CAAC,KAAK,EAAE,EAAE;IACrD,MAAM,WAAW,GAAG,mCAAmC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACxE,MAAM,WAAW,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;IAC/C,OAAO,CAAC,SAAS,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI,WAAW,CAAC,EAAG,CAAC;AACzD,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,KAAK,GAAG,cAAc,CAAC"}

package/dist/native/components/Form/Radio/RadioGroup/RadioGroup.props.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { Direction, RadioGroupStyles } from './RadioGroup.type';
+export interface RadioGroupProps extends Omit<ViewProps, 'direction' | 'onChange'> {
+    children: React.ReactNode;
+    name?: string;
+    label?: string;
+    helperText?: string;
+    error?: any;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    direction?: Direction;
+    spacing?: number;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    views?: RadioGroupStyles;
+}
+export interface RadioGroupViewProps extends RadioGroupProps {
+    selectedValue: string;
+    setSelectedValue: (value: string) => void;
+}

package/dist/native/components/Form/Radio/RadioGroup/RadioGroup.props.js

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

package/dist/native/components/Form/Radio/RadioGroup/RadioGroup.props.js.map

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

package/dist/native/components/Form/Radio/RadioGroup/RadioGroup.state.d.ts

@@ -0,0 +1,5 @@
+import { RadioGroupProps } from './RadioGroup.props';
+export declare const useRadioGroupState: ({ value, defaultValue, onChange, }: RadioGroupProps) => {
+    selectedValue: string;
+    setSelectedValue: (newValue: string) => void;
+};

package/dist/native/components/Form/Radio/RadioGroup/RadioGroup.state.js

@@ -0,0 +1,23 @@
+import React from 'react';
+// This file defines the `useRadioGroupState` hook, which centralizes the state management logic for the RadioGroup component. It handles the internal selected value, manages updates from both controlled and uncontrolled props, and provides a consistent way to update the selected option.
+export const useRadioGroupState = ({ value, defaultValue = '', onChange, }) => {
+    const [selectedValue, setSelectedValue] = React.useState(value !== undefined ? value : defaultValue);
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setSelectedValue(value);
+        }
+    }, [value]);
+    const handleValueChange = (newValue) => {
+        if (value === undefined) {
+            setSelectedValue(newValue);
+        }
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+    return {
+        selectedValue,
+        setSelectedValue: handleValueChange,
+    };
+};
+//# sourceMappingURL=RadioGroup.state.js.map

package/dist/native/components/Form/Radio/RadioGroup/RadioGroup.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.state.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Radio/RadioGroup/RadioGroup.state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,gSAAgS;AAChS,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,KAAK,EACL,YAAY,GAAG,EAAE,EACjB,QAAQ,GACQ,EAAE,EAAE;IACpB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CACtD,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAC3C,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC7B,CAAC;QACD,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IACF,OAAO;QACL,aAAa;QACb,gBAAgB,EAAE,iBAAiB;KACpC,CAAC;AACJ,CAAC,CAAC"}

package/dist/native/components/Form/Radio/RadioGroup/RadioGroup.view.d.ts

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

package/dist/native/components/Form/Radio/RadioGroup/RadioGroup.view.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Text } from 'app-studio';
+// Defines the `RadioGroupView` functional component, responsible for rendering the visual structure of the radio group, including its label, helper text, and the layout of its radio children.
+const RadioGroupView = ({ children, name, label, helperText, error, selectedValue, setSelectedValue, direction = 'vertical', spacing = 8, isDisabled = false, isReadOnly = false, views = { container: {}, label: {}, helperText: {} }, onChange, value, defaultValue, ...props }) => {
+    // Dynamically selects the layout container (`Vertical` or `Horizontal`) based on the `direction` prop to arrange the radio buttons within the group.
+    const Container = direction === 'vertical' ? Vertical : Horizontal;
+    // Processes each child element (expected to be `Radio` components) to inject common props such as `name`, `isChecked`, `isDisabled`, `isReadOnly`, and a unified `onChange` handler, ensuring proper group functionality.
+    const processedChildren = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            const radioProps = {
+                name,
+                isChecked: child.props.value === selectedValue,
+                isDisabled: isDisabled || child.props.isDisabled,
+                isReadOnly: isReadOnly || child.props.isReadOnly,
+                onChange: (value) => {
+                    setSelectedValue(value);
+                    if (child.props.onChange) {
+                        child.props.onChange(value);
+                    }
+                },
+            };
+            return React.cloneElement(child, radioProps);
+        }
+        return child;
+    });
+    return (<Vertical gap={spacing} width="100%" {...views.container} {...props}>
+      
+      {label && (<Text fontWeight="600" fontSize="14px" color={error ? 'color-red-600' : 'inherit'} marginBottom={4} {...views.label}>
+          {label}
+        </Text>)}
+      
+      <Container gap={spacing}>{processedChildren}</Container>
+      
+      {(helperText || error) && (<Text fontWeight={error ? '500' : '400'} fontSize="14px" lineHeight="20px" color={error ? 'color-red-500' : 'color-gray-500'} marginTop={4} transition="color 0.2s ease, opacity 0.2s ease" {...views.helperText}>
+          {error || helperText}
+        </Text>)}
+    </Vertical>);
+};
+export default RadioGroupView;
+//# sourceMappingURL=RadioGroup.view.js.map

package/dist/native/components/Form/Radio/RadioGroup/RadioGroup.view.js.map

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

package/dist/native/components/Form/Radio/RadioGroup.d.ts

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

package/dist/native/components/Form/Radio/RadioGroup.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useRadioGroupState } from './RadioGroup/RadioGroup.state';
+import RadioGroupView from './RadioGroup/RadioGroup.view';
+// Defines the main RadioGroup functional component, which orchestrates state management and rendering for the RadioGroup.
+const RadioGroupComponent = (props) => {
+    // Initializes and manages the state logic for the RadioGroup by utilizing a custom hook, passing down component properties.
+    const radioGroupStates = useRadioGroupState(props);
+    // Renders the presentational RadioGroup view, combining both the derived state logic and the original component properties.
+    return <RadioGroupView {...radioGroupStates} {...props}/>;
+};
+// Exports the RadioGroup component for external use, making it available throughout the application.
+export const RadioGroup = RadioGroupComponent;
+//# sourceMappingURL=RadioGroup.js.map

package/dist/native/components/Form/Radio/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../../../src/components/Form/Radio/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,0HAA0H;AAC1H,MAAM,mBAAmB,GAA8B,CAAC,KAAK,EAAE,EAAE;IAC/D,4HAA4H;IAC5H,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACnD,4HAA4H;IAC5H,OAAO,CAAC,cAAc,CAAC,IAAI,gBAAgB,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC7D,CAAC,CAAC;AACF,qGAAqG;AACrG,MAAM,CAAC,MAAM,UAAU,GAAG,mBAAmB,CAAC"}

package/dist/native/components/Form/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioGroup';

package/dist/native/components/Form/Radio/index.js

@@ -0,0 +1,5 @@
+// Re-exports the core Radio component and its associated types/utilities, making them available from this module's entry point.
+export * from './Radio';
+// Re-exports the RadioGroup component, which facilitates grouping multiple Radio components for unified selection management.
+export * from './RadioGroup';
+//# sourceMappingURL=index.js.map

package/dist/native/components/Form/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Form/Radio/index.ts"],"names":[],"mappings":"AAAA,gIAAgI;AAChI,cAAc,SAAS,CAAC;AACxB,8HAA8H;AAC9H,cAAc,cAAc,CAAC"}

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

@@ -0,0 +1,78 @@
+import { Elevation } from '../../../../utils/elevation';
+import { InputProps, Shadow, ViewProps } from 'app-studio';
+import { SelectStyles, Shape, Size, Variant, Option } from './Select.type';
+export interface SelectProps 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;
+    isClearable?: boolean;
+    isRequired?: boolean;
+    isAutoFocus?: boolean;
+    onChange?: (value: any) => void;
+    shape?: Shape;
+    variant?: Variant;
+    views?: SelectStyles;
+    size?: Size;
+    shadow?: Shadow | Elevation | ViewProps;
+    isScrollable?: boolean;
+    labelProps?: any;
+}
+export interface SelectViewProps extends SelectProps {
+    value: string | Array<string>;
+    setValue: Function;
+    hide: boolean;
+    setHide: Function;
+    isHovered: boolean;
+    setIsHovered: Function;
+    isFocused: boolean;
+    setIsFocused: Function;
+    highlightedIndex?: number;
+    setHighlightedIndex?: Function;
+}
+export interface SelectBoxProps {
+    options: Option[];
+    value?: string | Array<string>;
+    isDisabled?: boolean;
+    placeholder?: string;
+    removeOption?: Function;
+    views?: SelectStyles;
+    size?: Size;
+}
+export interface MultiSelectProps extends Omit<InputProps, 'size'> {
+    option: string;
+    removeOption: Function;
+    size?: Size;
+}
+export interface ItemProps extends Omit<InputProps, 'size'> {
+    callback?: Function;
+    option: Option;
+    size?: Size;
+    style?: SelectStyles;
+    isHovered?: boolean;
+    setIsHovered?: Function;
+}
+export interface HiddenSelectProps 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?: SelectStyles;
+    highlightedIndex?: number;
+    setHighlightedIndex?: Function;
+}

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

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

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SelectProps } from './Select.props';
+export declare const useSelectState: ({ placeholder, isMulti, options, id, }: SelectProps) => {
+    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/Select/Select/Select.state.js

@@ -0,0 +1,46 @@
+import React from 'react';
+// Initializes the custom hook 'useSelectState' for managing the state of the Select component
+export const useSelectState = ({ placeholder, isMulti, options, id = `select-${Math.random().toString(36).substr(2, 9)}`, }) => {
+    // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
+    const defaultValue = placeholder
+        ? isMulti
+            ? []
+            : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
+        : Array.isArray(options) && options.length > 0
+            ? options[0].value
+            : isMulti
+                ? []
+                : ''; // If no placeholder, use the first option value if available, otherwise empty array for multi-select or empty string for single select
+    // State hook for tracking mouse hover status over the Select component
+    const [isHovered, setIsHovered] = React.useState(false);
+    // State hook for tracking focus status of the Select input field
+    const [isFocused, setIsFocused] = React.useState(false);
+    // State hook for managing the value(s) selected by the user, initialized with the default value
+    const [value, setValue] = React.useState(defaultValue);
+    // State hook for keeping track of the currently highlighted index in the options list
+    const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+    // State hook for managing visibility of the Select dropdown, initially set to hidden
+    const [hide, setHide] = React.useState(true);
+    // Returns an object containing all stateful values and their associated setters to manage the Select component's state
+    return {
+        id,
+        value,
+        setValue,
+        hide,
+        setHide,
+        isHovered,
+        setIsHovered,
+        isFocused,
+        setIsFocused,
+        highlightedIndex,
+        setHighlightedIndex,
+    };
+};
+// Initializes another custom hook 'useItemState' for managing the hover state of each Select item
+export const useItemState = () => {
+    // State hook for tracking mouse hover status over individual Select item options
+    const [isHovered, setIsHovered] = React.useState(false);
+    // Returns an object with 'isHovered' state and its associated setter from the 'useItemState' hook, for controlling individual Select item hover state
+    return { isHovered, setIsHovered };
+};
+//# sourceMappingURL=Select.state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.state.js","sourceRoot":"","sources":["../../../../../../src/components/Form/Select/Select/Select.state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,8FAA8F;AAC9F,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,WAAW,EACX,OAAO,EACP,OAAO,EACP,EAAE,GAAG,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAC5C,EAAE,EAAE;IAChB,mKAAmK;IACnK,MAAM,YAAY,GAAG,WAAW;QAC9B,CAAC,CAAC,OAAO;YACP,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,EAAE,CAAC,0GAA0G;QACjH,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,CAAC,uIAAuI;IAE/I,uEAAuE;IACvE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,iEAAiE;IACjE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,gGAAgG;IAChG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAoB,YAAY,CAAC,CAAC;IAC1E,sFAAsF;IACtF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC1E,qFAAqF;IACrF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,uHAAuH;IACvH,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,kGAAkG;AAClG,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,iFAAiF;IACjF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,sJAAsJ;IACtJ,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AACrC,CAAC,CAAC"}

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

@@ -0,0 +1,90 @@
+/**
+ * Select Styles
+ *
+ * Design system tokens for the Select component following 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, physics-based animations
+ */
+import { ViewProps } from 'app-studio';
+import { Size } from './Select.type';
+/**
+ * Size configurations following 4px grid system
+ */
+export declare const Sizes: Record<Size, ViewProps>;
+/**
+ * Icon sizes proportional to component size
+ */
+export declare const IconSizes: Record<Size, number>;
+/**
+ * Dropdown container styles
+ * - Subtle shadow for elevation
+ * - Smooth border and radius
+ */
+export declare const dropdownStyles: ViewProps;
+/**
+ * Dropdown animation keyframes
+ */
+export declare const dropdownAnimation: {
+    enter: {
+        opacity: number;
+        transform: string;
+        transition: string;
+    };
+    exit: {
+        opacity: number;
+        transform: string;
+    };
+    initial: {
+        opacity: number;
+        transform: string;
+    };
+};
+/**
+ * Option item styles with improved touch targets
+ */
+export declare const optionStyles: ViewProps;
+/**
+ * Option item state variants
+ */
+export declare const optionStateStyles: {
+    default: {};
+    hover: {
+        backgroundColor: string;
+    };
+    highlighted: {
+        backgroundColor: string;
+    };
+    selected: {
+        backgroundColor: string;
+    };
+    selectedHighlighted: {
+        backgroundColor: string;
+    };
+};
+/**
+ * Chevron icon animation
+ */
+export declare const chevronAnimation: {
+    open: {
+        transform: string;
+        transition: string;
+    };
+    closed: {
+        transform: string;
+        transition: string;
+    };
+};
+/**
+ * Multi-select chip/tag styles
+ */
+export declare const chipStyles: ViewProps;
+/**
+ * Scrollbar styles for dropdown
+ */
+export declare const scrollbarStyles: {
+    scrollbarWidth: "thin";
+    scrollbarColor: string;
+};

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

@@ -0,0 +1,127 @@
+/**
+ * Select Styles
+ *
+ * Design system tokens for the Select component following 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, physics-based animations
+ */
+/**
+ * Size configurations following 4px grid system
+ */
+export const Sizes = {
+    xs: { height: '28px', width: '28px' },
+    sm: { height: '32px', width: '32px' },
+    md: { height: '40px', width: '40px' },
+    lg: { height: '48px', width: '48px' },
+    xl: { height: '56px', width: '56px' },
+};
+/**
+ * Icon sizes proportional to component size
+ */
+export const IconSizes = {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+};
+/**
+ * Dropdown container styles
+ * - Subtle shadow for elevation
+ * - Smooth border and radius
+ */
+export const dropdownStyles = {
+    // width handled by JS for Portal positioning
+    maxHeight: '280px',
+    overflowY: 'auto',
+    zIndex: 1000,
+    backgroundColor: 'color-white',
+    borderRadius: 12,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'color-gray-200',
+    // Subtle, layered shadow for depth
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+};
+/**
+ * Dropdown animation keyframes
+ */
+export const dropdownAnimation = {
+    enter: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)',
+        transition: 'all 0.2s ease-in-out',
+    },
+    exit: {
+        opacity: 0,
+        transform: 'translateY(-4px) scale(0.98)',
+    },
+    initial: {
+        opacity: 0,
+        transform: 'translateY(-8px) scale(0.96)',
+    },
+};
+/**
+ * Option item styles with improved touch targets
+ */
+export const optionStyles = {
+    padding: '10px 12px',
+    cursor: 'pointer',
+    borderRadius: 8, // radius-md
+    margin: '2px 4px',
+    transition: 'all 0.15s ease-in-out',
+};
+/**
+ * Option item state variants
+ */
+export const optionStateStyles = {
+    default: {},
+    hover: {
+        backgroundColor: 'color-gray-50',
+    },
+    highlighted: {
+        backgroundColor: 'color-gray-100',
+    },
+    selected: {
+        backgroundColor: 'color-gray-100',
+    },
+    selectedHighlighted: {
+        backgroundColor: 'color-gray-200',
+    },
+};
+/**
+ * Chevron icon animation
+ */
+export const chevronAnimation = {
+    open: {
+        transform: 'rotate(180deg)',
+        transition: 'all 0.2s ease-in-out',
+    },
+    closed: {
+        transform: 'rotate(0deg)',
+        transition: 'all 0.2s ease-in-out',
+    },
+};
+/**
+ * Multi-select chip/tag styles
+ */
+export const chipStyles = {
+    padding: '4px 8px',
+    borderRadius: 8, // radius-md
+    backgroundColor: 'color-gray-100',
+    fontSize: '12px',
+    fontWeight: '500',
+    color: 'color-gray-700',
+    transition: 'all 0.15s ease-in-out',
+};
+/**
+ * Scrollbar styles for dropdown
+ */
+export const scrollbarStyles = {
+    scrollbarWidth: 'thin',
+    scrollbarColor: 'rgba(0, 0, 0, 0.15) transparent',
+};
+//# sourceMappingURL=Select.style.js.map