@app-studio/components 0.10.17

package/dist/manifest.json

@@ -0,0 +1,22 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/assets/maskable_icon.png",
+      "sizes": "1024x1024",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/dist/native/components/Accordion/Accordion/Accordion.props.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { AccordionStyles, Shape, Variant, AccordionType } from './Accordion.type';
+export interface AccordionProps extends Omit<ViewProps, 'value' | 'defaultValue' | 'onChange'> {
+    children?: React.ReactNode;
+    type?: AccordionType;
+    defaultValue?: string | string[];
+    value?: string | string[];
+    onValueChange?: (value: string | string[] | undefined) => void;
+    collapsible?: boolean;
+    shape?: Shape;
+    variant?: Variant;
+    views?: AccordionStyles;
+}
+export interface AccordionItemProps extends Omit<ViewProps, 'value'> {
+    value: string;
+    children: React.ReactNode;
+    isDisabled?: boolean;
+    views?: {
+        item?: ViewProps;
+        trigger?: ViewProps;
+        content?: ViewProps;
+        icon?: ViewProps;
+    };
+}
+export interface AccordionTriggerProps extends ViewProps {
+    children: React.ReactNode;
+    views?: {
+        container?: ViewProps;
+        icon?: ViewProps;
+    };
+    asChild?: boolean;
+}
+export interface AccordionContentProps {
+    children: React.ReactNode;
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface AccordionComponentType extends React.FC<AccordionProps> {
+    Item: React.FC<AccordionItemProps>;
+    Trigger: React.FC<AccordionTriggerProps & {
+        value?: string;
+        isExpanded?: boolean;
+        isDisabled?: boolean;
+        triggerId?: string;
+        contentId?: string;
+    }>;
+    Content: React.FC<AccordionContentProps>;
+}

package/dist/native/components/Accordion/Accordion/Accordion.props.js

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

package/dist/native/components/Accordion/Accordion/Accordion.props.js.map

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

package/dist/native/components/Accordion/Accordion/Accordion.state.d.ts

@@ -0,0 +1,9 @@
+import { AccordionProps } from './Accordion.props';
+export declare const useAccordionState: ({ type, value: controlledValue, defaultValue, onValueChange, collapsible, }: Pick<AccordionProps, "type" | "value" | "defaultValue" | "onValueChange" | "collapsible">) => {
+    expandedItems: string[];
+    toggleItem: (itemValue: string) => void;
+    isItemExpanded: (itemValue: string) => boolean;
+    type: import("./Accordion.type").AccordionType;
+    collapsible: boolean;
+    baseId: string;
+};

package/dist/native/components/Accordion/Accordion/Accordion.state.js

@@ -0,0 +1,83 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { generateId } from '../../../utils/id';
+// This file defines the 'useAccordionState' hook, which centralizes all state management and core logic for the Accordion component, handling item expansion, value changes, and controlled/uncontrolled modes.
+export const useAccordionState = ({ type = 'single', value: controlledValue, defaultValue, onValueChange, collapsible = false, }) => {
+    const isControlled = controlledValue !== undefined;
+    const initialValue = controlledValue ?? defaultValue;
+    const getValidInitialValue = () => {
+        if (type === 'multiple') {
+            return Array.isArray(initialValue)
+                ? initialValue
+                : initialValue
+                    ? [initialValue]
+                    : [];
+        }
+        return Array.isArray(initialValue) ? initialValue[0] : initialValue;
+    };
+    const [internalValue, setInternalValue] = useState(getValidInitialValue());
+    const baseId = useMemo(() => generateId('accordion'), []);
+    const selectedValue = isControlled ? controlledValue : internalValue;
+    const expandedItems = useMemo(() => {
+        if (selectedValue === undefined)
+            return [];
+        return Array.isArray(selectedValue) ? selectedValue : [selectedValue];
+    }, [selectedValue]);
+    useEffect(() => {
+        if (isControlled) {
+            if (type === 'multiple' && !Array.isArray(controlledValue)) {
+                console.warn(`Accordion with type="multiple" received non-array value:`, controlledValue);
+                setInternalValue(controlledValue ? [String(controlledValue)] : []);
+            }
+            else if (type === 'single' && Array.isArray(controlledValue)) {
+                console.warn(`Accordion with type="single" received array value:`, controlledValue);
+                setInternalValue(controlledValue.length > 0 ? controlledValue[0] : undefined);
+            }
+            else {
+                setInternalValue(controlledValue);
+            }
+        }
+    }, [controlledValue, isControlled, type]);
+    const toggleItem = useCallback((itemValue) => {
+        let newValue;
+        if (type === 'single') {
+            if (selectedValue === itemValue && collapsible) {
+                newValue = undefined;
+            }
+            else if (selectedValue !== itemValue) {
+                newValue = itemValue;
+            }
+            else {
+                newValue = selectedValue;
+            }
+        }
+        else {
+            const currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+            if (currentValues.includes(itemValue)) {
+                newValue = currentValues.filter((v) => v !== itemValue);
+            }
+            else {
+                newValue = [...currentValues, itemValue];
+            }
+            if (Array.isArray(newValue) && newValue.length === 0)
+                newValue = [];
+        }
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        if (onValueChange) {
+            onValueChange(newValue);
+        }
+    }, [type, selectedValue, collapsible, isControlled, onValueChange]);
+    const isItemExpanded = useCallback((itemValue) => {
+        return expandedItems.includes(itemValue);
+    }, [expandedItems]);
+    return {
+        expandedItems,
+        toggleItem,
+        isItemExpanded,
+        type,
+        collapsible,
+        baseId,
+    };
+};
+//# sourceMappingURL=Accordion.state.js.map

package/dist/native/components/Accordion/Accordion/Accordion.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.state.js","sourceRoot":"","sources":["../../../../../src/components/Accordion/Accordion/Accordion.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,gNAAgN;AAChN,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,GAAG,QAAQ,EACf,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,aAAa,EACb,WAAW,GAAG,KAAK,GAIpB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,eAAe,KAAK,SAAS,CAAC;IACnD,MAAM,YAAY,GAAG,eAAe,IAAI,YAAY,CAAC;IACrD,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YACxB,OAAO,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;gBAChC,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,CAAC,YAAY,CAAC;oBAChB,CAAC,CAAC,EAAE,CAAC;QACT,CAAC;QACD,OAAO,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;IACtE,CAAC,CAAC;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAEhD,oBAAoB,EAAE,CAAC,CAAC;IAC1B,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;IACrE,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,aAAa,KAAK,SAAS;YAAE,OAAO,EAAE,CAAC;QAC3C,OAAO,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,IAAI,KAAK,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;gBAC3D,OAAO,CAAC,IAAI,CACV,0DAA0D,EAC1D,eAAe,CAChB,CAAC;gBACF,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACrE,CAAC;iBAAM,IAAI,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;gBAC/D,OAAO,CAAC,IAAI,CACV,oDAAoD,EACpD,eAAe,CAChB,CAAC;gBACF,gBAAgB,CACd,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAC5D,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,gBAAgB,CAAC,eAAe,CAAC,CAAC;YACpC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,SAAiB,EAAE,EAAE;QACpB,IAAI,QAAuC,CAAC;QAC5C,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,IAAI,aAAa,KAAK,SAAS,IAAI,WAAW,EAAE,CAAC;gBAC/C,QAAQ,GAAG,SAAS,CAAC;YACvB,CAAC;iBAAM,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;gBACvC,QAAQ,GAAG,SAAS,CAAC;YACvB,CAAC;iBAAM,CAAC;gBACN,QAAQ,GAAG,aAAa,CAAC;YAC3B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;YACxE,IAAI,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;gBACtC,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;YAC1D,CAAC;iBAAM,CAAC;gBACN,QAAQ,GAAG,CAAC,GAAG,aAAa,EAAE,SAAS,CAAC,CAAC;YAC3C,CAAC;YACD,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;gBAAE,QAAQ,GAAG,EAAE,CAAC;QACtE,CAAC;QACD,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC7B,CAAC;QACD,IAAI,aAAa,EAAE,CAAC;YAClB,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EACD,CAAC,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,CAAC,CAChE,CAAC;IACF,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,SAAiB,EAAE,EAAE;QACpB,OAAO,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC3C,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IACF,OAAO;QACL,aAAa;QACb,UAAU;QACV,cAAc;QACd,IAAI;QACJ,WAAW;QACX,MAAM;KACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/native/components/Accordion/Accordion/Accordion.style.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'app-studio';
+import { Shape, Variant } from './Accordion.type';
+export declare const AccordionShapes: Record<Shape, ViewProps>;
+export declare const AccordionVariants: Record<Variant, ViewProps>;
+export declare const AccordionTriggerStyles: ViewProps;
+export declare const AccordionContentStyles: ViewProps;

package/dist/native/components/Accordion/Accordion/Accordion.style.js

@@ -0,0 +1,54 @@
+// Defines styling for different accordion shapes, mapping shape types to specific border radius properties.
+export const AccordionShapes = {
+    // Style for the 'square' shape, setting a border radius of 0.
+    square: { borderRadius: 0 },
+    // Style for the 'rounded' shape, applying a border radius of 8 pixels.
+    rounded: { borderRadius: 8 },
+};
+// Defines styling variations for the accordion component, mapping variant types to specific background, border, and transition properties.
+export const AccordionVariants = {
+    // Styles for the default variant, featuring a transparent background and no border.
+    default: {
+        borderWidth: 0,
+        style: { backgroundColor: 'transparent' },
+        transition: 'background-color 0.15s ease',
+    },
+    // Styles for the outline variant, including a border, border color, and hover effects.
+    outline: {
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: 'color-gray-200',
+        transition: 'border-color 0.15s ease, background-color 0.15s ease',
+        _hover: {
+            borderColor: 'color-gray-300',
+        },
+    },
+    // Styles for the filled variant, providing a background color and hover effects.
+    filled: {
+        backgroundColor: 'color-gray-50',
+        transition: 'background-color 0.15s ease',
+        _hover: {
+            backgroundColor: 'color-gray-100',
+        },
+    },
+};
+// Defines styles for the accordion trigger element, including transition effects for hover and focus states.
+export const AccordionTriggerStyles = {
+    transition: 'background-color 0.15s ease, color 0.15s ease',
+    _hover: {
+        backgroundColor: 'color-gray-50',
+    },
+    _focus: {
+        outline: 'none',
+        backgroundColor: 'color-gray-100',
+    },
+    _focusVisible: {
+        outline: 'none',
+        boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(0, 0, 0, 0.1)',
+    },
+};
+// Defines styles for the accordion content area, primarily handling transition effects for height and opacity during expansion/collapse.
+export const AccordionContentStyles = {
+    transition: 'height 0.2s ease, opacity 0.2s ease',
+};
+//# sourceMappingURL=Accordion.style.js.map

package/dist/native/components/Accordion/Accordion/Accordion.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.style.js","sourceRoot":"","sources":["../../../../../src/components/Accordion/Accordion/Accordion.style.ts"],"names":[],"mappings":"AAEA,4GAA4G;AAC5G,MAAM,CAAC,MAAM,eAAe,GAA6B;IACvD,8DAA8D;IAC9D,MAAM,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE;IAC3B,uEAAuE;IACvE,OAAO,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE;CAC7B,CAAC;AACF,2IAA2I;AAC3I,MAAM,CAAC,MAAM,iBAAiB,GAA+B;IAC3D,oFAAoF;IACpF,OAAO,EAAE;QACP,WAAW,EAAE,CAAC;QACd,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE;QACzC,UAAU,EAAE,6BAA6B;KAC1C;IACD,uFAAuF;IACvF,OAAO,EAAE;QACP,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,gBAAgB;QAC7B,UAAU,EAAE,sDAAsD;QAClE,MAAM,EAAE;YACN,WAAW,EAAE,gBAAgB;SAC9B;KACF;IACD,iFAAiF;IACjF,MAAM,EAAE;QACN,eAAe,EAAE,eAAe;QAChC,UAAU,EAAE,6BAA6B;QACzC,MAAM,EAAE;YACN,eAAe,EAAE,gBAAgB;SAClC;KACF;CACF,CAAC;AACF,6GAA6G;AAC7G,MAAM,CAAC,MAAM,sBAAsB,GAAc;IAC/C,UAAU,EAAE,+CAA+C;IAC3D,MAAM,EAAE;QACN,eAAe,EAAE,eAAe;KACjC;IACD,MAAM,EAAE;QACN,OAAO,EAAE,MAAM;QACf,eAAe,EAAE,gBAAgB;KAClC;IACD,aAAa,EAAE;QACb,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,gEAAgE;KAC5E;CACF,CAAC;AACF,yIAAyI;AACzI,MAAM,CAAC,MAAM,sBAAsB,GAAc;IAC/C,UAAU,EAAE,qCAAqC;CAClD,CAAC"}

package/dist/native/components/Accordion/Accordion/Accordion.type.d.ts

@@ -0,0 +1,20 @@
+import { ViewProps } from 'app-studio';
+export type Shape = 'square' | 'rounded';
+export type Variant = 'default' | 'outline' | 'filled';
+export type AccordionType = 'single' | 'multiple';
+export interface AccordionContextType {
+    expandedItems: string[];
+    toggleItem: (itemId: string) => void;
+    isItemExpanded: (itemId: string) => boolean;
+    type: AccordionType;
+    collapsible: boolean;
+    baseId: string;
+}
+export interface AccordionStyles {
+    container?: ViewProps;
+    item?: ViewProps;
+    header?: ViewProps;
+    trigger?: ViewProps;
+    content?: ViewProps;
+    icon?: ViewProps;
+}

package/dist/native/components/Accordion/Accordion/Accordion.type.js

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

package/dist/native/components/Accordion/Accordion/Accordion.type.js.map

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

package/dist/native/components/Accordion/Accordion/Accordion.view.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { AccordionContextType } from './Accordion.type';
+import { AccordionTriggerProps, AccordionContentProps, AccordionItemProps } from './Accordion.props';
+export declare const AccordionProvider: React.FC<{
+    children: React.ReactNode;
+    value: AccordionContextType;
+}>;
+export declare const useAccordionContext: () => AccordionContextType;
+export declare const AccordionItem: React.FC<AccordionItemProps>;
+export declare const AccordionTrigger: React.FC<AccordionTriggerProps & {
+    value?: string;
+    isExpanded?: boolean;
+    isDisabled?: boolean;
+    triggerId?: string;
+    contentId?: string;
+}>;
+export declare const AccordionContent: React.FC<AccordionContentProps & {
+    isExpanded?: boolean;
+    isDisabled?: boolean;
+    triggerId?: string;
+    contentId?: string;
+}>;
+export declare const AccordionView: React.FC<{
+    children: React.ReactNode;
+    shape?: 'square' | 'rounded';
+    variant?: 'default' | 'outline' | 'filled';
+    views?: any;
+    baseId: string;
+    type: 'single' | 'multiple';
+    collapsible: boolean;
+} & ViewProps>;

package/dist/native/components/Accordion/Accordion/Accordion.view.js

@@ -0,0 +1,156 @@
+import React, { createContext, useContext, Children, cloneElement, isValidElement, useEffect, useRef, useState, } from 'react';
+import { View, Horizontal, Vertical } from 'app-studio';
+import { AccordionShapes, AccordionVariants } from './Accordion.style';
+import { deepMerge, useDesignSystemComponentProps } from '../../../design-system';
+// Initializes the Accordion context with default values, providing a centralized store for managing accordion state and functionality across all related components.
+const AccordionContext = createContext({
+    expandedItems: [],
+    toggleItem: () => { },
+    isItemExpanded: () => false,
+    type: 'single',
+    collapsible: false,
+    baseId: '',
+});
+// The AccordionProvider component makes the Accordion context available to its children, encapsulating the state and logic for accordion behavior.
+export const AccordionProvider = ({ children, value }) => {
+    return (<AccordionContext.Provider value={value}>
+      {children}
+    </AccordionContext.Provider>);
+};
+export const useAccordionContext = () => {
+    const context = useContext(AccordionContext);
+    if (!context) {
+        throw new Error('useAccordionContext must be used within an AccordionProvider');
+    }
+    return context;
+};
+export const AccordionItem = ({ value, children, isDisabled = false, views, ...props }) => {
+    const { isItemExpanded, baseId } = useAccordionContext();
+    const designSystemAccordion = useDesignSystemComponentProps('accordion');
+    const mergedViews = deepMerge({
+        item: designSystemAccordion.views?.container,
+    }, views);
+    const isExpanded = isItemExpanded(value);
+    const triggerId = `${baseId}-trigger-${value}`;
+    const contentId = `${baseId}-content-${value}`;
+    return (<View borderWidth={1} borderStyle="solid" borderColor="color-gray-200" overflow="hidden" opacity={isDisabled ? 0.5 : 1} pointerEvents={isDisabled ? 'none' : 'auto'} data-state={isExpanded ? 'open' : 'closed'} data-disabled={isDisabled ? '' : undefined} {...mergedViews?.item} {...props}>
+      {React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    ...child.props,
+                    value,
+                    isExpanded,
+                    isDisabled,
+                    triggerId,
+                    contentId,
+                });
+            }
+            return child;
+        })}
+    </View>);
+};
+export const AccordionTrigger = ({ children, value, isExpanded, isDisabled, triggerId, contentId, views, asChild = false, ...props }) => {
+    const { toggleItem } = useAccordionContext();
+    const designSystemAccordion = useDesignSystemComponentProps('accordion');
+    const mergedViews = deepMerge({
+        container: designSystemAccordion.views?.trigger,
+    }, views);
+    const handleClick = () => {
+        if (value && !isDisabled) {
+            toggleItem(value);
+        }
+    };
+    const triggerProps = {
+        id: triggerId,
+        'aria-expanded': isExpanded,
+        'aria-controls': contentId,
+        'aria-disabled': isDisabled,
+        'data-state': isExpanded ? 'open' : 'closed',
+        'data-disabled': isDisabled ? '' : undefined,
+        onClick: handleClick,
+        padding: 16,
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        style: { backgroundColor: 'transparent' },
+        ...mergedViews?.container,
+        ...props,
+    };
+    if (asChild && isValidElement(children)) {
+        const child = Children.only(children);
+        return cloneElement(child, { ...triggerProps, ...child.props });
+    }
+    return (<Horizontal {...triggerProps}>
+      {children}
+      <View width={24} height={24} display="flex" alignItems="center" justifyContent="center" transition="transform 0.2s ease" transform={isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'} {...mergedViews?.icon}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z" fill="currentColor"/>
+        </svg>
+      </View>
+    </Horizontal>);
+};
+export const AccordionContent = ({ children, isExpanded, isDisabled, triggerId, contentId, views, ...props }) => {
+    const designSystemAccordion = useDesignSystemComponentProps('accordion');
+    const mergedViews = deepMerge({
+        container: designSystemAccordion.views?.content,
+    }, views);
+    const transitionMs = 260;
+    const contentRef = useRef(null);
+    const closeTimeoutRef = useRef(null);
+    const [shouldRender, setShouldRender] = useState(Boolean(isExpanded));
+    const [maxHeight, setMaxHeight] = useState(isExpanded ? 'none' : '0px');
+    const [opacity, setOpacity] = useState(isExpanded ? 1 : 0);
+    useEffect(() => {
+        return () => {
+            if (closeTimeoutRef.current) {
+                clearTimeout(closeTimeoutRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+        if (isExpanded) {
+            setShouldRender(true);
+            requestAnimationFrame(() => {
+                const nextHeight = contentRef.current?.scrollHeight ?? 0;
+                setMaxHeight(`${nextHeight}px`);
+                setOpacity(1);
+            });
+            return;
+        }
+        const currentHeight = contentRef.current?.scrollHeight ?? 0;
+        setMaxHeight(`${currentHeight}px`);
+        setOpacity(1);
+        requestAnimationFrame(() => {
+            setMaxHeight('0px');
+            setOpacity(0);
+        });
+        closeTimeoutRef.current = setTimeout(() => {
+            setShouldRender(false);
+        }, transitionMs);
+    }, [isExpanded, children]);
+    useEffect(() => {
+        if (!isExpanded || !shouldRender)
+            return;
+        const nextHeight = contentRef.current?.scrollHeight ?? 0;
+        setMaxHeight(`${nextHeight}px`);
+    }, [children, isExpanded, shouldRender]);
+    if (!shouldRender) {
+        return null;
+    }
+    return (<View id={contentId} role="region" aria-labelledby={triggerId} overflow="hidden" maxHeight={maxHeight} opacity={opacity} transition={`max-height ${transitionMs}ms cubic-bezier(0.22, 1, 0.36, 1), opacity ${transitionMs}ms ease`} data-state={isExpanded ? 'open' : 'closed'} data-disabled={isDisabled ? '' : undefined} style={{ backgroundColor: 'transparent' }} {...mergedViews?.container} {...props}>
+      <View ref={contentRef} padding={16}>
+        {children}
+      </View>
+    </View>);
+};
+export const AccordionView = ({ children, shape = 'rounded', variant = 'default', views, baseId, type, collapsible, themeMode: elementMode, ...props }) => {
+    return (<Vertical width="100%" data-orientation="vertical" {...AccordionShapes[shape]} {...AccordionVariants[variant]} {...views?.container} {...props}>
+      {children}
+    </Vertical>);
+};
+//# sourceMappingURL=Accordion.view.js.map

package/dist/native/components/Accordion/Accordion/Accordion.view.js.map

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

package/dist/native/components/Accordion/Accordion/Accordion.view.native.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { AccordionContextType } from './Accordion.type';
+import { AccordionTriggerProps, AccordionContentProps, AccordionItemProps } from './Accordion.props';
+export declare const AccordionProvider: React.FC<{
+    children: React.ReactNode;
+    value: AccordionContextType;
+}>;
+export declare const useAccordionContext: () => AccordionContextType;
+export declare const AccordionItem: React.FC<AccordionItemProps>;
+export declare const AccordionTrigger: React.FC<AccordionTriggerProps & {
+    value?: string;
+    isExpanded?: boolean;
+    isDisabled?: boolean;
+    triggerId?: string;
+    contentId?: string;
+}>;
+export declare const AccordionContent: React.FC<AccordionContentProps & {
+    isExpanded?: boolean;
+    isDisabled?: boolean;
+    triggerId?: string;
+    contentId?: string;
+}>;
+export declare const AccordionView: React.FC<{
+    children: React.ReactNode;
+    shape?: 'square' | 'rounded';
+    variant?: 'default' | 'outline' | 'filled';
+    views?: any;
+    baseId: string;
+    type: 'single' | 'multiple';
+    collapsible: boolean;
+} & ViewProps>;

package/dist/native/components/Accordion/Accordion/Accordion.view.native.js

@@ -0,0 +1,100 @@
+import React, { createContext, useContext, Children, cloneElement, isValidElement, } from 'react';
+import { View, Horizontal, Vertical } from 'app-studio';
+import { ChevronIcon } from '../../Icon/Icon';
+import { AccordionShapes, AccordionVariants } from './Accordion.style';
+import { deepMerge, useDesignSystemComponentProps } from '../../../design-system';
+const AccordionContext = createContext({
+    expandedItems: [],
+    toggleItem: () => { },
+    isItemExpanded: () => false,
+    type: 'single',
+    collapsible: false,
+    baseId: '',
+});
+export const AccordionProvider = ({ children, value }) => {
+    return (<AccordionContext.Provider value={value}>
+      {children}
+    </AccordionContext.Provider>);
+};
+export const useAccordionContext = () => {
+    const context = useContext(AccordionContext);
+    if (!context) {
+        throw new Error('useAccordionContext must be used within an AccordionProvider');
+    }
+    return context;
+};
+export const AccordionItem = ({ value, children, isDisabled = false, views, ...props }) => {
+    const { isItemExpanded, baseId } = useAccordionContext();
+    const designSystemAccordion = useDesignSystemComponentProps('accordion');
+    const mergedViews = deepMerge({
+        item: designSystemAccordion.views?.container,
+    }, views);
+    const isExpanded = isItemExpanded(value);
+    const triggerId = `${baseId}-trigger-${value}`;
+    const contentId = `${baseId}-content-${value}`;
+    return (<View borderWidth={1} borderStyle="solid" borderColor="color-gray-200" overflow="hidden" opacity={isDisabled ? 0.5 : 1} {...mergedViews?.item} {...props}>
+      {React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    ...child.props,
+                    value,
+                    isExpanded,
+                    isDisabled,
+                    triggerId,
+                    contentId,
+                });
+            }
+            return child;
+        })}
+    </View>);
+};
+export const AccordionTrigger = ({ children, value, isExpanded, isDisabled, triggerId, contentId, views, asChild = false, ...props }) => {
+    const { toggleItem } = useAccordionContext();
+    const designSystemAccordion = useDesignSystemComponentProps('accordion');
+    const mergedViews = deepMerge({
+        container: designSystemAccordion.views?.trigger,
+    }, views);
+    const handlePress = () => {
+        if (value && !isDisabled) {
+            toggleItem(value);
+        }
+    };
+    const triggerProps = {
+        onPress: handlePress,
+        onClick: handlePress,
+        padding: 16,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        ...mergedViews?.container,
+        ...props,
+    };
+    if (asChild && isValidElement(children)) {
+        const child = Children.only(children);
+        return cloneElement(child, { ...triggerProps, ...child.props });
+    }
+    return (<Horizontal {...triggerProps}>
+      {children}
+      <View width={24} height={24} alignItems="center" justifyContent="center" {...mergedViews?.icon}>
+        <ChevronIcon widthHeight={16} orientation={isExpanded ? 'up' : 'down'}/>
+      </View>
+    </Horizontal>);
+};
+export const AccordionContent = ({ children, isExpanded, isDisabled, triggerId, contentId, views, ...props }) => {
+    const designSystemAccordion = useDesignSystemComponentProps('accordion');
+    const mergedViews = deepMerge({
+        container: designSystemAccordion.views?.content,
+    }, views);
+    if (!isExpanded) {
+        return null;
+    }
+    return (<View overflow="hidden" {...mergedViews?.container} {...props}>
+      <View padding={16}>{children}</View>
+    </View>);
+};
+export const AccordionView = ({ children, shape = 'rounded', variant = 'default', views, baseId, type, collapsible, themeMode: elementMode, ...props }) => {
+    return (<Vertical width="100%" {...AccordionShapes[shape]} {...AccordionVariants[variant]} {...views?.container} {...props}>
+      {children}
+    </Vertical>);
+};
+//# sourceMappingURL=Accordion.view.native.js.map

package/dist/native/components/Accordion/Accordion/Accordion.view.native.js.map

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

package/dist/native/components/Accordion/Accordion.d.ts

@@ -0,0 +1,2 @@
+import { AccordionComponentType } from './Accordion/Accordion.props';
+export declare const Accordion: AccordionComponentType;