@admin-layout/gluestack-ui-mobile 12.0.16-alpha.93 → 12.2.1-alpha.0

package/src/components/ui/accordion/index.web.tsx

@@ -1,294 +0,0 @@
-'use client';
-import React from 'react';
-import { createAccordion } from '@gluestack-ui/accordion';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { UIIcon } from '@gluestack-ui/icon';
-
-const SCOPE = 'ACCORDION';
-
-/** Styles */
-const accordionStyle = tva({
-    base: 'w-full',
-    variants: {
-        variant: {
-            filled: 'bg-white shadow-hard-2',
-            unfilled: '',
-        },
-        size: {
-            sm: '',
-            md: '',
-            lg: '',
-        },
-    },
-});
-
-const accordionItemStyle = tva({
-    base: '',
-    parentVariants: {
-        variant: {
-            filled: 'bg-background-0',
-            unfilled: 'bg-transparent',
-        },
-    },
-});
-
-const accordionTitleTextStyle = tva({
-    base: 'text-typography-900 font-bold flex-1 text-left',
-    parentVariants: {
-        size: {
-            sm: 'text-sm',
-            md: 'text-base',
-            lg: 'text-lg',
-        },
-    },
-});
-
-const accordionIconStyle = tva({
-    base: 'text-typography-900 fill-none',
-    parentVariants: {
-        size: {
-            '2xs': 'h-3 w-3',
-            xs: 'h-3.5 w-3.5',
-            sm: 'h-4 w-4',
-            md: 'h-[18px] w-[18px]',
-            lg: 'h-5 w-5',
-            xl: 'h-6 w-6',
-        },
-    },
-});
-
-const accordionContentTextStyle = tva({
-    base: 'text-typography-700 font-normal',
-    parentVariants: {
-        size: {
-            sm: 'text-sm',
-            md: 'text-base',
-            lg: 'text-lg',
-        },
-    },
-});
-
-const accordionHeaderStyle = tva({
-    base: 'mx-0 my-0',
-});
-
-const accordionContentStyle = tva({
-    base: 'pt-1 pb-3 px-4',
-});
-
-const accordionTriggerStyle = tva({
-    base: 'w-full flex-row justify-between items-center outline-none focus:outline-none data-[disabled=true]:opacity-40 data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:bg-background-50 py-3 px-4',
-});
-
-// Create web-specific components
-const RootComponent = withStyleContext('div' as any, SCOPE);
-const ItemComponent = React.forwardRef((props: any, ref) => <div {...props} ref={ref} />);
-const HeaderComponent = React.forwardRef((props: any, ref) => <h3 {...props} ref={ref} />);
-const TriggerComponent = React.forwardRef((props: any, ref) => <button {...props} ref={ref} />);
-const TitleTextComponent = React.forwardRef((props: any, ref) => <span {...props} ref={ref} />);
-const ContentTextComponent = React.forwardRef((props: any, ref) => <p {...props} ref={ref} />);
-const ContentComponent = React.forwardRef((props: any, ref) => <div {...props} ref={ref} />);
-
-/** Creator */
-const UIAccordion = createAccordion({
-    Root: RootComponent,
-    Item: ItemComponent,
-    Header: HeaderComponent,
-    Trigger: TriggerComponent,
-    Icon: UIIcon,
-    TitleText: TitleTextComponent,
-    ContentText: ContentTextComponent,
-    Content: ContentComponent,
-});
-
-type StyleContextType = {
-    variant?: 'filled' | 'unfilled';
-    size?: 'sm' | 'md' | 'lg';
-};
-
-type IAccordionProps = React.ComponentPropsWithoutRef<typeof UIAccordion> &
-    VariantProps<typeof accordionStyle> & {
-        context?: StyleContextType;
-    };
-
-type IAccordionItemProps = React.ComponentPropsWithoutRef<typeof UIAccordion.Item> &
-    VariantProps<typeof accordionItemStyle>;
-
-type IAccordionContentProps = React.ComponentPropsWithoutRef<typeof UIAccordion.Content> &
-    VariantProps<typeof accordionContentStyle>;
-
-type IAccordionContentTextProps = React.ComponentPropsWithoutRef<typeof UIAccordion.ContentText> &
-    VariantProps<typeof accordionContentTextStyle>;
-
-type IAccordionIconProps = VariantProps<typeof accordionIconStyle> &
-    React.ComponentPropsWithoutRef<typeof UIAccordion.Icon> & {
-        as?: React.ElementType;
-        height?: number;
-        width?: number;
-    };
-
-type IAccordionHeaderProps = React.ComponentPropsWithoutRef<typeof UIAccordion.Header> &
-    VariantProps<typeof accordionHeaderStyle>;
-
-type IAccordionTriggerProps = React.ComponentPropsWithoutRef<typeof UIAccordion.Trigger> &
-    VariantProps<typeof accordionTriggerStyle>;
-
-type IAccordionTitleTextProps = React.ComponentPropsWithoutRef<typeof UIAccordion.TitleText> &
-    VariantProps<typeof accordionTitleTextStyle>;
-
-/** Components */
-const Accordion = React.forwardRef<React.ElementRef<typeof UIAccordion>, IAccordionProps>(
-    ({ className, variant = 'filled', size = 'md', ...props }, ref) => {
-        return (
-            <UIAccordion
-                ref={ref}
-                {...props}
-                className={accordionStyle({ variant, class: className })}
-                context={{ variant, size }}
-            />
-        );
-    },
-);
-
-const AccordionItem = React.forwardRef<React.ElementRef<typeof UIAccordion.Item>, IAccordionItemProps>(
-    ({ className, ...props }, ref) => {
-        const { variant } = useStyleContext(SCOPE);
-        return (
-            <UIAccordion.Item
-                ref={ref}
-                {...props}
-                className={accordionItemStyle({
-                    parentVariants: { variant },
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const AccordionContent = React.forwardRef<React.ElementRef<typeof UIAccordion.Content>, IAccordionContentProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIAccordion.Content
-                ref={ref}
-                {...props}
-                className={accordionContentStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const AccordionContentText = React.forwardRef<
-    React.ElementRef<typeof UIAccordion.ContentText>,
-    IAccordionContentTextProps
->(({ className, ...props }, ref) => {
-    const { size } = useStyleContext(SCOPE);
-    return (
-        <UIAccordion.ContentText
-            ref={ref}
-            {...props}
-            className={accordionContentTextStyle({
-                parentVariants: { size },
-                class: className,
-            })}
-        />
-    );
-});
-
-const AccordionIcon = React.forwardRef<React.ElementRef<typeof UIAccordion.Icon>, IAccordionIconProps>(
-    ({ size, className, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        if (typeof size === 'number') {
-            return (
-                <UIAccordion.Icon
-                    ref={ref}
-                    {...props}
-                    className={accordionIconStyle({ class: className })}
-                    size={size}
-                />
-            );
-        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
-            return <UIAccordion.Icon ref={ref} {...props} className={accordionIconStyle({ class: className })} />;
-        }
-        return (
-            <UIAccordion.Icon
-                ref={ref}
-                {...props}
-                className={accordionIconStyle({
-                    size,
-                    class: className,
-                    parentVariants: { size: parentSize },
-                })}
-            />
-        );
-    },
-);
-
-const AccordionHeader = React.forwardRef<React.ElementRef<typeof UIAccordion.Header>, IAccordionHeaderProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIAccordion.Header
-                ref={ref}
-                {...props}
-                className={accordionHeaderStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const AccordionTrigger = React.forwardRef<React.ElementRef<typeof UIAccordion.Trigger>, IAccordionTriggerProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIAccordion.Trigger
-                ref={ref}
-                {...props}
-                className={accordionTriggerStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const AccordionTitleText = React.forwardRef<React.ElementRef<typeof UIAccordion.TitleText>, IAccordionTitleTextProps>(
-    ({ className, ...props }, ref) => {
-        const { size } = useStyleContext(SCOPE);
-        return (
-            <UIAccordion.TitleText
-                ref={ref}
-                {...props}
-                className={accordionTitleTextStyle({
-                    parentVariants: { size },
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-Accordion.displayName = 'Accordion';
-AccordionItem.displayName = 'AccordionItem';
-AccordionHeader.displayName = 'AccordionHeader';
-AccordionTrigger.displayName = 'AccordionTrigger';
-AccordionTitleText.displayName = 'AccordionTitleText';
-AccordionContentText.displayName = 'AccordionContentText';
-AccordionIcon.displayName = 'AccordionIcon';
-AccordionContent.displayName = 'AccordionContent';
-
-export {
-    Accordion,
-    AccordionItem,
-    AccordionHeader,
-    AccordionTrigger,
-    AccordionTitleText,
-    AccordionContentText,
-    AccordionIcon,
-    AccordionContent,
-};