npm - @yamada-ui/react - Versions diffs - 2.2.1-dev-20260427170308 → 2.2.1-dev-20260428074008 - Mend

@yamada-ui/react 2.2.1-dev-20260427170308 → 2.2.1-dev-20260428074008

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (219) hide show

package/dist/cjs/components/calendar/calendar.style.cjs CHANGED Viewed

@@ -81,7 +81,7 @@ const calendarStyle = require_config.defineComponentSlotStyle({
 		prev: {},
 		root: {
 			"--cell-gap": "spaces.1",
-			"--holiday-color": ["colors.red.500", "colors.red.400"],
+			"--holiday-color": ["colors.red.600", "colors.red.300"],
 			"--select-content-size": "auto",
 			"--select-font-size": "{font-size}",
 			"--select-root-size": "fit-content",

package/dist/cjs/components/calendar/calendar.style.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.style.cjs","names":["defineComponentSlotStyle","buttonStyle"],"sources":["../../../../src/components/calendar/calendar.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { buttonStyle } from \"../button\"\n\nexport const calendarStyle = defineComponentSlotStyle({\n base: {\n button: {\n ...buttonStyle.base,\n boxSize: \"{cell-size}\",\n color: \"colorScheme.outline\",\n _hover: { layerStyle: \"ghost.hover\" },\n },\n cell: {\n alignItems: \"center\",\n boxSize: \"{cell-size}\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n },\n control: {\n alignItems: \"center\",\n display: \"flex\",\n gap: \"{cell-gap}\",\n gridColumn: \"span 5\",\n justifyContent: \"center\",\n },\n day: {\n ...buttonStyle.base,\n \"&[data-between]\": {\n _first: { _before: { roundedLeft: \"{cell-rounded}\" } },\n _last: { _before: { roundedRight: \"{cell-rounded}\" } },\n _notLast: {\n _before: {\n me: \"calc({cell-gap} * -1)\",\n w: \"calc({cell-size} + {cell-gap})\",\n },\n },\n },\n \"&[data-between], &[data-end]:not(:first-of-type), &[data-start]:not(:last-of-type)\":\n {\n _before: {\n layerStyle: \"ghost.hover\",\n boxSize: \"{cell-size}\",\n position: \"absolute\",\n zIndex: \"-2\",\n },\n },\n \"&[data-end]:not(:first-of-type)::before\": {\n roundedRight: \"{cell-rounded}\",\n },\n \"&[data-holiday]:not([data-selected])\": { color: \"{holiday-color}\" },\n \"&[data-outside]:not([data-selected])\": { \"& > span\": { opacity: 0.4 } },\n \"&[data-start]:not(:last-of-type)::before\": {\n me: \"calc({cell-gap} * -1)\",\n roundedLeft: \"{cell-rounded}\",\n w: \"calc({cell-size} + {cell-gap})\",\n },\n \"&[data-today]:not([data-outside], [data-selected], [data-between])\": {\n layerStyle: \"ghost.hover\",\n },\n \"&[data-weekend]:not([data-selected])\": {\n color: \"{weekend-color}\",\n },\n borderColor: \"transparent\",\n fontWeight: \"normal\",\n overflow: \"inherit\",\n rounded: \"{cell-rounded}\",\n zIndex: \"0\",\n _hover: {\n \"&:not([data-selected], [data-today], [data-between])\": {\n layerStyle: \"ghost.hover\",\n },\n },\n _selected: {\n layerStyle: \"solid\",\n _after: {\n layerStyle: \"solid\",\n boxSize: \"{cell-size}\",\n position: \"absolute\",\n rounded: \"{cell-rounded}\",\n zIndex: \"-1\",\n },\n },\n },\n month: {\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"{cell-gap}\",\n outline: \"none\",\n },\n months: {},\n navigation: {},\n next: {},\n prev: {},\n root: {\n \"--cell-gap\": \"spaces.1\",\n \"--holiday-color\": [\"colors.red.~~500~~\", \"colors.red.~~400~~\"],\n \"--select-content-size\": \"auto\",\n \"--select-font-size\": \"{font-size}\",\n \"--select-root-size\": \"fit-content\",\n \"--weekend-color\": \"{holiday-color}\",\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n fontSize: \"{font-size}\",\n w: \"calc({cell-size} * 7 + {cell-gap} * 6)\",\n },\n row: {\n display: \"grid\",\n gap: \"{cell-gap}\",\n gridTemplateColumns: \"repeat(7, 1fr)\",\n },\n select: { minH: \"{cell-size}!\" },\n separator: { color: \"fg.muted\" },\n week: {},\n weekday: { color: \"fg.muted\", fontWeight: \"normal\" },\n weeks: {\n display: \"grid\",\n gap: \"{cell-gap}\",\n },\n years: {},\n },\n\n props: {\n /*\n If `true`, the calendar will be fixed rows.\n \n @default true\n /\n fixed: {\n true: {\n weeks: {\n gridTemplateRows: \"repeat(6, 1fr)\",\n },\n },\n },\n /\n The shape of the cell\n \n @default 'circle'\n */\n shape: {\n circle: {\n root: { \"--cell-rounded\": \"radii.full\" },\n },\n rounded: {\n root: { \"--cell-rounded\": \"radii.l2\" },\n },\n square: {\n root: { \"--cell-rounded\": \"0\" },\n },\n },\n },\n\n sizes: {\n xs: {\n root: { \"--cell-size\": \"sizes.8\", \"--font-size\": \"fontSizes.xs\" },\n },\n sm: {\n root: { \"--cell-size\": \"sizes.9\", \"--font-size\": \"fontSizes.sm\" },\n },\n md: {\n root: { \"--cell-size\": \"sizes.10\", \"--font-size\": \"fontSizes.md\" },\n },\n lg: {\n root: { \"--cell-size\": \"sizes.11\", \"--font-size\": \"fontSizes.lg\" },\n },\n xl: {\n root: { \"--cell-size\": \"sizes.12\", \"--font-size\": \"fontSizes.xl\" },\n },\n \"2xl\": {\n root: { \"--cell-size\": \"sizes.14\", \"--font-size\": \"fontSizes.xl\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n fixed: true,\n shape: \"rounded\",\n },\n})\n\nexport type CalendarStyle = typeof calendarStyle\n"],"mappings":";;;;;;AAGA,MAAa,gBAAgBA,wCAAyB;CACpD,MAAM;EACJ,QAAQ;GACN,GAAGC,iCAAY;GACf,SAAS;GACT,OAAO;GACP,QAAQ,EAAE,YAAY,eAAe;GACtC;EACD,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,SAAS;GACT,gBAAgB;GACjB;EACD,SAAS;GACP,YAAY;GACZ,SAAS;GACT,KAAK;GACL,YAAY;GACZ,gBAAgB;GACjB;EACD,KAAK;GACH,GAAGA,iCAAY;GACf,mBAAmB;IACjB,QAAQ,EAAE,SAAS,EAAE,aAAa,kBAAkB,EAAE;IACtD,OAAO,EAAE,SAAS,EAAE,cAAc,kBAAkB,EAAE;IACtD,UAAU,EACR,SAAS;KACP,IAAI;KACJ,GAAG;KACJ,EACF;IACF;GACD,sFACE,EACE,SAAS;IACP,YAAY;IACZ,SAAS;IACT,UAAU;IACV,QAAQ;IACT,EACF;GACH,2CAA2C,EACzC,cAAc,kBACf;GACD,wCAAwC,EAAE,OAAO,mBAAmB;GACpE,wCAAwC,EAAE,YAAY,EAAE,SAAS,IAAK,EAAE;GACxE,4CAA4C;IAC1C,IAAI;IACJ,aAAa;IACb,GAAG;IACJ;GACD,sEAAsE,EACpE,YAAY,eACb;GACD,wCAAwC,EACtC,OAAO,mBACR;GACD,aAAa;GACb,YAAY;GACZ,UAAU;GACV,SAAS;GACT,QAAQ;GACR,QAAQ,EACN,wDAAwD,EACtD,YAAY,eACb,EACF;GACD,WAAW;IACT,YAAY;IACZ,QAAQ;KACN,YAAY;KACZ,SAAS;KACT,UAAU;KACV,SAAS;KACT,QAAQ;KACT;IACF;GACF;EACD,OAAO;GACL,YAAY;GACZ,SAAS;GACT,eAAe;GACf,KAAK;GACL,SAAS;GACV;EACD,QAAQ,EAAE;EACV,YAAY,EAAE;EACd,MAAM,EAAE;EACR,MAAM,EAAE;EACR,MAAM;GACJ,cAAc;GACd,mBAAmB,CAAC,kBAAkB,iBAAiB;GACvD,yBAAyB;GACzB,sBAAsB;GACtB,sBAAsB;GACtB,mBAAmB;GACnB,YAAY;GACZ,SAAS;GACT,eAAe;GACf,UAAU;GACV,GAAG;GACJ;EACD,KAAK;GACH,SAAS;GACT,KAAK;GACL,qBAAqB;GACtB;EACD,QAAQ,EAAE,MAAM,gBAAgB;EAChC,WAAW,EAAE,OAAO,YAAY;EAChC,MAAM,EAAE;EACR,SAAS;GAAE,OAAO;GAAY,YAAY;GAAU;EACpD,OAAO;GACL,SAAS;GACT,KAAK;GACN;EACD,OAAO,EAAE;EACV;CAED,OAAO;EAML,OAAO,EACL,MAAM,EACJ,OAAO,EACL,kBAAkB,kBACnB,EACF,EACF;EAMD,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,kBAAkB,cAAc,EACzC;GACD,SAAS,EACP,MAAM,EAAE,kBAAkB,YAAY,EACvC;GACD,QAAQ,EACN,MAAM,EAAE,kBAAkB,KAAK,EAChC;GACF;EACF;CAED,OAAO;EACL,IAAI,EACF,MAAM;GAAE,eAAe;GAAW,eAAe;GAAgB,EAClE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAW,eAAe;GAAgB,EAClE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,OAAO,EACL,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACF;CAED,cAAc;EACZ,MAAM;EACN,OAAO;EACP,OAAO;EACR;CACF,CAAC"}
1	+ {"version":3,"file":"calendar.style.cjs","names":["defineComponentSlotStyle","buttonStyle"],"sources":["../../../../src/components/calendar/calendar.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { buttonStyle } from \"../button\"\n\nexport const calendarStyle = defineComponentSlotStyle({\n base: {\n button: {\n ...buttonStyle.base,\n boxSize: \"{cell-size}\",\n color: \"colorScheme.outline\",\n _hover: { layerStyle: \"ghost.hover\" },\n },\n cell: {\n alignItems: \"center\",\n boxSize: \"{cell-size}\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n },\n control: {\n alignItems: \"center\",\n display: \"flex\",\n gap: \"{cell-gap}\",\n gridColumn: \"span 5\",\n justifyContent: \"center\",\n },\n day: {\n ...buttonStyle.base,\n \"&[data-between]\": {\n _first: { _before: { roundedLeft: \"{cell-rounded}\" } },\n _last: { _before: { roundedRight: \"{cell-rounded}\" } },\n _notLast: {\n _before: {\n me: \"calc({cell-gap} * -1)\",\n w: \"calc({cell-size} + {cell-gap})\",\n },\n },\n },\n \"&[data-between], &[data-end]:not(:first-of-type), &[data-start]:not(:last-of-type)\":\n {\n _before: {\n layerStyle: \"ghost.hover\",\n boxSize: \"{cell-size}\",\n position: \"absolute\",\n zIndex: \"-2\",\n },\n },\n \"&[data-end]:not(:first-of-type)::before\": {\n roundedRight: \"{cell-rounded}\",\n },\n \"&[data-holiday]:not([data-selected])\": { color: \"{holiday-color}\" },\n \"&[data-outside]:not([data-selected])\": { \"& > span\": { opacity: 0.4 } },\n \"&[data-start]:not(:last-of-type)::before\": {\n me: \"calc({cell-gap} * -1)\",\n roundedLeft: \"{cell-rounded}\",\n w: \"calc({cell-size} + {cell-gap})\",\n },\n \"&[data-today]:not([data-outside], [data-selected], [data-between])\": {\n layerStyle: \"ghost.hover\",\n },\n \"&[data-weekend]:not([data-selected])\": {\n color: \"{weekend-color}\",\n },\n borderColor: \"transparent\",\n fontWeight: \"normal\",\n overflow: \"inherit\",\n rounded: \"{cell-rounded}\",\n zIndex: \"0\",\n _hover: {\n \"&:not([data-selected], [data-today], [data-between])\": {\n layerStyle: \"ghost.hover\",\n },\n },\n _selected: {\n layerStyle: \"solid\",\n _after: {\n layerStyle: \"solid\",\n boxSize: \"{cell-size}\",\n position: \"absolute\",\n rounded: \"{cell-rounded}\",\n zIndex: \"-1\",\n },\n },\n },\n month: {\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"{cell-gap}\",\n outline: \"none\",\n },\n months: {},\n navigation: {},\n next: {},\n prev: {},\n root: {\n \"--cell-gap\": \"spaces.1\",\n \"--holiday-color\": [\"colors.red.600\", \"colors.red.300\"],\n \"--select-content-size\": \"auto\",\n \"--select-font-size\": \"{font-size}\",\n \"--select-root-size\": \"fit-content\",\n \"--weekend-color\": \"{holiday-color}\",\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n fontSize: \"{font-size}\",\n w: \"calc({cell-size} * 7 + {cell-gap} * 6)\",\n },\n row: {\n display: \"grid\",\n gap: \"{cell-gap}\",\n gridTemplateColumns: \"repeat(7, 1fr)\",\n },\n select: { minH: \"{cell-size}!\" },\n separator: { color: \"fg.muted\" },\n week: {},\n weekday: { color: \"fg.muted\", fontWeight: \"normal\" },\n weeks: {\n display: \"grid\",\n gap: \"{cell-gap}\",\n },\n years: {},\n },\n\n props: {\n /*\n If `true`, the calendar will be fixed rows.\n \n @default true\n /\n fixed: {\n true: {\n weeks: {\n gridTemplateRows: \"repeat(6, 1fr)\",\n },\n },\n },\n /\n The shape of the cell\n \n @default 'circle'\n */\n shape: {\n circle: {\n root: { \"--cell-rounded\": \"radii.full\" },\n },\n rounded: {\n root: { \"--cell-rounded\": \"radii.l2\" },\n },\n square: {\n root: { \"--cell-rounded\": \"0\" },\n },\n },\n },\n\n sizes: {\n xs: {\n root: { \"--cell-size\": \"sizes.8\", \"--font-size\": \"fontSizes.xs\" },\n },\n sm: {\n root: { \"--cell-size\": \"sizes.9\", \"--font-size\": \"fontSizes.sm\" },\n },\n md: {\n root: { \"--cell-size\": \"sizes.10\", \"--font-size\": \"fontSizes.md\" },\n },\n lg: {\n root: { \"--cell-size\": \"sizes.11\", \"--font-size\": \"fontSizes.lg\" },\n },\n xl: {\n root: { \"--cell-size\": \"sizes.12\", \"--font-size\": \"fontSizes.xl\" },\n },\n \"2xl\": {\n root: { \"--cell-size\": \"sizes.14\", \"--font-size\": \"fontSizes.xl\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n fixed: true,\n shape: \"rounded\",\n },\n})\n\nexport type CalendarStyle = typeof calendarStyle\n"],"mappings":";;;;;;AAGA,MAAa,gBAAgBA,wCAAyB;CACpD,MAAM;EACJ,QAAQ;GACN,GAAGC,iCAAY;GACf,SAAS;GACT,OAAO;GACP,QAAQ,EAAE,YAAY,eAAe;GACtC;EACD,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,SAAS;GACT,gBAAgB;GACjB;EACD,SAAS;GACP,YAAY;GACZ,SAAS;GACT,KAAK;GACL,YAAY;GACZ,gBAAgB;GACjB;EACD,KAAK;GACH,GAAGA,iCAAY;GACf,mBAAmB;IACjB,QAAQ,EAAE,SAAS,EAAE,aAAa,kBAAkB,EAAE;IACtD,OAAO,EAAE,SAAS,EAAE,cAAc,kBAAkB,EAAE;IACtD,UAAU,EACR,SAAS;KACP,IAAI;KACJ,GAAG;KACJ,EACF;IACF;GACD,sFACE,EACE,SAAS;IACP,YAAY;IACZ,SAAS;IACT,UAAU;IACV,QAAQ;IACT,EACF;GACH,2CAA2C,EACzC,cAAc,kBACf;GACD,wCAAwC,EAAE,OAAO,mBAAmB;GACpE,wCAAwC,EAAE,YAAY,EAAE,SAAS,IAAK,EAAE;GACxE,4CAA4C;IAC1C,IAAI;IACJ,aAAa;IACb,GAAG;IACJ;GACD,sEAAsE,EACpE,YAAY,eACb;GACD,wCAAwC,EACtC,OAAO,mBACR;GACD,aAAa;GACb,YAAY;GACZ,UAAU;GACV,SAAS;GACT,QAAQ;GACR,QAAQ,EACN,wDAAwD,EACtD,YAAY,eACb,EACF;GACD,WAAW;IACT,YAAY;IACZ,QAAQ;KACN,YAAY;KACZ,SAAS;KACT,UAAU;KACV,SAAS;KACT,QAAQ;KACT;IACF;GACF;EACD,OAAO;GACL,YAAY;GACZ,SAAS;GACT,eAAe;GACf,KAAK;GACL,SAAS;GACV;EACD,QAAQ,EAAE;EACV,YAAY,EAAE;EACd,MAAM,EAAE;EACR,MAAM,EAAE;EACR,MAAM;GACJ,cAAc;GACd,mBAAmB,CAAC,kBAAkB,iBAAiB;GACvD,yBAAyB;GACzB,sBAAsB;GACtB,sBAAsB;GACtB,mBAAmB;GACnB,YAAY;GACZ,SAAS;GACT,eAAe;GACf,UAAU;GACV,GAAG;GACJ;EACD,KAAK;GACH,SAAS;GACT,KAAK;GACL,qBAAqB;GACtB;EACD,QAAQ,EAAE,MAAM,gBAAgB;EAChC,WAAW,EAAE,OAAO,YAAY;EAChC,MAAM,EAAE;EACR,SAAS;GAAE,OAAO;GAAY,YAAY;GAAU;EACpD,OAAO;GACL,SAAS;GACT,KAAK;GACN;EACD,OAAO,EAAE;EACV;CAED,OAAO;EAML,OAAO,EACL,MAAM,EACJ,OAAO,EACL,kBAAkB,kBACnB,EACF,EACF;EAMD,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,kBAAkB,cAAc,EACzC;GACD,SAAS,EACP,MAAM,EAAE,kBAAkB,YAAY,EACvC;GACD,QAAQ,EACN,MAAM,EAAE,kBAAkB,KAAK,EAChC;GACF;EACF;CAED,OAAO;EACL,IAAI,EACF,MAAM;GAAE,eAAe;GAAW,eAAe;GAAgB,EAClE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAW,eAAe;GAAgB,EAClE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,OAAO,EACL,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACF;CAED,cAAc;EACZ,MAAM;EACN,OAAO;EACP,OAAO;EACR;CACF,CAAC"}

package/dist/cjs/components/color-selector/use-color-selector.cjs CHANGED Viewed

@@ -4,6 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_dom = require('../../utils/dom.cjs');
 const require_effect = require('../../utils/effect.cjs');
 const require_utils_index = require('../../utils/index.cjs');
+const require_props = require('../../core/components/props.cjs');
+require('../../core/index.cjs');
 const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
 const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
 require('../../providers/i18n-provider/index.cjs');
@@ -92,12 +94,10 @@ const useColorSelector = ({ fallbackValue = "#FFFFFF", defaultValue = fallbackVa
 		if (activeRef.current) return;
 		if (valueProp) setHsva((0, require_utils_index.utils_exports.parseToHsv)(valueProp, fallbackValue));
 	}, [valueProp]);
-	const getRootProps = (0, react.useCallback)((props = {}) => ({
+	const getRootProps = (0, react.useCallback)((props = {}) => require_props.mergeProps({
 		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
-		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
-		...rest,
-		...props
-	}), [
+		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly)
+	}, rest, props)(), [
 		disabled,
 		readOnly,
 		rest

package/dist/cjs/components/color-selector/use-color-selector.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-color-selector.cjs","names":["useI18n","useControllableState","useEyeDropper","value","h","s","v","a","getRootProps: PropGetter","getSaturationSliderProps: PropGetter<UseSaturationSliderProps>","getHueSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">\n >","getAlphaSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">,\n undefined,\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\"> & { color: string }\n >","getEyeDropperProps: PropGetter","runKeyAction"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n calcFormat,\n convertColor,\n cx,\n dataAttr,\n handlerAll,\n hsvTo,\n isString,\n parseToHsv,\n runKeyAction,\n sameColor,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n /*\n The initial value of the color selector.\n \n @default fallbackValue\n /\n defaultValue?: string\n /\n If `true`, the color selector will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The fallback value of the color selector.\n \n @default '#FFFFFF'\n /\n fallbackValue?: string\n /\n The format of the color selector.\n * Automatically determines the format of `value` or `defaultValue`.\n \n @default 'hex'\n /\n format?: ColorFormat\n /\n If `true`, the color selector will be read only.\n \n @default false\n /\n readOnly?: boolean\n /\n The value of the color selector.\n /\n value?: string\n /\n The callback invoked when the value changes.\n /\n onChange?: (value: string) => void\n /\n The callback invoked when the value changes ends.\n /\n onChangeEnd?: (value: string) => void\n /\n The callback invoked when the value changes starts.\n */\n onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n fallbackValue = \"#FFFFFF\",\n defaultValue = fallbackValue,\n disabled = false,\n format: formatProp,\n readOnly = false,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd: onChangeEndProp,\n onChangeStart: onChangeStartProp,\n ...rest\n}: UseColorSelectorProps) => {\n const { t } = useI18n(\"colorSelector\")\n const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n const alpha = format.endsWith(\"a\")\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n const [h, s, v, a] = hsva\n const interactive = !(disabled \|\| readOnly)\n const swatchGroupLabelId = useId()\n const activeRef = useRef(false)\n const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n useEyeDropper()\n const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n const onChange = useCallback(\n (value: Hsva \| string) => {\n if (!interactive) return\n\n if (isString(value)) {\n setValue(convertColor(value, fallbackValue)(format))\n setHsva(parseToHsv(value, fallbackValue))\n } else {\n setHsva(value)\n setValue(hsvTo(value, fallbackValue)(format))\n }\n },\n [fallbackValue, format, interactive, setValue],\n )\n\n const onChangeStart = useCallback(\n ([h, s, v, a]: Hsva) => {\n if (!interactive) return\n\n activeRef.current = true\n\n const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n onChangeStartProp?.(value)\n },\n [interactive, fallbackValue, format, onChangeStartProp],\n )\n\n const onChangeEnd = useCallback(\n ([h, s, v, a]: Hsva) => {\n if (!interactive) return\n\n activeRef.current = false\n\n const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n onChangeEndProp?.(value)\n },\n [interactive, fallbackValue, format, onChangeEndProp],\n )\n\n const onEyeDropperClick = useCallback(async () => {\n if (!interactive) return\n\n const result = await onOpenEyeDropper()\n\n if (result?.sRGBHex) onChange(result.sRGBHex)\n }, [interactive, onChange, onOpenEyeDropper])\n\n useUpdateEffect(() => {\n if (activeRef.current) return\n\n if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n }, [valueProp])\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n ...rest,\n ...props,\n }),\n [disabled, readOnly, rest],\n )\n\n const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n useCallback(\n (props = {}) => ({\n disabled,\n readOnly,\n value: [h, s, v],\n ...props,\n onChange: handlerAll(props.onChange, ([h, s, v]) =>\n onChange([h, s, v, a]),\n ),\n onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n )\n\n const getHueSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">\n > = useCallback(\n (props = {}) => ({\n disabled,\n readOnly,\n value: h,\n ...props,\n onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, (h) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n )\n\n const getAlphaSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">,\n undefined,\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\"> & { color: string }\n > = useCallback(\n (props = {}) => ({\n color,\n disabled,\n readOnly,\n value: a,\n ...props,\n onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, (a) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [\n color,\n disabled,\n readOnly,\n a,\n onChange,\n h,\n s,\n v,\n onChangeEnd,\n onChangeStart,\n ],\n )\n\n const getEyeDropperProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Pick a color\"),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n hidden: !supportedEyeDropper,\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: onEyeDropperClick,\n Space: onEyeDropperClick,\n }),\n ),\n }),\n [\n disabled,\n interactive,\n onEyeDropperClick,\n readOnly,\n supportedEyeDropper,\n t,\n ],\n )\n\n const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n (props) => ({\n id: swatchGroupLabelId,\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n ...props,\n }),\n [swatchGroupLabelId, disabled, readOnly],\n )\n\n const getColorSwatchGroupProps: PropGetter = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"listbox\",\n ...props,\n }),\n [swatchGroupLabelId, disabled, readOnly],\n )\n\n const getColorSwatchItemProps: RequiredPropGetter<\n \"div\",\n { value: string },\n HTMLProps & { color: string }\n > = useCallback(\n ({ value, ...props }) => ({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-selected\": sameColor(value, color),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"option\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n color: value,\n onClick: handlerAll(props.onClick, () => onChange(value)),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: () => onChange(value),\n Space: () => onChange(value),\n }),\n ),\n }),\n [disabled, color, interactive, onChange, readOnly],\n )\n\n return {\n alpha,\n format,\n setValue,\n value,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getRootProps,\n getSaturationSliderProps,\n onChange,\n }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-color-selector.cjs","names":["useI18n","useControllableState","useEyeDropper","value","h","s","v","a","getRootProps: PropGetter","mergeProps","getSaturationSliderProps: PropGetter<UseSaturationSliderProps>","getHueSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">\n >","getAlphaSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">,\n undefined,\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\"> & { color: string }\n >","getEyeDropperProps: PropGetter","runKeyAction"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n calcFormat,\n convertColor,\n cx,\n dataAttr,\n handlerAll,\n hsvTo,\n isString,\n parseToHsv,\n runKeyAction,\n sameColor,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n /*\n The initial value of the color selector.\n \n @default fallbackValue\n /\n defaultValue?: string\n /\n If `true`, the color selector will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The fallback value of the color selector.\n \n @default '#FFFFFF'\n /\n fallbackValue?: string\n /\n The format of the color selector.\n * Automatically determines the format of `value` or `defaultValue`.\n \n @default 'hex'\n /\n format?: ColorFormat\n /\n If `true`, the color selector will be read only.\n \n @default false\n /\n readOnly?: boolean\n /\n The value of the color selector.\n /\n value?: string\n /\n The callback invoked when the value changes.\n /\n onChange?: (value: string) => void\n /\n The callback invoked when the value changes ends.\n /\n onChangeEnd?: (value: string) => void\n /\n The callback invoked when the value changes starts.\n */\n onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n fallbackValue = \"#FFFFFF\",\n defaultValue = fallbackValue,\n disabled = false,\n format: formatProp,\n readOnly = false,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd: onChangeEndProp,\n onChangeStart: onChangeStartProp,\n ...rest\n}: UseColorSelectorProps) => {\n const { t } = useI18n(\"colorSelector\")\n const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n const alpha = format.endsWith(\"a\")\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n const [h, s, v, a] = hsva\n const interactive = !(disabled \|\| readOnly)\n const swatchGroupLabelId = useId()\n const activeRef = useRef(false)\n const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n useEyeDropper()\n const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n const onChange = useCallback(\n (value: Hsva \| string) => {\n if (!interactive) return\n\n if (isString(value)) {\n setValue(convertColor(value, fallbackValue)(format))\n setHsva(parseToHsv(value, fallbackValue))\n } else {\n setHsva(value)\n setValue(hsvTo(value, fallbackValue)(format))\n }\n },\n [fallbackValue, format, interactive, setValue],\n )\n\n const onChangeStart = useCallback(\n ([h, s, v, a]: Hsva) => {\n if (!interactive) return\n\n activeRef.current = true\n\n const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n onChangeStartProp?.(value)\n },\n [interactive, fallbackValue, format, onChangeStartProp],\n )\n\n const onChangeEnd = useCallback(\n ([h, s, v, a]: Hsva) => {\n if (!interactive) return\n\n activeRef.current = false\n\n const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n onChangeEndProp?.(value)\n },\n [interactive, fallbackValue, format, onChangeEndProp],\n )\n\n const onEyeDropperClick = useCallback(async () => {\n if (!interactive) return\n\n const result = await onOpenEyeDropper()\n\n if (result?.sRGBHex) onChange(result.sRGBHex)\n }, [interactive, onChange, onOpenEyeDropper])\n\n useUpdateEffect(() => {\n if (activeRef.current) return\n\n if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n }, [valueProp])\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(\n {\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n },\n rest,\n props,\n )(),\n [disabled, readOnly, rest],\n )\n\n const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n useCallback(\n (props = {}) => ({\n disabled,\n readOnly,\n value: [h, s, v],\n ...props,\n onChange: handlerAll(props.onChange, ([h, s, v]) =>\n onChange([h, s, v, a]),\n ),\n onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n )\n\n const getHueSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">\n > = useCallback(\n (props = {}) => ({\n disabled,\n readOnly,\n value: h,\n ...props,\n onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, (h) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n )\n\n const getAlphaSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">,\n undefined,\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\"> & { color: string }\n > = useCallback(\n (props = {}) => ({\n color,\n disabled,\n readOnly,\n value: a,\n ...props,\n onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, (a) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [\n color,\n disabled,\n readOnly,\n a,\n onChange,\n h,\n s,\n v,\n onChangeEnd,\n onChangeStart,\n ],\n )\n\n const getEyeDropperProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Pick a color\"),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n hidden: !supportedEyeDropper,\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: onEyeDropperClick,\n Space: onEyeDropperClick,\n }),\n ),\n }),\n [\n disabled,\n interactive,\n onEyeDropperClick,\n readOnly,\n supportedEyeDropper,\n t,\n ],\n )\n\n const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n (props) => ({\n id: swatchGroupLabelId,\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n ...props,\n }),\n [swatchGroupLabelId, disabled, readOnly],\n )\n\n const getColorSwatchGroupProps: PropGetter = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"listbox\",\n ...props,\n }),\n [swatchGroupLabelId, disabled, readOnly],\n )\n\n const getColorSwatchItemProps: RequiredPropGetter<\n \"div\",\n { value: string },\n HTMLProps & { color: string }\n > = useCallback(\n ({ value, ...props }) => ({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-selected\": sameColor(value, color),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"option\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n color: value,\n onClick: handlerAll(props.onClick, () => onChange(value)),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: () => onChange(value),\n Space: () => onChange(value),\n }),\n ),\n }),\n [disabled, color, interactive, onChange, readOnly],\n )\n\n return {\n alpha,\n format,\n setValue,\n value,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getRootProps,\n getSaturationSliderProps,\n onChange,\n }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}

package/dist/esm/components/calendar/calendar.style.js CHANGED Viewed

@@ -81,7 +81,7 @@ const calendarStyle = defineComponentSlotStyle({
 		prev: {},
 		root: {
 			"--cell-gap": "spaces.1",
-			"--holiday-color": ["colors.red.500", "colors.red.400"],
+			"--holiday-color": ["colors.red.600", "colors.red.300"],
 			"--select-content-size": "auto",
 			"--select-font-size": "{font-size}",
 			"--select-root-size": "fit-content",

package/dist/esm/components/calendar/calendar.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.style.js","names":[],"sources":["../../../../src/components/calendar/calendar.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { buttonStyle } from \"../button\"\n\nexport const calendarStyle = defineComponentSlotStyle({\n base: {\n button: {\n ...buttonStyle.base,\n boxSize: \"{cell-size}\",\n color: \"colorScheme.outline\",\n _hover: { layerStyle: \"ghost.hover\" },\n },\n cell: {\n alignItems: \"center\",\n boxSize: \"{cell-size}\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n },\n control: {\n alignItems: \"center\",\n display: \"flex\",\n gap: \"{cell-gap}\",\n gridColumn: \"span 5\",\n justifyContent: \"center\",\n },\n day: {\n ...buttonStyle.base,\n \"&[data-between]\": {\n _first: { _before: { roundedLeft: \"{cell-rounded}\" } },\n _last: { _before: { roundedRight: \"{cell-rounded}\" } },\n _notLast: {\n _before: {\n me: \"calc({cell-gap} * -1)\",\n w: \"calc({cell-size} + {cell-gap})\",\n },\n },\n },\n \"&[data-between], &[data-end]:not(:first-of-type), &[data-start]:not(:last-of-type)\":\n {\n _before: {\n layerStyle: \"ghost.hover\",\n boxSize: \"{cell-size}\",\n position: \"absolute\",\n zIndex: \"-2\",\n },\n },\n \"&[data-end]:not(:first-of-type)::before\": {\n roundedRight: \"{cell-rounded}\",\n },\n \"&[data-holiday]:not([data-selected])\": { color: \"{holiday-color}\" },\n \"&[data-outside]:not([data-selected])\": { \"& > span\": { opacity: 0.4 } },\n \"&[data-start]:not(:last-of-type)::before\": {\n me: \"calc({cell-gap} * -1)\",\n roundedLeft: \"{cell-rounded}\",\n w: \"calc({cell-size} + {cell-gap})\",\n },\n \"&[data-today]:not([data-outside], [data-selected], [data-between])\": {\n layerStyle: \"ghost.hover\",\n },\n \"&[data-weekend]:not([data-selected])\": {\n color: \"{weekend-color}\",\n },\n borderColor: \"transparent\",\n fontWeight: \"normal\",\n overflow: \"inherit\",\n rounded: \"{cell-rounded}\",\n zIndex: \"0\",\n _hover: {\n \"&:not([data-selected], [data-today], [data-between])\": {\n layerStyle: \"ghost.hover\",\n },\n },\n _selected: {\n layerStyle: \"solid\",\n _after: {\n layerStyle: \"solid\",\n boxSize: \"{cell-size}\",\n position: \"absolute\",\n rounded: \"{cell-rounded}\",\n zIndex: \"-1\",\n },\n },\n },\n month: {\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"{cell-gap}\",\n outline: \"none\",\n },\n months: {},\n navigation: {},\n next: {},\n prev: {},\n root: {\n \"--cell-gap\": \"spaces.1\",\n \"--holiday-color\": [\"colors.red.~~500~~\", \"colors.red.~~400~~\"],\n \"--select-content-size\": \"auto\",\n \"--select-font-size\": \"{font-size}\",\n \"--select-root-size\": \"fit-content\",\n \"--weekend-color\": \"{holiday-color}\",\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n fontSize: \"{font-size}\",\n w: \"calc({cell-size} * 7 + {cell-gap} * 6)\",\n },\n row: {\n display: \"grid\",\n gap: \"{cell-gap}\",\n gridTemplateColumns: \"repeat(7, 1fr)\",\n },\n select: { minH: \"{cell-size}!\" },\n separator: { color: \"fg.muted\" },\n week: {},\n weekday: { color: \"fg.muted\", fontWeight: \"normal\" },\n weeks: {\n display: \"grid\",\n gap: \"{cell-gap}\",\n },\n years: {},\n },\n\n props: {\n /*\n If `true`, the calendar will be fixed rows.\n \n @default true\n /\n fixed: {\n true: {\n weeks: {\n gridTemplateRows: \"repeat(6, 1fr)\",\n },\n },\n },\n /\n The shape of the cell\n \n @default 'circle'\n */\n shape: {\n circle: {\n root: { \"--cell-rounded\": \"radii.full\" },\n },\n rounded: {\n root: { \"--cell-rounded\": \"radii.l2\" },\n },\n square: {\n root: { \"--cell-rounded\": \"0\" },\n },\n },\n },\n\n sizes: {\n xs: {\n root: { \"--cell-size\": \"sizes.8\", \"--font-size\": \"fontSizes.xs\" },\n },\n sm: {\n root: { \"--cell-size\": \"sizes.9\", \"--font-size\": \"fontSizes.sm\" },\n },\n md: {\n root: { \"--cell-size\": \"sizes.10\", \"--font-size\": \"fontSizes.md\" },\n },\n lg: {\n root: { \"--cell-size\": \"sizes.11\", \"--font-size\": \"fontSizes.lg\" },\n },\n xl: {\n root: { \"--cell-size\": \"sizes.12\", \"--font-size\": \"fontSizes.xl\" },\n },\n \"2xl\": {\n root: { \"--cell-size\": \"sizes.14\", \"--font-size\": \"fontSizes.xl\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n fixed: true,\n shape: \"rounded\",\n },\n})\n\nexport type CalendarStyle = typeof calendarStyle\n"],"mappings":";;;;;;AAGA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,QAAQ;GACN,GAAG,YAAY;GACf,SAAS;GACT,OAAO;GACP,QAAQ,EAAE,YAAY,eAAe;GACtC;EACD,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,SAAS;GACT,gBAAgB;GACjB;EACD,SAAS;GACP,YAAY;GACZ,SAAS;GACT,KAAK;GACL,YAAY;GACZ,gBAAgB;GACjB;EACD,KAAK;GACH,GAAG,YAAY;GACf,mBAAmB;IACjB,QAAQ,EAAE,SAAS,EAAE,aAAa,kBAAkB,EAAE;IACtD,OAAO,EAAE,SAAS,EAAE,cAAc,kBAAkB,EAAE;IACtD,UAAU,EACR,SAAS;KACP,IAAI;KACJ,GAAG;KACJ,EACF;IACF;GACD,sFACE,EACE,SAAS;IACP,YAAY;IACZ,SAAS;IACT,UAAU;IACV,QAAQ;IACT,EACF;GACH,2CAA2C,EACzC,cAAc,kBACf;GACD,wCAAwC,EAAE,OAAO,mBAAmB;GACpE,wCAAwC,EAAE,YAAY,EAAE,SAAS,IAAK,EAAE;GACxE,4CAA4C;IAC1C,IAAI;IACJ,aAAa;IACb,GAAG;IACJ;GACD,sEAAsE,EACpE,YAAY,eACb;GACD,wCAAwC,EACtC,OAAO,mBACR;GACD,aAAa;GACb,YAAY;GACZ,UAAU;GACV,SAAS;GACT,QAAQ;GACR,QAAQ,EACN,wDAAwD,EACtD,YAAY,eACb,EACF;GACD,WAAW;IACT,YAAY;IACZ,QAAQ;KACN,YAAY;KACZ,SAAS;KACT,UAAU;KACV,SAAS;KACT,QAAQ;KACT;IACF;GACF;EACD,OAAO;GACL,YAAY;GACZ,SAAS;GACT,eAAe;GACf,KAAK;GACL,SAAS;GACV;EACD,QAAQ,EAAE;EACV,YAAY,EAAE;EACd,MAAM,EAAE;EACR,MAAM,EAAE;EACR,MAAM;GACJ,cAAc;GACd,mBAAmB,CAAC,kBAAkB,iBAAiB;GACvD,yBAAyB;GACzB,sBAAsB;GACtB,sBAAsB;GACtB,mBAAmB;GACnB,YAAY;GACZ,SAAS;GACT,eAAe;GACf,UAAU;GACV,GAAG;GACJ;EACD,KAAK;GACH,SAAS;GACT,KAAK;GACL,qBAAqB;GACtB;EACD,QAAQ,EAAE,MAAM,gBAAgB;EAChC,WAAW,EAAE,OAAO,YAAY;EAChC,MAAM,EAAE;EACR,SAAS;GAAE,OAAO;GAAY,YAAY;GAAU;EACpD,OAAO;GACL,SAAS;GACT,KAAK;GACN;EACD,OAAO,EAAE;EACV;CAED,OAAO;EAML,OAAO,EACL,MAAM,EACJ,OAAO,EACL,kBAAkB,kBACnB,EACF,EACF;EAMD,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,kBAAkB,cAAc,EACzC;GACD,SAAS,EACP,MAAM,EAAE,kBAAkB,YAAY,EACvC;GACD,QAAQ,EACN,MAAM,EAAE,kBAAkB,KAAK,EAChC;GACF;EACF;CAED,OAAO;EACL,IAAI,EACF,MAAM;GAAE,eAAe;GAAW,eAAe;GAAgB,EAClE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAW,eAAe;GAAgB,EAClE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,OAAO,EACL,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACF;CAED,cAAc;EACZ,MAAM;EACN,OAAO;EACP,OAAO;EACR;CACF,CAAC"}
1	+ {"version":3,"file":"calendar.style.js","names":[],"sources":["../../../../src/components/calendar/calendar.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { buttonStyle } from \"../button\"\n\nexport const calendarStyle = defineComponentSlotStyle({\n base: {\n button: {\n ...buttonStyle.base,\n boxSize: \"{cell-size}\",\n color: \"colorScheme.outline\",\n _hover: { layerStyle: \"ghost.hover\" },\n },\n cell: {\n alignItems: \"center\",\n boxSize: \"{cell-size}\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n },\n control: {\n alignItems: \"center\",\n display: \"flex\",\n gap: \"{cell-gap}\",\n gridColumn: \"span 5\",\n justifyContent: \"center\",\n },\n day: {\n ...buttonStyle.base,\n \"&[data-between]\": {\n _first: { _before: { roundedLeft: \"{cell-rounded}\" } },\n _last: { _before: { roundedRight: \"{cell-rounded}\" } },\n _notLast: {\n _before: {\n me: \"calc({cell-gap} * -1)\",\n w: \"calc({cell-size} + {cell-gap})\",\n },\n },\n },\n \"&[data-between], &[data-end]:not(:first-of-type), &[data-start]:not(:last-of-type)\":\n {\n _before: {\n layerStyle: \"ghost.hover\",\n boxSize: \"{cell-size}\",\n position: \"absolute\",\n zIndex: \"-2\",\n },\n },\n \"&[data-end]:not(:first-of-type)::before\": {\n roundedRight: \"{cell-rounded}\",\n },\n \"&[data-holiday]:not([data-selected])\": { color: \"{holiday-color}\" },\n \"&[data-outside]:not([data-selected])\": { \"& > span\": { opacity: 0.4 } },\n \"&[data-start]:not(:last-of-type)::before\": {\n me: \"calc({cell-gap} * -1)\",\n roundedLeft: \"{cell-rounded}\",\n w: \"calc({cell-size} + {cell-gap})\",\n },\n \"&[data-today]:not([data-outside], [data-selected], [data-between])\": {\n layerStyle: \"ghost.hover\",\n },\n \"&[data-weekend]:not([data-selected])\": {\n color: \"{weekend-color}\",\n },\n borderColor: \"transparent\",\n fontWeight: \"normal\",\n overflow: \"inherit\",\n rounded: \"{cell-rounded}\",\n zIndex: \"0\",\n _hover: {\n \"&:not([data-selected], [data-today], [data-between])\": {\n layerStyle: \"ghost.hover\",\n },\n },\n _selected: {\n layerStyle: \"solid\",\n _after: {\n layerStyle: \"solid\",\n boxSize: \"{cell-size}\",\n position: \"absolute\",\n rounded: \"{cell-rounded}\",\n zIndex: \"-1\",\n },\n },\n },\n month: {\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"{cell-gap}\",\n outline: \"none\",\n },\n months: {},\n navigation: {},\n next: {},\n prev: {},\n root: {\n \"--cell-gap\": \"spaces.1\",\n \"--holiday-color\": [\"colors.red.600\", \"colors.red.300\"],\n \"--select-content-size\": \"auto\",\n \"--select-font-size\": \"{font-size}\",\n \"--select-root-size\": \"fit-content\",\n \"--weekend-color\": \"{holiday-color}\",\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n fontSize: \"{font-size}\",\n w: \"calc({cell-size} * 7 + {cell-gap} * 6)\",\n },\n row: {\n display: \"grid\",\n gap: \"{cell-gap}\",\n gridTemplateColumns: \"repeat(7, 1fr)\",\n },\n select: { minH: \"{cell-size}!\" },\n separator: { color: \"fg.muted\" },\n week: {},\n weekday: { color: \"fg.muted\", fontWeight: \"normal\" },\n weeks: {\n display: \"grid\",\n gap: \"{cell-gap}\",\n },\n years: {},\n },\n\n props: {\n /*\n If `true`, the calendar will be fixed rows.\n \n @default true\n /\n fixed: {\n true: {\n weeks: {\n gridTemplateRows: \"repeat(6, 1fr)\",\n },\n },\n },\n /\n The shape of the cell\n \n @default 'circle'\n */\n shape: {\n circle: {\n root: { \"--cell-rounded\": \"radii.full\" },\n },\n rounded: {\n root: { \"--cell-rounded\": \"radii.l2\" },\n },\n square: {\n root: { \"--cell-rounded\": \"0\" },\n },\n },\n },\n\n sizes: {\n xs: {\n root: { \"--cell-size\": \"sizes.8\", \"--font-size\": \"fontSizes.xs\" },\n },\n sm: {\n root: { \"--cell-size\": \"sizes.9\", \"--font-size\": \"fontSizes.sm\" },\n },\n md: {\n root: { \"--cell-size\": \"sizes.10\", \"--font-size\": \"fontSizes.md\" },\n },\n lg: {\n root: { \"--cell-size\": \"sizes.11\", \"--font-size\": \"fontSizes.lg\" },\n },\n xl: {\n root: { \"--cell-size\": \"sizes.12\", \"--font-size\": \"fontSizes.xl\" },\n },\n \"2xl\": {\n root: { \"--cell-size\": \"sizes.14\", \"--font-size\": \"fontSizes.xl\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n fixed: true,\n shape: \"rounded\",\n },\n})\n\nexport type CalendarStyle = typeof calendarStyle\n"],"mappings":";;;;;;AAGA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,QAAQ;GACN,GAAG,YAAY;GACf,SAAS;GACT,OAAO;GACP,QAAQ,EAAE,YAAY,eAAe;GACtC;EACD,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,SAAS;GACT,gBAAgB;GACjB;EACD,SAAS;GACP,YAAY;GACZ,SAAS;GACT,KAAK;GACL,YAAY;GACZ,gBAAgB;GACjB;EACD,KAAK;GACH,GAAG,YAAY;GACf,mBAAmB;IACjB,QAAQ,EAAE,SAAS,EAAE,aAAa,kBAAkB,EAAE;IACtD,OAAO,EAAE,SAAS,EAAE,cAAc,kBAAkB,EAAE;IACtD,UAAU,EACR,SAAS;KACP,IAAI;KACJ,GAAG;KACJ,EACF;IACF;GACD,sFACE,EACE,SAAS;IACP,YAAY;IACZ,SAAS;IACT,UAAU;IACV,QAAQ;IACT,EACF;GACH,2CAA2C,EACzC,cAAc,kBACf;GACD,wCAAwC,EAAE,OAAO,mBAAmB;GACpE,wCAAwC,EAAE,YAAY,EAAE,SAAS,IAAK,EAAE;GACxE,4CAA4C;IAC1C,IAAI;IACJ,aAAa;IACb,GAAG;IACJ;GACD,sEAAsE,EACpE,YAAY,eACb;GACD,wCAAwC,EACtC,OAAO,mBACR;GACD,aAAa;GACb,YAAY;GACZ,UAAU;GACV,SAAS;GACT,QAAQ;GACR,QAAQ,EACN,wDAAwD,EACtD,YAAY,eACb,EACF;GACD,WAAW;IACT,YAAY;IACZ,QAAQ;KACN,YAAY;KACZ,SAAS;KACT,UAAU;KACV,SAAS;KACT,QAAQ;KACT;IACF;GACF;EACD,OAAO;GACL,YAAY;GACZ,SAAS;GACT,eAAe;GACf,KAAK;GACL,SAAS;GACV;EACD,QAAQ,EAAE;EACV,YAAY,EAAE;EACd,MAAM,EAAE;EACR,MAAM,EAAE;EACR,MAAM;GACJ,cAAc;GACd,mBAAmB,CAAC,kBAAkB,iBAAiB;GACvD,yBAAyB;GACzB,sBAAsB;GACtB,sBAAsB;GACtB,mBAAmB;GACnB,YAAY;GACZ,SAAS;GACT,eAAe;GACf,UAAU;GACV,GAAG;GACJ;EACD,KAAK;GACH,SAAS;GACT,KAAK;GACL,qBAAqB;GACtB;EACD,QAAQ,EAAE,MAAM,gBAAgB;EAChC,WAAW,EAAE,OAAO,YAAY;EAChC,MAAM,EAAE;EACR,SAAS;GAAE,OAAO;GAAY,YAAY;GAAU;EACpD,OAAO;GACL,SAAS;GACT,KAAK;GACN;EACD,OAAO,EAAE;EACV;CAED,OAAO;EAML,OAAO,EACL,MAAM,EACJ,OAAO,EACL,kBAAkB,kBACnB,EACF,EACF;EAMD,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,kBAAkB,cAAc,EACzC;GACD,SAAS,EACP,MAAM,EAAE,kBAAkB,YAAY,EACvC;GACD,QAAQ,EACN,MAAM,EAAE,kBAAkB,KAAK,EAChC;GACF;EACF;CAED,OAAO;EACL,IAAI,EACF,MAAM;GAAE,eAAe;GAAW,eAAe;GAAgB,EAClE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAW,eAAe;GAAgB,EAClE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,IAAI,EACF,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACD,OAAO,EACL,MAAM;GAAE,eAAe;GAAY,eAAe;GAAgB,EACnE;EACF;CAED,cAAc;EACZ,MAAM;EACN,OAAO;EACP,OAAO;EACR;CACF,CAAC"}

package/dist/esm/components/color-selector/use-color-selector.js CHANGED Viewed

@@ -3,6 +3,8 @@
 import { runKeyAction } from "../../utils/dom.js";
 import { useUpdateEffect } from "../../utils/effect.js";
 import { utils_exports } from "../../utils/index.js";
+import { mergeProps } from "../../core/components/props.js";
+import "../../core/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
 import "../../providers/i18n-provider/index.js";
@@ -91,12 +93,10 @@ const useColorSelector = ({ fallbackValue = "#FFFFFF", defaultValue = fallbackVa
 		if (activeRef.current) return;
 		if (valueProp) setHsva((0, utils_exports.parseToHsv)(valueProp, fallbackValue));
 	}, [valueProp]);
-	const getRootProps = useCallback((props = {}) => ({
+	const getRootProps = useCallback((props = {}) => mergeProps({
 		"data-disabled": (0, utils_exports.dataAttr)(disabled),
-		"data-readonly": (0, utils_exports.dataAttr)(readOnly),
-		...rest,
-		...props
-	}), [
+		"data-readonly": (0, utils_exports.dataAttr)(readOnly)
+	}, rest, props)(), [
 		disabled,
 		readOnly,
 		rest

package/dist/esm/components/color-selector/use-color-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-color-selector.js","names":["value","h","s","v","a","getRootProps: PropGetter","getSaturationSliderProps: PropGetter<UseSaturationSliderProps>","getHueSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">\n >","getAlphaSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">,\n undefined,\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\"> & { color: string }\n >","getEyeDropperProps: PropGetter"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n calcFormat,\n convertColor,\n cx,\n dataAttr,\n handlerAll,\n hsvTo,\n isString,\n parseToHsv,\n runKeyAction,\n sameColor,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n /*\n The initial value of the color selector.\n \n @default fallbackValue\n /\n defaultValue?: string\n /\n If `true`, the color selector will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The fallback value of the color selector.\n \n @default '#FFFFFF'\n /\n fallbackValue?: string\n /\n The format of the color selector.\n * Automatically determines the format of `value` or `defaultValue`.\n \n @default 'hex'\n /\n format?: ColorFormat\n /\n If `true`, the color selector will be read only.\n \n @default false\n /\n readOnly?: boolean\n /\n The value of the color selector.\n /\n value?: string\n /\n The callback invoked when the value changes.\n /\n onChange?: (value: string) => void\n /\n The callback invoked when the value changes ends.\n /\n onChangeEnd?: (value: string) => void\n /\n The callback invoked when the value changes starts.\n */\n onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n fallbackValue = \"#FFFFFF\",\n defaultValue = fallbackValue,\n disabled = false,\n format: formatProp,\n readOnly = false,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd: onChangeEndProp,\n onChangeStart: onChangeStartProp,\n ...rest\n}: UseColorSelectorProps) => {\n const { t } = useI18n(\"colorSelector\")\n const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n const alpha = format.endsWith(\"a\")\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n const [h, s, v, a] = hsva\n const interactive = !(disabled \|\| readOnly)\n const swatchGroupLabelId = useId()\n const activeRef = useRef(false)\n const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n useEyeDropper()\n const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n const onChange = useCallback(\n (value: Hsva \| string) => {\n if (!interactive) return\n\n if (isString(value)) {\n setValue(convertColor(value, fallbackValue)(format))\n setHsva(parseToHsv(value, fallbackValue))\n } else {\n setHsva(value)\n setValue(hsvTo(value, fallbackValue)(format))\n }\n },\n [fallbackValue, format, interactive, setValue],\n )\n\n const onChangeStart = useCallback(\n ([h, s, v, a]: Hsva) => {\n if (!interactive) return\n\n activeRef.current = true\n\n const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n onChangeStartProp?.(value)\n },\n [interactive, fallbackValue, format, onChangeStartProp],\n )\n\n const onChangeEnd = useCallback(\n ([h, s, v, a]: Hsva) => {\n if (!interactive) return\n\n activeRef.current = false\n\n const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n onChangeEndProp?.(value)\n },\n [interactive, fallbackValue, format, onChangeEndProp],\n )\n\n const onEyeDropperClick = useCallback(async () => {\n if (!interactive) return\n\n const result = await onOpenEyeDropper()\n\n if (result?.sRGBHex) onChange(result.sRGBHex)\n }, [interactive, onChange, onOpenEyeDropper])\n\n useUpdateEffect(() => {\n if (activeRef.current) return\n\n if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n }, [valueProp])\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n ...rest,\n ...props,\n }),\n [disabled, readOnly, rest],\n )\n\n const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n useCallback(\n (props = {}) => ({\n disabled,\n readOnly,\n value: [h, s, v],\n ...props,\n onChange: handlerAll(props.onChange, ([h, s, v]) =>\n onChange([h, s, v, a]),\n ),\n onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n )\n\n const getHueSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">\n > = useCallback(\n (props = {}) => ({\n disabled,\n readOnly,\n value: h,\n ...props,\n onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, (h) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n )\n\n const getAlphaSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">,\n undefined,\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\"> & { color: string }\n > = useCallback(\n (props = {}) => ({\n color,\n disabled,\n readOnly,\n value: a,\n ...props,\n onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, (a) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [\n color,\n disabled,\n readOnly,\n a,\n onChange,\n h,\n s,\n v,\n onChangeEnd,\n onChangeStart,\n ],\n )\n\n const getEyeDropperProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Pick a color\"),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n hidden: !supportedEyeDropper,\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: onEyeDropperClick,\n Space: onEyeDropperClick,\n }),\n ),\n }),\n [\n disabled,\n interactive,\n onEyeDropperClick,\n readOnly,\n supportedEyeDropper,\n t,\n ],\n )\n\n const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n (props) => ({\n id: swatchGroupLabelId,\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n ...props,\n }),\n [swatchGroupLabelId, disabled, readOnly],\n )\n\n const getColorSwatchGroupProps: PropGetter = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"listbox\",\n ...props,\n }),\n [swatchGroupLabelId, disabled, readOnly],\n )\n\n const getColorSwatchItemProps: RequiredPropGetter<\n \"div\",\n { value: string },\n HTMLProps & { color: string }\n > = useCallback(\n ({ value, ...props }) => ({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-selected\": sameColor(value, color),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"option\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n color: value,\n onClick: handlerAll(props.onClick, () => onChange(value)),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: () => onChange(value),\n Space: () => onChange(value),\n }),\n ),\n }),\n [disabled, color, interactive, onChange, readOnly],\n )\n\n return {\n alpha,\n format,\n setValue,\n value,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getRootProps,\n getSaturationSliderProps,\n onChange,\n }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-color-selector.js","names":["value","h","s","v","a","getRootProps: PropGetter","getSaturationSliderProps: PropGetter<UseSaturationSliderProps>","getHueSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">\n >","getAlphaSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">,\n undefined,\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\"> & { color: string }\n >","getEyeDropperProps: PropGetter"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n calcFormat,\n convertColor,\n cx,\n dataAttr,\n handlerAll,\n hsvTo,\n isString,\n parseToHsv,\n runKeyAction,\n sameColor,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n /*\n The initial value of the color selector.\n \n @default fallbackValue\n /\n defaultValue?: string\n /\n If `true`, the color selector will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The fallback value of the color selector.\n \n @default '#FFFFFF'\n /\n fallbackValue?: string\n /\n The format of the color selector.\n * Automatically determines the format of `value` or `defaultValue`.\n \n @default 'hex'\n /\n format?: ColorFormat\n /\n If `true`, the color selector will be read only.\n \n @default false\n /\n readOnly?: boolean\n /\n The value of the color selector.\n /\n value?: string\n /\n The callback invoked when the value changes.\n /\n onChange?: (value: string) => void\n /\n The callback invoked when the value changes ends.\n /\n onChangeEnd?: (value: string) => void\n /\n The callback invoked when the value changes starts.\n */\n onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n fallbackValue = \"#FFFFFF\",\n defaultValue = fallbackValue,\n disabled = false,\n format: formatProp,\n readOnly = false,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd: onChangeEndProp,\n onChangeStart: onChangeStartProp,\n ...rest\n}: UseColorSelectorProps) => {\n const { t } = useI18n(\"colorSelector\")\n const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n const alpha = format.endsWith(\"a\")\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n const [h, s, v, a] = hsva\n const interactive = !(disabled \|\| readOnly)\n const swatchGroupLabelId = useId()\n const activeRef = useRef(false)\n const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n useEyeDropper()\n const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n const onChange = useCallback(\n (value: Hsva \| string) => {\n if (!interactive) return\n\n if (isString(value)) {\n setValue(convertColor(value, fallbackValue)(format))\n setHsva(parseToHsv(value, fallbackValue))\n } else {\n setHsva(value)\n setValue(hsvTo(value, fallbackValue)(format))\n }\n },\n [fallbackValue, format, interactive, setValue],\n )\n\n const onChangeStart = useCallback(\n ([h, s, v, a]: Hsva) => {\n if (!interactive) return\n\n activeRef.current = true\n\n const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n onChangeStartProp?.(value)\n },\n [interactive, fallbackValue, format, onChangeStartProp],\n )\n\n const onChangeEnd = useCallback(\n ([h, s, v, a]: Hsva) => {\n if (!interactive) return\n\n activeRef.current = false\n\n const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n onChangeEndProp?.(value)\n },\n [interactive, fallbackValue, format, onChangeEndProp],\n )\n\n const onEyeDropperClick = useCallback(async () => {\n if (!interactive) return\n\n const result = await onOpenEyeDropper()\n\n if (result?.sRGBHex) onChange(result.sRGBHex)\n }, [interactive, onChange, onOpenEyeDropper])\n\n useUpdateEffect(() => {\n if (activeRef.current) return\n\n if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n }, [valueProp])\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(\n {\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n },\n rest,\n props,\n )(),\n [disabled, readOnly, rest],\n )\n\n const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n useCallback(\n (props = {}) => ({\n disabled,\n readOnly,\n value: [h, s, v],\n ...props,\n onChange: handlerAll(props.onChange, ([h, s, v]) =>\n onChange([h, s, v, a]),\n ),\n onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n )\n\n const getHueSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">\n > = useCallback(\n (props = {}) => ({\n disabled,\n readOnly,\n value: h,\n ...props,\n onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, (h) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n )\n\n const getAlphaSliderProps: PropGetter<\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\">,\n undefined,\n Omit<UseSliderProps, \"betweenThumbs\" \| \"orientation\"> & { color: string }\n > = useCallback(\n (props = {}) => ({\n color,\n disabled,\n readOnly,\n value: a,\n ...props,\n onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n onChangeEnd([h, s, v, a]),\n ),\n onChangeStart: handlerAll(props.onChangeStart, (a) =>\n onChangeStart([h, s, v, a]),\n ),\n }),\n [\n color,\n disabled,\n readOnly,\n a,\n onChange,\n h,\n s,\n v,\n onChangeEnd,\n onChangeStart,\n ],\n )\n\n const getEyeDropperProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Pick a color\"),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n hidden: !supportedEyeDropper,\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: onEyeDropperClick,\n Space: onEyeDropperClick,\n }),\n ),\n }),\n [\n disabled,\n interactive,\n onEyeDropperClick,\n readOnly,\n supportedEyeDropper,\n t,\n ],\n )\n\n const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n (props) => ({\n id: swatchGroupLabelId,\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n ...props,\n }),\n [swatchGroupLabelId, disabled, readOnly],\n )\n\n const getColorSwatchGroupProps: PropGetter = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"listbox\",\n ...props,\n }),\n [swatchGroupLabelId, disabled, readOnly],\n )\n\n const getColorSwatchItemProps: RequiredPropGetter<\n \"div\",\n { value: string },\n HTMLProps & { color: string }\n > = useCallback(\n ({ value, ...props }) => ({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-selected\": sameColor(value, color),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"option\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n color: value,\n onClick: handlerAll(props.onClick, () => onChange(value)),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: () => onChange(value),\n Space: () => onChange(value),\n }),\n ),\n }),\n [disabled, color, interactive, onChange, readOnly],\n )\n\n return {\n alpha,\n format,\n setValue,\n value,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getRootProps,\n getSaturationSliderProps,\n onChange,\n }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}

package/dist/types/components/accordion/accordion.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react1186 from "react";
+import * as react977 from "react";
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react1186.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react977.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/accordion.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 //#region src/components/accordion/accordion.style.d.ts
-declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
+declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
   panel: {
     button: {
       rounded: "l2";

package/dist/types/components/accordion/use-accordion.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react1174 from "react";
+import * as react965 from "react";
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react1174.Context<{
+declare const AccordionDescendantsContext: react965.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react1174.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1174.RefCallback<HTMLButtonElement>;
+    } | undefined) => react965.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react1174.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react1174.RefCallback<HTMLButtonElement>;
+      } | undefined) => react965.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react1174.RefCallback<HTMLButtonElement>;
+    register: react965.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react1174.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1174.RefCallback<HTMLButtonElement>;
+    } | undefined) => react965.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react1174.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react965.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react1174.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react965.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1174.RefCallback<HTMLButtonElement>;
+    } | undefined) => react965.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react1174.Dispatch<react1174.SetStateAction<number>>;
-  setIndex: react1174.Dispatch<react1174.SetStateAction<number | number[]>>;
+  setFocusedIndex: react965.Dispatch<react965.SetStateAction<number>>;
+  setIndex: react965.Dispatch<react965.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/action-bar/action-bar.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import { UsePopupAnimationProps } from "../popover/popover.js";
 import "../popover/index.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react1173 from "react";
+import * as react964 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 //#region src/components/action-bar/action-bar.d.ts
@@ -29,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react1173.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react964.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
 /**
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
  *

package/dist/types/components/airy/airy.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { HTMLMotionProps } from "../motion/index.types.js";
 import "../motion/index.js";
 import { AiryStyle } from "./airy.style.js";
 import "../../index.js";
-import * as react1194 from "react";
+import * as react962 from "react";
 import { ReactNode } from "react";
 //#region src/components/airy/airy.d.ts
@@ -57,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react1194.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react962.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
 /**
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
  *

package/dist/types/components/alert/alert.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
 import "../status/index.js";
 import "../../index.js";
-import * as react1172 from "react";
+import * as react963 from "react";
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -20,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react1172.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react963.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

package/dist/types/components/alert/alert.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 //#region src/components/alert/alert.style.d.ts
-declare const alertStyle: ComponentSlotStyle<"title" | "icon" | "loading" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "icon" | "loading" | "description" | "root">>, CSSModifierObject<CSSSlotObject<"title" | "icon" | "loading" | "description" | "root">>, {
+declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, {
   island: {
     description: {
       color: "fg.muted";

package/dist/types/components/alpha-slider/alpha-slider.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../hue-slider/index.js";
 import "../../index.js";
-import * as react1171 from "react";
+import * as react961 from "react";
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react1171.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react961.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
 /**
  * `AlphaSlider` is a component used to allow the user to select color transparency.
  *

package/dist/types/components/aspect-ratio/aspect-ratio.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react1192 from "react";
+import * as react960 from "react";
 //#region src/components/aspect-ratio/aspect-ratio.d.ts
 interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
    */
   ratio?: StyleValue<number>;
 }
-declare const AspectRatioPropsContext: react1192.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react960.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

package/dist/types/components/autocomplete/autocomplete.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
 import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react1164 from "react";
+import * as react953 from "react";
 import { ReactElement, ReactNode } from "react";
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -68,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react1164.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react953.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

package/dist/types/components/autocomplete/autocomplete.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "indicator" | "root" | "field" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "indicator" | "root" | "field" | "empty" | "valueText">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText" | "empty">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/autocomplete/use-autocomplete.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import "../field/index.js";
 import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react1165 from "react";
+import * as react954 from "react";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -28,7 +28,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react1165.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react954.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -156,7 +156,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react1165.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react954.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -166,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react1165.Dispatch<react1165.SetStateAction<string>>;
-  setValue: react1165.Dispatch<react1165.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react954.Dispatch<react954.SetStateAction<string>>;
+  setValue: react954.Dispatch<react954.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;