@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

package/dist/cjs/components/segmented-control/segmented-control.style.cjs

@@ -0,0 +1,138 @@
+const require_core_css_focus_ring = require('../../core/css/focus-ring.cjs');
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/segmented-control/segmented-control.style.ts
+const segmentedControlStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		item: {
+			"&:has(input:focus-visible)": { ...require_core_css_focus_ring.focusRingStyle.outline },
+			alignItems: "center",
+			color: "fg",
+			cursor: "pointer",
+			display: "inline-flex",
+			flex: "1 1 0%",
+			fontWeight: "medium",
+			justifyContent: "center",
+			position: "relative",
+			rounded: "md",
+			transitionDuration: "moderate",
+			transitionProperty: "color, opacity",
+			whiteSpace: "nowrap",
+			_checked: { anchorName: "--checked" },
+			_readOnly: {
+				layerStyle: "readOnly",
+				pointerEvents: "none"
+			},
+			_disabled: {
+				layerStyle: "disabled",
+				"&[data-root-disabled]": { opacity: 1 }
+			}
+		},
+		root: {
+			alignItems: "center",
+			anchorScope: "--checked",
+			bg: ["bg.ghost", "bg.subtle"],
+			display: "inline-flex",
+			p: "1",
+			rounded: "lg",
+			_before: {
+				bg: "bg.panel",
+				boxShadow: "xs",
+				h: "anchor-size(--checked height)",
+				left: "anchor(--checked left)",
+				pointerEvents: "none",
+				position: "absolute",
+				rounded: "md",
+				top: "anchor(--checked top)",
+				transitionDuration: "moderate",
+				transitionProperty: "top, left, width",
+				w: "anchor-size(--checked width)"
+			},
+			_dark: { _before: { bg: "bg.muted" } },
+			_readOnly: { layerStyle: "readOnly" },
+			_disabled: { layerStyle: "disabled" }
+		}
+	},
+	props: {
+		fullRounded: { true: {
+			item: { rounded: "full" },
+			root: {
+				rounded: "full",
+				_before: { rounded: "full" }
+			}
+		} },
+		orientation: {
+			horizontal: {
+				item: { h: "full" },
+				root: { flexDirection: "row" }
+			},
+			vertical: {
+				item: { w: "full" },
+				root: { flexDirection: "column" }
+			}
+		}
+	},
+	sizes: {
+		sm: {
+			item: {
+				fontSize: "sm",
+				px: "3",
+				_vertical: { minH: "7" }
+			},
+			root: { _horizontal: {
+				h: "9",
+				minW: "64"
+			} }
+		},
+		md: {
+			item: {
+				fontSize: "md",
+				px: "3",
+				_vertical: { minH: "8" }
+			},
+			root: {
+				_horizontal: {
+					h: "10",
+					minW: "80"
+				},
+				_vertical: {}
+			}
+		},
+		lg: {
+			item: {
+				fontSize: "lg",
+				px: "4",
+				_vertical: { minH: "9" }
+			},
+			root: {
+				_horizontal: {
+					h: "11",
+					minW: "96"
+				},
+				_vertical: {}
+			}
+		},
+		xl: {
+			item: {
+				fontSize: "xl",
+				px: "5",
+				_vertical: { minH: "10" }
+			},
+			root: {
+				_horizontal: {
+					h: "12",
+					minW: "96"
+				},
+				_vertical: {}
+			}
+		}
+	},
+	defaultProps: {
+		size: "md",
+		orientation: "horizontal"
+	}
+});
+
+//#endregion
+exports.segmentedControlStyle = segmentedControlStyle;
+//# sourceMappingURL=segmented-control.style.cjs.map

package/dist/cjs/components/segmented-control/segmented-control.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.style.cjs","names":["focusRingStyle"],"sources":["../../../../src/components/segmented-control/segmented-control.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const segmentedControlStyle = defineComponentSlotStyle({\n  base: {\n    item: {\n      \"&:has(input:focus-visible)\": {\n        ...focusRingStyle.outline,\n      },\n      alignItems: \"center\",\n      color: \"fg\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      flex: \"1 1 0%\",\n      fontWeight: \"medium\",\n      justifyContent: \"center\",\n      position: \"relative\",\n      rounded: \"md\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"color, opacity\",\n      whiteSpace: \"nowrap\",\n      _checked: {\n        anchorName: \"--checked\",\n      },\n      _readOnly: { layerStyle: \"readOnly\", pointerEvents: \"none\" },\n      _disabled: {\n        layerStyle: \"disabled\",\n        \"&[data-root-disabled]\": { opacity: 1 },\n      },\n    },\n    root: {\n      alignItems: \"center\",\n      anchorScope: \"--checked\",\n      bg: [\"bg.ghost\", \"bg.subtle\"],\n      display: \"inline-flex\",\n      p: \"1\",\n      rounded: \"lg\",\n      _before: {\n        bg: \"bg.panel\",\n        boxShadow: \"xs\",\n        h: \"anchor-size(--checked height)\",\n        left: \"anchor(--checked left)\",\n        pointerEvents: \"none\",\n        position: \"absolute\",\n        rounded: \"md\",\n        top: \"anchor(--checked top)\",\n        transitionDuration: \"moderate\",\n        transitionProperty: \"top, left, width\",\n        w: \"anchor-size(--checked width)\",\n      },\n      _dark: {\n        _before: {\n          bg: \"bg.muted\",\n        },\n      },\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, the segmented control will be full rounded.\n     *\n     * @default false\n     */\n    fullRounded: {\n      true: {\n        item: {\n          rounded: \"full\",\n        },\n        root: {\n          rounded: \"full\",\n          _before: {\n            rounded: \"full\",\n          },\n        },\n      },\n    },\n    /**\n     * The orientation of the segmented control.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        item: {\n          h: \"full\",\n        },\n        root: {\n          flexDirection: \"row\",\n        },\n      },\n      vertical: {\n        item: {\n          w: \"full\",\n        },\n        root: {\n          flexDirection: \"column\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      item: { fontSize: \"sm\", px: \"3\", _vertical: { minH: \"7\" } },\n      root: {\n        _horizontal: { h: \"9\", minW: \"64\" },\n      },\n    },\n    md: {\n      item: { fontSize: \"md\", px: \"3\", _vertical: { minH: \"8\" } },\n      root: {\n        _horizontal: { h: \"10\", minW: \"80\" },\n        _vertical: {},\n      },\n    },\n    lg: {\n      item: { fontSize: \"lg\", px: \"4\", _vertical: { minH: \"9\" } },\n      root: {\n        _horizontal: { h: \"11\", minW: \"96\" },\n        _vertical: {},\n      },\n    },\n    xl: {\n      item: { fontSize: \"xl\", px: \"5\", _vertical: { minH: \"10\" } },\n      root: {\n        _horizontal: { h: \"12\", minW: \"96\" },\n        _vertical: {},\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    orientation: \"horizontal\",\n  },\n})\n\nexport type SegmentedControlStyle = typeof segmentedControlStyle\n"],"mappings":";;;;AAEA,MAAa,wBAAwB,oDAAyB;CAC5D,MAAM;EACJ,MAAM;GACJ,8BAA8B,EAC5B,GAAGA,2CAAe,QACnB;GACD,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,MAAM;GACN,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,YAAY;GACZ,UAAU,EACR,YAAY,YACb;GACD,WAAW;IAAE,YAAY;IAAY,eAAe;GAAQ;GAC5D,WAAW;IACT,YAAY;IACZ,yBAAyB,EAAE,SAAS,EAAG;GACxC;EACF;EACD,MAAM;GACJ,YAAY;GACZ,aAAa;GACb,IAAI,CAAC,YAAY,WAAY;GAC7B,SAAS;GACT,GAAG;GACH,SAAS;GACT,SAAS;IACP,IAAI;IACJ,WAAW;IACX,GAAG;IACH,MAAM;IACN,eAAe;IACf,UAAU;IACV,SAAS;IACT,KAAK;IACL,oBAAoB;IACpB,oBAAoB;IACpB,GAAG;GACJ;GACD,OAAO,EACL,SAAS,EACP,IAAI,WACL,EACF;GACD,WAAW,EAAE,YAAY,WAAY;GACrC,WAAW,EAAE,YAAY,WAAY;EACtC;CACF;CAED,OAAO;EAML,aAAa,EACX,MAAM;GACJ,MAAM,EACJ,SAAS,OACV;GACD,MAAM;IACJ,SAAS;IACT,SAAS,EACP,SAAS,OACV;GACF;EACF,EACF;EAMD,aAAa;GACX,YAAY;IACV,MAAM,EACJ,GAAG,OACJ;IACD,MAAM,EACJ,eAAe,MAChB;GACF;GACD,UAAU;IACR,MAAM,EACJ,GAAG,OACJ;IACD,MAAM,EACJ,eAAe,SAChB;GACF;EACF;CACF;CAED,OAAO;EACL,IAAI;GACF,MAAM;IAAE,UAAU;IAAM,IAAI;IAAK,WAAW,EAAE,MAAM,IAAK;GAAE;GAC3D,MAAM,EACJ,aAAa;IAAE,GAAG;IAAK,MAAM;GAAM,EACpC;EACF;EACD,IAAI;GACF,MAAM;IAAE,UAAU;IAAM,IAAI;IAAK,WAAW,EAAE,MAAM,IAAK;GAAE;GAC3D,MAAM;IACJ,aAAa;KAAE,GAAG;KAAM,MAAM;IAAM;IACpC,WAAW,CAAE;GACd;EACF;EACD,IAAI;GACF,MAAM;IAAE,UAAU;IAAM,IAAI;IAAK,WAAW,EAAE,MAAM,IAAK;GAAE;GAC3D,MAAM;IACJ,aAAa;KAAE,GAAG;KAAM,MAAM;IAAM;IACpC,WAAW,CAAE;GACd;EACF;EACD,IAAI;GACF,MAAM;IAAE,UAAU;IAAM,IAAI;IAAK,WAAW,EAAE,MAAM,KAAM;GAAE;GAC5D,MAAM;IACJ,aAAa;KAAE,GAAG;KAAM,MAAM;IAAM;IACpC,WAAW,CAAE;GACd;EACF;CACF;CAED,cAAc;EACZ,MAAM;EACN,aAAa;CACd;AACF,EAAC"}

package/dist/cjs/components/segmented-control/use-segmented-control.cjs

@@ -0,0 +1,132 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_context = require('../../utils/context.cjs');
+const require_utils_dom = require('../../utils/dom.cjs');
+const require_utils_ref = require('../../utils/ref.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
+const require_hooks_use_descendant_index = require('../../hooks/use-descendant/index.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+
+//#region src/components/segmented-control/use-segmented-control.ts
+const [SegmentedControlContext, useSegmentedControlContext] = require_utils_context.createContext({ name: "SegmentedControlContext" });
+const { DescendantsContext, useDescendant, useDescendants } = require_hooks_use_descendant_index.createDescendant();
+const useSegmentedControl = ({ id, name, defaultValue, disabled, orientation = "horizontal", readOnly, value: valueProp, onChange: onChangeProp,...rest } = {}) => {
+	const uuid = (0, react.useId)();
+	const [value, setValue] = require_hooks_use_controllable_state_index.useControllableState({
+		defaultValue,
+		value: valueProp,
+		onChange: onChangeProp
+	});
+	const descendants = useDescendants();
+	id ??= uuid;
+	name ??= uuid;
+	const getRootProps = (0, react.useCallback)((props) => ({
+		id,
+		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
+		"aria-orientation": orientation,
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+		"data-orientation": orientation,
+		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
+		role: "radiogroup",
+		...rest,
+		...props
+	}), [
+		disabled,
+		id,
+		orientation,
+		readOnly,
+		rest
+	]);
+	return {
+		id,
+		name,
+		descendants,
+		disabled,
+		orientation,
+		readOnly,
+		setValue,
+		value,
+		getRootProps
+	};
+};
+const useSegmentedControlItem = ({ disabled, readOnly, value, inputProps,...rest }) => {
+	const { name, disabled: rootDisabled, orientation, readOnly: rootReadOnly, setValue, value: selectedValue } = useSegmentedControlContext();
+	const { index, register } = useDescendant({ disabled: disabled || readOnly });
+	const checked = value === selectedValue;
+	const trulyDisabled = disabled ?? rootDisabled;
+	const trulyReadOnly = readOnly ?? rootReadOnly;
+	const interactive = !(trulyReadOnly || trulyDisabled);
+	const onChange = (0, react.useCallback)((ev) => {
+		setValue(ev.target.value);
+	}, [setValue]);
+	const getLabelProps = (0, react.useCallback)((props) => ({
+		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(trulyDisabled),
+		"aria-readonly": (0, require_utils_index.utils_exports.ariaAttr)(trulyReadOnly),
+		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(trulyDisabled),
+		"data-index": index.toString(),
+		"data-orientation": orientation,
+		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(trulyReadOnly),
+		"data-root-disabled": (0, require_utils_index.utils_exports.dataAttr)(rootDisabled),
+		"data-root-readonly": (0, require_utils_index.utils_exports.dataAttr)(rootReadOnly),
+		...props,
+		...rest
+	}), [
+		orientation,
+		trulyDisabled,
+		index,
+		trulyReadOnly,
+		checked,
+		rootDisabled,
+		rootReadOnly,
+		rest
+	]);
+	const getInputProps = (0, react.useCallback)(({ ref,...props } = {}) => ({
+		type: "radio",
+		name,
+		style: require_utils_dom.visuallyHiddenAttributes.style,
+		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(trulyDisabled),
+		"aria-readonly": (0, require_utils_index.utils_exports.ariaAttr)(trulyReadOnly),
+		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(trulyDisabled),
+		"data-orientation": orientation,
+		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(trulyReadOnly),
+		checked,
+		disabled: trulyDisabled || trulyReadOnly,
+		readOnly: trulyReadOnly,
+		tabIndex: interactive ? void 0 : -1,
+		value,
+		...inputProps,
+		...props,
+		ref: require_utils_ref.mergeRefs(register, ref),
+		onChange: (0, require_utils_index.utils_exports.handlerAll)(props.onChange, inputProps?.onChange, onChange)
+	}), [
+		orientation,
+		name,
+		trulyDisabled,
+		trulyReadOnly,
+		checked,
+		interactive,
+		value,
+		inputProps,
+		register,
+		onChange
+	]);
+	return {
+		getInputProps,
+		getLabelProps
+	};
+};
+
+//#endregion
+exports.DescendantsContext = DescendantsContext;
+exports.SegmentedControlContext = SegmentedControlContext;
+exports.useDescendant = useDescendant;
+exports.useDescendants = useDescendants;
+exports.useSegmentedControl = useSegmentedControl;
+exports.useSegmentedControlContext = useSegmentedControlContext;
+exports.useSegmentedControlItem = useSegmentedControlItem;
+//# sourceMappingURL=use-segmented-control.cjs.map

package/dist/cjs/components/segmented-control/use-segmented-control.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-segmented-control.cjs","names":["getRootProps: PropGetter","ev: ChangeEvent<HTMLInputElement>","getLabelProps: PropGetter<\"label\">","getInputProps: PropGetter<\"input\">","visuallyHiddenAttributes"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendant } from \"../../hooks/use-descendant\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\n\nexport interface SegmentedControlContext\n  extends Omit<UseSegmentedControlReturn, \"descendants\" | \"getRootProps\"> {}\n\nexport const [SegmentedControlContext, useSegmentedControlContext] =\n  createContext<SegmentedControlContext>({ name: \"SegmentedControlContext\" })\n\nexport const { DescendantsContext, useDescendant, useDescendants } =\n  createDescendant<HTMLInputElement>()\n\nexport interface UseSegmentedControlProps<Y extends string = string>\n  extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The orientation of the segmented control.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the segmented control.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n  id,\n  name,\n  defaultValue,\n  disabled,\n  orientation = \"horizontal\",\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n  const uuid = useId()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const descendants = useDescendants()\n\n  id ??= uuid\n  name ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      id,\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"radiogroup\",\n      ...rest,\n      ...props,\n    }),\n    [disabled, id, orientation, readOnly, rest],\n  )\n\n  return {\n    id,\n    name,\n    descendants,\n    disabled,\n    orientation,\n    readOnly,\n    setValue,\n    value,\n    getRootProps,\n  }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n  extends HTMLProps<\"label\">,\n    Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n  /**\n   * The value of the segmented control item.\n   */\n  value: Y\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n  disabled,\n  readOnly,\n  value,\n  inputProps,\n  ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n  const {\n    name,\n    disabled: rootDisabled,\n    orientation,\n    readOnly: rootReadOnly,\n    setValue,\n    value: selectedValue,\n  } = useSegmentedControlContext()\n  const { index, register } = useDescendant({ disabled: disabled || readOnly })\n  const checked = value === selectedValue\n  const trulyDisabled = disabled ?? rootDisabled\n  const trulyReadOnly = readOnly ?? rootReadOnly\n  const interactive = !(trulyReadOnly || trulyDisabled)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setValue(ev.target.value)\n    },\n    [setValue],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-readonly\": ariaAttr(trulyReadOnly),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-index\": index.toString(),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      \"data-root-disabled\": dataAttr(rootDisabled),\n      \"data-root-readonly\": dataAttr(rootReadOnly),\n      ...props,\n      ...rest,\n    }),\n    [\n      orientation,\n      trulyDisabled,\n      index,\n      trulyReadOnly,\n      checked,\n      rootDisabled,\n      rootReadOnly,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-readonly\": ariaAttr(trulyReadOnly),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      checked,\n      disabled: trulyDisabled || trulyReadOnly,\n      readOnly: trulyReadOnly,\n      tabIndex: interactive ? undefined : -1,\n      value,\n      ...inputProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n    }),\n    [\n      orientation,\n      name,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      interactive,\n      value,\n      inputProps,\n      register,\n      onChange,\n    ],\n  )\n\n  return {\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n  typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,CAAC,yBAAyB,2BAA2B,GAChE,oCAAuC,EAAE,MAAM,0BAA2B,EAAC;AAE7E,MAAa,EAAE,oBAAoB,eAAe,gBAAgB,GAChE,qDAAoC;AAwCtC,MAAa,sBAAsB,CAA4B,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,aACV,GAAG,MACyB,GAAG,CAAE,MAAK;CACtC,MAAM,OAAO,kBAAO;CACpB,MAAM,CAAC,OAAO,SAAS,GAAG,gEAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACX,EAAC;CACF,MAAM,cAAc,gBAAgB;AAEpC,QAAO;AACP,UAAS;CAET,MAAMA,eAA2B,uBAC/B,CAAC,WAAW;EACV;EACA,iBAAiB,gDAAS,SAAS;EACnC,oBAAoB;EACpB,iBAAiB,gDAAS,SAAS;EACnC,oBAAoB;EACpB,iBAAiB,gDAAS,SAAS;EACnC,MAAM;EACN,GAAG;EACH,GAAG;CACJ,IACD;EAAC;EAAU;EAAI;EAAa;EAAU;CAAK,EAC5C;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD;AACF;AAiBD,MAAa,0BAA0B,CAA4B,EACjE,UACA,UACA,OACA,WACA,GAAG,MAC6B,KAAK;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,eACR,GAAG,4BAA4B;CAChC,MAAM,EAAE,OAAO,UAAU,GAAG,cAAc,EAAE,UAAU,YAAY,SAAU,EAAC;CAC7E,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,iBAAiB;CAEvC,MAAM,WAAW,uBACf,CAACC,OAAsC;AACrC,WAAS,GAAG,OAAO,MAAM;CAC1B,GACD,CAAC,QAAS,EACX;CAED,MAAMC,gBAAqC,uBACzC,CAAC,WAAW;EACV,iBAAiB,gDAAS,cAAc;EACxC,iBAAiB,gDAAS,cAAc;EACxC,gBAAgB,gDAAS,QAAQ;EACjC,iBAAiB,gDAAS,cAAc;EACxC,cAAc,MAAM,UAAU;EAC9B,oBAAoB;EACpB,iBAAiB,gDAAS,cAAc;EACxC,sBAAsB,gDAAS,aAAa;EAC5C,sBAAsB,gDAAS,aAAa;EAC5C,GAAG;EACH,GAAG;CACJ,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;CAED,MAAMC,gBAAqC,uBACzC,CAAC,EAAE,IAAK,GAAG,OAAO,GAAG,CAAE,OAAM;EAC3B,MAAM;EACN;EACA,OAAOC,2CAAyB;EAChC,iBAAiB,gDAAS,cAAc;EACxC,iBAAiB,gDAAS,cAAc;EACxC,gBAAgB,gDAAS,QAAQ;EACjC,iBAAiB,gDAAS,cAAc;EACxC,oBAAoB;EACpB,iBAAiB,gDAAS,cAAc;EACxC;EACA,UAAU,iBAAiB;EAC3B,UAAU;EACV,UAAU,uBAA0B;EACpC;EACA,GAAG;EACH,GAAG;EACH,KAAK,4BAAU,UAAU,IAAI;EAC7B,UAAU,kDAAW,MAAM,UAAU,YAAY,UAAU,SAAS;CACrE,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;AAED,QAAO;EACL;EACA;CACD;AACF"}

package/dist/cjs/components/separator/index.cjs

@@ -0,0 +1,5 @@
+const require_components_separator_separator = require('./separator.cjs');
+
+exports.Separator = require_components_separator_separator.Separator;
+exports.SeparatorPropsContext = require_components_separator_separator.SeparatorPropsContext;
+exports.useSeparatorPropsContext = require_components_separator_separator.useSeparatorPropsContext;

package/dist/cjs/components/separator/separator.cjs

@@ -0,0 +1,21 @@
+"use client";
+
+
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_separator_separator_style = require('./separator.style.cjs');
+
+//#region src/components/separator/separator.tsx
+const { PropsContext: SeparatorPropsContext, usePropsContext: useSeparatorPropsContext, withContext } = require_core_components_create_component.createComponent("separator", require_components_separator_separator_style.separatorStyle);
+/**
+* `Separator` is a component that represents a division between elements.
+*
+* @see https://yamada-ui.com/components/separator
+*/
+const Separator = withContext("hr")();
+
+//#endregion
+exports.Separator = Separator;
+exports.SeparatorPropsContext = SeparatorPropsContext;
+exports.useSeparatorPropsContext = useSeparatorPropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=separator.cjs.map

package/dist/cjs/components/separator/separator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.cjs","names":["separatorStyle"],"sources":["../../../../src/components/separator/separator.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { SeparatorStyle } from \"./separator.style\"\nimport { createComponent } from \"../../core\"\nimport { separatorStyle } from \"./separator.style\"\n\nexport interface SeparatorProps\n  extends HTMLStyledProps<\"hr\">,\n    ThemeProps<SeparatorStyle> {}\n\nexport const {\n  PropsContext: SeparatorPropsContext,\n  usePropsContext: useSeparatorPropsContext,\n  withContext,\n} = createComponent<SeparatorProps, SeparatorStyle>(\"separator\", separatorStyle)\n\n/**\n * `Separator` is a component that represents a division between elements.\n *\n * @see https://yamada-ui.com/components/separator\n */\nexport const Separator = withContext(\"hr\")()\n"],"mappings":";;;;;;;AAWA,MAAa,EACX,cAAc,uBACd,iBAAiB,0BACjB,aACD,GAAG,yDAAgD,aAAaA,4DAAe;;;;;;AAOhF,MAAa,YAAY,YAAY,KAAK,EAAE"}

package/dist/cjs/components/separator/separator.style.cjs

@@ -0,0 +1,29 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/separator/separator.style.ts
+const separatorStyle = require_core_system_config.defineComponentStyle({
+	base: { borderColor: "border" },
+	props: { orientation: {
+		horizontal: {
+			borderWidth: "0 0 1px 0",
+			w: "full"
+		},
+		vertical: {
+			borderWidth: "0 0 0 1px",
+			h: "full"
+		}
+	} },
+	variants: {
+		dashed: { borderStyle: "dashed" },
+		dotted: { borderStyle: "dotted" },
+		solid: { borderStyle: "solid" }
+	},
+	defaultProps: {
+		variant: "solid",
+		orientation: "horizontal"
+	}
+});
+
+//#endregion
+exports.separatorStyle = separatorStyle;
+//# sourceMappingURL=separator.style.cjs.map

package/dist/cjs/components/separator/separator.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.style.cjs","names":[],"sources":["../../../../src/components/separator/separator.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const separatorStyle = defineComponentStyle({\n  base: {\n    borderColor: \"border\",\n  },\n\n  props: {\n    /**\n     * The orientation of the divider.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        borderWidth: \"0 0 1px 0\",\n        w: \"full\",\n      },\n      vertical: {\n        borderWidth: \"0 0 0 1px\",\n        h: \"full\",\n      },\n    },\n  },\n\n  variants: {\n    dashed: {\n      borderStyle: \"dashed\",\n    },\n    dotted: {\n      borderStyle: \"dotted\",\n    },\n    solid: {\n      borderStyle: \"solid\",\n    },\n  },\n\n  defaultProps: { variant: \"solid\", orientation: \"horizontal\" },\n})\n\nexport type SeparatorStyle = typeof separatorStyle\n"],"mappings":";;;AAEA,MAAa,iBAAiB,gDAAqB;CACjD,MAAM,EACJ,aAAa,SACd;CAED,OAAO,EAML,aAAa;EACX,YAAY;GACV,aAAa;GACb,GAAG;EACJ;EACD,UAAU;GACR,aAAa;GACb,GAAG;EACJ;CACF,EACF;CAED,UAAU;EACR,QAAQ,EACN,aAAa,SACd;EACD,QAAQ,EACN,aAAa,SACd;EACD,OAAO,EACL,aAAa,QACd;CACF;CAED,cAAc;EAAE,SAAS;EAAS,aAAa;CAAc;AAC9D,EAAC"}

package/dist/cjs/components/simple-grid/index.cjs

@@ -0,0 +1,7 @@
+const require_components_simple_grid_simple_grid_style = require('./simple-grid.style.cjs');
+const require_components_simple_grid_simple_grid = require('./simple-grid.cjs');
+
+exports.SimpleGrid = require_components_simple_grid_simple_grid.SimpleGrid;
+exports.SimpleGridPropsContext = require_components_simple_grid_simple_grid.SimpleGridPropsContext;
+exports.simpleGridStyle = require_components_simple_grid_simple_grid_style.simpleGridStyle;
+exports.useSimpleGridPropsContext = require_components_simple_grid_simple_grid.useSimpleGridPropsContext;

package/dist/cjs/components/simple-grid/simple-grid.cjs

@@ -0,0 +1,36 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_grid_grid = require('../grid/grid.cjs');
+const require_components_simple_grid_simple_grid_style = require('./simple-grid.style.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+
+//#region src/components/simple-grid/simple-grid.tsx
+const { PropsContext: SimpleGridPropsContext, usePropsContext: useSimpleGridPropsContext, withContext } = require_core_components_create_component.createComponent("simple-grid", require_components_simple_grid_simple_grid_style.simpleGridStyle);
+/**
+* `SimpleGrid` is a component that makes `Grid` simpler and more user-friendly.
+*
+* @see https://yamada-ui.com/components/simple-grid
+*/
+const SimpleGrid = withContext(require_components_grid_grid.Grid)(void 0, ({ columns, minChildWidth,...rest }) => {
+	const templateColumns = (0, react.useMemo)(() => {
+		if (minChildWidth) return (0, require_utils_index.utils_exports.replaceObject)(minChildWidth, (value) => {
+			return value != null ? `repeat(auto-fit, minmax({sizes.${value}, ${value}}, 1fr))` : void 0;
+		});
+		else return (0, require_utils_index.utils_exports.replaceObject)(columns, (value) => value != null ? `repeat(${value}, minmax(0, 1fr))` : void 0);
+	}, [minChildWidth, columns]);
+	return {
+		templateColumns,
+		...rest
+	};
+});
+
+//#endregion
+exports.SimpleGrid = SimpleGrid;
+exports.SimpleGridPropsContext = SimpleGridPropsContext;
+exports.useSimpleGridPropsContext = useSimpleGridPropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=simple-grid.cjs.map

package/dist/cjs/components/simple-grid/simple-grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-grid.cjs","names":["simpleGridStyle","Grid"],"sources":["../../../../src/components/simple-grid/simple-grid.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  CSSProps,\n  StyleValue,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GridProps } from \"../grid\"\nimport type { SimpleGridStyle } from \"./simple-grid.style\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { replaceObject } from \"../../utils\"\nimport { Grid } from \"../grid\"\nimport { simpleGridStyle } from \"./simple-grid.style\"\n\nexport interface SimpleGridProps\n  extends Omit<WithoutThemeProps<GridProps, SimpleGridStyle>, \"columns\">,\n    ThemeProps<SimpleGridStyle> {\n  /**\n   * The number of columns.\n   */\n  columns?: StyleValue<number>\n  /**\n   * The width at which child elements will break into columns.\n   * Pass a number for pixel values or a string for any other valid CSS length.\n   */\n  minChildWidth?: CSSProps[\"minWidth\"]\n}\n\nexport const {\n  PropsContext: SimpleGridPropsContext,\n  usePropsContext: useSimpleGridPropsContext,\n  withContext,\n} = createComponent<SimpleGridProps, SimpleGridStyle>(\n  \"simple-grid\",\n  simpleGridStyle,\n)\n\n/**\n * `SimpleGrid` is a component that makes `Grid` simpler and more user-friendly.\n *\n * @see https://yamada-ui.com/components/simple-grid\n */\nexport const SimpleGrid = withContext(Grid)(\n  undefined,\n  ({ columns, minChildWidth, ...rest }) => {\n    const templateColumns = useMemo(() => {\n      if (minChildWidth) {\n        return replaceObject(minChildWidth, (value) => {\n          return value != null\n            ? `repeat(auto-fit, minmax({sizes.${value}, ${value}}, 1fr))`\n            : undefined\n        })\n      } else {\n        return replaceObject(columns, (value) =>\n          value != null ? `repeat(${value}, minmax(0, 1fr))` : undefined,\n        )\n      }\n    }, [minChildWidth, columns])\n\n    return { templateColumns, ...rest }\n  },\n)\n"],"mappings":";;;;;;;;;;;AA8BA,MAAa,EACX,cAAc,wBACd,iBAAiB,2BACjB,aACD,GAAG,yDACF,eACAA,iEACD;;;;;;AAOD,MAAa,aAAa,YAAYC,kCAAK,SAEzC,CAAC,EAAE,SAAS,cAAe,GAAG,MAAM,KAAK;CACvC,MAAM,kBAAkB,mBAAQ,MAAM;AACpC,MAAI,cACF,QAAO,qDAAc,eAAe,CAAC,UAAU;AAC7C,UAAO,SAAS,QACX,iCAAiC,MAAM,IAAI,MAAM;EAEvD,EAAC;MAEF,QAAO,qDAAc,SAAS,CAAC,UAC7B,SAAS,QAAQ,SAAS,MAAM,4BACjC;CAEJ,GAAE,CAAC,eAAe,OAAQ,EAAC;AAE5B,QAAO;EAAE;EAAiB,GAAG;CAAM;AACpC,EACF"}

package/dist/cjs/components/simple-grid/simple-grid.style.cjs

@@ -0,0 +1,8 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/simple-grid/simple-grid.style.ts
+const simpleGridStyle = require_core_system_config.defineComponentStyle({});
+
+//#endregion
+exports.simpleGridStyle = simpleGridStyle;
+//# sourceMappingURL=simple-grid.style.cjs.map

package/dist/cjs/components/simple-grid/simple-grid.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-grid.style.cjs","names":[],"sources":["../../../../src/components/simple-grid/simple-grid.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const simpleGridStyle = defineComponentStyle({})\n\nexport type SimpleGridStyle = typeof simpleGridStyle\n"],"mappings":";;;AAEA,MAAa,kBAAkB,gDAAqB,CAAE,EAAC"}

package/dist/cjs/components/skeleton/index.cjs

@@ -0,0 +1,11 @@
+const require_components_skeleton_skeleton_style = require('./skeleton.style.cjs');
+const require_components_skeleton_skeleton = require('./skeleton.cjs');
+const require_components_skeleton_skeleton_circle = require('./skeleton-circle.cjs');
+const require_components_skeleton_skeleton_text = require('./skeleton-text.cjs');
+
+exports.Skeleton = require_components_skeleton_skeleton.Skeleton;
+exports.SkeletonCircle = require_components_skeleton_skeleton_circle.SkeletonCircle;
+exports.SkeletonPropsContext = require_components_skeleton_skeleton.SkeletonPropsContext;
+exports.SkeletonText = require_components_skeleton_skeleton_text.SkeletonText;
+exports.skeletonStyle = require_components_skeleton_skeleton_style.skeletonStyle;
+exports.useSkeletonPropsContext = require_components_skeleton_skeleton.useSkeletonPropsContext;

package/dist/cjs/components/skeleton/skeleton-circle.cjs

@@ -0,0 +1,20 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_core_css_merge_css = require('../../core/css/merge-css.cjs');
+const require_components_skeleton_skeleton = require('./skeleton.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/skeleton/skeleton-circle.tsx
+const SkeletonCircle = ({ css,...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton_skeleton.Skeleton, {
+		css: require_core_css_merge_css.mergeCSS(css, {
+			"--height": "sizes.10",
+			"--width": "sizes.10"
+		}),
+		_loading: { rounded: "full" },
+		...rest
+	});
+};
+
+//#endregion
+exports.SkeletonCircle = SkeletonCircle;
+//# sourceMappingURL=skeleton-circle.cjs.map

package/dist/cjs/components/skeleton/skeleton-circle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-circle.cjs","names":["SkeletonCircle: FC<SkeletonCircleProps>","Skeleton"],"sources":["../../../../src/components/skeleton/skeleton-circle.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { mergeCSS } from \"../../core\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle: FC<SkeletonCircleProps> = ({ css, ...rest }) => {\n  return (\n    <Skeleton\n      css={mergeCSS(css, { \"--height\": \"sizes.10\", \"--width\": \"sizes.10\" })}\n      _loading={{ rounded: \"full\" }}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;AAOA,MAAaA,iBAA0C,CAAC,EAAE,IAAK,GAAG,MAAM,KAAK;AAC3E,wBACE,2BAACC;EACC,KAAK,oCAAS,KAAK;GAAE,YAAY;GAAY,WAAW;EAAY,EAAC;EACrE,UAAU,EAAE,SAAS,OAAQ;EAC7B,GAAI;GACJ;AAEL"}

package/dist/cjs/components/skeleton/skeleton-text.cjs

@@ -0,0 +1,39 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_core_css_merge_css = require('../../core/css/merge-css.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_components_skeleton_skeleton = require('./skeleton.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/skeleton/skeleton-text.tsx
+const SkeletonText = ({ css, children, gap = "2", lineClamp: lineClampProp = 3, loading = true, _loading, _notFirst, rootProps,...rest }) => {
+	const lineClamp = require_hooks_use_value_index.useValue(lineClampProp);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_core_system_factory.styled.div, {
+		w: "full",
+		...rootProps,
+		children: Array.from({ length: lineClamp }).map((_, index) => {
+			if (!loading && index > 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton_skeleton.Skeleton, {
+				css: require_core_css_merge_css.mergeCSS(css, { "--height": "sizes.4" }),
+				loading,
+				_loading: {
+					_last: { maxW: lineClamp > 1 ? "80%" : "100%" },
+					..._loading
+				},
+				_notFirst: {
+					mt: gap,
+					..._notFirst
+				},
+				...rest,
+				children: !loading && index === 0 ? children : void 0
+			}, index);
+		})
+	});
+};
+
+//#endregion
+exports.SkeletonText = SkeletonText;
+//# sourceMappingURL=skeleton-text.cjs.map

package/dist/cjs/components/skeleton/skeleton-text.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text.cjs","names":["SkeletonText: FC<SkeletonTextProps>","styled","Skeleton"],"sources":["../../../../src/components/skeleton/skeleton-text.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC } from \"react\"\nimport type { HTMLStyledProps, StyleValue } from \"../../core\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { mergeCSS, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"lineClamp\"> {\n  /**\n   * The number of lines to display.\n   */\n  lineClamp?: StyleValue<number>\n  /**\n   * Props for the root element.\n   */\n  rootProps?: HTMLStyledProps\n}\n\nexport const SkeletonText: FC<SkeletonTextProps> = ({\n  css,\n  children,\n  gap = \"2\",\n  lineClamp: lineClampProp = 3,\n  loading = true,\n  _loading,\n  _notFirst,\n  rootProps,\n  ...rest\n}) => {\n  const lineClamp = useValue(lineClampProp)\n\n  return (\n    <styled.div w=\"full\" {...rootProps}>\n      {Array.from({ length: lineClamp }).map((_, index) => {\n        if (!loading && index > 0) return null\n\n        return (\n          <Skeleton\n            key={index}\n            css={mergeCSS(css, { \"--height\": \"sizes.4\" })}\n            loading={loading}\n            _loading={{\n              _last: { maxW: lineClamp > 1 ? \"80%\" : \"100%\" },\n              ..._loading,\n            }}\n            _notFirst={{ mt: gap, ..._notFirst }}\n            {...rest}\n          >\n            {!loading && index === 0 ? children : undefined}\n          </Skeleton>\n        )\n      })}\n    </styled.div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAoBA,MAAaA,eAAsC,CAAC,EAClD,KACA,UACA,MAAM,KACN,WAAW,gBAAgB,GAC3B,UAAU,MACV,UACA,WACA,UACA,GAAG,MACJ,KAAK;CACJ,MAAM,YAAY,uCAAS,cAAc;AAEzC,wBACE,2BAACC,mCAAO;EAAI,GAAE;EAAO,GAAI;YACtB,MAAM,KAAK,EAAE,QAAQ,UAAW,EAAC,CAAC,IAAI,CAAC,GAAG,UAAU;AACnD,QAAK,WAAW,QAAQ,EAAG,QAAO;AAElC,0BACE,2BAACC;IAEC,KAAK,oCAAS,KAAK,EAAE,YAAY,UAAW,EAAC;IACpC;IACT,UAAU;KACR,OAAO,EAAE,MAAM,YAAY,IAAI,QAAQ,OAAQ;KAC/C,GAAG;IACJ;IACD,WAAW;KAAE,IAAI;KAAK,GAAG;IAAW;IACpC,GAAI;eAEF,WAAW,UAAU,IAAI;MAVtB,MAWI;EAEd,EAAC;GACS;AAEhB"}

package/dist/cjs/components/skeleton/skeleton.cjs

@@ -0,0 +1,43 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_children = require('../../utils/children.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_core_system_var = require('../../core/system/var.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_skeleton_skeleton_style = require('./skeleton.style.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+
+//#region src/components/skeleton/skeleton.tsx
+const { PropsContext: SkeletonPropsContext, usePropsContext: useSkeletonPropsContext, withContext } = require_core_components_create_component.createComponent("skeleton", require_components_skeleton_skeleton_style.skeletonStyle);
+/**
+* `Skeleton` is a component that acts as a placeholder until content is loaded.
+*
+* @see https://yamada-ui.com/components/skeleton
+*/
+const Skeleton = withContext("div", { transferProps: ["loading"] })(void 0, ({ children, duration, endColor, fadeDuration, fitContent, loading, startColor,...rest }) => {
+	const validChildren = (0, react.useMemo)(() => require_utils_children.getValidChildren(children), [children]);
+	const hasChildren = !!validChildren.length;
+	fitContent ??= hasChildren;
+	return {
+		"aria-busy": loading,
+		"data-loaded": (0, require_utils_index.utils_exports.dataAttr)(!loading),
+		"data-loading": (0, require_utils_index.utils_exports.dataAttr)(loading),
+		"--duration": (0, require_utils_index.utils_exports.isNumber)(duration) ? `${duration}s` : duration,
+		"--end-color": require_core_system_var.varAttr(endColor, "colors"),
+		"--fade-duration": (0, require_utils_index.utils_exports.isNumber)(fadeDuration) ? `${fadeDuration}s` : fadeDuration,
+		"--height": fitContent ? "fit-content" : void 0,
+		"--start-color": require_core_system_var.varAttr(startColor, "colors"),
+		"--width": fitContent ? "fit-content" : void 0,
+		children,
+		...rest
+	};
+});
+
+//#endregion
+exports.Skeleton = Skeleton;
+exports.SkeletonPropsContext = SkeletonPropsContext;
+exports.useSkeletonPropsContext = useSkeletonPropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=skeleton.cjs.map

package/dist/cjs/components/skeleton/skeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.cjs","names":["skeletonStyle"],"sources":["../../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { SkeletonStyle } from \"./skeleton.style\"\nimport { useMemo } from \"react\"\nimport { createComponent, varAttr } from \"../../core\"\nimport { dataAttr, getValidChildren, isNumber } from \"../../utils\"\nimport { skeletonStyle } from \"./skeleton.style\"\n\nexport interface SkeletonProps\n  extends HTMLStyledProps,\n    ThemeProps<SkeletonStyle> {\n  /**\n   * The animation duration in seconds.\n   */\n  duration?: number | string\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSProps[\"color\"]\n  /**\n   * The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.\n   */\n  fadeDuration?: number | string\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  fitContent?: boolean\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSProps[\"color\"]\n}\n\nexport const {\n  PropsContext: SkeletonPropsContext,\n  usePropsContext: useSkeletonPropsContext,\n  withContext,\n} = createComponent<SkeletonProps, SkeletonStyle>(\"skeleton\", skeletonStyle)\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see https://yamada-ui.com/components/skeleton\n */\nexport const Skeleton = withContext(\"div\", { transferProps: [\"loading\"] })(\n  undefined,\n  ({\n    children,\n    duration,\n    endColor,\n    fadeDuration,\n    fitContent,\n    loading,\n    startColor,\n    ...rest\n  }) => {\n    const validChildren = useMemo(() => getValidChildren(children), [children])\n    const hasChildren = !!validChildren.length\n\n    fitContent ??= hasChildren\n\n    return {\n      \"aria-busy\": loading,\n      \"data-loaded\": dataAttr(!loading),\n      \"data-loading\": dataAttr(loading),\n      \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n      \"--end-color\": varAttr(endColor, \"colors\"),\n      \"--fade-duration\": isNumber(fadeDuration)\n        ? `${fadeDuration}s`\n        : fadeDuration,\n      \"--height\": fitContent ? \"fit-content\" : undefined,\n      \"--start-color\": varAttr(startColor, \"colors\"),\n      \"--width\": fitContent ? \"fit-content\" : undefined,\n      children,\n      ...rest,\n    }\n  },\n)\n"],"mappings":";;;;;;;;;;;;AAoCA,MAAa,EACX,cAAc,sBACd,iBAAiB,yBACjB,aACD,GAAG,yDAA8C,YAAYA,yDAAc;;;;;;AAO5E,MAAa,WAAW,YAAY,OAAO,EAAE,eAAe,CAAC,SAAU,EAAE,EAAC,SAExE,CAAC,EACC,UACA,UACA,UACA,cACA,YACA,SACA,WACA,GAAG,MACJ,KAAK;CACJ,MAAM,gBAAgB,mBAAQ,MAAM,wCAAiB,SAAS,EAAE,CAAC,QAAS,EAAC;CAC3E,MAAM,gBAAgB,cAAc;AAEpC,gBAAe;AAEf,QAAO;EACL,aAAa;EACb,eAAe,iDAAU,QAAQ;EACjC,gBAAgB,gDAAS,QAAQ;EACjC,cAAc,gDAAS,SAAS,MAAM,SAAS,KAAK;EACpD,eAAe,gCAAQ,UAAU,SAAS;EAC1C,mBAAmB,gDAAS,aAAa,MAClC,aAAa,KAChB;EACJ,YAAY,aAAa;EACzB,iBAAiB,gCAAQ,YAAY,SAAS;EAC9C,WAAW,aAAa;EACxB;EACA,GAAG;CACJ;AACF,EACF"}

package/dist/cjs/components/skeleton/skeleton.style.cjs

@@ -0,0 +1,60 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/skeleton/skeleton.style.ts
+const skeletonStyle = require_core_system_config.defineComponentStyle({
+	base: {},
+	props: { loading: {
+		false: {
+			animationDuration: "{fade-duration, 0.1s}",
+			animationIterationCount: "1",
+			animationName: "fade-in",
+			animationTimingFunction: "ease-out",
+			bg: "unset"
+		},
+		true: {
+			"&::before, &::after, *": { visibility: "hidden" },
+			"--height": "sizes.6",
+			"--width": "sizes.full",
+			bgClip: "padding-box",
+			boxShadow: "none",
+			color: "transparent",
+			cursor: "default",
+			flexShrink: "0",
+			h: "{height}",
+			maxW: "full",
+			pointerEvents: "none",
+			rounded: "l1",
+			userSelect: "none",
+			w: "{width}"
+		}
+	} },
+	variants: {
+		none: { animation: "none" },
+		pulse: {
+			animationDuration: "{duration, 1.2s}",
+			animationIterationCount: "infinite",
+			animationName: "pulse",
+			bg: "bg.muted"
+		},
+		shine: {
+			"--animation-from": "200%",
+			"--animation-to": "-200%",
+			"--end-color": "colors.bg.muted",
+			"--start-color": "colors.bg.subtle",
+			animationDuration: "{duration, 5s}",
+			animationIterationCount: "infinite",
+			animationName: "bg-position",
+			animationTimingFunction: "ease-in-out",
+			bgImage: "linear-gradient(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
+			bgSize: "400% 100%"
+		}
+	},
+	defaultProps: {
+		variant: "pulse",
+		loading: true
+	}
+});
+
+//#endregion
+exports.skeletonStyle = skeletonStyle;
+//# sourceMappingURL=skeleton.style.cjs.map