- {item}
\n {children}\n
\n )\n }\n)\n\nModalActions.displayName = 'ModalActions'\n\nexport default ModalActions\n","import React from 'react'\n\ntype ModalBodyProps = React.HTMLAttributes\n {children}\n
\n )\n }\n)\n\nModalBody.displayName = 'ModalBody'\n\nexport default ModalBody\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\ntype ModalHeaderProps = React.HTMLAttributes\n {children}\n
\n )\n }\n)\n\nModalHeader.displayName = 'ModalHeader'\n\nexport default ModalHeader\n","import React, { forwardRef } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport ModalActions from './ModalActions'\nimport ModalBody from './ModalBody'\nimport ModalHeader from './ModalHeader'\n\nexport type ModalProps = React.HTMLAttributes\n {icon}\n \n
\n \n )\n }\n)\n\nAlert.displayName = 'Alert'\n\nexport default Alert\n","import React, { ReactElement } from 'react'\nimport clsx from 'clsx'\n\nimport { AvatarProps } from '../Avatar'\n\ntype AvatarGroupProps = React.HTMLAttributes\n 
\n
\n ) : (\n \n {letters}\n
\n )}\n \n )\n }\n)\n\nexport default Object.assign(Avatar, {\n Group: AvatarGroup,\n})\n","import React, { forwardRef, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps, ComponentColor, ComponentSize } from '../types'\n\nexport type BadgeProps = Omit will be on to the side\n }\n\ninterface ModifierMap {\n [key: string]: {\n [key: string]: string | undefined\n }\n}\n\nconst DYNAMIC_MODIFIERS: ModifierMap = {\n compact: {\n true: 'card-compact',\n xs: 'xs:card-compact',\n sm: 'sm:card-compact',\n md: 'md:card-compact',\n lg: 'lg:card-compact',\n },\n normal: {\n true: 'card-normal',\n xs: 'xs:card-normal',\n sm: 'sm:card-normal',\n md: 'md:card-normal',\n lg: 'lg:card-normal',\n },\n side: {\n true: 'card-side',\n xs: 'xs:card-side',\n sm: 'sm:card-side',\n md: 'md:card-side',\n lg: 'lg:card-side',\n },\n}\n\nconst Card = React.forwardRef(\n (\n { bordered = true, imageFull, normal, compact, side, className, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'card',\n className,\n clsx({\n 'card-bordered': bordered,\n 'image-full': imageFull,\n [(compact && DYNAMIC_MODIFIERS.compact[compact.toString()]) || '']:\n compact,\n [(normal && DYNAMIC_MODIFIERS.normal[normal.toString()]) || '']: normal,\n [(side && DYNAMIC_MODIFIERS.side[side.toString()]) || '']: side,\n })\n )\n\n return \n }\n)\n\nexport default Object.assign(Card, {\n Actions: CardActions,\n Body: CardBody,\n Title: CardTitle,\n Image: CardImage,\n})\n","import React, {\n cloneElement,\n createRef,\n forwardRef,\n ReactElement,\n RefObject,\n useEffect,\n useState,\n} from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport CarouselItem, {\n CarouselItemProps,\n CarouselItemWidth,\n} from './CarouselItem'\nimport Button from '../Button'\n\nexport type CarouselProps = React.HTMLAttributes &\n IComponentBaseProps & {\n children: ReactElement[]\n display?: 'slider' | 'numbered' | 'sequential'\n snap?: 'start' | 'center' | 'end'\n vertical?: boolean\n width?: CarouselItemWidth\n buttonStyle?: (value: string) => React.ReactElement\n }\n\nconst Carousel = forwardRef(\n (\n {\n children,\n display = 'slider',\n snap,\n vertical,\n width,\n buttonStyle,\n dataTheme,\n className,\n ...props\n },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'carousel',\n className,\n clsx({\n [`carousel-${snap}`]: snap,\n 'carousel-vertical': vertical,\n 'w-full': display !== 'slider',\n })\n )\n\n const [itemRefs, setItemRefs] = useState[]>([])\n\n useEffect(() => {\n const newRefs: RefObject[] = []\n children.map((_) => {\n newRefs.push(createRef())\n })\n setItemRefs(newRefs)\n }, [children])\n\n const scrollToIndex = (index: number) => {\n itemRefs[index].current?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: snap,\n })\n }\n\n return (\n <>\n \n {children.map((child, i) => {\n return cloneElement(child, {\n innerRef: itemRefs[i],\n index: i + 1,\n children: child.props.children,\n src: child.props.src,\n alt: child.props.alt,\n width: display !== 'slider' ? 'full' : width,\n hasButtons: display === 'sequential',\n buttonStyle,\n onPrev: () =>\n scrollToIndex(i - 1 < 0 ? children.length - 1 : i - 1),\n onNext: () =>\n scrollToIndex(i + 1 > children.length - 1 ? 0 : i + 1),\n ...child.props,\n })\n })}\n \n {display === 'numbered' && (\n & {\n readonly innerRef?: LegacyRef\n src?: string\n alt?: string\n index?: number\n width?: CarouselItemWidth\n hasButtons?: boolean\n buttonStyle?: (value: string) => React.ReactElement\n onPrev?: () => void\n onNext?: () => void\n}\n\nconst CarouselItem = ({\n children,\n innerRef,\n src,\n alt,\n index = 0,\n width,\n hasButtons,\n buttonStyle,\n onPrev,\n onNext,\n className,\n ...props\n}: CarouselItemProps): JSX.Element => {\n const classes = twMerge(\n 'carousel-item relative',\n className,\n clsx({\n 'w-full': width === 'full',\n 'w-1/2': width === 'half',\n 'h-full': true,\n })\n )\n\n const imageClasses = clsx({\n 'w-full': width === 'full',\n })\n\n const renderButtons = () => {\n if (buttonStyle != null) {\n return (\n <>\n {cloneElement(buttonStyle('❮'), {\n onClick: onPrev,\n })}\n {cloneElement(buttonStyle('❯'), {\n onClick: onNext,\n })}\n \n )\n }\n\n return (\n <>\n \n \n \n )\n }\n\n return (\n &\n IComponentBaseProps & {\n checkbox?: boolean\n icon?: 'arrow' | 'plus'\n open?: boolean\n }\n\nconst Collapse = React.forwardRef(\n (\n { children, checkbox, icon, open, dataTheme, className, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'collapse',\n className,\n clsx({\n [`collapse-${icon}`]: icon,\n 'collapse-open': open === true,\n 'collapse-close': open === false,\n })\n )\n\n return (\n \n {checkbox && }\n {children}\n \n )\n }\n)\n\nexport default Object.assign(Collapse, {\n Title: CollapseTitle,\n Content: CollapseContent,\n})\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type CollapseTitleProps = React.HTMLAttributes &\n IComponentBaseProps\n\nconst CollapseTitle = ({\n children,\n className,\n ...props\n}: CollapseTitleProps): JSX.Element => {\n const classes = twMerge('collapse-title', className)\n\n return (\n &\n IComponentBaseProps\n\nconst CollapseContent = ({\n children,\n className,\n ...props\n}: CollapseContentProps): JSX.Element => {\n const classes = twMerge('collapse-content', className)\n\n return (\n ,\n 'color'\n> &\n IComponentBaseProps & {\n color?: ComponentColor\n }\n\nconst Progress = forwardRef(\n ({ color, dataTheme, className, ...props }, ref): JSX.Element => {\n const classes = twMerge(\n 'progress',\n className,\n clsx({\n [`progress-${color}`]: color,\n })\n )\n\n return (\n &\n IComponentBaseProps & {\n value: number\n size?: string\n thickness?: string\n color?: ComponentColor\n }\n\nconst RadialProgress = forwardRef(\n (\n {\n value,\n size = '4rem',\n thickness = '4px',\n color,\n dataTheme,\n className,\n children,\n ...props\n },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'radial-progress',\n className,\n clsx({\n [`text-${color}`]: color,\n })\n )\n\n const displayedValue = Math.min(100, Math.max(0, value))\n const progressStyle: Record = {\n '--value': displayedValue,\n '--size': size,\n '--thickness': thickness,\n }\n\n return (\n \n {children}\n \n )\n }\n)\n\nRadialProgress.displayName = 'RadialProgress'\n\nexport default RadialProgress\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type StatItemProps = React.HTMLAttributes &\n IComponentBaseProps & {\n variant: 'title' | 'value' | 'desc' | 'figure'\n }\n\nconst StatItem = React.forwardRef(\n ({ variant, className, ...props }, ref): JSX.Element => {\n const classes = twMerge(\n className,\n clsx({\n [`stat-${variant}`]: variant,\n })\n )\n\n return \n }\n)\n\nexport default StatItem\n","import React, { forwardRef } from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport StatItem from './StatItem'\n\nexport type StatProps = React.HTMLAttributes &\n IComponentBaseProps\n\nconst Stat = forwardRef(\n ({ dataTheme, className, ...props }, ref): JSX.Element => {\n const classes = twMerge('stat', className)\n\n return (\n \n )\n }\n)\n\nexport default Object.assign(Stat, { Item: StatItem })\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport Stat from './Stat'\n\nexport type StatsProps = React.HTMLAttributes &\n IComponentBaseProps & {\n horizontal?: boolean\n vertical?: boolean\n }\n\nconst Stats = React.forwardRef(\n (\n { horizontal, vertical, dataTheme, className, children, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'stats',\n className,\n clsx({\n 'stats-horizontal': horizontal,\n 'stats-vertical': vertical,\n })\n )\n\n return (\n & {\n children?: ReactNode[]\n }\n\nconst TableHead = React.forwardRef(\n ({ children, ...props }, ref): JSX.Element => {\n return (\n \n \n {children?.map((child) => {\n return {child} \n })}\n \n \n )\n }\n)\nexport default TableHead\n","import React from 'react'\n\nexport type TableBodyProps = React.TableHTMLAttributes\n\nconst TableBody = React.forwardRef(\n ({ children, ...props }, ref): JSX.Element => {\n return (\n \n {children}\n \n )\n }\n)\nexport default TableBody\n","import React, { ReactElement } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type TableRowProps = React.TableHTMLAttributes &\n IComponentBaseProps & {\n children?: ReactElement[]\n active?: boolean\n hover?: boolean\n }\n\nconst TableRow = React.forwardRef(\n ({ children, active, hover, className, ...props }, ref): JSX.Element => {\n const classes = twMerge(\n className,\n clsx({\n active: active,\n hover: hover,\n })\n )\n\n return (\n \n {children?.map((child, i) => \n i < 1 ? {child} : {child} \n )}\n \n )\n }\n)\n\nexport default TableRow\n","import React, { ReactElement } from 'react'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type TableFooterProps =\n React.TableHTMLAttributes &\n IComponentBaseProps & {\n children?: ReactElement[]\n }\n\nconst TableFooter = React.forwardRef(\n ({ children, ...props }, ref): JSX.Element => {\n return (\n \n \n {children?.map((child) => {\n return {child} \n })}\n \n \n )\n }\n)\n\nexport default TableFooter\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport TableHead from './TableHead'\nimport TableBody from './TableBody'\nimport TableRow from './TableRow'\nimport TableFooter from './TableFooter'\n\nexport type TableProps = React.TableHTMLAttributes &\n IComponentBaseProps & {\n compact?: boolean\n zebra?: boolean\n }\n\nconst Table = React.forwardRef(\n (\n { children, compact, zebra, dataTheme, className, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'table',\n className,\n clsx({\n 'table-zebra': zebra,\n 'table-compact': compact,\n })\n )\n\n return (\n \n {children}\n
\n )\n }\n)\n\nexport default Object.assign(Table, {\n Head: TableHead,\n Body: TableBody,\n Row: TableRow,\n Footer: TableFooter,\n})\n","import React, { forwardRef } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport {\n IComponentBaseProps,\n ComponentColor,\n ComponentPosition,\n} from '../types'\n\nexport type TooltipProps = Omit, 'color'> &\n IComponentBaseProps & {\n message: string\n open?: boolean\n color?: ComponentColor\n position?: ComponentPosition\n }\n\nconst Tooltip = forwardRef(\n (\n {\n message,\n children,\n open,\n color,\n position,\n dataTheme,\n className,\n ...props\n },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'tooltip',\n className,\n clsx({\n 'tooltip-open': open,\n [`tooltip-${color}`]: color,\n [`tooltip-${position}`]: position,\n })\n )\n\n return (\n \n {children}\n \n )\n }\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport default Tooltip\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type LabelProps = React.LabelHTMLAttributes &\n IComponentBaseProps & {\n title?: string\n }\n\nconst Label = React.forwardRef(\n ({ children, title, dataTheme, className, ...props }, ref): JSX.Element => {\n const classes = twMerge('label', className)\n\n return (\n \n )\n }\n)\n\nexport default Label\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport Label from './Label'\n\nexport type FormProps = React.HTMLAttributes &\n IComponentBaseProps\n\nconst Form = React.forwardRef(\n ({ children, dataTheme, className, ...props }, ref): JSX.Element => {\n const classes = twMerge('form-control', className)\n\n return (\n \n {children}\n \n )\n }\n)\n\nexport default Object.assign(Form, { Label })\n","import React, {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n} from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport {\n IComponentBaseProps,\n ComponentBrandColors,\n ComponentSize,\n} from '../types'\n\nexport type CheckboxProps = Omit<\n React.InputHTMLAttributes,\n 'size'\n> &\n IComponentBaseProps & {\n color?: ComponentBrandColors\n size?: ComponentSize\n indeterminate?: boolean\n }\n\nconst Checkbox = forwardRef(\n (\n {\n checked,\n defaultChecked = false,\n color,\n size,\n indeterminate,\n dataTheme,\n className,\n ...props\n },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'checkbox',\n className,\n clsx({\n [`checkbox-${size}`]: size,\n [`checkbox-${color}`]: color,\n })\n )\n\n const checkboxRef = useRef(null)\n useImperativeHandle(ref, () => checkboxRef.current as HTMLInputElement)\n\n useEffect(() => {\n if (!checkboxRef.current) {\n return\n }\n\n if (indeterminate) {\n checkboxRef.current.indeterminate = true\n } else {\n checkboxRef.current.indeterminate = false\n }\n }, [indeterminate])\n\n return (\n ,\n 'size' | 'color'\n> &\n IComponentBaseProps & {\n bordered?: boolean\n borderOffset?: boolean\n size?: ComponentSize\n color?: ComponentColor\n }\n\nconst Input = forwardRef(\n (\n {\n value,\n placeholder,\n bordered = true,\n borderOffset,\n size,\n color,\n dataTheme,\n className,\n type,\n ...props\n },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'input',\n className,\n clsx({\n [`input-${size}`]: size,\n [`input-${color}`]: color,\n [`focus:outline-offset-0`]: !borderOffset,\n 'input-bordered': bordered,\n })\n )\n\n return (\n ,\n 'size'\n> &\n IComponentBaseProps & {\n color?: ComponentBrandColors\n size?: ComponentSize\n }\n\nconst Radio = forwardRef(\n ({ color, size, name, dataTheme, className, ...props }, ref): JSX.Element => {\n const classes = twMerge(\n 'radio',\n className,\n clsx({\n [`radio-${size}`]: size,\n [`radio-${color}`]: color,\n })\n )\n\n return (\n ,\n 'size'\n> &\n IComponentBaseProps & {\n color?: ComponentBrandColors\n size?: ComponentSize\n }\n\nconst Range = forwardRef(\n ({ color, size, step, dataTheme, className, ...props }, ref): JSX.Element => {\n const classes = twMerge(\n 'range',\n className,\n clsx({\n [`range-${size}`]: size,\n [`range-${color}`]: color,\n })\n )\n\n const numSteps = useMemo(() => {\n const safeStep = Math.max(1, Number(step))\n return Math.ceil(100 / safeStep) ?? 1\n }, [props.max, step])\n\n return (\n <>\n \n\nconst RatingItem = ({ ...props }: RatingItemProps): JSX.Element => {\n return \n}\n\nexport default RatingItem\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps, ComponentSize } from '../types'\n\nimport RatingItem from './RatingItem'\n\nexport type RatingProps = React.HTMLAttributes &\n IComponentBaseProps & {\n size?: ComponentSize\n half?: boolean\n hidden?: boolean\n }\n\nconst Rating = React.forwardRef(\n (\n { children, size, half, hidden, dataTheme, className, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'rating',\n className,\n clsx({\n [`rating-${size}`]: size,\n 'rating-half': half,\n 'rating-hidden': hidden,\n })\n )\n\n return (\n \n {children}\n \n )\n }\n)\n\nexport default Object.assign(Rating, { Item: RatingItem })\n","import React, { cloneElement, ReactElement, useState } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps, ComponentColor, ComponentSize } from '../types'\n\nimport SelectOption, { SelectOptionProps } from './SelectOption'\n\nexport type SelectOption = {\n value: T\n label: string\n}\n\nexport type SelectProps = Omit<\n React.SelectHTMLAttributes,\n 'onChange' | 'value' | 'size' | 'color'\n> &\n IComponentBaseProps & {\n children: ReactElement>[]\n initialValue?: T\n value?: T\n onChange?: (value: T) => void\n size?: ComponentSize\n color?: ComponentColor\n bordered?: boolean\n borderOffset?: boolean\n }\n\nconst SelectInner = (\n props: SelectProps,\n ref: React.ForwardedRef\n): JSX.Element => {\n const {\n children,\n initialValue,\n value,\n onChange,\n size,\n color,\n bordered = true,\n borderOffset,\n dataTheme,\n className,\n ...rest\n } = props\n\n const classes = twMerge(\n 'select',\n className,\n clsx({\n [`select-${size}`]: size,\n [`select-${color}`]: color,\n [`focus:outline-offset-0`]: !borderOffset,\n 'select-bordered': bordered,\n })\n )\n\n const [selectedValue, setSelectedValue] = useState(\n value || initialValue\n )\n\n return (\n {\n setSelectedValue(e.currentTarget.value as T)\n onChange && onChange(e.currentTarget.value as T)\n }}\n >\n {children.map((child) => {\n return cloneElement(child, {\n selectedValue: selectedValue,\n })\n })}\n \n )\n}\n\n// Make forwardRef work with generic component\nconst Select = React.forwardRef(SelectInner) as (\n props: SelectProps & { ref?: React.ForwardedRef }\n) => ReturnType\n\nexport default Object.assign(Select, { Option: SelectOption })\n","import React from 'react'\n\nexport type SelectOptionProps = Omit<\n React.OptionHTMLAttributes,\n 'value'\n> & {\n selectedValue?: T\n value: T\n}\n\nconst SelectOption = ({\n selectedValue,\n value,\n children,\n ...props\n}: SelectOptionProps): JSX.Element => {\n return (\n \n )\n}\n\nexport default SelectOption\n","import React, { forwardRef } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport {\n IComponentBaseProps,\n ComponentBrandColors,\n ComponentSize,\n} from '../types'\n\nexport type ToggleProps = Omit<\n React.InputHTMLAttributes,\n 'size'\n> &\n IComponentBaseProps & {\n color?: ComponentBrandColors\n size?: ComponentSize\n }\n\nconst Toggle = forwardRef(\n ({ color, size, dataTheme, className, ...props }, ref): JSX.Element => {\n const classes = twMerge(\n 'toggle',\n className,\n clsx({\n [`toggle-${size}`]: size,\n [`toggle-${color}`]: color,\n })\n )\n\n return (\n &\n IComponentBaseProps & {\n size?: 1 | 2 | 3 | 4 | 5 | 6\n horizontal?: boolean\n }\n\nconst Artboard = forwardRef(\n (\n { children, size, horizontal, dataTheme, className, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'artboard',\n 'artboard-demo',\n className,\n clsx({\n [`phone-${size}`]: size,\n horizontal: horizontal,\n })\n )\n\n return (\n \n {children}\n \n )\n }\n)\n\nArtboard.displayName = 'Artboard'\n\nexport default Artboard\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type DividerProps = React.HTMLAttributes &\n IComponentBaseProps & {\n vertical?: boolean\n }\n\nconst Divider = ({\n children,\n vertical,\n dataTheme,\n className,\n ...props\n}: DividerProps): JSX.Element => {\n const classes = twMerge(\n 'divider',\n className,\n clsx({\n 'divider-vertical': vertical,\n })\n )\n\n return (\n \n\nconst FooterTitle = React.forwardRef(\n ({ className, ...props }, ref) => {\n const classes = twMerge('footer-title', className)\n\n return \n }\n)\n\nexport default FooterTitle\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport FooterTitle from './FooterTitle'\n\nexport type FooterProps = React.HTMLAttributes &\n IComponentBaseProps & {\n center?: boolean\n }\n\nconst Footer = React.forwardRef(\n ({ center, dataTheme, className, ...props }, ref) => {\n const classes = twMerge(\n 'footer',\n className,\n clsx({\n 'footer-center': center,\n })\n )\n\n return (\n &\n IComponentBaseProps\n\nconst HeroContent = React.forwardRef(\n ({ dataTheme, className, children, ...props }, ref): JSX.Element => {\n const classes = twMerge('hero-content', className)\n\n return (\n &\n IComponentBaseProps\n\nconst HeroOverlay = React.forwardRef(\n ({ dataTheme, className, children, ...props }, ref): JSX.Element => {\n const classes = twMerge('hero-overlay', className)\n\n return (\n &\n IComponentBaseProps\n\nconst Hero = React.forwardRef(\n ({ dataTheme, className, children, ...props }, ref): JSX.Element => {\n const classes = twMerge('hero', className)\n\n return (\n \n {children}\n \n )\n }\n)\n\nexport default Object.assign(Hero, {\n Content: HeroContent,\n Overlay: HeroOverlay,\n})\n","import React, { forwardRef } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps, ComponentSize } from '../types'\n\nexport type InputGroupProps = React.LabelHTMLAttributes &\n IComponentBaseProps & {\n size?: ComponentSize\n vertical?: boolean\n }\n\nconst InputGroup = forwardRef(\n (\n { children, size, vertical, dataTheme, className, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'input-group',\n className,\n clsx({\n [`input-group-${size}`]: size,\n 'input-group-vertical': vertical,\n })\n )\n\n return (\n \n )\n }\n)\n\nInputGroup.displayName = 'InputGroup'\n\nexport default InputGroup\n","import React, { forwardRef } from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type StackProps = React.HTMLAttributes &\n IComponentBaseProps\n\nconst Stack = forwardRef(\n ({ dataTheme, className, children, ...props }, ref): JSX.Element => {\n const classes = twMerge('stack', className)\n\n return (\n \n {children}\n \n )\n }\n)\n\nStack.displayName = 'Stack'\n\nexport default Stack\n","import React from 'react'\n\nexport type BreadcrumbsItemProps = React.LiHTMLAttributes & {\n href?: string\n}\n\nconst BreadcrumbsItem = React.forwardRef(\n ({ children, href, ...props }, ref): JSX.Element => {\n return (\n \n {href ? {children} : <>{children}}\n \n )\n }\n)\n\nexport default BreadcrumbsItem\n","import React, { ReactElement } from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport BreadcrumbsItem, { BreadcrumbsItemProps } from './BreadcrumbsItem'\n\nexport type BreadcrumbsProps = React.HTMLAttributes &\n IComponentBaseProps & {\n children?:\n | ReactElement\n | ReactElement[]\n innerRef?: React.Ref\n innerProps?: React.HTMLAttributes\n }\n\nconst Breadcrumbs = React.forwardRef(\n (\n { children, dataTheme, className, innerProps, innerRef, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge('breadcrumbs', 'text-sm', className)\n\n return (\n \n &\n IComponentBaseProps & {\n color?: 'neutral' | ComponentColor\n hover?: boolean\n }\n\nconst Link = forwardRef(\n (\n { children, href, color, hover = true, dataTheme, className, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'link',\n className,\n clsx({\n [`link-${color}`]: color,\n 'link-hover': hover,\n })\n )\n\n return (\n \n {children}\n \n )\n }\n)\n\nLink.displayName = 'Link'\n\nexport default Link\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type MenuTitleProps = React.LiHTMLAttributes &\n IComponentBaseProps\n\nconst MenuTitle = React.forwardRef(\n ({ className, ...props }, ref) => {\n const classes = twMerge('menu-title', className)\n\n return \n }\n)\n\nexport default MenuTitle\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type MenuItemProps = React.LiHTMLAttributes &\n IComponentBaseProps & {\n disabled?: boolean\n }\n\nconst MenuItem = React.forwardRef(\n ({ className, disabled, ...props }, ref) => {\n const classes = twMerge(\n className,\n clsx({\n disabled: disabled,\n })\n )\n\n return \n }\n)\n\nexport default MenuItem\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps, ComponentSize } from '../types'\n\nimport MenuTitle, { MenuTitleProps as TitleProps } from './MenuTitle'\nimport MenuItem, { MenuItemProps as ItemProps } from './MenuItem'\n\nexport type MenuTitleProps = TitleProps\nexport type MenuItemProps = ItemProps\n\nexport type MenuProps = React.HTMLAttributes &\n IComponentBaseProps & {\n normal?: ComponentSize | boolean // Applies default paddings\n compact?: ComponentSize | boolean // Applies smaller padding\n vertical?: ComponentSize | boolean // Vertical menu (default)\n horizontal?: ComponentSize | boolean // Horizontal menu\n }\n\ninterface ModifierMap {\n [key: string]: {\n [key: string]: string | undefined\n }\n}\n\nconst DYNAMIC_MODIFIERS: ModifierMap = {\n compact: {\n true: 'menu-compact',\n xs: 'xs:menu-compact',\n sm: 'sm:menu-compact',\n md: 'md:menu-compact',\n lg: 'lg:menu-compact',\n },\n normal: {\n true: 'menu-normal',\n xs: 'xs:menu-normal',\n sm: 'sm:menu-normal',\n md: 'md:menu-normal',\n lg: 'lg:menu-normal',\n },\n horizontal: {\n true: 'menu-horizontal',\n xs: 'xs:menu-horizontal',\n sm: 'sm:menu-horizontal',\n md: 'md:menu-horizontal',\n lg: 'lg:menu-horizontal',\n },\n vertical: {\n true: 'menu-vertical',\n xs: 'xs:menu-vertical',\n sm: 'sm:menu-vertical',\n md: 'md:menu-vertical',\n lg: 'lg:menu-vertical',\n },\n}\n\nconst Menu = React.forwardRef(\n (\n { normal, compact, horizontal, vertical, dataTheme, className, ...props },\n ref\n ) => {\n const classes = twMerge(\n 'menu',\n className,\n clsx({\n [(compact && DYNAMIC_MODIFIERS.compact[compact.toString()]) || '']:\n compact,\n [(normal && DYNAMIC_MODIFIERS.normal[normal.toString()]) || '']: normal,\n [(horizontal && DYNAMIC_MODIFIERS.horizontal[horizontal.toString()]) ||\n '']: horizontal,\n [(vertical && DYNAMIC_MODIFIERS.vertical[vertical.toString()]) || '']:\n vertical,\n })\n )\n\n return (\n (\n ({ children, section, dataTheme, className, style }, ref): JSX.Element => {\n const classes = twMerge(\n className,\n clsx({\n ['flex-1']: section !== 'center',\n [`navbar-${section}`]: section,\n })\n )\n\n return (\n &\n IComponentBaseProps\n\nconst Navbar = React.forwardRef(\n ({ children, dataTheme, className, ...props }, ref): JSX.Element => {\n const classes = twMerge('navbar', className)\n\n return (\n \n {children}\n \n )\n }\n)\n\nconst NavbarStart = React.forwardRef<\n HTMLDivElement,\n Omit\n>((props, ref) => \n>((props, ref) => \n>((props, ref) => ,\n 'value' | 'color'\n> &\n IComponentBaseProps & {\n value?: string\n color?: 'neutral' | ComponentColor\n }\n\nconst Step = React.forwardRef(\n (\n { children, value, color, dataTheme, className, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'step',\n className,\n clsx({\n [`step-${color}`]: color,\n })\n )\n\n return (\n \n {children}\n \n )\n }\n)\nexport default Step\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport Step from './Step'\n\nexport type StepsProps = React.HTMLAttributes &\n IComponentBaseProps & {\n vertical?: boolean\n horizontal?: boolean\n }\n\nconst Steps = React.forwardRef(\n (\n { children, dataTheme, className, vertical, horizontal, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'steps',\n className,\n clsx({\n ['steps-vertical']: vertical,\n ['steps-horizontal']: horizontal,\n })\n )\n\n return (\n \n {children}\n \n )\n }\n)\n\nexport default Object.assign(Steps, { Step })\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { ComponentSize } from '../types'\n\nexport type TabProps = Omit<\n React.AnchorHTMLAttributes,\n 'onClick'\n> & {\n value: T\n activeValue?: T\n onClick?: (value: T) => void\n size?: ComponentSize\n variant?: 'bordered' | 'lifted'\n}\n\nconst TabInner = (\n {\n children,\n value,\n activeValue,\n onClick,\n size,\n variant,\n className,\n style,\n ...props\n }: TabProps,\n ref?: React.ForwardedRef\n): JSX.Element => {\n const classes = twMerge(\n 'tab',\n className,\n clsx({\n 'tab-active': value != null && value === activeValue,\n [`tab-${size}`]: size,\n [`tab-${variant}`]: variant,\n })\n )\n\n return (\n onClick && onClick(value)}\n >\n {children}\n \n )\n}\n\n// Make forwardRef work with generic component\nconst Tab = React.forwardRef(TabInner) as (\n props: TabProps & { ref?: React.ForwardedRef }\n) => ReturnType\n\nexport default Tab\n","import React, { cloneElement, ReactElement, useState } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps, ComponentSize } from '../types'\n\nimport Tab, { TabProps } from './Tab'\n\nexport type TabsProps = React.HTMLAttributes &\n IComponentBaseProps & {\n children: ReactElement>[]\n value?: T\n onChange?: (value: T) => void\n variant?: 'bordered' | 'lifted'\n size?: ComponentSize\n boxed?: boolean\n }\n\nconst TabsInner = (\n props: TabsProps,\n ref?: React.ForwardedRef\n): JSX.Element => {\n const {\n children,\n value,\n onChange,\n variant,\n size,\n boxed,\n dataTheme,\n className,\n ...rest\n } = props\n const [activeValue, setActiveValue] = useState(value)\n\n const classes = twMerge(\n 'tabs',\n className,\n clsx({\n 'tabs-boxed': boxed,\n })\n )\n\n return (\n (\n props: TabsProps & { ref?: React.ForwardedRef }\n) => ReturnType\n\nexport default Object.assign(Tabs, { Tab })\n","import React, { forwardRef } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { ComponentStatus, IComponentBaseProps } from '../types'\n\nexport type CodeMockupLineProps = React.HTMLAttributes &\n IComponentBaseProps & {\n dataPrefix?: string | boolean\n status?: ComponentStatus\n innerProps?: React.HTMLAttributes\n innerRef?: React.Ref\n }\n\nexport const CodeMockupLine = forwardRef(\n (\n {\n dataPrefix,\n dataTheme,\n status,\n className,\n children,\n innerProps,\n innerRef,\n ...props\n },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n clsx({\n [`bg-${status}`]: status,\n [`text-${status}-content`]: status,\n }),\n className\n )\n\n const allProps = {\n ...props,\n className: classes,\n ...(dataPrefix !== false && { 'data-prefix': dataPrefix || '>' }),\n } as Record\n\n return (\n &\n IComponentBaseProps\n\nconst CodeMockup = forwardRef(\n ({ dataTheme, className, children, ...props }, ref): JSX.Element => {\n const classes = twMerge('mockup-code', className)\n\n return (\n \n {children}\n \n )\n }\n)\n\nCodeMockup.displayName = 'CodeMockup'\nconst CodeMockupNamespace = Object.assign(CodeMockup, { Line: CodeMockupLine })\n\nexport { CodeMockupNamespace as CodeMockup }\n","import React, { forwardRef } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps, ComponentColor } from '../types'\n\nexport type PhoneMockupProps = React.HTMLAttributes &\n IComponentBaseProps & {\n color?: Omit\n innerProps?: React.HTMLAttributes\n innerRef?: React.Ref\n }\n\nconst PhoneMockup = forwardRef(\n (\n { color, dataTheme, className, children, innerRef, innerProps, ...props },\n ref\n ): JSX.Element => {\n const classes = twMerge(\n 'mockup-phone',\n clsx({\n [`border-${color}`]: color,\n }),\n className\n )\n\n return (\n \n \n &\n IComponentBaseProps & {\n frameColor?: WindowMockupColors\n backgroundColor?: WindowMockupColors\n border?: boolean\n borderColor?: WindowMockupColors\n }\n\nconst WindowMockup = forwardRef(\n (\n {\n border,\n borderColor,\n backgroundColor,\n frameColor,\n dataTheme,\n className,\n children,\n ...props\n },\n ref\n ): JSX.Element => {\n // Set border color to framecolor or 'bg-base-300', if border color is not defined\n const borderColorValue = borderColor\n ? borderColor\n : frameColor || 'base-300'\n\n const classes = twMerge(\n 'mockup-window',\n border && `border border-${borderColorValue}`,\n clsx({\n [`border-${borderColorValue}`]: borderColorValue,\n [`bg-${frameColor}`]: frameColor,\n }),\n className\n )\n\n console.log('classes', classes)\n\n // If border is true, then we need to add the border-t and padding classes to the children\n // if more than one child is passed in, or the single child is not a valid element, then we need to wrap the child/children in a div\n\n const numChildren = React.Children.count(children)\n const firstChild = numChildren > 0 && React.Children.toArray(children)[0]\n\n // List of classes that child element will have\n const innerClasses = clsx(\n backgroundColor && `bg-${backgroundColor}`,\n border && `border-t border-${borderColorValue}`,\n 'p-4'\n )\n\n console.log('innerClasses', innerClasses)\n\n // Add the innerClasses to the child element, merging classNames if existing, or wrapping with div and adding innerClasses\n const innerEl =\n firstChild && React.isValidElement(firstChild) ? (\n React.cloneElement(firstChild, {\n className: twMerge(innerClasses, firstChild.props.className),\n })\n ) : (\n \n {innerEl}\n \n )\n }\n)\n\nWindowMockup.displayName = 'WindowMockup'\n\nexport default WindowMockup\n","import React from 'react'\n\nimport { DataTheme } from '../types'\n\nexport interface IThemeContext {\n theme: DataTheme\n setTheme: (theme: DataTheme) => void\n}\n\nexport const ThemeContext = React.createContext({\n theme: 'light',\n setTheme: () => {},\n})\n","import React, { MutableRefObject, useEffect, useRef, useState } from 'react'\nimport { defaultTheme } from '../constants'\n\nimport { DataTheme, IComponentBaseProps } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { getThemeFromClosestAncestor } from './utils'\n\nexport type ThemeProps = Omit<\n React.HTMLAttributes,\n 'onChange'\n> &\n IComponentBaseProps & {\n onChange?: (theme: DataTheme) => void\n }\n\nconst Theme = React.forwardRef(\n (\n { children, dataTheme, onChange, className, ...props },\n ref\n ): JSX.Element => {\n // Either use provided ref or create a new ref\n const themeRef = useRef(\n (ref as MutableRefObject)?.current\n )\n\n const closestAncestorTheme = getThemeFromClosestAncestor(themeRef)\n\n // If no theme is provided, use the closest ancestor theme, if no ancestor theme, fallback to default theme (defined in constants)\n const [theme, setTheme] = useState(\n dataTheme || closestAncestorTheme || defaultTheme\n )\n\n const handleThemeChange = (theme: DataTheme) => {\n // Fire custom onChange, if provided. ie, user provided function to store theme in session/local storage\n onChange && onChange(theme)\n // Update state/context\n setTheme(theme)\n }\n\n // Properly handle changes to theme prop on Theme component\n useEffect(() => {\n if (dataTheme !== theme) {\n dataTheme && handleThemeChange(dataTheme)\n }\n }, [dataTheme])\n\n return (\n \n \n )\n }\n)\nexport default Theme\n","import React from 'react'\n\nexport const getThemeFromClosestAncestor = (\n ref: React.RefObject\n) => {\n if (!ref.current) return\n const matches = ref.current.closest('[data-theme]')\n if (matches) return matches.getAttribute('data-theme')\n}\n","import React, { useState } from 'react';\nimport { Button } from 'react-daisyui';\n\nfunction Sidebar({ open }) {\n const [dropdown, setDropdown] = useState(false);\n\n const toggleDropdown = () => setDropdown(!dropdown);\n\n return (\n ;\n\n/**\n * A history is an interface to the navigation stack. The history serves as the\n * source of truth for the current location, as well as provides a set of\n * methods that may be used to change it.\n *\n * It is similar to the DOM's `window.history` object, but with a smaller, more\n * focused API.\n */\nexport interface History {\n /**\n * The last action that modified the current location. This will always be\n * Action.Pop when a history instance is first created. This value is mutable.\n */\n readonly action: Action;\n\n /**\n * The current location. This value is mutable.\n */\n readonly location: Location;\n\n /**\n * Returns a valid href for the given `to` value that may be used as\n * the value of an attribute.\n *\n * @param to - The destination URL\n */\n createHref(to: To): string;\n\n /**\n * Pushes a new location onto the history stack, increasing its length by one.\n * If there were any entries in the stack after the current one, they are\n * lost.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n push(to: To, state?: any): void;\n\n /**\n * Replaces the current location in the history stack with a new one. The\n * location that was replaced will no longer be available.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n replace(to: To, state?: any): void;\n\n /**\n * Navigates `n` entries backward/forward in the history stack relative to the\n * current index. For example, a \"back\" navigation would use go(-1).\n *\n * @param delta - The delta in the stack index\n */\n go(delta: number): void;\n\n /**\n * Sets up a listener that will be called whenever the current location\n * changes.\n *\n * @param listener - A function that will be called when the location changes\n * @returns unlisten - A function that may be used to stop listening\n */\n listen(listener: Listener): () => void;\n}\n\ntype HistoryState = {\n usr: any;\n key?: string;\n};\n\nconst PopStateEventType = \"popstate\";\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Memory History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A user-supplied object that describes a location. Used when providing\n * entries to `createMemoryHistory` via its `initialEntries` option.\n */\nexport type InitialEntry = string | Partial;\n\nexport type MemoryHistoryOptions = {\n initialEntries?: InitialEntry[];\n initialIndex?: number;\n v5Compat?: boolean;\n};\n\n/**\n * A memory history stores locations in memory. This is useful in stateful\n * environments where there is no web browser, such as node tests or React\n * Native.\n */\nexport interface MemoryHistory extends History {\n /**\n * The current index in the history stack.\n */\n readonly index: number;\n}\n\n/**\n * Memory history stores the current location in memory. It is designed for use\n * in stateful non-browser environments like tests and React Native.\n */\nexport function createMemoryHistory(\n options: MemoryHistoryOptions = {}\n): MemoryHistory {\n let { initialEntries = [\"/\"], initialIndex, v5Compat = false } = options;\n let entries: Location[]; // Declare so we can access from createMemoryLocation\n entries = initialEntries.map((entry, index) =>\n createMemoryLocation(\n entry,\n typeof entry === \"string\" ? null : entry.state,\n index === 0 ? \"default\" : undefined\n )\n );\n let index = clampIndex(\n initialIndex == null ? entries.length - 1 : initialIndex\n );\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n function clampIndex(n: number): number {\n return Math.min(Math.max(n, 0), entries.length - 1);\n }\n function getCurrentLocation(): Location {\n return entries[index];\n }\n function createMemoryLocation(\n to: To,\n state: any = null,\n key?: string\n ): Location {\n let location = createLocation(\n entries ? getCurrentLocation().pathname : \"/\",\n to,\n state,\n key\n );\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in memory history: ${JSON.stringify(\n to\n )}`\n );\n return location;\n }\n\n let history: MemoryHistory = {\n get index() {\n return index;\n },\n get action() {\n return action;\n },\n get location() {\n return getCurrentLocation();\n },\n createHref(to) {\n return typeof to === \"string\" ? to : createPath(to);\n },\n push(to, state) {\n action = Action.Push;\n let nextLocation = createMemoryLocation(to, state);\n index += 1;\n entries.splice(index, entries.length, nextLocation);\n if (v5Compat && listener) {\n listener({ action, location: nextLocation });\n }\n },\n replace(to, state) {\n action = Action.Replace;\n let nextLocation = createMemoryLocation(to, state);\n entries[index] = nextLocation;\n if (v5Compat && listener) {\n listener({ action, location: nextLocation });\n }\n },\n go(delta) {\n action = Action.Pop;\n index = clampIndex(index + delta);\n if (listener) {\n listener({ action, location: getCurrentLocation() });\n }\n },\n listen(fn: Listener) {\n listener = fn;\n return () => {\n listener = null;\n };\n },\n };\n\n return history;\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Browser History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A browser history stores the current location in regular URLs in a web\n * browser environment. This is the standard for most web apps and provides the\n * cleanest URLs the browser's address bar.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory\n */\nexport interface BrowserHistory extends UrlHistory {}\n\nexport type BrowserHistoryOptions = UrlHistoryOptions;\n\n/**\n * Browser history stores the location in regular URLs. This is the standard for\n * most web apps, but it requires some configuration on the server to ensure you\n * serve the same app at multiple URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory\n */\nexport function createBrowserHistory(\n options: BrowserHistoryOptions = {}\n): BrowserHistory {\n function createBrowserLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let { pathname, search, hash } = window.location;\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createBrowserHref(window: Window, to: To) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n\n return getUrlBasedHistory(\n createBrowserLocation,\n createBrowserHref,\n null,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Hash History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A hash history stores the current location in the fragment identifier portion\n * of the URL in a web browser environment.\n *\n * This is ideal for apps that do not control the server for some reason\n * (because the fragment identifier is never sent to the server), including some\n * shared hosting environments that do not provide fine-grained controls over\n * which pages are served at which URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory\n */\nexport interface HashHistory extends UrlHistory {}\n\nexport type HashHistoryOptions = UrlHistoryOptions;\n\n/**\n * Hash history stores the location in window.location.hash. This makes it ideal\n * for situations where you don't want to send the location to the server for\n * some reason, either because you do cannot configure it or the URL space is\n * reserved for something else.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory\n */\nexport function createHashHistory(\n options: HashHistoryOptions = {}\n): HashHistory {\n function createHashLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let {\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n } = parsePath(window.location.hash.substr(1));\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createHashHref(window: Window, to: To) {\n let base = window.document.querySelector(\"base\");\n let href = \"\";\n\n if (base && base.getAttribute(\"href\")) {\n let url = window.location.href;\n let hashIndex = url.indexOf(\"#\");\n href = hashIndex === -1 ? url : url.slice(0, hashIndex);\n }\n\n return href + \"#\" + (typeof to === \"string\" ? to : createPath(to));\n }\n\n function validateHashLocation(location: Location, to: To) {\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in hash history.push(${JSON.stringify(\n to\n )})`\n );\n }\n\n return getUrlBasedHistory(\n createHashLocation,\n createHashHref,\n validateHashLocation,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region UTILS\n////////////////////////////////////////////////////////////////////////////////\n\nfunction warning(cond: any, message: string) {\n if (!cond) {\n // eslint-disable-next-line no-console\n if (typeof console !== \"undefined\") console.warn(message);\n\n try {\n // Welcome to debugging history!\n //\n // This error is thrown as a convenience so you can more easily\n // find the source for a warning that appears in the console by\n // enabling \"pause on exceptions\" in your JavaScript debugger.\n throw new Error(message);\n // eslint-disable-next-line no-empty\n } catch (e) {}\n }\n}\n\nfunction createKey() {\n return Math.random().toString(36).substr(2, 8);\n}\n\n/**\n * For browser-based histories, we combine the state and key into an object\n */\nfunction getHistoryState(location: Location): HistoryState {\n return {\n usr: location.state,\n key: location.key,\n };\n}\n\n/**\n * Creates a Location object with a unique key from the given Path\n */\nexport function createLocation(\n current: string | Location,\n to: To,\n state: any = null,\n key?: string\n): Readonly {\n let location: Readonly = {\n pathname: typeof current === \"string\" ? current : current.pathname,\n search: \"\",\n hash: \"\",\n ...(typeof to === \"string\" ? parsePath(to) : to),\n state,\n // TODO: This could be cleaned up. push/replace should probably just take\n // full Locations now and avoid the need to run through this flow at all\n // But that's a pretty big refactor to the current test suite so going to\n // keep as is for the time being and just let any incoming keys take precedence\n key: (to && (to as Location).key) || key || createKey(),\n };\n return location;\n}\n\n/**\n * Creates a string URL path from the given pathname, search, and hash components.\n */\nexport function createPath({\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n}: Partial) {\n if (search && search !== \"?\")\n pathname += search.charAt(0) === \"?\" ? search : \"?\" + search;\n if (hash && hash !== \"#\")\n pathname += hash.charAt(0) === \"#\" ? hash : \"#\" + hash;\n return pathname;\n}\n\n/**\n * Parses a string URL path into its separate pathname, search, and hash components.\n */\nexport function parsePath(path: string): Partial {\n let parsedPath: Partial = {};\n\n if (path) {\n let hashIndex = path.indexOf(\"#\");\n if (hashIndex >= 0) {\n parsedPath.hash = path.substr(hashIndex);\n path = path.substr(0, hashIndex);\n }\n\n let searchIndex = path.indexOf(\"?\");\n if (searchIndex >= 0) {\n parsedPath.search = path.substr(searchIndex);\n path = path.substr(0, searchIndex);\n }\n\n if (path) {\n parsedPath.pathname = path;\n }\n }\n\n return parsedPath;\n}\n\nexport interface UrlHistory extends History {}\n\nexport type UrlHistoryOptions = {\n window?: Window;\n v5Compat?: boolean;\n};\n\nfunction getUrlBasedHistory(\n getLocation: (window: Window, globalHistory: Window[\"history\"]) => Location,\n createHref: (window: Window, to: To) => string,\n validateLocation: ((location: Location, to: To) => void) | null,\n options: UrlHistoryOptions = {}\n): UrlHistory {\n let { window = document.defaultView!, v5Compat = false } = options;\n let globalHistory = window.history;\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n function handlePop() {\n action = Action.Pop;\n if (listener) {\n listener({ action, location: history.location });\n }\n }\n\n function push(to: To, state?: any) {\n action = Action.Push;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n let historyState = getHistoryState(location);\n let url = history.createHref(location);\n\n // try...catch because iOS limits us to 100 pushState calls :/\n try {\n globalHistory.pushState(historyState, \"\", url);\n } catch (error) {\n // They are going to lose state here, but there is no real\n // way to warn them about it since the page will refresh...\n window.location.assign(url);\n }\n\n if (v5Compat && listener) {\n listener({ action, location });\n }\n }\n\n function replace(to: To, state?: any) {\n action = Action.Replace;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n let historyState = getHistoryState(location);\n let url = history.createHref(location);\n globalHistory.replaceState(historyState, \"\", url);\n\n if (v5Compat && listener) {\n listener({ action, location: location });\n }\n }\n\n let history: History = {\n get action() {\n return action;\n },\n get location() {\n return getLocation(window, globalHistory);\n },\n listen(fn: Listener) {\n if (listener) {\n throw new Error(\"A history only accepts one active listener\");\n }\n window.addEventListener(PopStateEventType, handlePop);\n listener = fn;\n\n return () => {\n window.removeEventListener(PopStateEventType, handlePop);\n listener = null;\n };\n },\n createHref(to) {\n return createHref(window, to);\n },\n push,\n replace,\n go(n) {\n return globalHistory.go(n);\n },\n };\n\n return history;\n}\n\n//#endregion\n","export default function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nexport default function _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n}","export default function _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n return _setPrototypeOf(o, p);\n}","import setPrototypeOf from \"./setPrototypeOf.js\";\nexport default function _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n Object.defineProperty(subClass, \"prototype\", {\n writable: false\n });\n if (superClass) setPrototypeOf(subClass, superClass);\n}","export default function _getPrototypeOf(o) {\n _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}","export default function _isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}","export default function _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) {\n return typeof obj;\n } : function (obj) {\n return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n }, _typeof(obj);\n}","import _typeof from \"./typeof.js\";\nimport assertThisInitialized from \"./assertThisInitialized.js\";\nexport default function _possibleConstructorReturn(self, call) {\n if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n return call;\n } else if (call !== void 0) {\n throw new TypeError(\"Derived constructors may only return object or undefined\");\n }\n\n return assertThisInitialized(self);\n}","export default function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}","import getPrototypeOf from \"./getPrototypeOf.js\";\nimport isNativeReflectConstruct from \"./isNativeReflectConstruct.js\";\nimport possibleConstructorReturn from \"./possibleConstructorReturn.js\";\nexport default function _createSuper(Derived) {\n var hasNativeReflectConstruct = isNativeReflectConstruct();\n return function _createSuperInternal() {\n var Super = getPrototypeOf(Derived),\n result;\n\n if (hasNativeReflectConstruct) {\n var NewTarget = getPrototypeOf(this).constructor;\n result = Reflect.construct(Super, arguments, NewTarget);\n } else {\n result = Super.apply(this, arguments);\n }\n\n return possibleConstructorReturn(this, result);\n };\n}","import setPrototypeOf from \"./setPrototypeOf.js\";\nimport isNativeReflectConstruct from \"./isNativeReflectConstruct.js\";\nexport default function _construct(Parent, args, Class) {\n if (isNativeReflectConstruct()) {\n _construct = Reflect.construct.bind();\n } else {\n _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n}","import getPrototypeOf from \"./getPrototypeOf.js\";\nimport setPrototypeOf from \"./setPrototypeOf.js\";\nimport isNativeFunction from \"./isNativeFunction.js\";\nimport construct from \"./construct.js\";\nexport default function _wrapNativeSuper(Class) {\n var _cache = typeof Map === \"function\" ? new Map() : undefined;\n\n _wrapNativeSuper = function _wrapNativeSuper(Class) {\n if (Class === null || !isNativeFunction(Class)) return Class;\n\n if (typeof Class !== \"function\") {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n if (typeof _cache !== \"undefined\") {\n if (_cache.has(Class)) return _cache.get(Class);\n\n _cache.set(Class, Wrapper);\n }\n\n function Wrapper() {\n return construct(Class, arguments, getPrototypeOf(this).constructor);\n }\n\n Wrapper.prototype = Object.create(Class.prototype, {\n constructor: {\n value: Wrapper,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n return setPrototypeOf(Wrapper, Class);\n };\n\n return _wrapNativeSuper(Class);\n}","export default function _isNativeFunction(fn) {\n return Function.toString.call(fn).indexOf(\"[native code]\") !== -1;\n}","import type { Location, Path, To } from \"./history\";\nimport { parsePath } from \"./history\";\n\n/**\n * Map of routeId -> data returned from a loader/action/error\n */\nexport interface RouteData {\n [routeId: string]: any;\n}\n\nexport enum ResultType {\n data = \"data\",\n deferred = \"deferred\",\n redirect = \"redirect\",\n error = \"error\",\n}\n\n/**\n * Successful result from a loader or action\n */\nexport interface SuccessResult {\n type: ResultType.data;\n data: any;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Successful defer() result from a loader or action\n */\nexport interface DeferredResult {\n type: ResultType.deferred;\n deferredData: DeferredData;\n}\n\n/**\n * Redirect result from a loader or action\n */\nexport interface RedirectResult {\n type: ResultType.redirect;\n status: number;\n location: string;\n revalidate: boolean;\n}\n\n/**\n * Unsuccessful result from a loader or action\n */\nexport interface ErrorResult {\n type: ResultType.error;\n error: any;\n headers?: Headers;\n}\n\n/**\n * Result from a loader or action - potentially successful or unsuccessful\n */\nexport type DataResult =\n | SuccessResult\n | DeferredResult\n | RedirectResult\n | ErrorResult;\n\nexport type FormMethod = \"get\" | \"post\" | \"put\" | \"patch\" | \"delete\";\nexport type FormEncType =\n | \"application/x-www-form-urlencoded\"\n | \"multipart/form-data\";\n\n/**\n * @private\n * Internal interface to pass around for action submissions, not intended for\n * external consumption\n */\nexport interface Submission {\n formMethod: Exclude
\n {children.map((_, i) => {\n if (buttonStyle != null) {\n return cloneElement(buttonStyle((i + 1).toString()), {\n key: i,\n onClick: () => scrollToIndex(i),\n })\n }\n\n return (\n \n )\n })}\n
\n )}\n \n )\n }\n)\n\nexport default Object.assign(Carousel, { Item: CarouselItem })\n","import React, { cloneElement, LegacyRef } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport Button from '../Button'\n\nexport type CarouselItemWidth = 'full' | 'half'\n\nexport type CarouselItemProps = React.HTMLAttributes\n {src ? : children}\n {hasButtons && (\n
\n )\n}\n\nexport default CarouselItem\n","import React from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport CollapseTitle from './CollapseTitle'\nimport CollapseContent from './CollapseContent'\n\nexport type CollapseProps = React.HTMLAttributes\n {renderButtons()}\n
\n )}\n \n {children}\n
\n )\n}\n\nexport default CollapseTitle\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type CollapseContentProps = React.HTMLAttributes\n {children}\n
\n )\n}\n\nexport default CollapseContent\n","import React, { forwardRef } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps, ComponentColor } from '../types'\n\nexport type ProgressProps = Omit<\n React.ProgressHTMLAttributes\n {children}\n
\n )\n }\n)\n\nexport default Object.assign(Stats, { Stat })\n","import React, { ReactNode } from 'react'\n\nexport type TableHeadProps =\n React.TableHTMLAttributes\n {[...Array(numSteps + 1)].map(() => {\n return |\n })}\n
\n )}\n \n )\n }\n)\n\nRange.displayName = 'Range'\n\nexport default Range\n","import React from 'react'\n\nexport type RatingItemProps = React.InputHTMLAttributes\n {children}\n
\n )\n}\n\nexport default Divider\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nexport type FooterTitleProps = React.HTMLAttributes\n {children}\n
\n )\n }\n)\n\nexport default HeroContent\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nexport type HeroOverlayProps = React.HTMLAttributes\n {children}\n
\n )\n }\n)\n\nexport default HeroOverlay\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport HeroContent from './HeroContent'\nimport HeroOverlay from './HeroOverlay'\n\nexport type HeroProps = React.HTMLAttributes- \n {children}\n
\n {children}\n
\n )\n }\n)\n\nexport default NavbarSection\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\n\nimport NavbarSection, { NavbarSectionProps } from './NavbarSection'\n\nexport type NavbarProps = React.HTMLAttributes\n {children.map((child) => {\n return cloneElement(child, {\n variant,\n size,\n activeValue: activeValue,\n onClick: (value: T) => {\n setActiveValue(value)\n onChange && onChange(value)\n },\n })\n })}\n
\n )\n}\n\n// Make forwardRef work with generic component\nconst Tabs = React.forwardRef(TabsInner) as \n \n {children}\n \n \n )\n }\n)\n\nCodeMockupLine.displayName = 'CodeMockup.Line'\n","import React, { forwardRef } from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\nimport { CodeMockupLine } from './CodeMockupLine'\n\nexport type CodeMockupProps = React.HTMLAttributes\n \n {children}\n
\n \n \n )\n }\n)\n\nPhoneMockup.displayName = 'PhoneMockup'\n\nexport default PhoneMockup\n","export const componentPositions = ['top', 'bottom', 'left', 'right'] as const\nexport const componentShapes = ['circle', 'square'] as const\nexport const componentSizes = ['lg', 'md', 'sm', 'xs'] as const\nexport const componentStatuses = [\n 'info',\n 'success',\n 'warning',\n 'error',\n] as const\nexport const brandColors = ['primary', 'secondary', 'accent'] as const\nexport const componentColors = [\n ...brandColors,\n 'ghost',\n ...componentStatuses,\n] as const\nexport const bgColors = ['base-100', 'base-200', 'base-300', 'neutral'] as const\n\nexport const defaultTheme = 'light'\n","import React, { forwardRef } from 'react'\nimport clsx from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { IComponentBaseProps } from '../types'\nimport { bgColors, brandColors, componentStatuses } from '../constants'\n\nexport const windowMockupColors = [\n ...bgColors,\n ...brandColors,\n ...componentStatuses,\n] as const\n\ntype WindowMockupColors = typeof windowMockupColors[number]\n\nexport type WindowMockupProps = React.HTMLAttributes{children}
\n )\n\n return (\n \n {children}\n
\n \n
\n );\n}\n\nexport default Sidebar;","import React, { useState } from 'react';\nimport { Button } from 'react-daisyui';\n// import LinkButton from '../buttons/link-button';\nimport Sidebar from './sidebar';\nimport { Link } from \"react-router-dom\";\n\nfunction Menu() {\n const [open, setOpen] = useState(false);\n\n const toggleOpen = () => setOpen(!open);\n\n return (\n <>\n \n
\n \n \n \n Games\n \n \n
\n \n \n \n News\n \n
\n \n \n Careers\n \n
\n \n {/* \n Support\n */}\n \n Support\n \n
\n \n \n
\n