@app-studio/components 0.10.17

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

@@ -0,0 +1,17 @@
+import { InputProps } from 'app-studio';
+import { Shape, Variant } from './Toggle.type';
+export interface ToggleProps extends Omit<InputProps, 'size' | 'onToggle'> {
+    shape?: Shape;
+    isToggled?: boolean;
+    isDisabled?: boolean;
+    children: React.ReactNode;
+    variant?: Variant;
+    onToggle?: (isToggled: boolean) => void;
+    views?: any;
+}
+export interface ToggleViewProps extends Omit<ToggleProps, never> {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isToggle: boolean;
+    setIsToggled: React.Dispatch<React.SetStateAction<boolean>>;
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+export declare const useToggleState: (defaultToggled: boolean) => {
+    isHovered: boolean;
+    setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    isToggle: boolean;
+    setIsToggled: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

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

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+// Declares the useToggleState function which takes defaultToggled parameter to initialize the toggle state.
+export const useToggleState = (defaultToggled) => {
+    // Creates a stateful value isHovered for tracking hover state and a function setIsHovered to update that state, initially false.
+    const [isHovered, setIsHovered] = useState(false);
+    // Creates a stateful value isToggle to store the current toggle state and a function setIsToggled to modify it, initialized with defaultToggled.
+    const [isToggle, setIsToggled] = useState(defaultToggled);
+    // Returns an object containing the current states and the functions to update them for external use.
+    return { isHovered, setIsHovered, isToggle, setIsToggled };
+};
+//# sourceMappingURL=Toggle.state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.state.js","sourceRoot":"","sources":["../../../../../src/components/Toggle/Toggle/Toggle.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,4GAA4G;AAC5G,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,cAAuB,EAAE,EAAE;IACxD,iIAAiI;IACjI,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,iJAAiJ;IACjJ,MAAM,CAAC,QAAQ,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC1D,qGAAqG;IACrG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC7D,CAAC,CAAC"}

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

@@ -0,0 +1,8 @@
+import { ViewProps } from 'app-studio';
+import { Shape, Variant } from './Toggle.type';
+export declare const ToggleShapes: Record<Shape, number | string>;
+/**
+ * Generate toggle variants with proper color combinations based on main color and contrast
+ * Similar to Button's getButtonVariants function
+ */
+export declare const getToggleVariants: (color: string, isLight: boolean) => Record<Variant, ViewProps>;

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

@@ -0,0 +1,58 @@
+export const ToggleShapes = {
+    square: 0,
+    rounded: 8,
+    pill: 999,
+};
+/**
+ * Generate toggle variants with proper color combinations based on main color and contrast
+ * Similar to Button's getButtonVariants function
+ */
+export const getToggleVariants = (color, isLight) => ({
+    outline: {
+        backgroundColor: isLight ? 'color-white' : 'color-gray-900',
+        color: color,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: isLight ? 'color-gray-200' : 'color-gray-600',
+        _hover: {
+            backgroundColor: isLight ? 'color-gray-50' : 'color-gray-800',
+            borderColor: isLight ? 'color-gray-300' : 'color-gray-500',
+        },
+        _active: {
+            backgroundColor: isLight ? 'color-gray-100' : 'color-gray-800',
+        },
+        transition: 'background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease',
+    },
+    ghost: {
+        backgroundColor: 'transparent',
+        color: color,
+        borderWidth: 0,
+        borderStyle: 'none',
+        borderColor: 'transparent',
+        _hover: {
+            backgroundColor: isLight ? 'color-gray-50' : 'color-gray-800',
+        },
+        _active: {
+            backgroundColor: isLight ? 'color-gray-100' : 'color-gray-800',
+        },
+        transition: 'background-color 0.2s ease, color 0.2s ease',
+    },
+    link: {
+        backgroundColor: 'transparent',
+        color: color,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: 'transparent',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px',
+        _hover: {
+            opacity: 0.8,
+        },
+        _active: {
+            opacity: 0.9,
+        },
+        transition: 'opacity 0.2s ease',
+    },
+});
+//# sourceMappingURL=Toggle.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.style.js","sourceRoot":"","sources":["../../../../../src/components/Toggle/Toggle/Toggle.style.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,YAAY,GAAmC;IAC1D,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,GAAG;CACV,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAa,EACb,OAAgB,EACY,EAAE,CAAC,CAAC;IAChC,OAAO,EAAE;QACP,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB;QAC3D,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;QAC1D,MAAM,EAAE;YACN,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB;YAC7D,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;SAC3D;QACD,OAAO,EAAE;YACP,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;SAC/D;QACD,UAAU,EACR,qEAAqE;KACxE;IACD,KAAK,EAAE;QACL,eAAe,EAAE,aAAa;QAC9B,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,MAAM;QACnB,WAAW,EAAE,aAAa;QAC1B,MAAM,EAAE;YACN,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB;SAC9D;QACD,OAAO,EAAE;YACP,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;SAC/D;QACD,UAAU,EAAE,6CAA6C;KAC1D;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,aAAa;QAC9B,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,aAAa;QAC1B,cAAc,EAAE,WAAW;QAC3B,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,KAAK;QAC9B,MAAM,EAAE;YACN,OAAO,EAAE,GAAG;SACb;QACD,OAAO,EAAE;YACP,OAAO,EAAE,GAAG;SACb;QACD,UAAU,EAAE,mBAAmB;KAChC;CACF,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+export type Shape = 'square' | 'rounded' | 'pill';
+export type Variant = 'outline' | 'link' | 'ghost';

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

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

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { ToggleViewProps } from './Toggle.props';
+interface Props extends ToggleViewProps {
+    views?: {
+        container?: ViewProps;
+    };
+    backgroundColor?: string;
+    color?: string;
+}
+declare const ToggleView: React.FC<Props>;
+export default ToggleView;

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

@@ -0,0 +1,52 @@
+import React, { useCallback, useMemo } from 'react';
+import { Center, useTheme } from 'app-studio';
+import { ToggleShapes, getToggleVariants } from './Toggle.style';
+const ToggleView = React.memo(({ children, shape = 'rounded', variant = 'ghost', isHovered, setIsHovered, isDisabled, isToggle, setIsToggled, onToggle, views, backgroundColor, // primary candidate for main color
+color, // 2nd candidate for main color
+themeMode: elementMode, ...props }) => {
+    /* theme helpers */
+    const { getColor, themeMode } = useTheme();
+    const mode = elementMode ?? themeMode;
+    /* MAIN COLOR – determines the entire palette */
+    const mainColorKey = backgroundColor ?? color ?? 'theme-primary';
+    const mainTone = getColor(isDisabled ? 'theme-disabled' : mainColorKey, {
+        themeMode: mode,
+    });
+    /* variant palette (memoized to avoid recreation on every render) */
+    const palette = useMemo(() => getToggleVariants(mainTone, mode === 'light'), [mainTone, mode]);
+    const base = palette[variant];
+    const isActive = !!isToggle;
+    const handleHover = useCallback(() => setIsHovered(true), [setIsHovered]);
+    const handleToggle = useCallback(() => {
+        if (!isDisabled) {
+            setIsToggled((prev) => {
+                const newState = !prev;
+                if (onToggle) {
+                    onToggle(newState);
+                }
+                return newState;
+            });
+        }
+    }, [isDisabled, setIsToggled, onToggle]);
+    return (<Center role="Toggle" padding={shape === 'pill' ? '8px 12px' : '8px'} width="fit-content" cursor={isDisabled ? 'not-allowed' : 'pointer'} borderRadius={ToggleShapes[shape]} onClick={handleToggle} onMouseEnter={handleHover} onMouseLeave={() => setIsHovered(false)} 
+    /* Apply base variant styles */
+    {...base} 
+    /* Override with active state if toggled */
+    {...(isActive && {
+        ...(variant === 'link'
+            ? {
+                backgroundColor: 'transparent',
+            }
+            : {
+                backgroundColor: mode === 'light' ? 'color-blue-50' : 'color-blue-100',
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: mode === 'light' ? 'color-blue-200' : mainTone,
+            }),
+        color: mainTone,
+    })} {...props} {...views?.container}>
+        {children}
+      </Center>);
+});
+export default ToggleView;
+//# sourceMappingURL=Toggle.view.js.map

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { ToggleViewProps } from './Toggle.props';
+interface Props extends ToggleViewProps {
+    views?: {
+        container?: ViewProps;
+    };
+    backgroundColor?: string;
+    color?: string;
+}
+declare const ToggleView: React.FC<Props>;
+export default ToggleView;

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

@@ -0,0 +1,37 @@
+import React, { useCallback, useMemo } from 'react';
+import { Center, useTheme } from 'app-studio';
+import { ToggleShapes, getToggleVariants } from './Toggle.style';
+const ToggleView = React.memo(({ children, shape = 'rounded', variant = 'ghost', isHovered, setIsHovered, isDisabled, isToggle, setIsToggled, onToggle, views, backgroundColor, color, themeMode: elementMode, ...props }) => {
+    const { getColor, themeMode } = useTheme();
+    const mode = elementMode ?? themeMode;
+    const mainColorKey = backgroundColor ?? color ?? 'theme-primary';
+    const mainTone = getColor(isDisabled ? 'theme-disabled' : mainColorKey, { themeMode: mode });
+    const palette = useMemo(() => getToggleVariants(mainTone, mode === 'light'), [mainTone, mode]);
+    const base = palette[variant];
+    const isActive = !!isToggle;
+    const handleToggle = useCallback(() => {
+        if (!isDisabled) {
+            setIsToggled((prev) => {
+                const newState = !prev;
+                if (onToggle)
+                    onToggle(newState);
+                return newState;
+            });
+        }
+    }, [isDisabled, setIsToggled, onToggle]);
+    return (<Center padding={shape === 'pill' ? 12 : 8} borderRadius={ToggleShapes[shape]} onPress={handleToggle} onClick={handleToggle} {...base} {...(isActive && {
+        ...(variant === 'link'
+            ? { backgroundColor: 'transparent' }
+            : {
+                backgroundColor: mode === 'light' ? 'color-blue-50' : 'color-blue-100',
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: mode === 'light' ? 'color-blue-200' : mainTone,
+            }),
+        color: mainTone,
+    })} {...props} {...views?.container}>
+        {children}
+      </Center>);
+});
+export default ToggleView;
+//# sourceMappingURL=Toggle.view.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.view.native.js","sourceRoot":"","sources":["../../../../../src/components/Toggle/Toggle/Toggle.view.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAa,MAAM,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAQjE,MAAM,UAAU,GAAoB,KAAK,CAAC,IAAI,CAC5C,CAAC,EACC,QAAQ,EACR,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,OAAO,EACjB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,eAAe,EACf,KAAK,EACL,SAAS,EAAE,WAAW,EACtB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,SAAS,CAAC;IACtC,MAAM,YAAY,GAAG,eAAe,IAAI,KAAK,IAAI,eAAe,CAAC;IACjE,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7F,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,QAAQ,EAAE,IAAI,KAAK,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IAC/F,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC;IAC5B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE;gBACpB,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC;gBACvB,IAAI,QAAQ;oBAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;gBACjC,OAAO,QAAQ,CAAC;YAClB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IACzC,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CACnC,YAAY,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAClC,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,IAAI,IAAI,CAAC,CACT,IAAI,CAAC,QAAQ,IAAI;QACf,GAAG,CAAC,OAAO,KAAK,MAAM;YACpB,CAAC,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE;YACpC,CAAC,CAAC;gBACE,eAAe,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB;gBACtE,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,OAAO;gBACpB,WAAW,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ;aAC5D,CAAC;QACN,KAAK,EAAE,QAAQ;KAChB,CAAC,CAAC,CACH,IAAI,KAAK,CAAC,CACV,IAAI,KAAK,EAAE,SAAS,CAAC,CAErB;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ToggleProps } from './Toggle/Toggle.props';
+export declare const Toggle: ({ children, shape, variant, isDisabled, isToggled, onToggle, ...props }: ToggleProps) => React.JSX.Element;

package/dist/native/components/Toggle/Toggle.js

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+import { useToggleState } from './Toggle/Toggle.state';
+import ToggleView from './Toggle/Toggle.view';
+// Destructuring properties from ToggleProps to be used within the ToggleComponent.
+const ToggleComponent = ({ children, shape, variant, isDisabled, 
+// Assigning a default value of false to the isToggled property if none is provided.
+isToggled = false, onToggle, ...props }) => {
+    // Initializing toggle state and set state functions using the custom hook useToggleState.
+    const { isHovered, setIsHovered, isToggle, setIsToggled } = useToggleState(isToggled);
+    // Creating an effect that updates the isToggled state whenever the isToggled prop changes.
+    useEffect(() => {
+        setIsToggled(isToggled);
+    }, [isToggled]);
+    // Beginning of the JSX block to render the Toggle view component.
+    return (<ToggleView shape={shape} variant={variant} isDisabled={isDisabled} isHovered={isHovered} setIsHovered={setIsHovered} isToggle={isToggle} setIsToggled={setIsToggled} onToggle={onToggle} {...props}>
+      {children}
+    </ToggleView>);
+};
+export const Toggle = ToggleComponent;
+//# sourceMappingURL=Toggle.js.map

package/dist/native/components/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,mFAAmF;AACnF,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,OAAO,EACP,UAAU;AACV,oFAAoF;AACpF,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,GAAG,KAAK,EACI,EAAE,EAAE;IAChB,0FAA0F;IAC1F,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,GACvD,cAAc,CAAC,SAAS,CAAC,CAAC;IAC5B,2FAA2F;IAC3F,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAChB,kEAAkE;IAClE,OAAO,CACL,CAAC,UAAU,CACT,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC"}

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

@@ -0,0 +1,19 @@
+export interface ToggleGroupProps {
+}
+import { InputProps, ViewProps } from 'app-studio';
+import { Shape, ToggleItem, Variant } from './ToggleGroup.type';
+export interface ToggleGroupProps extends Omit<InputProps, 'size'> {
+    shape?: Shape;
+    items: ToggleItem[];
+    variant?: Variant;
+    onToggleChange?: (activeIds: string[]) => void;
+    views?: any;
+}
+export interface ToggleGroupViewProps extends Omit<ToggleGroupProps, ''> {
+    activeToggles: string[];
+    setActiveToggles: React.Dispatch<React.SetStateAction<string[]>>;
+    views?: {
+        container?: ViewProps;
+        toggle?: ViewProps;
+    };
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const useToggleGroupState: () => {
+    activeToggles: string[];
+    setActiveToggles: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+};

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

@@ -0,0 +1,7 @@
+import { useState } from 'react';
+// Define a custom hook for managing ToggleGroup state
+export const useToggleGroupState = () => {
+    const [activeToggles, setActiveToggles] = useState([]);
+    return { activeToggles, setActiveToggles };
+};
+//# sourceMappingURL=ToggleGroup.state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.state.js","sourceRoot":"","sources":["../../../../../src/components/ToggleGroup/ToggleGroup/ToggleGroup.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,sDAAsD;AACtD,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACjE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC;AAC7C,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Shape } from './ToggleGroup.type';
+export declare const ToggleGroupShapes: Record<Shape, number | string>;

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

@@ -0,0 +1,6 @@
+export const ToggleGroupShapes = {
+    square: 0,
+    rounded: 8,
+    pill: 999,
+};
+//# sourceMappingURL=ToggleGroup.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.style.js","sourceRoot":"","sources":["../../../../../src/components/ToggleGroup/ToggleGroup/ToggleGroup.style.tsx"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,iBAAiB,GAAmC;IAC/D,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,GAAG;CACV,CAAC"}

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

@@ -0,0 +1,9 @@
+export type Shape = 'square' | 'rounded' | 'pill';
+export type Variant = 'outline' | 'link' | 'ghost';
+export type ToggleItem = {
+    id: string;
+    value: React.ReactNode;
+    state?: boolean;
+    isDisabled?: boolean;
+    isActive?: boolean;
+};

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

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

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

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ToggleGroupViewProps } from './ToggleGroup.props';
+export declare const ToggleGroupView: ({ items, onToggleChange, activeToggles, setActiveToggles, shape, variant, views, }: ToggleGroupViewProps) => React.JSX.Element;

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

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import { Horizontal } from 'app-studio';
+import { Toggle } from '../../Toggle/Toggle';
+// ToggleGroupView component declaration with destructured properties from props.
+export const ToggleGroupView = ({ 
+// Prop 'items' defines the list of toggle elements to be rendered.
+items, 
+// Prop 'onToggleChange' is a callback function triggered when the toggle state changes.
+onToggleChange, 
+// Prop 'activeToggles' holds the array of active toggle identifiers.
+activeToggles, 
+// Prop 'setActiveToggles' is a function to update the active toggle states.
+setActiveToggles, 
+// Prop 'shape' with default value 'rounded', determines the shape of the toggle buttons.
+shape = 'rounded', 
+// Prop 'variant' with default value 'ghost' represents the visual style variant of the toggles.
+variant = 'ghost', views, }) => {
+    // handleToggle is a memoized callback that handles the toggle state changes.
+    const handleToggle = useCallback((id, isActive) => {
+        setActiveToggles((prevActiveToggles) => {
+            let newActiveToggles;
+            if (isActive) {
+                newActiveToggles = prevActiveToggles.includes(id)
+                    ? prevActiveToggles
+                    : [...prevActiveToggles, id];
+            }
+            else {
+                newActiveToggles = prevActiveToggles.filter((toggleId) => toggleId !== id);
+            }
+            onToggleChange?.(newActiveToggles);
+            return newActiveToggles;
+        });
+    }, [onToggleChange, setActiveToggles]);
+    return (<Horizontal role="ToggleGroup" display="flex" gap={8} flexWrap="wrap" {...views?.container}>
+      {items.map((item) => (<Toggle role={`toggle-${item.id}`} key={item.id} shape={shape} variant={variant} isToggled={activeToggles.includes(item.id) || item.isActive} onToggle={(state) => handleToggle(item.id, state)} isDisabled={item.isDisabled} views={views?.toggle}>
+          {item.value}
+        </Toggle>))}
+    </Horizontal>);
+};
+//# sourceMappingURL=ToggleGroup.view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.view.js","sourceRoot":"","sources":["../../../../../src/components/ToggleGroup/ToggleGroup/ToggleGroup.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,iFAAiF;AACjF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC;AAC9B,mEAAmE;AACnE,KAAK;AACL,wFAAwF;AACxF,cAAc;AACd,qEAAqE;AACrE,aAAa;AACb,4EAA4E;AAC5E,gBAAgB;AAChB,yFAAyF;AACzF,KAAK,GAAG,SAAS;AACjB,gGAAgG;AAChG,OAAO,GAAG,OAAO,EACjB,KAAK,GACgB,EAAE,EAAE;IACzB,6EAA6E;IAC7E,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,EAAU,EAAE,QAAiB,EAAE,EAAE;QAChC,gBAAgB,CAAC,CAAC,iBAAiB,EAAE,EAAE;YACrC,IAAI,gBAAgB,CAAC;YACrB,IAAI,QAAQ,EAAE,CAAC;gBACb,gBAAgB,GAAG,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC/C,CAAC,CAAC,iBAAiB;oBACnB,CAAC,CAAC,CAAC,GAAG,iBAAiB,EAAE,EAAE,CAAC,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACN,gBAAgB,GAAG,iBAAiB,CAAC,MAAM,CACzC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,KAAK,EAAE,CAC9B,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,CAAC,gBAAgB,CAAC,CAAC;YACnC,OAAO,gBAAgB,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACnC,CAAC;IACF,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,aAAa,CAClB,OAAO,CAAC,MAAM,CACd,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,QAAQ,CAAC,MAAM,CACf,IAAI,KAAK,EAAE,SAAS,CAAC,CAErB;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,CACxB,CAAC,MAAM,CACL,IAAI,CAAC,CAAC,UAAU,IAAI,CAAC,EAAE,EAAE,CAAC,CAC1B,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,SAAS,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAC5D,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAClD,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,KAAK,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAErB;UAAA,CAAC,IAAI,CAAC,KAAK,CACb;QAAA,EAAE,MAAM,CAAC,CACV,CAAC,CACJ;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ToggleGroupProps } from './ToggleGroup/ToggleGroup.props';
+export declare const ToggleGroup: ({ items, shape, variant, onToggleChange, }: ToggleGroupProps) => React.JSX.Element;

package/dist/native/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useToggleGroupState } from './ToggleGroup/ToggleGroup.state';
+import { ToggleGroupView } from './ToggleGroup/ToggleGroup.view';
+// Define the functional component with destructured props
+const ToggleGroupComponent = ({ 
+// Destructure 'items' prop which represents the group items to toggle
+items, 
+// Destructure 'shape' prop to define the shape of the toggle buttons
+shape, 
+// Destructure 'variant' prop to determine the visual style of the toggle group
+variant, 
+// Destructure 'onToggleChange' prop for the callback when toggle state changes
+onToggleChange, }) => {
+    // Hook to manage toggle group state, returns active toggles and a setter for it
+    const { activeToggles, setActiveToggles } = useToggleGroupState();
+    return (<ToggleGroupView items={items} shape={shape} variant={variant} activeToggles={activeToggles} setActiveToggles={setActiveToggles} onToggleChange={onToggleChange}/>);
+};
+// Expose the ToggleGroupComponent for import into other modules
+export const ToggleGroup = ToggleGroupComponent;
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/native/components/ToggleGroup/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../../../src/components/ToggleGroup/ToggleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,0DAA0D;AAC1D,MAAM,oBAAoB,GAAG,CAAC;AAC5B,sEAAsE;AACtE,KAAK;AACL,qEAAqE;AACrE,KAAK;AAEL,+EAA+E;AAC/E,OAAO;AACP,+EAA+E;AAC/E,cAAc,GACG,EAAE,EAAE;IACrB,gFAAgF;IAChF,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAClE,OAAO,CACL,CAAC,eAAe,CACd,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,cAAc,CAAC,CAAC,cAAc,CAAC,EAC/B,CACH,CAAC;AACJ,CAAC,CAAC;AACF,gEAAgE;AAChE,MAAM,CAAC,MAAM,WAAW,GAAG,oBAAoB,CAAC"}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { Position, Alignment, Size, Variant, TooltipStyles } from './Tooltip.type';
+export interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    position?: Position;
+    align?: Alignment;
+    size?: Size;
+    variant?: Variant;
+    openDelay?: number;
+    closeDelay?: number;
+    showArrow?: boolean;
+    defaultOpen?: boolean;
+    isDisabled?: boolean;
+    views?: TooltipStyles;
+    [key: string]: any;
+}
+export interface TooltipTriggerProps {
+    children: React.ReactNode;
+    views?: {
+        container?: ViewProps;
+    };
+    asChild?: boolean;
+    [key: string]: any;
+}
+export interface TooltipContentProps {
+    children: React.ReactNode;
+    views?: {
+        container?: ViewProps;
+        arrow?: ViewProps;
+    };
+    [key: string]: any;
+}
+export interface TooltipType extends React.FC<TooltipProps> {
+    Trigger: React.FC<TooltipTriggerProps>;
+    Content: React.FC<TooltipContentProps>;
+}

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

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

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

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

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

@@ -0,0 +1,17 @@
+interface TooltipStateProps {
+    defaultOpen?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+    isDisabled?: boolean;
+}
+export declare const useTooltipState: ({ defaultOpen, openDelay, closeDelay, isDisabled, }?: TooltipStateProps) => {
+    isOpen: boolean;
+    openTooltip: () => void;
+    closeTooltip: () => void;
+    cancelCloseTimer: () => void;
+    triggerRef: import("react").RefObject<HTMLElement | null>;
+    contentRef: import("react").RefObject<HTMLElement | null>;
+    triggerId: string;
+    contentId: string;
+};
+export {};

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

@@ -0,0 +1,76 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { generateId } from '../../../utils/generateId';
+// This file provides the `useTooltipState` custom hook, which encapsulates all the state management and logic for the Tooltip component, including open/close state, timers for delayed appearance/disappearance, accessibility IDs, and keyboard event handling for interaction.
+export const useTooltipState = ({ defaultOpen = false, openDelay = 200, closeDelay = 200, isDisabled = false, } = {}) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const openTimerRef = useRef(null);
+    const closeTimerRef = useRef(null);
+    const triggerId = useRef(`tooltip-trigger-${generateId()}`).current;
+    const contentId = useRef(`tooltip-content-${generateId()}`).current;
+    const openTooltip = useCallback(() => {
+        if (isDisabled)
+            return;
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+        if (!isOpen && !openTimerRef.current) {
+            openTimerRef.current = setTimeout(() => {
+                setIsOpen(true);
+                openTimerRef.current = null;
+            }, openDelay);
+        }
+    }, [isOpen, openDelay, isDisabled]);
+    const closeTooltip = useCallback(() => {
+        if (openTimerRef.current) {
+            clearTimeout(openTimerRef.current);
+            openTimerRef.current = null;
+        }
+        if (isOpen && !closeTimerRef.current) {
+            closeTimerRef.current = setTimeout(() => {
+                setIsOpen(false);
+                closeTimerRef.current = null;
+            }, closeDelay);
+        }
+    }, [isOpen, closeDelay]);
+    const cancelCloseTimer = useCallback(() => {
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (openTimerRef.current) {
+                clearTimeout(openTimerRef.current);
+            }
+            if (closeTimerRef.current) {
+                clearTimeout(closeTimerRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape' && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+    return {
+        isOpen,
+        openTooltip,
+        closeTooltip,
+        cancelCloseTimer,
+        triggerRef,
+        contentRef,
+        triggerId,
+        contentId,
+    };
+};
+//# sourceMappingURL=Tooltip.state.js.map

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

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

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

@@ -0,0 +1,7 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant, Position, Alignment } from './Tooltip.type';
+export declare const TooltipSizes: Record<Size, ViewProps>;
+export declare const getTooltip: (themeMode: string) => Record<Variant, ViewProps>;
+export declare const TooltipVariants: Record<Variant, ViewProps>;
+export declare const getTooltipPositionStyles: (position: Position, align: Alignment) => ViewProps;
+export declare const getArrowStyles: (position: Position) => ViewProps;