@codefast/ui 0.2.35 → 0.2.37

package/dist/chunk-TCK3JQ5Q.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/sidebar.tsx"],"names":["useIsMobile","Slot","PanelLeftIcon","createContext","useCallback","useContext","useEffect","useMemo","useState","tv","jsx","jsxs","SIDEBAR_COOKIE_NAME","SIDEBAR_COOKIE_MAX_AGE","SIDEBAR_WIDTH","SIDEBAR_WIDTH_MOBILE","SIDEBAR_WIDTH_ICON","SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","useSidebar","context","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","openMobile","setOpenMobile","isOpen","setIsOpen","open","setOpen","value","openState","toggleSidebar","currentValue","handleKeyDown","event","state","contextValue","TooltipProvider","cn","Sidebar","side","variant","collapsible","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","SidebarTrigger","onClick","Button","SidebarRail","SidebarInset","SidebarInput","Input","SidebarHeader","SidebarFooter","SidebarSeparator","Separator","SidebarContent","SidebarGroup","SidebarGroupLabel","asChild","SidebarGroupAction","SidebarGroupContent","SidebarMenu","SidebarMenuItem","sidebarMenuButtonVariants","SidebarMenuButton","isActive","size","tooltip","Component","button","Tooltip","TooltipTrigger","TooltipContent","SidebarMenuAction","showOnHover","SidebarMenuBadge","SidebarMenuSkeleton","showIcon","width","Skeleton","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton"],"mappings":"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","sourcesContent":["'use client';\n\nimport type { ComponentProps, CSSProperties, Dispatch, JSX, SetStateAction } from 'react';\nimport type { VariantProps } from 'tailwind-variants';\n\nimport { useIsMobile } from '@codefast/hooks';\nimport { Slot } from '@radix-ui/react-slot';\nimport { PanelLeftIcon } from 'lucide-react';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport { tv } from 'tailwind-variants';\n\nimport { Button } from '@/components/button';\nimport { Input } from '@/components/input';\nimport { Separator } from '@/components/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/sheet';\nimport { Skeleton } from '@/components/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/tooltip';\nimport { cn } from '@/lib/utils';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3.0625rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ninterface SidebarContextProps {\n  isMobile: boolean;\n  open: boolean;\n  openMobile: boolean;\n  setOpen: (open: boolean) => void;\n  setOpenMobile: Dispatch<SetStateAction<boolean>>;\n  state: 'collapsed' | 'expanded';\n  toggleSidebar: () => void;\n}\n\nconst SidebarContext = createContext<null | SidebarContextProps>(null);\n\nfunction useSidebar(): SidebarContextProps {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n\n  return context;\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarProvider\n * -------------------------------------------------------------------------- */\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: ComponentProps<'div'> & {\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  open?: boolean;\n}): JSX.Element {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const open = openProp ?? isOpen;\n  const setOpen = useCallback(\n    (value: ((value: boolean) => boolean) | boolean) => {\n      const openState = typeof value === 'function' ? value(open) : value;\n\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        setIsOpen(openState);\n      }\n\n      // eslint-disable-next-line unicorn/no-document-cookie -- This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n    },\n    [setOpenProp, open],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = useCallback(() => {\n    if (isMobile) {\n      setOpenMobile((currentValue) => !currentValue);\n    } else {\n      setOpen((currentValue) => !currentValue);\n    }\n  }, [isMobile, setOpen, setOpenMobile]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  useEffect(() => {\n    const handleKeyDown: (event: KeyboardEvent) => void = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? 'expanded' : 'collapsed';\n\n  const contextValue = useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}\n          data-slot=\"sidebar-wrapper\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH,\n              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as CSSProperties\n          }\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: Sidebar\n * -------------------------------------------------------------------------- */\n\nfunction Sidebar({\n  side = 'left',\n  variant = 'sidebar',\n  collapsible = 'offcanvas',\n  className,\n  children,\n  ...props\n}: ComponentProps<'div'> & {\n  collapsible?: 'icon' | 'none' | 'offcanvas';\n  side?: 'left' | 'right';\n  variant?: 'floating' | 'inset' | 'sidebar';\n}): JSX.Element {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === 'none') {\n    return (\n      <div\n        className={cn('bg-sidebar text-sidebar-foreground w-(--sidebar-width) flex h-full flex-col', className)}\n        data-slot=\"sidebar\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          data-mobile=\"true\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          side={side}\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as CSSProperties\n          }\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className={cn('text-sidebar-foreground group peer hidden md:block', className)}\n      data-collapsible={state === 'collapsed' ? collapsible : ''}\n      data-side={side}\n      data-slot=\"sidebar\"\n      data-state={state}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          'w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180',\n          variant === 'floating' || variant === 'inset'\n            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n        )}\n        data-slot=\"sidebar-gap\"\n      />\n      <div\n        className={cn(\n          'w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex',\n          side === 'left'\n            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n          // Adjust the padding for floating and inset variants.\n          variant === 'floating' || variant === 'inset'\n            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'\n            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          className,\n        )}\n        data-slot=\"sidebar-container\"\n        {...props}\n      >\n        <div\n          className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarTrigger\n * -------------------------------------------------------------------------- */\n\nfunction SidebarTrigger({ className, onClick, ...props }: ComponentProps<typeof Button>): JSX.Element {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      className={cn('size-7', className)}\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      size=\"icon\"\n      variant=\"ghost\"\n      onClick={(event) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarRail\n * -------------------------------------------------------------------------- */\n\nfunction SidebarRail({ className, ...props }: ComponentProps<'button'>): JSX.Element {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      className={cn(\n        'hover:after:bg-sidebar-border in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize hover:group-data-[collapsible=offcanvas]:bg-sidebar absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full sm:flex [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        className,\n      )}\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      title=\"Toggle Sidebar\"\n      type=\"button\"\n      onClick={toggleSidebar}\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarInset\n * -------------------------------------------------------------------------- */\n\nfunction SidebarInset({ className, ...props }: ComponentProps<'main'>): JSX.Element {\n  return (\n    <main\n      className={cn(\n        'bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',\n        className,\n      )}\n      data-slot=\"sidebar-inset\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarInput\n * -------------------------------------------------------------------------- */\n\nfunction SidebarInput({ className, ...props }: ComponentProps<typeof Input>): JSX.Element {\n  return (\n    <Input\n      className={cn('bg-background h-8 w-full shadow-none', className)}\n      data-sidebar=\"input\"\n      data-slot=\"sidebar-input\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarHeader\n * -------------------------------------------------------------------------- */\n\nfunction SidebarHeader({ className, ...props }: ComponentProps<'div'>): JSX.Element {\n  return (\n    <div\n      className={cn('flex flex-col gap-2 p-2', className)}\n      data-sidebar=\"header\"\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarFooter\n * -------------------------------------------------------------------------- */\n\nfunction SidebarFooter({ className, ...props }: ComponentProps<'div'>): JSX.Element {\n  return (\n    <div\n      className={cn('flex flex-col gap-2 p-2', className)}\n      data-sidebar=\"footer\"\n      data-slot=\"sidebar-footer\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarSeparator\n * -------------------------------------------------------------------------- */\n\nfunction SidebarSeparator({ className, ...props }: ComponentProps<typeof Separator>): JSX.Element {\n  return (\n    <Separator\n      className={cn('bg-sidebar-border mx-2 w-auto', className)}\n      data-sidebar=\"separator\"\n      data-slot=\"sidebar-separator\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarContent\n * -------------------------------------------------------------------------- */\n\nfunction SidebarContent({ className, ...props }: ComponentProps<'div'>): JSX.Element {\n  return (\n    <div\n      className={cn(\n        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n        className,\n      )}\n      data-sidebar=\"content\"\n      data-slot=\"sidebar-content\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarGroup\n * -------------------------------------------------------------------------- */\n\nfunction SidebarGroup({ className, ...props }: ComponentProps<'div'>): JSX.Element {\n  return (\n    <div\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      data-sidebar=\"group\"\n      data-slot=\"sidebar-group\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarGroupLabel\n * -------------------------------------------------------------------------- */\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: ComponentProps<'div'> & {\n  asChild?: boolean;\n}): JSX.Element {\n  const Component = asChild ? Slot : 'div';\n\n  return (\n    <Component\n      className={cn(\n        'text-sidebar-foreground/70 ring-sidebar-ring outline-hidden focus-visible:ring-3 flex h-8 shrink-0 items-center truncate rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0',\n        className,\n      )}\n      data-sidebar=\"group-label\"\n      data-slot=\"sidebar-group-label\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarGroupAction\n * -------------------------------------------------------------------------- */\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: ComponentProps<'button'> & {\n  asChild?: boolean;\n}): JSX.Element {\n  const Component = asChild ? Slot : 'button';\n\n  return (\n    <Component\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden focus-visible:ring-3 absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform after:absolute after:-inset-2 group-data-[collapsible=icon]:hidden md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n        className,\n      )}\n      data-sidebar=\"group-action\"\n      data-slot=\"sidebar-group-action\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarGroupContent\n * -------------------------------------------------------------------------- */\n\nfunction SidebarGroupContent({ className, ...props }: ComponentProps<'div'>): JSX.Element {\n  return (\n    <div\n      className={cn('w-full text-sm', className)}\n      data-sidebar=\"group-content\"\n      data-slot=\"sidebar-group-content\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarMenu\n * -------------------------------------------------------------------------- */\n\nfunction SidebarMenu({ className, ...props }: ComponentProps<'ul'>): JSX.Element {\n  return (\n    <ul\n      className={cn('flex w-full min-w-0 flex-col gap-1', className)}\n      data-sidebar=\"menu\"\n      data-slot=\"sidebar-menu\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarMenuItem\n * -------------------------------------------------------------------------- */\n\nfunction SidebarMenuItem({ className, ...props }: ComponentProps<'li'>): JSX.Element {\n  return (\n    <li\n      className={cn('group/menu-item relative', className)}\n      data-sidebar=\"menu-item\"\n      data-slot=\"sidebar-menu-item\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Variant: SidebarMenuButton\n * -------------------------------------------------------------------------- */\n\nconst sidebarMenuButtonVariants = tv({\n  base: 'peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-3 flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  variants: {\n    variant: {\n      default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n      outline:\n        'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n    },\n    size: {\n      sm: 'h-7 text-xs',\n      md: 'h-8 text-sm',\n      lg: 'group-data-[collapsible=icon]:p-0! h-12 text-sm',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n  },\n});\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarMenuButton\n * -------------------------------------------------------------------------- */\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = 'default',\n  size = 'md',\n  tooltip,\n  className,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof sidebarMenuButtonVariants> & {\n    asChild?: boolean;\n    isActive?: boolean;\n    tooltip?: ComponentProps<typeof TooltipContent> | string;\n  }): JSX.Element {\n  const Component = asChild ? Slot : 'button';\n  const { isMobile, state } = useSidebar();\n\n  const button = (\n    <Component\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      data-active={isActive}\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-slot=\"sidebar-menu-button\"\n      {...props}\n    />\n  );\n\n  if (!tooltip) {\n    return button;\n  }\n\n  if (typeof tooltip === 'string') {\n    // eslint-disable-next-line no-param-reassign -- convert it to an object with default properties\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent align=\"center\" hidden={state !== 'collapsed' || isMobile} side=\"right\" {...tooltip} />\n    </Tooltip>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarMenuAction\n * -------------------------------------------------------------------------- */\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: ComponentProps<'button'> & {\n  asChild?: boolean;\n  showOnHover?: boolean;\n}): JSX.Element {\n  const Component = asChild ? Slot : 'button';\n\n  return (\n    <Component\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground outline-hidden focus-visible:ring-3 absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform after:absolute after:-inset-2 group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n        showOnHover &&\n          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',\n        className,\n      )}\n      data-sidebar=\"menu-action\"\n      data-slot=\"sidebar-menu-action\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarMenuBadge\n * -------------------------------------------------------------------------- */\n\nfunction SidebarMenuBadge({ className, ...props }: ComponentProps<'div'>): JSX.Element {\n  return (\n    <div\n      className={cn(\n        'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1',\n        className,\n      )}\n      data-sidebar=\"menu-badge\"\n      data-slot=\"sidebar-menu-badge\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarMenuSkeleton\n * -------------------------------------------------------------------------- */\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: ComponentProps<'div'> & {\n  showIcon?: boolean;\n}): JSX.Element {\n  // Random width between 50 to 90%.\n  const width = useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n      data-sidebar=\"menu-skeleton\"\n      data-slot=\"sidebar-menu-skeleton\"\n      {...props}\n    >\n      {showIcon ? <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" /> : null}\n      <Skeleton\n        className=\"max-w-(--skeleton-width) h-4 flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarMenuSub\n * -------------------------------------------------------------------------- */\n\nfunction SidebarMenuSub({ className, ...props }: ComponentProps<'ul'>): JSX.Element {\n  return (\n    <ul\n      className={cn(\n        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      data-sidebar=\"menu-sub\"\n      data-slot=\"sidebar-menu-sub\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarMenuSubItem\n * -------------------------------------------------------------------------- */\n\nfunction SidebarMenuSubItem({ className, ...props }: ComponentProps<'li'>): JSX.Element {\n  return (\n    <li\n      className={cn('group/menu-sub-item relative', className)}\n      data-sidebar=\"menu-sub-item\"\n      data-slot=\"sidebar-menu-sub-item\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: SidebarMenuSubButton\n * -------------------------------------------------------------------------- */\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = 'md',\n  isActive = false,\n  className,\n  ...props\n}: ComponentProps<'a'> & {\n  asChild?: boolean;\n  isActive?: boolean;\n  size?: 'md' | 'sm';\n}): JSX.Element {\n  const Component = asChild ? Slot : 'a';\n\n  return (\n    <Component\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden focus-visible:ring-3 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      data-active={isActive}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-slot=\"sidebar-menu-sub-button\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n};\n"]}

package/dist/chunk-WJ52PDQT.js

@@ -1,2 +0,0 @@
-"use client";import{a as r}from"./chunk-OKUFCFYT.js";import{OTPInput as p,OTPInputContext as u}from"input-otp";import{MinusIcon as l}from"lucide-react";import{useContext as c}from"react";import{REGEXP_ONLY_CHARS as E,REGEXP_ONLY_DIGITS as N,REGEXP_ONLY_DIGITS_AND_CHARS as T}from"input-otp";import{jsx as e,jsxs as m}from"react/jsx-runtime";function x({className:t,containerClassName:a,...n}){return e(p,{"aria-label":"One-time password",className:r(t),containerClassName:r("flex items-center gap-2 has-disabled:opacity-50",a),"data-slot":"input-otp",...n})}function b({className:t,...a}){return e("div",{className:r("flex items-center -space-x-px",t),"data-slot":"input-otp-group",role:"group",...a})}function C({className:t,index:a,...n}){let i=c(u),{isActive:o,char:s,hasFakeCaret:d}=i.slots[a];return m("div",{className:r("border-input data-[active=true]:ring-3 data-[active=true]:border-ring data-[active=true]:ring-ring/50 not-has-disabled:shadow-xs outline-hidden data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 relative flex size-9 items-center justify-center border text-sm transition-all first:rounded-l-lg last:rounded-r-lg data-[active=true]:z-10",t),"data-active":o,"data-slot":"input-otp-slot",...n,children:[s,d?e("div",{className:"pointer-events-none absolute inset-0 flex items-center justify-center",children:e("div",{className:"animate-caret-blink bg-foreground animation-duration-1000 h-4 w-px"})}):null]})}function I({...t}){return e("div",{"data-slot":"input-otp-separator",role:"separator",...t,children:e(l,{})})}export{x as a,b,C as c,I as d,E as e,N as f,T as g};
-//# sourceMappingURL=chunk-WJ52PDQT.js.map

package/dist/chunk-WJ52PDQT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/input-otp.tsx"],"names":["OTPInput","OTPInputContext","MinusIcon","useContext","REGEXP_ONLY_CHARS","REGEXP_ONLY_DIGITS","REGEXP_ONLY_DIGITS_AND_CHARS","jsx","jsxs","InputOTP","className","containerClassName","props","cn","InputOTPGroup","InputOTPSlot","index","inputOTPContext","isActive","char","hasFakeCaret","InputOTPSeparator"],"mappings":"wCAIA,OAAS,YAAAA,EAAU,mBAAAC,MAAuB,YAC1C,OAAS,aAAAC,MAAiB,eAC1B,OAAS,cAAAC,MAAkB,QAqF3B,OAAS,qBAAAC,EAAmB,sBAAAC,EAAoB,gCAAAC,MAAoC,YA3EhF,cAAAC,EAwCA,QAAAC,MAxCA,oBAFJ,SAASC,EAAS,CAAE,UAAAC,EAAW,mBAAAC,EAAoB,GAAGC,CAAM,EAAiD,CAC3G,OACEL,EAACP,EAAA,CACC,aAAW,oBACX,UAAWa,EAAGH,CAAS,EACvB,mBAAoBG,EAAG,kDAAmDF,CAAkB,EAC5F,YAAU,YACT,GAAGC,EACN,CAEJ,CAMA,SAASE,EAAc,CAAE,UAAAJ,EAAW,GAAGE,CAAM,EAAuC,CAClF,OACEL,EAAC,OACC,UAAWM,EAAG,gCAAiCH,CAAS,EACxD,YAAU,kBACV,KAAK,QACJ,GAAGE,EACN,CAEJ,CAMA,SAASG,EAAa,CACpB,UAAAL,EACA,MAAAM,EACA,GAAGJ,CACL,EAEgB,CACd,IAAMK,EAAkBd,EAAWF,CAAe,EAC5C,CAAE,SAAAiB,EAAU,KAAAC,EAAM,aAAAC,CAAa,EAAIH,EAAgB,MAAMD,CAAK,EAEpE,OACER,EAAC,OACC,UAAWK,EACT,+eACAH,CACF,EACA,cAAaQ,EACb,YAAU,iBACT,GAAGN,EAEH,UAAAO,EACAC,EACCb,EAAC,OAAI,UAAU,wEACb,SAAAA,EAAC,OAAI,UAAU,qEAAqE,EACtF,EACE,MACN,CAEJ,CAMA,SAASc,EAAkB,CAAE,GAAGT,CAAM,EAAuC,CAC3E,OACEL,EAAC,OAAI,YAAU,sBAAsB,KAAK,YAAa,GAAGK,EACxD,SAAAL,EAACL,EAAA,EAAU,EACb,CAEJ","sourcesContent":["'use client';\n\nimport type { ComponentProps, JSX } from 'react';\n\nimport { OTPInput, OTPInputContext } from 'input-otp';\nimport { MinusIcon } from 'lucide-react';\nimport { useContext } from 'react';\n\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n * Component: InputOtp\n * -------------------------------------------------------------------------- */\n\nfunction InputOTP({ className, containerClassName, ...props }: ComponentProps<typeof OTPInput>): JSX.Element {\n  return (\n    <OTPInput\n      aria-label=\"One-time password\"\n      className={cn(className)}\n      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}\n      data-slot=\"input-otp\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: InputOTPGroup\n * -------------------------------------------------------------------------- */\n\nfunction InputOTPGroup({ className, ...props }: ComponentProps<'div'>): JSX.Element {\n  return (\n    <div\n      className={cn('flex items-center -space-x-px', className)}\n      data-slot=\"input-otp-group\"\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: InputOTPSlot\n * -------------------------------------------------------------------------- */\n\nfunction InputOTPSlot({\n  className,\n  index,\n  ...props\n}: ComponentProps<'div'> & {\n  index: number;\n}): JSX.Element {\n  const inputOTPContext = useContext(OTPInputContext);\n  const { isActive, char, hasFakeCaret } = inputOTPContext.slots[index];\n\n  return (\n    <div\n      className={cn(\n        'border-input data-[active=true]:ring-3 data-[active=true]:border-ring data-[active=true]:ring-ring/50 not-has-disabled:shadow-xs outline-hidden data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 relative flex size-9 items-center justify-center border text-sm transition-all first:rounded-l-lg last:rounded-r-lg data-[active=true]:z-10',\n        className,\n      )}\n      data-active={isActive}\n      data-slot=\"input-otp-slot\"\n      {...props}\n    >\n      {char}\n      {hasFakeCaret ? (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground animation-duration-1000 h-4 w-px\" />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: InputOTPSeparator\n * -------------------------------------------------------------------------- */\n\nfunction InputOTPSeparator({ ...props }: ComponentProps<'div'>): JSX.Element {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };\n"]}

package/dist/chunk-ZESL6WID.cjs

@@ -1,4 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";var _chunkSMJEDCFPcjs = require('./chunk-SMJEDCFP.cjs');var _react = require('react');var _recharts = require('recharts'); var p = _interopRequireWildcard(_recharts);var _jsxruntime = require('react/jsx-runtime');var N={dark:".dark",light:""},_=_react.createContext.call(void 0, null);function w(){let e=_react.useContext.call(void 0, _);if(!e)throw new Error("useChart must be used within a <ChartContainer />");return e}function J({id:e,children:t,className:n,config:o,...c}){let a=_react.useId.call(void 0, ),i=`chart-${e||a}`;return _jsxruntime.jsx.call(void 0, _.Provider,{value:{config:o},children:_jsxruntime.jsxs.call(void 0, "div",{className:_chunkSMJEDCFPcjs.a.call(void 0, "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-sector[stroke='#fff']]:stroke-transparent",n),"data-chart":i,"data-slot":"chart",...c,children:[_jsxruntime.jsx.call(void 0, $,{config:o,id:i}),_jsxruntime.jsx.call(void 0, p.ResponsiveContainer,{children:t})]})})}function $({id:e,config:t}){let n=_react.useMemo.call(void 0, ()=>M(e,t),[e,t]);return _jsxruntime.jsx.call(void 0, "style",{dangerouslySetInnerHTML:{__html:n}})}var X=p.Tooltip;function q({active:e,className:t,color:n,formatter:o,hideIndicator:c=!1,hideLabel:a=!1,indicator:i="dot",label:d,labelClassName:u,labelFormatter:v,labelKey:b,nameKey:L,payload:f}){let{config:C}=w(),P=_react.useMemo.call(void 0, ()=>{if(a||!_optionalChain([f, 'optionalAccess', _2 => _2.length]))return null;let[r]=f,y=`${b||r.dataKey||r.name||"value"}`,x=k(C,r,y),g=!b&&typeof d=="string"?_optionalChain([C, 'access', _3 => _3[d], 'optionalAccess', _4 => _4.label])||d:_optionalChain([x, 'optionalAccess', _5 => _5.label]);return v?_jsxruntime.jsx.call(void 0, "div",{className:_chunkSMJEDCFPcjs.a.call(void 0, "font-medium",u),children:v(g,f)}):g?_jsxruntime.jsx.call(void 0, "div",{className:_chunkSMJEDCFPcjs.a.call(void 0, "font-medium",u),children:g}):null},[C,a,d,u,v,b,f]);if(!e||!_optionalChain([f, 'optionalAccess', _6 => _6.length]))return null;let m=f.length===1&&i!=="dot";return _jsxruntime.jsxs.call(void 0, "div",{className:_chunkSMJEDCFPcjs.a.call(void 0, "bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",t),children:[m?null:P,_jsxruntime.jsx.call(void 0, "div",{className:"grid gap-1.5",children:f.map((r,y)=>{let x=`${L||r.name||r.dataKey||"value"}`,g=k(C,r,x),R=n||r.payload.fill||r.color;return _jsxruntime.jsx.call(void 0, "div",{className:_chunkSMJEDCFPcjs.a.call(void 0, "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",i==="dot"&&"items-center"),children:o&&r.value!==void 0&&r.name?o(r.value,r.name,r,y,r.payload):_jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment,{children:[_optionalChain([g, 'optionalAccess', _7 => _7.icon])?_jsxruntime.jsx.call(void 0, g.icon,{}):!c&&_jsxruntime.jsx.call(void 0, "div",{className:_chunkSMJEDCFPcjs.a.call(void 0, "border-(--color-border) bg-(--color-bg) rounded-xs shrink-0",{"h-2.5 w-2.5":i==="dot","my-0.5":m&&i==="dashed","w-0 border border-dashed bg-transparent":i==="dashed","w-1":i==="line"}),style:{"--color-bg":R,"--color-border":R}}),_jsxruntime.jsxs.call(void 0, "div",{className:_chunkSMJEDCFPcjs.a.call(void 0, "flex flex-1 justify-between leading-none",m?"items-end":"items-center"),children:[_jsxruntime.jsxs.call(void 0, "div",{className:"grid gap-1.5",children:[m?P:null,_jsxruntime.jsx.call(void 0, "span",{className:"text-muted-foreground",children:_optionalChain([g, 'optionalAccess', _8 => _8.label])||r.name})]}),r.value?_jsxruntime.jsx.call(void 0, "span",{className:"text-foreground font-mono font-medium tabular-nums",children:r.value.toLocaleString()}):null]})]})},r.dataKey)})})]})}var A=p.Legend;function D({className:e,hideIcon:t=!1,nameKey:n,payload:o,verticalAlign:c="bottom"}){let{config:a}=w();return _optionalChain([o, 'optionalAccess', _9 => _9.length])?_jsxruntime.jsx.call(void 0, "div",{className:_chunkSMJEDCFPcjs.a.call(void 0, "flex items-center justify-center gap-4",c==="top"?"pb-3":"pt-3",e),children:o.map(i=>{let d="value";n?d=n:i.dataKey&&(d=String(i.dataKey));let u=k(a,i,d);return _jsxruntime.jsxs.call(void 0, "div",{className:_chunkSMJEDCFPcjs.a.call(void 0, "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3"),children:[_optionalChain([u, 'optionalAccess', _10 => _10.icon])&&!t?_jsxruntime.jsx.call(void 0, u.icon,{}):_jsxruntime.jsx.call(void 0, "div",{className:"size-2 shrink-0 rounded-md",style:{backgroundColor:i.color}}),_optionalChain([u, 'optionalAccess', _11 => _11.label])]},String(i.value))})}):null}function k(e,t,n){if(!T(t))return;let o="payload"in t&&T(t.payload)?t.payload:void 0,c=E(t,o,n);return c in e?e[c]:e[n]}function T(e){return typeof e=="object"&&e!==null}function E(e,t,n){return n in e&&typeof e[n]=="string"?e[n]:t&&n in t&&typeof t[n]=="string"?t[n]:n}function O(e,t,n){let o=[];o.push(`${N[e]} [data-chart=${t}] {`);for(let[c,a]of n){let i=_optionalChain([a, 'optionalAccess', _12 => _12.theme, 'optionalAccess', _13 => _13[e]])||_optionalChain([a, 'optionalAccess', _14 => _14.color]);i&&o.push(`  --color-${c}: ${i};`)}return o.push("}"),o.join(`
-`)}function M(e,t){let n=Object.entries(t).filter(([c,a])=>_optionalChain([a, 'optionalAccess', _15 => _15.theme])||_optionalChain([a, 'optionalAccess', _16 => _16.color])),o=[];for(let c of Object.keys(N)){let a=O(c,e,n);o.push(a)}return o.join(`
-`)}exports.a = J; exports.b = $; exports.c = X; exports.d = q; exports.e = A; exports.f = D;
-//# sourceMappingURL=chunk-ZESL6WID.cjs.map

package/dist/chunk-ZESL6WID.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/codefast/codefast/packages/ui/dist/chunk-ZESL6WID.cjs","../src/components/chart.tsx"],"names":["RechartsPrimitive","createContext","useChart","children","className","props","uniqueId","useId","chartId","id","jsx","ChartContext"],"mappings":"AAAA,22BAAY,CAAC,wDCKJ,8BACGA,gFAkLI,+CA7KR,IAAA,CAAA,CAAA,CACN,IAAA,CAAA,OA4BmBC,CAAAA,KAA4C,CAAA,EAEjE,CAAA,CAAA,CAAA,CAAA,kCAAA,IAASC,CAA8B,CACrC,SAAuC,CAAA,CAEvC,CAAA,CAAA,IACE,CAAA,CAAA,+BAAA,CAAA,CAAM,CAAA,EAAA,CAAI,CAAA,CAAA,CAAA,MAAM,IAAA,KAAA,CAAA,mDAUpB,CAAA,CAAA,OAAwB,CACtB,CAAA,SACA,CAAA,CAAA,CAAA,EAAAC,CACA,CAAA,CAAA,QAAAC,CAAAA,CACA,CAAA,SACA,CAAA,CAAGC,CACL,MAIE,CAAMC,CAAAA,CAAWC,GAAM,CACjBC,CAAAA,CAAU,CAAA,IAAA,CAAA,CAAA,0BAAA,CAASC,CAAAA,CAAMH,CAAQ,CAAA,MAEvC,EAAA,CACEI,EAACC,CAAAA,CAAa,CAAA;AAmVK;AACvB","file":"/home/runner/work/codefast/codefast/packages/ui/dist/chunk-ZESL6WID.cjs","sourcesContent":[null,"'use client';\n\nimport type { ComponentProps, ComponentType, CSSProperties, JSX, ReactNode } from 'react';\nimport type { NameType, Payload, ValueType } from 'recharts/types/component/DefaultTooltipContent';\n\nimport { createContext, useContext, useId, useMemo } from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { cn } from '@/lib/utils';\n\nconst THEMES = {\n  dark: '.dark',\n  light: '',\n} as const;\n\ntype Theme = keyof typeof THEMES;\n\ninterface IconLabelConfig {\n  icon?: ComponentType;\n  label?: ReactNode;\n}\n\ninterface ColorConfig {\n  color?: string;\n  theme?: never;\n}\n\ninterface ThemeConfig {\n  theme: Record<Theme, string>;\n  color?: never;\n}\n\ntype ChartConfigItem = (ColorConfig | ThemeConfig) & IconLabelConfig;\n\ntype ChartConfig = Record<string, ChartConfigItem | undefined>;\n\ninterface ChartContextProps {\n  config: ChartConfig;\n}\n\nconst ChartContext = createContext<ChartContextProps | null>(null);\n\nfunction useChart(): ChartContextProps {\n  const context = useContext(ChartContext);\n\n  if (!context) {\n    throw new Error('useChart must be used within a <ChartContainer />');\n  }\n\n  return context;\n}\n\n/* -----------------------------------------------------------------------------\n * Component: Chart\n * -------------------------------------------------------------------------- */\n\nfunction ChartContainer({\n  id,\n  children,\n  className,\n  config,\n  ...props\n}: ComponentProps<'div'> & {\n  children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n  config: ChartConfig;\n}): JSX.Element {\n  const uniqueId = useId();\n  const chartId = `chart-${id || uniqueId}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n          className,\n        )}\n        data-chart={chartId}\n        data-slot=\"chart\"\n        {...props}\n      >\n        <ChartStyle config={config} id={chartId} />\n        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: ChartStyle\n * -------------------------------------------------------------------------- */\n\nfunction ChartStyle({ id, config }: { config: ChartConfig; id: string }): ReactNode {\n  const cssString = useMemo(() => generateCSS(id, config), [id, config]);\n\n  return <style dangerouslySetInnerHTML={{ __html: cssString }} />;\n}\n\n/* -----------------------------------------------------------------------------\n * Component: ChartTooltip\n * -------------------------------------------------------------------------- */\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/* -----------------------------------------------------------------------------\n * Component: ChartTooltipContent\n * -------------------------------------------------------------------------- */\n\nfunction ChartTooltipContent({\n  active,\n  className,\n  color,\n  formatter,\n  hideIndicator = false,\n  hideLabel = false,\n  indicator = 'dot',\n  label,\n  labelClassName,\n  labelFormatter,\n  labelKey,\n  nameKey,\n  payload,\n}: ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  Omit<ComponentProps<'div'>, 'content'> & {\n    hideIndicator?: boolean;\n    hideLabel?: boolean;\n    indicator?: 'dashed' | 'dot' | 'line';\n    labelKey?: string;\n    nameKey?: string;\n  }): ReactNode {\n  const { config } = useChart();\n\n  const tooltipLabel = useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n\n    const key = `${labelKey || item.dataKey || item.name || 'value'}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value = !labelKey && typeof label === 'string' ? config[label]?.label || label : itemConfig?.label;\n\n    if (labelFormatter) {\n      return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>;\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn('font-medium', labelClassName)}>{value}</div>;\n  }, [config, hideLabel, label, labelClassName, labelFormatter, labelKey, payload]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== 'dot';\n\n  return (\n    <div\n      className={cn(\n        'bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',\n        className,\n      )}\n    >\n      {nestLabel ? null : tooltipLabel}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || 'value'}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n          const indicatorColor = color || (item.payload as { fill?: string }).fill || item.color;\n\n          return (\n            <div\n              key={item.dataKey}\n              className={cn(\n                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5',\n                indicator === 'dot' && 'items-center',\n              )}\n            >\n              {formatter && item.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, item.payload as Payload<ValueType, NameType>[])\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn('border-(--color-border) bg-(--color-bg) rounded-xs shrink-0', {\n                          'h-2.5 w-2.5': indicator === 'dot',\n                          'my-0.5': nestLabel && indicator === 'dashed',\n                          'w-0 border border-dashed bg-transparent': indicator === 'dashed',\n                          'w-1': indicator === 'line',\n                        })}\n                        style={\n                          {\n                            '--color-bg': indicatorColor,\n                            '--color-border': indicatorColor,\n                          } as CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">{itemConfig?.label || item.name}</span>\n                    </div>\n                    {item.value ? (\n                      <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                        {item.value.toLocaleString()}\n                      </span>\n                    ) : null}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: ChartLegend\n * -------------------------------------------------------------------------- */\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/* -----------------------------------------------------------------------------\n * Component: ChartLegendContent\n * -------------------------------------------------------------------------- */\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  nameKey,\n  payload,\n  verticalAlign = 'bottom',\n}: ComponentProps<'div'> &\n  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {\n    hideIcon?: boolean;\n    nameKey?: string;\n  }): ReactNode {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>\n      {payload.map((item) => {\n        let key = 'value';\n\n        if (nameKey) {\n          key = nameKey;\n        } else if (item.dataKey) {\n          key = String(item.dataKey);\n        }\n\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n        return (\n          <div\n            key={String(item.value)}\n            className={cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3')}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"size-2 shrink-0 rounded-md\"\n                style={{\n                  backgroundColor: item.color,\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n * Helpers\n * -------------------------------------------------------------------------- */\n\n/**\n * Extracts and returns the appropriate configuration object from\n * the payload based on the specified key.\n *\n * @param config - The chart configuration object that contains various\n *   settings.\n * @param payload - The payload object that might contain nested payload data.\n * @param key - The key used to retrieve the specific configuration from the\n *   chart config.\n * @returns Returns a configuration object with optional properties `icon`,\n *   `label`, `color` or `theme`, or `undefined` if the payload is invalid or\n *   no configuration is found for the provided key.\n */\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string): ChartConfigItem | undefined {\n  if (!isValidObject(payload)) {\n    return undefined;\n  }\n\n  const nestedPayload = 'payload' in payload && isValidObject(payload.payload) ? payload.payload : undefined;\n\n  const configLabelKey = getConfigLabelKey(payload, nestedPayload, key);\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\n/**\n * Checks if the provided value is a valid object.\n *\n * @param obj - The value to check.\n * @returns - Returns true if the value is an object and not null, false\n *   otherwise.\n */\nfunction isValidObject(obj: unknown): obj is Record<string, unknown> {\n  return typeof obj === 'object' && obj !== null;\n}\n\n/**\n * Retrieves the configuration label key from either the payload or\n * nestedPayload. If the key exists in the payload and is a string, the\n * corresponding value is returned. Otherwise, if the key exists in the\n * nestedPayload and is a string, its value is returned. If the key is not\n * found as a string in either object, the key itself is returned.\n *\n * @param payload - The primary payload containing key-value pairs.\n * @param nestedPayload - An optional nested payload containing additional\n *   key-value pairs.\n * @param key - The key to search for within the payload and nestedPayload.\n *\n * @returns The string value associated with the key if found; otherwise, the\n *   key itself.\n */\nfunction getConfigLabelKey(\n  payload: Record<string, unknown>,\n  nestedPayload: Record<string, unknown> | undefined,\n  key: string,\n): string {\n  if (key in payload && typeof payload[key] === 'string') {\n    return payload[key];\n  }\n\n  if (nestedPayload && key in nestedPayload && typeof nestedPayload[key] === 'string') {\n    return nestedPayload[key];\n  }\n\n  return key;\n}\n\n/**\n * Generates CSS for a specified theme and chart configuration.\n *\n * @param theme - The theme to be used (for example, 'light', 'dark').\n * @param id - The unique identifier of the chart.\n * @param configEntries - A list of configuration entries, each containing a\n *   key and a chart configuration.\n * @returns The generated CSS as a string.\n */\nfunction generateThemeCSS(theme: Theme, id: string, configEntries: [string, ChartConfig[string]][]): string {\n  const rules: string[] = [];\n\n  rules.push(`${THEMES[theme]} [data-chart=${id}] {`);\n\n  for (const [key, itemConfig] of configEntries) {\n    const color = itemConfig?.theme?.[theme] || itemConfig?.color;\n\n    if (color) {\n      rules.push(`  --color-${key}: ${color};`);\n    }\n  }\n\n  rules.push('}');\n\n  return rules.join('\\n');\n}\n\n/**\n * Generates CSS styles for a chart based on the provided configuration and\n * themes.\n *\n * @param id - The unique identifier for the chart element.\n * @param config - Configuration object for the chart. This includes theme and\n *   color settings.\n * @returns A string containing the generated CSS rules.\n */\nfunction generateCSS(id: string, config: ChartConfig): string {\n  const themeOrColorConfig = Object.entries(config).filter(([_, itemConfig]) => itemConfig?.theme || itemConfig?.color);\n\n  const allRules: string[] = [];\n\n  for (const theme of Object.keys(THEMES)) {\n    const themeCSS = generateThemeCSS(theme as Theme, id, themeOrColorConfig);\n\n    allRules.push(themeCSS);\n  }\n\n  return allRules.join('\\n');\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport type { ChartConfig };\nexport { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };\n"]}