@humain/ui 2.4.2 → 2.4.3

package/dist/wc-react/selection-group.js

@@ -159,7 +159,7 @@ var S = {
     className: c("shrink-0 rounded-md border border-border bg-card/60", "flex items-center justify-center", "dark:border-border", d, n),
     style: { boxShadow: "var(--shadow-inset-ring)" },
     children: /* @__PURE__ */ i("div", {
-      className: c("text-secondary-foreground", t),
+      className: c("text-secondary-foreground [&>svg]:block [&>svg]:size-full", t),
       children: a
     })
   });

package/dist/wc-react/selection-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-group.js","names":[],"sources":["../../src/components/ui/selection-group.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { Minus } from 'lucide-react';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type SelectionColor =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'destructive';\n\nexport type SelectionSize = 'sm' | 'md' | 'lg';\n\nexport type SelectionVariant =\n  | 'default'\n  | 'card'\n  | 'pill'\n  | 'stacked'\n  | 'icon-simple'\n  | 'icon-card'\n  | 'avatar'\n  | 'payment'\n  | 'simple'\n  | 'chip';\n\nexport interface SelectionItem {\n  /** Unique value for the option */\n  value: string;\n  /** Display label */\n  label: string;\n  /** Whether this option is disabled */\n  disabled?: boolean;\n  /** Secondary text (e.g., \"$10/month\") */\n  subtext?: string;\n  /** Supporting description text */\n  description?: string;\n  /** Leading icon component */\n  icon?: React.ReactNode;\n  /** Avatar element */\n  avatar?: React.ReactNode;\n  /** Image URL */\n  image?: string;\n  /** Alt text for the image (defaults to \"\" if omitted) */\n  imageAlt?: string;\n  /** Position of the image */\n  imagePosition?: 'top' | 'left' | 'trailing';\n  /** Badge element */\n  badge?: React.ReactNode;\n  /** Dot color for chip variant (named color or hex) */\n  dotColor?: string;\n  /** Price display (e.g., \"$10\") */\n  price?: string;\n  /** Price period (e.g., \"per month\") */\n  pricePeriod?: string;\n  /** Payment icon element */\n  paymentIcon?: React.ReactNode;\n  /** Action buttons */\n  actions?: React.ReactNode;\n}\n\n// =============================================================================\n// Hooks\n// =============================================================================\n\ninterface UseSelectionStateOptions {\n  /** Controlled value */\n  value?: string;\n  /** Default value for uncontrolled mode */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n}\n\n/**\n * Hook for managing single selection state (radio behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useSelectionState(\n  options: UseSelectionStateOptions = {},\n): [string | undefined, (value: string) => void] {\n  const { value: controlledValue, defaultValue, onValueChange } = options;\n\n  const [internalValue, setInternalValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValue = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return [selectedValue, setValue];\n}\n\ninterface UseMultiSelectionStateOptions {\n  /** Controlled value */\n  value?: string[];\n  /** Default value for uncontrolled mode */\n  defaultValue?: string[];\n  /** Callback when value changes */\n  onValueChange?: (value: string[]) => void;\n}\n\n/**\n * Hook for managing multi selection state (checkbox behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useMultiSelectionState(\n  options: UseMultiSelectionStateOptions = {},\n): [string[], (value: string, checked: boolean) => void] {\n  const { value: controlledValue, defaultValue = [], onValueChange } = options;\n\n  const [internalValue, setInternalValue] =\n    React.useState<string[]>(defaultValue);\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValues = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (itemValue: string, checked: boolean) => {\n      const newValue = checked\n        ? [...selectedValues, itemValue]\n        : selectedValues.filter((v) => v !== itemValue);\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, selectedValues, onValueChange],\n  );\n\n  return [selectedValues, setValue];\n}\n\n// =============================================================================\n// Color Mappings\n// =============================================================================\n\nexport const selectionColorClasses: Record<\n  SelectionColor,\n  {\n    indicator: string;\n    indicatorChecked: string;\n    border: string;\n    bg: string;\n    text: string;\n  }\n> = {\n  primary: {\n    indicator: 'border-primary',\n    indicatorChecked: 'bg-primary',\n    border: 'border-primary',\n    bg: 'bg-primary',\n    text: 'text-primary-foreground',\n  },\n  secondary: {\n    indicator: 'border-secondary',\n    indicatorChecked: 'bg-secondary-foreground',\n    border: 'border-secondary',\n    bg: 'bg-secondary',\n    text: 'text-secondary-foreground',\n  },\n  success: {\n    indicator: 'border-success',\n    indicatorChecked: 'bg-success',\n    border: 'border-success',\n    bg: 'bg-success',\n    text: 'text-primary-foreground',\n  },\n  warning: {\n    indicator: 'border-warning',\n    indicatorChecked: 'bg-warning',\n    border: 'border-warning',\n    bg: 'bg-warning',\n    text: 'text-primary-foreground',\n  },\n  info: {\n    indicator: 'border-info',\n    indicatorChecked: 'bg-info',\n    border: 'border-info',\n    bg: 'bg-info',\n    text: 'text-primary-foreground',\n  },\n  destructive: {\n    indicator: 'border-destructive',\n    indicatorChecked: 'bg-destructive',\n    border: 'border-destructive',\n    bg: 'bg-destructive',\n    text: 'text-primary-foreground',\n  },\n};\n\n// =============================================================================\n// CVA Variants\n// =============================================================================\n\n/**\n * Selection group container variants.\n * Used for the outer wrapper of a group of selection items.\n */\nexport const selectionGroupVariants = cva('flex', {\n  variants: {\n    orientation: {\n      horizontal: 'flex-row flex-wrap',\n      vertical: 'flex-col',\n    },\n    gap: {\n      sm: 'gap-2',\n      md: 'gap-3',\n      lg: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    gap: 'md',\n  },\n});\n\n/**\n * Selection indicator variants (for both radio and checkbox).\n * Renders as a rounded indicator with border.\n */\nexport const selectionIndicatorVariants = cva(\n  'shrink-0 rounded-full border shadow-xs transition-all flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4',\n        md: 'size-5',\n        lg: 'size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Checkbox indicator variants (square with rounded corners).\n */\nexport const checkboxIndicatorVariants = cva(\n  'shrink-0 border shadow-xs transition-[border-color,background-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4 rounded-[4px]',\n        md: 'size-5 rounded-[5px]',\n        lg: 'size-6 rounded-[6px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Inner dot sizes for radio indicators when checked.\n */\nexport const innerDotSizes: Record<SelectionSize, string> = {\n  sm: 'size-2',\n  md: 'size-3',\n  lg: 'size-4',\n};\n\n/**\n * Text size classes for selection labels.\n */\nexport const textSizeClasses: Record<SelectionSize, string> = {\n  sm: 'text-sm',\n  md: 'text-sm',\n  lg: 'text-sm',\n};\n\n/**\n * Icon size classes for checkbox indicators.\n */\nexport const iconSizeClasses: Record<SelectionSize, string> = {\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-5',\n};\n\n// =============================================================================\n// Draw-on checkmark SVG (shared delight animation)\n// =============================================================================\n\nexport const CHECKMARK_PATH = 'M4 12l5 5L20 6';\n\nexport function DrawCheck({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={3}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(className, 'delight-check-draw')}\n    >\n      <path d={CHECKMARK_PATH} />\n    </svg>\n  );\n}\n\n// =============================================================================\n// SelectionIndicator Component\n// =============================================================================\n\nexport interface SelectionIndicatorProps {\n  /** Type of indicator to render */\n  type: 'checkbox' | 'radio';\n  /** Whether the indicator is checked */\n  checked?: boolean;\n  /** Whether the indicator is disabled */\n  disabled?: boolean;\n  /** Size of the indicator */\n  size?: SelectionSize;\n  /** Color of the indicator */\n  color?: SelectionColor;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether the checkbox is in indeterminate state (checkbox only) */\n  indeterminate?: boolean;\n}\n\n/**\n * SelectionIndicator renders either a checkbox or radio indicator based on type.\n * For checkbox: renders a check icon when checked.\n * For radio: renders an inner dot when checked.\n */\nconst SelectionIndicator = React.forwardRef<\n  HTMLSpanElement,\n  SelectionIndicatorProps\n>(\n  (\n    {\n      type,\n      checked = false,\n      disabled = false,\n      size = 'sm',\n      color = 'primary',\n      className,\n      indeterminate = false,\n    },\n    ref,\n  ) => {\n    const colors = selectionColorClasses[color];\n\n    if (type === 'checkbox') {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"selection-indicator\"\n          data-type=\"checkbox\"\n          data-checked={checked}\n          data-indeterminate={indeterminate || undefined}\n          className={cn(\n            checkboxIndicatorVariants({ size }),\n            checked || indeterminate\n              ? cn(\n                  colors.indicatorChecked,\n                  colors.border,\n                  colors.text,\n                  'border',\n                  'delight-check-bounce',\n                )\n              : 'border-input bg-background',\n            disabled && 'opacity-50',\n            className,\n          )}\n          aria-hidden=\"true\"\n        >\n          {(checked || indeterminate) &&\n            (indeterminate ? (\n              <Minus\n                className={cn(\n                  iconSizeClasses[size],\n                  'animate-[scale-in_150ms_ease-out] motion-reduce:animate-none',\n                )}\n                strokeWidth={3}\n              />\n            ) : (\n              <DrawCheck className={iconSizeClasses[size]} />\n            ))}\n        </span>\n      );\n    }\n\n    // Radio type\n    return (\n      <span\n        ref={ref}\n        data-slot=\"selection-indicator\"\n        data-type=\"radio\"\n        data-checked={checked}\n        className={cn(\n          selectionIndicatorVariants({ size }),\n          'transition-[background-color,border-color] duration-150 motion-reduce:transition-none',\n          'border-input bg-transparent',\n          disabled && 'opacity-50',\n          className,\n        )}\n        aria-hidden=\"true\"\n      >\n        <span\n          className={cn(\n            'rounded-full transition-transform duration-150 ease-out motion-reduce:transition-none',\n            colors.indicatorChecked,\n            innerDotSizes[size],\n            checked ? 'scale-100' : 'scale-0',\n          )}\n        />\n      </span>\n    );\n  },\n);\n\nSelectionIndicator.displayName = 'SelectionIndicator';\n\n// =============================================================================\n// FeaturedIcon Component\n// =============================================================================\n\nexport interface FeaturedIconProps {\n  /** The icon content to display */\n  children: React.ReactNode;\n  /** Size of the featured icon container */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// Hoisted outside component to avoid recreation on every render\nconst featuredIconContainerSizes: Record<SelectionSize, string> = {\n  sm: 'size-8',\n  md: 'size-10',\n  lg: 'size-12',\n};\n\nconst featuredIconInnerSizes: Record<SelectionSize, string> = {\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n};\n\n/**\n * FeaturedIcon is a container for icons with border and shadow.\n * Used in icon-simple and icon-card variants.\n */\nconst FeaturedIcon = React.forwardRef<HTMLDivElement, FeaturedIconProps>(\n  ({ children, size = 'sm', className }, ref) => {\n    const containerSize = featuredIconContainerSizes[size];\n    const innerSize = featuredIconInnerSizes[size];\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"featured-icon\"\n        className={cn(\n          'shrink-0 rounded-md border border-border bg-card/60',\n          'flex items-center justify-center',\n          'dark:border-border',\n          containerSize,\n          className,\n        )}\n        style={{\n          boxShadow: 'var(--shadow-inset-ring)',\n        }}\n      >\n        <div className={cn('text-secondary-foreground', innerSize)}>\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n\nFeaturedIcon.displayName = 'FeaturedIcon';\n\n// =============================================================================\n// ColorDot Component\n// =============================================================================\n\nexport type ColorDotColor =\n  | 'gray'\n  | 'orange'\n  | 'red'\n  | 'darkRed'\n  | 'brand'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | string; // Allow custom hex colors\n\nconst dotColorMap: Record<string, string> = {\n  gray: 'bg-muted',\n  orange: 'bg-warning',\n  red: 'bg-destructive',\n  darkRed: 'bg-destructive-hover',\n  brand: 'bg-primary/10',\n  success: 'bg-success/10',\n  warning: 'bg-warning/10',\n  error: 'bg-destructive/10',\n};\n\nconst dotSizeMap: Record<SelectionSize, string> = {\n  sm: 'size-[10px]',\n  md: 'size-3',\n  lg: 'size-3.5',\n};\n\nexport interface ColorDotProps {\n  /** Color of the dot (named color or hex) */\n  color?: ColorDotColor;\n  /** Size of the dot */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * ColorDot renders a colored dot for chip variant.\n * Supports named colors (gray, orange, red, etc.) and hex colors.\n */\nconst ColorDot = React.forwardRef<HTMLSpanElement, ColorDotProps>(\n  ({ color, size = 'sm', className }, ref) => {\n    if (!color) return null;\n\n    const colorClass = dotColorMap[color];\n    const isHexColor = color.startsWith('#');\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"color-dot\"\n        className={cn(\n          'shrink-0 rounded-full',\n          dotSizeMap[size],\n          !isHexColor && colorClass,\n          className,\n        )}\n        style={isHexColor ? { backgroundColor: color } : undefined}\n        aria-hidden=\"true\"\n      />\n    );\n  },\n);\n\nColorDot.displayName = 'ColorDot';\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nexport { ColorDot, FeaturedIcon, SelectionIndicator };\n"],"mappings":"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"}
+{"version":3,"file":"selection-group.js","names":[],"sources":["../../src/components/ui/selection-group.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { Minus } from 'lucide-react';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type SelectionColor =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'destructive';\n\nexport type SelectionSize = 'sm' | 'md' | 'lg';\n\nexport type SelectionVariant =\n  | 'default'\n  | 'card'\n  | 'pill'\n  | 'stacked'\n  | 'icon-simple'\n  | 'icon-card'\n  | 'avatar'\n  | 'payment'\n  | 'simple'\n  | 'chip';\n\nexport interface SelectionItem {\n  /** Unique value for the option */\n  value: string;\n  /** Display label */\n  label: string;\n  /** Whether this option is disabled */\n  disabled?: boolean;\n  /** Secondary text (e.g., \"$10/month\") */\n  subtext?: string;\n  /** Supporting description text */\n  description?: string;\n  /** Leading icon component */\n  icon?: React.ReactNode;\n  /** Avatar element */\n  avatar?: React.ReactNode;\n  /** Image URL */\n  image?: string;\n  /** Alt text for the image (defaults to \"\" if omitted) */\n  imageAlt?: string;\n  /** Position of the image */\n  imagePosition?: 'top' | 'left' | 'trailing';\n  /** Badge element */\n  badge?: React.ReactNode;\n  /** Dot color for chip variant (named color or hex) */\n  dotColor?: string;\n  /** Price display (e.g., \"$10\") */\n  price?: string;\n  /** Price period (e.g., \"per month\") */\n  pricePeriod?: string;\n  /** Payment icon element */\n  paymentIcon?: React.ReactNode;\n  /** Action buttons */\n  actions?: React.ReactNode;\n}\n\n// =============================================================================\n// Hooks\n// =============================================================================\n\ninterface UseSelectionStateOptions {\n  /** Controlled value */\n  value?: string;\n  /** Default value for uncontrolled mode */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n}\n\n/**\n * Hook for managing single selection state (radio behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useSelectionState(\n  options: UseSelectionStateOptions = {},\n): [string | undefined, (value: string) => void] {\n  const { value: controlledValue, defaultValue, onValueChange } = options;\n\n  const [internalValue, setInternalValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValue = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return [selectedValue, setValue];\n}\n\ninterface UseMultiSelectionStateOptions {\n  /** Controlled value */\n  value?: string[];\n  /** Default value for uncontrolled mode */\n  defaultValue?: string[];\n  /** Callback when value changes */\n  onValueChange?: (value: string[]) => void;\n}\n\n/**\n * Hook for managing multi selection state (checkbox behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useMultiSelectionState(\n  options: UseMultiSelectionStateOptions = {},\n): [string[], (value: string, checked: boolean) => void] {\n  const { value: controlledValue, defaultValue = [], onValueChange } = options;\n\n  const [internalValue, setInternalValue] =\n    React.useState<string[]>(defaultValue);\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValues = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (itemValue: string, checked: boolean) => {\n      const newValue = checked\n        ? [...selectedValues, itemValue]\n        : selectedValues.filter((v) => v !== itemValue);\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, selectedValues, onValueChange],\n  );\n\n  return [selectedValues, setValue];\n}\n\n// =============================================================================\n// Color Mappings\n// =============================================================================\n\nexport const selectionColorClasses: Record<\n  SelectionColor,\n  {\n    indicator: string;\n    indicatorChecked: string;\n    border: string;\n    bg: string;\n    text: string;\n  }\n> = {\n  primary: {\n    indicator: 'border-primary',\n    indicatorChecked: 'bg-primary',\n    border: 'border-primary',\n    bg: 'bg-primary',\n    text: 'text-primary-foreground',\n  },\n  secondary: {\n    indicator: 'border-secondary',\n    indicatorChecked: 'bg-secondary-foreground',\n    border: 'border-secondary',\n    bg: 'bg-secondary',\n    text: 'text-secondary-foreground',\n  },\n  success: {\n    indicator: 'border-success',\n    indicatorChecked: 'bg-success',\n    border: 'border-success',\n    bg: 'bg-success',\n    text: 'text-primary-foreground',\n  },\n  warning: {\n    indicator: 'border-warning',\n    indicatorChecked: 'bg-warning',\n    border: 'border-warning',\n    bg: 'bg-warning',\n    text: 'text-primary-foreground',\n  },\n  info: {\n    indicator: 'border-info',\n    indicatorChecked: 'bg-info',\n    border: 'border-info',\n    bg: 'bg-info',\n    text: 'text-primary-foreground',\n  },\n  destructive: {\n    indicator: 'border-destructive',\n    indicatorChecked: 'bg-destructive',\n    border: 'border-destructive',\n    bg: 'bg-destructive',\n    text: 'text-primary-foreground',\n  },\n};\n\n// =============================================================================\n// CVA Variants\n// =============================================================================\n\n/**\n * Selection group container variants.\n * Used for the outer wrapper of a group of selection items.\n */\nexport const selectionGroupVariants = cva('flex', {\n  variants: {\n    orientation: {\n      horizontal: 'flex-row flex-wrap',\n      vertical: 'flex-col',\n    },\n    gap: {\n      sm: 'gap-2',\n      md: 'gap-3',\n      lg: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    gap: 'md',\n  },\n});\n\n/**\n * Selection indicator variants (for both radio and checkbox).\n * Renders as a rounded indicator with border.\n */\nexport const selectionIndicatorVariants = cva(\n  'shrink-0 rounded-full border shadow-xs transition-all flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4',\n        md: 'size-5',\n        lg: 'size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Checkbox indicator variants (square with rounded corners).\n */\nexport const checkboxIndicatorVariants = cva(\n  'shrink-0 border shadow-xs transition-[border-color,background-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4 rounded-[4px]',\n        md: 'size-5 rounded-[5px]',\n        lg: 'size-6 rounded-[6px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Inner dot sizes for radio indicators when checked.\n */\nexport const innerDotSizes: Record<SelectionSize, string> = {\n  sm: 'size-2',\n  md: 'size-3',\n  lg: 'size-4',\n};\n\n/**\n * Text size classes for selection labels.\n */\nexport const textSizeClasses: Record<SelectionSize, string> = {\n  sm: 'text-sm',\n  md: 'text-sm',\n  lg: 'text-sm',\n};\n\n/**\n * Icon size classes for checkbox indicators.\n */\nexport const iconSizeClasses: Record<SelectionSize, string> = {\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-5',\n};\n\n// =============================================================================\n// Draw-on checkmark SVG (shared delight animation)\n// =============================================================================\n\nexport const CHECKMARK_PATH = 'M4 12l5 5L20 6';\n\nexport function DrawCheck({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={3}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(className, 'delight-check-draw')}\n    >\n      <path d={CHECKMARK_PATH} />\n    </svg>\n  );\n}\n\n// =============================================================================\n// SelectionIndicator Component\n// =============================================================================\n\nexport interface SelectionIndicatorProps {\n  /** Type of indicator to render */\n  type: 'checkbox' | 'radio';\n  /** Whether the indicator is checked */\n  checked?: boolean;\n  /** Whether the indicator is disabled */\n  disabled?: boolean;\n  /** Size of the indicator */\n  size?: SelectionSize;\n  /** Color of the indicator */\n  color?: SelectionColor;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether the checkbox is in indeterminate state (checkbox only) */\n  indeterminate?: boolean;\n}\n\n/**\n * SelectionIndicator renders either a checkbox or radio indicator based on type.\n * For checkbox: renders a check icon when checked.\n * For radio: renders an inner dot when checked.\n */\nconst SelectionIndicator = React.forwardRef<\n  HTMLSpanElement,\n  SelectionIndicatorProps\n>(\n  (\n    {\n      type,\n      checked = false,\n      disabled = false,\n      size = 'sm',\n      color = 'primary',\n      className,\n      indeterminate = false,\n    },\n    ref,\n  ) => {\n    const colors = selectionColorClasses[color];\n\n    if (type === 'checkbox') {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"selection-indicator\"\n          data-type=\"checkbox\"\n          data-checked={checked}\n          data-indeterminate={indeterminate || undefined}\n          className={cn(\n            checkboxIndicatorVariants({ size }),\n            checked || indeterminate\n              ? cn(\n                  colors.indicatorChecked,\n                  colors.border,\n                  colors.text,\n                  'border',\n                  'delight-check-bounce',\n                )\n              : 'border-input bg-background',\n            disabled && 'opacity-50',\n            className,\n          )}\n          aria-hidden=\"true\"\n        >\n          {(checked || indeterminate) &&\n            (indeterminate ? (\n              <Minus\n                className={cn(\n                  iconSizeClasses[size],\n                  'animate-[scale-in_150ms_ease-out] motion-reduce:animate-none',\n                )}\n                strokeWidth={3}\n              />\n            ) : (\n              <DrawCheck className={iconSizeClasses[size]} />\n            ))}\n        </span>\n      );\n    }\n\n    // Radio type\n    return (\n      <span\n        ref={ref}\n        data-slot=\"selection-indicator\"\n        data-type=\"radio\"\n        data-checked={checked}\n        className={cn(\n          selectionIndicatorVariants({ size }),\n          'transition-[background-color,border-color] duration-150 motion-reduce:transition-none',\n          'border-input bg-transparent',\n          disabled && 'opacity-50',\n          className,\n        )}\n        aria-hidden=\"true\"\n      >\n        <span\n          className={cn(\n            'rounded-full transition-transform duration-150 ease-out motion-reduce:transition-none',\n            colors.indicatorChecked,\n            innerDotSizes[size],\n            checked ? 'scale-100' : 'scale-0',\n          )}\n        />\n      </span>\n    );\n  },\n);\n\nSelectionIndicator.displayName = 'SelectionIndicator';\n\n// =============================================================================\n// FeaturedIcon Component\n// =============================================================================\n\nexport interface FeaturedIconProps {\n  /** The icon content to display */\n  children: React.ReactNode;\n  /** Size of the featured icon container */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// Hoisted outside component to avoid recreation on every render\nconst featuredIconContainerSizes: Record<SelectionSize, string> = {\n  sm: 'size-8',\n  md: 'size-10',\n  lg: 'size-12',\n};\n\nconst featuredIconInnerSizes: Record<SelectionSize, string> = {\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n};\n\n/**\n * FeaturedIcon is a container for icons with border and shadow.\n * Used in icon-simple and icon-card variants.\n */\nconst FeaturedIcon = React.forwardRef<HTMLDivElement, FeaturedIconProps>(\n  ({ children, size = 'sm', className }, ref) => {\n    const containerSize = featuredIconContainerSizes[size];\n    const innerSize = featuredIconInnerSizes[size];\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"featured-icon\"\n        className={cn(\n          'shrink-0 rounded-md border border-border bg-card/60',\n          'flex items-center justify-center',\n          'dark:border-border',\n          containerSize,\n          className,\n        )}\n        style={{\n          boxShadow: 'var(--shadow-inset-ring)',\n        }}\n      >\n        <div\n          className={cn(\n            'text-secondary-foreground [&>svg]:block [&>svg]:size-full',\n            innerSize,\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n\nFeaturedIcon.displayName = 'FeaturedIcon';\n\n// =============================================================================\n// ColorDot Component\n// =============================================================================\n\nexport type ColorDotColor =\n  | 'gray'\n  | 'orange'\n  | 'red'\n  | 'darkRed'\n  | 'brand'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | string; // Allow custom hex colors\n\nconst dotColorMap: Record<string, string> = {\n  gray: 'bg-muted',\n  orange: 'bg-warning',\n  red: 'bg-destructive',\n  darkRed: 'bg-destructive-hover',\n  brand: 'bg-primary/10',\n  success: 'bg-success/10',\n  warning: 'bg-warning/10',\n  error: 'bg-destructive/10',\n};\n\nconst dotSizeMap: Record<SelectionSize, string> = {\n  sm: 'size-[10px]',\n  md: 'size-3',\n  lg: 'size-3.5',\n};\n\nexport interface ColorDotProps {\n  /** Color of the dot (named color or hex) */\n  color?: ColorDotColor;\n  /** Size of the dot */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * ColorDot renders a colored dot for chip variant.\n * Supports named colors (gray, orange, red, etc.) and hex colors.\n */\nconst ColorDot = React.forwardRef<HTMLSpanElement, ColorDotProps>(\n  ({ color, size = 'sm', className }, ref) => {\n    if (!color) return null;\n\n    const colorClass = dotColorMap[color];\n    const isHexColor = color.startsWith('#');\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"color-dot\"\n        className={cn(\n          'shrink-0 rounded-full',\n          dotSizeMap[size],\n          !isHexColor && colorClass,\n          className,\n        )}\n        style={isHexColor ? { backgroundColor: color } : undefined}\n        aria-hidden=\"true\"\n      />\n    );\n  },\n);\n\nColorDot.displayName = 'ColorDot';\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nexport { ColorDot, FeaturedIcon, SelectionIndicator };\n"],"mappings":"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"}

package/dist/wc-react/{useOpenChangeComplete.js → stateAttributesMapping.js}

@@ -2,6 +2,9 @@ import { n as g, t as d } from "./useIsoLayoutEffect.js";
 import { n as A, t as c } from "./useAnimationFrame.js";
 import * as m from "react";
 import * as v from "react-dom";
+function b(t) {
+  return t == null ? t : "current" in t ? t.current : t;
+}
 function p(t, a = !1, o = !1) {
   const [e, r] = m.useState(t && a ? "idle" : void 0), [n, i] = m.useState(t);
   return t && !n && (i(!0), r("starting")), !t && n && e !== "ending" && !o && r("ending"), !t && !n && e === "ending" && r(void 0), d(() => {
@@ -46,19 +49,11 @@ function p(t, a = !1, o = !1) {
     transitionStatus: e
   };
 }
-var q = /* @__PURE__ */ (function(t) {
-  return t.startingStyle = "data-starting-style", t.endingStyle = "data-ending-style", t;
-})({}), b = { "data-starting-style": "" }, h = { "data-ending-style": "" }, F = { transitionStatus(t) {
-  return t === "starting" ? b : t === "ending" ? h : null;
-} };
-function O(t) {
-  return t == null ? t : "current" in t ? t.current : t;
-}
-function S(t, a = !1) {
+function h(t, a = !1) {
   const o = A();
   return g((e, r = null) => {
     o.cancel();
-    const n = O(t);
+    const n = b(t);
     if (n == null) return;
     const i = n, s = () => {
       v.flushSync(e);
@@ -98,8 +93,8 @@ function S(t, a = !1) {
     o.request(f);
   });
 }
-function M(t) {
-  const { enabled: a = !0, open: o, ref: e, onComplete: r } = t, n = g(r), i = S(e, o);
+function q(t) {
+  const { enabled: a = !0, open: o, ref: e, onComplete: r } = t, n = g(r), i = h(e, o);
   m.useEffect(() => {
     if (!a) return;
     const s = new AbortController();
@@ -113,13 +108,18 @@ function M(t) {
     i
   ]);
 }
+var F = /* @__PURE__ */ (function(t) {
+  return t.startingStyle = "data-starting-style", t.endingStyle = "data-ending-style", t;
+})({}), O = { "data-starting-style": "" }, S = { "data-ending-style": "" }, M = { transitionStatus(t) {
+  return t === "starting" ? O : t === "ending" ? S : null;
+} };
 export {
-  F as a,
-  q as i,
-  S as n,
-  p as o,
-  O as r,
-  M as t
+  p as a,
+  h as i,
+  M as n,
+  b as o,
+  q as r,
+  F as t
 };
 
-//# sourceMappingURL=useOpenChangeComplete.js.map
+//# sourceMappingURL=stateAttributesMapping.js.map

package/dist/wc-react/stateAttributesMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateAttributesMapping.js","names":["React"],"sources":["../../../../node_modules/.bun/@base-ui+react@1.7.0+8a291ac5721f2b4f/node_modules/@base-ui/react/utils/resolveRef.mjs","../../../../node_modules/.bun/@base-ui+react@1.7.0+8a291ac5721f2b4f/node_modules/@base-ui/react/internals/useTransitionStatus.mjs","../../../../node_modules/.bun/@base-ui+react@1.7.0+8a291ac5721f2b4f/node_modules/@base-ui/react/internals/useAnimationsFinished.mjs","../../../../node_modules/.bun/@base-ui+react@1.7.0+8a291ac5721f2b4f/node_modules/@base-ui/react/internals/useOpenChangeComplete.mjs","../../../../node_modules/.bun/@base-ui+react@1.7.0+8a291ac5721f2b4f/node_modules/@base-ui/react/internals/stateAttributesMapping.mjs"],"sourcesContent":["/**\n * If the provided argument is a ref object, returns its `current` value.\n * Otherwise, returns the argument itself.\n */\nexport function resolveRef(maybeRef) {\n  if (maybeRef == null) {\n    return maybeRef;\n  }\n  return 'current' in maybeRef ? maybeRef.current : maybeRef;\n}","'use client';\n\nimport * as React from 'react';\nimport { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport { AnimationFrame } from '@base-ui/utils/useAnimationFrame';\n/**\n * Provides a status string for CSS animations.\n * @param open - a boolean that determines if the element is open.\n * @param enableIdleState - a boolean that enables the `'idle'` state between `'starting'` and `'ending'`\n */\nexport function useTransitionStatus(open, enableIdleState = false, deferEndingState = false) {\n  const [transitionStatus, setTransitionStatus] = React.useState(open && enableIdleState ? 'idle' : undefined);\n  const [mounted, setMounted] = React.useState(open);\n  if (open && !mounted) {\n    setMounted(true);\n    setTransitionStatus('starting');\n  }\n  if (!open && mounted && transitionStatus !== 'ending' && !deferEndingState) {\n    setTransitionStatus('ending');\n  }\n  if (!open && !mounted && transitionStatus === 'ending') {\n    setTransitionStatus(undefined);\n  }\n  useIsoLayoutEffect(() => {\n    if (!open && mounted && transitionStatus !== 'ending' && deferEndingState) {\n      const frame = AnimationFrame.request(() => {\n        setTransitionStatus('ending');\n      });\n      return () => {\n        AnimationFrame.cancel(frame);\n      };\n    }\n    return undefined;\n  }, [open, mounted, transitionStatus, deferEndingState]);\n  useIsoLayoutEffect(() => {\n    if (!open || enableIdleState) {\n      return undefined;\n    }\n    const frame = AnimationFrame.request(() => {\n      // Avoid `flushSync` here due to Firefox.\n      // See https://github.com/mui/base-ui/pull/3424\n      setTransitionStatus(undefined);\n    });\n    return () => {\n      AnimationFrame.cancel(frame);\n    };\n  }, [enableIdleState, open]);\n  useIsoLayoutEffect(() => {\n    if (!open || !enableIdleState) {\n      return undefined;\n    }\n    if (open && mounted && transitionStatus !== 'idle') {\n      setTransitionStatus('starting');\n    }\n    const frame = AnimationFrame.request(() => {\n      setTransitionStatus('idle');\n    });\n    return () => {\n      AnimationFrame.cancel(frame);\n    };\n  }, [enableIdleState, open, mounted, transitionStatus]);\n  return {\n    mounted,\n    setMounted,\n    transitionStatus\n  };\n}","'use client';\n\nimport * as ReactDOM from 'react-dom';\nimport { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';\nimport { useStableCallback } from '@base-ui/utils/useStableCallback';\nimport { resolveRef } from \"../utils/resolveRef.mjs\";\n\n/**\n * Executes a function once all animations have finished on the provided element.\n * If an animation is canceled, waits for any replacement animations before executing.\n * @param elementOrRef - The element to watch for animations.\n * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.\n * @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback\n */\nexport function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false) {\n  const frame = useAnimationFrame();\n  return useStableCallback((fnToExecute,\n  /**\n   * An optional [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that\n   * can be used to abort `fnToExecute` before all the animations have finished.\n   * @default null\n   */\n  signal = null) => {\n    frame.cancel();\n    const element = resolveRef(elementOrRef);\n    if (element == null) {\n      return;\n    }\n    const resolvedElement = element;\n    const done = () => {\n      // Synchronously flush the unmounting of the component so that the browser doesn't\n      // paint: https://github.com/mui/base-ui/issues/979\n      ReactDOM.flushSync(fnToExecute);\n    };\n    if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {\n      fnToExecute();\n      return;\n    }\n    function exec() {\n      Promise.all(resolvedElement.getAnimations().map(animation => animation.finished)).then(() => {\n        if (!signal?.aborted) {\n          done();\n        }\n      }, () => {\n        if (signal?.aborted) {\n          return;\n        }\n        const currentAnimations = resolvedElement.getAnimations();\n        if (currentAnimations.some(animation => animation.pending || animation.playState !== 'finished')) {\n          // Sometimes animations can be aborted because a property they depend on changes while the animation plays.\n          // In such cases, we need to re-check if any new animations have started.\n          exec();\n          return;\n        }\n        done();\n      });\n    }\n    if (waitForStartingStyleRemoved) {\n      const startingStyleAttribute = 'data-starting-style';\n\n      // If `[data-starting-style]` isn't present, fall back to waiting one more frame\n      // to give \"open\" animations a chance to be registered.\n      if (!resolvedElement.hasAttribute(startingStyleAttribute)) {\n        frame.request(exec);\n        return;\n      }\n\n      // Wait for `[data-starting-style]` to have been removed.\n      const attributeObserver = new MutationObserver(() => {\n        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {\n          attributeObserver.disconnect();\n          exec();\n        }\n      });\n      attributeObserver.observe(resolvedElement, {\n        attributes: true,\n        attributeFilter: [startingStyleAttribute]\n      });\n      signal?.addEventListener('abort', () => attributeObserver.disconnect(), {\n        once: true\n      });\n      return;\n    }\n    frame.request(exec);\n  });\n}","'use client';\n\nimport * as React from 'react';\nimport { useStableCallback } from '@base-ui/utils/useStableCallback';\nimport { useAnimationsFinished } from \"./useAnimationsFinished.mjs\";\n\n/**\n * Calls the provided function when the CSS open/close animation or transition completes.\n */\nexport function useOpenChangeComplete(parameters) {\n  const {\n    enabled = true,\n    open,\n    ref,\n    onComplete: onCompleteParam\n  } = parameters;\n  const onComplete = useStableCallback(onCompleteParam);\n  const runOnceAnimationsFinish = useAnimationsFinished(ref, open);\n  React.useEffect(() => {\n    if (!enabled) {\n      return undefined;\n    }\n    const abortController = new AbortController();\n    runOnceAnimationsFinish(onComplete, abortController.signal);\n    return () => {\n      abortController.abort();\n    };\n  }, [enabled, open, onComplete, runOnceAnimationsFinish]);\n}","export let TransitionStatusDataAttributes = /*#__PURE__*/function (TransitionStatusDataAttributes) {\n  /**\n   * Present when the component begins animating in.\n   */\n  TransitionStatusDataAttributes[\"startingStyle\"] = \"data-starting-style\";\n  /**\n   * Present when the component is animating out.\n   */\n  TransitionStatusDataAttributes[\"endingStyle\"] = \"data-ending-style\";\n  return TransitionStatusDataAttributes;\n}({});\nconst STARTING_HOOK = {\n  'data-starting-style': ''\n};\nconst ENDING_HOOK = {\n  'data-ending-style': ''\n};\nexport const transitionStatusMapping = {\n  transitionStatus(value) {\n    if (value === 'starting') {\n      return STARTING_HOOK;\n    }\n    if (value === 'ending') {\n      return ENDING_HOOK;\n    }\n    return null;\n  }\n};"],"x_google_ignoreList":[0,1,2,3,4],"mappings":"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"}

package/dist/wc-react/stateDiagram-D77RDMKH.js

@@ -1,4 +1,4 @@
-import { Et as W, St as _, u as M } from "./vendor/recharts.js";
+import { bt as W, u as M, wt as _ } from "./vendor/recharts.js";
 import { n as y } from "./chunk-Y2CYZVJY.js";
 import { t as S } from "./chunk-X3CZISLH.js";
 import { O as G, c as P, s as T, x as t } from "./chunk-DU6HZSFF.js";
@@ -87,11 +87,11 @@ var J = /* @__PURE__ */ y((e) => e.append("circle").attr("class", "start-state")
     }
   }, "getRelationType");
   i.points = i.points.filter((s) => !Number.isNaN(s.y));
-  const n = i.points, x = W().x(function(s) {
+  const n = i.points, x = _().x(function(s) {
     return s.x;
   }).y(function(s) {
     return s.y;
-  }).curve(_), p = e.append("path").attr("d", x(n)).attr("id", "edge" + L).attr("class", "transition");
+  }).curve(W), p = e.append("path").attr("d", x(n)).attr("id", "edge" + L).attr("class", "transition");
   let a = "";
   if (t().state.arrowMarkerAbsolute && (a = G(!0)), p.attr("marker-end", "url(" + a + "#" + o(N.relationType.DEPENDENCY) + "End)"), d.title !== void 0) {
     const s = e.append("g").attr("class", "stateLabel"), { x: h, y: g } = R.calcLabelPosition(i.points), c = T.getRows(d.title);

package/dist/wc-react/timeline-definition-24CTP7MA.js

@@ -1,9 +1,9 @@
-import { Ot as lt, u as Z } from "./vendor/recharts.js";
+import { Et as lt, u as Z } from "./vendor/recharts.js";
 import { n as o, t as Ct } from "./chunk-Y2CYZVJY.js";
 import { t as b } from "./chunk-X3CZISLH.js";
 import { J as gt, a as Wt, b as ft, et as Pt, o as Bt, rt as Vt, tt as Ft, x as yt } from "./chunk-DU6HZSFF.js";
-import { p as Ot } from "./chunk-75Z2AOVW.js";
-import { a as zt } from "./mermaid.core.js";
+import { p as zt } from "./chunk-75Z2AOVW.js";
+import { a as Ot } from "./mermaid.core.js";
 var tt = (function() {
   var e = /* @__PURE__ */ o(function(i, l, u, h) {
     for (u = u || {}, h = i.length; h--; u[i[h]] = l) ;
@@ -218,7 +218,7 @@ var tt = (function() {
         return typeof P != "number" && (P instanceof Array && (g = P, P = g.pop()), P = u.symbols_[P] || P), P;
       }
       o($, "lex");
-      for (var _, H, C, N, D, G = {}, K, O, ot, j; ; ) {
+      for (var _, H, C, N, D, G = {}, K, z, ot, j; ; ) {
         if (C = h[h.length - 1], this.defaultActions[C] ? N = this.defaultActions[C] : ((_ === null || typeof _ > "u") && (_ = $()), N = S[C] && S[C][_]), typeof N > "u" || !N.length || !N[0]) {
           var Y = "";
           j = [];
@@ -239,12 +239,12 @@ Expecting ` + j.join(", ") + ", got '" + (this.terminals_[_] || _) + "'" : Y = "
             h.push(_), x.push(w.yytext), p.push(w.yylloc), h.push(N[1]), _ = null, H ? (_ = H, H = null) : (W = w.yyleng, k = w.yytext, L = w.yylineno, T = w.yylloc, B > 0 && B--);
             break;
           case 2:
-            if (O = this.productions_[N[1]][1], G.$ = x[x.length - O], G._$ = {
-              first_line: p[p.length - (O || 1)].first_line,
+            if (z = this.productions_[N[1]][1], G.$ = x[x.length - z], G._$ = {
+              first_line: p[p.length - (z || 1)].first_line,
               last_line: p[p.length - 1].last_line,
-              first_column: p[p.length - (O || 1)].first_column,
+              first_column: p[p.length - (z || 1)].first_column,
               last_column: p[p.length - 1].last_column
-            }, v && (G._$.range = [p[p.length - (O || 1)].range[0], p[p.length - 1].range[1]]), D = this.performAction.apply(G, [
+            }, v && (G._$.range = [p[p.length - (z || 1)].range[0], p[p.length - 1].range[1]]), D = this.performAction.apply(G, [
               k,
               W,
               L,
@@ -253,7 +253,7 @@ Expecting ` + j.join(", ") + ", got '" + (this.terminals_[_] || _) + "'" : Y = "
               x,
               p
             ].concat(R)), typeof D < "u") return D;
-            O && (h = h.slice(0, -1 * O * 2), x = x.slice(0, -1 * O), p = p.slice(0, -1 * O)), h.push(this.productions_[N[1]][0]), x.push(G.$), p.push(G._$), ot = S[h[h.length - 2]][h[h.length - 1]], h.push(ot);
+            z && (h = h.slice(0, -1 * z * 2), x = x.slice(0, -1 * z), p = p.slice(0, -1 * z)), h.push(this.productions_[N[1]][0]), x.push(G.$), p.push(G._$), ot = S[h[h.length - 2]][h[h.length - 1]], h.push(ot);
             break;
           case 3:
             return !0;
@@ -844,10 +844,10 @@ var Yt = /* @__PURE__ */ o(function(e, t, n, a, r, c = !1) {
   setConf: /* @__PURE__ */ o(() => {
   }, "setConf"),
   draw: ne
-}, Q = 200, z = 5, se = Q + z * 2, at = Q + 100, ae = at + z * 2, Mt = 10, oe = 0, dt = 20, At = 20, ut = 30, Rt = 50, le = /* @__PURE__ */ o(function(e, t, n, a) {
+}, Q = 200, O = 5, se = Q + O * 2, at = Q + 100, ae = at + O * 2, Mt = 10, oe = 0, dt = 20, At = 20, ut = 30, Rt = 50, le = /* @__PURE__ */ o(function(e, t, n, a) {
   const r = yt(), c = r.timeline?.leftMargin ?? 50;
   b.debug("timeline", a.db);
-  const s = zt(t);
+  const s = Ot(t);
   s.append("g");
   const d = a.db.getTasks(), y = a.db.getCommonDb().getDiagramTitle();
   b.debug("task", d), A.initGraphics(s);
@@ -858,14 +858,14 @@ var Yt = /* @__PURE__ */ o(function(e, t, n, a, r, c = !1) {
   let u = 50;
   const h = u, g = l, x = se + At, p = ae + Rt, S = g + x;
   let k = 0;
-  const L = f && f.length > 0, W = L ? S : l + x, B = Math.max(50, x + p - z * 2);
+  const L = f && f.length > 0, W = L ? S : l + x, B = Math.max(50, x + p - O * 2);
   f.forEach(function(v) {
     const E = {
       number: k,
       descr: v,
       section: k,
       width: B,
-      padding: z,
+      padding: O,
       maxHeight: m
     }, $ = A.getVirtualNodeHeight(s, E, r);
     b.debug("sectionHeight before draw", $), m = Math.max(m, $);
@@ -878,7 +878,7 @@ var Yt = /* @__PURE__ */ o(function(e, t, n, a, r, c = !1) {
       descr: E,
       section: E.section,
       width: Q,
-      padding: z,
+      padding: O,
       maxHeight: i
     }, _ = A.getVirtualNodeHeight(s, $, r);
     b.debug("taskHeight before draw", _), i = Math.max(i, _);
@@ -889,7 +889,7 @@ var Yt = /* @__PURE__ */ o(function(e, t, n, a, r, c = !1) {
         section: E.section,
         number: E.section,
         width: at,
-        padding: z,
+        padding: O,
         maxHeight: 50
       };
       H += A.getVirtualNodeHeight(s, N, r);
@@ -904,7 +904,7 @@ var Yt = /* @__PURE__ */ o(function(e, t, n, a, r, c = !1) {
       descr: v,
       section: k,
       width: B,
-      padding: z,
+      padding: O,
       maxHeight: m
     };
     b.debug("sectionNode", $);
@@ -923,7 +923,7 @@ var Yt = /* @__PURE__ */ o(function(e, t, n, a, r, c = !1) {
     if (s.append("text").text(y).attr("x", R.width / 2 - c).attr("font-size", "4ex").attr("font-weight", "bold").attr("y", 20), R = s.node()?.getBBox(), !R) throw new Error("bbox not found");
     b.debug("bounds after title", R);
   }
-  const [w] = Ot(r.fontSize), M = (w ?? 16) * 2, F = (w ?? 16) * 0.5 + 20, T = s.append("g").attr("class", "lineWrapper");
+  const [w] = zt(r.fontSize), M = (w ?? 16) * 2, F = (w ?? 16) * 0.5 + 20, T = s.append("g").attr("class", "lineWrapper");
   T.append("line").attr("x1", W).attr("y1", h - M).attr("x2", W).attr("y2", R.y + R.height + F).attr("stroke-width", 4).attr("stroke", "black").attr("marker-end", "url(#arrowhead)"), T.lower(), gt(void 0, s, r.timeline?.padding ?? 50, r.timeline?.useMaxWidth ?? !1);
 }, "draw"), pt = /* @__PURE__ */ o(function(e, t, n, a, r, c, s, d, y) {
   for (const f of t) {
@@ -932,7 +932,7 @@ var Yt = /* @__PURE__ */ o(function(e, t, n, a, r, c = !1) {
       section: n,
       number: n,
       width: Q,
-      padding: z,
+      padding: O,
       maxHeight: c
     };
     b.debug("taskNode", m);
@@ -953,7 +953,7 @@ var Yt = /* @__PURE__ */ o(function(e, t, n, a, r, c = !1) {
       section: n,
       number: n,
       width: at,
-      padding: z,
+      padding: O,
       maxHeight: 0
     };
     b.debug("eventNode", f);

package/dist/wc-react/useCollapsiblePanel.js

@@ -7,7 +7,7 @@ import { t as ie } from "./useBaseUiId.js";
 import { t as ae } from "./addEventListener.js";
 import { t as b } from "./useAnimationFrame.js";
 import { t as ue } from "./useValueAsRef.js";
-import { i as Y, n as ce, o as le, t as fe } from "./useOpenChangeComplete.js";
+import { a as ce, i as le, r as fe, t as Y } from "./stateAttributesMapping.js";
 import * as o from "react";
 function Ie(e) {
   const { open: r, defaultOpen: i, onOpenChange: l, disabled: u } = e, [n, g] = te({
@@ -15,7 +15,7 @@ function Ie(e) {
     default: i,
     name: "Collapsible",
     state: "open"
-  }), { mounted: s, setMounted: p, transitionStatus: O } = le(n, !0, !0), c = ie(), [f, m] = o.useState(), h = f === null ? void 0 : f ?? c, I = M((P) => {
+  }), { mounted: s, setMounted: p, transitionStatus: O } = ce(n, !0, !0), c = ie(), [f, m] = o.useState(), h = f === null ? void 0 : f ?? c, I = M((P) => {
     const S = !n, v = $(se, P.nativeEvent);
     l(S, v), !v.isCanceled && g(S);
   });
@@ -62,7 +62,7 @@ var B = (function(e) {
   width: void 0
 };
 function xe(e) {
-  const { externalRef: r, hiddenUntilFound: i, id: l, keepMounted: u, mounted: n, onOpenChange: g, open: s, setMounted: p, setOpen: O, transitionStatus: c } = e, f = o.useRef(null), m = o.useRef(null), [h, I] = o.useState(A), P = o.useRef(A), S = o.useRef(!1), v = o.useRef(s), F = o.useRef(!1), [j, w] = o.useState(!1), C = o.useRef(null), z = ne(r, f), U = ue(s), V = ce(f), D = !s && !n, N = j ? "idle" : c, k = s && (v.current || F.current), q = !s && n && m.current === "css-animation" && h.height === void 0 && h.width === void 0 ? P.current : h, G = i && D && m.current !== "css-animation", d = M((t, a = !0) => {
+  const { externalRef: r, hiddenUntilFound: i, id: l, keepMounted: u, mounted: n, onOpenChange: g, open: s, setMounted: p, setOpen: O, transitionStatus: c } = e, f = o.useRef(null), m = o.useRef(null), [h, I] = o.useState(A), P = o.useRef(A), S = o.useRef(!1), v = o.useRef(s), F = o.useRef(!1), [j, w] = o.useState(!1), C = o.useRef(null), z = ne(r, f), U = ue(s), V = le(f), D = !s && !n, N = j ? "idle" : c, k = s && (v.current || F.current), q = !s && n && m.current === "css-animation" && h.height === void 0 && h.width === void 0 ? P.current : h, G = i && D && m.current !== "css-animation", d = M((t, a = !0) => {
     a && (P.current = t), I(t);
   }), E = M(() => {
     C.current?.(), C.current = null;

package/dist/wc-react/usePopupHandleStore.js

@@ -1,13 +1,13 @@
-import { at as i } from "./vendor/recharts.js";
+import { Ot as i } from "./vendor/recharts.js";
 import { u } from "./useRenderElement.js";
 import * as t from "react";
 var c = i();
-function p(r) {
+function a(r) {
   const o = t.useCallback((e) => r === void 0 ? u : r.subscribeStore(e), [r]), s = t.useCallback(() => r === void 0 ? void 0 : r.store, [r]);
   return (0, c.useSyncExternalStore)(o, s, () => r?.serverStore);
 }
 export {
-  p as t
+  a as t
 };
 
 //# sourceMappingURL=usePopupHandleStore.js.map

package/dist/wc-react/useScrollLock.js

@@ -12,8 +12,8 @@ import { o as Xe, s as ct, t as He } from "./element.js";
 import { t as D } from "./addEventListener.js";
 import { n as lt, t as Ot } from "./useAnimationFrame.js";
 import { t as ie } from "./useValueAsRef.js";
-import { r as z } from "./useOpenChangeComplete.js";
 import { n as Re, t as Be } from "./useTimeout.js";
+import { o as z } from "./stateAttributesMapping.js";
 import * as y from "react";
 import { jsx as Te, jsxs as It } from "react/jsx-runtime";
 var ce = 0;