jaci-ui 0.1.1 → 0.3.0

package/dist/components/color-picker/color-picker.js

@@ -114,57 +114,112 @@ const ColorPickerPositioner = forwardRef(function ColorPickerPositioner({ classN
 const ColorPickerPopup = forwardRef(function ColorPickerPopup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Popover.Popup, {
 		...props,
+		"aria-label": props["aria-label"] ?? "Color picker",
 		ref,
 		className: withRecipeClassName(colorPicker().popup, className),
 		"data-jaci-component": "color-picker",
 		"data-slot": "color-picker-popup"
 	});
 });
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function formatPalettePercentage(value) {
+	return `${Number(value.toFixed(2))}%`;
+}
+function hslToPalettePosition(color) {
+	const lightness = clamp(color.lightness / 100, 0, 1);
+	const saturation = clamp(color.saturation / 100, 0, 1);
+	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+	const value = lightness + chroma / 2;
+	return {
+		lightness: (1 - value) * 100,
+		saturation: value === 0 ? 0 : chroma / value * 100
+	};
+}
+function palettePositionToHsl(saturation, lightness, color) {
+	const hsvSaturation = clamp(saturation / 100, 0, 1);
+	const value = 1 - clamp(lightness / 100, 0, 1);
+	const hslLightness = value * (1 - hsvSaturation / 2);
+	const hslSaturation = hslLightness === 0 || hslLightness === 1 ? 0 : (value - hslLightness) / Math.min(hslLightness, 1 - hslLightness) * 100;
+	return {
+		...color,
+		lightness: hslLightness * 100,
+		saturation: clamp(hslSaturation, 0, 100)
+	};
+}
 function updateFromPoint(event, setColor, color) {
 	const rect = event.currentTarget.getBoundingClientRect();
-	const saturation = Math.round(Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)) * 100);
-	const lightness = Math.round((1 - Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height))) * 100);
-	setColor({
-		...color,
-		lightness,
-		saturation
-	});
+	setColor(palettePositionToHsl(Math.round(clamp((event.clientX - rect.left) / rect.width, 0, 1) * 100), Math.round(clamp((event.clientY - rect.top) / rect.height, 0, 1) * 100), color));
 }
-const ColorPickerPalette = forwardRef(function ColorPickerPalette({ className, onKeyDown, onPointerDown, style, ...props }, ref) {
-	const { color, setColor, value } = useColorPicker();
+const ColorPickerPalette = forwardRef(function ColorPickerPalette({ children, className, onKeyDown, onPointerCancel, onPointerDown, onPointerMove, onPointerUp, style, ...props }, ref) {
+	const { color, disabled, setColor, value } = useColorPicker();
+	const [isDragging, setIsDragging] = useState(false);
 	const background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${color.hue} 100% 50%))`;
-	return /* @__PURE__ */ jsx("div", {
+	const palettePosition = hslToPalettePosition(color);
+	const paletteStyle = {
+		"--jaci-color-palette-lightness": formatPalettePercentage(palettePosition.lightness),
+		"--jaci-color-palette-saturation": formatPalettePercentage(palettePosition.saturation),
+		background,
+		...style
+	};
+	const releasePointer = (event) => {
+		if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		setIsDragging(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		ref,
+		"aria-disabled": disabled || void 0,
 		"aria-label": props["aria-label"] ?? "Color saturation and lightness",
 		"aria-valuemax": 100,
 		"aria-valuemin": 0,
-		"aria-valuenow": Math.round(color.saturation),
+		"aria-valuenow": Math.round(palettePosition.saturation),
 		"aria-valuetext": value,
 		className: cx(colorPicker().palette, className),
+		"data-disabled": disabled || void 0,
+		"data-dragging": isDragging || void 0,
 		"data-slot": "color-picker-palette",
 		onKeyDown: (event) => {
 			const step = event.shiftKey ? 10 : 1;
 			if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
 				event.preventDefault();
-				setColor({
-					...color,
-					saturation: event.key === "ArrowLeft" ? Math.max(0, color.saturation - step) : event.key === "ArrowRight" ? Math.min(100, color.saturation + step) : color.saturation,
-					lightness: event.key === "ArrowDown" ? Math.max(0, color.lightness - step) : event.key === "ArrowUp" ? Math.min(100, color.lightness + step) : color.lightness
-				});
+				const saturation = event.key === "ArrowLeft" ? Math.max(0, palettePosition.saturation - step) : event.key === "ArrowRight" ? Math.min(100, palettePosition.saturation + step) : palettePosition.saturation;
+				const lightness = event.key === "ArrowDown" ? Math.min(100, palettePosition.lightness + step) : event.key === "ArrowUp" ? Math.max(0, palettePosition.lightness - step) : palettePosition.lightness;
+				setColor(palettePositionToHsl(saturation, lightness, color));
 			}
 			onKeyDown?.(event);
 		},
 		onPointerDown: (event) => {
-			updateFromPoint(event, setColor, color);
+			if (!disabled) {
+				updateFromPoint(event, setColor, color);
+				setIsDragging(true);
+				try {
+					event.currentTarget.setPointerCapture(event.pointerId);
+				} catch {}
+			}
 			onPointerDown?.(event);
 		},
-		role: "slider",
-		style: {
-			background,
-			...style
+		onPointerMove: (event) => {
+			if (!disabled && isDragging) updateFromPoint(event, setColor, color);
+			onPointerMove?.(event);
+		},
+		onPointerUp: (event) => {
+			releasePointer(event);
+			onPointerUp?.(event);
 		},
-		tabIndex: props.tabIndex ?? 0
+		onPointerCancel: (event) => {
+			releasePointer(event);
+			onPointerCancel?.(event);
+		},
+		role: "slider",
+		style: paletteStyle,
+		tabIndex: props.tabIndex ?? (disabled ? -1 : 0),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: colorPicker().paletteIndicator,
+			"data-slot": "color-picker-palette-indicator"
+		}), children]
 	});
 });
 const ColorPickerHue = forwardRef(function ColorPickerHue({ className, onInput, ...props }, ref) {

package/dist/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","names":["BasePopover"],"sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { createContext, forwardRef, useContext, useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, PointerEvent, ReactNode } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { colorPicker } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { defaultColor, formatColor, parseColor } from \"./color-utils\";\nimport type { ColorFormat, ColorModel } from \"./color-utils\";\n\nexport type { ColorFormat, ColorModel } from \"./color-utils\";\nexport { defaultColor, formatColor, parseColor } from \"./color-utils\";\n\ninterface ColorPickerContextValue {\n  color: ColorModel;\n  disabled: boolean;\n  format: ColorFormat;\n  inputId: string;\n  setColor: (color: ColorModel) => void;\n  showAlpha: boolean;\n  swatches: string[];\n  value: string;\n}\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | null>(null);\n\nfunction useColorPicker() {\n  const context = useContext(ColorPickerContext);\n  if (!context) throw new Error(\"ColorPicker parts must be rendered inside ColorPicker.Root.\");\n  return context;\n}\n\nexport interface ColorPickerRootProps extends Omit<BasePopoverRoot.Props, \"children\"> {\n  children?: ReactNode;\n  defaultValue?: string;\n  disabled?: boolean;\n  format?: ColorFormat;\n  id?: string;\n  name?: string;\n  onValueChange?: (value: string) => void;\n  showAlpha?: boolean;\n  swatches?: string[];\n  value?: string;\n}\n\nexport function ColorPickerRoot({\n  children,\n  defaultValue = \"#000000\",\n  disabled = false,\n  format = \"hex\",\n  id,\n  name,\n  onValueChange,\n  showAlpha = false,\n  swatches = [],\n  value: controlledValue,\n  ...popoverProps\n}: ColorPickerRootProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const [uncontrolledColor, setUncontrolledColor] = useState<ColorModel>(() =>\n    defaultColor(defaultValue),\n  );\n  const parsedControlled = parseColor(controlledValue);\n  const color = parsedControlled ?? uncontrolledColor;\n  const formattedValue = formatColor(color, format, showAlpha);\n  const setColor = (nextColor: ColorModel) => {\n    setUncontrolledColor(nextColor);\n    onValueChange?.(formatColor(nextColor, format, showAlpha));\n  };\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        color,\n        disabled,\n        format,\n        inputId,\n        setColor,\n        showAlpha,\n        swatches,\n        value: formattedValue,\n      }}\n    >\n      <BasePopover.Root {...popoverProps}>\n        {children}\n        {name ? (\n          <input\n            aria-hidden=\"true\"\n            id={`${inputId}-value`}\n            name={name}\n            type=\"hidden\"\n            value={formattedValue}\n          />\n        ) : null}\n      </BasePopover.Root>\n    </ColorPickerContext.Provider>\n  );\n}\n\nexport interface ColorPickerLabelProps extends ComponentPropsWithoutRef<\"label\"> {}\nexport const ColorPickerLabel = forwardRef<HTMLLabelElement, ColorPickerLabelProps>(\n  function ColorPickerLabel({ children, className, htmlFor, ...props }, ref) {\n    const { inputId } = useColorPicker();\n    return (\n      <label\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().label, className)}\n        data-slot=\"color-picker-label\"\n        htmlFor={htmlFor ?? inputId}\n      >\n        {children}\n      </label>\n    );\n  },\n);\n\nexport type ColorPickerControlProps = ComponentPropsWithoutRef<\"div\">;\nexport const ColorPickerControl = forwardRef<HTMLDivElement, ColorPickerControlProps>(\n  function ColorPickerControl({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().control, className)}\n        data-slot=\"color-picker-control\"\n      />\n    );\n  },\n);\n\nexport type ColorPickerTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\nexport const ColorPickerTrigger = forwardRef<HTMLButtonElement, ColorPickerTriggerProps>(\n  function ColorPickerTrigger({ className, disabled, ...props }, ref) {\n    const context = useColorPicker();\n    return (\n      <BasePopover.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().trigger, className)}\n        data-jaci-component=\"color-picker\"\n        data-slot=\"color-picker-trigger\"\n        disabled={disabled ?? context.disabled}\n        id={props.id ?? context.inputId}\n      />\n    );\n  },\n);\n\nexport type ColorPickerPreviewProps = ComponentPropsWithoutRef<\"span\">;\nexport const ColorPickerPreview = forwardRef<HTMLSpanElement, ColorPickerPreviewProps>(\n  function ColorPickerPreview({ className, style, ...props }, ref) {\n    const { value } = useColorPicker();\n    return (\n      <span\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? value}\n        className={cx(colorPicker().preview, className)}\n        data-slot=\"color-picker-preview\"\n        role=\"img\"\n        style={{ backgroundColor: value, ...style }}\n      />\n    );\n  },\n);\n\nexport type ColorPickerValueProps = ComponentPropsWithoutRef<\"span\">;\nexport const ColorPickerValue = forwardRef<HTMLSpanElement, ColorPickerValueProps>(\n  function ColorPickerValue({ className, ...props }, ref) {\n    const { value } = useColorPicker();\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().value, className)}\n        data-slot=\"color-picker-value\"\n      >\n        {props.children ?? value}\n      </span>\n    );\n  },\n);\n\nexport const ColorPickerPortal: typeof BasePopover.Portal = BasePopover.Portal;\nexport type ColorPickerPositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\nexport const ColorPickerPositioner = forwardRef<HTMLDivElement, ColorPickerPositionerProps>(\n  function ColorPickerPositioner({ className, ...props }, ref) {\n    return (\n      <BasePopover.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().positioner, className)}\n        data-slot=\"color-picker-positioner\"\n      />\n    );\n  },\n);\n\nexport type ColorPickerPopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\nexport const ColorPickerPopup = forwardRef<HTMLDivElement, ColorPickerPopupProps>(\n  function ColorPickerPopup({ className, ...props }, ref) {\n    return (\n      <BasePopover.Popup\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().popup, className)}\n        data-jaci-component=\"color-picker\"\n        data-slot=\"color-picker-popup\"\n      />\n    );\n  },\n);\n\nfunction updateFromPoint(\n  event: PointerEvent<HTMLDivElement>,\n  setColor: (color: ColorModel) => void,\n  color: ColorModel,\n) {\n  const rect = event.currentTarget.getBoundingClientRect();\n  const saturation = Math.round(\n    Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)) * 100,\n  );\n  const lightness = Math.round(\n    (1 - Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height))) * 100,\n  );\n  setColor({ ...color, lightness, saturation });\n}\n\nexport type ColorPickerPaletteProps = Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">;\nexport const ColorPickerPalette = forwardRef<HTMLDivElement, ColorPickerPaletteProps>(\n  function ColorPickerPalette({ className, onKeyDown, onPointerDown, style, ...props }, ref) {\n    const { color, setColor, value } = useColorPicker();\n    const background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${color.hue} 100% 50%))`;\n    return (\n      <div\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Color saturation and lightness\"}\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={Math.round(color.saturation)}\n        aria-valuetext={value}\n        className={cx(colorPicker().palette, className)}\n        data-slot=\"color-picker-palette\"\n        onKeyDown={(event) => {\n          const step = event.shiftKey ? 10 : 1;\n          if (\n            event.key === \"ArrowLeft\" ||\n            event.key === \"ArrowRight\" ||\n            event.key === \"ArrowUp\" ||\n            event.key === \"ArrowDown\"\n          ) {\n            event.preventDefault();\n            setColor({\n              ...color,\n              saturation:\n                event.key === \"ArrowLeft\"\n                  ? Math.max(0, color.saturation - step)\n                  : event.key === \"ArrowRight\"\n                    ? Math.min(100, color.saturation + step)\n                    : color.saturation,\n              lightness:\n                event.key === \"ArrowDown\"\n                  ? Math.max(0, color.lightness - step)\n                  : event.key === \"ArrowUp\"\n                    ? Math.min(100, color.lightness + step)\n                    : color.lightness,\n            });\n          }\n          onKeyDown?.(event);\n        }}\n        onPointerDown={(event) => {\n          updateFromPoint(event, setColor, color);\n          onPointerDown?.(event);\n        }}\n        role=\"slider\"\n        style={{ background, ...style }}\n        tabIndex={props.tabIndex ?? 0}\n      />\n    );\n  },\n);\n\nexport type ColorPickerHueProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"max\" | \"min\" | \"onChange\" | \"step\" | \"type\" | \"value\"\n>;\nexport const ColorPickerHue = forwardRef<HTMLInputElement, ColorPickerHueProps>(\n  function ColorPickerHue({ className, onInput, ...props }, ref) {\n    const { color, setColor } = useColorPicker();\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Hue\"}\n        className={cx(colorPicker().hue, className)}\n        data-slot=\"color-picker-hue\"\n        max={360}\n        min={0}\n        onInput={(event) => {\n          setColor({ ...color, hue: Number(event.currentTarget.value) });\n          onInput?.(event);\n        }}\n        step={1}\n        type=\"range\"\n        value={color.hue}\n      />\n    );\n  },\n);\n\nexport type ColorPickerAlphaProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"max\" | \"min\" | \"onChange\" | \"step\" | \"type\" | \"value\"\n>;\nexport const ColorPickerAlpha = forwardRef<HTMLInputElement, ColorPickerAlphaProps>(\n  function ColorPickerAlpha({ className, onInput, style, ...props }, ref) {\n    const { color, setColor, showAlpha } = useColorPicker();\n    if (!showAlpha) return null;\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Opacity\"}\n        className={cx(colorPicker().alpha, className)}\n        data-slot=\"color-picker-alpha\"\n        max={1}\n        min={0}\n        onInput={(event) => {\n          setColor({ ...color, alpha: Number(event.currentTarget.value) });\n          onInput?.(event);\n        }}\n        step={0.01}\n        style={{\n          ...style,\n          background: `linear-gradient(to right, transparent, ${formatColor({ ...color, alpha: 1 }, \"rgb\")})`,\n        }}\n        type=\"range\"\n        value={color.alpha}\n      />\n    );\n  },\n);\n\nexport type ColorPickerSwatchesProps = ComponentPropsWithoutRef<\"fieldset\">;\nexport const ColorPickerSwatches = forwardRef<HTMLFieldSetElement, ColorPickerSwatchesProps>(\n  function ColorPickerSwatches({ children, className, ...props }, ref) {\n    const { swatches } = useColorPicker();\n    return (\n      <fieldset\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().swatches, className)}\n        data-slot=\"color-picker-swatches\"\n      >\n        {children ?? swatches.map((color) => <ColorPickerSwatch color={color} key={color} />)}\n      </fieldset>\n    );\n  },\n);\n\nexport interface ColorPickerSwatchProps extends ComponentPropsWithoutRef<\"button\"> {\n  color: string;\n}\nexport const ColorPickerSwatch = forwardRef<HTMLButtonElement, ColorPickerSwatchProps>(\n  function ColorPickerSwatch({ children, className, color, style, ...props }, ref) {\n    const context = useColorPicker();\n    const parsed = parseColor(color);\n    const selected =\n      parsed && formatColor(parsed, context.format, context.showAlpha) === context.value;\n    return (\n      <button\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? color}\n        aria-pressed={selected || undefined}\n        className={cx(colorPicker().swatch, className)}\n        data-selected={selected || undefined}\n        data-slot=\"color-picker-swatch\"\n        onClick={(event) => {\n          if (parsed) context.setColor(parsed);\n          props.onClick?.(event);\n        }}\n        style={{ backgroundColor: color, ...style }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nexport type ColorPickerInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"onChange\" | \"type\" | \"value\"\n>;\nexport const ColorPickerInput = forwardRef<HTMLInputElement, ColorPickerInputProps>(\n  function ColorPickerInput({ className, onBlur, onKeyDown, ...props }, ref) {\n    const { format, setColor, showAlpha, value } = useColorPicker();\n    const [draft, setDraft] = useState(value);\n    const [invalid, setInvalid] = useState(false);\n    useEffect(() => setDraft(value), [value]);\n    const commit = () => {\n      const parsed = parseColor(draft);\n      if (!parsed) {\n        setInvalid(true);\n        setDraft(value);\n        return;\n      }\n      setInvalid(false);\n      setColor(parsed);\n      setDraft(formatColor(parsed, format, showAlpha));\n    };\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Color value\"}\n        aria-invalid={invalid || undefined}\n        className={cx(colorPicker().input, className)}\n        data-slot=\"color-picker-input\"\n        onBlur={(event) => {\n          commit();\n          onBlur?.(event);\n        }}\n        onChange={(event) => {\n          setDraft(event.currentTarget.value);\n          setInvalid(false);\n        }}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            event.preventDefault();\n            commit();\n          }\n          onKeyDown?.(event);\n        }}\n        type=\"text\"\n        value={draft}\n      />\n    );\n  },\n);\n\nexport type ColorPickerNativeInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"onChange\" | \"type\" | \"value\"\n>;\nexport const ColorPickerNativeInput = forwardRef<HTMLInputElement, ColorPickerNativeInputProps>(\n  function ColorPickerNativeInput({ className, onInput, ...props }, ref) {\n    const { color, setColor, showAlpha } = useColorPicker();\n    const value = formatColor({ ...color, alpha: 1 }, \"hex\");\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Choose a color\"}\n        className={cx(colorPicker().nativeInput, className)}\n        data-slot=\"color-picker-native-input\"\n        onInput={(event) => {\n          const parsed = parseColor(event.currentTarget.value);\n          if (parsed) setColor({ ...parsed, alpha: showAlpha ? color.alpha : 1 });\n          onInput?.(event);\n        }}\n        type=\"color\"\n        value={value.slice(0, 7)}\n      />\n    );\n  },\n);\n\nexport const ColorPicker = {\n  Root: ColorPickerRoot,\n  Label: ColorPickerLabel,\n  Control: ColorPickerControl,\n  Trigger: ColorPickerTrigger,\n  Preview: ColorPickerPreview,\n  Value: ColorPickerValue,\n  Portal: ColorPickerPortal,\n  Positioner: ColorPickerPositioner,\n  Popup: ColorPickerPopup,\n  Palette: ColorPickerPalette,\n  Hue: ColorPickerHue,\n  Alpha: ColorPickerAlpha,\n  Swatches: ColorPickerSwatches,\n  Swatch: ColorPickerSwatch,\n  Input: ColorPickerInput,\n  NativeInput: ColorPickerNativeInput,\n  createHandle: BasePopover.createHandle,\n};\n"],"mappings":";;;;;;;;;AA2BA,MAAM,qBAAqB,cAA8C,IAAI;AAE7E,SAAS,iBAAiB;CACxB,MAAM,UAAU,WAAW,kBAAkB;CAC7C,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,6DAA6D;CAC3F,OAAO;AACT;AAeA,SAAgB,gBAAgB,EAC9B,UACA,eAAe,WACf,WAAW,OACX,SAAS,OACT,IACA,MACA,eACA,YAAY,OACZ,WAAW,CAAC,GACZ,OAAO,iBACP,GAAG,gBACoB;CACvB,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,MAAM;CACtB,MAAM,CAAC,mBAAmB,wBAAwB,eAChD,aAAa,YAAY,CAC3B;CAEA,MAAM,QADmB,WAAW,eACP,KAAK;CAClC,MAAM,iBAAiB,YAAY,OAAO,QAAQ,SAAS;CAC3D,MAAM,YAAY,cAA0B;EAC1C,qBAAqB,SAAS;EAC9B,gBAAgB,YAAY,WAAW,QAAQ,SAAS,CAAC;CAC3D;CAEA,OACE,oBAAC,mBAAmB,UAApB;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;EACT;YAEA,qBAACA,QAAY,MAAb;GAAkB,GAAI;aAAtB,CACG,UACA,OACC,oBAAC,SAAD;IACE,eAAY;IACZ,IAAI,GAAG,QAAQ;IACT;IACN,MAAK;IACL,OAAO;GACR,CAAA,IACC,IACY;;CACS,CAAA;AAEjC;AAGA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,UAAU,WAAW,SAAS,GAAG,SAAS,KAAK;CACzE,MAAM,EAAE,YAAY,eAAe;CACnC,OACE,oBAAC,SAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,YAAY,CAAC,CAAC,OAAO,SAAS;EAC5C,aAAU;EACV,SAAS,WAAW;EAEnB;CACI,CAAA;AAEX,CACF;AAGA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,YAAY,CAAC,CAAC,SAAS,SAAS;EAC9C,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CAClE,MAAM,UAAU,eAAe;CAC/B,OACE,oBAACA,QAAY,SAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,YAAY,CAAC,CAAC,SAAS,SAAS;EAC/D,uBAAoB;EACpB,aAAU;EACV,UAAU,YAAY,QAAQ;EAC9B,IAAI,MAAM,MAAM,QAAQ;CACzB,CAAA;AAEL,CACF;AAGA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,OAAO,GAAG,SAAS,KAAK;CAC/D,MAAM,EAAE,UAAU,eAAe;CACjC,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,cAAY,MAAM,iBAAiB;EACnC,WAAW,GAAG,YAAY,CAAC,CAAC,SAAS,SAAS;EAC9C,aAAU;EACV,MAAK;EACL,OAAO;GAAE,iBAAiB;GAAO,GAAG;EAAM;CAC3C,CAAA;AAEL,CACF;AAGA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,MAAM,EAAE,UAAU,eAAe;CACjC,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,YAAY,CAAC,CAAC,OAAO,SAAS;EAC5C,aAAU;YAET,MAAM,YAAY;CACf,CAAA;AAEV,CACF;AAEA,MAAa,oBAA+CA,QAAY;AAExE,MAAa,wBAAwB,WACnC,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC3D,OACE,oBAACA,QAAY,YAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,YAAY,CAAC,CAAC,YAAY,SAAS;EAClE,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAACA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,YAAY,CAAC,CAAC,OAAO,SAAS;EAC7D,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;AAEA,SAAS,gBACP,OACA,UACA,OACA;CACA,MAAM,OAAO,MAAM,cAAc,sBAAsB;CACvD,MAAM,aAAa,KAAK,MACtB,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,MAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,CAAC,IAAI,GACvE;CACA,MAAM,YAAY,KAAK,OACpB,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,MAAM,UAAU,KAAK,OAAO,KAAK,MAAM,CAAC,KAAK,GAC7E;CACA,SAAS;EAAE,GAAG;EAAO;EAAW;CAAW,CAAC;AAC9C;AAGA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,WAAW,eAAe,OAAO,GAAG,SAAS,KAAK;CACzF,MAAM,EAAE,OAAO,UAAU,UAAU,eAAe;CAClD,MAAM,aAAa,mFAAmF,MAAM,IAAI;CAChH,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,cAAY,MAAM,iBAAiB;EACnC,iBAAe;EACf,iBAAe;EACf,iBAAe,KAAK,MAAM,MAAM,UAAU;EAC1C,kBAAgB;EAChB,WAAW,GAAG,YAAY,CAAC,CAAC,SAAS,SAAS;EAC9C,aAAU;EACV,YAAY,UAAU;GACpB,MAAM,OAAO,MAAM,WAAW,KAAK;GACnC,IACE,MAAM,QAAQ,eACd,MAAM,QAAQ,gBACd,MAAM,QAAQ,aACd,MAAM,QAAQ,aACd;IACA,MAAM,eAAe;IACrB,SAAS;KACP,GAAG;KACH,YACE,MAAM,QAAQ,cACV,KAAK,IAAI,GAAG,MAAM,aAAa,IAAI,IACnC,MAAM,QAAQ,eACZ,KAAK,IAAI,KAAK,MAAM,aAAa,IAAI,IACrC,MAAM;KACd,WACE,MAAM,QAAQ,cACV,KAAK,IAAI,GAAG,MAAM,YAAY,IAAI,IAClC,MAAM,QAAQ,YACZ,KAAK,IAAI,KAAK,MAAM,YAAY,IAAI,IACpC,MAAM;IAChB,CAAC;GACH;GACA,YAAY,KAAK;EACnB;EACA,gBAAgB,UAAU;GACxB,gBAAgB,OAAO,UAAU,KAAK;GACtC,gBAAgB,KAAK;EACvB;EACA,MAAK;EACL,OAAO;GAAE;GAAY,GAAG;EAAM;EAC9B,UAAU,MAAM,YAAY;CAC7B,CAAA;AAEL,CACF;AAMA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,SAAS,GAAG,SAAS,KAAK;CAC7D,MAAM,EAAE,OAAO,aAAa,eAAe;CAC3C,OACE,oBAAC,SAAD;EACE,GAAI;EACC;EACL,cAAY,MAAM,iBAAiB;EACnC,WAAW,GAAG,YAAY,CAAC,CAAC,KAAK,SAAS;EAC1C,aAAU;EACV,KAAK;EACL,KAAK;EACL,UAAU,UAAU;GAClB,SAAS;IAAE,GAAG;IAAO,KAAK,OAAO,MAAM,cAAc,KAAK;GAAE,CAAC;GAC7D,UAAU,KAAK;EACjB;EACA,MAAM;EACN,MAAK;EACL,OAAO,MAAM;CACd,CAAA;AAEL,CACF;AAMA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,SAAS,OAAO,GAAG,SAAS,KAAK;CACtE,MAAM,EAAE,OAAO,UAAU,cAAc,eAAe;CACtD,IAAI,CAAC,WAAW,OAAO;CACvB,OACE,oBAAC,SAAD;EACE,GAAI;EACC;EACL,cAAY,MAAM,iBAAiB;EACnC,WAAW,GAAG,YAAY,CAAC,CAAC,OAAO,SAAS;EAC5C,aAAU;EACV,KAAK;EACL,KAAK;EACL,UAAU,UAAU;GAClB,SAAS;IAAE,GAAG;IAAO,OAAO,OAAO,MAAM,cAAc,KAAK;GAAE,CAAC;GAC/D,UAAU,KAAK;EACjB;EACA,MAAM;EACN,OAAO;GACL,GAAG;GACH,YAAY,0CAA0C,YAAY;IAAE,GAAG;IAAO,OAAO;GAAE,GAAG,KAAK,EAAE;EACnG;EACA,MAAK;EACL,OAAO,MAAM;CACd,CAAA;AAEL,CACF;AAGA,MAAa,sBAAsB,WACjC,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,SAAS,KAAK;CACnE,MAAM,EAAE,aAAa,eAAe;CACpC,OACE,oBAAC,YAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,YAAY,CAAC,CAAC,UAAU,SAAS;EAC/C,aAAU;YAET,YAAY,SAAS,KAAK,UAAU,oBAAC,mBAAD,EAA0B,MAAoB,GAAR,KAAQ,CAAC;CAC5E,CAAA;AAEd,CACF;AAKA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,EAAE,UAAU,WAAW,OAAO,OAAO,GAAG,SAAS,KAAK;CAC/E,MAAM,UAAU,eAAe;CAC/B,MAAM,SAAS,WAAW,KAAK;CAC/B,MAAM,WACJ,UAAU,YAAY,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,MAAM,QAAQ;CAC/E,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACL,cAAY,MAAM,iBAAiB;EACnC,gBAAc,YAAY,KAAA;EAC1B,WAAW,GAAG,YAAY,CAAC,CAAC,QAAQ,SAAS;EAC7C,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,UAAU,UAAU;GAClB,IAAI,QAAQ,QAAQ,SAAS,MAAM;GACnC,MAAM,UAAU,KAAK;EACvB;EACA,OAAO;GAAE,iBAAiB;GAAO,GAAG;EAAM;EAC1C,MAAK;EAEJ;CACK,CAAA;AAEZ,CACF;AAMA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,QAAQ,WAAW,GAAG,SAAS,KAAK;CACzE,MAAM,EAAE,QAAQ,UAAU,WAAW,UAAU,eAAe;CAC9D,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,gBAAgB,SAAS,KAAK,GAAG,CAAC,KAAK,CAAC;CACxC,MAAM,eAAe;EACnB,MAAM,SAAS,WAAW,KAAK;EAC/B,IAAI,CAAC,QAAQ;GACX,WAAW,IAAI;GACf,SAAS,KAAK;GACd;EACF;EACA,WAAW,KAAK;EAChB,SAAS,MAAM;EACf,SAAS,YAAY,QAAQ,QAAQ,SAAS,CAAC;CACjD;CACA,OACE,oBAAC,SAAD;EACE,GAAI;EACC;EACL,cAAY,MAAM,iBAAiB;EACnC,gBAAc,WAAW,KAAA;EACzB,WAAW,GAAG,YAAY,CAAC,CAAC,OAAO,SAAS;EAC5C,aAAU;EACV,SAAS,UAAU;GACjB,OAAO;GACP,SAAS,KAAK;EAChB;EACA,WAAW,UAAU;GACnB,SAAS,MAAM,cAAc,KAAK;GAClC,WAAW,KAAK;EAClB;EACA,YAAY,UAAU;GACpB,IAAI,MAAM,QAAQ,SAAS;IACzB,MAAM,eAAe;IACrB,OAAO;GACT;GACA,YAAY,KAAK;EACnB;EACA,MAAK;EACL,OAAO;CACR,CAAA;AAEL,CACF;AAMA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,WAAW,SAAS,GAAG,SAAS,KAAK;CACrE,MAAM,EAAE,OAAO,UAAU,cAAc,eAAe;CACtD,MAAM,QAAQ,YAAY;EAAE,GAAG;EAAO,OAAO;CAAE,GAAG,KAAK;CACvD,OACE,oBAAC,SAAD;EACE,GAAI;EACC;EACL,cAAY,MAAM,iBAAiB;EACnC,WAAW,GAAG,YAAY,CAAC,CAAC,aAAa,SAAS;EAClD,aAAU;EACV,UAAU,UAAU;GAClB,MAAM,SAAS,WAAW,MAAM,cAAc,KAAK;GACnD,IAAI,QAAQ,SAAS;IAAE,GAAG;IAAQ,OAAO,YAAY,MAAM,QAAQ;GAAE,CAAC;GACtE,UAAU,KAAK;EACjB;EACA,MAAK;EACL,OAAO,MAAM,MAAM,GAAG,CAAC;CACxB,CAAA;AAEL,CACF;AAEA,MAAa,cAAc;CACzB,MAAM;CACN,OAAO;CACP,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,OAAO;CACP,SAAS;CACT,KAAK;CACL,OAAO;CACP,UAAU;CACV,QAAQ;CACR,OAAO;CACP,aAAa;CACb,cAAcA,QAAY;AAC5B"}
+{"version":3,"file":"color-picker.js","names":["BasePopover"],"sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { createContext, forwardRef, useContext, useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, PointerEvent, ReactNode } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { colorPicker } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { defaultColor, formatColor, parseColor } from \"./color-utils\";\nimport type { ColorFormat, ColorModel } from \"./color-utils\";\n\nexport type { ColorFormat, ColorModel } from \"./color-utils\";\nexport { defaultColor, formatColor, parseColor } from \"./color-utils\";\n\ninterface ColorPickerContextValue {\n  color: ColorModel;\n  disabled: boolean;\n  format: ColorFormat;\n  inputId: string;\n  setColor: (color: ColorModel) => void;\n  showAlpha: boolean;\n  swatches: string[];\n  value: string;\n}\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | null>(null);\n\nfunction useColorPicker() {\n  const context = useContext(ColorPickerContext);\n  if (!context) throw new Error(\"ColorPicker parts must be rendered inside ColorPicker.Root.\");\n  return context;\n}\n\nexport interface ColorPickerRootProps extends Omit<BasePopoverRoot.Props, \"children\"> {\n  children?: ReactNode;\n  defaultValue?: string;\n  disabled?: boolean;\n  format?: ColorFormat;\n  id?: string;\n  name?: string;\n  onValueChange?: (value: string) => void;\n  showAlpha?: boolean;\n  swatches?: string[];\n  value?: string;\n}\n\nexport function ColorPickerRoot({\n  children,\n  defaultValue = \"#000000\",\n  disabled = false,\n  format = \"hex\",\n  id,\n  name,\n  onValueChange,\n  showAlpha = false,\n  swatches = [],\n  value: controlledValue,\n  ...popoverProps\n}: ColorPickerRootProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const [uncontrolledColor, setUncontrolledColor] = useState<ColorModel>(() =>\n    defaultColor(defaultValue),\n  );\n  const parsedControlled = parseColor(controlledValue);\n  const color = parsedControlled ?? uncontrolledColor;\n  const formattedValue = formatColor(color, format, showAlpha);\n  const setColor = (nextColor: ColorModel) => {\n    setUncontrolledColor(nextColor);\n    onValueChange?.(formatColor(nextColor, format, showAlpha));\n  };\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        color,\n        disabled,\n        format,\n        inputId,\n        setColor,\n        showAlpha,\n        swatches,\n        value: formattedValue,\n      }}\n    >\n      <BasePopover.Root {...popoverProps}>\n        {children}\n        {name ? (\n          <input\n            aria-hidden=\"true\"\n            id={`${inputId}-value`}\n            name={name}\n            type=\"hidden\"\n            value={formattedValue}\n          />\n        ) : null}\n      </BasePopover.Root>\n    </ColorPickerContext.Provider>\n  );\n}\n\nexport interface ColorPickerLabelProps extends ComponentPropsWithoutRef<\"label\"> {}\nexport const ColorPickerLabel = forwardRef<HTMLLabelElement, ColorPickerLabelProps>(\n  function ColorPickerLabel({ children, className, htmlFor, ...props }, ref) {\n    const { inputId } = useColorPicker();\n    return (\n      <label\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().label, className)}\n        data-slot=\"color-picker-label\"\n        htmlFor={htmlFor ?? inputId}\n      >\n        {children}\n      </label>\n    );\n  },\n);\n\nexport type ColorPickerControlProps = ComponentPropsWithoutRef<\"div\">;\nexport const ColorPickerControl = forwardRef<HTMLDivElement, ColorPickerControlProps>(\n  function ColorPickerControl({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().control, className)}\n        data-slot=\"color-picker-control\"\n      />\n    );\n  },\n);\n\nexport type ColorPickerTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\nexport const ColorPickerTrigger = forwardRef<HTMLButtonElement, ColorPickerTriggerProps>(\n  function ColorPickerTrigger({ className, disabled, ...props }, ref) {\n    const context = useColorPicker();\n    return (\n      <BasePopover.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().trigger, className)}\n        data-jaci-component=\"color-picker\"\n        data-slot=\"color-picker-trigger\"\n        disabled={disabled ?? context.disabled}\n        id={props.id ?? context.inputId}\n      />\n    );\n  },\n);\n\nexport type ColorPickerPreviewProps = ComponentPropsWithoutRef<\"span\">;\nexport const ColorPickerPreview = forwardRef<HTMLSpanElement, ColorPickerPreviewProps>(\n  function ColorPickerPreview({ className, style, ...props }, ref) {\n    const { value } = useColorPicker();\n    return (\n      <span\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? value}\n        className={cx(colorPicker().preview, className)}\n        data-slot=\"color-picker-preview\"\n        role=\"img\"\n        style={{ backgroundColor: value, ...style }}\n      />\n    );\n  },\n);\n\nexport type ColorPickerValueProps = ComponentPropsWithoutRef<\"span\">;\nexport const ColorPickerValue = forwardRef<HTMLSpanElement, ColorPickerValueProps>(\n  function ColorPickerValue({ className, ...props }, ref) {\n    const { value } = useColorPicker();\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().value, className)}\n        data-slot=\"color-picker-value\"\n      >\n        {props.children ?? value}\n      </span>\n    );\n  },\n);\n\nexport const ColorPickerPortal: typeof BasePopover.Portal = BasePopover.Portal;\nexport type ColorPickerPositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\nexport const ColorPickerPositioner = forwardRef<HTMLDivElement, ColorPickerPositionerProps>(\n  function ColorPickerPositioner({ className, ...props }, ref) {\n    return (\n      <BasePopover.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().positioner, className)}\n        data-slot=\"color-picker-positioner\"\n      />\n    );\n  },\n);\n\nexport type ColorPickerPopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\nexport const ColorPickerPopup = forwardRef<HTMLDivElement, ColorPickerPopupProps>(\n  function ColorPickerPopup({ className, ...props }, ref) {\n    return (\n      <BasePopover.Popup\n        {...props}\n        aria-label={props[\"aria-label\"] ?? \"Color picker\"}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().popup, className)}\n        data-jaci-component=\"color-picker\"\n        data-slot=\"color-picker-popup\"\n      />\n    );\n  },\n);\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction formatPalettePercentage(value: number) {\n  return `${Number(value.toFixed(2))}%`;\n}\n\nfunction hslToPalettePosition(color: ColorModel) {\n  const lightness = clamp(color.lightness / 100, 0, 1);\n  const saturation = clamp(color.saturation / 100, 0, 1);\n  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;\n  const value = lightness + chroma / 2;\n\n  return {\n    lightness: (1 - value) * 100,\n    saturation: value === 0 ? 0 : (chroma / value) * 100,\n  };\n}\n\nfunction palettePositionToHsl(\n  saturation: number,\n  lightness: number,\n  color: ColorModel,\n): ColorModel {\n  const hsvSaturation = clamp(saturation / 100, 0, 1);\n  const value = 1 - clamp(lightness / 100, 0, 1);\n  const hslLightness = value * (1 - hsvSaturation / 2);\n  const hslSaturation =\n    hslLightness === 0 || hslLightness === 1\n      ? 0\n      : ((value - hslLightness) / Math.min(hslLightness, 1 - hslLightness)) * 100;\n\n  return {\n    ...color,\n    lightness: hslLightness * 100,\n    saturation: clamp(hslSaturation, 0, 100),\n  };\n}\n\nfunction updateFromPoint(\n  event: PointerEvent<HTMLDivElement>,\n  setColor: (color: ColorModel) => void,\n  color: ColorModel,\n) {\n  const rect = event.currentTarget.getBoundingClientRect();\n  const saturation = Math.round(clamp((event.clientX - rect.left) / rect.width, 0, 1) * 100);\n  const lightness = Math.round(clamp((event.clientY - rect.top) / rect.height, 0, 1) * 100);\n  setColor(palettePositionToHsl(saturation, lightness, color));\n}\n\nexport type ColorPickerPaletteProps = Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">;\nexport const ColorPickerPalette = forwardRef<HTMLDivElement, ColorPickerPaletteProps>(\n  function ColorPickerPalette(\n    {\n      children,\n      className,\n      onKeyDown,\n      onPointerCancel,\n      onPointerDown,\n      onPointerMove,\n      onPointerUp,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const { color, disabled, setColor, value } = useColorPicker();\n    const [isDragging, setIsDragging] = useState(false);\n    const background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${color.hue} 100% 50%))`;\n    const palettePosition = hslToPalettePosition(color);\n    const paletteStyle = {\n      \"--jaci-color-palette-lightness\": formatPalettePercentage(palettePosition.lightness),\n      \"--jaci-color-palette-saturation\": formatPalettePercentage(palettePosition.saturation),\n      background,\n      ...style,\n    } as CSSProperties;\n\n    const releasePointer = (event: PointerEvent<HTMLDivElement>) => {\n      if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n        event.currentTarget.releasePointerCapture(event.pointerId);\n      }\n      setIsDragging(false);\n    };\n\n    return (\n      <div\n        {...props}\n        ref={ref}\n        aria-disabled={disabled || undefined}\n        aria-label={props[\"aria-label\"] ?? \"Color saturation and lightness\"}\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={Math.round(palettePosition.saturation)}\n        aria-valuetext={value}\n        className={cx(colorPicker().palette, className)}\n        data-disabled={disabled || undefined}\n        data-dragging={isDragging || undefined}\n        data-slot=\"color-picker-palette\"\n        onKeyDown={(event) => {\n          const step = event.shiftKey ? 10 : 1;\n          if (\n            event.key === \"ArrowLeft\" ||\n            event.key === \"ArrowRight\" ||\n            event.key === \"ArrowUp\" ||\n            event.key === \"ArrowDown\"\n          ) {\n            event.preventDefault();\n            const saturation =\n              event.key === \"ArrowLeft\"\n                ? Math.max(0, palettePosition.saturation - step)\n                : event.key === \"ArrowRight\"\n                  ? Math.min(100, palettePosition.saturation + step)\n                  : palettePosition.saturation;\n            const lightness =\n              event.key === \"ArrowDown\"\n                ? Math.min(100, palettePosition.lightness + step)\n                : event.key === \"ArrowUp\"\n                  ? Math.max(0, palettePosition.lightness - step)\n                  : palettePosition.lightness;\n            setColor(palettePositionToHsl(saturation, lightness, color));\n          }\n          onKeyDown?.(event);\n        }}\n        onPointerDown={(event) => {\n          if (!disabled) {\n            updateFromPoint(event, setColor, color);\n            setIsDragging(true);\n            try {\n              event.currentTarget.setPointerCapture(event.pointerId);\n            } catch {\n              // Pointer capture is not available in every test environment.\n            }\n          }\n          onPointerDown?.(event);\n        }}\n        onPointerMove={(event) => {\n          if (!disabled && isDragging) updateFromPoint(event, setColor, color);\n          onPointerMove?.(event);\n        }}\n        onPointerUp={(event) => {\n          releasePointer(event);\n          onPointerUp?.(event);\n        }}\n        onPointerCancel={(event) => {\n          releasePointer(event);\n          onPointerCancel?.(event);\n        }}\n        role=\"slider\"\n        style={paletteStyle}\n        tabIndex={props.tabIndex ?? (disabled ? -1 : 0)}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={colorPicker().paletteIndicator}\n          data-slot=\"color-picker-palette-indicator\"\n        />\n        {children}\n      </div>\n    );\n  },\n);\n\nexport type ColorPickerHueProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"max\" | \"min\" | \"onChange\" | \"step\" | \"type\" | \"value\"\n>;\nexport const ColorPickerHue = forwardRef<HTMLInputElement, ColorPickerHueProps>(\n  function ColorPickerHue({ className, onInput, ...props }, ref) {\n    const { color, setColor } = useColorPicker();\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Hue\"}\n        className={cx(colorPicker().hue, className)}\n        data-slot=\"color-picker-hue\"\n        max={360}\n        min={0}\n        onInput={(event) => {\n          setColor({ ...color, hue: Number(event.currentTarget.value) });\n          onInput?.(event);\n        }}\n        step={1}\n        type=\"range\"\n        value={color.hue}\n      />\n    );\n  },\n);\n\nexport type ColorPickerAlphaProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"max\" | \"min\" | \"onChange\" | \"step\" | \"type\" | \"value\"\n>;\nexport const ColorPickerAlpha = forwardRef<HTMLInputElement, ColorPickerAlphaProps>(\n  function ColorPickerAlpha({ className, onInput, style, ...props }, ref) {\n    const { color, setColor, showAlpha } = useColorPicker();\n    if (!showAlpha) return null;\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Opacity\"}\n        className={cx(colorPicker().alpha, className)}\n        data-slot=\"color-picker-alpha\"\n        max={1}\n        min={0}\n        onInput={(event) => {\n          setColor({ ...color, alpha: Number(event.currentTarget.value) });\n          onInput?.(event);\n        }}\n        step={0.01}\n        style={{\n          ...style,\n          background: `linear-gradient(to right, transparent, ${formatColor({ ...color, alpha: 1 }, \"rgb\")})`,\n        }}\n        type=\"range\"\n        value={color.alpha}\n      />\n    );\n  },\n);\n\nexport type ColorPickerSwatchesProps = ComponentPropsWithoutRef<\"fieldset\">;\nexport const ColorPickerSwatches = forwardRef<HTMLFieldSetElement, ColorPickerSwatchesProps>(\n  function ColorPickerSwatches({ children, className, ...props }, ref) {\n    const { swatches } = useColorPicker();\n    return (\n      <fieldset\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().swatches, className)}\n        data-slot=\"color-picker-swatches\"\n      >\n        {children ?? swatches.map((color) => <ColorPickerSwatch color={color} key={color} />)}\n      </fieldset>\n    );\n  },\n);\n\nexport interface ColorPickerSwatchProps extends ComponentPropsWithoutRef<\"button\"> {\n  color: string;\n}\nexport const ColorPickerSwatch = forwardRef<HTMLButtonElement, ColorPickerSwatchProps>(\n  function ColorPickerSwatch({ children, className, color, style, ...props }, ref) {\n    const context = useColorPicker();\n    const parsed = parseColor(color);\n    const selected =\n      parsed && formatColor(parsed, context.format, context.showAlpha) === context.value;\n    return (\n      <button\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? color}\n        aria-pressed={selected || undefined}\n        className={cx(colorPicker().swatch, className)}\n        data-selected={selected || undefined}\n        data-slot=\"color-picker-swatch\"\n        onClick={(event) => {\n          if (parsed) context.setColor(parsed);\n          props.onClick?.(event);\n        }}\n        style={{ backgroundColor: color, ...style }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nexport type ColorPickerInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"onChange\" | \"type\" | \"value\"\n>;\nexport const ColorPickerInput = forwardRef<HTMLInputElement, ColorPickerInputProps>(\n  function ColorPickerInput({ className, onBlur, onKeyDown, ...props }, ref) {\n    const { format, setColor, showAlpha, value } = useColorPicker();\n    const [draft, setDraft] = useState(value);\n    const [invalid, setInvalid] = useState(false);\n    useEffect(() => setDraft(value), [value]);\n    const commit = () => {\n      const parsed = parseColor(draft);\n      if (!parsed) {\n        setInvalid(true);\n        setDraft(value);\n        return;\n      }\n      setInvalid(false);\n      setColor(parsed);\n      setDraft(formatColor(parsed, format, showAlpha));\n    };\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Color value\"}\n        aria-invalid={invalid || undefined}\n        className={cx(colorPicker().input, className)}\n        data-slot=\"color-picker-input\"\n        onBlur={(event) => {\n          commit();\n          onBlur?.(event);\n        }}\n        onChange={(event) => {\n          setDraft(event.currentTarget.value);\n          setInvalid(false);\n        }}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            event.preventDefault();\n            commit();\n          }\n          onKeyDown?.(event);\n        }}\n        type=\"text\"\n        value={draft}\n      />\n    );\n  },\n);\n\nexport type ColorPickerNativeInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"onChange\" | \"type\" | \"value\"\n>;\nexport const ColorPickerNativeInput = forwardRef<HTMLInputElement, ColorPickerNativeInputProps>(\n  function ColorPickerNativeInput({ className, onInput, ...props }, ref) {\n    const { color, setColor, showAlpha } = useColorPicker();\n    const value = formatColor({ ...color, alpha: 1 }, \"hex\");\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Choose a color\"}\n        className={cx(colorPicker().nativeInput, className)}\n        data-slot=\"color-picker-native-input\"\n        onInput={(event) => {\n          const parsed = parseColor(event.currentTarget.value);\n          if (parsed) setColor({ ...parsed, alpha: showAlpha ? color.alpha : 1 });\n          onInput?.(event);\n        }}\n        type=\"color\"\n        value={value.slice(0, 7)}\n      />\n    );\n  },\n);\n\nexport const ColorPicker = {\n  Root: ColorPickerRoot,\n  Label: ColorPickerLabel,\n  Control: ColorPickerControl,\n  Trigger: ColorPickerTrigger,\n  Preview: ColorPickerPreview,\n  Value: ColorPickerValue,\n  Portal: ColorPickerPortal,\n  Positioner: ColorPickerPositioner,\n  Popup: ColorPickerPopup,\n  Palette: ColorPickerPalette,\n  Hue: ColorPickerHue,\n  Alpha: ColorPickerAlpha,\n  Swatches: ColorPickerSwatches,\n  Swatch: ColorPickerSwatch,\n  Input: ColorPickerInput,\n  NativeInput: ColorPickerNativeInput,\n  createHandle: BasePopover.createHandle,\n};\n"],"mappings":"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"}

package/dist/components/date-picker/date-picker.cjs

@@ -23,7 +23,7 @@ function composeRefs(first, second) {
 		else if (first) first.current = value;
 	};
 }
-function DatePickerRoot({ children, closeOnSelect = true, defaultValue = null, disabled = false, isDateDisabled, locale = "pt-BR", maxDate, minDate, name, onValueChange, onMonthChange, placeholder = "Select a date", size = "md", value: controlledValue, weekStartsOn = 0, actionsRef: externalActionsRef, ...popoverProps }) {
+function DatePickerRoot({ children, closeOnSelect: closeOnSelectProp, defaultValue = null, disabled = false, granularity = "day", isDateDisabled, locale = "pt-BR", maxDate, minDate, name, onValueChange, onMonthChange, placeholder = "Select a date", size = "md", value: controlledValue, weekStartsOn = 0, yearRange: configuredYearRange, actionsRef: externalActionsRef, ...popoverProps }) {
 	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue);
 	const selected = controlledValue === void 0 ? uncontrolledValue : controlledValue;
 	const [month, setMonthState] = (0, react.useState)(() => require_date_utils.startOfMonth(selected ?? /* @__PURE__ */ new Date()));
@@ -37,6 +37,29 @@ function DatePickerRoot({ children, closeOnSelect = true, defaultValue = null, d
 	const styles = require_date_picker.datePicker({ size });
 	const minMonth = minDate ? require_date_utils.startOfMonth(minDate) : void 0;
 	const maxMonth = maxDate ? require_date_utils.startOfMonth(maxDate) : void 0;
+	const closeOnSelect = closeOnSelectProp ?? granularity !== "date-time";
+	const yearRange = (0, react.useMemo)(() => {
+		const defaultStart = today.getFullYear() - 100;
+		const defaultEnd = today.getFullYear() + 20;
+		const start = configuredYearRange?.start ?? defaultStart;
+		const end = configuredYearRange?.end ?? defaultEnd;
+		const years = [
+			selected?.getFullYear(),
+			minDate?.getFullYear(),
+			maxDate?.getFullYear()
+		].filter((year) => year !== void 0);
+		return {
+			end: Math.max(start, end, ...years),
+			start: Math.min(start, end, ...years)
+		};
+	}, [
+		configuredYearRange?.end,
+		configuredYearRange?.start,
+		maxDate,
+		minDate,
+		selected,
+		today
+	]);
 	const clampMonth = (0, react.useCallback)((nextMonth) => {
 		const normalized = require_date_utils.startOfMonth(nextMonth);
 		if (minMonth && require_date_utils.isBeforeDay(normalized, minMonth)) return minMonth;
@@ -68,26 +91,102 @@ function DatePickerRoot({ children, closeOnSelect = true, defaultValue = null, d
 	const close = (0, react.useCallback)(() => {
 		(externalActionsRef ?? internalActionsRef).current?.close();
 	}, [externalActionsRef]);
-	const onSelect = (0, react.useCallback)((date) => {
-		if (disabled || dateDisabled(date)) return;
-		const nextValue = require_date_utils.createCalendarDate(date.getFullYear(), date.getMonth(), date.getDate());
+	const setValue = (0, react.useCallback)((nextValue) => {
 		setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue);
+	}, [onValueChange]);
+	const monthDisabled = (0, react.useCallback)((candidate) => {
+		const firstDay = require_date_utils.startOfMonth(candidate);
+		const lastDay = require_date_utils.createCalendarDate(candidate.getFullYear(), candidate.getMonth() + 1, 0);
+		return Boolean(minDate && require_date_utils.isBeforeDay(lastDay, minDate) || maxDate && require_date_utils.isAfterDay(firstDay, maxDate));
+	}, [maxDate, minDate]);
+	const onSelect = (0, react.useCallback)((date) => {
+		if (disabled || (granularity === "month" ? monthDisabled(date) : dateDisabled(date))) return;
+		const nextValue = require_date_utils.createCalendarDate(date.getFullYear(), date.getMonth(), granularity === "month" ? 1 : date.getDate());
+		if (granularity === "date-time") {
+			nextValue.setHours(selected?.getHours() ?? 12, selected?.getMinutes() ?? 0, 0, 0);
+			if (minDate && require_date_utils.isSameDay(nextValue, minDate) && nextValue < minDate) nextValue.setHours(minDate.getHours(), minDate.getMinutes(), 0, 0);
+			if (maxDate && require_date_utils.isSameDay(nextValue, maxDate) && nextValue > maxDate) nextValue.setHours(maxDate.getHours(), maxDate.getMinutes(), 0, 0);
+		}
+		setValue(nextValue);
 		setFocusedDate(nextValue);
 		setMonth(require_date_utils.startOfMonth(nextValue));
-		onValueChange?.(nextValue);
 		if (closeOnSelect) close();
 	}, [
 		close,
 		closeOnSelect,
 		dateDisabled,
 		disabled,
-		onValueChange,
-		setMonth
+		granularity,
+		maxDate,
+		monthDisabled,
+		minDate,
+		selected,
+		setMonth,
+		setValue
 	]);
 	const onClear = (0, react.useCallback)(() => {
-		setUncontrolledValue(null);
-		onValueChange?.(null);
-	}, [onValueChange]);
+		setValue(null);
+	}, [setValue]);
+	const selectMonth = (0, react.useCallback)((monthIndex) => {
+		const nextMonth = clampMonth(require_date_utils.createCalendarDate(month.getFullYear(), monthIndex, 1));
+		if (monthDisabled(nextMonth)) return;
+		setMonth(nextMonth);
+		if (granularity === "month") {
+			const nextValue = require_date_utils.createCalendarDate(nextMonth.getFullYear(), nextMonth.getMonth(), 1);
+			setFocusedDate(nextValue);
+			setValue(nextValue);
+			if (closeOnSelect) close();
+		}
+	}, [
+		clampMonth,
+		close,
+		closeOnSelect,
+		granularity,
+		month,
+		monthDisabled,
+		setMonth,
+		setValue
+	]);
+	const selectYear = (0, react.useCallback)((year) => {
+		const nextMonth = clampMonth(require_date_utils.createCalendarDate(year, month.getMonth(), 1));
+		if (monthDisabled(nextMonth)) return;
+		setMonth(nextMonth);
+		if (granularity === "month") {
+			const nextValue = require_date_utils.createCalendarDate(nextMonth.getFullYear(), nextMonth.getMonth(), 1);
+			setFocusedDate(nextValue);
+			setValue(nextValue);
+			if (closeOnSelect) close();
+		}
+	}, [
+		clampMonth,
+		close,
+		closeOnSelect,
+		granularity,
+		month,
+		monthDisabled,
+		setMonth,
+		setValue
+	]);
+	const onTimeChange = (0, react.useCallback)((value) => {
+		const match = value.match(/^(\d{2}):(\d{2})$/);
+		if (!match) return;
+		const hours = Number(match[1]);
+		const minutes = Number(match[2]);
+		if (hours > 23 || minutes > 59) return;
+		const baseDate = selected ?? focusedDate;
+		const nextValue = require_date_utils.createCalendarDate(baseDate.getFullYear(), baseDate.getMonth(), baseDate.getDate());
+		nextValue.setHours(hours, minutes, 0, 0);
+		if (minDate && require_date_utils.isSameDay(nextValue, minDate) && nextValue < minDate) return;
+		if (maxDate && require_date_utils.isSameDay(nextValue, maxDate) && nextValue > maxDate) return;
+		setValue(nextValue);
+	}, [
+		focusedDate,
+		maxDate,
+		minDate,
+		selected,
+		setValue
+	]);
 	const focusDate = (0, react.useCallback)((date, direction = 1) => {
 		let nextDate = require_date_utils.createCalendarDate(date.getFullYear(), date.getMonth(), date.getDate());
 		const step = direction < 0 ? -1 : 1;
@@ -102,39 +201,51 @@ function DatePickerRoot({ children, closeOnSelect = true, defaultValue = null, d
 		focusTarget();
 		queueMicrotask(focusTarget);
 	}, [dateDisabled, setMonth]);
+	const canNavigate = (0, react.useCallback)((amount) => {
+		const nextMonth = require_date_utils.addMonths(month, amount);
+		return !(minMonth && require_date_utils.isBeforeDay(nextMonth, minMonth) || maxMonth && require_date_utils.isAfterDay(nextMonth, maxMonth));
+	}, [
+		maxMonth,
+		minMonth,
+		month
+	]);
+	const registerDay = (0, react.useCallback)((key, node) => {
+		if (node) dayRefs.current.set(key, node);
+		else dayRefs.current.delete(key);
+	}, []);
+	const timeMin = selected && minDate && require_date_utils.isSameDay(selected, minDate) ? require_date_utils.toTimeInput(minDate) : void 0;
+	const timeMax = selected && maxDate && require_date_utils.isSameDay(selected, maxDate) ? require_date_utils.toTimeInput(maxDate) : void 0;
 	const context = {
-		canNavigate: (0, react.useCallback)((amount) => {
-			const nextMonth = require_date_utils.addMonths(month, amount);
-			return !(minMonth && require_date_utils.isBeforeDay(nextMonth, minMonth) || maxMonth && require_date_utils.isAfterDay(nextMonth, maxMonth));
-		}, [
-			maxMonth,
-			minMonth,
-			month
-		]),
+		canNavigate,
 		close,
 		dateDisabled,
+		granularity,
 		disabled,
 		focusDate,
 		focusedDate,
-		formatDate: (date) => require_date_utils.formatDateLabel(date, locale, String(placeholder)),
+		formatDate: (date) => require_date_utils.formatDateLabel(date, locale, String(placeholder), granularity),
 		labelId,
 		locale,
 		month,
+		monthDisabled,
 		onClear,
+		onTimeChange,
 		onSelect,
+		selectMonth,
+		selectYear,
 		placeholder,
-		registerDay: (0, react.useCallback)((key, node) => {
-			if (node) dayRefs.current.set(key, node);
-			else dayRefs.current.delete(key);
-		}, []),
+		registerDay,
 		selected,
 		setFocusedDate,
 		setMonth,
 		size,
 		styles,
 		today: require_date_utils.createCalendarDate(today.getFullYear(), today.getMonth(), today.getDate()),
+		timeMax,
+		timeMin,
 		triggerId,
-		weekStartsOn
+		weekStartsOn,
+		yearRange
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DatePickerContext.Provider, {
 		value: context,
@@ -146,7 +257,7 @@ function DatePickerRoot({ children, closeOnSelect = true, defaultValue = null, d
 			disabled,
 			name,
 			type: "hidden",
-			value: require_date_utils.toInputDate(selected)
+			value: granularity === "month" ? require_date_utils.toInputMonth(selected) : granularity === "date-time" ? require_date_utils.toInputDateTime(selected) : require_date_utils.toInputDate(selected)
 		}) : null]
 	});
 }
@@ -245,7 +356,7 @@ const DatePickerClose = (0, react.forwardRef)(function DatePickerClose({ classNa
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Close, {
 		...props,
 		ref,
-		className: require_base_ui.withRecipeClassName(styles.clear, className),
+		className: require_base_ui.withRecipeClassName(styles.close, className),
 		"data-slot": "date-picker-close"
 	});
 });
@@ -268,6 +379,59 @@ const DatePickerCaption = (0, react.forwardRef)(function DatePickerCaption({ chi
 		children: children ?? require_date_utils.formatMonthLabel(month, locale)
 	});
 });
+const DatePickerMonthSelect = (0, react.forwardRef)(function DatePickerMonthSelect({ className, ...props }, ref) {
+	const { locale, month, monthDisabled, selectMonth, styles } = useDatePickerContext();
+	const labels = require_date_utils.getMonthLabels(locale);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		...props,
+		"aria-label": props["aria-label"] ?? "Select month",
+		className: require_cx.cx(styles.monthSelect, className),
+		"data-slot": "date-picker-month-select",
+		onChange: (event) => selectMonth(Number(event.currentTarget.value)),
+		ref,
+		value: month.getMonth(),
+		children: labels.map((label, monthIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			disabled: monthDisabled(require_date_utils.createCalendarDate(month.getFullYear(), monthIndex, 1)),
+			value: monthIndex,
+			children: label
+		}, label))
+	});
+});
+const DatePickerYearSelect = (0, react.forwardRef)(function DatePickerYearSelect({ className, ...props }, ref) {
+	const { month, monthDisabled, selectYear, styles, yearRange } = useDatePickerContext();
+	const years = Array.from({ length: yearRange.end - yearRange.start + 1 }, (_, index) => yearRange.start + index);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		...props,
+		"aria-label": props["aria-label"] ?? "Select year",
+		className: require_cx.cx(styles.yearSelect, className),
+		"data-slot": "date-picker-year-select",
+		onChange: (event) => selectYear(Number(event.currentTarget.value)),
+		ref,
+		value: month.getFullYear(),
+		children: years.map((year) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			disabled: monthDisabled(require_date_utils.createCalendarDate(year, month.getMonth(), 1)),
+			value: year,
+			children: year
+		}, year))
+	});
+});
+const DatePickerTimeField = (0, react.forwardRef)(function DatePickerTimeField({ className, ...props }, ref) {
+	const { disabled, granularity, onTimeChange, selected, styles, timeMax, timeMin } = useDatePickerContext();
+	if (granularity !== "date-time") return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...props,
+		"aria-label": props["aria-label"] ?? "Select time",
+		className: require_cx.cx(styles.timeField, className),
+		"data-slot": "date-picker-time-field",
+		disabled: disabled || !selected,
+		max: timeMax,
+		min: timeMin,
+		onChange: (event) => onTimeChange(event.currentTarget.value),
+		ref,
+		type: "time",
+		value: require_date_utils.toTimeInput(selected)
+	});
+});
 const DatePickerNavigationButton = (0, react.forwardRef)(function DatePickerNavigationButton({ amount, children, className, onClick, ...props }, ref) {
 	const { canNavigate, month, setMonth, styles } = useDatePickerContext();
 	const direction = amount ?? 1;
@@ -380,17 +544,44 @@ const DatePickerDay = (0, react.forwardRef)(function DatePickerDay({ children, c
 		children: children ?? date.getDate()
 	});
 });
+const DatePickerMonthButton = (0, react.forwardRef)(function DatePickerMonthButton({ date }, ref) {
+	const { disabled, granularity, locale, monthDisabled, onSelect, selected, styles } = useDatePickerContext();
+	const isDisabled = disabled || monthDisabled(date);
+	const isSelected = granularity === "month" && Boolean(selected && isSameMonth(selected, date));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": new Intl.DateTimeFormat(locale, { month: "long" }).format(date),
+		"aria-selected": isSelected,
+		className: styles.month,
+		"data-disabled": isDisabled || void 0,
+		"data-selected": isSelected || void 0,
+		"data-slot": "date-picker-month",
+		disabled: isDisabled,
+		onClick: () => onSelect(date),
+		ref,
+		role: "gridcell",
+		type: "button",
+		children: new Intl.DateTimeFormat(locale, { month: "short" }).format(date)
+	});
+});
 const DatePickerCalendar = (0, react.forwardRef)(function DatePickerCalendar({ "aria-label": ariaLabel, className, ...props }, ref) {
-	const { locale, month, styles, weekStartsOn } = useDatePickerContext();
+	const { granularity, locale, month, styles, weekStartsOn } = useDatePickerContext();
 	const days = (0, react.useMemo)(() => require_date_utils.getCalendarDays(month, weekStartsOn), [month, weekStartsOn]);
 	const weekdays = (0, react.useMemo)(() => require_date_utils.getWeekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+	const monthDates = (0, react.useMemo)(() => Array.from({ length: 12 }, (_, index) => require_date_utils.createCalendarDate(month.getFullYear(), index, 1)), [month]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 		...props,
 		ref,
 		"aria-label": ariaLabel ?? require_date_utils.formatMonthLabel(month, locale),
 		className: require_cx.cx(styles.calendar, className),
+		"data-granularity": granularity,
 		"data-slot": "date-picker-calendar",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: granularity === "month" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-label": String(month.getFullYear()),
+			className: styles.monthGrid,
+			"data-slot": "date-picker-month-grid",
+			role: "grid",
+			children: monthDates.map((date) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerMonthButton, { date }, require_date_utils.dateKey(date)))
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"aria-hidden": "true",
 			className: styles.weekdays,
 			"data-slot": "date-picker-weekdays",
@@ -405,7 +596,7 @@ const DatePickerCalendar = (0, react.forwardRef)(function DatePickerCalendar({ "
 			"data-slot": "date-picker-grid",
 			role: "grid",
 			children: days.map((date) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerDay, { date }, require_date_utils.dateKey(date)))
-		})]
+		})] })
 	});
 });
 const DatePicker = {
@@ -421,6 +612,9 @@ const DatePicker = {
 	Close: DatePickerClose,
 	Header: DatePickerHeader,
 	Caption: DatePickerCaption,
+	MonthSelect: DatePickerMonthSelect,
+	YearSelect: DatePickerYearSelect,
+	TimeField: DatePickerTimeField,
 	Previous: DatePickerPrevious,
 	Next: DatePickerNext,
 	Day: DatePickerDay,
@@ -436,13 +630,16 @@ exports.DatePickerControl = DatePickerControl;
 exports.DatePickerDay = DatePickerDay;
 exports.DatePickerHeader = DatePickerHeader;
 exports.DatePickerLabel = DatePickerLabel;
+exports.DatePickerMonthSelect = DatePickerMonthSelect;
 exports.DatePickerNext = DatePickerNext;
 exports.DatePickerPopup = DatePickerPopup;
 exports.DatePickerPortal = DatePickerPortal;
 exports.DatePickerPositioner = DatePickerPositioner;
 exports.DatePickerPrevious = DatePickerPrevious;
 exports.DatePickerRoot = DatePickerRoot;
+exports.DatePickerTimeField = DatePickerTimeField;
 exports.DatePickerTrigger = DatePickerTrigger;
 exports.DatePickerValue = DatePickerValue;
+exports.DatePickerYearSelect = DatePickerYearSelect;
 
 //# sourceMappingURL=date-picker.cjs.map