@sikka/hawa/dist/combobox/index.mjs.map

Modern UI Kit made with Tailwind

{"version":3,"sources":["../../elements/combobox/Combobox.tsx","../../util/index.ts","../../elements/command/Command.tsx","../../elements/dialog/Dialog.tsx","../../elements/helperText/HelperText.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/popover/Popover.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { cn } from \"@util/index\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandInputProps,\n  CommandItem,\n  CommandList,\n} from \"../command\";\nimport { HelperText } from \"../helperText\";\nimport { Label, LabelProps } from \"../label\";\nimport { PopoverContent, PopoverTrigger } from \"../popover\";\nimport { Skeleton } from \"../skeleton\";\n\ntype ComboboxTypes<T> = {\n  labelKey?: keyof T | any;\n  valueKey?: keyof T | any;\n  data: T[];\n  width?: string;\n  texts?: {\n    noItems?: string;\n    placeholder?: string;\n    searchPlaceholder?: string;\n  };\n  isLoading?: boolean;\n  helperText?: any;\n  popoverClassName?: string;\n  /** This the same value as the one with the key valueKey */\n  defaultValue?: string;\n  preview?: boolean;\n  hideInput?: boolean;\n  direction?: DirectionType;\n  inputProps?: CommandInputProps;\n  id?: string;\n  /** The label of the input field   */\n  label?: any;\n  labelProps?: LabelProps;\n  /** If true, it will show a red asterisk next to the label*/\n  isRequired?: boolean;\n  onChange?: (e: any) => void;\n  renderOption?: (item: T) => React.ReactNode;\n  renderSelected?: (item: T) => React.ReactNode;\n};\nexport const Combobox = React.forwardRef<HTMLDivElement, ComboboxTypes<any>>(\n  (\n    {\n      labelKey = \"label\",\n      valueKey = \"value\",\n      defaultValue = \"\",\n      popoverClassName,\n      direction,\n      labelProps,\n      inputProps,\n      data,\n      renderOption,\n      renderSelected,\n      ...props\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false);\n    const [value, setValue] = React.useState(defaultValue);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    // function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {\n    //   return key.split(\".\").reduce((o, k) => (o || {})[k], obj);\n    // }\n\n    function getProperty<T>(obj: T, key: string): any {\n      return key.split(\".\").reduce((o: any, k: string) => (o || {})[k], obj);\n    }\n\n    const handleOpenChange = (open: boolean) => {\n      if (!(props.isLoading || props.preview)) {\n        setOpen(open);\n      }\n    };\n    const selectedItem = data.find(\n      (item) => getProperty(item, valueKey) === value,\n    );\n\n    return (\n      <div\n        className={cn(\n          \"hawa-relative hawa-flex hawa-h-fit hawa-flex-col hawa-gap-2\",\n          props.width === \"fit\" ? \"hawa-w-fit\" : \"hawa-w-full\",\n        )}\n        ref={containerRef}\n      >\n        {props.label && <Label {...labelProps}>{props.label}</Label>}\n\n        <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n          <PopoverTrigger asChild>\n            {props.isLoading ? (\n              <div className=\"hawa-pb-2\">\n                <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n              </div>\n            ) : (\n              <div className=\"hawa-flex hawa-flex-col hawa-items-start hawa-gap-2\">\n                <div\n                  className={cn(\n                    \"hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800\",\n                    props.preview ? \"hawa-opacity-100\" : \"hawa-opacity-0\",\n                  )}\n                ></div>\n                <button\n                  role=\"combobox\"\n                  type=\"button\"\n                  aria-expanded={open}\n                  className={cn(\n                    \"hawa-inline-flex hawa-h-10 hawa-w-full hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-md hawa-border hawa-py-2 hawa-text-sm hawa-font-normal hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n                    props.preview\n                      ? \"hawa-cursor-default hawa-rounded-none hawa-border-transparent hawa-px-0\"\n                      : \"hawa-bg-background hawa-px-3\",\n                  )}\n                >\n                  {selectedItem\n                    ? renderSelected\n                      ? renderSelected(selectedItem)\n                      : getProperty(selectedItem, labelKey)\n                    : props.texts?.placeholder || \". . .\"}\n                  {/* {value\n                    ? getProperty(\n                        data.find((item: any) => item[valueKey] === value) ||\n                          {},\n                        labelKey,\n                      )\n                    : props.texts?.placeholder || \". . .\"} */}\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    className={cn(\n                      \"hawa-icon hawa-transition-all\",\n                      !props.preview\n                        ? \"hawa-visible hawa-opacity-100\"\n                        : \"hawa-invisible hawa-opacity-0\",\n                    )}\n                    aria-label=\"Chevron down icon\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  >\n                    <path d=\"m6 9 6 6 6-6\" />\n                  </svg>\n                </button>\n                <HelperText helperText={props.helperText} />\n              </div>\n            )}\n          </PopoverTrigger>\n          <PopoverContent\n            sideOffset={0}\n            className={cn(\"popover-w-parent\", props.helperText && \"-hawa-mt-4\")}\n            dir={direction}\n            container={containerRef.current}\n          >\n            <Command\n              filter={(value, search) => {\n                if (value.toLowerCase().includes(search.toLowerCase()))\n                  return 1;\n                return 0;\n              }}\n            >\n              {!props.hideInput && (\n                <CommandInput\n                  {...inputProps}\n                  dir={direction}\n                  placeholder={props.texts?.searchPlaceholder || \"Search\"}\n                />\n              )}\n              <CommandEmpty>\n                {props.texts?.noItems || \"No items found.\"}\n              </CommandEmpty>\n              <CommandList>\n                <CommandGroup\n                  className={cn(\n                    \"hawa-max-h-[200px]\",\n                    data.length > 0 && \"hawa-overflow-y-auto\",\n                  )}\n                >\n                  {data.map((item: any, i) => (\n                    <CommandItem\n                      key={i}\n                      onSelect={() => {\n                        const newValue = getProperty(item, valueKey);\n                        setValue(\n                          newValue === value ? \"\" : (newValue as string),\n                        );\n                        if (props.onChange) {\n                          props.onChange(\n                            newValue === value ? \"\" : (newValue as string),\n                          );\n                        }\n                        setOpen(false);\n                      }}\n                    >\n                      <svg\n                        aria-label=\"Check Icon\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"24\"\n                        height=\"24\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        className={cn(\n                          \"hawa-icon\",\n                          value === getProperty(item, valueKey)\n                            ? \"hawa-opacity-100\"\n                            : \"hawa-opacity-0\",\n                        )}\n                        style={{ marginInlineEnd: \"0.5rem\" }}\n                      >\n                        <polyline points=\"20 6 9 17 4 12\" />\n                      </svg>\n                      {renderOption\n                        ? renderOption(item)\n                        : getProperty(item, labelKey)}\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </PopoverPrimitive.Root>\n      </div>\n    );\n  },\n);\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { DialogProps, DialogPortal, Dialog } from \"@radix-ui/react-dialog\";\nimport { cn } from \"@util/index\";\nimport { Command as CommandPrimitive } from \"cmdk\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { DialogContent } from \"../dialog\";\n\ninterface CommandProps\n  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {\n  // Include additional props if necessary\n}\n\ninterface CommandDialogProps extends DialogProps {}\n\nexport interface CommandInputProps\n  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {}\n\ninterface CommandListProps\n  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> {}\n\ninterface CommandEmptyProps\n  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> {}\n\ninterface CommandGroupProps\n  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> {}\n\ninterface CommandSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> {}\n\ninterface CommandItemProps\n  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> {}\n\ninterface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  CommandProps\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-overflow-hidden hawa-rounded-md hawa-bg-popover hawa-text-popover-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"hawa-overflow-hidden hawa-p-0 hawa-shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:hawa-pt-0 [&_[cmdk-group]]:hawa-px-2 [&_[cmdk-input-wrapper]_svg]:hawa-h-5 [&_[cmdk-input-wrapper]_svg]:hawa-w-5 [&_[cmdk-input]]:hawa-h-12 [&_[cmdk-item]]:hawa-px-2 [&_[cmdk-item]]:hawa-py-3 [&_[cmdk-item]_svg]:hawa-h-5 [&_[cmdk-item]_svg]:hawa-w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  CommandInputProps\n>(({ className, ...props }, ref) => (\n  <div\n    className=\"hawa-flex hawa-items-center hawa-border-b hawa-px-3\"\n    cmdk-input-wrapper=\"\"\n  >\n    <svg\n      aria-label=\"Search Icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"hawa-icon hawa-me-2 hawa-shrink-0 hawa-opacity-50\"\n    >\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n      <path d=\"m21 21-4.3-4.3\" />\n    </svg>\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"hawa-flex hawa-h-11 hawa-w-full hawa-rounded-md hawa-bg-transparent hawa-py-3 hawa-text-sm hawa-outline-none placeholder:hawa-text-muted-foreground disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  </div>\n));\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  CommandListProps\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\n      \"hawa-max-h-[300px] hawa-overflow-y-auto hawa-overflow-x-hidden\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  CommandEmptyProps\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"hawa-py-6 hawa-text-center hawa-text-sm\"\n    {...props}\n  />\n));\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  CommandGroupProps\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"hawa-overflow-hidden hawa-p-1 hawa-text-foreground [&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-py-1.5 [&_[cmdk-group-heading]]:hawa-text-xs [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  CommandSeparatorProps\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"hawa--mx-1 hawa-h-px hawa-bg-border\", className)}\n    {...props}\n  />\n));\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  CommandItemProps\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"hawa-relative hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-rounded-sm hawa-px-2 hawa-py-1.5 hawa-text-sm hawa-outline-none aria-selected:hawa-bg-accent aria-selected:hawa-text-accent-foreground data-[disabled='true']:hawa-pointer-events-none data-[disabled='true']:hawa-opacity-50\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement> & CommandShortcutProps) => {\n  return (\n    <span\n      className={cn(\n        \"hawa-ms-auto hawa-text-xs hawa-tracking-widest hawa-text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport type FullCommandItem = {\n  type: \"group\" | \"separator\";\n  heading?: string;\n  items?: {\n    icon: React.ElementType;\n    label: string | React.ReactNode;\n    action: () => void;\n    shortcut?: string;\n  }[];\n};\ntype FullCommandProps = {\n  items: FullCommandItem[];\n  direction?: DirectionType;\n  onActionClick?: () => void;\n  texts?: {\n    searchPlaceholder?: string;\n    emptyText?: string;\n  };\n};\n\nconst FullCommand = ({\n  items,\n  direction = \"ltr\",\n  texts,\n  onActionClick,\n}: FullCommandProps) => {\n  return (\n    <Command\n      dir={direction}\n      className=\"hawa-rounded-lg hawa-border hawa-shadow-md !hawa-h-full\"\n    >\n      <CommandInput\n        placeholder={texts?.searchPlaceholder || \"Type a command or search...\"}\n      />\n      <CommandList>\n        <CommandEmpty>{texts?.emptyText || \"No results found.\"}</CommandEmpty>\n        {items.map((item, index) => {\n          if (item.type === \"group\") {\n            return (\n              <CommandGroup heading={item.heading} key={index}>\n                {item.items?.map((subItem, subIndex) => (\n                  <CommandItem\n                    key={subIndex}\n                    onSelect={() => {\n                      if (onActionClick) onActionClick();\n                      subItem.action();\n                    }}\n                  >\n                    <subItem.icon className=\"hawa-icon hawa-me-2\" />\n                    <span>{subItem.label}</span>\n                    {subItem.shortcut && (\n                      <CommandShortcut>{subItem.shortcut}</CommandShortcut>\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            );\n          } else if (item.type === \"separator\") {\n            return <CommandSeparator key={index} />;\n          }\n          return null;\n        })}\n      </CommandList>\n    </Command>\n  );\n};\n\ntype AppCommandProps = {\n  commandProps: Omit<FullCommandProps, \"onActionClick\">;\n  dialogProps: DialogProps;\n  onActionClick?: () => void;\n};\nconst AppCommand = ({\n  commandProps,\n  dialogProps,\n  onActionClick,\n}: AppCommandProps) => {\n  return (\n    <Dialog {...dialogProps}>\n      <DialogContent\n        hideCloseButton\n        className=\"hawa-overflow-hidden !hawa-p-0 hawa-shadow-l\"\n        // !hawa-min-h-[50%]\n      >\n        <FullCommand {...commandProps} onActionClick={onActionClick} />\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nCommandShortcut.displayName = \"CommandShortcut\";\nCommandItem.displayName = CommandPrimitive.Item.displayName;\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\nCommandList.displayName = CommandPrimitive.List.displayName;\nCommand.displayName = CommandPrimitive.displayName;\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nexport {\n  AppCommand,\n  FullCommand,\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n","import * as React from \"react\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cn } from \"@util/index\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (\n  <DialogPrimitive.Portal {...props} />\n);\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"hawa-fixed hawa-inset-0 hawa-z-50 hawa-bg-background/80 hawa-backdrop-blur-sm data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    persist?: boolean;\n    hideCloseButton?: boolean;\n    container?: HTMLElement;\n    overlayProps?: React.ComponentPropsWithoutRef<typeof DialogOverlay>;\n    classNames?: {\n      content?: string;\n      overlay?: string;\n      closeButton?: string;\n    };\n    ids?: {\n      overlay?: string;\n      closeButton?: string;\n      closeIcon?: string;\n    };\n  }\n>(\n  (\n    {\n      ids,\n      className,\n      classNames,\n      children,\n      persist,\n      hideCloseButton,\n      overlayProps,\n      ...props\n    },\n    ref,\n  ) => (\n    <DialogPortal container={props.container}>\n      <DialogOverlay\n        className={classNames?.overlay}\n        id={ids?.overlay}\n        {...overlayProps}\n      />\n      <DialogPrimitive.Content\n        onPointerDownOutside={(e) => {\n          if (persist) {\n            e.preventDefault();\n          }\n        }}\n        ref={ref}\n        className={cn(\n          \"hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-[90%] hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-shadow-lg hawa-transition-all hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] hawa-rounded md:hawa-w-full\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {!hideCloseButton && (\n          <DialogPrimitive.Close\n            className={cn(\n              \"hawa-absolute hawa-top-4 hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground\",\n              props.dir === \"rtl\" ? \"hawa-left-4\" : \"hawa-right-4\",\n              classNames?.closeButton,\n            )}\n            id={ids?.closeButton}\n          >\n            <svg\n              id={ids?.closeIcon}\n              aria-label=\"Close Icon\"\n              aria-hidden=\"true\"\n              className=\"hawa-h-5 hawa-w-5\"\n              fill=\"currentColor\"\n              viewBox=\"0 0 20 20\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                clipRule=\"evenodd\"\n              ></path>\n            </svg>\n            <span className=\"hawa-sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  ),\n);\n\nconst DialogCarouselContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    hideCloseButton?: boolean;\n    hidePrevButton?: boolean;\n    persist?: boolean;\n    onPrev?: () => void;\n  }\n>(\n  (\n    {\n      className,\n      children,\n      onPrev,\n      persist,\n      hideCloseButton,\n      hidePrevButton,\n      ...props\n    },\n    ref,\n  ) => (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        onPointerDownOutside={(e) => {\n          if (persist) {\n            e.preventDefault();\n          }\n        }}\n        ref={ref}\n        className={cn(\n          \"hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-full hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-pt-14 hawa-shadow-lg hawa-transition-all hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] sm:hawa-rounded md:hawa-w-full\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <div\n          className={cn(\n            \"hawa-absolute hawa-top-0 hawa-flex hawa-w-full hawa-flex-row hawa-p-4\",\n            onPrev ? \"hawa-justify-between\" : \"hawa-justify-end\",\n          )}\n        >\n          {hidePrevButton ? (\n            <div />\n          ) : (\n            <div\n              onClick={onPrev}\n              className={cn(\n                \"hawa-end-0 hawa-cursor-pointer hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground\",\n                props.dir === \"rtl\" && \"hawa-rotate-180\",\n              )}\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                className=\"hawa-h-6 hawa-w-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <path d=\"m15 18-6-6 6-6\" />\n              </svg>\n            </div>\n          )}\n          {!hideCloseButton && (\n            <DialogPrimitive.Close\n              className={cn(\n                \"hawa-end-0 hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground\",\n                props.dir === \"rtl\" ? \"hawa-left-4\" : \"hawa-right-4\",\n              )}\n            >\n              <svg\n                aria-label=\"Close Icon\"\n                aria-hidden=\"true\"\n                className=\"hawa-h-6 hawa-w-6\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 20 20\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                  clipRule=\"evenodd\"\n                ></path>\n              </svg>\n              <span className=\"hawa-sr-only\">Close</span>\n            </DialogPrimitive.Close>\n          )}\n        </div>\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  ),\n);\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-text-center sm:hawa-text-left\",\n      className,\n    )}\n    {...props}\n  />\n);\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"hawa-text-start hawa-text-lg hawa-font-semibold hawa-leading-none hawa-tracking-tight\",\n      className,\n    )}\n    {...props}\n  />\n));\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\n      \"hawa-text-start hawa-text-sm hawa-text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nconst DialogFooter = ({\n  className, \n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"hawa-flex hawa-flex-col xs:hawa-flex-row sm:hawa-justify-end hawa-gap-2\",\n      className,\n    )}\n    {...props}\n  />\n);\ninterface DialogCarouselProps {\n  children: React.ReactNode;\n  stepsApi?: any;\n  stepsRef?: any;\n  direction?: DirectionType;\n}\nconst DialogCarousel: React.FC<DialogCarouselProps> = ({\n  stepsApi,\n  stepsRef,\n  children,\n  direction,\n}) => {\n  React.useEffect(() => {\n    if (stepsApi) {\n      stepsApi.reInit();\n    }\n  }, [stepsApi, children]);\n  return (\n    <div className=\"hawa-overflow-hidden\">\n      <div ref={stepsRef} dir={direction}>\n        <div\n          className=\"hawa-flex\"\n          style={{\n            transition: \"height 0.2s\",\n          }}\n        >\n          {React.Children.map(children, (child, index) => (\n            <div\n              className={cn(\n                \"hawa-flex hawa-h-fit hawa-flex-[0_0_100%] hawa-items-center hawa-justify-center\",\n              )}\n              key={index}\n            >\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\ninterface DialogStepsProps {\n  currentStep: string;\n  // TODO: update this name\n  visibleStepRef: React.RefObject<HTMLDivElement>;\n  children: React.ReactNode;\n}\nconst DialogSteps: React.FC<DialogStepsProps> = ({\n  currentStep,\n  visibleStepRef,\n  children,\n}) => {\n  const [dialogHeight, setDialogHeight] = React.useState<any>(null);\n  React.useEffect(() => {\n    if (visibleStepRef.current) {\n      setDialogHeight(visibleStepRef.current.offsetHeight);\n      console.log(\"height is \", visibleStepRef.current.offsetHeight);\n    }\n  }, [currentStep, visibleStepRef]);\n\n  return (\n    <div\n      className=\"hawa-relative hawa-overflow-clip\"\n      style={{\n        height: dialogHeight || \"fit-content\",\n        transition: \"height 0.2s\",\n      }}\n    >\n      {React.Children.map(children, (child, index) => (\n        <div\n          ref={currentStep === `step-${index + 1}` ? visibleStepRef : null}\n          className={cn(\n            currentStep === `step-${index + 1}`\n              ? \"hawa-visible hawa-block\"\n              : \"hawa-invisible hawa-hidden\",\n          )}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  );\n};\ninterface DialogStepProps {\n  id: string;\n  children: React.ReactNode;\n  className?: string;\n  stepRef?: any;\n}\nconst DialogStep: React.FC<DialogStepProps> = ({\n  id,\n  children,\n  className,\n  stepRef,\n}) => {\n  return (\n    <div\n      id={id}\n      ref={stepRef}\n      className={cn(\"hawa-w-full hawa-px-1\", className)}\n    >\n      {children}\n    </div>\n  );\n};\ninterface DialogBodyProps {\n  children: React.ReactNode;\n  className?: string;\n}\nconst DialogBody: React.FC<DialogBodyProps> = ({ children, className }) => {\n  return <div className={cn(\"hawa-py-6\", className)}>{children}</div>;\n};\n\nDialogBody.displayName = \"DialogBody\";\nDialogStep.displayName = \"DialogStep\";\nDialogSteps.displayName = \"DialogSteps\";\nDialogCarousel.displayName = \"DialogCarousel\";\nDialogCarouselContent.displayName = \"DialogCarouselContent\";\nDialogHeader.displayName = \"DialogHeader\";\nDialogFooter.displayName = \"DialogFooter\";\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\nDialogPortal.displayName = DialogPrimitive.Portal.displayName;\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\nDialogContent.displayName = DialogPrimitive.Content.displayName;\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogCarousel,\n  DialogCarouselContent,\n  DialogSteps,\n  DialogStep,\n  DialogBody,\n  DialogDescription,\n};\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport const HelperText = ({ helperText }: { helperText?: any }) => (\n  <p\n    className={cn(\n      \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n      helperText ? \"hawa-h-4 hawa-opacity-100\" : \"hawa-h-0 hawa-opacity-0\",\n    )}\n  >\n    {helperText}\n  </p>\n);\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n  hint?: React.ReactNode;\n  hintSide?: PositionType;\n  htmlFor?: string;\n  required?: boolean;\n};\n\nconst Label = React.forwardRef<\n  HTMLLabelElement,\n  React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n  <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n    <label\n      ref={ref}\n      className={cn(\n        \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n    </label>\n    {hint && (\n      <Tooltip\n        content={hint}\n        side={hintSide}\n        triggerProps={{\n          tabIndex: -1,\n          onClick: (event) => event.preventDefault(),\n        }}\n      >\n        <div>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n            <path d=\"M12 17h.01\" />\n          </svg>\n        </div>\n      </Tooltip>\n    )}\n  </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n    size?: \"default\" | \"small\" | \"large\";\n  }\n>(({ className, sideOffset = 4, size = \"default\", ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n      {\n        \"hawa-text-xs\": size === \"small\",\n        \"hawa-text-xl\": size === \"large\",\n      },\n      className,\n    )}\n    {...props}\n  />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n  /** Controls the open state of the tooltip. */\n  open?: any;\n  /** Specifies the side where the tooltip will appear. */\n  side?: PositionType;\n  /** Content to be displayed within the tooltip. */\n  content?: any;\n  /** Elements to which the tooltip is anchored. */\n  children?: any;\n  /** Sets the default open state of the tooltip. */\n  defaultOpen?: any;\n  /** Event handler for open state changes. */\n  onOpenChange?: any;\n  /** Duration of the delay before the tooltip appears. */\n  delayDuration?: any;\n  /** Size of the tooltip. */\n  size?: \"default\" | \"small\" | \"large\";\n  /** Disables the tooltip. */\n  disabled?: boolean;\n  triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n  contentProps?: TooltipPrimitive.TooltipContentProps;\n  providerProps?: TooltipPrimitive.TooltipProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n  side,\n  size,\n  open,\n  content,\n  children,\n  disabled,\n  defaultOpen,\n  onOpenChange,\n  triggerProps,\n  contentProps,\n  providerProps,\n  delayDuration = 300,\n  ...props\n}) => {\n  return (\n    <TooltipPrimitive.TooltipProvider\n      delayDuration={delayDuration}\n      {...providerProps}\n    >\n      <TooltipPrimitive.Root\n        open={!disabled && open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        {...props}\n      >\n        <TooltipPrimitive.Trigger {...triggerProps}>\n          {children}\n        </TooltipPrimitive.Trigger>\n        <TooltipContent\n          size={size}\n          side={side}\n          align=\"center\"\n          {...contentProps}\n          style={{\n            ...contentProps?.style,\n            maxWidth: \"var(--radix-tooltip-content-available-width)\",\n            maxHeight: \"var(--radix-tooltip-content-available-height)\",\n          }}\n        >\n          {content}\n        </TooltipContent>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.TooltipProvider>\n  );\n};\n\nexport { Tooltip };\n","import * as React from \"react\";\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n    container?: HTMLElement | null;\n  }\n>(\n  (\n    { className, align = \"center\", sideOffset = 4, container, ...props },\n    ref,\n  ) => (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Content\n        ref={ref}\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  ),\n);\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\ninterface PopoverProps {\n  side?: PositionType;\n  align?: \"start\" | \"center\" | \"end\";\n  trigger?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n  sideOffset?: number;\n  disableTrigger?: any;\n  width?: \"trigger\" | \"default\";\n  open?: boolean;\n  contentProps?: PopoverPrimitive.PopoverContentProps;\n  triggerProps?: PopoverPrimitive.PopoverTriggerProps;\n}\n\ntype HawaPopoverTypes = PopoverProps &\n  React.ComponentProps<typeof PopoverPrimitive.Root>;\n\nconst Popover: React.FC<HawaPopoverTypes> = ({\n  trigger,\n  children,\n  className,\n  align = \"center\",\n  side,\n  sideOffset = 4,\n  open,\n  width = \"default\",\n  disableTrigger,\n  contentProps,\n  triggerProps,\n  ...props\n}) => {\n  let widthStyles = {\n    trigger: \"var(--radix-popover-trigger-width)\",\n    default: \"auto\",\n  };\n\n  return (\n    <PopoverPrimitive.Root open={open} {...props}>\n      <PopoverPrimitive.Trigger\n        className=\"hawa-w-full\"\n        disabled={disableTrigger}\n        {...triggerProps}\n      >\n        {trigger}\n      </PopoverPrimitive.Trigger>\n      <PopoverContent\n        side={side}\n        className={className}\n        align={align}\n        sideOffset={sideOffset}\n        style={{\n          width: widthStyles[width],\n          maxWidth: \"var(--radix-popover-content-available-width)\",\n          maxHeight: \"var(--radix-popover-content-available-height)\",\n        }}\n        {...contentProps}\n      >\n        {children}\n      </PopoverContent>\n    </PopoverPrimitive.Root>\n  );\n};\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\nconst PopoverPortal = PopoverPrimitive.Portal;\nconst PopoverRoot = PopoverPrimitive.Root;\n\nexport { Popover, PopoverPortal, PopoverRoot, PopoverContent, PopoverTrigger };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  animation?: \"none\" | \"pulse\" | \"shimmer\";\n  content?: any;\n  fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n  className,\n  content,\n  animation = \"pulse\",\n  fade,\n  ...props\n}: SkeletonProps) {\n  const animationStyles = {\n    none: \"hawa-rounded hawa-bg-muted\",\n    pulse: \"hawa-animate-pulse hawa-rounded hawa-bg-muted\",\n    shimmer:\n      \"hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10\",\n  };\n  const fadeStyle = {\n    bottom: \"hawa-mask-fade-bottom\",\n    top: \"hawa-mask-fade-top\",\n    right: \"hawa-mask-fade-right\",\n    left: \"hawa-mask-fade-left \",\n  };\n\n  return (\n    <div\n      className={cn(\n        animationStyles[animation],\n        content &&\n          \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\",\n        fade && fadeStyle[fade],\n        className,\n      )}\n      {...props}\n    >\n      {content && content}\n    </div>\n  );\n}\n\nexport { Skeleton };\n"],"mappings":"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