@app-studio/components 0.10.17

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

@@ -0,0 +1,150 @@
+// Defines a collection of default styles for various structural elements within the ColorInput component.
+export const DefaultColorInputStyles = {
+    // Styles for the main container element of the ColorInput, controlling its positioning and display properties.
+    container: {
+        position: 'relative',
+        display: 'inline-block',
+        width: 'fit-content',
+    },
+    // Styles for the clickable trigger element that opens the color picker dropdown, including visual appearance, interactive transitions, and borders.
+    trigger: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        cursor: 'pointer',
+        transition: 'all 0.2s ease-in-out',
+        backgroundColor: 'color-white',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'color-gray-300',
+        padding: '8px 12px',
+        borderRadius: 8,
+    },
+    // Styles for the dropdown panel that appears when the trigger is clicked, defining its absolute positioning, background, borders, shadow, padding, and minimum width.
+    dropdown: {
+        position: 'absolute',
+        top: 'calc(100% + 4px)',
+        left: 0,
+        right: 0,
+        zIndex: 1000,
+        backgroundColor: 'color-white',
+        borderRadius: 12,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'color-gray-200',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+        padding: '16px',
+        minWidth: '280px',
+    },
+    // Styles for the grid layout used to display the selectable color options within the dropdown, specifying column structure and gap.
+    colorGrid: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(8, 1fr)',
+        gap: '8px',
+    },
+    // Styles for the container displaying recently selected colors, managing its flexbox layout and spacing.
+    recentColors: {
+        display: 'flex',
+        gap: '4px',
+        flexWrap: 'wrap',
+    },
+};
+// Maps predefined size options (e.g., xs, sm, md, lg, xl) to specific styling properties like height, font size, and padding for the ColorInput component's elements.
+export const Sizes = {
+    xs: {
+        height: '28px',
+        fontSize: '10px',
+        padding: '4px 8px',
+    },
+    sm: {
+        height: '32px',
+        fontSize: '12px',
+        padding: '6px 10px',
+    },
+    md: {
+        height: '40px',
+        fontSize: '14px',
+        padding: '8px 12px',
+    },
+    lg: {
+        height: '48px',
+        fontSize: '16px',
+        padding: '12px 16px',
+    },
+    xl: {
+        height: '56px',
+        fontSize: '20px',
+        padding: '16px 20px',
+    },
+};
+// Maps predefined shape options (e.g., default, square, rounded, pill) to specific border-radius styling for the ColorInput component's elements.
+export const Shapes = {
+    default: {
+        borderRadius: 8,
+    },
+    square: {
+        borderRadius: 0,
+    },
+    rounded: {
+        borderRadius: 8,
+    },
+    pill: {
+        borderRadius: 9999,
+    },
+};
+// Maps predefined visual variant options (e.g., default, outline, none) to specific background, border, and border style properties for the ColorInput component's elements.
+export const Variants = {
+    default: {
+        backgroundColor: 'color-white',
+        borderColor: 'color-gray-300',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+    },
+    outline: {
+        backgroundColor: 'transparent',
+        borderColor: 'color-gray-300',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+    },
+    none: {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        borderWidth: '0px',
+    },
+};
+// Defines the default set of colors available for selection in the color picker, including their display names and corresponding CSS color values.
+export const DefaultColorPalette = [
+    { name: 'Red 500', value: 'color-red-500' },
+    { name: 'Orange 500', value: 'color-orange-500' },
+    { name: 'Yellow 500', value: 'color-yellow-500' },
+    { name: 'Green 500', value: 'color-green-500' },
+    { name: 'Blue 500', value: 'color-blue-500' },
+    { name: 'Indigo 500', value: 'color-indigo-500' },
+    { name: 'Purple 500', value: 'color-purple-500' },
+    { name: 'Pink 500', value: 'color-pink-500' },
+    { name: 'Red 300', value: 'color-red-300' },
+    { name: 'Orange 300', value: 'color-orange-300' },
+    { name: 'Yellow 300', value: 'color-yellow-300' },
+    { name: 'Green 300', value: 'color-green-300' },
+    { name: 'Blue 300', value: 'color-blue-300' },
+    { name: 'Indigo 300', value: 'color-indigo-300' },
+    { name: 'Purple 300', value: 'color-purple-300' },
+    { name: 'Pink 300', value: 'color-pink-300' },
+    { name: 'Red 700', value: 'color-red-700' },
+    { name: 'Orange 700', value: 'color-orange-700' },
+    { name: 'Yellow 700', value: 'color-yellow-700' },
+    { name: 'Green 700', value: 'color-green-700' },
+    { name: 'Blue 700', value: 'color-blue-700' },
+    { name: 'Indigo 700', value: 'color-indigo-700' },
+    { name: 'Purple 700', value: 'color-purple-700' },
+    { name: 'Pink 700', value: 'color-pink-700' },
+    { name: 'Gray 100', value: 'color-gray-100' },
+    { name: 'Gray 300', value: 'color-gray-300' },
+    { name: 'Gray 500', value: 'color-gray-500' },
+    { name: 'Gray 700', value: 'color-gray-700' },
+    { name: 'Gray 900', value: 'color-gray-900' },
+    { name: 'White', value: 'color-white' },
+    { name: 'Black', value: 'color-black' },
+    { name: 'Transparent', value: 'transparent' },
+];
+//# sourceMappingURL=ColorInput.style.js.map

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

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

package/dist/native/components/Form/ColorInput/ColorInput/ColorInput.type.d.ts

@@ -0,0 +1,36 @@
+import { ViewProps } from 'app-studio';
+export type Variant = 'outline' | 'default' | 'none';
+export type Shape = 'default' | 'square' | 'rounded' | 'pill';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ColorInputStyles = {
+    text?: ViewProps;
+    label?: ViewProps;
+    error?: ViewProps;
+    helperText?: ViewProps;
+    container?: ViewProps;
+    trigger?: ViewProps;
+    dropdown?: ViewProps;
+    colorGrid?: ViewProps;
+    colorSwatch?: ViewProps;
+    customInput?: ViewProps;
+    recentColors?: ViewProps;
+};
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+export type ColorValue = {
+    hex: string;
+    rgb: {
+        r: number;
+        g: number;
+        b: number;
+    };
+    hsl: {
+        h: number;
+        s: number;
+        l: number;
+    };
+};
+export type PredefinedColor = {
+    name: string;
+    value: string;
+    category?: string;
+};

package/dist/native/components/Form/ColorInput/ColorInput/ColorInput.type.js

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

package/dist/native/components/Form/ColorInput/ColorInput/ColorInput.type.js.map

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

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

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

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import { View, Vertical, Horizontal, Text, useTheme } from 'app-studio';
+import { DefaultColorInputStyles, Sizes, Shapes, Variants, DefaultColorPalette, } from './ColorInput.style';
+import { TextField } from '../../TextField/TextField';
+import { ChevronIcon } from '../../../Icon/Icon';
+import { Label } from '../../Label/Label';
+// Defines the ColorInputView functional component, responsible for rendering the visual structure and interaction logic of the color input. It receives ColorInputViewProps to configure its appearance and behavior.
+const ColorInputView = ({ id, name, label, placeholder = 'Select a color', helperText, views = {}, size = 'md', shape = 'default', variant = 'default', shadow, error = false, isDisabled = false, isReadOnly = false, isFocused = false, isHovered = false, predefinedColors = DefaultColorPalette, showCustomInput = true, showRecentColors = true, isOpen = false, selectedColor = '', recentColors = [], customColor = '', handleToggle = () => { }, handleColorSelect = () => { }, handleCustomColorChange = () => { }, handleCustomColorSubmit = () => { }, handleClose, setIsFocused = () => { }, setIsHovered = () => { }, setValue, triggerRef, dropdownRef, onChange, onChangeComplete, onOpen, onClose, colorFormat, maxRecentColors, closeOnSelect, value, defaultValue, ...props }) => {
+    // Initializes the getColor function from the useTheme hook, allowing access to theme-defined colors for consistent styling.
+    const { getColor } = useTheme();
+    // Combines default container styles with any custom styles provided through the views.container prop.
+    const containerStyles = {
+        ...DefaultColorInputStyles.container,
+        ...views?.container,
+    };
+    // Combines default trigger styles with dynamic styles based on size, shape, variant, and component states such as error, disabled, focused, and hovered.
+    const triggerStyles = {
+        ...DefaultColorInputStyles.trigger,
+        ...Sizes[size],
+        ...Shapes[shape],
+        ...Variants[variant],
+        ...(error && { borderColor: 'color-red-500' }),
+        ...(isDisabled && { opacity: 0.6, cursor: 'not-allowed' }),
+        ...(isFocused && {
+            borderColor: 'theme-primary',
+            boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(29, 78, 216, 0.16)',
+        }),
+        ...(isHovered && !isDisabled && { borderColor: 'color-gray-400' }),
+        ...views?.trigger,
+        ...(shadow && shadow),
+    };
+    // Combines default dropdown styles with any custom styles provided through the views.dropdown prop.
+    const dropdownStyles = {
+        ...DefaultColorInputStyles.dropdown,
+        ...views?.dropdown,
+    };
+    // Combines default color grid styles with any custom styles provided through the views.colorGrid prop for displaying predefined color swatches.
+    const colorGridStyles = {
+        ...DefaultColorInputStyles.colorGrid,
+        ...views?.colorGrid,
+    };
+    // Combines default recent colors section styles with any custom styles provided through the views.recentColors prop.
+    const recentColorsStyles = {
+        ...DefaultColorInputStyles.recentColors,
+        ...views?.recentColors,
+    };
+    // Determines the color to be displayed in the current color swatch, defaulting to 'color-gray-200' if no color is currently selected.
+    const displayColor = selectedColor || 'color-gray-200';
+    return (<View {...containerStyles} {...props}>
+      
+      {label && (<Label htmlFor={id} size={size} isDisabled={isDisabled} error={error} views={views?.label}>
+          {label}
+        </Label>)}
+      
+      <View ref={triggerRef} onClick={isDisabled || isReadOnly ? undefined : handleToggle} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} tabIndex={isDisabled ? -1 : 0} role="button" aria-expanded={isOpen} aria-haspopup="listbox" aria-label={label || placeholder} width={'fit-content'} gap={8} {...triggerStyles}>
+        
+        
+        <View width="20px" height="20px" borderRadius="4px" backgroundColor={displayColor} borderWidth="1px" borderStyle="solid" borderColor="color-gray-300"/>
+        
+        
+        {!isReadOnly && !isDisabled && (<ChevronIcon widthHeight={16} color="color-gray-500" orientation={isOpen ? 'up' : 'down'}/>)}
+      </View>
+      
+      {isOpen && (<View ref={dropdownRef} {...dropdownStyles}>
+          
+          <View {...colorGridStyles}>
+            {predefinedColors.map((colorOption, index) => (<View key={index} width="24px" height="24px" borderRadius="8px" backgroundColor={colorOption.value} borderWidth="2px" borderStyle="solid" borderColor={selectedColor === colorOption.value
+                    ? 'theme-primary'
+                    : 'transparent'} cursor="pointer" transition="transform 0.2s ease, border-color 0.2s ease" onClick={() => handleColorSelect(colorOption.value)} title={colorOption.name} _hover={{
+                    transform: 'scale(1.05)',
+                    borderColor: 'color-gray-400',
+                }} {...views?.colorSwatch}/>))}
+          </View>
+          
+          {showRecentColors && recentColors.length > 0 && (<Vertical gap={8} marginTop="16px">
+              <Text fontSize="12px" fontWeight="500" color="color-gray-600">
+                Recent Colors
+              </Text>
+              <Horizontal gap={4} flexWrap="wrap" {...recentColorsStyles}>
+                {recentColors.map((color, index) => (<View key={index} width="20px" height="20px" borderRadius="8px" backgroundColor={color} borderWidth="1px" borderStyle="solid" borderColor={selectedColor === color
+                        ? 'theme-primary'
+                        : 'color-gray-300'} cursor="pointer" transition="transform 0.2s ease, border-color 0.2s ease" onClick={() => handleColorSelect(color)} title={color} _hover={{
+                        transform: 'scale(1.05)',
+                        borderColor: 'color-gray-400',
+                    }}/>))}
+              </Horizontal>
+            </Vertical>)}
+          
+          {showCustomInput && (<Vertical gap={8} marginTop="16px">
+              <Text fontSize="12px" fontWeight="500" color="color-gray-600">
+                Custom Color
+              </Text>
+              <Horizontal gap={8}>
+                <TextField value={customColor} onChange={(e) => handleCustomColorChange(e.target.value)} placeholder="#000000 or rgb(0,0,0)" size="sm" style={{ flex: 1 }} views={views?.customInput}/>
+                <View padding="8px 12px" backgroundColor="theme-primary" borderRadius="8px" cursor="pointer" onClick={handleCustomColorSubmit} transition="background-color 0.2s ease, opacity 0.2s ease" _hover={{ backgroundColor: 'color-blue-700' }}>
+                  <Text color="color-white" fontSize="12px" fontWeight="500">
+                    Add
+                  </Text>
+                </View>
+              </Horizontal>
+            </Vertical>)}
+        </View>)}
+      
+      {helperText && (<Text fontSize="12px" color={error ? 'color-red-500' : 'color-gray-600'} marginTop="4px" {...views?.helperText}>
+          {helperText}
+        </Text>)}
+      
+      {error && typeof error === 'string' && (<Text fontSize="12px" color="color-red-500" marginTop="4px" {...views?.error}>
+          {error}
+        </Text>)}
+    </View>);
+};
+export default ColorInputView;
+//# sourceMappingURL=ColorInput.view.js.map

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

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

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useColorInputState } from './ColorInput/ColorInput.state';
+import ColorInputView from './ColorInput/ColorInput.view';
+// This file defines the main ColorInput component, orchestrating its properties, state management logic, and presentation view to create a complete and functional color input field.
+const ColorInputComponent = (props) => {
+    const colorInputStates = useColorInputState(props);
+    return <ColorInputView {...colorInputStates} {...props}/>;
+};
+export const ColorInput = ColorInputComponent;
+//# sourceMappingURL=ColorInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","sourceRoot":"","sources":["../../../../../src/components/Form/ColorInput/ColorInput.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,sLAAsL;AACtL,MAAM,mBAAmB,GAA8B,CACrD,KAAsB,EACtB,EAAE;IACF,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,CAAC,cAAc,CAAC,IAAI,gBAAgB,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC7D,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,UAAU,GAAG,mBAAmB,CAAC"}

package/dist/native/components/Form/ComboBox/ComboBox/ComboBox.context.d.ts

@@ -0,0 +1,8 @@
+interface ComboBoxContextType {
+    openDropdowns: {
+        [key: string]: boolean;
+    };
+    toggleDropdown: (id: string) => void;
+}
+declare const ComboBoxContext: import("react").Context<ComboBoxContextType>;
+export default ComboBoxContext;

package/dist/native/components/Form/ComboBox/ComboBox/ComboBox.context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+// Creates the context for ComboBox with a default value enforcing non-null
+const ComboBoxContext = createContext(null);
+export default ComboBoxContext;
+//# sourceMappingURL=ComboBox.context.js.map

package/dist/native/components/Form/ComboBox/ComboBox/ComboBox.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.context.js","sourceRoot":"","sources":["../../../../../../src/components/Form/ComboBox/ComboBox/ComboBox.context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,2EAA2E;AAC3E,MAAM,eAAe,GAAG,aAAa,CAAsB,IAAK,CAAC,CAAC;AAElE,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,39 @@
+import { ReactNode, Dispatch, SetStateAction } from 'react';
+import { ComboBoxStyles } from './ComboBox.type';
+import { InputProps } from 'app-studio';
+export interface ComboBoxProps extends Omit<InputProps, 'size' | 'onSelect' | 'left' | 'right'> {
+    id: string;
+    name?: string;
+    items: ComboBoxItem[];
+    onSelect?: (item: ComboBoxItem | ComboBoxItem[]) => void;
+    searchEnabled?: boolean;
+    left?: ReactNode;
+    right?: ReactNode;
+    label?: string;
+    showTick?: boolean;
+    placeholder?: string;
+    views?: ComboBoxStyles;
+    searchPlaceholder?: string;
+    isMulti?: boolean;
+}
+export interface ComboBoxItem {
+    label: string;
+    value: string;
+    icon?: ReactNode;
+}
+export interface ComboBoxStateActions {
+    filteredItems: ComboBoxItem[];
+    setFilteredItems: Dispatch<SetStateAction<ComboBoxItem[]>>;
+    selectedItem: ComboBoxItem;
+    setSelectedItem: Dispatch<SetStateAction<ComboBoxItem>>;
+    selectedItems: ComboBoxItem[];
+    setSelectedItems: Dispatch<SetStateAction<ComboBoxItem[]>>;
+    highlightedIndex: number;
+    setHighlightedIndex: Dispatch<SetStateAction<number>>;
+    searchQuery: string;
+    setSearchQuery: Dispatch<SetStateAction<string>>;
+    isDropdownVisible: boolean;
+    setIsDropdownVisible: Dispatch<SetStateAction<boolean>>;
+}
+export interface ComboBoxViewProps extends ComboBoxProps, ComboBoxStateActions {
+}

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

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

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

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

package/dist/native/components/Form/ComboBox/ComboBox/ComboBox.provider.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ComboBoxProvider: ({ children }: any) => React.JSX.Element;

package/dist/native/components/Form/ComboBox/ComboBox/ComboBox.provider.js

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import ComboBoxContext from './ComboBox.context';
+// Defines a provider component for ComboBox, using a render prop pattern to pass down the context to children.
+export const ComboBoxProvider = ({ children }) => {
+    // Initializes a state variable to track the open state of dropdowns using an object keyed by a string identifier.
+    const [openDropdowns, setOpenDropdowns] = useState({});
+    // Defines a function to toggle the open state of a dropdown identified by its id.
+    const toggleDropdown = (id) => {
+        setOpenDropdowns((prev) => ({ ...prev, [id]: !prev[id] }));
+    };
+    return (<ComboBoxContext.Provider value={{ openDropdowns, toggleDropdown }}>
+      {children}
+    </ComboBoxContext.Provider>);
+};
+//# sourceMappingURL=ComboBox.provider.js.map

package/dist/native/components/Form/ComboBox/ComboBox/ComboBox.provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.provider.js","sourceRoot":"","sources":["../../../../../../src/components/Form/ComboBox/ComboBox/ComboBox.provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,eAAe,MAAM,oBAAoB,CAAC;AACjD,+GAA+G;AAC/G,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE;IACpD,kHAAkH;IAClH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAE/C,EAAE,CAAC,CAAC;IACP,kFAAkF;IAClF,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC;IACF,OAAO,CACL,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC,CACjE;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,QAAQ,CAAC,CAC5B,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { ComboBoxItem, ComboBoxStateActions } from './ComboBox.props';
+export declare const useComboBoxState: (items: ComboBoxItem[], placeholder?: string, searchPlaceholder?: string) => ComboBoxStateActions;

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

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+// Defines the useComboBoxState hook with parameters for the list of items and optional placeholder texts.
+export const useComboBoxState = (items, placeholder, searchPlaceholder) => {
+    // State hook for filtered items with initial state set to the items passed to the hook.
+    const [filteredItems, setFilteredItems] = useState(items);
+    // State hook to track the selected item with an initial state based on the placeholder or the first item.
+    const [selectedItem, setSelectedItem] = useState(placeholder ? { value: placeholder, label: placeholder } : items[0]);
+    // State hook for multi-select mode: array of selected items.
+    const [selectedItems, setSelectedItems] = useState([]);
+    // State hook for highlighted index in the dropdown list, initialized to 0.
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    // State hook for search query with an initial state based on the searchPlaceholder or empty string.
+    const [searchQuery, setSearchQuery] = useState(searchPlaceholder ?? '');
+    // State hook to manage dropdown visibility, starts as false (hidden).
+    const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+    // Start of object returned by the useComboBoxState hook containing all state and state updater functions.
+    return {
+        filteredItems,
+        setFilteredItems,
+        selectedItem,
+        setSelectedItem,
+        selectedItems,
+        setSelectedItems,
+        highlightedIndex,
+        setHighlightedIndex,
+        searchQuery,
+        setSearchQuery,
+        isDropdownVisible,
+        setIsDropdownVisible,
+        // End of the return statement of the useComboBoxState hook, encapsulating all the state and setState actions for ComboBox.
+    };
+};
+//# sourceMappingURL=ComboBox.state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.state.js","sourceRoot":"","sources":["../../../../../../src/components/Form/ComboBox/ComboBox/ComboBox.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,0GAA0G;AAC1G,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,KAAqB,EACrB,WAAoB,EACpB,iBAA0B,EACJ,EAAE;IACxB,wFAAwF;IACxF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAiB,KAAK,CAAC,CAAC;IAC1E,0GAA0G;IAC1G,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CACpE,CAAC;IACF,6DAA6D;IAC7D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IACvE,2EAA2E;IAC3E,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACpE,oGAAoG;IACpG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAC5C,iBAAiB,IAAI,EAAE,CACxB,CAAC;IACF,sEAAsE;IACtE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,0GAA0G;IAC1G,OAAO;QACL,aAAa;QACb,gBAAgB;QAChB,YAAY;QACZ,eAAe;QACf,aAAa;QACb,gBAAgB;QAChB,gBAAgB;QAChB,mBAAmB;QACnB,WAAW;QACX,cAAc;QACd,iBAAiB;QACjB,oBAAoB;QACpB,2HAA2H;KAC5H,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,116 @@
+/**
+ * ComboBox Styles
+ *
+ * Design system tokens for the ComboBox 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';
+/**
+ * Size configurations following 4px grid system
+ */
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+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
+ * - Animation-ready properties
+ */
+export declare const dropdownStyles: ViewProps;
+/**
+ * Dropdown animation keyframes (applied via style prop)
+ */
+export declare const dropdownAnimation: {
+    enter: {
+        opacity: number;
+        transform: string;
+        transition: string;
+    };
+    exit: {
+        opacity: number;
+        transform: string;
+    };
+    initial: {
+        opacity: number;
+        transform: string;
+    };
+};
+/**
+ * Search field container styles
+ */
+export declare const searchContainerStyles: ViewProps;
+/**
+ * Option item styles with hover/focus states
+ */
+export declare const optionStyles: ViewProps;
+/**
+ * Option item state variants
+ */
+export declare const optionStateStyles: {
+    default: {
+        backgroundColor: string;
+    };
+    hover: {
+        backgroundColor: string;
+    };
+    highlighted: {
+        backgroundColor: string;
+    };
+    selected: {
+        backgroundColor: string;
+    };
+    selectedHighlighted: {
+        backgroundColor: string;
+    };
+};
+/**
+ * Empty state styles
+ */
+export declare const emptyStateStyles: ViewProps;
+/**
+ * Trigger button styles
+ */
+export declare const triggerStyles: ViewProps;
+/**
+ * Chevron icon animation
+ */
+export declare const chevronAnimation: {
+    open: {
+        transform: string;
+        transition: string;
+    };
+    closed: {
+        transform: string;
+        transition: string;
+    };
+};
+/**
+ * Scrollbar styles for dropdown
+ */
+export declare const scrollbarStyles: {
+    '&::-webkit-scrollbar': {
+        width: string;
+    };
+    '&::-webkit-scrollbar-track': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: string;
+        borderRadius: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+};
+/**
+ * Chip styles for multi-select display
+ */
+export declare const chipStyles: ViewProps;