@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Dialog as SDialog,\n  DialogContent as SDialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@dsui/ui/components/dialog\";\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@dsui/ui/components/alert-dialog\";\nimport { ScrollArea } from \"@dsui/ui/components/scroll-area\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { BasicAnimation } from \"@/types/variables\";\nimport { animationClass } from \"@/utils/animations\";\nimport { AlertTriangle, Info, CheckCircle2, AlertCircle } from \"lucide-react\";\nimport Button, { type ButtonProps } from \"../Button/Button\";\n\nexport type DialogVariant = \"dialog\" | \"confirm\" | \"alert\" | \"info\" | \"warning\";\nexport type DialogSize =\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\"\n  | \"full\";\nexport type DialogPosition =\n  | \"center\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"top-left\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-right\";\n\nexport interface DialogButtonConfig extends Omit<ButtonProps, \"children\"> {\n  text?: React.ReactNode;\n  onClick?: () => void;\n}\n\nexport interface DialogProps {\n  // Core props\n  variant?: DialogVariant;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n\n  // Content\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  children?: React.ReactNode;\n  trigger?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  // Behavior\n  closeOnEsc?: boolean;\n  closeOnOutside?: boolean;\n  showCloseButton?: boolean;\n\n  // Layout\n  position?: DialogPosition;\n  size?: DialogSize;\n  fullscreen?: boolean;\n  scrollable?: boolean;\n  stickyHeader?: boolean;\n  stickyFooter?: boolean;\n\n  // Animation\n  animation?: BasicAnimation;\n\n  // Styling\n  className?: string;\n  contentClassName?: string;\n  headerClassName?: string;\n  titleClassName?: string;\n  descriptionClassName?: string;\n  footerClassName?: string;\n  overlayClassName?: string;\n\n  // Overlay\n  backdropFilter?: number;\n  overlay?: \"dark\" | \"light\";\n\n  // Alert/Confirm buttons\n  confirmButton?: DialogButtonConfig;\n  cancelButton?: DialogButtonConfig;\n\n  // Alert/Confirm specific\n  showIcon?: boolean;\n}\n\nconst variantIcons = {\n  dialog: null,\n  confirm: (\n    <div className=\"size-12 flex items-center justify-center rounded-full bg-success/10 mx-auto mb-4\">\n      <CheckCircle2 className=\"size-6 text-success\" />\n    </div>\n  ),\n  alert: (\n    <div className=\"size-12 flex items-center justify-center rounded-full bg-error/10 mx-auto mb-4\">\n      <AlertCircle className=\"size-5 text-error\" />\n    </div>\n  ),\n  info: (\n    <div className=\"size-12 flex items-center justify-center rounded-full bg-blue-500/10 mx-auto mb-4\">\n      <Info className=\"size-5 text-blue-500\" />\n    </div>\n  ),\n  warning: (\n    <div className=\"size-12 flex items-center justify-center rounded-full bg-warning/10 mx-auto mb-4\">\n      <AlertTriangle className=\"size-5 text-warning\" />\n    </div>\n  ),\n};\n\nconst variantColors = {\n  dialog: \"\",\n  confirm: \"border-blue-500/20\",\n  alert: \"border-red-500/20\",\n  info: \"border-blue-500/20\",\n  warning: \"border-yellow-500/20\",\n};\n\nconst sizeClasses: Record<DialogSize, string> = {\n  sm: \"sm:max-w-sm\",\n  md: \"sm:max-w-md\",\n  lg: \"sm:max-w-lg\",\n  xl: \"sm:max-w-xl\",\n  \"2xl\": \"sm:max-w-2xl max-h-[90vh]\",\n  \"3xl\": \"sm:max-w-3xl max-h-[90vh]\",\n  \"4xl\": \"sm:max-w-4xl max-h-[90vh]\",\n  full: \"sm:max-w-[95vw] h-[98vh]\",\n};\n\nconst positionClasses: Record<DialogPosition, string> = {\n  center: \"!top-[50%] !left-[50%] !translate-x-[-50%] !translate-y-[-50%]\",\n  top: \"!top-4 !left-[50%] !translate-x-[-50%] !translate-y-0\",\n  bottom: \"!top-auto !bottom-4 !left-[50%] !translate-x-[-50%] !translate-y-0\",\n  left: \"!left-4 !top-[50%] !translate-x-0 !translate-y-[-50%]\",\n  right: \"!left-auto !right-4 !top-[50%] !translate-x-0 !translate-y-[-50%]\",\n  \"top-left\": \"!top-4 !left-4 !translate-x-0 !translate-y-0\",\n  \"top-right\": \"!top-4 !left-auto !right-4 !translate-x-0 !translate-y-0\",\n  \"bottom-left\": \"!top-auto !bottom-4 !left-4 !translate-x-0 !translate-y-0\",\n  \"bottom-right\":\n    \"!top-auto !bottom-4 !left-auto !right-4 !translate-x-0 !translate-y-0\",\n};\n\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {\n  const {\n    variant = \"dialog\",\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    trigger,\n    footer,\n    closeOnEsc = true,\n    closeOnOutside = true,\n    showCloseButton = true,\n    position = \"center\",\n    size = \"md\",\n    fullscreen = false,\n    scrollable = true,\n    stickyHeader = false,\n    stickyFooter = false,\n    animation,\n    className,\n    contentClassName,\n    headerClassName,\n    titleClassName,\n    descriptionClassName,\n    footerClassName,\n    // overlayClassName, // Not used in current implementation\n    confirmButton,\n    cancelButton,\n    showIcon = true,\n    backdropFilter = 2,\n    overlay = \"dark\",\n  } = props;\n\n  const animationResult = useMemo(() => {\n    return animation ? animationClass(animation) : { className: \"\" };\n  }, [animation]);\n\n  const contentClasses = cn(\n    // Remove default padding and gap to allow custom header/footer\n    \"!p-0 !gap-0 flex flex-col\",\n    sizeClasses[fullscreen ? \"full\" : size],\n    positionClasses[position],\n    variantColors[variant],\n    animationResult.className,\n    fullscreen ? \"h-[98vh]\" : \"max-h-[90vh]\"\n  );\n\n  const headerClasses = cn(\n    \"px-6 pt-6 text-left\",\n    !scrollable && \"contents space-y-0\",\n    headerClassName\n  );\n\n  const footerClasses = cn(\n    \"px-6 pb-6 sm:justify-end\",\n    !scrollable && \"border-t py-4\",\n    footerClassName\n  );\n\n  const icon = showIcon ? variantIcons[variant] : null;\n\n  const headerComponents = useMemo(() => {\n    return title || icon || description ? (\n      <AlertDialogHeader\n        className={cn(\n          \"flex items-center gap-2 py-4\",\n          { \"border-b\": stickyHeader },\n          headerClasses\n        )}\n      >\n        {(title || icon) && (\n          <AlertDialogTitle className={cn(titleClassName)}>\n            {icon}\n            {title}\n          </AlertDialogTitle>\n        )}\n        {description && (\n          <AlertDialogDescription className={descriptionClassName}>\n            {description}\n          </AlertDialogDescription>\n        )}\n      </AlertDialogHeader>\n    ) : null;\n  }, [\n    title,\n    icon,\n    description,\n    headerClasses,\n    titleClassName,\n    descriptionClassName,\n    stickyHeader,\n  ]);\n\n  const footerComponents = useMemo(() => {\n    // Merge configs with defaults\n    const mergedConfirmButton: DialogButtonConfig = {\n      variant: \"solid\",\n      color: \"primary\",\n      ...confirmButton,\n      text: confirmButton?.text ?? \"Confirm\",\n    };\n\n    const mergedCancelButton: DialogButtonConfig = {\n      variant: \"outline\",\n      ...cancelButton,\n      text: cancelButton?.text ?? \"Cancel\",\n    };\n\n    return footer || confirmButton || cancelButton ? (\n      <AlertDialogFooter\n        className={cn(\"py-4\", { \"border-t\": stickyFooter }, footerClasses)}\n      >\n        {footer || (\n          <>\n            {cancelButton && (\n              <Button\n                {...mergedCancelButton}\n                onClick={() => {\n                  mergedCancelButton.onClick?.();\n                }}\n              >\n                {mergedCancelButton.text}\n              </Button>\n            )}\n            {confirmButton && (\n              <Button\n                {...mergedConfirmButton}\n                onClick={() => {\n                  mergedConfirmButton.onClick?.();\n                }}\n              >\n                {mergedConfirmButton.text}\n              </Button>\n            )}\n          </>\n        )}\n      </AlertDialogFooter>\n    ) : null;\n  }, [footer, footerClasses, confirmButton, cancelButton, stickyFooter]);\n\n  // For alert-style dialogs (confirm, alert, info, warning)\n  if (variant !== \"dialog\") {\n    return (\n      <AlertDialog open={open} onOpenChange={onOpenChange}>\n        {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}\n        <AlertDialogContent\n          ref={ref}\n          className={cn(className, contentClasses)}\n          onEscapeKeyDown={(e) => !closeOnEsc && e.preventDefault()}\n          noDefaultAnimation={!!animation}\n          backdropFilter={backdropFilter}\n          overlay={overlay}\n        >\n          {stickyHeader && headerComponents}\n\n          <ScrollArea className=\"flex max-h-full flex-col overflow-hidden\">\n            {!stickyHeader && headerComponents}\n            {children && (\n              <div className={cn(\"px-6 py-4\", contentClassName)}>\n                {children}\n              </div>\n            )}\n            {!stickyFooter && footerComponents}\n          </ScrollArea>\n\n          {stickyFooter && footerComponents}\n        </AlertDialogContent>\n      </AlertDialog>\n    );\n  }\n\n  // Regular dialog\n  return (\n    <SDialog open={open} onOpenChange={onOpenChange}>\n      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}\n      <SDialogContent\n        ref={ref}\n        className={cn(className, contentClasses)}\n        showCloseButton={showCloseButton}\n        onEscapeKeyDown={(e) => !closeOnEsc && e.preventDefault()}\n        onInteractOutside={(e) => !closeOnOutside && e.preventDefault()}\n        noDefaultAnimation={!!animation}\n        backdropFilter={backdropFilter}\n        overlay={overlay}\n      >\n        {stickyHeader && (title || description) && (\n          <DialogHeader\n            className={cn({ \"py-4 border-b\": stickyHeader }, headerClasses)}\n          >\n            {title && (\n              <DialogTitle className={titleClassName}>{title}</DialogTitle>\n            )}\n            {description && (\n              <DialogDescription className={descriptionClassName}>\n                {description}\n              </DialogDescription>\n            )}\n          </DialogHeader>\n        )}\n        <ScrollArea className=\"flex max-h-full flex-col overflow-hidden\">\n          {!stickyHeader && (title || description) && (\n            <DialogHeader className={cn(\"py-4\", headerClasses)}>\n              {title && (\n                <DialogTitle className={titleClassName}>{title}</DialogTitle>\n              )}\n              {description && (\n                <DialogDescription className={descriptionClassName}>\n                  {description}\n                </DialogDescription>\n              )}\n            </DialogHeader>\n          )}\n          {children && (\n            <div className={cn(\"px-6 py-4\", contentClassName)}>{children}</div>\n          )}\n          {!stickyFooter && footer && (\n            <DialogFooter className={cn(\"py-4\", footerClasses)}>\n              {footer}\n            </DialogFooter>\n          )}\n        </ScrollArea>\n        {stickyFooter && footer && (\n          <DialogFooter\n            className={cn({ \"py-4 border-t\": stickyFooter }, footerClasses)}\n          >\n            {footer}\n          </DialogFooter>\n        )}\n      </SDialogContent>\n    </SDialog>\n  );\n});\n\nDialog.displayName = \"Dialog\";\n\nexport default Dialog;\n"],"names":["variantIcons","jsx","CheckCircle2","AlertCircle","Info","AlertTriangle","variantColors","sizeClasses","positionClasses","Dialog","React","props","ref","variant","open","onOpenChange","title","description","children","trigger","footer","closeOnEsc","closeOnOutside","showCloseButton","position","size","fullscreen","scrollable","stickyHeader","stickyFooter","animation","className","contentClassName","headerClassName","titleClassName","descriptionClassName","footerClassName","confirmButton","cancelButton","showIcon","backdropFilter","overlay","animationResult","useMemo","animationClass","contentClasses","cn","headerClasses","footerClasses","icon","headerComponents","jsxs","AlertDialogHeader","AlertDialogTitle","AlertDialogDescription","footerComponents","mergedConfirmButton","mergedCancelButton","AlertDialogFooter","Fragment","Button","AlertDialog","AlertDialogTrigger","AlertDialogContent","e","ScrollArea","SDialog","DialogTrigger","SDialogContent","DialogHeader","DialogTitle","DialogDescription","DialogFooter"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Dialog as SDialog,\n  DialogContent as SDialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@dsui/ui/components/dialog\";\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@dsui/ui/components/alert-dialog\";\nimport { ScrollArea } from \"@dsui/ui/components/scroll-area\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { BasicAnimation } from \"@/types/variables\";\nimport { animationClass } from \"@/utils/animations\";\nimport { AlertTriangle, Info, CheckCircle2, AlertCircle } from \"lucide-react\";\nimport Button, { type ButtonProps } from \"../Button/Button\";\n\nexport type DialogVariant = \"dialog\" | \"confirm\" | \"alert\" | \"info\" | \"warning\";\nexport type DialogSize =\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\"\n  | \"full\";\nexport type DialogPosition =\n  | \"center\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"top-left\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-right\";\n\nexport interface DialogButtonConfig extends Omit<ButtonProps, \"children\"> {\n  text?: React.ReactNode;\n  onClick?: () => void;\n}\n\nexport interface DialogProps {\n  // Core props\n  variant?: DialogVariant;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n\n  // Content\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  children?: React.ReactNode;\n  trigger?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  // Behavior\n  closeOnEsc?: boolean;\n  closeOnOutside?: boolean;\n  showCloseButton?: boolean;\n\n  // Layout\n  position?: DialogPosition;\n  size?: DialogSize;\n  fullscreen?: boolean;\n  scrollable?: boolean;\n  stickyHeader?: boolean;\n  stickyFooter?: boolean;\n\n  // Animation\n  animation?: BasicAnimation;\n\n  // Styling\n  className?: string;\n  contentClassName?: string;\n  headerClassName?: string;\n  titleClassName?: string;\n  descriptionClassName?: string;\n  footerClassName?: string;\n  overlayClassName?: string;\n\n  // Overlay\n  backdropFilter?: number;\n  overlay?: \"dark\" | \"light\";\n\n  // Alert/Confirm buttons\n  confirmButton?: DialogButtonConfig;\n  cancelButton?: DialogButtonConfig;\n\n  // Alert/Confirm specific\n  showIcon?: boolean;\n}\n\nconst variantIcons = {\n  dialog: null,\n  confirm: (\n    <div className=\"ds:size-12 ds:flex ds:items-center ds:justify-center ds:rounded-full ds:bg-success/10 ds:mx-auto ds:mb-4\">\n      <CheckCircle2 className=\"ds:size-6 ds:text-success\" />\n    </div>\n  ),\n  alert: (\n    <div className=\"ds:size-12 ds:flex ds:items-center ds:justify-center ds:rounded-full ds:bg-error/10 ds:mx-auto ds:mb-4\">\n      <AlertCircle className=\"ds:size-5 ds:text-error\" />\n    </div>\n  ),\n  info: (\n    <div className=\"ds:size-12 ds:flex ds:items-center ds:justify-center ds:rounded-full ds:bg-blue-500/10 ds:mx-auto ds:mb-4\">\n      <Info className=\"ds:size-5 ds:text-blue-500\" />\n    </div>\n  ),\n  warning: (\n    <div className=\"ds:size-12 ds:flex ds:items-center ds:justify-center ds:rounded-full ds:bg-warning/10 ds:mx-auto ds:mb-4\">\n      <AlertTriangle className=\"ds:size-5 ds:text-warning\" />\n    </div>\n  ),\n};\n\nconst variantColors = {\n  dialog: \"\",\n  confirm: \"border-blue-500/20\",\n  alert: \"border-red-500/20\",\n  info: \"border-blue-500/20\",\n  warning: \"border-yellow-500/20\",\n};\n\nconst sizeClasses: Record<DialogSize, string> = {\n  sm: \"ds:sm:max-w-sm\",\n  md: \"ds:sm:max-w-md\",\n  lg: \"ds:sm:max-w-lg\",\n  xl: \"ds:sm:max-w-xl\",\n  \"2xl\": \"ds:sm:max-w-2xl ds:max-h-[90vh]\",\n  \"3xl\": \"ds:sm:max-w-3xl ds:max-h-[90vh]\",\n  \"4xl\": \"ds:sm:max-w-4xl ds:max-h-[90vh]\",\n  full: \"ds:sm:max-w-[95vw] ds:h-[98vh]\",\n};\n\nconst positionClasses: Record<DialogPosition, string> = {\n  center: \"ds:!top-[50%] ds:!left-[50%] ds:!translate-x-[-50%] ds:!translate-y-[-50%]\",\n  top: \"ds:!top-4 ds:!left-[50%] ds:!translate-x-[-50%] ds:!translate-y-0\",\n  bottom: \"ds:!top-auto ds:!bottom-4 ds:!left-[50%] ds:!translate-x-[-50%] ds:!translate-y-0\",\n  left: \"ds:!left-4 ds:!top-[50%] ds:!translate-x-0 ds:!translate-y-[-50%]\",\n  right: \"ds:!left-auto ds:!right-4 ds:!top-[50%] ds:!translate-x-0 ds:!translate-y-[-50%]\",\n  \"top-left\": \"ds:!top-4 ds:!left-4 ds:!translate-x-0 ds:!translate-y-0\",\n  \"top-right\": \"ds:!top-4 ds:!left-auto ds:!right-4 ds:!translate-x-0 ds:!translate-y-0\",\n  \"bottom-left\": \"ds:!top-auto ds:!bottom-4 ds:!left-4 ds:!translate-x-0 ds:!translate-y-0\",\n  \"bottom-right\":\n    \"ds:!top-auto ds:!bottom-4 ds:!left-auto ds:!right-4 ds:!translate-x-0 ds:!translate-y-0\",\n};\n\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {\n  const {\n    variant = \"dialog\",\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    trigger,\n    footer,\n    closeOnEsc = true,\n    closeOnOutside = true,\n    showCloseButton = true,\n    position = \"center\",\n    size = \"md\",\n    fullscreen = false,\n    scrollable = true,\n    stickyHeader = false,\n    stickyFooter = false,\n    animation,\n    className,\n    contentClassName,\n    headerClassName,\n    titleClassName,\n    descriptionClassName,\n    footerClassName,\n    // overlayClassName, // Not used in current implementation\n    confirmButton,\n    cancelButton,\n    showIcon = true,\n    backdropFilter = 2,\n    overlay = \"dark\",\n  } = props;\n\n  const animationResult = useMemo(() => {\n    return animation ? animationClass(animation) : { className: \"\" };\n  }, [animation]);\n\n  const contentClasses = cn(\n    // Remove default padding and gap to allow custom header/footer\n    \"ds:!p-0 ds:!gap-0 ds:flex ds:flex-col\",\n    sizeClasses[fullscreen ? \"full\" : size],\n    positionClasses[position],\n    variantColors[variant],\n    animationResult.className,\n    fullscreen ? \"ds:h-[98vh]\" : \"ds:max-h-[90vh]\"\n  );\n\n  const headerClasses = cn(\n    \"ds:px-6 ds:pt-6 ds:text-left\",\n    !scrollable && \"ds:contents ds:space-y-0\",\n    headerClassName\n  );\n\n  const footerClasses = cn(\n    \"ds:px-6 ds:pb-6 ds:sm:justify-end\",\n    !scrollable && \"ds:border-t ds:py-4\",\n    footerClassName\n  );\n\n  const icon = showIcon ? variantIcons[variant] : null;\n\n  const headerComponents = useMemo(() => {\n    return title || icon || description ? (\n      <AlertDialogHeader\n        className={cn(\n          \"ds:flex ds:items-center ds:gap-2 ds:py-4\",\n          { \"ds:border-b\": stickyHeader },\n          headerClasses\n        )}\n      >\n        {(title || icon) && (\n          <AlertDialogTitle className={cn(titleClassName)}>\n            {icon}\n            {title}\n          </AlertDialogTitle>\n        )}\n        {description && (\n          <AlertDialogDescription className={descriptionClassName}>\n            {description}\n          </AlertDialogDescription>\n        )}\n      </AlertDialogHeader>\n    ) : null;\n  }, [\n    title,\n    icon,\n    description,\n    headerClasses,\n    titleClassName,\n    descriptionClassName,\n    stickyHeader,\n  ]);\n\n  const footerComponents = useMemo(() => {\n    // Merge configs with defaults\n    const mergedConfirmButton: DialogButtonConfig = {\n      variant: \"solid\",\n      color: \"primary\",\n      ...confirmButton,\n      text: confirmButton?.text ?? \"Confirm\",\n    };\n\n    const mergedCancelButton: DialogButtonConfig = {\n      variant: \"outline\",\n      ...cancelButton,\n      text: cancelButton?.text ?? \"Cancel\",\n    };\n\n    return footer || confirmButton || cancelButton ? (\n      <AlertDialogFooter\n        className={cn(\"ds:py-4\", { \"ds:border-t\": stickyFooter }, footerClasses)}\n      >\n        {footer || (\n          <>\n            {cancelButton && (\n              <Button\n                {...mergedCancelButton}\n                onClick={() => {\n                  mergedCancelButton.onClick?.();\n                }}\n              >\n                {mergedCancelButton.text}\n              </Button>\n            )}\n            {confirmButton && (\n              <Button\n                {...mergedConfirmButton}\n                onClick={() => {\n                  mergedConfirmButton.onClick?.();\n                }}\n              >\n                {mergedConfirmButton.text}\n              </Button>\n            )}\n          </>\n        )}\n      </AlertDialogFooter>\n    ) : null;\n  }, [footer, footerClasses, confirmButton, cancelButton, stickyFooter]);\n\n  // For alert-style dialogs (confirm, alert, info, warning)\n  if (variant !== \"dialog\") {\n    return (\n      <AlertDialog open={open} onOpenChange={onOpenChange}>\n        {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}\n        <AlertDialogContent\n          ref={ref}\n          className={cn(className, contentClasses)}\n          onEscapeKeyDown={(e) => !closeOnEsc && e.preventDefault()}\n          noDefaultAnimation={!!animation}\n          backdropFilter={backdropFilter}\n          overlay={overlay}\n        >\n          {stickyHeader && headerComponents}\n\n          <ScrollArea className=\"ds:flex ds:max-h-full ds:flex-col ds:overflow-hidden\">\n            {!stickyHeader && headerComponents}\n            {children && (\n              <div className={cn(\"ds:px-6 ds:py-4\", contentClassName)}>\n                {children}\n              </div>\n            )}\n            {!stickyFooter && footerComponents}\n          </ScrollArea>\n\n          {stickyFooter && footerComponents}\n        </AlertDialogContent>\n      </AlertDialog>\n    );\n  }\n\n  // Regular dialog\n  return (\n    <SDialog open={open} onOpenChange={onOpenChange}>\n      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}\n      <SDialogContent\n        ref={ref}\n        className={cn(className, contentClasses)}\n        showCloseButton={showCloseButton}\n        onEscapeKeyDown={(e) => !closeOnEsc && e.preventDefault()}\n        onInteractOutside={(e) => !closeOnOutside && e.preventDefault()}\n        noDefaultAnimation={!!animation}\n        backdropFilter={backdropFilter}\n        overlay={overlay}\n      >\n        {stickyHeader && (title || description) && (\n          <DialogHeader\n            className={cn({ \"ds:py-4 ds:border-b\": stickyHeader }, headerClasses)}\n          >\n            {title && (\n              <DialogTitle className={titleClassName}>{title}</DialogTitle>\n            )}\n            {description && (\n              <DialogDescription className={descriptionClassName}>\n                {description}\n              </DialogDescription>\n            )}\n          </DialogHeader>\n        )}\n        <ScrollArea className=\"ds:flex ds:max-h-full ds:flex-col ds:overflow-hidden\">\n          {!stickyHeader && (title || description) && (\n            <DialogHeader className={cn(\"ds:py-4\", headerClasses)}>\n              {title && (\n                <DialogTitle className={titleClassName}>{title}</DialogTitle>\n              )}\n              {description && (\n                <DialogDescription className={descriptionClassName}>\n                  {description}\n                </DialogDescription>\n              )}\n            </DialogHeader>\n          )}\n          {children && (\n            <div className={cn(\"ds:px-6 ds:py-4\", contentClassName)}>{children}</div>\n          )}\n          {!stickyFooter && footer && (\n            <DialogFooter className={cn(\"ds:py-4\", footerClasses)}>\n              {footer}\n            </DialogFooter>\n          )}\n        </ScrollArea>\n        {stickyFooter && footer && (\n          <DialogFooter\n            className={cn({ \"ds:py-4 ds:border-t\": stickyFooter }, footerClasses)}\n          >\n            {footer}\n          </DialogFooter>\n        )}\n      </SDialogContent>\n    </SDialog>\n  );\n});\n\nDialog.displayName = \"Dialog\";\n\nexport default Dialog;\n"],"names":["variantIcons","jsx","CheckCircle2","AlertCircle","Info","AlertTriangle","variantColors","sizeClasses","positionClasses","Dialog","React","props","ref","variant","open","onOpenChange","title","description","children","trigger","footer","closeOnEsc","closeOnOutside","showCloseButton","position","size","fullscreen","scrollable","stickyHeader","stickyFooter","animation","className","contentClassName","headerClassName","titleClassName","descriptionClassName","footerClassName","confirmButton","cancelButton","showIcon","backdropFilter","overlay","animationResult","useMemo","animationClass","contentClasses","cn","headerClasses","footerClasses","icon","headerComponents","jsxs","AlertDialogHeader","AlertDialogTitle","AlertDialogDescription","footerComponents","mergedConfirmButton","mergedCancelButton","AlertDialogFooter","Fragment","Button","AlertDialog","AlertDialogTrigger","AlertDialogContent","e","ScrollArea","SDialog","DialogTrigger","SDialogContent","DialogHeader","DialogTitle","DialogDescription","DialogFooter"],"mappings":";;;;;;;;;AAsGA,MAAMA,KAAe;AAAA,EACnB,QAAQ;AAAA,EACR,2BACG,OAAA,EAAI,WAAU,4GACb,UAAA,gBAAAC,EAACC,IAAA,EAAa,WAAU,4BAAA,CAA4B,EAAA,CACtD;AAAA,EAEF,yBACG,OAAA,EAAI,WAAU,0GACb,UAAA,gBAAAD,EAACE,IAAA,EAAY,WAAU,0BAAA,CAA0B,EAAA,CACnD;AAAA,EAEF,wBACG,OAAA,EAAI,WAAU,6GACb,UAAA,gBAAAF,EAACG,IAAA,EAAK,WAAU,6BAAA,CAA6B,EAAA,CAC/C;AAAA,EAEF,2BACG,OAAA,EAAI,WAAU,4GACb,UAAA,gBAAAH,EAACI,IAAA,EAAc,WAAU,4BAAA,CAA4B,EAAA,CACvD;AAEJ,GAEMC,KAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACX,GAEMC,KAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR,GAEMC,KAAkD;AAAA,EACtD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,gBACE;AACJ,GAEMC,KAASC,EAAM,WAAwC,CAACC,GAAOC,MAAQ;AAC3E,QAAM;AAAA,IACJ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,gBAAAC,IAAiB;AAAA,IACjB,iBAAAC,IAAkB;AAAA,IAClB,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,cAAAC,IAAe;AAAA,IACf,cAAAC,IAAe;AAAA,IACf,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,iBAAAC;AAAA;AAAA,IAEA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,gBAAAC,IAAiB;AAAA,IACjB,SAAAC,IAAU;AAAA,EAAA,IACR9B,GAEE+B,IAAkBC,EAAQ,MACvBb,IAAYc,GAAed,CAAS,IAAI,EAAE,WAAW,GAAA,GAC3D,CAACA,CAAS,CAAC,GAERe,IAAiBC;AAAA;AAAA,IAErB;AAAA,IACAvC,GAAYmB,IAAa,SAASD,CAAI;AAAA,IACtCjB,GAAgBgB,CAAQ;AAAA,IACxBlB,GAAcO,CAAO;AAAA,IACrB6B,EAAgB;AAAA,IAChBhB,IAAa,gBAAgB;AAAA,EAAA,GAGzBqB,IAAgBD;AAAA,IACpB;AAAA,IACA,CAACnB,KAAc;AAAA,IACfM;AAAA,EAAA,GAGIe,IAAgBF;AAAA,IACpB;AAAA,IACA,CAACnB,KAAc;AAAA,IACfS;AAAA,EAAA,GAGIa,IAAOV,IAAWvC,GAAaa,CAAO,IAAI,MAE1CqC,IAAmBP,EAAQ,MACxB3B,KAASiC,KAAQhC,IACtB,gBAAAkC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWN;AAAA,QACT;AAAA,QACA,EAAE,eAAelB,EAAA;AAAA,QACjBmB;AAAA,MAAA;AAAA,MAGA,UAAA;AAAA,SAAA/B,KAASiC,MACT,gBAAAE,EAACE,IAAA,EAAiB,WAAWP,EAAGZ,CAAc,GAC3C,UAAA;AAAA,UAAAe;AAAA,UACAjC;AAAA,QAAA,GACH;AAAA,QAEDC,KACC,gBAAAhB,EAACqD,IAAA,EAAuB,WAAWnB,GAChC,UAAAlB,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAGF,MACH;AAAA,IACDD;AAAA,IACAiC;AAAA,IACAhC;AAAA,IACA8B;AAAA,IACAb;AAAA,IACAC;AAAA,IACAP;AAAA,EAAA,CACD,GAEK2B,IAAmBZ,EAAQ,MAAM;AAErC,UAAMa,IAA0C;AAAA,MAC9C,SAAS;AAAA,MACT,OAAO;AAAA,MACP,GAAGnB;AAAA,MACH,MAAMA,GAAe,QAAQ;AAAA,IAAA,GAGzBoB,IAAyC;AAAA,MAC7C,SAAS;AAAA,MACT,GAAGnB;AAAA,MACH,MAAMA,GAAc,QAAQ;AAAA,IAAA;AAG9B,WAAOlB,KAAUiB,KAAiBC,IAChC,gBAAArC;AAAA,MAACyD;AAAA,MAAA;AAAA,QACC,WAAWZ,EAAG,WAAW,EAAE,eAAejB,EAAA,GAAgBmB,CAAa;AAAA,QAEtE,eACC,gBAAAG,EAAAQ,GAAA,EACG,UAAA;AAAA,UAAArB,KACC,gBAAArC;AAAA,YAAC2D;AAAA,YAAA;AAAA,cACE,GAAGH;AAAA,cACJ,SAAS,MAAM;AACb,gBAAAA,EAAmB,UAAA;AAAA,cACrB;AAAA,cAEC,UAAAA,EAAmB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGvBpB,KACC,gBAAApC;AAAA,YAAC2D;AAAA,YAAA;AAAA,cACE,GAAGJ;AAAA,cACJ,SAAS,MAAM;AACb,gBAAAA,EAAoB,UAAA;AAAA,cACtB;AAAA,cAEC,UAAAA,EAAoB;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA,IAGF;AAAA,EACN,GAAG,CAACpC,GAAQ4B,GAAeX,GAAeC,GAAcT,CAAY,CAAC;AAGrE,SAAIhB,MAAY,WAEZ,gBAAAsC,EAACU,IAAA,EAAY,MAAA/C,GAAY,cAAAC,GACtB,UAAA;AAAA,IAAAI,KAAW,gBAAAlB,EAAC6D,IAAA,EAAmB,SAAO,IAAE,UAAA3C,GAAQ;AAAA,IACjD,gBAAAgC;AAAA,MAACY;AAAA,MAAA;AAAA,QACC,KAAAnD;AAAA,QACA,WAAWkC,EAAGf,GAAWc,CAAc;AAAA,QACvC,iBAAiB,CAACmB,MAAM,CAAC3C,KAAc2C,EAAE,eAAA;AAAA,QACzC,oBAAoB,CAAC,CAAClC;AAAA,QACtB,gBAAAU;AAAA,QACA,SAAAC;AAAA,QAEC,UAAA;AAAA,UAAAb,KAAgBsB;AAAA,UAEjB,gBAAAC,EAACc,GAAA,EAAW,WAAU,wDACnB,UAAA;AAAA,YAAA,CAACrC,KAAgBsB;AAAA,YACjBhC,uBACE,OAAA,EAAI,WAAW4B,EAAG,mBAAmBd,CAAgB,GACnD,UAAAd,GACH;AAAA,YAED,CAACW,KAAgB0B;AAAA,UAAA,GACpB;AAAA,UAEC1B,KAAgB0B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF,IAMF,gBAAAJ,EAACe,GAAA,EAAQ,MAAApD,GAAY,cAAAC,GAClB,UAAA;AAAA,IAAAI,KAAW,gBAAAlB,EAACkE,GAAA,EAAc,SAAO,IAAE,UAAAhD,GAAQ;AAAA,IAC5C,gBAAAgC;AAAA,MAACiB;AAAAA,MAAA;AAAA,QACC,KAAAxD;AAAA,QACA,WAAWkC,EAAGf,GAAWc,CAAc;AAAA,QACvC,iBAAAtB;AAAA,QACA,iBAAiB,CAACyC,MAAM,CAAC3C,KAAc2C,EAAE,eAAA;AAAA,QACzC,mBAAmB,CAACA,MAAM,CAAC1C,KAAkB0C,EAAE,eAAA;AAAA,QAC/C,oBAAoB,CAAC,CAAClC;AAAA,QACtB,gBAAAU;AAAA,QACA,SAAAC;AAAA,QAEC,UAAA;AAAA,UAAAb,MAAiBZ,KAASC,MACzB,gBAAAkC;AAAA,YAACkB;AAAA,YAAA;AAAA,cACC,WAAWvB,EAAG,EAAE,uBAAuBlB,EAAA,GAAgBmB,CAAa;AAAA,cAEnE,UAAA;AAAA,gBAAA/B,KACC,gBAAAf,EAACqE,GAAA,EAAY,WAAWpC,GAAiB,UAAAlB,GAAM;AAAA,gBAEhDC,KACC,gBAAAhB,EAACsE,GAAA,EAAkB,WAAWpC,GAC3B,UAAAlB,EAAA,CACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAIN,gBAAAkC,EAACc,GAAA,EAAW,WAAU,wDACnB,UAAA;AAAA,YAAA,CAACrC,MAAiBZ,KAASC,MAC1B,gBAAAkC,EAACkB,KAAa,WAAWvB,EAAG,WAAWC,CAAa,GACjD,UAAA;AAAA,cAAA/B,KACC,gBAAAf,EAACqE,GAAA,EAAY,WAAWpC,GAAiB,UAAAlB,GAAM;AAAA,cAEhDC,KACC,gBAAAhB,EAACsE,GAAA,EAAkB,WAAWpC,GAC3B,UAAAlB,EAAA,CACH;AAAA,YAAA,GAEJ;AAAA,YAEDC,uBACE,OAAA,EAAI,WAAW4B,EAAG,mBAAmBd,CAAgB,GAAI,UAAAd,GAAS;AAAA,YAEpE,CAACW,KAAgBT,KAChB,gBAAAnB,EAACuE,GAAA,EAAa,WAAW1B,EAAG,WAAWE,CAAa,GACjD,UAAA5B,EAAA,CACH;AAAA,UAAA,GAEJ;AAAA,UACCS,KAAgBT,KACf,gBAAAnB;AAAA,YAACuE;AAAA,YAAA;AAAA,cACC,WAAW1B,EAAG,EAAE,uBAAuBjB,EAAA,GAAgBmB,CAAa;AAAA,cAEnE,UAAA5B;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;AAEDX,GAAO,cAAc;"}

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -8,9 +8,9 @@ const U = X.forwardRef(
       open: p,
       defaultOpen: h,
       onOpenChange: f,
-      modal: c = !1,
+      modal: d = !1,
       children: M,
-      trigger: d,
+      trigger: c,
       content: t,
       items: o,
       side: R = "bottom",
@@ -35,7 +35,7 @@ const U = X.forwardRef(
           open: p,
           defaultOpen: h,
           onOpenChange: f,
-          modal: c,
+          modal: d,
           children: M
         }
       );
@@ -59,7 +59,7 @@ const U = X.forwardRef(
                 F && e.onClick && e.onClick();
               },
               children: [
-                e.icon && /* @__PURE__ */ n("span", { className: "mr-2", children: e.icon }),
+                e.icon && /* @__PURE__ */ n("span", { className: "ds:mr-2", children: e.icon }),
                 e.label
               ]
             },
@@ -74,7 +74,7 @@ const U = X.forwardRef(
               onClick: e.onClick,
               className: e.className,
               children: [
-                e.icon && /* @__PURE__ */ n("span", { className: "mr-2", children: e.icon }),
+                e.icon && /* @__PURE__ */ n("span", { className: "ds:mr-2", children: e.icon }),
                 e.label
               ]
             }
@@ -86,11 +86,11 @@ const U = X.forwardRef(
               {
                 disabled: e.disabled,
                 className: a(
-                  e.disabled ? "opacity-50 cursor-not-allowed" : "",
+                  e.disabled ? "ds:opacity-50 ds:cursor-not-allowed" : "",
                   e.className
                 ),
                 children: [
-                  e.icon && /* @__PURE__ */ n("span", { className: "mr-2", children: e.icon }),
+                  e.icon && /* @__PURE__ */ n("span", { className: "ds:mr-2", children: e.icon }),
                   e.label
                 ]
               }
@@ -104,7 +104,7 @@ const U = X.forwardRef(
               onClick: e.onClick,
               className: e.className,
               children: [
-                e.icon && /* @__PURE__ */ n("span", { className: "mr-2", children: e.icon }),
+                e.icon && /* @__PURE__ */ n("span", { className: "ds:mr-2", children: e.icon }),
                 e.label
               ]
             },
@@ -119,7 +119,7 @@ const U = X.forwardRef(
           {
             onContextMenu: D,
             className: a(w),
-            children: d
+            children: c
           }
         ),
         /* @__PURE__ */ r(
@@ -127,12 +127,12 @@ const U = X.forwardRef(
           {
             open: T,
             onOpenChange: N,
-            modal: c,
+            modal: d,
             children: [
               /* @__PURE__ */ n(O, { asChild: !0, children: /* @__PURE__ */ n(
                 "div",
                 {
-                  className: "fixed",
+                  className: "ds:fixed",
                   style: {
                     left: k.x,
                     top: k.y,
@@ -159,7 +159,7 @@ const U = X.forwardRef(
           }
         )
       ] });
-    const x = d ? /* @__PURE__ */ n("div", { onContextMenu: D, className: a(w), children: d }) : null, y = t || o ? /* @__PURE__ */ r(
+    const x = c ? /* @__PURE__ */ n("div", { onContextMenu: D, className: a(w), children: c }) : null, y = t || o ? /* @__PURE__ */ r(
       m,
       {
         ref: i,
@@ -180,7 +180,7 @@ const U = X.forwardRef(
         open: p,
         defaultOpen: h,
         onOpenChange: f,
-        modal: c,
+        modal: d,
         children: [
           x && /* @__PURE__ */ n(O, { asChild: !0, children: x }),
           G ? /* @__PURE__ */ n(S, { children: y }) : y

package/dist/esm/components/DropdownMenu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  DropdownMenu as SDropdownMenu,\n  DropdownMenuTrigger as SDropdownMenuTrigger,\n  DropdownMenuContent as SDropdownMenuContent,\n  DropdownMenuPortal as SDropdownMenuPortal,\n  DropdownMenuItem as SDropdownMenuItem,\n  DropdownMenuCheckboxItem as SDropdownMenuCheckboxItem,\n  DropdownMenuRadioItem as SDropdownMenuRadioItem,\n  DropdownMenuRadioGroup as SDropdownMenuRadioGroup,\n  DropdownMenuLabel as SDropdownMenuLabel,\n  DropdownMenuSeparator as SDropdownMenuSeparator,\n  DropdownMenuGroup as SDropdownMenuGroup,\n  DropdownMenuSub as SDropdownMenuSub,\n  DropdownMenuSubTrigger as SDropdownMenuSubTrigger,\n  DropdownMenuSubContent as SDropdownMenuSubContent,\n} from \"@dsui/ui/components/dropdown-menu\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport type DropdownMenuSide = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type DropdownMenuAlign = \"start\" | \"center\" | \"end\";\n\nexport type DropdownMenuItem =\n  | {\n      key: string;\n      label?: string;\n      icon?: React.ReactNode;\n      children?: DropdownMenuItem[];\n      type?: \"item\";\n      checked?: boolean;\n      disabled?: boolean;\n      variant?: \"default\" | \"destructive\";\n      onClick?: () => void;\n      className?: string;\n    }\n  | {\n      key: string;\n      type: \"checkbox\";\n      label?: string;\n      icon?: React.ReactNode;\n      checked?: boolean;\n      disabled?: boolean;\n      onClick?: () => void;\n      className?: string;\n    }\n  | {\n      key: string;\n      type: \"radio\";\n      label?: string;\n      icon?: React.ReactNode;\n      group: string;\n      checked?: boolean;\n      disabled?: boolean;\n      onClick?: () => void;\n      className?: string;\n    }\n  | {\n      key: string;\n      type: \"separator\";\n    }\n  | {\n      key: string;\n      type: \"group\";\n      label?: string;\n      children: DropdownMenuItem[];\n      disabled?: boolean;\n    };\n\nexport interface DropdownMenuProps {\n  // Core props\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n\n  // Content\n  children?: React.ReactNode;\n  trigger?: React.ReactNode;\n  content?: React.ReactNode;\n  items?: DropdownMenuItem[];\n\n  // Layout\n  side?: DropdownMenuSide;\n  align?: DropdownMenuAlign;\n  sideOffset?: number;\n  alignOffset?: number;\n\n  // Portal\n  portal?: boolean;\n\n  // Context menu\n  contextMenu?: boolean;\n\n  // Styling\n  className?: string;\n  contentClassName?: string;\n  triggerClassName?: string;\n}\n\nconst DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(\n  (props, ref) => {\n    const {\n      open,\n      defaultOpen,\n      onOpenChange,\n      modal = false,\n      children,\n      trigger,\n      content,\n      items,\n      side = \"bottom\",\n      align = \"start\",\n      sideOffset,\n      alignOffset,\n      portal = true,\n      contextMenu = false,\n      className,\n      contentClassName,\n      triggerClassName,\n    } = props;\n\n    // Context menu state\n    const [contextMenuOpen, setContextMenuOpen] = useState(false);\n    const [contextMenuPosition, setContextMenuPosition] = useState({\n      x: 0,\n      y: 0,\n    });\n\n    // Handle context menu trigger\n    const handleContextMenu = (e: React.MouseEvent) => {\n      if (contextMenu) {\n        e.preventDefault();\n        setContextMenuPosition({ x: e.clientX, y: e.clientY });\n        setContextMenuOpen(true);\n      }\n    };\n\n    // If children are provided (compound pattern), render them directly\n    if (children) {\n      return (\n        <SDropdownMenu\n          open={open}\n          defaultOpen={defaultOpen}\n          onOpenChange={onOpenChange}\n          modal={modal}\n        >\n          {children}\n        </SDropdownMenu>\n      );\n    }\n\n    // Render items if provided\n    const renderItems = (menuItems: DropdownMenuItem[]): React.ReactNode => {\n      return menuItems.map((item) => {\n        switch (item.type) {\n          case \"separator\":\n            return <SDropdownMenuSeparator key={item.key} />;\n          case \"group\":\n            return (\n              <SDropdownMenuGroup key={item.key}>\n                {item.label && (\n                  <SDropdownMenuLabel>{item.label}</SDropdownMenuLabel>\n                )}\n                {renderItems(item.children)}\n              </SDropdownMenuGroup>\n            );\n          case \"checkbox\":\n            return (\n              <SDropdownMenuCheckboxItem\n                key={item.key}\n                checked={item.checked}\n                disabled={item.disabled}\n                className={item.className}\n                onCheckedChange={(checked: boolean) => {\n                  if (checked && item.onClick) {\n                    item.onClick();\n                  }\n                }}\n              >\n                {item.icon && <span className=\"mr-2\">{item.icon}</span>}\n                {item.label}\n              </SDropdownMenuCheckboxItem>\n            );\n          case \"radio\":\n            return (\n              <SDropdownMenuRadioGroup key={item.key} value={item.group}>\n                <SDropdownMenuRadioItem\n                  value={item.key}\n                  disabled={item.disabled}\n                  onClick={item.onClick}\n                  className={item.className}\n                >\n                  {item.icon && <span className=\"mr-2\">{item.icon}</span>}\n                  {item.label}\n                </SDropdownMenuRadioItem>\n              </SDropdownMenuRadioGroup>\n            );\n          default: {\n            // item or undefined type\n            if (item.children && item.children.length > 0) {\n              // Submenu\n              return (\n                <SDropdownMenuSub key={item.key}>\n                  <SDropdownMenuSubTrigger\n                    disabled={item.disabled}\n                    className={cn(\n                      item.disabled ? \"opacity-50 cursor-not-allowed\" : \"\",\n                      item.className\n                    )}\n                  >\n                    {item.icon && <span className=\"mr-2\">{item.icon}</span>}\n                    {item.label}\n                  </SDropdownMenuSubTrigger>\n                  <SDropdownMenuSubContent>\n                    {renderItems(item.children)}\n                  </SDropdownMenuSubContent>\n                </SDropdownMenuSub>\n              );\n            } else {\n              // Regular item\n              return (\n                <SDropdownMenuItem\n                  key={item.key}\n                  disabled={item.disabled}\n                  variant={item.variant}\n                  onClick={item.onClick}\n                  className={item.className}\n                >\n                  {item.icon && <span className=\"mr-2\">{item.icon}</span>}\n                  {item.label}\n                </SDropdownMenuItem>\n              );\n            }\n          }\n        }\n      });\n    };\n\n    // If context menu is enabled, render differently\n    if (contextMenu) {\n      return (\n        <>\n          {/* Trigger area for context menu */}\n          <div\n            onContextMenu={handleContextMenu}\n            className={cn(triggerClassName)}\n          >\n            {trigger}\n          </div>\n          <SDropdownMenu\n            open={contextMenuOpen}\n            onOpenChange={setContextMenuOpen}\n            modal={modal}\n          >\n            <SDropdownMenuTrigger asChild>\n              <div\n                className=\"fixed\"\n                style={{\n                  left: contextMenuPosition.x,\n                  top: contextMenuPosition.y,\n                  width: 1,\n                  height: 1,\n                }}\n              />\n            </SDropdownMenuTrigger>\n            <SDropdownMenuPortal>\n              <SDropdownMenuContent\n                ref={ref}\n                className={cn(className, contentClassName)}\n                side=\"bottom\"\n                align=\"start\"\n                sideOffset={4}\n              >\n                {content}\n                {items && renderItems(items)}\n              </SDropdownMenuContent>\n            </SDropdownMenuPortal>\n          </SDropdownMenu>\n        </>\n      );\n    }\n\n    // Fallback to props-based pattern\n    const triggerElement = trigger ? (\n      <div onContextMenu={handleContextMenu} className={cn(triggerClassName)}>\n        {trigger}\n      </div>\n    ) : null;\n\n    const contentElement =\n      content || items ? (\n        <SDropdownMenuContent\n          ref={ref}\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          alignOffset={alignOffset}\n          className={cn(className, contentClassName)}\n        >\n          {content}\n          {items && renderItems(items)}\n        </SDropdownMenuContent>\n      ) : null;\n\n    return (\n      <SDropdownMenu\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        modal={modal}\n      >\n        {triggerElement && (\n          <SDropdownMenuTrigger asChild>{triggerElement}</SDropdownMenuTrigger>\n        )}\n        {portal ? (\n          <SDropdownMenuPortal>{contentElement}</SDropdownMenuPortal>\n        ) : (\n          contentElement\n        )}\n      </SDropdownMenu>\n    );\n  }\n);\n\nDropdownMenu.displayName = \"DropdownMenu\";\n\nexport default DropdownMenu;\n"],"names":["DropdownMenu","React","props","ref","open","defaultOpen","onOpenChange","modal","children","trigger","content","items","side","align","sideOffset","alignOffset","portal","contextMenu","className","contentClassName","triggerClassName","contextMenuOpen","setContextMenuOpen","useState","contextMenuPosition","setContextMenuPosition","handleContextMenu","e","jsx","SDropdownMenu","renderItems","menuItems","item","SDropdownMenuSeparator","SDropdownMenuGroup","SDropdownMenuLabel","jsxs","SDropdownMenuCheckboxItem","checked","SDropdownMenuRadioGroup","SDropdownMenuRadioItem","SDropdownMenuSub","SDropdownMenuSubTrigger","cn","SDropdownMenuSubContent","SDropdownMenuItem","Fragment","SDropdownMenuTrigger","SDropdownMenuPortal","SDropdownMenuContent","triggerElement","contentElement"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  DropdownMenu as SDropdownMenu,\n  DropdownMenuTrigger as SDropdownMenuTrigger,\n  DropdownMenuContent as SDropdownMenuContent,\n  DropdownMenuPortal as SDropdownMenuPortal,\n  DropdownMenuItem as SDropdownMenuItem,\n  DropdownMenuCheckboxItem as SDropdownMenuCheckboxItem,\n  DropdownMenuRadioItem as SDropdownMenuRadioItem,\n  DropdownMenuRadioGroup as SDropdownMenuRadioGroup,\n  DropdownMenuLabel as SDropdownMenuLabel,\n  DropdownMenuSeparator as SDropdownMenuSeparator,\n  DropdownMenuGroup as SDropdownMenuGroup,\n  DropdownMenuSub as SDropdownMenuSub,\n  DropdownMenuSubTrigger as SDropdownMenuSubTrigger,\n  DropdownMenuSubContent as SDropdownMenuSubContent,\n} from \"@dsui/ui/components/dropdown-menu\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport type DropdownMenuSide = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type DropdownMenuAlign = \"start\" | \"center\" | \"end\";\n\nexport type DropdownMenuItem =\n  | {\n      key: string;\n      label?: string;\n      icon?: React.ReactNode;\n      children?: DropdownMenuItem[];\n      type?: \"item\";\n      checked?: boolean;\n      disabled?: boolean;\n      variant?: \"default\" | \"destructive\";\n      onClick?: () => void;\n      className?: string;\n    }\n  | {\n      key: string;\n      type: \"checkbox\";\n      label?: string;\n      icon?: React.ReactNode;\n      checked?: boolean;\n      disabled?: boolean;\n      onClick?: () => void;\n      className?: string;\n    }\n  | {\n      key: string;\n      type: \"radio\";\n      label?: string;\n      icon?: React.ReactNode;\n      group: string;\n      checked?: boolean;\n      disabled?: boolean;\n      onClick?: () => void;\n      className?: string;\n    }\n  | {\n      key: string;\n      type: \"separator\";\n    }\n  | {\n      key: string;\n      type: \"group\";\n      label?: string;\n      children: DropdownMenuItem[];\n      disabled?: boolean;\n    };\n\nexport interface DropdownMenuProps {\n  // Core props\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n\n  // Content\n  children?: React.ReactNode;\n  trigger?: React.ReactNode;\n  content?: React.ReactNode;\n  items?: DropdownMenuItem[];\n\n  // Layout\n  side?: DropdownMenuSide;\n  align?: DropdownMenuAlign;\n  sideOffset?: number;\n  alignOffset?: number;\n\n  // Portal\n  portal?: boolean;\n\n  // Context menu\n  contextMenu?: boolean;\n\n  // Styling\n  className?: string;\n  contentClassName?: string;\n  triggerClassName?: string;\n}\n\nconst DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(\n  (props, ref) => {\n    const {\n      open,\n      defaultOpen,\n      onOpenChange,\n      modal = false,\n      children,\n      trigger,\n      content,\n      items,\n      side = \"bottom\",\n      align = \"start\",\n      sideOffset,\n      alignOffset,\n      portal = true,\n      contextMenu = false,\n      className,\n      contentClassName,\n      triggerClassName,\n    } = props;\n\n    // Context menu state\n    const [contextMenuOpen, setContextMenuOpen] = useState(false);\n    const [contextMenuPosition, setContextMenuPosition] = useState({\n      x: 0,\n      y: 0,\n    });\n\n    // Handle context menu trigger\n    const handleContextMenu = (e: React.MouseEvent) => {\n      if (contextMenu) {\n        e.preventDefault();\n        setContextMenuPosition({ x: e.clientX, y: e.clientY });\n        setContextMenuOpen(true);\n      }\n    };\n\n    // If children are provided (compound pattern), render them directly\n    if (children) {\n      return (\n        <SDropdownMenu\n          open={open}\n          defaultOpen={defaultOpen}\n          onOpenChange={onOpenChange}\n          modal={modal}\n        >\n          {children}\n        </SDropdownMenu>\n      );\n    }\n\n    // Render items if provided\n    const renderItems = (menuItems: DropdownMenuItem[]): React.ReactNode => {\n      return menuItems.map((item) => {\n        switch (item.type) {\n          case \"separator\":\n            return <SDropdownMenuSeparator key={item.key} />;\n          case \"group\":\n            return (\n              <SDropdownMenuGroup key={item.key}>\n                {item.label && (\n                  <SDropdownMenuLabel>{item.label}</SDropdownMenuLabel>\n                )}\n                {renderItems(item.children)}\n              </SDropdownMenuGroup>\n            );\n          case \"checkbox\":\n            return (\n              <SDropdownMenuCheckboxItem\n                key={item.key}\n                checked={item.checked}\n                disabled={item.disabled}\n                className={item.className}\n                onCheckedChange={(checked: boolean) => {\n                  if (checked && item.onClick) {\n                    item.onClick();\n                  }\n                }}\n              >\n                {item.icon && <span className=\"ds:mr-2\">{item.icon}</span>}\n                {item.label}\n              </SDropdownMenuCheckboxItem>\n            );\n          case \"radio\":\n            return (\n              <SDropdownMenuRadioGroup key={item.key} value={item.group}>\n                <SDropdownMenuRadioItem\n                  value={item.key}\n                  disabled={item.disabled}\n                  onClick={item.onClick}\n                  className={item.className}\n                >\n                  {item.icon && <span className=\"ds:mr-2\">{item.icon}</span>}\n                  {item.label}\n                </SDropdownMenuRadioItem>\n              </SDropdownMenuRadioGroup>\n            );\n          default: {\n            // item or undefined type\n            if (item.children && item.children.length > 0) {\n              // Submenu\n              return (\n                <SDropdownMenuSub key={item.key}>\n                  <SDropdownMenuSubTrigger\n                    disabled={item.disabled}\n                    className={cn(\n                      item.disabled ? \"ds:opacity-50 ds:cursor-not-allowed\" : \"\",\n                      item.className\n                    )}\n                  >\n                    {item.icon && <span className=\"ds:mr-2\">{item.icon}</span>}\n                    {item.label}\n                  </SDropdownMenuSubTrigger>\n                  <SDropdownMenuSubContent>\n                    {renderItems(item.children)}\n                  </SDropdownMenuSubContent>\n                </SDropdownMenuSub>\n              );\n            } else {\n              // Regular item\n              return (\n                <SDropdownMenuItem\n                  key={item.key}\n                  disabled={item.disabled}\n                  variant={item.variant}\n                  onClick={item.onClick}\n                  className={item.className}\n                >\n                  {item.icon && <span className=\"ds:mr-2\">{item.icon}</span>}\n                  {item.label}\n                </SDropdownMenuItem>\n              );\n            }\n          }\n        }\n      });\n    };\n\n    // If context menu is enabled, render differently\n    if (contextMenu) {\n      return (\n        <>\n          {/* Trigger area for context menu */}\n          <div\n            onContextMenu={handleContextMenu}\n            className={cn(triggerClassName)}\n          >\n            {trigger}\n          </div>\n          <SDropdownMenu\n            open={contextMenuOpen}\n            onOpenChange={setContextMenuOpen}\n            modal={modal}\n          >\n            <SDropdownMenuTrigger asChild>\n              <div\n                className=\"ds:fixed\"\n                style={{\n                  left: contextMenuPosition.x,\n                  top: contextMenuPosition.y,\n                  width: 1,\n                  height: 1,\n                }}\n              />\n            </SDropdownMenuTrigger>\n            <SDropdownMenuPortal>\n              <SDropdownMenuContent\n                ref={ref}\n                className={cn(className, contentClassName)}\n                side=\"bottom\"\n                align=\"start\"\n                sideOffset={4}\n              >\n                {content}\n                {items && renderItems(items)}\n              </SDropdownMenuContent>\n            </SDropdownMenuPortal>\n          </SDropdownMenu>\n        </>\n      );\n    }\n\n    // Fallback to props-based pattern\n    const triggerElement = trigger ? (\n      <div onContextMenu={handleContextMenu} className={cn(triggerClassName)}>\n        {trigger}\n      </div>\n    ) : null;\n\n    const contentElement =\n      content || items ? (\n        <SDropdownMenuContent\n          ref={ref}\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          alignOffset={alignOffset}\n          className={cn(className, contentClassName)}\n        >\n          {content}\n          {items && renderItems(items)}\n        </SDropdownMenuContent>\n      ) : null;\n\n    return (\n      <SDropdownMenu\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        modal={modal}\n      >\n        {triggerElement && (\n          <SDropdownMenuTrigger asChild>{triggerElement}</SDropdownMenuTrigger>\n        )}\n        {portal ? (\n          <SDropdownMenuPortal>{contentElement}</SDropdownMenuPortal>\n        ) : (\n          contentElement\n        )}\n      </SDropdownMenu>\n    );\n  }\n);\n\nDropdownMenu.displayName = \"DropdownMenu\";\n\nexport default DropdownMenu;\n"],"names":["DropdownMenu","React","props","ref","open","defaultOpen","onOpenChange","modal","children","trigger","content","items","side","align","sideOffset","alignOffset","portal","contextMenu","className","contentClassName","triggerClassName","contextMenuOpen","setContextMenuOpen","useState","contextMenuPosition","setContextMenuPosition","handleContextMenu","e","jsx","SDropdownMenu","renderItems","menuItems","item","SDropdownMenuSeparator","SDropdownMenuGroup","SDropdownMenuLabel","jsxs","SDropdownMenuCheckboxItem","checked","SDropdownMenuRadioGroup","SDropdownMenuRadioItem","SDropdownMenuSub","SDropdownMenuSubTrigger","cn","SDropdownMenuSubContent","SDropdownMenuItem","Fragment","SDropdownMenuTrigger","SDropdownMenuPortal","SDropdownMenuContent","triggerElement","contentElement"],"mappings":"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"}

package/dist/esm/components/FloatLabel.js

@@ -1,70 +1,70 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import * as u from "react";
-import { cn as f } from "../packages/ui/src/lib/utils.js";
-import { Label as h } from "../packages/ui/src/components/label.js";
-import { Tooltip as g } from "./Tooltip/Tooltip.js";
-import { Info as w } from "lucide-react";
-const m = u.forwardRef(
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as u } from "../packages/ui/src/lib/utils.js";
+import { Label as f } from "../packages/ui/src/components/label.js";
+import { Tooltip as h } from "./Tooltip/Tooltip.js";
+import { Info as g } from "lucide-react";
+const w = i.forwardRef(
   ({
-    className: t,
-    infoTooltip: a,
-    size: n = "xl",
-    shouldFloat: o,
-    required: c,
-    children: s,
-    ...l
-  }, i) => {
-    const e = n === "lg" || !1;
-    return /* @__PURE__ */ p(
-      h,
+    className: a,
+    infoTooltip: r,
+    size: p = "xl",
+    shouldFloat: e,
+    required: t,
+    children: n,
+    ...c
+  }, l) => {
+    const s = p === "lg" || !1;
+    return /* @__PURE__ */ d(
+      f,
       {
-        className: f(
-          "absolute start-2 select-none pointer-events-none",
-          "bg-background px-3 translate-y-2",
-          "flex",
+        className: u(
+          "ds:absolute ds:start-2 ds:select-none ds:pointer-events-none",
+          "ds:bg-background ds:px-3 ds:translate-y-2",
+          "ds:flex",
           {
-            "top-0.5 origin-left scale-75 translate-x-1 max-w-full h-3 py-0 bg-transparent": !e,
+            "ds:top-0.5 ds:origin-left ds:scale-75 ds:translate-x-1 ds:max-w-full ds:h-3 ds:py-0 ds:bg-transparent": !s,
             // State empty (placeholder shown) - ở giữa input
-            "peer-placeholder-shown:top-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] peer-placeholder-shown:h-[calc(100%-(--spacing(4)))] peer-placeholder-shown:py-3 peer-placeholder-shown:bg-background": !e,
+            "ds:peer-placeholder-shown:top-0 ds:peer-placeholder-shown:scale-100 ds:peer-placeholder-shown:translate-x-0 ds:peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] ds:peer-placeholder-shown:h-[calc(100%-(--spacing(4)))] ds:peer-placeholder-shown:py-3 ds:peer-placeholder-shown:bg-background": !s,
             // // State focus - nằm trên input
-            "peer-focus:top-0.5 peer-focus:origin-left peer-focus:scale-75 peer-focus:translate-x-1 peer-focus:text-primary peer-focus:max-w-full peer-focus:h-3 peer-focus:py-0 peer-focus:bg-transparent": !e,
-            "group-focus-within:top-0.5 group-focus-within:origin-left group-focus-within:scale-75 group-focus-within:translate-x-1 group-focus-within:text-primary group-focus-within:max-w-full group-focus-within:h-3 group-focus-within:py-0 group-focus-within:bg-transparent": !e
+            "ds:peer-focus:top-0.5 ds:peer-focus:origin-left ds:peer-focus:scale-75 ds:peer-focus:translate-x-1 ds:peer-focus:text-primary ds:peer-focus:max-w-full ds:peer-focus:h-3 ds:peer-focus:py-0 ds:peer-focus:bg-transparent": !s,
+            "ds:group-focus-within:top-0.5 ds:group-focus-within:origin-left ds:group-focus-within:scale-75 ds:group-focus-within:translate-x-1 ds:group-focus-within:text-primary ds:group-focus-within:max-w-full ds:group-focus-within:h-3 ds:group-focus-within:py-0 ds:group-focus-within:bg-transparent": !s
           },
           {
-            "-top-3.5 origin-left scale-75 translate-x-0 max-w-full w-auto h-3 py-0": e,
+            "ds:-top-3.5 ds:origin-left ds:scale-75 ds:translate-x-0 ds:max-w-full ds:w-auto ds:h-3 ds:py-0": s,
             // State empty (placeholder shown) - ở giữa input
-            "peer-placeholder-shown:-top-0.5 peer-placeholder-shown:scale-100 peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] peer-placeholder-shown:h-[calc(100%-(--spacing(3)))] peer-placeholder-shown:py-2 peer-placeholder-shown:bg-background": e,
+            "ds:peer-placeholder-shown:-top-0.5 ds:peer-placeholder-shown:scale-100 ds:peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] ds:peer-placeholder-shown:h-[calc(100%-(--spacing(3)))] ds:peer-placeholder-shown:py-2 ds:peer-placeholder-shown:bg-background": s,
             // // State focus - nằm trên input
-            "peer-focus:-top-3.5 peer-focus:origin-left peer-focus:scale-75 peer-focus:text-primary peer-focus:max-w-full peer-focus:w-auto peer-focus:h-3 peer-focus:py-0": e,
-            "group-focus-within:-top-3.5 group-focus-within:origin-left group-focus-within:scale-75 group-focus-within:text-primary group-focus-within:max-w-full group-focus-within:w-auto group-focus-within:h-3 group-focus-within:py-0": e
+            "ds:peer-focus:-top-3.5 ds:peer-focus:origin-left ds:peer-focus:scale-75 ds:peer-focus:text-primary ds:peer-focus:max-w-full ds:peer-focus:w-auto ds:peer-focus:h-3 ds:peer-focus:py-0": s,
+            "ds:group-focus-within:-top-3.5 ds:group-focus-within:origin-left ds:group-focus-within:scale-75 ds:group-focus-within:text-primary ds:group-focus-within:max-w-full ds:group-focus-within:w-auto ds:group-focus-within:h-3 ds:group-focus-within:py-0": s
           },
           // State when shouldFloat prop is set
           {
-            "top-0.5 origin-left scale-75 translate-x-1 max-w-full h-3 py-0": typeof o == "boolean" && o && !e,
-            "top-0 scale-100 translate-x-0 w-[calc(100%-(--spacing(4)))] h-[calc(100%-(--spacing(4)))] py-3 bg-background": typeof o == "boolean" && !o && !e
+            "ds:top-0.5 ds:origin-left ds:scale-75 ds:translate-x-1 ds:max-w-full ds:h-3 ds:py-0": typeof e == "boolean" && e && !s,
+            "ds:top-0 ds:scale-100 ds:translate-x-0 ds:w-[calc(100%-(--spacing(4)))] ds:h-[calc(100%-(--spacing(4)))] ds:py-3 ds:bg-background": typeof e == "boolean" && !e && !s
           },
           {
-            "-top-3.5 origin-left scale-75 translate-x-0 max-w-full h-3 py-0": typeof o == "boolean" && o && e,
-            "top-0 scale-100 translate-x-0 w-[calc(100%-(--spacing(4)))] h-[calc(100%-(--spacing(4)))] py-3 bg-background": typeof o == "boolean" && !o && e
+            "ds:-top-3.5 ds:origin-left ds:scale-75 ds:translate-x-0 ds:max-w-full ds:h-3 ds:py-0": typeof e == "boolean" && e && s,
+            "ds:top-0 ds:scale-100 ds:translate-x-0 ds:w-[calc(100%-(--spacing(4)))] ds:h-[calc(100%-(--spacing(4)))] ds:py-3 ds:bg-background": typeof e == "boolean" && !e && s
           },
-          "will-change-transform transition-all duration-300 ease-in-out",
-          t
+          "ds:will-change-transform ds:transition-all ds:duration-300 ds:ease-in-out",
+          a
         ),
-        ref: i,
-        ...l,
+        ref: l,
+        ...c,
         children: [
-          /* @__PURE__ */ p("span", { className: "truncate whitespace-nowrap max-w-full pointer-events-none", children: [
-            s,
-            c && /* @__PURE__ */ r("span", { className: "text-error ml-0.5", children: "*" })
+          /* @__PURE__ */ d("span", { className: "ds:truncate ds:whitespace-nowrap ds:max-w-full ds:pointer-events-none", children: [
+            n,
+            t && /* @__PURE__ */ o("span", { className: "ds:text-error ds:ml-0.5", children: "*" })
           ] }),
-          a && /* @__PURE__ */ r(g, { content: a, children: /* @__PURE__ */ r(w, { className: "size-3.5 min-w-3.5 z-10 pointer-events-auto" }) })
+          r && /* @__PURE__ */ o(h, { content: r, children: /* @__PURE__ */ o(g, { className: "ds:size-3.5 ds:min-w-3.5 ds:z-10 ds:pointer-events-auto" }) })
         ]
       }
     );
   }
 );
-m.displayName = "FloatingLabel";
+w.displayName = "FloatingLabel";
 export {
-  m as FloatingLabel
+  w as FloatingLabel
 };
 //# sourceMappingURL=FloatLabel.js.map

package/dist/esm/components/FloatLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatLabel.js","sources":["../../../src/components/FloatLabel.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Label } from \"@dsui/ui/components/label\";\nimport { Tooltip } from \"./Tooltip/Tooltip\";\nimport { Info } from \"lucide-react\";\n\nconst FloatingLabel = React.forwardRef<\n  React.ElementRef<typeof Label>,\n  React.ComponentPropsWithoutRef<typeof Label> & {\n    infoTooltip?: React.ReactNode;\n    size?: string;\n    shouldFloat?: boolean;\n    required?: boolean;\n  }\n>(\n  (\n    {\n      className,\n      infoTooltip,\n      size = \"xl\",\n      shouldFloat,\n      required,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const lagerSize = size === \"lg\" || false;\n\n    return (\n      <Label\n        className={cn(\n          \"absolute start-2 select-none pointer-events-none\",\n          \"bg-background px-3 translate-y-2\",\n          \"flex\",\n          {\n            \"top-0.5 origin-left scale-75 translate-x-1 max-w-full h-3 py-0 bg-transparent\":\n              !lagerSize,\n            // State empty (placeholder shown) - ở giữa input\n            \"peer-placeholder-shown:top-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] peer-placeholder-shown:h-[calc(100%-(--spacing(4)))] peer-placeholder-shown:py-3 peer-placeholder-shown:bg-background\":\n              !lagerSize,\n            // // State focus - nằm trên input\n            \"peer-focus:top-0.5 peer-focus:origin-left peer-focus:scale-75 peer-focus:translate-x-1 peer-focus:text-primary peer-focus:max-w-full peer-focus:h-3 peer-focus:py-0 peer-focus:bg-transparent\":\n              !lagerSize,\n            \"group-focus-within:top-0.5 group-focus-within:origin-left group-focus-within:scale-75 group-focus-within:translate-x-1 group-focus-within:text-primary group-focus-within:max-w-full group-focus-within:h-3 group-focus-within:py-0 group-focus-within:bg-transparent\":\n              !lagerSize,\n          },\n          {\n            \"-top-3.5 origin-left scale-75 translate-x-0 max-w-full w-auto h-3 py-0\":\n              lagerSize,\n            // State empty (placeholder shown) - ở giữa input\n            \"peer-placeholder-shown:-top-0.5 peer-placeholder-shown:scale-100 peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] peer-placeholder-shown:h-[calc(100%-(--spacing(3)))] peer-placeholder-shown:py-2 peer-placeholder-shown:bg-background\":\n              lagerSize,\n            // // State focus - nằm trên input\n            \"peer-focus:-top-3.5 peer-focus:origin-left peer-focus:scale-75 peer-focus:text-primary peer-focus:max-w-full peer-focus:w-auto peer-focus:h-3 peer-focus:py-0\":\n              lagerSize,\n            \"group-focus-within:-top-3.5 group-focus-within:origin-left group-focus-within:scale-75 group-focus-within:text-primary group-focus-within:max-w-full group-focus-within:w-auto group-focus-within:h-3 group-focus-within:py-0\":\n              lagerSize,\n          },\n\n          // State when shouldFloat prop is set\n          {\n            \"top-0.5 origin-left scale-75 translate-x-1 max-w-full h-3 py-0\":\n              typeof shouldFloat === \"boolean\" && shouldFloat && !lagerSize,\n            \"top-0 scale-100 translate-x-0 w-[calc(100%-(--spacing(4)))] h-[calc(100%-(--spacing(4)))] py-3 bg-background\":\n              typeof shouldFloat === \"boolean\" && !shouldFloat && !lagerSize,\n          },\n          {\n            \"-top-3.5 origin-left scale-75 translate-x-0 max-w-full h-3 py-0\":\n              typeof shouldFloat === \"boolean\" && shouldFloat && lagerSize,\n            \"top-0 scale-100 translate-x-0 w-[calc(100%-(--spacing(4)))] h-[calc(100%-(--spacing(4)))] py-3 bg-background\":\n              typeof shouldFloat === \"boolean\" && !shouldFloat && lagerSize,\n          },\n          \"will-change-transform transition-all duration-300 ease-in-out\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        <span className=\"truncate whitespace-nowrap max-w-full pointer-events-none\">\n          {children}\n          {required && <span className=\"text-error ml-0.5\">*</span>}\n        </span>\n\n        {infoTooltip && (\n          <Tooltip content={infoTooltip}>\n            <Info className=\"size-3.5 min-w-3.5 z-10 pointer-events-auto\" />\n          </Tooltip>\n        )}\n      </Label>\n    );\n  }\n);\n\nFloatingLabel.displayName = \"FloatingLabel\";\n\nexport { FloatingLabel };\n"],"names":["FloatingLabel","React","className","infoTooltip","size","shouldFloat","required","children","props","ref","lagerSize","jsxs","Label","cn","jsx","Tooltip","Info"],"mappings":";;;;;;AAOA,MAAMA,IAAgBC,EAAM;AAAA,EAS1B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAYN,MAAS,QAAQ;AAEnC,WACE,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,YACE,iFACE,CAACH;AAAA;AAAA,YAEH,iRACE,CAACA;AAAA;AAAA,YAEH,iMACE,CAACA;AAAA,YACH,yQACE,CAACA;AAAA,UAAA;AAAA,UAEL;AAAA,YACE,0EACEA;AAAA;AAAA,YAEF,+OACEA;AAAA;AAAA,YAEF,iKACEA;AAAA,YACF,iOACEA;AAAA,UAAA;AAAA;AAAA,UAIJ;AAAA,YACE,kEACE,OAAOL,KAAgB,aAAaA,KAAe,CAACK;AAAA,YACtD,gHACE,OAAOL,KAAgB,aAAa,CAACA,KAAe,CAACK;AAAA,UAAA;AAAA,UAEzD;AAAA,YACE,mEACE,OAAOL,KAAgB,aAAaA,KAAeK;AAAA,YACrD,gHACE,OAAOL,KAAgB,aAAa,CAACA,KAAeK;AAAA,UAAA;AAAA,UAExD;AAAA,UACAR;AAAA,QAAA;AAAA,QAEF,KAAAO;AAAA,QACC,GAAGD;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,6DACb,UAAA;AAAA,YAAAJ;AAAA,YACAD,KAAY,gBAAAQ,EAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA,IAAA,CAAC;AAAA,UAAA,GACpD;AAAA,UAECX,uBACEY,GAAA,EAAQ,SAASZ,GAChB,UAAA,gBAAAW,EAACE,GAAA,EAAK,WAAU,8CAAA,CAA8C,EAAA,CAChE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAhB,EAAc,cAAc;"}
+{"version":3,"file":"FloatLabel.js","sources":["../../../src/components/FloatLabel.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Label } from \"@dsui/ui/components/label\";\nimport { Tooltip } from \"./Tooltip/Tooltip\";\nimport { Info } from \"lucide-react\";\n\nconst FloatingLabel = React.forwardRef<\n  React.ElementRef<typeof Label>,\n  React.ComponentPropsWithoutRef<typeof Label> & {\n    infoTooltip?: React.ReactNode;\n    size?: string;\n    shouldFloat?: boolean;\n    required?: boolean;\n  }\n>(\n  (\n    {\n      className,\n      infoTooltip,\n      size = \"xl\",\n      shouldFloat,\n      required,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const lagerSize = size === \"lg\" || false;\n\n    return (\n      <Label\n        className={cn(\n          \"ds:absolute ds:start-2 ds:select-none ds:pointer-events-none\",\n          \"ds:bg-background ds:px-3 ds:translate-y-2\",\n          \"ds:flex\",\n          {\n            \"ds:top-0.5 ds:origin-left ds:scale-75 ds:translate-x-1 ds:max-w-full ds:h-3 ds:py-0 ds:bg-transparent\":\n              !lagerSize,\n            // State empty (placeholder shown) - ở giữa input\n            \"ds:peer-placeholder-shown:top-0 ds:peer-placeholder-shown:scale-100 ds:peer-placeholder-shown:translate-x-0 ds:peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] ds:peer-placeholder-shown:h-[calc(100%-(--spacing(4)))] ds:peer-placeholder-shown:py-3 ds:peer-placeholder-shown:bg-background\":\n              !lagerSize,\n            // // State focus - nằm trên input\n            \"ds:peer-focus:top-0.5 ds:peer-focus:origin-left ds:peer-focus:scale-75 ds:peer-focus:translate-x-1 ds:peer-focus:text-primary ds:peer-focus:max-w-full ds:peer-focus:h-3 ds:peer-focus:py-0 ds:peer-focus:bg-transparent\":\n              !lagerSize,\n            \"ds:group-focus-within:top-0.5 ds:group-focus-within:origin-left ds:group-focus-within:scale-75 ds:group-focus-within:translate-x-1 ds:group-focus-within:text-primary ds:group-focus-within:max-w-full ds:group-focus-within:h-3 ds:group-focus-within:py-0 ds:group-focus-within:bg-transparent\":\n              !lagerSize,\n          },\n          {\n            \"ds:-top-3.5 ds:origin-left ds:scale-75 ds:translate-x-0 ds:max-w-full ds:w-auto ds:h-3 ds:py-0\":\n              lagerSize,\n            // State empty (placeholder shown) - ở giữa input\n            \"ds:peer-placeholder-shown:-top-0.5 ds:peer-placeholder-shown:scale-100 ds:peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] ds:peer-placeholder-shown:h-[calc(100%-(--spacing(3)))] ds:peer-placeholder-shown:py-2 ds:peer-placeholder-shown:bg-background\":\n              lagerSize,\n            // // State focus - nằm trên input\n            \"ds:peer-focus:-top-3.5 ds:peer-focus:origin-left ds:peer-focus:scale-75 ds:peer-focus:text-primary ds:peer-focus:max-w-full ds:peer-focus:w-auto ds:peer-focus:h-3 ds:peer-focus:py-0\":\n              lagerSize,\n            \"ds:group-focus-within:-top-3.5 ds:group-focus-within:origin-left ds:group-focus-within:scale-75 ds:group-focus-within:text-primary ds:group-focus-within:max-w-full ds:group-focus-within:w-auto ds:group-focus-within:h-3 ds:group-focus-within:py-0\":\n              lagerSize,\n          },\n\n          // State when shouldFloat prop is set\n          {\n            \"ds:top-0.5 ds:origin-left ds:scale-75 ds:translate-x-1 ds:max-w-full ds:h-3 ds:py-0\":\n              typeof shouldFloat === \"boolean\" && shouldFloat && !lagerSize,\n            \"ds:top-0 ds:scale-100 ds:translate-x-0 ds:w-[calc(100%-(--spacing(4)))] ds:h-[calc(100%-(--spacing(4)))] ds:py-3 ds:bg-background\":\n              typeof shouldFloat === \"boolean\" && !shouldFloat && !lagerSize,\n          },\n          {\n            \"ds:-top-3.5 ds:origin-left ds:scale-75 ds:translate-x-0 ds:max-w-full ds:h-3 ds:py-0\":\n              typeof shouldFloat === \"boolean\" && shouldFloat && lagerSize,\n            \"ds:top-0 ds:scale-100 ds:translate-x-0 ds:w-[calc(100%-(--spacing(4)))] ds:h-[calc(100%-(--spacing(4)))] ds:py-3 ds:bg-background\":\n              typeof shouldFloat === \"boolean\" && !shouldFloat && lagerSize,\n          },\n          \"ds:will-change-transform ds:transition-all ds:duration-300 ds:ease-in-out\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        <span className=\"ds:truncate ds:whitespace-nowrap ds:max-w-full ds:pointer-events-none\">\n          {children}\n          {required && <span className=\"ds:text-error ds:ml-0.5\">*</span>}\n        </span>\n\n        {infoTooltip && (\n          <Tooltip content={infoTooltip}>\n            <Info className=\"ds:size-3.5 ds:min-w-3.5 ds:z-10 ds:pointer-events-auto\" />\n          </Tooltip>\n        )}\n      </Label>\n    );\n  }\n);\n\nFloatingLabel.displayName = \"FloatingLabel\";\n\nexport { FloatingLabel };\n"],"names":["FloatingLabel","React","className","infoTooltip","size","shouldFloat","required","children","props","ref","lagerSize","jsxs","Label","cn","jsx","Tooltip","Info"],"mappings":";;;;;;AAOA,MAAMA,IAAgBC,EAAM;AAAA,EAS1B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAYN,MAAS,QAAQ;AAEnC,WACE,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,YACE,yGACE,CAACH;AAAA;AAAA,YAEH,sSACE,CAACA;AAAA;AAAA,YAEH,4NACE,CAACA;AAAA,YACH,oSACE,CAACA;AAAA,UAAA;AAAA,UAEL;AAAA,YACE,kGACEA;AAAA;AAAA,YAEF,iQACEA;AAAA;AAAA,YAEF,yLACEA;AAAA,YACF,yPACEA;AAAA,UAAA;AAAA;AAAA,UAIJ;AAAA,YACE,uFACE,OAAOL,KAAgB,aAAaA,KAAe,CAACK;AAAA,YACtD,qIACE,OAAOL,KAAgB,aAAa,CAACA,KAAe,CAACK;AAAA,UAAA;AAAA,UAEzD;AAAA,YACE,wFACE,OAAOL,KAAgB,aAAaA,KAAeK;AAAA,YACrD,qIACE,OAAOL,KAAgB,aAAa,CAACA,KAAeK;AAAA,UAAA;AAAA,UAExD;AAAA,UACAR;AAAA,QAAA;AAAA,QAEF,KAAAO;AAAA,QACC,GAAGD;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,yEACb,UAAA;AAAA,YAAAJ;AAAA,YACAD,KAAY,gBAAAQ,EAAC,QAAA,EAAK,WAAU,2BAA0B,UAAA,IAAA,CAAC;AAAA,UAAA,GAC1D;AAAA,UAECX,uBACEY,GAAA,EAAQ,SAASZ,GAChB,UAAA,gBAAAW,EAACE,GAAA,EAAK,WAAU,0DAAA,CAA0D,EAAA,CAC5E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAhB,EAAc,cAAc;"}

package/dist/esm/components/Glass/Glass.js

@@ -1,11 +1,11 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import "@radix-ui/react-slot";
 import "../../packages/ui/src/components/button.js";
 import "../../packages/ui/src/components/button-group.js";
 import "../../packages/ui/src/components/input.js";
 import "../../packages/ui/src/components/textarea.js";
 import "@radix-ui/react-label";
-import { cn as n } from "../../packages/ui/src/lib/utils.js";
+import { cn as r } from "../../packages/ui/src/lib/utils.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "@radix-ui/react-tooltip";
@@ -32,27 +32,27 @@ import "../../packages/ui/src/components/sidebar.js";
 import "@radix-ui/react-slider";
 import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
-import { cva as o } from "class-variance-authority";
-o(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+import { cva as d } from "class-variance-authority";
+d(
+  "ds:inline-flex ds:items-center ds:justify-center ds:gap-2 ds:whitespace-nowrap ds:text-sm ds:font-medium ds:transition-all ds:disabled:pointer-events-none ds:disabled:opacity-50 ds:[&_svg]:pointer-events-none ds:[&_svg:not([class*='size-'])]:size-4 ds:shrink-0 ds:[&_svg]:shrink-0 ds:outline-none ds:focus-visible:border-ring ds:focus-visible:ring-ring/50 ds:focus-visible:ring-[3px] ds:aria-invalid:ring-destructive/20 ds:dark:aria-invalid:ring-destructive/40 ds:aria-invalid:border-destructive",
   {
     variants: {},
     defaultVariants: {}
   }
 );
-const P = ({ className: t, children: r }) => /* @__PURE__ */ i(
+const P = ({ className: i, children: t }) => /* @__PURE__ */ s(
   "div",
   {
-    className: n(
-      "relative inline-flex overflow-hidden cursor-pointer shadow-[0_6px_6px_rgba(0,0,0,0.2),0_0_20px_rgba(0,0,0,0.1)] transition-all duration-400 ease-[cubic-bezier(0.175,0.885,0.32,2.2)] p-0 rounded-md",
-      t
+    className: r(
+      "ds:relative ds:inline-flex ds:overflow-hidden ds:cursor-pointer ds:shadow-[0_6px_6px_rgba(0,0,0,0.2),0_0_20px_rgba(0,0,0,0.1)] ds:transition-all ds:duration-400 ds:ease-[cubic-bezier(0.175,0.885,0.32,2.2)] ds:p-0 ds:rounded-md",
+      i
     ),
     children: [
-      /* @__PURE__ */ e("div", { className: "absolute z-0 inset-0 backdrop-blur-[2.5px] overflow-hidden isolate [filter:url(#glass-distortion)] rounded-[inherit]" }),
-      /* @__PURE__ */ e("div", { className: "z-[1] absolute inset-0 bg-white/25 rounded-[inherit]" }),
-      /* @__PURE__ */ e("div", { className: "absolute inset-0 z-[2] overflow-hidden shadow-[inset_2px_2px_1px_0_rgba(255,255,255,0.5),inset_-1px_-1px_1px_1px_rgba(255,255,255,0.5)] rounded-[inherit]" }),
-      /* @__PURE__ */ e("div", { className: "z-[3] relative", children: /* @__PURE__ */ e("div", { className: "text-foreground [text-shadow:0px_1px_3px_rgba(255, 255, 255, 0.3)] transition-all duration-100 ease-in inline-flex gap-2", children: r }) }),
-      /* @__PURE__ */ e("svg", { className: "hidden", children: /* @__PURE__ */ i(
+      /* @__PURE__ */ e("div", { className: "ds:absolute ds:z-0 ds:inset-0 ds:backdrop-blur-[2.5px] ds:overflow-hidden ds:isolate ds:[filter:url(#glass-distortion)] ds:rounded-[inherit]" }),
+      /* @__PURE__ */ e("div", { className: "ds:z-1 ds:absolute ds:inset-0 ds:bg-white/25 ds:rounded-[inherit]" }),
+      /* @__PURE__ */ e("div", { className: "ds:absolute ds:inset-0 ds:z-2 ds:overflow-hidden ds:shadow-[inset_2px_2px_1px_0_rgba(255,255,255,0.5),inset_-1px_-1px_1px_1px_rgba(255,255,255,0.5)] ds:rounded-[inherit]" }),
+      /* @__PURE__ */ e("div", { className: "ds:z-3 ds:relative", children: /* @__PURE__ */ e("div", { className: "ds:text-foreground ds:[text-shadow:0px_1px_3px_rgba(255, ds:255, ds:255, ds:0.3)] ds:transition-all ds:duration-100 ds:ease-in ds:inline-flex ds:gap-2", children: t }) }),
+      /* @__PURE__ */ e("svg", { className: "ds:hidden", children: /* @__PURE__ */ s(
         "filter",
         {
           id: "glass-distortion",
@@ -72,7 +72,7 @@ const P = ({ className: t, children: r }) => /* @__PURE__ */ i(
                 result: "turbulence"
               }
             ),
-            /* @__PURE__ */ i("feComponentTransfer", { in: "turbulence", result: "mapped", children: [
+            /* @__PURE__ */ s("feComponentTransfer", { in: "turbulence", result: "mapped", children: [
               /* @__PURE__ */ e("feFuncR", { type: "gamma", amplitude: "1", exponent: "10", offset: "0.5" }),
               /* @__PURE__ */ e("feFuncG", { type: "gamma", amplitude: "0", exponent: "1", offset: "0" }),
               /* @__PURE__ */ e("feFuncB", { type: "gamma", amplitude: "0", exponent: "1", offset: "0.5" })

package/dist/esm/components/Glass/Glass.js.map

@@ -1 +1 @@
-{"version":3,"file":"Glass.js","sources":["../../../../src/components/Glass/Glass.tsx"],"sourcesContent":["import { cn } from \"@dsui/ui/index\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nconst glassVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n);\n\nexport type GlassProps = {\n  className?: string;\n  children?: React.ReactNode;\n} & VariantProps<typeof glassVariants>;\n\nconst Glass: React.FC<GlassProps> = ({ className, children }) => {\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex overflow-hidden cursor-pointer shadow-[0_6px_6px_rgba(0,0,0,0.2),0_0_20px_rgba(0,0,0,0.1)] transition-all duration-400 ease-[cubic-bezier(0.175,0.885,0.32,2.2)] p-0 rounded-md\",\n        className\n      )}\n    >\n      <div className=\"absolute z-0 inset-0 backdrop-blur-[2.5px] overflow-hidden isolate [filter:url(#glass-distortion)] rounded-[inherit]\"></div>\n      <div className=\"z-[1] absolute inset-0 bg-white/25 rounded-[inherit]\"></div>\n      <div className=\"absolute inset-0 z-[2] overflow-hidden shadow-[inset_2px_2px_1px_0_rgba(255,255,255,0.5),inset_-1px_-1px_1px_1px_rgba(255,255,255,0.5)] rounded-[inherit]\"></div>\n      <div className=\"z-[3] relative\">\n        <div className=\"text-foreground [text-shadow:0px_1px_3px_rgba(255, 255, 255, 0.3)] transition-all duration-100 ease-in inline-flex gap-2\">\n          {children}\n        </div>\n      </div>\n      <svg className=\"hidden\">\n        <filter\n          id=\"glass-distortion\"\n          x=\"0%\"\n          y=\"0%\"\n          width=\"100%\"\n          height=\"100%\"\n          filterUnits=\"objectBoundingBox\"\n        >\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency=\"0.01 0.01\"\n            numOctaves=\"1\"\n            seed=\"5\"\n            result=\"turbulence\"\n          />\n\n          <feComponentTransfer in=\"turbulence\" result=\"mapped\">\n            <feFuncR type=\"gamma\" amplitude=\"1\" exponent=\"10\" offset=\"0.5\" />\n            <feFuncG type=\"gamma\" amplitude=\"0\" exponent=\"1\" offset=\"0\" />\n            <feFuncB type=\"gamma\" amplitude=\"0\" exponent=\"1\" offset=\"0.5\" />\n          </feComponentTransfer>\n\n          <feGaussianBlur in=\"turbulence\" stdDeviation=\"3\" result=\"softMap\" />\n\n          <feSpecularLighting\n            in=\"softMap\"\n            surfaceScale=\"5\"\n            specularConstant=\"1\"\n            specularExponent=\"100\"\n            lighting-color=\"white\"\n            result=\"specLight\"\n          >\n            <fePointLight x=\"-200\" y=\"-200\" z=\"300\" />\n          </feSpecularLighting>\n\n          <feComposite\n            in=\"specLight\"\n            operator=\"arithmetic\"\n            k1=\"0\"\n            k2=\"1\"\n            k3=\"1\"\n            k4=\"0\"\n            result=\"litImage\"\n          />\n\n          <feDisplacementMap\n            in=\"SourceGraphic\"\n            in2=\"softMap\"\n            scale=\"120\"\n            xChannelSelector=\"R\"\n            yChannelSelector=\"G\"\n          />\n        </filter>\n      </svg>\n    </div>\n  );\n};\n\nexport default Glass;\n"],"names":["cva","Glass","className","children","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIsBA;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU,CAAA;AAAA,IACV,iBAAiB,CAAA;AAAA,EAAC;AAEtB;AAOA,MAAMC,IAA8B,CAAC,EAAE,WAAAC,GAAW,UAAAC,QAE9C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAGF,UAAA;AAAA,MAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,uHAAA,CAAuH;AAAA,MACtI,gBAAAA,EAAC,OAAA,EAAI,WAAU,uDAAA,CAAuD;AAAA,MACtE,gBAAAA,EAAC,OAAA,EAAI,WAAU,4JAAA,CAA4J;AAAA,MAC3K,gBAAAA,EAAC,SAAI,WAAU,kBACb,4BAAC,OAAA,EAAI,WAAU,4HACZ,UAAAH,EAAA,CACH,EAAA,CACF;AAAA,MACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,UACb,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,GAAE;AAAA,UACF,GAAE;AAAA,UACF,OAAM;AAAA,UACN,QAAO;AAAA,UACP,aAAY;AAAA,UAEZ,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,eAAc;AAAA,gBACd,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAGT,gBAAAF,EAAC,uBAAA,EAAoB,IAAG,cAAa,QAAO,UAC1C,UAAA;AAAA,cAAA,gBAAAE,EAAC,WAAA,EAAQ,MAAK,SAAQ,WAAU,KAAI,UAAS,MAAK,QAAO,MAAA,CAAM;AAAA,cAC/D,gBAAAA,EAAC,aAAQ,MAAK,SAAQ,WAAU,KAAI,UAAS,KAAI,QAAO,IAAA,CAAI;AAAA,cAC5D,gBAAAA,EAAC,aAAQ,MAAK,SAAQ,WAAU,KAAI,UAAS,KAAI,QAAO,MAAA,CAAM;AAAA,YAAA,GAChE;AAAA,8BAEC,kBAAA,EAAe,IAAG,cAAa,cAAa,KAAI,QAAO,WAAU;AAAA,YAElE,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,cAAa;AAAA,gBACb,kBAAiB;AAAA,gBACjB,kBAAiB;AAAA,gBACjB,kBAAe;AAAA,gBACf,QAAO;AAAA,gBAEP,4BAAC,gBAAA,EAAa,GAAE,QAAO,GAAE,QAAO,GAAE,MAAA,CAAM;AAAA,cAAA;AAAA,YAAA;AAAA,YAG1C,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,UAAS;AAAA,gBACT,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAGT,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,KAAI;AAAA,gBACJ,OAAM;AAAA,gBACN,kBAAiB;AAAA,gBACjB,kBAAiB;AAAA,cAAA;AAAA,YAAA;AAAA,UACnB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Glass.js","sources":["../../../../src/components/Glass/Glass.tsx"],"sourcesContent":["import { cn } from \"@dsui/ui/index\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nconst glassVariants = cva(\n  \"ds:inline-flex ds:items-center ds:justify-center ds:gap-2 ds:whitespace-nowrap ds:text-sm ds:font-medium ds:transition-all ds:disabled:pointer-events-none ds:disabled:opacity-50 ds:[&_svg]:pointer-events-none ds:[&_svg:not([class*='size-'])]:size-4 ds:shrink-0 ds:[&_svg]:shrink-0 ds:outline-none ds:focus-visible:border-ring ds:focus-visible:ring-ring/50 ds:focus-visible:ring-[3px] ds:aria-invalid:ring-destructive/20 ds:dark:aria-invalid:ring-destructive/40 ds:aria-invalid:border-destructive\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n);\n\nexport type GlassProps = {\n  className?: string;\n  children?: React.ReactNode;\n} & VariantProps<typeof glassVariants>;\n\nconst Glass: React.FC<GlassProps> = ({ className, children }) => {\n  return (\n    <div\n      className={cn(\n        \"ds:relative ds:inline-flex ds:overflow-hidden ds:cursor-pointer ds:shadow-[0_6px_6px_rgba(0,0,0,0.2),0_0_20px_rgba(0,0,0,0.1)] ds:transition-all ds:duration-400 ds:ease-[cubic-bezier(0.175,0.885,0.32,2.2)] ds:p-0 ds:rounded-md\",\n        className\n      )}\n    >\n      <div className=\"ds:absolute ds:z-0 ds:inset-0 ds:backdrop-blur-[2.5px] ds:overflow-hidden ds:isolate ds:[filter:url(#glass-distortion)] ds:rounded-[inherit]\"></div>\n      <div className=\"ds:z-1 ds:absolute ds:inset-0 ds:bg-white/25 ds:rounded-[inherit]\"></div>\n      <div className=\"ds:absolute ds:inset-0 ds:z-2 ds:overflow-hidden ds:shadow-[inset_2px_2px_1px_0_rgba(255,255,255,0.5),inset_-1px_-1px_1px_1px_rgba(255,255,255,0.5)] ds:rounded-[inherit]\"></div>\n      <div className=\"ds:z-3 ds:relative\">\n        <div className=\"ds:text-foreground ds:[text-shadow:0px_1px_3px_rgba(255, ds:255, ds:255, ds:0.3)] ds:transition-all ds:duration-100 ds:ease-in ds:inline-flex ds:gap-2\">\n          {children}\n        </div>\n      </div>\n      <svg className=\"ds:hidden\">\n        <filter\n          id=\"glass-distortion\"\n          x=\"0%\"\n          y=\"0%\"\n          width=\"100%\"\n          height=\"100%\"\n          filterUnits=\"objectBoundingBox\"\n        >\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency=\"0.01 0.01\"\n            numOctaves=\"1\"\n            seed=\"5\"\n            result=\"turbulence\"\n          />\n\n          <feComponentTransfer in=\"turbulence\" result=\"mapped\">\n            <feFuncR type=\"gamma\" amplitude=\"1\" exponent=\"10\" offset=\"0.5\" />\n            <feFuncG type=\"gamma\" amplitude=\"0\" exponent=\"1\" offset=\"0\" />\n            <feFuncB type=\"gamma\" amplitude=\"0\" exponent=\"1\" offset=\"0.5\" />\n          </feComponentTransfer>\n\n          <feGaussianBlur in=\"turbulence\" stdDeviation=\"3\" result=\"softMap\" />\n\n          <feSpecularLighting\n            in=\"softMap\"\n            surfaceScale=\"5\"\n            specularConstant=\"1\"\n            specularExponent=\"100\"\n            lighting-color=\"white\"\n            result=\"specLight\"\n          >\n            <fePointLight x=\"-200\" y=\"-200\" z=\"300\" />\n          </feSpecularLighting>\n\n          <feComposite\n            in=\"specLight\"\n            operator=\"arithmetic\"\n            k1=\"0\"\n            k2=\"1\"\n            k3=\"1\"\n            k4=\"0\"\n            result=\"litImage\"\n          />\n\n          <feDisplacementMap\n            in=\"SourceGraphic\"\n            in2=\"softMap\"\n            scale=\"120\"\n            xChannelSelector=\"R\"\n            yChannelSelector=\"G\"\n          />\n        </filter>\n      </svg>\n    </div>\n  );\n};\n\nexport default Glass;\n"],"names":["cva","Glass","className","children","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIsBA;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU,CAAA;AAAA,IACV,iBAAiB,CAAA;AAAA,EAAC;AAEtB;AAOA,MAAMC,IAA8B,CAAC,EAAE,WAAAC,GAAW,UAAAC,QAE9C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAGF,UAAA;AAAA,MAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,+IAAA,CAA+I;AAAA,MAC9J,gBAAAA,EAAC,OAAA,EAAI,WAAU,oEAAA,CAAoE;AAAA,MACnF,gBAAAA,EAAC,OAAA,EAAI,WAAU,4KAAA,CAA4K;AAAA,MAC3L,gBAAAA,EAAC,SAAI,WAAU,sBACb,4BAAC,OAAA,EAAI,WAAU,0JACZ,UAAAH,EAAA,CACH,EAAA,CACF;AAAA,MACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,GAAE;AAAA,UACF,GAAE;AAAA,UACF,OAAM;AAAA,UACN,QAAO;AAAA,UACP,aAAY;AAAA,UAEZ,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,eAAc;AAAA,gBACd,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAGT,gBAAAF,EAAC,uBAAA,EAAoB,IAAG,cAAa,QAAO,UAC1C,UAAA;AAAA,cAAA,gBAAAE,EAAC,WAAA,EAAQ,MAAK,SAAQ,WAAU,KAAI,UAAS,MAAK,QAAO,MAAA,CAAM;AAAA,cAC/D,gBAAAA,EAAC,aAAQ,MAAK,SAAQ,WAAU,KAAI,UAAS,KAAI,QAAO,IAAA,CAAI;AAAA,cAC5D,gBAAAA,EAAC,aAAQ,MAAK,SAAQ,WAAU,KAAI,UAAS,KAAI,QAAO,MAAA,CAAM;AAAA,YAAA,GAChE;AAAA,8BAEC,kBAAA,EAAe,IAAG,cAAa,cAAa,KAAI,QAAO,WAAU;AAAA,YAElE,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,cAAa;AAAA,gBACb,kBAAiB;AAAA,gBACjB,kBAAiB;AAAA,gBACjB,kBAAe;AAAA,gBACf,QAAO;AAAA,gBAEP,4BAAC,gBAAA,EAAa,GAAE,QAAO,GAAE,QAAO,GAAE,MAAA,CAAM;AAAA,cAAA;AAAA,YAAA;AAAA,YAG1C,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,UAAS;AAAA,gBACT,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAGT,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,KAAI;AAAA,gBACJ,OAAM;AAAA,gBACN,kBAAiB;AAAA,gBACjB,kBAAiB;AAAA,cAAA;AAAA,YAAA;AAAA,UACnB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAAA;"}