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

package/dist/cjs/components/tabs/tabs.style.cjs

@@ -0,0 +1,152 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/tabs/tabs.style.ts
+const tabsStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		list: { display: "flex" },
+		panel: { flex: "1" },
+		root: {
+			display: "flex",
+			w: "full"
+		},
+		tab: {
+			alignItems: "center",
+			cursor: "pointer",
+			display: "flex",
+			fontWeight: "medium",
+			gap: "2",
+			justifyContent: "center",
+			transitionDuration: "moderate",
+			transitionProperty: "common",
+			_disabled: { layerStyle: "disabled" }
+		}
+	},
+	props: {
+		align: {
+			center: { list: { justifyContent: "center" } },
+			end: { list: { justifyContent: "flex-end" } },
+			start: { list: { justifyContent: "flex-start" } }
+		},
+		fitted: { true: { tab: { flex: 1 } } },
+		orientation: {
+			horizontal: {
+				list: {
+					alignItems: "center",
+					flexDirection: "row"
+				},
+				root: { flexDirection: "column" }
+			},
+			vertical: {
+				list: {
+					alignItems: "stretch",
+					flexDirection: "column"
+				},
+				root: { flexDirection: "row" }
+			}
+		}
+	},
+	variants: {
+		line: {
+			list: {
+				_horizontal: { borderBottomWidth: "1px" },
+				_vertical: { borderRightWidth: "1px" }
+			},
+			tab: {
+				color: "fg.muted",
+				focusVisibleRing: "inside",
+				position: "relative",
+				_selected: {
+					color: "fg",
+					_after: {
+						borderColor: "colorScheme.solid",
+						position: "absolute"
+					},
+					_horizontal: { _after: {
+						borderBottomWidth: "1px",
+						bottom: "-1px",
+						w: "full"
+					} },
+					_vertical: { _after: {
+						borderRightWidth: "1px",
+						h: "full",
+						right: "-1px"
+					} }
+				}
+			}
+		},
+		outline: {
+			list: {
+				_horizontal: { borderBottomWidth: "1px" },
+				_vertical: { borderRightWidth: "1px" }
+			},
+			tab: {
+				border: "1px solid transparent",
+				color: "fg.muted",
+				focusVisibleRing: "inside",
+				position: "relative",
+				_horizontal: {
+					mb: "-1px",
+					roundedStart: "l2"
+				},
+				_selected: {
+					bg: "bg",
+					borderColor: "border",
+					color: "fg",
+					_horizontal: { borderBottomColor: "transparent" },
+					_vertical: { borderRightColor: "transparent" }
+				},
+				_vertical: {
+					me: "-1px",
+					roundedLeft: "l2"
+				}
+			}
+		},
+		plain: { tab: {
+			color: "fg.muted",
+			rounded: "l2",
+			_selected: { color: "fg" }
+		} },
+		subtle: { tab: {
+			border: "1px solid transparent",
+			color: "fg.muted",
+			rounded: "l2",
+			_selected: { layerStyle: "subtle" }
+		} }
+	},
+	sizes: {
+		sm: {
+			root: { gap: "sm" },
+			tab: {
+				fontSize: "sm",
+				px: "3",
+				py: "1"
+			}
+		},
+		md: {
+			root: { gap: "md" },
+			tab: {
+				fontSize: "md",
+				px: "4",
+				py: "2"
+			}
+		},
+		lg: {
+			root: { gap: "lg" },
+			tab: {
+				fontSize: "lg",
+				px: "5",
+				py: "3"
+			}
+		}
+	},
+	defaultProps: {
+		size: "md",
+		variant: "line",
+		align: "start",
+		orientation: "horizontal"
+	}
+});
+
+//#endregion
+exports.tabsStyle = tabsStyle;
+//# sourceMappingURL=tabs.style.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.style.cjs","names":[],"sources":["../../../../src/components/tabs/tabs.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const tabsStyle = defineComponentSlotStyle({\n  base: {\n    list: {\n      display: \"flex\",\n    },\n    panel: {\n      flex: \"1\",\n    },\n    root: {\n      display: \"flex\",\n      w: \"full\",\n    },\n    tab: {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      fontWeight: \"medium\",\n      gap: \"2\",\n      justifyContent: \"center\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n  },\n\n  props: {\n    /**\n     * The alignment of the tabs.\n     *\n     * @default 'start'\n     */\n    align: {\n      center: {\n        list: {\n          justifyContent: \"center\",\n        },\n      },\n      end: {\n        list: {\n          justifyContent: \"flex-end\",\n        },\n      },\n      start: {\n        list: {\n          justifyContent: \"flex-start\",\n        },\n      },\n    },\n    /**\n     * If `true`, tabs will stretch to width of the tablist.\n     *\n     * @default false\n     */\n    fitted: {\n      true: {\n        tab: {\n          flex: 1,\n        },\n      },\n    },\n    /**\n     * The orientation of the tab list.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        list: { alignItems: \"center\", flexDirection: \"row\" },\n        root: {\n          flexDirection: \"column\",\n        },\n      },\n      vertical: {\n        list: { alignItems: \"stretch\", flexDirection: \"column\" },\n        root: {\n          flexDirection: \"row\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    line: {\n      list: {\n        _horizontal: {\n          borderBottomWidth: \"1px\",\n        },\n        _vertical: {\n          borderRightWidth: \"1px\",\n        },\n      },\n      tab: {\n        color: \"fg.muted\",\n        focusVisibleRing: \"inside\",\n        position: \"relative\",\n        _selected: {\n          color: \"fg\",\n          _after: {\n            borderColor: \"colorScheme.solid\",\n            position: \"absolute\",\n          },\n          _horizontal: {\n            _after: {\n              borderBottomWidth: \"1px\",\n              bottom: \"-1px\",\n              w: \"full\",\n            },\n          },\n          _vertical: {\n            _after: {\n              borderRightWidth: \"1px\",\n              h: \"full\",\n              right: \"-1px\",\n            },\n          },\n        },\n      },\n    },\n    outline: {\n      list: {\n        _horizontal: {\n          borderBottomWidth: \"1px\",\n        },\n        _vertical: {\n          borderRightWidth: \"1px\",\n        },\n      },\n      tab: {\n        border: \"1px solid transparent\",\n        color: \"fg.muted\",\n        focusVisibleRing: \"inside\",\n        position: \"relative\",\n        _horizontal: {\n          mb: \"-1px\",\n          roundedStart: \"l2\",\n        },\n        _selected: {\n          bg: \"bg\",\n          borderColor: \"border\",\n          color: \"fg\",\n          _horizontal: {\n            borderBottomColor: \"transparent\",\n          },\n          _vertical: {\n            borderRightColor: \"transparent\",\n          },\n        },\n        _vertical: {\n          me: \"-1px\",\n          roundedLeft: \"l2\",\n        },\n      },\n    },\n    plain: {\n      tab: {\n        color: \"fg.muted\",\n        rounded: \"l2\",\n        _selected: {\n          color: \"fg\",\n        },\n      },\n    },\n    subtle: {\n      tab: {\n        border: \"1px solid transparent\",\n        color: \"fg.muted\",\n        rounded: \"l2\",\n        _selected: {\n          layerStyle: \"subtle\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      root: {\n        gap: \"sm\",\n      },\n      tab: {\n        fontSize: \"sm\",\n        px: \"3\",\n        py: \"1\",\n      },\n    },\n    md: {\n      root: {\n        gap: \"md\",\n      },\n      tab: {\n        fontSize: \"md\",\n        px: \"4\",\n        py: \"2\",\n      },\n    },\n    lg: {\n      root: {\n        gap: \"lg\",\n      },\n      tab: {\n        fontSize: \"lg\",\n        px: \"5\",\n        py: \"3\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"line\",\n    align: \"start\",\n    orientation: \"horizontal\",\n  },\n})\n\nexport type TabsStyle = typeof tabsStyle\n"],"mappings":";;;AAEA,MAAa,YAAY,oDAAyB;CAChD,MAAM;EACJ,MAAM,EACJ,SAAS,OACV;EACD,OAAO,EACL,MAAM,IACP;EACD,MAAM;GACJ,SAAS;GACT,GAAG;EACJ;EACD,KAAK;GACH,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,KAAK;GACL,gBAAgB;GAChB,oBAAoB;GACpB,oBAAoB;GACpB,WAAW,EACT,YAAY,WACb;EACF;CACF;CAED,OAAO;EAML,OAAO;GACL,QAAQ,EACN,MAAM,EACJ,gBAAgB,SACjB,EACF;GACD,KAAK,EACH,MAAM,EACJ,gBAAgB,WACjB,EACF;GACD,OAAO,EACL,MAAM,EACJ,gBAAgB,aACjB,EACF;EACF;EAMD,QAAQ,EACN,MAAM,EACJ,KAAK,EACH,MAAM,EACP,EACF,EACF;EAMD,aAAa;GACX,YAAY;IACV,MAAM;KAAE,YAAY;KAAU,eAAe;IAAO;IACpD,MAAM,EACJ,eAAe,SAChB;GACF;GACD,UAAU;IACR,MAAM;KAAE,YAAY;KAAW,eAAe;IAAU;IACxD,MAAM,EACJ,eAAe,MAChB;GACF;EACF;CACF;CAED,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,aAAa,EACX,mBAAmB,MACpB;IACD,WAAW,EACT,kBAAkB,MACnB;GACF;GACD,KAAK;IACH,OAAO;IACP,kBAAkB;IAClB,UAAU;IACV,WAAW;KACT,OAAO;KACP,QAAQ;MACN,aAAa;MACb,UAAU;KACX;KACD,aAAa,EACX,QAAQ;MACN,mBAAmB;MACnB,QAAQ;MACR,GAAG;KACJ,EACF;KACD,WAAW,EACT,QAAQ;MACN,kBAAkB;MAClB,GAAG;MACH,OAAO;KACR,EACF;IACF;GACF;EACF;EACD,SAAS;GACP,MAAM;IACJ,aAAa,EACX,mBAAmB,MACpB;IACD,WAAW,EACT,kBAAkB,MACnB;GACF;GACD,KAAK;IACH,QAAQ;IACR,OAAO;IACP,kBAAkB;IAClB,UAAU;IACV,aAAa;KACX,IAAI;KACJ,cAAc;IACf;IACD,WAAW;KACT,IAAI;KACJ,aAAa;KACb,OAAO;KACP,aAAa,EACX,mBAAmB,cACpB;KACD,WAAW,EACT,kBAAkB,cACnB;IACF;IACD,WAAW;KACT,IAAI;KACJ,aAAa;IACd;GACF;EACF;EACD,OAAO,EACL,KAAK;GACH,OAAO;GACP,SAAS;GACT,WAAW,EACT,OAAO,KACR;EACF,EACF;EACD,QAAQ,EACN,KAAK;GACH,QAAQ;GACR,OAAO;GACP,SAAS;GACT,WAAW,EACT,YAAY,SACb;EACF,EACF;CACF;CAED,OAAO;EACL,IAAI;GACF,MAAM,EACJ,KAAK,KACN;GACD,KAAK;IACH,UAAU;IACV,IAAI;IACJ,IAAI;GACL;EACF;EACD,IAAI;GACF,MAAM,EACJ,KAAK,KACN;GACD,KAAK;IACH,UAAU;IACV,IAAI;IACJ,IAAI;GACL;EACF;EACD,IAAI;GACF,MAAM,EACJ,KAAK,KACN;GACD,KAAK;IACH,UAAU;IACV,IAAI;IACJ,IAAI;GACL;EACF;CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,aAAa;CACd;AACF,EAAC"}

package/dist/cjs/components/tabs/use-tabs.cjs

@@ -0,0 +1,194 @@
+"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_effect = require('../../utils/effect.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/tabs/use-tabs.ts
+const { DescendantsContext: TabDescendantsContext, useDescendant: useTabDescendant, useDescendants: useTabDescendants } = require_hooks_use_descendant_index.createDescendant();
+const { DescendantsContext: TabPanelDescendantsContext, useDescendant: useTabPanelDescendant, useDescendants: useTabPanelDescendants } = require_hooks_use_descendant_index.createDescendant();
+const [TabsContext, useTabsContext] = require_utils_context.createContext({ name: "TabsContext" });
+const useTabs = ({ id, defaultIndex = 0, index: indexProp, manual = false, orientation = "horizontal", onChange,...rest } = {}) => {
+	const uuid = (0, react.useId)();
+	const tabDescendants = useTabDescendants();
+	const tabPanelDescendants = useTabPanelDescendants();
+	const [index, setIndex] = require_hooks_use_controllable_state_index.useControllableState({
+		defaultValue: defaultIndex,
+		value: indexProp,
+		onChange
+	});
+	const [focusedIndex, setFocusedIndex] = (0, react.useState)(index);
+	const horizontal = orientation === "horizontal";
+	id ??= uuid;
+	const onFocusFirstTab = (0, react.useCallback)(() => {
+		const first = tabDescendants.enabledFirstValue();
+		if (first) first.node.focus();
+	}, [tabDescendants]);
+	const onFocusLastTab = (0, react.useCallback)(() => {
+		const last = tabDescendants.enabledLastValue();
+		if (last) last.node.focus();
+	}, [tabDescendants]);
+	const onFocusNextTab = (0, react.useCallback)(() => {
+		const next = tabDescendants.enabledNextValue(focusedIndex);
+		if (next) next.node.focus();
+	}, [tabDescendants, focusedIndex]);
+	const onFocusPrevTab = (0, react.useCallback)(() => {
+		const prev = tabDescendants.enabledPrevValue(focusedIndex);
+		if (prev) prev.node.focus();
+	}, [tabDescendants, focusedIndex]);
+	const onKeyDown = (0, react.useCallback)((ev) => {
+		require_utils_dom.runKeyAction(ev, {
+			ArrowDown: !horizontal ? onFocusNextTab : void 0,
+			ArrowLeft: horizontal ? onFocusPrevTab : void 0,
+			ArrowRight: horizontal ? onFocusNextTab : void 0,
+			ArrowUp: !horizontal ? onFocusPrevTab : void 0,
+			End: onFocusLastTab,
+			Home: onFocusFirstTab
+		});
+	}, [
+		horizontal,
+		onFocusNextTab,
+		onFocusPrevTab,
+		onFocusLastTab,
+		onFocusFirstTab
+	]);
+	require_utils_effect.useUpdateEffect(() => {
+		if ((0, require_utils_index.utils_exports.isUndefined)(indexProp)) return;
+		setIndex(indexProp);
+		setFocusedIndex(indexProp);
+	}, [indexProp]);
+	const getRootProps = (0, react.useCallback)(({ ref,...props } = {}) => ({
+		"data-orientation": orientation,
+		...rest,
+		...props,
+		ref: require_utils_ref.mergeRefs(ref, rest.ref)
+	}), [orientation, rest]);
+	const getListProps = (0, react.useCallback)((props = {}) => ({
+		"aria-orientation": orientation,
+		role: "tablist",
+		...props,
+		onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props.onKeyDown, onKeyDown)
+	}), [orientation, onKeyDown]);
+	return {
+		focusedIndex,
+		index,
+		manual,
+		orientation,
+		setFocusedIndex,
+		setIndex,
+		tabDescendants,
+		tabPanelDescendants,
+		getListProps,
+		getRootProps
+	};
+};
+const useTab = ({ id, disabled,...rest } = {}) => {
+	const uuid = (0, react.useId)();
+	const { index: selectedIndex, manual, orientation, setFocusedIndex, setIndex } = useTabsContext();
+	const { index, register } = useTabDescendant({ disabled });
+	const { descendants } = useTabPanelDescendant();
+	const tabPanelId = descendants.value(index)?.node.id;
+	const selected = index === selectedIndex;
+	id ??= uuid;
+	const onClick = (0, react.useCallback)(() => {
+		if (!disabled) setIndex(index);
+	}, [
+		index,
+		setIndex,
+		disabled
+	]);
+	const onFocus = (0, react.useCallback)(() => {
+		if (disabled) return;
+		setFocusedIndex(index);
+		if (!manual) setIndex(index);
+	}, [
+		setFocusedIndex,
+		index,
+		manual,
+		disabled,
+		setIndex
+	]);
+	const getRootProps = (0, react.useCallback)(({ ref,...props } = {}) => ({
+		id,
+		type: "button",
+		"aria-controls": tabPanelId,
+		"aria-selected": selected,
+		"data-orientation": orientation,
+		disabled,
+		role: "tab",
+		tabIndex: selected ? 0 : -1,
+		...rest,
+		...props,
+		ref: require_utils_ref.mergeRefs(ref, register),
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, rest.onClick, onClick),
+		onFocus: (0, require_utils_index.utils_exports.handlerAll)(props.onFocus, rest.onFocus, onFocus)
+	}), [
+		disabled,
+		id,
+		onClick,
+		onFocus,
+		orientation,
+		register,
+		rest,
+		selected,
+		tabPanelId
+	]);
+	return {
+		index,
+		selected,
+		getRootProps
+	};
+};
+const useTabPanel = ({ "aria-labelledby": ariaLabelledbyProp,...rest } = {}) => {
+	const id = (0, react.useId)();
+	const { index: selectedIndex, orientation } = useTabsContext();
+	const { index, register } = useTabPanelDescendant();
+	const { descendants } = useTabDescendant();
+	const tabId = descendants.value(index)?.node.id;
+	const selected = index === selectedIndex;
+	const getRootProps = (0, react.useCallback)(({ ref, "aria-labelledby": ariaLabelledby,...props } = {}) => ({
+		id,
+		"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby, tabId),
+		"data-orientation": orientation,
+		hidden: !selected,
+		role: "tabpanel",
+		tabIndex: selected ? 0 : -1,
+		...rest,
+		...props,
+		ref: require_utils_ref.mergeRefs(ref, register)
+	}), [
+		id,
+		ariaLabelledbyProp,
+		orientation,
+		register,
+		rest,
+		selected,
+		tabId
+	]);
+	return {
+		index,
+		selected,
+		getRootProps
+	};
+};
+
+//#endregion
+exports.TabDescendantsContext = TabDescendantsContext;
+exports.TabPanelDescendantsContext = TabPanelDescendantsContext;
+exports.TabsContext = TabsContext;
+exports.useTab = useTab;
+exports.useTabDescendant = useTabDescendant;
+exports.useTabDescendants = useTabDescendants;
+exports.useTabPanel = useTabPanel;
+exports.useTabPanelDescendant = useTabPanelDescendant;
+exports.useTabPanelDescendants = useTabPanelDescendants;
+exports.useTabs = useTabs;
+exports.useTabsContext = useTabsContext;
+//# sourceMappingURL=use-tabs.cjs.map

package/dist/cjs/components/tabs/use-tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tabs.cjs","names":["ev: KeyboardEvent<HTMLDivElement>","getRootProps: PropGetter","getListProps: PropGetter","getRootProps: PropGetter<\"button\">"],"sources":["../../../../src/components/tabs/use-tabs.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendant } from \"../../hooks/use-descendant\"\nimport {\n  createContext,\n  cx,\n  handlerAll,\n  isUndefined,\n  mergeRefs,\n  runKeyAction,\n  useUpdateEffect,\n} from \"../../utils\"\n\nexport const {\n  DescendantsContext: TabDescendantsContext,\n  useDescendant: useTabDescendant,\n  useDescendants: useTabDescendants,\n} = createDescendant<HTMLButtonElement>()\n\nexport const {\n  DescendantsContext: TabPanelDescendantsContext,\n  useDescendant: useTabPanelDescendant,\n  useDescendants: useTabPanelDescendants,\n} = createDescendant<HTMLDivElement>()\n\ninterface TabsContext\n  extends Omit<\n    UseTabsReturn,\n    \"getRootProps\" | \"tabDescendants\" | \"tabPanelDescendants\"\n  > {}\n\nexport const [TabsContext, useTabsContext] = createContext<TabsContext>({\n  name: \"TabsContext\",\n})\n\nexport interface UseTabsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The index of the selected tab.\n   */\n  defaultIndex?: number\n  /**\n   * The index of the selected tab.\n   */\n  index?: number\n  /**\n   * If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter.\n   *\n   * If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.\n   *\n   * @default false\n   */\n  manual?: boolean\n  /**\n   * The orientation of the tabs.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when the index changes.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useTabs = ({\n  id,\n  defaultIndex = 0,\n  index: indexProp,\n  manual = false,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseTabsProps = {}) => {\n  const uuid = useId()\n  const tabDescendants = useTabDescendants()\n  const tabPanelDescendants = useTabPanelDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const [focusedIndex, setFocusedIndex] = useState<number>(index)\n  const horizontal = orientation === \"horizontal\"\n\n  id ??= uuid\n\n  const onFocusFirstTab = useCallback(() => {\n    const first = tabDescendants.enabledFirstValue()\n\n    if (first) first.node.focus()\n  }, [tabDescendants])\n\n  const onFocusLastTab = useCallback(() => {\n    const last = tabDescendants.enabledLastValue()\n\n    if (last) last.node.focus()\n  }, [tabDescendants])\n\n  const onFocusNextTab = useCallback(() => {\n    const next = tabDescendants.enabledNextValue(focusedIndex)\n\n    if (next) next.node.focus()\n  }, [tabDescendants, focusedIndex])\n\n  const onFocusPrevTab = useCallback(() => {\n    const prev = tabDescendants.enabledPrevValue(focusedIndex)\n\n    if (prev) prev.node.focus()\n  }, [tabDescendants, focusedIndex])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: !horizontal ? onFocusNextTab : undefined,\n        ArrowLeft: horizontal ? onFocusPrevTab : undefined,\n        ArrowRight: horizontal ? onFocusNextTab : undefined,\n        ArrowUp: !horizontal ? onFocusPrevTab : undefined,\n        End: onFocusLastTab,\n        Home: onFocusFirstTab,\n      })\n    },\n    [\n      horizontal,\n      onFocusNextTab,\n      onFocusPrevTab,\n      onFocusLastTab,\n      onFocusFirstTab,\n    ],\n  )\n\n  useUpdateEffect(() => {\n    if (isUndefined(indexProp)) return\n\n    setIndex(indexProp)\n    setFocusedIndex(indexProp)\n  }, [indexProp])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      \"data-orientation\": orientation,\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [orientation, rest],\n  )\n\n  const getListProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-orientation\": orientation,\n      role: \"tablist\",\n      ...props,\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [orientation, onKeyDown],\n  )\n\n  return {\n    focusedIndex,\n    index,\n    manual,\n    orientation,\n    setFocusedIndex,\n    setIndex,\n    tabDescendants,\n    tabPanelDescendants,\n    getListProps,\n    getRootProps,\n  }\n}\n\nexport type UseTabsReturn = ReturnType<typeof useTabs>\n\nexport interface UseTabProps extends HTMLProps<\"button\"> {}\n\nexport const useTab = ({ id, disabled, ...rest }: UseTabProps = {}) => {\n  const uuid = useId()\n  const {\n    index: selectedIndex,\n    manual,\n    orientation,\n    setFocusedIndex,\n    setIndex,\n  } = useTabsContext()\n  const { index, register } = useTabDescendant({ disabled })\n  const { descendants } = useTabPanelDescendant()\n  const tabPanelId = descendants.value(index)?.node.id\n  const selected = index === selectedIndex\n\n  id ??= uuid\n\n  const onClick = useCallback(() => {\n    if (!disabled) setIndex(index)\n  }, [index, setIndex, disabled])\n\n  const onFocus = useCallback(() => {\n    if (disabled) return\n\n    setFocusedIndex(index)\n\n    if (!manual) setIndex(index)\n  }, [setFocusedIndex, index, manual, disabled, setIndex])\n\n  const getRootProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id,\n      type: \"button\",\n      \"aria-controls\": tabPanelId,\n      \"aria-selected\": selected,\n      \"data-orientation\": orientation,\n      disabled,\n      role: \"tab\",\n      tabIndex: selected ? 0 : -1,\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, register),\n      onClick: handlerAll(props.onClick, rest.onClick, onClick),\n      onFocus: handlerAll(props.onFocus, rest.onFocus, onFocus),\n    }),\n    [\n      disabled,\n      id,\n      onClick,\n      onFocus,\n      orientation,\n      register,\n      rest,\n      selected,\n      tabPanelId,\n    ],\n  )\n\n  return { index, selected, getRootProps }\n}\n\nexport type UseTabReturn = ReturnType<typeof useTab>\n\nexport interface UseTabPanelProps extends HTMLProps {}\n\nexport const useTabPanel = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  ...rest\n}: UseTabPanelProps = {}) => {\n  const id = useId()\n  const { index: selectedIndex, orientation } = useTabsContext()\n  const { index, register } = useTabPanelDescendant()\n  const { descendants } = useTabDescendant()\n  const tabId = descendants.value(index)?.node.id\n  const selected = index === selectedIndex\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id,\n      \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, tabId),\n      \"data-orientation\": orientation,\n      hidden: !selected,\n      role: \"tabpanel\",\n      tabIndex: selected ? 0 : -1,\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, register),\n    }),\n    [id, ariaLabelledbyProp, orientation, register, rest, selected, tabId],\n  )\n\n  return { index, selected, getRootProps }\n}\n\nexport type UseTabPanelReturn = ReturnType<typeof useTabPanel>\n"],"mappings":"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"}

package/dist/cjs/components/tag/index.cjs

@@ -0,0 +1,7 @@
+const require_components_tag_tag_style = require('./tag.style.cjs');
+const require_components_tag_tag = require('./tag.cjs');
+
+exports.Tag = require_components_tag_tag.Tag;
+exports.TagPropsContext = require_components_tag_tag.TagPropsContext;
+exports.tagStyle = require_components_tag_tag_style.tagStyle;
+exports.useTagPropsContext = require_components_tag_tag.useTagPropsContext;

package/dist/cjs/components/tag/tag.cjs

@@ -0,0 +1,96 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_x_icon = require('../icon/icons/x-icon.cjs');
+const require_providers_i18n_provider_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
+const require_hooks_use_clickable_index = require('../../hooks/use-clickable/index.cjs');
+const require_components_tag_tag_style = require('./tag.style.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/tag/tag.tsx
+const { ComponentContext, PropsContext: TagPropsContext, useComponentContext, usePropsContext: useTagPropsContext, withContext, withProvider } = require_core_components_create_component.createSlotComponent("tag", require_components_tag_tag_style.tagStyle);
+/**
+* `Tag` is a component used to categorize or organize items using keywords that describe them.
+*
+* @see https://yamada-ui.com/components/tag
+*/
+const Tag = withProvider(({ children, disabled, endIcon, startIcon, closeButtonProps, contentProps, iconProps, onClose,...rest }) => {
+	const context = (0, react.useMemo)(() => ({ disabled }), [disabled]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_core_system_factory.styled.span, {
+			"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+			...rest,
+			children: [
+				startIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagStartIcon, {
+					...iconProps,
+					children: startIcon
+				}) : null,
+				children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagContent, {
+					...contentProps,
+					children
+				}) : null,
+				endIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagEndIcon, {
+					...iconProps,
+					children: endIcon
+				}) : null,
+				onClose ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagCloseButton, {
+					onClick: onClose,
+					...closeButtonProps
+				}) : null
+			]
+		})
+	});
+}, "root", { transferProps: ["disabled"] })();
+const TagContent = withContext("span", "content")(void 0, (props) => {
+	const { disabled } = useComponentContext();
+	return {
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+		...props
+	};
+});
+const TagStartIcon = withContext("span", ["icon", "start"])(void 0, (props) => {
+	const { disabled } = useComponentContext();
+	return {
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+		...props
+	};
+});
+const TagEndIcon = withContext("span", ["icon", "end"])(void 0, (props) => {
+	const { disabled } = useComponentContext();
+	return {
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+		...props
+	};
+});
+const TagCloseButton = withContext("span", ["icon", "closeButton"])(void 0, ({ children,...props }) => {
+	const ref = (0, react.useRef)(null);
+	const { disabled } = useComponentContext();
+	const rest = require_hooks_use_clickable_index.useClickable({
+		ref,
+		disabled,
+		...props
+	});
+	const { t } = require_providers_i18n_provider_i18n_provider.useI18n("tag");
+	return {
+		"aria-label": t("Close tag"),
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_x_icon.XIcon, {}),
+		...rest
+	};
+});
+
+//#endregion
+exports.ComponentContext = ComponentContext;
+exports.Tag = Tag;
+exports.TagPropsContext = TagPropsContext;
+exports.useComponentContext = useComponentContext;
+exports.useTagPropsContext = useTagPropsContext;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=tag.cjs.map

package/dist/cjs/components/tag/tag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.cjs","names":["tagStyle","styled","XIcon"],"sources":["../../../../src/components/tag/tag.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEventHandler, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TagStyle } from \"./tag.style\"\nimport { useMemo, useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr } from \"../../utils\"\nimport { XIcon } from \"../icon\"\nimport { tagStyle } from \"./tag.style\"\n\ninterface ComponentContext extends Pick<TagProps, \"disabled\"> {}\n\nexport interface TagProps\n  extends HTMLStyledProps<\"span\">,\n    ThemeProps<TagStyle> {\n  /**\n   * If `true`, the tag is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Icon to be displayed to the end of the tag.\n   */\n  endIcon?: ReactNode\n  /**\n   * Icon to be displayed to the start of the tag.\n   */\n  startIcon?: ReactNode\n  /**\n   * Props for tag close button element.\n   */\n  closeButtonProps?: TagCloseButtonProps\n  /**\n   * Props for content element.\n   */\n  contentProps?: TagContentProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: HTMLStyledProps<\"span\">\n  /**\n   * Function to be executed when the close button is clicked.\n   */\n  onClose?: MouseEventHandler<HTMLElement>\n}\n\nexport const {\n  ComponentContext,\n  PropsContext: TagPropsContext,\n  useComponentContext,\n  usePropsContext: useTagPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TagProps, TagStyle, ComponentContext>(\"tag\", tagStyle)\n\n/**\n * `Tag` is a component used to categorize or organize items using keywords that describe them.\n *\n * @see https://yamada-ui.com/components/tag\n */\nexport const Tag = withProvider(\n  ({\n    children,\n    disabled,\n    endIcon,\n    startIcon,\n    closeButtonProps,\n    contentProps,\n    iconProps,\n    onClose,\n    ...rest\n  }) => {\n    const context = useMemo(() => ({ disabled }), [disabled])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.span data-disabled={dataAttr(disabled)} {...rest}>\n          {startIcon ? (\n            <TagStartIcon {...iconProps}>{startIcon}</TagStartIcon>\n          ) : null}\n\n          {children ? (\n            <TagContent {...contentProps}>{children}</TagContent>\n          ) : null}\n\n          {endIcon ? <TagEndIcon {...iconProps}>{endIcon}</TagEndIcon> : null}\n\n          {onClose ? (\n            <TagCloseButton onClick={onClose} {...closeButtonProps} />\n          ) : null}\n        </styled.span>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"disabled\"] },\n)()\n\ninterface TagContentProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagContent = withContext<\"span\", TagContentProps>(\"span\", \"content\")(\n  undefined,\n  (props) => {\n    const { disabled } = useComponentContext()\n\n    return { \"data-disabled\": dataAttr(disabled), ...props }\n  },\n)\n\ninterface TagStartIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagStartIcon = withContext<\"span\", TagStartIconProps>(\"span\", [\n  \"icon\",\n  \"start\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagEndIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagEndIcon = withContext<\"span\", TagEndIconProps>(\"span\", [\n  \"icon\",\n  \"end\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagCloseButtonProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagCloseButton = withContext<\"span\", TagCloseButtonProps>(\"span\", [\n  \"icon\",\n  \"closeButton\",\n])(undefined, ({ children, ...props }) => {\n  const ref = useRef<HTMLSpanElement>(null)\n  const { disabled } = useComponentContext()\n  const rest = useClickable<HTMLSpanElement>({ ref, disabled, ...props })\n  const { t } = useI18n(\"tag\")\n\n  return {\n    \"aria-label\": t(\"Close tag\"),\n    \"data-disabled\": dataAttr(disabled),\n    children: children || <XIcon />,\n    ...rest,\n  }\n})\n"],"mappings":";;;;;;;;;;;;;;;AAkDA,MAAa,EACX,kBACA,cAAc,iBACd,qBACA,iBAAiB,oBACjB,aACA,cACD,GAAG,6DAA0D,OAAOA,0CAAS;;;;;;AAO9E,MAAa,MAAM,aACjB,CAAC,EACC,UACA,UACA,SACA,WACA,kBACA,cACA,WACA,QACA,GAAG,MACJ,KAAK;CACJ,MAAM,UAAU,mBAAQ,OAAO,EAAE,SAAU,IAAG,CAAC,QAAS,EAAC;AAEzD,wBACE,2BAAC;EAAiB,OAAO;4BACvB,4BAACC,mCAAO;GAAK,iBAAe,gDAAS,SAAS;GAAE,GAAI;;IACjD,4BACC,2BAAC;KAAa,GAAI;eAAY;MAAyB,GACrD;IAEH,2BACC,2BAAC;KAAW,GAAI;KAAe;MAAsB,GACnD;IAEH,0BAAU,2BAAC;KAAW,GAAI;eAAY;MAAqB,GAAG;IAE9D,0BACC,2BAAC;KAAe,SAAS;KAAS,GAAI;MAAoB,GACxD;;IACQ;GACG;AAEtB,GACD,QACA,EAAE,eAAe,CAAC,UAAW,EAAE,EAChC,EAAE;AAIH,MAAM,aAAa,YAAqC,QAAQ,UAAU,SAExE,CAAC,UAAU;CACT,MAAM,EAAE,UAAU,GAAG,qBAAqB;AAE1C,QAAO;EAAE,iBAAiB,gDAAS,SAAS;EAAE,GAAG;CAAO;AACzD,EACF;AAID,MAAM,eAAe,YAAuC,QAAQ,CAClE,QACA,OACD,EAAC,SAAY,CAAC,UAAU;CACvB,MAAM,EAAE,UAAU,GAAG,qBAAqB;AAE1C,QAAO;EAAE,iBAAiB,gDAAS,SAAS;EAAE,GAAG;CAAO;AACzD,EAAC;AAIF,MAAM,aAAa,YAAqC,QAAQ,CAC9D,QACA,KACD,EAAC,SAAY,CAAC,UAAU;CACvB,MAAM,EAAE,UAAU,GAAG,qBAAqB;AAE1C,QAAO;EAAE,iBAAiB,gDAAS,SAAS;EAAE,GAAG;CAAO;AACzD,EAAC;AAIF,MAAM,iBAAiB,YAAyC,QAAQ,CACtE,QACA,aACD,EAAC,SAAY,CAAC,EAAE,SAAU,GAAG,OAAO,KAAK;CACxC,MAAM,MAAM,kBAAwB,KAAK;CACzC,MAAM,EAAE,UAAU,GAAG,qBAAqB;CAC1C,MAAM,OAAO,+CAA8B;EAAE;EAAK;EAAU,GAAG;CAAO,EAAC;CACvE,MAAM,EAAE,GAAG,GAAG,sDAAQ,MAAM;AAE5B,QAAO;EACL,cAAc,EAAE,YAAY;EAC5B,iBAAiB,gDAAS,SAAS;EACnC,UAAU,4BAAY,2BAACC,yBAAQ;EAC/B,GAAG;CACJ;AACF,EAAC"}

package/dist/cjs/components/tag/tag.style.cjs

@@ -0,0 +1,84 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/tag/tag.style.ts
+const tagStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		closeButton: {
+			alignItems: "center",
+			color: "currentcolor",
+			cursor: "pointer",
+			display: "inline-flex",
+			justifyContent: "center",
+			rounded: "full",
+			transitionDuration: "moderate",
+			transitionProperty: "common",
+			_hover: { layerStyle: "hover" },
+			_active: { layerStyle: "active" },
+			_disabled: { layerStyle: "disabled" }
+		},
+		content: { lineClamp: 1 },
+		endIcon: {},
+		icon: {
+			alignItems: "center",
+			display: "inline-flex",
+			flexShrink: 0,
+			justifyContent: "center"
+		},
+		root: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: "1",
+			maxW: "full",
+			rounded: "l2",
+			userSelect: "none",
+			verticalAlign: "top"
+		},
+		startIcon: {}
+	},
+	variants: {
+		outline: { root: { layerStyle: "outline" } },
+		solid: { root: { layerStyle: "solid" } },
+		subtle: { root: { layerStyle: "subtle" } },
+		surface: { root: { layerStyle: "surface" } }
+	},
+	sizes: {
+		sm: {
+			element: { fontSize: "1.25em" },
+			root: {
+				fontSize: "xs",
+				lineHeight: "{sizes.5}",
+				minH: "5",
+				minW: "5",
+				px: "1.5"
+			}
+		},
+		md: {
+			element: { fontSize: "1.25em" },
+			root: {
+				fontSize: "sm",
+				lineHeight: "{sizes.6}",
+				minH: "6",
+				minW: "6",
+				px: "2"
+			}
+		},
+		lg: {
+			element: { fontSize: "1.25em" },
+			root: {
+				fontSize: "md",
+				lineHeight: "{sizes.7}",
+				minH: "7",
+				minW: "7",
+				px: "2.5"
+			}
+		}
+	},
+	defaultProps: {
+		size: "md",
+		variant: "subtle"
+	}
+});
+
+//#endregion
+exports.tagStyle = tagStyle;
+//# sourceMappingURL=tag.style.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.style.cjs","names":[],"sources":["../../../../src/components/tag/tag.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const tagStyle = defineComponentSlotStyle({\n  base: {\n    closeButton: {\n      alignItems: \"center\",\n      color: \"currentcolor\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      rounded: \"full\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _hover: {\n        layerStyle: \"hover\",\n      },\n      _active: {\n        layerStyle: \"active\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n    content: {\n      lineClamp: 1,\n    },\n    endIcon: {},\n    icon: {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      flexShrink: 0,\n      justifyContent: \"center\",\n    },\n    root: {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      gap: \"1\",\n      maxW: \"full\",\n      rounded: \"l2\",\n      userSelect: \"none\",\n      verticalAlign: \"top\",\n    },\n    startIcon: {},\n  },\n\n  variants: {\n    outline: {\n      root: {\n        layerStyle: \"outline\",\n      },\n    },\n    solid: {\n      root: {\n        layerStyle: \"solid\",\n      },\n    },\n    subtle: {\n      root: {\n        layerStyle: \"subtle\",\n      },\n    },\n    surface: {\n      root: {\n        layerStyle: \"surface\",\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      element: {\n        fontSize: \"1.25em\",\n      },\n      root: {\n        fontSize: \"xs\",\n        lineHeight: \"{sizes.5}\",\n        minH: \"5\",\n        minW: \"5\",\n        px: \"1.5\",\n      },\n    },\n    md: {\n      element: {\n        fontSize: \"1.25em\",\n      },\n      root: {\n        fontSize: \"sm\",\n        lineHeight: \"{sizes.6}\",\n        minH: \"6\",\n        minW: \"6\",\n        px: \"2\",\n      },\n    },\n    lg: {\n      element: {\n        fontSize: \"1.25em\",\n      },\n      root: {\n        fontSize: \"md\",\n        lineHeight: \"{sizes.7}\",\n        minH: \"7\",\n        minW: \"7\",\n        px: \"2.5\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"subtle\",\n  },\n})\n\nexport type TagStyle = typeof tagStyle\n"],"mappings":";;;AAEA,MAAa,WAAW,oDAAyB;CAC/C,MAAM;EACJ,aAAa;GACX,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,gBAAgB;GAChB,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,QAAQ,EACN,YAAY,QACb;GACD,SAAS,EACP,YAAY,SACb;GACD,WAAW,EACT,YAAY,WACb;EACF;EACD,SAAS,EACP,WAAW,EACZ;EACD,SAAS,CAAE;EACX,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,gBAAgB;EACjB;EACD,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;GACL,MAAM;GACN,SAAS;GACT,YAAY;GACZ,eAAe;EAChB;EACD,WAAW,CAAE;CACd;CAED,UAAU;EACR,SAAS,EACP,MAAM,EACJ,YAAY,UACb,EACF;EACD,OAAO,EACL,MAAM,EACJ,YAAY,QACb,EACF;EACD,QAAQ,EACN,MAAM,EACJ,YAAY,SACb,EACF;EACD,SAAS,EACP,MAAM,EACJ,YAAY,UACb,EACF;CACF;CAED,OAAO;EACL,IAAI;GACF,SAAS,EACP,UAAU,SACX;GACD,MAAM;IACJ,UAAU;IACV,YAAY;IACZ,MAAM;IACN,MAAM;IACN,IAAI;GACL;EACF;EACD,IAAI;GACF,SAAS,EACP,UAAU,SACX;GACD,MAAM;IACJ,UAAU;IACV,YAAY;IACZ,MAAM;IACN,MAAM;IACN,IAAI;GACL;EACF;EACD,IAAI;GACF,SAAS,EACP,UAAU,SACX;GACD,MAAM;IACJ,UAAU;IACV,YAAY;IACZ,MAAM;IACN,MAAM;IACN,IAAI;GACL;EACF;CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;CACV;AACF,EAAC"}

package/dist/cjs/components/text/index.cjs

@@ -0,0 +1,7 @@
+const require_components_text_text_style = require('./text.style.cjs');
+const require_components_text_text = require('./text.cjs');
+
+exports.Text = require_components_text_text.Text;
+exports.TextPropsContext = require_components_text_text.TextPropsContext;
+exports.textStyle = require_components_text_text_style.textStyle;
+exports.useTextPropsContext = require_components_text_text.useTextPropsContext;

package/dist/cjs/components/text/text.cjs

@@ -0,0 +1,26 @@
+"use client";
+
+
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_text_text_style = require('./text.style.cjs');
+
+//#region src/components/text/text.tsx
+const { PropsContext: TextPropsContext, usePropsContext: useTextPropsContext, withContext } = require_core_components_create_component.createComponent("text", require_components_text_text_style.textStyle);
+/**
+* `Text` is a component that represents a paragraph of text. By default, it renders a `p` element.
+*
+* @see https://yamada-ui.com/components/text
+*/
+const Text = withContext("p")(void 0, ({ align: textAlign, casing: textTransform, decoration: textDecoration,...rest }) => ({
+	textAlign,
+	textDecoration,
+	textTransform,
+	...rest
+}));
+
+//#endregion
+exports.Text = Text;
+exports.TextPropsContext = TextPropsContext;
+exports.useTextPropsContext = useTextPropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=text.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.cjs","names":["textStyle"],"sources":["../../../../src/components/text/text.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TextStyle } from \"./text.style\"\nimport { createComponent } from \"../../core\"\nimport { textStyle } from \"./text.style\"\n\nexport interface TextProps extends HTMLStyledProps<\"p\">, ThemeProps<TextStyle> {\n  /**\n   * The CSS `text-align` property.\n   */\n  align?: CSSProps[\"textAlign\"]\n  /**\n   * The CSS `text-transform` property.\n   */\n  casing?: CSSProps[\"textTransform\"]\n  /**\n   * The CSS `text-decoration` property.\n   */\n  decoration?: CSSProps[\"textDecoration\"]\n}\n\nexport const {\n  PropsContext: TextPropsContext,\n  usePropsContext: useTextPropsContext,\n  withContext,\n} = createComponent<TextProps, TextStyle>(\"text\", textStyle)\n\n/**\n * `Text` is a component that represents a paragraph of text. By default, it renders a `p` element.\n *\n * @see https://yamada-ui.com/components/text\n */\nexport const Text = withContext(\"p\")(\n  undefined,\n  ({\n    align: textAlign,\n    casing: textTransform,\n    decoration: textDecoration,\n    ...rest\n  }) => ({\n    textAlign,\n    textDecoration,\n    textTransform,\n    ...rest,\n  }),\n)\n"],"mappings":";;;;;;;AAsBA,MAAa,EACX,cAAc,kBACd,iBAAiB,qBACjB,aACD,GAAG,yDAAsC,QAAQA,6CAAU;;;;;;AAO5D,MAAa,OAAO,YAAY,IAAI,SAElC,CAAC,EACC,OAAO,WACP,QAAQ,eACR,YAAY,eACZ,GAAG,MACJ,MAAM;CACL;CACA;CACA;CACA,GAAG;AACJ,GACF"}

package/dist/cjs/components/text/text.style.cjs

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

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

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