@yamada-ui/react 2.2.0-next-20260324222629 → 2.2.0-next-20260324223405

package/dist/cjs/components/timeline/timeline.cjs

@@ -6,6 +6,7 @@ const require_var = require('../../core/system/var.cjs');
 const require_factory = require('../../core/system/factory.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
 const require_timeline_style = require('./timeline.style.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -17,8 +18,9 @@ const { ComponentContext, PropsContext: TimelinePropsContext, useComponentContex
 *
 * @see https://yamada-ui.com/docs/components/timeline
 */
-const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }) => {
+const TimelineRoot = withProvider(({ variant: variantProp, children, index = -1, items = [], ...rest }) => {
 	const context = (0, react.useMemo)(() => ({ index }), [index]);
+	const variant = require_hooks_use_value_index.useValue(variantProp);
 	const computedChildren = (0, react.useMemo)(() => {
 		if (children) return children;
 		return items.map(({ align = "start", content, description, indicator, title, connectorProps, contentProps, descriptionProps, indicatorProps, titleProps, ...rest$1 }, index$1) => {
@@ -27,7 +29,7 @@ const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }
 					...connectorProps,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineIndicator, {
 						...indicatorProps,
-						children: indicator
+						children: indicator ?? (variant === "number" ? index$1 + 1 : void 0)
 					})
 				}),
 				content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineContent, {
@@ -47,7 +49,11 @@ const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }
 				children: [align === "start" ? children$1.connector : children$1.content, align === "start" ? children$1.content : children$1.connector]
 			}, index$1);
 		});
-	}, [items, children]);
+	}, [
+		children,
+		items,
+		variant
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
 		value: context,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.ul, {
@@ -55,7 +61,7 @@ const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }
 			children: computedChildren
 		})
 	});
-}, "root")(void 0, ({ indicatorFill, indicatorSize, indicatorStroke, separatorColor, separatorGap, separatorStyle, separatorWidth, ...rest }) => ({
+}, "root", { transferProps: ["variant"] })(void 0, ({ indicatorFill, indicatorSize, indicatorStroke, separatorColor, separatorGap, separatorStyle, separatorWidth, ...rest }) => ({
 	"--indicator-fill": require_var.varAttr(indicatorFill, "colors"),
 	"--indicator-size": require_var.varAttr(indicatorSize, "sizes"),
 	"--indicator-stroke": require_var.varAttr(indicatorStroke, "colors"),

package/dist/cjs/components/timeline/timeline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.cjs","names":["createSlotComponent","timelineStyle","rest","children","index","styled","varAttr"],"sources":["../../../../src/components/timeline/timeline.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TimelineStyle } from \"./timeline.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { dataAttr, isUndefined } from \"../../utils\"\nimport { timelineStyle } from \"./timeline.style\"\n\nexport interface TimelineItem extends Omit<\n  TimelineItemProps,\n  \"content\" | \"title\"\n> {\n  align?: \"end\" | \"start\"\n  content?: ReactNode\n  description?: ReactNode\n  indicator?: ReactNode\n  title?: ReactNode\n  connectorProps?: TimelineConnectorProps\n  contentProps?: TimelineContentProps\n  descriptionProps?: TimelineDescriptionProps\n  indicatorProps?: TimelineIndicatorProps\n  titleProps?: TimelineTitleProps\n}\n\ninterface ComponentContext extends Pick<TimelineRootProps, \"index\"> {}\n\nexport interface TimelineRootProps\n  extends HTMLStyledProps<\"ul\">, ThemeProps<TimelineStyle> {\n  /**\n   * The index of the active timeline item.\n   */\n  index?: number\n  /**\n   * The fill color of the indicator.\n   */\n  indicatorFill?: CSSProps[\"bg\"]\n  /**\n   * The size of the indicator.\n   */\n  indicatorSize?: CSSProps[\"boxSize\"]\n  /**\n   * The stroke color of the indicator.\n   */\n  indicatorStroke?: CSSProps[\"color\"]\n  /**\n   * If provided, generate timeline components based on items.\n   */\n  items?: TimelineItem[]\n  /**\n   * The color of the separator.\n   */\n  separatorColor?: CSSProps[\"color\"]\n  /**\n   * The gap of the separator.\n   */\n  separatorGap?: CSSProps[\"gap\"]\n  /**\n   * The style of the separator.\n   */\n  separatorStyle?: CSSProps[\"borderStyle\"]\n  /**\n   * The width of the separator.\n   */\n  separatorWidth?: CSSProps[\"width\"]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TimelinePropsContext,\n  useComponentContext,\n  usePropsContext: useTimelinePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TimelineRootProps, TimelineStyle, ComponentContext>(\n  \"timeline\",\n  timelineStyle,\n)\n\nexport { TimelinePropsContext, useTimelinePropsContext }\n\n/**\n * `Timeline` is a component that is used to display a list of events in chronological order.\n *\n * @see https://yamada-ui.com/docs/components/timeline\n */\nexport const TimelineRoot = withProvider(\n  ({ children, index = -1, items = [], ...rest }) => {\n    const context = useMemo(() => ({ index }), [index])\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items.map(\n        (\n          {\n            align = \"start\",\n            content,\n            description,\n            indicator,\n            title,\n            connectorProps,\n            contentProps,\n            descriptionProps,\n            indicatorProps,\n            titleProps,\n            ...rest\n          },\n          index,\n        ) => {\n          const children = {\n            connector: (\n              <TimelineConnector {...connectorProps}>\n                <TimelineIndicator {...indicatorProps}>\n                  {indicator}\n                </TimelineIndicator>\n              </TimelineConnector>\n            ),\n            content: (\n              <TimelineContent {...contentProps}>\n                {content ?? (\n                  <>\n                    <TimelineTitle {...titleProps}>{title}</TimelineTitle>\n                    <TimelineDescription {...descriptionProps}>\n                      {description}\n                    </TimelineDescription>\n                  </>\n                )}\n              </TimelineContent>\n            ),\n          }\n\n          return (\n            <TimelineItem key={index} index={index} {...rest}>\n              {align === \"start\" ? children.connector : children.content}\n              {align === \"start\" ? children.content : children.connector}\n            </TimelineItem>\n          )\n        },\n      )\n    }, [items, children])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.ul {...rest}>{computedChildren}</styled.ul>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)(\n  undefined,\n  ({\n    indicatorFill,\n    indicatorSize,\n    indicatorStroke,\n    separatorColor,\n    separatorGap,\n    separatorStyle,\n    separatorWidth,\n    ...rest\n  }) => ({\n    \"--indicator-fill\": varAttr(indicatorFill, \"colors\"),\n    \"--indicator-size\": varAttr(indicatorSize, \"sizes\"),\n    \"--indicator-stroke\": varAttr(indicatorStroke, \"colors\"),\n    \"--separator-color\": varAttr(separatorColor, \"colors\"),\n    \"--separator-gap\": varAttr(separatorGap, \"spaces\"),\n    \"--separator-style\": varAttr(separatorStyle),\n    \"--separator-width\": varAttr(separatorWidth, \"sizes\"),\n    ...rest,\n  }),\n)\n\nexport interface TimelineItemProps extends HTMLStyledProps<\"li\"> {\n  /**\n   * The index of the timeline item.\n   */\n  index?: number\n}\n\nexport const TimelineItem = withContext<\"li\", TimelineItemProps>(\"li\", \"item\")(\n  undefined,\n  ({ index, ...rest }) => {\n    const { index: currentIndex } = useComponentContext()\n    const active =\n      !isUndefined(index) && !isUndefined(currentIndex) && index <= currentIndex\n\n    return {\n      ...rest,\n      \"data-active\": dataAttr(active),\n      \"data-index\": index,\n    }\n  },\n)\n\nexport interface TimelineConnectorProps extends HTMLStyledProps {}\n\nexport const TimelineConnector = withContext<\"div\", TimelineConnectorProps>(\n  \"div\",\n  \"connector\",\n)({ \"data-connector\": \"\" })\n\nexport interface TimelineIndicatorProps extends HTMLStyledProps {}\n\nconst TimelineIcon = styled(\"div\", {\n  base: {\n    bg: \"{indicator-fill}\",\n    borderColor: \"{indicator-stroke}\",\n    borderWidth: \"{separator-width}\",\n    boxSize: \"full\",\n    rounded: \"{indicator-rounded}\",\n  },\n})\n\nexport const TimelineIndicator = withContext<\"div\", TimelineIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)(undefined, ({ children = <TimelineIcon />, ...rest }) => ({\n  children,\n  ...rest,\n}))\n\nexport interface TimelineContentProps extends HTMLStyledProps {}\n\nexport const TimelineContent = withContext<\"div\", TimelineContentProps>(\n  \"div\",\n  \"content\",\n)({ \"data-content\": \"\" })\n\nexport interface TimelineTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const TimelineTitle = withContext<\"h3\", TimelineTitleProps>(\n  \"h3\",\n  \"title\",\n)()\n\nexport interface TimelineDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const TimelineDescription = withContext<\"p\", TimelineDescriptionProps>(\n  \"p\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAoEA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,6CACF,YACAC,qCACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,UAAU,QAAQ,IAAI,QAAQ,EAAE,EAAE,GAAG,WAAW;CACjD,MAAM,oCAAyB,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CACnD,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAET,EACE,QAAQ,SACR,SACA,aACA,WACA,OACA,gBACA,cACA,kBACA,gBACA,YACA,GAAGC,UAEL,YACG;GACH,MAAMC,aAAW;IACf,WACE,2CAAC;KAAkB,GAAI;eACrB,2CAAC;MAAkB,GAAI;gBACpB;OACiB;MACF;IAEtB,SACE,2CAAC;KAAgB,GAAI;eAClB,WACC,qFACE,2CAAC;MAAc,GAAI;gBAAa;OAAsB,EACtD,2CAAC;MAAoB,GAAI;gBACtB;OACmB,IACrB;MAEW;IAErB;AAED,UACE,4CAAC;IAAyB,OAAOC;IAAO,GAAIF;eACzC,UAAU,UAAUC,WAAS,YAAYA,WAAS,SAClD,UAAU,UAAUA,WAAS,UAAUA,WAAS;MAFhCC,QAGJ;IAGpB;IACA,CAAC,OAAO,SAAS,CAAC;AAErB,QACE,2CAAC;EAAiB,OAAO;YACvB,2CAACC,uBAAO;GAAG,GAAI;aAAO;IAA6B;GAClC;GAGvB,OACD,CACC,SACC,EACC,eACA,eACA,iBACA,gBACA,cACA,gBACA,gBACA,GAAG,YACE;CACL,oBAAoBC,oBAAQ,eAAe,SAAS;CACpD,oBAAoBA,oBAAQ,eAAe,QAAQ;CACnD,sBAAsBA,oBAAQ,iBAAiB,SAAS;CACxD,qBAAqBA,oBAAQ,gBAAgB,SAAS;CACtD,mBAAmBA,oBAAQ,cAAc,SAAS;CAClD,qBAAqBA,oBAAQ,eAAe;CAC5C,qBAAqBA,oBAAQ,gBAAgB,QAAQ;CACrD,GAAG;CACJ,EACF;AASD,MAAa,eAAe,YAAqC,MAAM,OAAO,CAC5E,SACC,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,OAAO,iBAAiB,qBAAqB;CACrD,MAAM,SACJ,oDAAa,MAAM,IAAI,oDAAa,aAAa,IAAI,SAAS;AAEhE,QAAO;EACL,GAAG;EACH,+DAAwB,OAAO;EAC/B,cAAc;EACf;EAEJ;AAID,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,eAAeD,uBAAO,OAAO,EACjC,MAAM;CACJ,IAAI;CACJ,aAAa;CACb,aAAa;CACb,SAAS;CACT,SAAS;CACV,EACF,CAAC;AAEF,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,SAAY,EAAE,WAAW,2CAAC,iBAAe,EAAE,GAAG,YAAY;CAC1D;CACA,GAAG;CACJ,EAAE;AAIH,MAAa,kBAAkB,YAC7B,OACA,UACD,CAAC,EAAE,gBAAgB,IAAI,CAAC;AAIzB,MAAa,gBAAgB,YAC3B,MACA,QACD,EAAE;AAIH,MAAa,sBAAsB,YACjC,KACA,cACD,EAAE"}
+{"version":3,"file":"timeline.cjs","names":["createSlotComponent","timelineStyle","useValue","rest","children","index","styled","varAttr"],"sources":["../../../../src/components/timeline/timeline.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TimelineStyle } from \"./timeline.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { dataAttr, isUndefined } from \"../../utils\"\nimport { timelineStyle } from \"./timeline.style\"\n\nexport interface TimelineItem extends Omit<\n  TimelineItemProps,\n  \"content\" | \"title\"\n> {\n  align?: \"end\" | \"start\"\n  content?: ReactNode\n  description?: ReactNode\n  indicator?: ReactNode\n  title?: ReactNode\n  connectorProps?: TimelineConnectorProps\n  contentProps?: TimelineContentProps\n  descriptionProps?: TimelineDescriptionProps\n  indicatorProps?: TimelineIndicatorProps\n  titleProps?: TimelineTitleProps\n}\n\ninterface ComponentContext extends Pick<TimelineRootProps, \"index\"> {}\n\nexport interface TimelineRootProps\n  extends HTMLStyledProps<\"ul\">, ThemeProps<TimelineStyle> {\n  /**\n   * The index of the active timeline item.\n   */\n  index?: number\n  /**\n   * The fill color of the indicator.\n   */\n  indicatorFill?: CSSProps[\"bg\"]\n  /**\n   * The size of the indicator.\n   */\n  indicatorSize?: CSSProps[\"boxSize\"]\n  /**\n   * The stroke color of the indicator.\n   */\n  indicatorStroke?: CSSProps[\"color\"]\n  /**\n   * If provided, generate timeline components based on items.\n   */\n  items?: TimelineItem[]\n  /**\n   * The color of the separator.\n   */\n  separatorColor?: CSSProps[\"color\"]\n  /**\n   * The gap of the separator.\n   */\n  separatorGap?: CSSProps[\"gap\"]\n  /**\n   * The style of the separator.\n   */\n  separatorStyle?: CSSProps[\"borderStyle\"]\n  /**\n   * The width of the separator.\n   */\n  separatorWidth?: CSSProps[\"width\"]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TimelinePropsContext,\n  useComponentContext,\n  usePropsContext: useTimelinePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TimelineRootProps, TimelineStyle, ComponentContext>(\n  \"timeline\",\n  timelineStyle,\n)\n\nexport { TimelinePropsContext, useTimelinePropsContext }\n\n/**\n * `Timeline` is a component that is used to display a list of events in chronological order.\n *\n * @see https://yamada-ui.com/docs/components/timeline\n */\nexport const TimelineRoot = withProvider(\n  ({ variant: variantProp, children, index = -1, items = [], ...rest }) => {\n    const context = useMemo(() => ({ index }), [index])\n    const variant = useValue(variantProp)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items.map(\n        (\n          {\n            align = \"start\",\n            content,\n            description,\n            indicator,\n            title,\n            connectorProps,\n            contentProps,\n            descriptionProps,\n            indicatorProps,\n            titleProps,\n            ...rest\n          },\n          index,\n        ) => {\n          const children = {\n            connector: (\n              <TimelineConnector {...connectorProps}>\n                <TimelineIndicator {...indicatorProps}>\n                  {indicator ?? (variant === \"number\" ? index + 1 : undefined)}\n                </TimelineIndicator>\n              </TimelineConnector>\n            ),\n            content: (\n              <TimelineContent {...contentProps}>\n                {content ?? (\n                  <>\n                    <TimelineTitle {...titleProps}>{title}</TimelineTitle>\n                    <TimelineDescription {...descriptionProps}>\n                      {description}\n                    </TimelineDescription>\n                  </>\n                )}\n              </TimelineContent>\n            ),\n          }\n\n          return (\n            <TimelineItem key={index} index={index} {...rest}>\n              {align === \"start\" ? children.connector : children.content}\n              {align === \"start\" ? children.content : children.connector}\n            </TimelineItem>\n          )\n        },\n      )\n    }, [children, items, variant])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.ul {...rest}>{computedChildren}</styled.ul>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"variant\"] },\n)(\n  undefined,\n  ({\n    indicatorFill,\n    indicatorSize,\n    indicatorStroke,\n    separatorColor,\n    separatorGap,\n    separatorStyle,\n    separatorWidth,\n    ...rest\n  }) => ({\n    \"--indicator-fill\": varAttr(indicatorFill, \"colors\"),\n    \"--indicator-size\": varAttr(indicatorSize, \"sizes\"),\n    \"--indicator-stroke\": varAttr(indicatorStroke, \"colors\"),\n    \"--separator-color\": varAttr(separatorColor, \"colors\"),\n    \"--separator-gap\": varAttr(separatorGap, \"spaces\"),\n    \"--separator-style\": varAttr(separatorStyle),\n    \"--separator-width\": varAttr(separatorWidth, \"sizes\"),\n    ...rest,\n  }),\n)\n\nexport interface TimelineItemProps extends HTMLStyledProps<\"li\"> {\n  /**\n   * The index of the timeline item.\n   */\n  index?: number\n}\n\nexport const TimelineItem = withContext<\"li\", TimelineItemProps>(\"li\", \"item\")(\n  undefined,\n  ({ index, ...rest }) => {\n    const { index: currentIndex } = useComponentContext()\n    const active =\n      !isUndefined(index) && !isUndefined(currentIndex) && index <= currentIndex\n\n    return {\n      ...rest,\n      \"data-active\": dataAttr(active),\n      \"data-index\": index,\n    }\n  },\n)\n\nexport interface TimelineConnectorProps extends HTMLStyledProps {}\n\nexport const TimelineConnector = withContext<\"div\", TimelineConnectorProps>(\n  \"div\",\n  \"connector\",\n)({ \"data-connector\": \"\" })\n\nexport interface TimelineIndicatorProps extends HTMLStyledProps {}\n\nconst TimelineIcon = styled(\"div\", {\n  base: {\n    bg: \"{indicator-fill}\",\n    borderColor: \"{indicator-stroke}\",\n    borderWidth: \"{separator-width}\",\n    boxSize: \"full\",\n    rounded: \"{indicator-rounded}\",\n  },\n})\n\nexport const TimelineIndicator = withContext<\"div\", TimelineIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)(undefined, ({ children = <TimelineIcon />, ...rest }) => ({\n  children,\n  ...rest,\n}))\n\nexport interface TimelineContentProps extends HTMLStyledProps {}\n\nexport const TimelineContent = withContext<\"div\", TimelineContentProps>(\n  \"div\",\n  \"content\",\n)({ \"data-content\": \"\" })\n\nexport interface TimelineTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const TimelineTitle = withContext<\"h3\", TimelineTitleProps>(\n  \"h3\",\n  \"title\",\n)()\n\nexport interface TimelineDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const TimelineDescription = withContext<\"p\", TimelineDescriptionProps>(\n  \"p\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;;;AAqEA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,6CACF,YACAC,qCACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,SAAS,aAAa,UAAU,QAAQ,IAAI,QAAQ,EAAE,EAAE,GAAG,WAAW;CACvE,MAAM,oCAAyB,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CACnD,MAAM,UAAUC,uCAAS,YAAY;CACrC,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAET,EACE,QAAQ,SACR,SACA,aACA,WACA,OACA,gBACA,cACA,kBACA,gBACA,YACA,GAAGC,UAEL,YACG;GACH,MAAMC,aAAW;IACf,WACE,2CAAC;KAAkB,GAAI;eACrB,2CAAC;MAAkB,GAAI;gBACpB,cAAc,YAAY,WAAWC,UAAQ,IAAI;OAChC;MACF;IAEtB,SACE,2CAAC;KAAgB,GAAI;eAClB,WACC,qFACE,2CAAC;MAAc,GAAI;gBAAa;OAAsB,EACtD,2CAAC;MAAoB,GAAI;gBACtB;OACmB,IACrB;MAEW;IAErB;AAED,UACE,4CAAC;IAAyB,OAAOA;IAAO,GAAIF;eACzC,UAAU,UAAUC,WAAS,YAAYA,WAAS,SAClD,UAAU,UAAUA,WAAS,UAAUA,WAAS;MAFhCC,QAGJ;IAGpB;IACA;EAAC;EAAU;EAAO;EAAQ,CAAC;AAE9B,QACE,2CAAC;EAAiB,OAAO;YACvB,2CAACC,uBAAO;GAAG,GAAI;aAAO;IAA6B;GAClC;GAGvB,QACA,EAAE,eAAe,CAAC,UAAU,EAAE,CAC/B,CACC,SACC,EACC,eACA,eACA,iBACA,gBACA,cACA,gBACA,gBACA,GAAG,YACE;CACL,oBAAoBC,oBAAQ,eAAe,SAAS;CACpD,oBAAoBA,oBAAQ,eAAe,QAAQ;CACnD,sBAAsBA,oBAAQ,iBAAiB,SAAS;CACxD,qBAAqBA,oBAAQ,gBAAgB,SAAS;CACtD,mBAAmBA,oBAAQ,cAAc,SAAS;CAClD,qBAAqBA,oBAAQ,eAAe;CAC5C,qBAAqBA,oBAAQ,gBAAgB,QAAQ;CACrD,GAAG;CACJ,EACF;AASD,MAAa,eAAe,YAAqC,MAAM,OAAO,CAC5E,SACC,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,OAAO,iBAAiB,qBAAqB;CACrD,MAAM,SACJ,oDAAa,MAAM,IAAI,oDAAa,aAAa,IAAI,SAAS;AAEhE,QAAO;EACL,GAAG;EACH,+DAAwB,OAAO;EAC/B,cAAc;EACf;EAEJ;AAID,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,eAAeD,uBAAO,OAAO,EACjC,MAAM;CACJ,IAAI;CACJ,aAAa;CACb,aAAa;CACb,SAAS;CACT,SAAS;CACV,EACF,CAAC;AAEF,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,SAAY,EAAE,WAAW,2CAAC,iBAAe,EAAE,GAAG,YAAY;CAC1D;CACA,GAAG;CACJ,EAAE;AAIH,MAAa,kBAAkB,YAC7B,OACA,UACD,CAAC,EAAE,gBAAgB,IAAI,CAAC;AAIzB,MAAa,gBAAgB,YAC3B,MACA,QACD,EAAE;AAIH,MAAa,sBAAsB,YACjC,KACA,cACD,EAAE"}

package/dist/cjs/components/timeline/timeline.style.cjs

@@ -30,7 +30,6 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 			boxSize: "{indicator-size}",
 			color: "{indicator-stroke}",
 			display: "flex",
-			fontWeight: "medium",
 			justifyContent: "center",
 			lineHeight: "{indicator-size}",
 			overflow: "hidden",
@@ -86,6 +85,10 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 			square: { item: { "--indicator-rounded": "radii.0" } }
 		}
 	},
+	variants: {
+		number: { indicator: { layerStyle: "solid" } },
+		plain: {}
+	},
 	sizes: {
 		base: { item: { _last: { "& [data-content]": { pb: 0 } } } },
 		sm: {
@@ -94,6 +97,7 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 				pb: "8"
 			},
 			description: { fontSize: "xs" },
+			indicator: { fontSize: "xs" },
 			item: { gap: "3" },
 			root: {
 				"--indicator-size": "sizes.3",
@@ -108,6 +112,7 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 				pb: "10"
 			},
 			description: { fontSize: "sm" },
+			indicator: { fontSize: "sm" },
 			item: { gap: "4" },
 			root: {
 				"--indicator-size": "sizes.5",
@@ -122,6 +127,7 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 				pb: "10"
 			},
 			description: { fontSize: "sm" },
+			indicator: { fontSize: "md" },
 			item: { gap: "4" },
 			root: {
 				"--indicator-size": "sizes.7",
@@ -136,6 +142,7 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 				pb: "12"
 			},
 			description: { fontSize: "md" },
+			indicator: { fontSize: "md" },
 			item: { gap: "5" },
 			root: {
 				"--indicator-size": "sizes.8",

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

@@ -1 +1 @@
-{"version":3,"file":"timeline.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/timeline/timeline.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const timelineStyle = defineComponentSlotStyle({\n  base: {\n    connector: {\n      alignSelf: \"stretch\",\n      position: \"relative\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _after: {\n        borderInlineStart:\n          \"{separator-width} {separator-style, solid} {separator-color}\",\n        display: \"block\",\n        h: \"full\",\n        insetBlockStart: \"calc({indicator-size} + {separator-gap})\",\n        insetInlineStart:\n          \"calc(({indicator-size} / 2) - ({separator-width} / 2))\",\n        maxH: `calc(full - {indicator-size} - ({separator-gap} * 2))`,\n        position: \"absolute\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      color: \"fg.muted\",\n    },\n    indicator: {\n      alignItems: \"center\",\n      boxSize: \"{indicator-size}\",\n      color: \"{indicator-stroke}\",\n      display: \"flex\",\n      fontWeight: \"medium\",\n      justifyContent: \"center\",\n      lineHeight: \"{indicator-size}\",\n      overflow: \"hidden\",\n      rounded: \"{indicator-rounded}\",\n    },\n    item: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      _last: {\n        \"& [data-connector]\": {\n          _after: { display: \"none\" },\n        },\n      },\n    },\n    root: {\n      \"--indicator-fill\": \"transparent\",\n      \"--indicator-stroke\": \"colorScheme.solid\",\n      \"--separator-color\": \"colors.border\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    title: {\n      alignItems: \"center\",\n      display: \"flex\",\n      fontWeight: \"medium\",\n      gap: \"1\",\n      lineHeight: \"{indicator-size}\",\n    },\n  },\n\n  props: {\n    /**\n     * The alignment of the timeline.\n     *\n     * @default 'start'\n     */\n    align: {\n      center: {\n        content: {\n          \"&:first-of-type\": { alignItems: \"flex-end\" },\n          flex: \"1\",\n        },\n        item: {\n          \"&:has(> [data-content]:first-of-type)\": {\n            \"&:not(:has(> [data-content]:last-of-type))\": {\n              _after: { display: \"block\", flex: \"1\" },\n            },\n          },\n          \"&:not(:has(> [data-content]:first-of-type))\": {\n            _before: { display: \"block\", flex: \"1\" },\n          },\n        },\n      },\n      end: {\n        content: { alignItems: \"flex-end\" },\n      },\n      start: {\n        content: { alignItems: \"flex-start\" },\n      },\n    },\n    /**\n     * If `true`, the timeline will be attached.\n     *\n     * @default false\n     */\n    attached: {\n      true: {\n        item: {\n          \"--separator-gap\": \"0px\",\n        },\n      },\n    },\n    /**\n     * The shape of the timeline.\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: {\n        item: { \"--indicator-rounded\": \"radii.full\" },\n      },\n      rounded: {\n        item: { \"--indicator-rounded\": \"radii.l2\" },\n      },\n      square: {\n        item: { \"--indicator-rounded\": \"radii.0\" },\n      },\n    },\n  },\n\n  sizes: {\n    base: {\n      item: {\n        _last: {\n          \"& [data-content]\": { pb: 0 },\n        },\n      },\n    },\n    sm: {\n      content: { gap: \"1\", pb: \"8\" },\n      description: { fontSize: \"xs\" },\n      item: { gap: \"3\" },\n      root: {\n        \"--indicator-size\": \"sizes.3\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.0.5\",\n      },\n      title: { fontSize: \"sm\" },\n    },\n    md: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.5\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    lg: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.7\",\n        \"--separator-gap\": \"spaces.2.5\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    xl: {\n      content: { gap: \"2\", pb: \"12\" },\n      description: { fontSize: \"md\" },\n      item: { gap: \"5\" },\n      root: {\n        \"--indicator-size\": \"sizes.8\",\n        \"--separator-gap\": \"spaces.3\",\n        \"--separator-width\": \"sizes.1.5\",\n      },\n      title: { fontSize: \"lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    align: \"start\",\n    shape: \"circle\",\n  },\n})\n\nexport type TimelineStyle = typeof timelineStyle\n"],"mappings":"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"}
+{"version":3,"file":"timeline.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/timeline/timeline.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const timelineStyle = defineComponentSlotStyle({\n  base: {\n    connector: {\n      alignSelf: \"stretch\",\n      position: \"relative\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _after: {\n        borderInlineStart:\n          \"{separator-width} {separator-style, solid} {separator-color}\",\n        display: \"block\",\n        h: \"full\",\n        insetBlockStart: \"calc({indicator-size} + {separator-gap})\",\n        insetInlineStart:\n          \"calc(({indicator-size} / 2) - ({separator-width} / 2))\",\n        maxH: `calc(full - {indicator-size} - ({separator-gap} * 2))`,\n        position: \"absolute\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      color: \"fg.muted\",\n    },\n    indicator: {\n      alignItems: \"center\",\n      boxSize: \"{indicator-size}\",\n      color: \"{indicator-stroke}\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      lineHeight: \"{indicator-size}\",\n      overflow: \"hidden\",\n      rounded: \"{indicator-rounded}\",\n    },\n    item: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      _last: {\n        \"& [data-connector]\": {\n          _after: { display: \"none\" },\n        },\n      },\n    },\n    root: {\n      \"--indicator-fill\": \"transparent\",\n      \"--indicator-stroke\": \"colorScheme.solid\",\n      \"--separator-color\": \"colors.border\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    title: {\n      alignItems: \"center\",\n      display: \"flex\",\n      fontWeight: \"medium\",\n      gap: \"1\",\n      lineHeight: \"{indicator-size}\",\n    },\n  },\n\n  props: {\n    /**\n     * The alignment of the timeline.\n     *\n     * @default 'start'\n     */\n    align: {\n      center: {\n        content: {\n          \"&:first-of-type\": { alignItems: \"flex-end\" },\n          flex: \"1\",\n        },\n        item: {\n          \"&:has(> [data-content]:first-of-type)\": {\n            \"&:not(:has(> [data-content]:last-of-type))\": {\n              _after: { display: \"block\", flex: \"1\" },\n            },\n          },\n          \"&:not(:has(> [data-content]:first-of-type))\": {\n            _before: { display: \"block\", flex: \"1\" },\n          },\n        },\n      },\n      end: {\n        content: { alignItems: \"flex-end\" },\n      },\n      start: {\n        content: { alignItems: \"flex-start\" },\n      },\n    },\n    /**\n     * If `true`, the timeline will be attached.\n     *\n     * @default false\n     */\n    attached: {\n      true: {\n        item: {\n          \"--separator-gap\": \"0px\",\n        },\n      },\n    },\n    /**\n     * The shape of the timeline.\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: {\n        item: { \"--indicator-rounded\": \"radii.full\" },\n      },\n      rounded: {\n        item: { \"--indicator-rounded\": \"radii.l2\" },\n      },\n      square: {\n        item: { \"--indicator-rounded\": \"radii.0\" },\n      },\n    },\n  },\n\n  variants: {\n    number: { indicator: { layerStyle: \"solid\" } },\n    plain: {},\n  },\n\n  sizes: {\n    base: {\n      item: {\n        _last: {\n          \"& [data-content]\": { pb: 0 },\n        },\n      },\n    },\n    sm: {\n      content: { gap: \"1\", pb: \"8\" },\n      description: { fontSize: \"xs\" },\n      indicator: { fontSize: \"xs\" },\n      item: { gap: \"3\" },\n      root: {\n        \"--indicator-size\": \"sizes.3\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.0.5\",\n      },\n      title: { fontSize: \"sm\" },\n    },\n    md: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      indicator: { fontSize: \"sm\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.5\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    lg: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      indicator: { fontSize: \"md\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.7\",\n        \"--separator-gap\": \"spaces.2.5\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    xl: {\n      content: { gap: \"2\", pb: \"12\" },\n      description: { fontSize: \"md\" },\n      indicator: { fontSize: \"md\" },\n      item: { gap: \"5\" },\n      root: {\n        \"--indicator-size\": \"sizes.8\",\n        \"--separator-gap\": \"spaces.3\",\n        \"--separator-width\": \"sizes.1.5\",\n      },\n      title: { fontSize: \"lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    align: \"start\",\n    shape: \"circle\",\n  },\n})\n\nexport type TimelineStyle = typeof timelineStyle\n"],"mappings":"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"}

package/dist/esm/components/timeline/timeline.js

@@ -5,6 +5,7 @@ import { varAttr } from "../../core/system/var.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
+import { useValue } from "../../hooks/use-value/index.js";
 import { timelineStyle } from "./timeline.style.js";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -16,8 +17,9 @@ const { ComponentContext, PropsContext: TimelinePropsContext, useComponentContex
 *
 * @see https://yamada-ui.com/docs/components/timeline
 */
-const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }) => {
+const TimelineRoot = withProvider(({ variant: variantProp, children, index = -1, items = [], ...rest }) => {
 	const context = useMemo(() => ({ index }), [index]);
+	const variant = useValue(variantProp);
 	const computedChildren = useMemo(() => {
 		if (children) return children;
 		return items.map(({ align = "start", content, description, indicator, title, connectorProps, contentProps, descriptionProps, indicatorProps, titleProps, ...rest$1 }, index$1) => {
@@ -26,7 +28,7 @@ const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }
 					...connectorProps,
 					children: /* @__PURE__ */ jsx(TimelineIndicator, {
 						...indicatorProps,
-						children: indicator
+						children: indicator ?? (variant === "number" ? index$1 + 1 : void 0)
 					})
 				}),
 				content: /* @__PURE__ */ jsx(TimelineContent, {
@@ -46,7 +48,11 @@ const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }
 				children: [align === "start" ? children$1.connector : children$1.content, align === "start" ? children$1.content : children$1.connector]
 			}, index$1);
 		});
-	}, [items, children]);
+	}, [
+		children,
+		items,
+		variant
+	]);
 	return /* @__PURE__ */ jsx(ComponentContext, {
 		value: context,
 		children: /* @__PURE__ */ jsx(styled.ul, {
@@ -54,7 +60,7 @@ const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }
 			children: computedChildren
 		})
 	});
-}, "root")(void 0, ({ indicatorFill, indicatorSize, indicatorStroke, separatorColor, separatorGap, separatorStyle, separatorWidth, ...rest }) => ({
+}, "root", { transferProps: ["variant"] })(void 0, ({ indicatorFill, indicatorSize, indicatorStroke, separatorColor, separatorGap, separatorStyle, separatorWidth, ...rest }) => ({
 	"--indicator-fill": varAttr(indicatorFill, "colors"),
 	"--indicator-size": varAttr(indicatorSize, "sizes"),
 	"--indicator-stroke": varAttr(indicatorStroke, "colors"),

package/dist/esm/components/timeline/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","names":["rest","children","index"],"sources":["../../../../src/components/timeline/timeline.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TimelineStyle } from \"./timeline.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { dataAttr, isUndefined } from \"../../utils\"\nimport { timelineStyle } from \"./timeline.style\"\n\nexport interface TimelineItem extends Omit<\n  TimelineItemProps,\n  \"content\" | \"title\"\n> {\n  align?: \"end\" | \"start\"\n  content?: ReactNode\n  description?: ReactNode\n  indicator?: ReactNode\n  title?: ReactNode\n  connectorProps?: TimelineConnectorProps\n  contentProps?: TimelineContentProps\n  descriptionProps?: TimelineDescriptionProps\n  indicatorProps?: TimelineIndicatorProps\n  titleProps?: TimelineTitleProps\n}\n\ninterface ComponentContext extends Pick<TimelineRootProps, \"index\"> {}\n\nexport interface TimelineRootProps\n  extends HTMLStyledProps<\"ul\">, ThemeProps<TimelineStyle> {\n  /**\n   * The index of the active timeline item.\n   */\n  index?: number\n  /**\n   * The fill color of the indicator.\n   */\n  indicatorFill?: CSSProps[\"bg\"]\n  /**\n   * The size of the indicator.\n   */\n  indicatorSize?: CSSProps[\"boxSize\"]\n  /**\n   * The stroke color of the indicator.\n   */\n  indicatorStroke?: CSSProps[\"color\"]\n  /**\n   * If provided, generate timeline components based on items.\n   */\n  items?: TimelineItem[]\n  /**\n   * The color of the separator.\n   */\n  separatorColor?: CSSProps[\"color\"]\n  /**\n   * The gap of the separator.\n   */\n  separatorGap?: CSSProps[\"gap\"]\n  /**\n   * The style of the separator.\n   */\n  separatorStyle?: CSSProps[\"borderStyle\"]\n  /**\n   * The width of the separator.\n   */\n  separatorWidth?: CSSProps[\"width\"]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TimelinePropsContext,\n  useComponentContext,\n  usePropsContext: useTimelinePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TimelineRootProps, TimelineStyle, ComponentContext>(\n  \"timeline\",\n  timelineStyle,\n)\n\nexport { TimelinePropsContext, useTimelinePropsContext }\n\n/**\n * `Timeline` is a component that is used to display a list of events in chronological order.\n *\n * @see https://yamada-ui.com/docs/components/timeline\n */\nexport const TimelineRoot = withProvider(\n  ({ children, index = -1, items = [], ...rest }) => {\n    const context = useMemo(() => ({ index }), [index])\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items.map(\n        (\n          {\n            align = \"start\",\n            content,\n            description,\n            indicator,\n            title,\n            connectorProps,\n            contentProps,\n            descriptionProps,\n            indicatorProps,\n            titleProps,\n            ...rest\n          },\n          index,\n        ) => {\n          const children = {\n            connector: (\n              <TimelineConnector {...connectorProps}>\n                <TimelineIndicator {...indicatorProps}>\n                  {indicator}\n                </TimelineIndicator>\n              </TimelineConnector>\n            ),\n            content: (\n              <TimelineContent {...contentProps}>\n                {content ?? (\n                  <>\n                    <TimelineTitle {...titleProps}>{title}</TimelineTitle>\n                    <TimelineDescription {...descriptionProps}>\n                      {description}\n                    </TimelineDescription>\n                  </>\n                )}\n              </TimelineContent>\n            ),\n          }\n\n          return (\n            <TimelineItem key={index} index={index} {...rest}>\n              {align === \"start\" ? children.connector : children.content}\n              {align === \"start\" ? children.content : children.connector}\n            </TimelineItem>\n          )\n        },\n      )\n    }, [items, children])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.ul {...rest}>{computedChildren}</styled.ul>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)(\n  undefined,\n  ({\n    indicatorFill,\n    indicatorSize,\n    indicatorStroke,\n    separatorColor,\n    separatorGap,\n    separatorStyle,\n    separatorWidth,\n    ...rest\n  }) => ({\n    \"--indicator-fill\": varAttr(indicatorFill, \"colors\"),\n    \"--indicator-size\": varAttr(indicatorSize, \"sizes\"),\n    \"--indicator-stroke\": varAttr(indicatorStroke, \"colors\"),\n    \"--separator-color\": varAttr(separatorColor, \"colors\"),\n    \"--separator-gap\": varAttr(separatorGap, \"spaces\"),\n    \"--separator-style\": varAttr(separatorStyle),\n    \"--separator-width\": varAttr(separatorWidth, \"sizes\"),\n    ...rest,\n  }),\n)\n\nexport interface TimelineItemProps extends HTMLStyledProps<\"li\"> {\n  /**\n   * The index of the timeline item.\n   */\n  index?: number\n}\n\nexport const TimelineItem = withContext<\"li\", TimelineItemProps>(\"li\", \"item\")(\n  undefined,\n  ({ index, ...rest }) => {\n    const { index: currentIndex } = useComponentContext()\n    const active =\n      !isUndefined(index) && !isUndefined(currentIndex) && index <= currentIndex\n\n    return {\n      ...rest,\n      \"data-active\": dataAttr(active),\n      \"data-index\": index,\n    }\n  },\n)\n\nexport interface TimelineConnectorProps extends HTMLStyledProps {}\n\nexport const TimelineConnector = withContext<\"div\", TimelineConnectorProps>(\n  \"div\",\n  \"connector\",\n)({ \"data-connector\": \"\" })\n\nexport interface TimelineIndicatorProps extends HTMLStyledProps {}\n\nconst TimelineIcon = styled(\"div\", {\n  base: {\n    bg: \"{indicator-fill}\",\n    borderColor: \"{indicator-stroke}\",\n    borderWidth: \"{separator-width}\",\n    boxSize: \"full\",\n    rounded: \"{indicator-rounded}\",\n  },\n})\n\nexport const TimelineIndicator = withContext<\"div\", TimelineIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)(undefined, ({ children = <TimelineIcon />, ...rest }) => ({\n  children,\n  ...rest,\n}))\n\nexport interface TimelineContentProps extends HTMLStyledProps {}\n\nexport const TimelineContent = withContext<\"div\", TimelineContentProps>(\n  \"div\",\n  \"content\",\n)({ \"data-content\": \"\" })\n\nexport interface TimelineTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const TimelineTitle = withContext<\"h3\", TimelineTitleProps>(\n  \"h3\",\n  \"title\",\n)()\n\nexport interface TimelineDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const TimelineDescription = withContext<\"p\", TimelineDescriptionProps>(\n  \"p\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;AAoEA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,YACA,cACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,UAAU,QAAQ,IAAI,QAAQ,EAAE,EAAE,GAAG,WAAW;CACjD,MAAM,UAAU,eAAe,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CACnD,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAET,EACE,QAAQ,SACR,SACA,aACA,WACA,OACA,gBACA,cACA,kBACA,gBACA,YACA,GAAGA,UAEL,YACG;GACH,MAAMC,aAAW;IACf,WACE,oBAAC;KAAkB,GAAI;eACrB,oBAAC;MAAkB,GAAI;gBACpB;OACiB;MACF;IAEtB,SACE,oBAAC;KAAgB,GAAI;eAClB,WACC,8CACE,oBAAC;MAAc,GAAI;gBAAa;OAAsB,EACtD,oBAAC;MAAoB,GAAI;gBACtB;OACmB,IACrB;MAEW;IAErB;AAED,UACE,qBAAC;IAAyB,OAAOC;IAAO,GAAIF;eACzC,UAAU,UAAUC,WAAS,YAAYA,WAAS,SAClD,UAAU,UAAUA,WAAS,UAAUA,WAAS;MAFhCC,QAGJ;IAGpB;IACA,CAAC,OAAO,SAAS,CAAC;AAErB,QACE,oBAAC;EAAiB,OAAO;YACvB,oBAAC,OAAO;GAAG,GAAI;aAAO;IAA6B;GAClC;GAGvB,OACD,CACC,SACC,EACC,eACA,eACA,iBACA,gBACA,cACA,gBACA,gBACA,GAAG,YACE;CACL,oBAAoB,QAAQ,eAAe,SAAS;CACpD,oBAAoB,QAAQ,eAAe,QAAQ;CACnD,sBAAsB,QAAQ,iBAAiB,SAAS;CACxD,qBAAqB,QAAQ,gBAAgB,SAAS;CACtD,mBAAmB,QAAQ,cAAc,SAAS;CAClD,qBAAqB,QAAQ,eAAe;CAC5C,qBAAqB,QAAQ,gBAAgB,QAAQ;CACrD,GAAG;CACJ,EACF;AASD,MAAa,eAAe,YAAqC,MAAM,OAAO,CAC5E,SACC,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,OAAO,iBAAiB,qBAAqB;CACrD,MAAM,SACJ,gCAAa,MAAM,IAAI,gCAAa,aAAa,IAAI,SAAS;AAEhE,QAAO;EACL,GAAG;EACH,2CAAwB,OAAO;EAC/B,cAAc;EACf;EAEJ;AAID,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,eAAe,OAAO,OAAO,EACjC,MAAM;CACJ,IAAI;CACJ,aAAa;CACb,aAAa;CACb,SAAS;CACT,SAAS;CACV,EACF,CAAC;AAEF,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,SAAY,EAAE,WAAW,oBAAC,iBAAe,EAAE,GAAG,YAAY;CAC1D;CACA,GAAG;CACJ,EAAE;AAIH,MAAa,kBAAkB,YAC7B,OACA,UACD,CAAC,EAAE,gBAAgB,IAAI,CAAC;AAIzB,MAAa,gBAAgB,YAC3B,MACA,QACD,EAAE;AAIH,MAAa,sBAAsB,YACjC,KACA,cACD,EAAE"}
+{"version":3,"file":"timeline.js","names":["rest","children","index"],"sources":["../../../../src/components/timeline/timeline.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TimelineStyle } from \"./timeline.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { dataAttr, isUndefined } from \"../../utils\"\nimport { timelineStyle } from \"./timeline.style\"\n\nexport interface TimelineItem extends Omit<\n  TimelineItemProps,\n  \"content\" | \"title\"\n> {\n  align?: \"end\" | \"start\"\n  content?: ReactNode\n  description?: ReactNode\n  indicator?: ReactNode\n  title?: ReactNode\n  connectorProps?: TimelineConnectorProps\n  contentProps?: TimelineContentProps\n  descriptionProps?: TimelineDescriptionProps\n  indicatorProps?: TimelineIndicatorProps\n  titleProps?: TimelineTitleProps\n}\n\ninterface ComponentContext extends Pick<TimelineRootProps, \"index\"> {}\n\nexport interface TimelineRootProps\n  extends HTMLStyledProps<\"ul\">, ThemeProps<TimelineStyle> {\n  /**\n   * The index of the active timeline item.\n   */\n  index?: number\n  /**\n   * The fill color of the indicator.\n   */\n  indicatorFill?: CSSProps[\"bg\"]\n  /**\n   * The size of the indicator.\n   */\n  indicatorSize?: CSSProps[\"boxSize\"]\n  /**\n   * The stroke color of the indicator.\n   */\n  indicatorStroke?: CSSProps[\"color\"]\n  /**\n   * If provided, generate timeline components based on items.\n   */\n  items?: TimelineItem[]\n  /**\n   * The color of the separator.\n   */\n  separatorColor?: CSSProps[\"color\"]\n  /**\n   * The gap of the separator.\n   */\n  separatorGap?: CSSProps[\"gap\"]\n  /**\n   * The style of the separator.\n   */\n  separatorStyle?: CSSProps[\"borderStyle\"]\n  /**\n   * The width of the separator.\n   */\n  separatorWidth?: CSSProps[\"width\"]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TimelinePropsContext,\n  useComponentContext,\n  usePropsContext: useTimelinePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TimelineRootProps, TimelineStyle, ComponentContext>(\n  \"timeline\",\n  timelineStyle,\n)\n\nexport { TimelinePropsContext, useTimelinePropsContext }\n\n/**\n * `Timeline` is a component that is used to display a list of events in chronological order.\n *\n * @see https://yamada-ui.com/docs/components/timeline\n */\nexport const TimelineRoot = withProvider(\n  ({ variant: variantProp, children, index = -1, items = [], ...rest }) => {\n    const context = useMemo(() => ({ index }), [index])\n    const variant = useValue(variantProp)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items.map(\n        (\n          {\n            align = \"start\",\n            content,\n            description,\n            indicator,\n            title,\n            connectorProps,\n            contentProps,\n            descriptionProps,\n            indicatorProps,\n            titleProps,\n            ...rest\n          },\n          index,\n        ) => {\n          const children = {\n            connector: (\n              <TimelineConnector {...connectorProps}>\n                <TimelineIndicator {...indicatorProps}>\n                  {indicator ?? (variant === \"number\" ? index + 1 : undefined)}\n                </TimelineIndicator>\n              </TimelineConnector>\n            ),\n            content: (\n              <TimelineContent {...contentProps}>\n                {content ?? (\n                  <>\n                    <TimelineTitle {...titleProps}>{title}</TimelineTitle>\n                    <TimelineDescription {...descriptionProps}>\n                      {description}\n                    </TimelineDescription>\n                  </>\n                )}\n              </TimelineContent>\n            ),\n          }\n\n          return (\n            <TimelineItem key={index} index={index} {...rest}>\n              {align === \"start\" ? children.connector : children.content}\n              {align === \"start\" ? children.content : children.connector}\n            </TimelineItem>\n          )\n        },\n      )\n    }, [children, items, variant])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.ul {...rest}>{computedChildren}</styled.ul>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"variant\"] },\n)(\n  undefined,\n  ({\n    indicatorFill,\n    indicatorSize,\n    indicatorStroke,\n    separatorColor,\n    separatorGap,\n    separatorStyle,\n    separatorWidth,\n    ...rest\n  }) => ({\n    \"--indicator-fill\": varAttr(indicatorFill, \"colors\"),\n    \"--indicator-size\": varAttr(indicatorSize, \"sizes\"),\n    \"--indicator-stroke\": varAttr(indicatorStroke, \"colors\"),\n    \"--separator-color\": varAttr(separatorColor, \"colors\"),\n    \"--separator-gap\": varAttr(separatorGap, \"spaces\"),\n    \"--separator-style\": varAttr(separatorStyle),\n    \"--separator-width\": varAttr(separatorWidth, \"sizes\"),\n    ...rest,\n  }),\n)\n\nexport interface TimelineItemProps extends HTMLStyledProps<\"li\"> {\n  /**\n   * The index of the timeline item.\n   */\n  index?: number\n}\n\nexport const TimelineItem = withContext<\"li\", TimelineItemProps>(\"li\", \"item\")(\n  undefined,\n  ({ index, ...rest }) => {\n    const { index: currentIndex } = useComponentContext()\n    const active =\n      !isUndefined(index) && !isUndefined(currentIndex) && index <= currentIndex\n\n    return {\n      ...rest,\n      \"data-active\": dataAttr(active),\n      \"data-index\": index,\n    }\n  },\n)\n\nexport interface TimelineConnectorProps extends HTMLStyledProps {}\n\nexport const TimelineConnector = withContext<\"div\", TimelineConnectorProps>(\n  \"div\",\n  \"connector\",\n)({ \"data-connector\": \"\" })\n\nexport interface TimelineIndicatorProps extends HTMLStyledProps {}\n\nconst TimelineIcon = styled(\"div\", {\n  base: {\n    bg: \"{indicator-fill}\",\n    borderColor: \"{indicator-stroke}\",\n    borderWidth: \"{separator-width}\",\n    boxSize: \"full\",\n    rounded: \"{indicator-rounded}\",\n  },\n})\n\nexport const TimelineIndicator = withContext<\"div\", TimelineIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)(undefined, ({ children = <TimelineIcon />, ...rest }) => ({\n  children,\n  ...rest,\n}))\n\nexport interface TimelineContentProps extends HTMLStyledProps {}\n\nexport const TimelineContent = withContext<\"div\", TimelineContentProps>(\n  \"div\",\n  \"content\",\n)({ \"data-content\": \"\" })\n\nexport interface TimelineTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const TimelineTitle = withContext<\"h3\", TimelineTitleProps>(\n  \"h3\",\n  \"title\",\n)()\n\nexport interface TimelineDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const TimelineDescription = withContext<\"p\", TimelineDescriptionProps>(\n  \"p\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAqEA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,YACA,cACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,SAAS,aAAa,UAAU,QAAQ,IAAI,QAAQ,EAAE,EAAE,GAAG,WAAW;CACvE,MAAM,UAAU,eAAe,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CACnD,MAAM,UAAU,SAAS,YAAY;CACrC,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAET,EACE,QAAQ,SACR,SACA,aACA,WACA,OACA,gBACA,cACA,kBACA,gBACA,YACA,GAAGA,UAEL,YACG;GACH,MAAMC,aAAW;IACf,WACE,oBAAC;KAAkB,GAAI;eACrB,oBAAC;MAAkB,GAAI;gBACpB,cAAc,YAAY,WAAWC,UAAQ,IAAI;OAChC;MACF;IAEtB,SACE,oBAAC;KAAgB,GAAI;eAClB,WACC,8CACE,oBAAC;MAAc,GAAI;gBAAa;OAAsB,EACtD,oBAAC;MAAoB,GAAI;gBACtB;OACmB,IACrB;MAEW;IAErB;AAED,UACE,qBAAC;IAAyB,OAAOA;IAAO,GAAIF;eACzC,UAAU,UAAUC,WAAS,YAAYA,WAAS,SAClD,UAAU,UAAUA,WAAS,UAAUA,WAAS;MAFhCC,QAGJ;IAGpB;IACA;EAAC;EAAU;EAAO;EAAQ,CAAC;AAE9B,QACE,oBAAC;EAAiB,OAAO;YACvB,oBAAC,OAAO;GAAG,GAAI;aAAO;IAA6B;GAClC;GAGvB,QACA,EAAE,eAAe,CAAC,UAAU,EAAE,CAC/B,CACC,SACC,EACC,eACA,eACA,iBACA,gBACA,cACA,gBACA,gBACA,GAAG,YACE;CACL,oBAAoB,QAAQ,eAAe,SAAS;CACpD,oBAAoB,QAAQ,eAAe,QAAQ;CACnD,sBAAsB,QAAQ,iBAAiB,SAAS;CACxD,qBAAqB,QAAQ,gBAAgB,SAAS;CACtD,mBAAmB,QAAQ,cAAc,SAAS;CAClD,qBAAqB,QAAQ,eAAe;CAC5C,qBAAqB,QAAQ,gBAAgB,QAAQ;CACrD,GAAG;CACJ,EACF;AASD,MAAa,eAAe,YAAqC,MAAM,OAAO,CAC5E,SACC,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,OAAO,iBAAiB,qBAAqB;CACrD,MAAM,SACJ,gCAAa,MAAM,IAAI,gCAAa,aAAa,IAAI,SAAS;AAEhE,QAAO;EACL,GAAG;EACH,2CAAwB,OAAO;EAC/B,cAAc;EACf;EAEJ;AAID,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,eAAe,OAAO,OAAO,EACjC,MAAM;CACJ,IAAI;CACJ,aAAa;CACb,aAAa;CACb,SAAS;CACT,SAAS;CACV,EACF,CAAC;AAEF,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,SAAY,EAAE,WAAW,oBAAC,iBAAe,EAAE,GAAG,YAAY;CAC1D;CACA,GAAG;CACJ,EAAE;AAIH,MAAa,kBAAkB,YAC7B,OACA,UACD,CAAC,EAAE,gBAAgB,IAAI,CAAC;AAIzB,MAAa,gBAAgB,YAC3B,MACA,QACD,EAAE;AAIH,MAAa,sBAAsB,YACjC,KACA,cACD,EAAE"}

package/dist/esm/components/timeline/timeline.style.js

@@ -30,7 +30,6 @@ const timelineStyle = defineComponentSlotStyle({
 			boxSize: "{indicator-size}",
 			color: "{indicator-stroke}",
 			display: "flex",
-			fontWeight: "medium",
 			justifyContent: "center",
 			lineHeight: "{indicator-size}",
 			overflow: "hidden",
@@ -86,6 +85,10 @@ const timelineStyle = defineComponentSlotStyle({
 			square: { item: { "--indicator-rounded": "radii.0" } }
 		}
 	},
+	variants: {
+		number: { indicator: { layerStyle: "solid" } },
+		plain: {}
+	},
 	sizes: {
 		base: { item: { _last: { "& [data-content]": { pb: 0 } } } },
 		sm: {
@@ -94,6 +97,7 @@ const timelineStyle = defineComponentSlotStyle({
 				pb: "8"
 			},
 			description: { fontSize: "xs" },
+			indicator: { fontSize: "xs" },
 			item: { gap: "3" },
 			root: {
 				"--indicator-size": "sizes.3",
@@ -108,6 +112,7 @@ const timelineStyle = defineComponentSlotStyle({
 				pb: "10"
 			},
 			description: { fontSize: "sm" },
+			indicator: { fontSize: "sm" },
 			item: { gap: "4" },
 			root: {
 				"--indicator-size": "sizes.5",
@@ -122,6 +127,7 @@ const timelineStyle = defineComponentSlotStyle({
 				pb: "10"
 			},
 			description: { fontSize: "sm" },
+			indicator: { fontSize: "md" },
 			item: { gap: "4" },
 			root: {
 				"--indicator-size": "sizes.7",
@@ -136,6 +142,7 @@ const timelineStyle = defineComponentSlotStyle({
 				pb: "12"
 			},
 			description: { fontSize: "md" },
+			indicator: { fontSize: "md" },
 			item: { gap: "5" },
 			root: {
 				"--indicator-size": "sizes.8",

package/dist/esm/components/timeline/timeline.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.style.js","names":[],"sources":["../../../../src/components/timeline/timeline.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const timelineStyle = defineComponentSlotStyle({\n  base: {\n    connector: {\n      alignSelf: \"stretch\",\n      position: \"relative\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _after: {\n        borderInlineStart:\n          \"{separator-width} {separator-style, solid} {separator-color}\",\n        display: \"block\",\n        h: \"full\",\n        insetBlockStart: \"calc({indicator-size} + {separator-gap})\",\n        insetInlineStart:\n          \"calc(({indicator-size} / 2) - ({separator-width} / 2))\",\n        maxH: `calc(full - {indicator-size} - ({separator-gap} * 2))`,\n        position: \"absolute\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      color: \"fg.muted\",\n    },\n    indicator: {\n      alignItems: \"center\",\n      boxSize: \"{indicator-size}\",\n      color: \"{indicator-stroke}\",\n      display: \"flex\",\n      fontWeight: \"medium\",\n      justifyContent: \"center\",\n      lineHeight: \"{indicator-size}\",\n      overflow: \"hidden\",\n      rounded: \"{indicator-rounded}\",\n    },\n    item: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      _last: {\n        \"& [data-connector]\": {\n          _after: { display: \"none\" },\n        },\n      },\n    },\n    root: {\n      \"--indicator-fill\": \"transparent\",\n      \"--indicator-stroke\": \"colorScheme.solid\",\n      \"--separator-color\": \"colors.border\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    title: {\n      alignItems: \"center\",\n      display: \"flex\",\n      fontWeight: \"medium\",\n      gap: \"1\",\n      lineHeight: \"{indicator-size}\",\n    },\n  },\n\n  props: {\n    /**\n     * The alignment of the timeline.\n     *\n     * @default 'start'\n     */\n    align: {\n      center: {\n        content: {\n          \"&:first-of-type\": { alignItems: \"flex-end\" },\n          flex: \"1\",\n        },\n        item: {\n          \"&:has(> [data-content]:first-of-type)\": {\n            \"&:not(:has(> [data-content]:last-of-type))\": {\n              _after: { display: \"block\", flex: \"1\" },\n            },\n          },\n          \"&:not(:has(> [data-content]:first-of-type))\": {\n            _before: { display: \"block\", flex: \"1\" },\n          },\n        },\n      },\n      end: {\n        content: { alignItems: \"flex-end\" },\n      },\n      start: {\n        content: { alignItems: \"flex-start\" },\n      },\n    },\n    /**\n     * If `true`, the timeline will be attached.\n     *\n     * @default false\n     */\n    attached: {\n      true: {\n        item: {\n          \"--separator-gap\": \"0px\",\n        },\n      },\n    },\n    /**\n     * The shape of the timeline.\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: {\n        item: { \"--indicator-rounded\": \"radii.full\" },\n      },\n      rounded: {\n        item: { \"--indicator-rounded\": \"radii.l2\" },\n      },\n      square: {\n        item: { \"--indicator-rounded\": \"radii.0\" },\n      },\n    },\n  },\n\n  sizes: {\n    base: {\n      item: {\n        _last: {\n          \"& [data-content]\": { pb: 0 },\n        },\n      },\n    },\n    sm: {\n      content: { gap: \"1\", pb: \"8\" },\n      description: { fontSize: \"xs\" },\n      item: { gap: \"3\" },\n      root: {\n        \"--indicator-size\": \"sizes.3\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.0.5\",\n      },\n      title: { fontSize: \"sm\" },\n    },\n    md: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.5\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    lg: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.7\",\n        \"--separator-gap\": \"spaces.2.5\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    xl: {\n      content: { gap: \"2\", pb: \"12\" },\n      description: { fontSize: \"md\" },\n      item: { gap: \"5\" },\n      root: {\n        \"--indicator-size\": \"sizes.8\",\n        \"--separator-gap\": \"spaces.3\",\n        \"--separator-width\": \"sizes.1.5\",\n      },\n      title: { fontSize: \"lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    align: \"start\",\n    shape: \"circle\",\n  },\n})\n\nexport type TimelineStyle = typeof timelineStyle\n"],"mappings":"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"}
+{"version":3,"file":"timeline.style.js","names":[],"sources":["../../../../src/components/timeline/timeline.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const timelineStyle = defineComponentSlotStyle({\n  base: {\n    connector: {\n      alignSelf: \"stretch\",\n      position: \"relative\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _after: {\n        borderInlineStart:\n          \"{separator-width} {separator-style, solid} {separator-color}\",\n        display: \"block\",\n        h: \"full\",\n        insetBlockStart: \"calc({indicator-size} + {separator-gap})\",\n        insetInlineStart:\n          \"calc(({indicator-size} / 2) - ({separator-width} / 2))\",\n        maxH: `calc(full - {indicator-size} - ({separator-gap} * 2))`,\n        position: \"absolute\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      color: \"fg.muted\",\n    },\n    indicator: {\n      alignItems: \"center\",\n      boxSize: \"{indicator-size}\",\n      color: \"{indicator-stroke}\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      lineHeight: \"{indicator-size}\",\n      overflow: \"hidden\",\n      rounded: \"{indicator-rounded}\",\n    },\n    item: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      _last: {\n        \"& [data-connector]\": {\n          _after: { display: \"none\" },\n        },\n      },\n    },\n    root: {\n      \"--indicator-fill\": \"transparent\",\n      \"--indicator-stroke\": \"colorScheme.solid\",\n      \"--separator-color\": \"colors.border\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    title: {\n      alignItems: \"center\",\n      display: \"flex\",\n      fontWeight: \"medium\",\n      gap: \"1\",\n      lineHeight: \"{indicator-size}\",\n    },\n  },\n\n  props: {\n    /**\n     * The alignment of the timeline.\n     *\n     * @default 'start'\n     */\n    align: {\n      center: {\n        content: {\n          \"&:first-of-type\": { alignItems: \"flex-end\" },\n          flex: \"1\",\n        },\n        item: {\n          \"&:has(> [data-content]:first-of-type)\": {\n            \"&:not(:has(> [data-content]:last-of-type))\": {\n              _after: { display: \"block\", flex: \"1\" },\n            },\n          },\n          \"&:not(:has(> [data-content]:first-of-type))\": {\n            _before: { display: \"block\", flex: \"1\" },\n          },\n        },\n      },\n      end: {\n        content: { alignItems: \"flex-end\" },\n      },\n      start: {\n        content: { alignItems: \"flex-start\" },\n      },\n    },\n    /**\n     * If `true`, the timeline will be attached.\n     *\n     * @default false\n     */\n    attached: {\n      true: {\n        item: {\n          \"--separator-gap\": \"0px\",\n        },\n      },\n    },\n    /**\n     * The shape of the timeline.\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: {\n        item: { \"--indicator-rounded\": \"radii.full\" },\n      },\n      rounded: {\n        item: { \"--indicator-rounded\": \"radii.l2\" },\n      },\n      square: {\n        item: { \"--indicator-rounded\": \"radii.0\" },\n      },\n    },\n  },\n\n  variants: {\n    number: { indicator: { layerStyle: \"solid\" } },\n    plain: {},\n  },\n\n  sizes: {\n    base: {\n      item: {\n        _last: {\n          \"& [data-content]\": { pb: 0 },\n        },\n      },\n    },\n    sm: {\n      content: { gap: \"1\", pb: \"8\" },\n      description: { fontSize: \"xs\" },\n      indicator: { fontSize: \"xs\" },\n      item: { gap: \"3\" },\n      root: {\n        \"--indicator-size\": \"sizes.3\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.0.5\",\n      },\n      title: { fontSize: \"sm\" },\n    },\n    md: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      indicator: { fontSize: \"sm\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.5\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    lg: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      indicator: { fontSize: \"md\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.7\",\n        \"--separator-gap\": \"spaces.2.5\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    xl: {\n      content: { gap: \"2\", pb: \"12\" },\n      description: { fontSize: \"md\" },\n      indicator: { fontSize: \"md\" },\n      item: { gap: \"5\" },\n      root: {\n        \"--indicator-size\": \"sizes.8\",\n        \"--separator-gap\": \"spaces.3\",\n        \"--separator-width\": \"sizes.1.5\",\n      },\n      title: { fontSize: \"lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    align: \"start\",\n    shape: \"circle\",\n  },\n})\n\nexport type TimelineStyle = typeof timelineStyle\n"],"mappings":"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"}

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

@@ -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 react985 from "react";
+import * as react78 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: react985.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react78.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/use-accordion.d.ts

@@ -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 react973 from "react";
+import * as react66 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react973.Context<{
+declare const AccordionDescendantsContext: react66.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: react973.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) => react973.RefCallback<HTMLButtonElement>;
+    } | undefined) => react66.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: react973.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) => react973.RefCallback<HTMLButtonElement>;
+      } | undefined) => react66.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react973.RefCallback<HTMLButtonElement>;
+    register: react66.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: react973.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) => react973.RefCallback<HTMLButtonElement>;
+    } | undefined) => react66.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: react973.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react66.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react973.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react66.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) => react973.RefCallback<HTMLButtonElement>;
+    } | undefined) => react66.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: react973.Dispatch<react973.SetStateAction<number>>;
-  setIndex: react973.Dispatch<react973.SetStateAction<number | number[]>>;
+  setFocusedIndex: react66.Dispatch<react66.SetStateAction<number>>;
+  setIndex: react66.Dispatch<react66.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

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

@@ -7,7 +7,7 @@ import { PortalProps } from "../portal/portal.js";
 import { PopupAnimationProps } from "../popover/popover.js";
 import "../popover/index.js";
 import "../../index.js";
-import * as react972 from "react";
+import * as react64 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: react972.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react64.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

@@ -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 react969 from "react";
+import * as react65 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: react969.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react65.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

@@ -9,7 +9,7 @@ import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
 import "../status/index.js";
 import "../../index.js";
-import * as react971 from "react";
+import * as react1050 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: react971.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react1050.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

@@ -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" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
+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

@@ -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 react970 from "react";
+import * as react1049 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: react970.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react1049.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

@@ -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 react1001 from "react";
+import * as react1041 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: react1001.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react1041.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

@@ -11,7 +11,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
 import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react967 from "react";
+import * as react1048 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -67,7 +67,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react967.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react1048.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

@@ -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" | "root" | "indicator" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "root" | "indicator" | "field" | "valueText" | "empty">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "field" | "root" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "field" | "root" | "valueText" | "empty">>, {
   xs: {
     empty: {
       gap: "1.5";