@lindle/linoardo 1.0.41 → 1.0.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -93,6 +93,7 @@ var TimeLineItem = React.forwardRef((props, ref) => {
93
93
  className,
94
94
  children,
95
95
  __timelineSide = "right",
96
+ __timelineAxis = "center",
96
97
  __timelineAlign = "center",
97
98
  __timelineDensity = "default",
98
99
  __timelineColor = "primary",
@@ -103,20 +104,25 @@ var TimeLineItem = React.forwardRef((props, ref) => {
103
104
  __timelineCount = 1,
104
105
  ...rest
105
106
  } = props;
107
+ const timelineSide = side ?? __timelineSide;
106
108
  const resolvedAlign = align ?? __timelineAlign;
107
- const resolvedSide = resolveSide(side ?? __timelineSide, __timelineIndex);
109
+ const resolvedSide = resolveSide(timelineSide, __timelineIndex);
108
110
  const resolvedColor = color ?? __timelineColor;
109
111
  const dotSizeClass = dotSizeClasses[__timelineDotSize] ?? dotSizeClasses.md;
110
112
  const dotPalette = resolveDotPalette(resolvedColor, variant);
111
113
  const iconNode = resolveIconNode(icon);
112
114
  const isLast = __timelineIndex >= __timelineCount - 1;
113
115
  const showLine = !hideLine && !isLast;
116
+ const hasOpposite = Boolean(opposite);
117
+ const isAlternate = timelineSide === "alternate";
118
+ const useAxisLayout = !hasOpposite && !isAlternate && __timelineAxis !== "center";
114
119
  const lineStyle = {
115
120
  width: __timelineLineWidth,
116
121
  backgroundColor: __timelineLineColor
117
122
  };
118
123
  const baseItemClass = twMerge(
119
- "timeline-item grid grid-cols-[1fr_auto_1fr] gap-4",
124
+ "timeline-item grid gap-4",
125
+ useAxisLayout ? __timelineAxis === "left" ? "grid-cols-[auto_1fr]" : "grid-cols-[1fr_auto]" : "grid-cols-[1fr_auto_1fr]",
120
126
  alignClasses[resolvedAlign] ?? alignClasses.center,
121
127
  className
122
128
  );
@@ -126,6 +132,37 @@ var TimeLineItem = React.forwardRef((props, ref) => {
126
132
  ] });
127
133
  const leftContent = resolvedSide === "left" ? /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col text-right", contentClassName), children: contentNode }) : opposite ? /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col text-right text-sm text-gray-500", oppositeClassName), children: opposite }) : /* @__PURE__ */ jsx("div", {});
128
134
  const rightContent = resolvedSide === "right" ? /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col text-left", contentClassName), children: contentNode }) : opposite ? /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col text-left text-sm text-gray-500", oppositeClassName), children: opposite }) : /* @__PURE__ */ jsx("div", {});
135
+ if (useAxisLayout) {
136
+ const contentAlignClass = resolvedSide === "left" ? "text-left" : "text-right";
137
+ const contentContainer = /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col", contentAlignClass, contentClassName), children: contentNode });
138
+ const dotColumn = /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col items-center", children: [
139
+ /* @__PURE__ */ jsx(
140
+ "span",
141
+ {
142
+ className: twMerge(
143
+ "flex items-center justify-center rounded-full ring-4 ring-white",
144
+ dotSizeClass,
145
+ dotPalette.dot,
146
+ dotPalette.ring,
147
+ dotClassName
148
+ ),
149
+ children: dot ?? iconNode
150
+ }
151
+ ),
152
+ /* @__PURE__ */ jsx(
153
+ "span",
154
+ {
155
+ className: twMerge("mt-3 flex-1 bg-gray-200 dark:bg-gray-700", showLine ? void 0 : "invisible", lineClassName),
156
+ style: lineStyle,
157
+ "aria-hidden": true
158
+ }
159
+ )
160
+ ] });
161
+ return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: baseItemClass, children: [
162
+ __timelineAxis === "left" ? dotColumn : contentContainer,
163
+ __timelineAxis === "left" ? contentContainer : dotColumn
164
+ ] });
165
+ }
129
166
  return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: baseItemClass, children: [
130
167
  leftContent,
131
168
  /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col items-center", children: [
@@ -145,11 +182,7 @@ var TimeLineItem = React.forwardRef((props, ref) => {
145
182
  /* @__PURE__ */ jsx(
146
183
  "span",
147
184
  {
148
- className: twMerge(
149
- "mt-3 flex-1 bg-gray-200 dark:bg-gray-700",
150
- showLine ? void 0 : "invisible",
151
- lineClassName
152
- ),
185
+ className: twMerge("mt-3 flex-1 bg-gray-200 dark:bg-gray-700", showLine ? void 0 : "invisible", lineClassName),
153
186
  style: lineStyle,
154
187
  "aria-hidden": true
155
188
  }
@@ -169,6 +202,7 @@ var isTimeLineItem = (child) => {
169
202
  var TimeLine = React.forwardRef((props, ref) => {
170
203
  const {
171
204
  side = "right",
205
+ axis = "center",
172
206
  align = "center",
173
207
  density = "default",
174
208
  color = "primary",
@@ -187,6 +221,7 @@ var TimeLine = React.forwardRef((props, ref) => {
187
221
  }
188
222
  return React.cloneElement(child, {
189
223
  __timelineSide: side,
224
+ __timelineAxis: axis,
190
225
  __timelineAlign: align,
191
226
  __timelineDensity: density,
192
227
  __timelineColor: color,
@@ -197,15 +232,7 @@ var TimeLine = React.forwardRef((props, ref) => {
197
232
  __timelineCount: childArray.length
198
233
  });
199
234
  });
200
- return /* @__PURE__ */ jsx(
201
- "div",
202
- {
203
- ...rest,
204
- ref,
205
- className: twMerge("timeline flex flex-col", resolvedGap, className),
206
- children: resolvedChildren
207
- }
208
- );
235
+ return /* @__PURE__ */ jsx("div", { ...rest, ref, className: twMerge("timeline flex flex-col", resolvedGap, className), children: resolvedChildren });
209
236
  });
210
237
  TimeLine.displayName = "TimeLine";
211
238
  var TimeLineWithItem = TimeLine;
@@ -213,5 +240,5 @@ TimeLineWithItem.Item = TimeLineItem;
213
240
  var TimeLine_default = TimeLineWithItem;
214
241
 
215
242
  export { TimeLineItem, TimeLine_default };
216
- //# sourceMappingURL=chunk-4J3SRVOS.js.map
217
- //# sourceMappingURL=chunk-4J3SRVOS.js.map
243
+ //# sourceMappingURL=chunk-FEGFA3FN.js.map
244
+ //# sourceMappingURL=chunk-FEGFA3FN.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Feedback/TimeLine/index.tsx"],"names":[],"mappings":"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","file":"chunk-FEGFA3FN.js","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { Palette, PropIcon } from '@lindle/linoardo/global.types';\nimport { resolveIconClassName } from '../../Containment/Chip/states.chip';\nimport type {\n TimeLineAlign,\n TimeLineAxis,\n TimeLineDensity,\n TimeLineDotSize,\n TimeLineDotVariant,\n TimeLineItemProps,\n TimeLineProps,\n TimeLineSide\n} from './types.timeline';\n\nconst densityGapClasses: Record<TimeLineDensity, string> = {\n default: 'gap-6',\n compact: 'gap-4'\n};\n\nconst alignClasses: Record<TimeLineAlign, string> = {\n start: 'items-start',\n center: 'items-center',\n end: 'items-end'\n};\n\nconst dotSizeClasses: Record<TimeLineDotSize, string> = {\n sm: 'h-6 w-6 text-xs',\n md: 'h-8 w-8 text-sm',\n lg: 'h-10 w-10 text-base'\n};\n\nconst paletteDotClasses: Record<Palette, Record<TimeLineDotVariant, { dot: string; ring: string }>> = {\n primary: {\n filled: { dot: 'bg-primary text-white border border-primary', ring: 'ring-primary/30' },\n outlined: { dot: 'bg-white text-primary border border-primary', ring: 'ring-primary/20' },\n tonal: { dot: 'bg-primary/15 text-primary border border-primary/20', ring: 'ring-primary/20' }\n },\n neutral: {\n filled: { dot: 'bg-gray-900 text-white border border-gray-900', ring: 'ring-gray-900/20' },\n outlined: { dot: 'bg-white text-gray-900 border border-gray-900', ring: 'ring-gray-900/15' },\n tonal: { dot: 'bg-gray-100 text-gray-800 border border-gray-200', ring: 'ring-gray-900/10' }\n },\n info: {\n filled: { dot: 'bg-sky-500 text-white border border-sky-500', ring: 'ring-sky-500/30' },\n outlined: { dot: 'bg-white text-sky-600 border border-sky-500', ring: 'ring-sky-500/20' },\n tonal: { dot: 'bg-sky-100 text-sky-700 border border-sky-200', ring: 'ring-sky-500/20' }\n },\n success: {\n filled: { dot: 'bg-emerald-500 text-white border border-emerald-500', ring: 'ring-emerald-500/30' },\n outlined: { dot: 'bg-white text-emerald-600 border border-emerald-500', ring: 'ring-emerald-500/20' },\n tonal: { dot: 'bg-emerald-100 text-emerald-700 border border-emerald-200', ring: 'ring-emerald-500/20' }\n },\n warning: {\n filled: { dot: 'bg-amber-500 text-white border border-amber-500', ring: 'ring-amber-500/30' },\n outlined: { dot: 'bg-white text-amber-700 border border-amber-500', ring: 'ring-amber-500/20' },\n tonal: { dot: 'bg-amber-100 text-amber-800 border border-amber-200', ring: 'ring-amber-500/20' }\n },\n danger: {\n filled: { dot: 'bg-red-500 text-white border border-red-500', ring: 'ring-red-500/30' },\n outlined: { dot: 'bg-white text-red-600 border border-red-500', ring: 'ring-red-500/20' },\n tonal: { dot: 'bg-red-100 text-red-700 border border-red-200', ring: 'ring-red-500/20' }\n },\n surface: {\n filled: { dot: 'bg-white text-gray-900 border border-gray-200', ring: 'ring-gray-300/30' },\n outlined: { dot: 'bg-white text-gray-900 border border-gray-300', ring: 'ring-gray-300/20' },\n tonal: { dot: 'bg-gray-50 text-gray-800 border border-gray-200', ring: 'ring-gray-300/20' }\n },\n bw: {\n filled: { dot: 'bg-black text-white border border-black', ring: 'ring-black/30' },\n outlined: { dot: 'bg-white text-black border border-black', ring: 'ring-black/20' },\n tonal: { dot: 'bg-black/10 text-black border border-black/20', ring: 'ring-black/20' }\n }\n};\n\nconst resolveDotPalette = (color: Palette, variant: TimeLineDotVariant) => {\n const palette = paletteDotClasses[color] ?? paletteDotClasses.primary;\n return palette[variant] ?? palette.filled;\n};\n\nconst resolveSide = (side: TimeLineSide, index: number): Exclude<TimeLineSide, 'alternate'> => {\n if (side === 'alternate') {\n return index % 2 === 0 ? 'left' : 'right';\n }\n return side;\n};\n\nconst resolveIconNode = (icon?: PropIcon) => {\n if (!icon) return null;\n const iconClass = resolveIconClassName(icon);\n return iconClass ? <i className={iconClass} aria-hidden /> : null;\n};\n\ntype InternalItemProps = TimeLineItemProps & {\n __timelineSide?: TimeLineSide;\n __timelineAxis?: TimeLineAxis;\n __timelineAlign?: TimeLineAlign;\n __timelineDensity?: TimeLineDensity;\n __timelineColor?: Palette;\n __timelineDotSize?: TimeLineDotSize;\n __timelineLineColor?: string;\n __timelineLineWidth?: number;\n __timelineIndex?: number;\n __timelineCount?: number;\n};\n\n/**\n * Single timeline item with dot, optional icon and left/right content slots.\n */\nconst TimeLineItem = React.forwardRef<HTMLDivElement, InternalItemProps>((props, ref) => {\n const {\n title,\n subtitle,\n opposite,\n icon,\n dot,\n color,\n variant = 'filled',\n side,\n align,\n hideLine,\n dotClassName,\n contentClassName,\n oppositeClassName,\n lineClassName,\n className,\n children,\n __timelineSide = 'right',\n __timelineAxis = 'center',\n __timelineAlign = 'center',\n __timelineDensity = 'default',\n __timelineColor = 'primary',\n __timelineDotSize = 'md',\n __timelineLineColor,\n __timelineLineWidth = 2,\n __timelineIndex = 0,\n __timelineCount = 1,\n ...rest\n } = props;\n\n const timelineSide = side ?? __timelineSide;\n const resolvedAlign = align ?? __timelineAlign;\n const resolvedSide = resolveSide(timelineSide, __timelineIndex);\n const resolvedColor = color ?? __timelineColor;\n const dotSizeClass = dotSizeClasses[__timelineDotSize] ?? dotSizeClasses.md;\n const dotPalette = resolveDotPalette(resolvedColor, variant);\n const iconNode = resolveIconNode(icon);\n const isLast = __timelineIndex >= __timelineCount - 1;\n const showLine = !hideLine && !isLast;\n const hasOpposite = Boolean(opposite);\n const isAlternate = timelineSide === 'alternate';\n const useAxisLayout = !hasOpposite && !isAlternate && __timelineAxis !== 'center';\n const lineStyle: React.CSSProperties = {\n width: __timelineLineWidth,\n backgroundColor: __timelineLineColor\n };\n\n const baseItemClass = twMerge(\n 'timeline-item grid gap-4',\n useAxisLayout ? (__timelineAxis === 'left' ? 'grid-cols-[auto_1fr]' : 'grid-cols-[1fr_auto]') : 'grid-cols-[1fr_auto_1fr]',\n alignClasses[resolvedAlign] ?? alignClasses.center,\n className\n );\n\n const contentNode = children ?? (\n <div className='space-y-1'>\n {title && <div className='text-sm font-semibold text-gray-900'>{title}</div>}\n {subtitle && <div className='text-sm text-gray-500'>{subtitle}</div>}\n </div>\n );\n\n const leftContent =\n resolvedSide === 'left' ? (\n <div className={twMerge('flex flex-col text-right', contentClassName)}>{contentNode}</div>\n ) : opposite ? (\n <div className={twMerge('flex flex-col text-right text-sm text-gray-500', oppositeClassName)}>{opposite}</div>\n ) : (\n <div />\n );\n\n const rightContent =\n resolvedSide === 'right' ? (\n <div className={twMerge('flex flex-col text-left', contentClassName)}>{contentNode}</div>\n ) : opposite ? (\n <div className={twMerge('flex flex-col text-left text-sm text-gray-500', oppositeClassName)}>{opposite}</div>\n ) : (\n <div />\n );\n\n if (useAxisLayout) {\n const contentAlignClass = resolvedSide === 'left' ? 'text-left' : 'text-right';\n const contentContainer = <div className={twMerge('flex flex-col', contentAlignClass, contentClassName)}>{contentNode}</div>;\n const dotColumn = (\n <div className='relative flex h-full flex-col items-center'>\n <span\n className={twMerge(\n 'flex items-center justify-center rounded-full ring-4 ring-white',\n dotSizeClass,\n dotPalette.dot,\n dotPalette.ring,\n dotClassName\n )}\n >\n {dot ?? iconNode}\n </span>\n <span\n className={twMerge('mt-3 flex-1 bg-gray-200 dark:bg-gray-700', showLine ? undefined : 'invisible', lineClassName)}\n style={lineStyle}\n aria-hidden\n />\n </div>\n );\n\n return (\n <div {...rest} ref={ref} className={baseItemClass}>\n {__timelineAxis === 'left' ? dotColumn : contentContainer}\n {__timelineAxis === 'left' ? contentContainer : dotColumn}\n </div>\n );\n }\n\n return (\n <div {...rest} ref={ref} className={baseItemClass}>\n {leftContent}\n <div className='relative flex h-full flex-col items-center'>\n <span\n className={twMerge(\n 'flex items-center justify-center rounded-full ring-4 ring-white',\n dotSizeClass,\n dotPalette.dot,\n dotPalette.ring,\n dotClassName\n )}\n >\n {dot ?? iconNode}\n </span>\n <span\n className={twMerge('mt-3 flex-1 bg-gray-200 dark:bg-gray-700', showLine ? undefined : 'invisible', lineClassName)}\n style={lineStyle}\n aria-hidden\n />\n </div>\n {rightContent}\n </div>\n );\n});\n\nTimeLineItem.displayName = 'TimeLine.Item';\n\nconst isTimeLineItem = (child: React.ReactNode): child is React.ReactElement<InternalItemProps> => {\n if (!React.isValidElement(child)) {\n return false;\n }\n\n const elementType = child.type as { displayName?: string };\n return child.type === TimeLineItem || elementType.displayName === TimeLineItem.displayName;\n};\n\n/**\n * Vuetify-inspired timeline container with optional alternating layout.\n */\nconst TimeLine = React.forwardRef<HTMLDivElement, TimeLineProps>((props, ref) => {\n const {\n side = 'right',\n axis = 'center',\n align = 'center',\n density = 'default',\n color = 'primary',\n lineColor,\n lineWidth = 2,\n dotSize = 'md',\n className,\n children,\n ...rest\n } = props;\n\n const resolvedGap = densityGapClasses[density] ?? densityGapClasses.default;\n const childArray = React.Children.toArray(children);\n\n const resolvedChildren = childArray.map((child, index) => {\n if (!isTimeLineItem(child)) {\n return child;\n }\n\n return React.cloneElement(child, {\n __timelineSide: side,\n __timelineAxis: axis,\n __timelineAlign: align,\n __timelineDensity: density,\n __timelineColor: color,\n __timelineDotSize: dotSize,\n __timelineLineColor: lineColor,\n __timelineLineWidth: lineWidth,\n __timelineIndex: index,\n __timelineCount: childArray.length\n });\n });\n\n return (\n <div {...rest} ref={ref} className={twMerge('timeline flex flex-col', resolvedGap, className)}>\n {resolvedChildren}\n </div>\n );\n});\n\nTimeLine.displayName = 'TimeLine';\n\ntype TimeLineComponent = React.ForwardRefExoticComponent<TimeLineProps & React.RefAttributes<HTMLDivElement>> & {\n Item: typeof TimeLineItem;\n};\n\nconst TimeLineWithItem = TimeLine as TimeLineComponent;\nTimeLineWithItem.Item = TimeLineItem;\n\nexport { TimeLineItem };\nexport type { TimeLineProps, TimeLineItemProps, TimeLineSide, TimeLineAxis, TimeLineAlign, TimeLineDensity, TimeLineDotVariant, TimeLineDotSize };\nexport default TimeLineWithItem;\n"]}
package/dist/index.cjs CHANGED
@@ -2211,6 +2211,7 @@ var Tab = React4__namespace.forwardRef((props, ref) => {
2211
2211
  children,
2212
2212
  __tabsContext,
2213
2213
  __tabsValue,
2214
+ __tabsIndex,
2214
2215
  __tabsTabId,
2215
2216
  __tabsPanelId,
2216
2217
  ...rest
@@ -4483,6 +4484,7 @@ var TimeLineItem = React4__namespace.forwardRef((props, ref) => {
4483
4484
  className,
4484
4485
  children,
4485
4486
  __timelineSide = "right",
4487
+ __timelineAxis = "center",
4486
4488
  __timelineAlign = "center",
4487
4489
  __timelineDensity = "default",
4488
4490
  __timelineColor = "primary",
@@ -4493,20 +4495,25 @@ var TimeLineItem = React4__namespace.forwardRef((props, ref) => {
4493
4495
  __timelineCount = 1,
4494
4496
  ...rest
4495
4497
  } = props;
4498
+ const timelineSide = side ?? __timelineSide;
4496
4499
  const resolvedAlign = align ?? __timelineAlign;
4497
- const resolvedSide = resolveSide(side ?? __timelineSide, __timelineIndex);
4500
+ const resolvedSide = resolveSide(timelineSide, __timelineIndex);
4498
4501
  const resolvedColor = color ?? __timelineColor;
4499
4502
  const dotSizeClass = dotSizeClasses[__timelineDotSize] ?? dotSizeClasses.md;
4500
4503
  const dotPalette = resolveDotPalette(resolvedColor, variant);
4501
4504
  const iconNode = resolveIconNode3(icon);
4502
4505
  const isLast = __timelineIndex >= __timelineCount - 1;
4503
4506
  const showLine = !hideLine && !isLast;
4507
+ const hasOpposite = Boolean(opposite);
4508
+ const isAlternate = timelineSide === "alternate";
4509
+ const useAxisLayout = !hasOpposite && !isAlternate && __timelineAxis !== "center";
4504
4510
  const lineStyle = {
4505
4511
  width: __timelineLineWidth,
4506
4512
  backgroundColor: __timelineLineColor
4507
4513
  };
4508
4514
  const baseItemClass = tailwindMerge.twMerge(
4509
- "timeline-item grid grid-cols-[1fr_auto_1fr] gap-4",
4515
+ "timeline-item grid gap-4",
4516
+ useAxisLayout ? __timelineAxis === "left" ? "grid-cols-[auto_1fr]" : "grid-cols-[1fr_auto]" : "grid-cols-[1fr_auto_1fr]",
4510
4517
  alignClasses[resolvedAlign] ?? alignClasses.center,
4511
4518
  className
4512
4519
  );
@@ -4516,6 +4523,37 @@ var TimeLineItem = React4__namespace.forwardRef((props, ref) => {
4516
4523
  ] });
4517
4524
  const leftContent = resolvedSide === "left" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col text-right", contentClassName), children: contentNode }) : opposite ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col text-right text-sm text-gray-500", oppositeClassName), children: opposite }) : /* @__PURE__ */ jsxRuntime.jsx("div", {});
4518
4525
  const rightContent = resolvedSide === "right" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col text-left", contentClassName), children: contentNode }) : opposite ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col text-left text-sm text-gray-500", oppositeClassName), children: opposite }) : /* @__PURE__ */ jsxRuntime.jsx("div", {});
4526
+ if (useAxisLayout) {
4527
+ const contentAlignClass = resolvedSide === "left" ? "text-left" : "text-right";
4528
+ const contentContainer = /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col", contentAlignClass, contentClassName), children: contentNode });
4529
+ const dotColumn = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full flex-col items-center", children: [
4530
+ /* @__PURE__ */ jsxRuntime.jsx(
4531
+ "span",
4532
+ {
4533
+ className: tailwindMerge.twMerge(
4534
+ "flex items-center justify-center rounded-full ring-4 ring-white",
4535
+ dotSizeClass,
4536
+ dotPalette.dot,
4537
+ dotPalette.ring,
4538
+ dotClassName
4539
+ ),
4540
+ children: dot ?? iconNode
4541
+ }
4542
+ ),
4543
+ /* @__PURE__ */ jsxRuntime.jsx(
4544
+ "span",
4545
+ {
4546
+ className: tailwindMerge.twMerge("mt-3 flex-1 bg-gray-200 dark:bg-gray-700", showLine ? void 0 : "invisible", lineClassName),
4547
+ style: lineStyle,
4548
+ "aria-hidden": true
4549
+ }
4550
+ )
4551
+ ] });
4552
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, ref, className: baseItemClass, children: [
4553
+ __timelineAxis === "left" ? dotColumn : contentContainer,
4554
+ __timelineAxis === "left" ? contentContainer : dotColumn
4555
+ ] });
4556
+ }
4519
4557
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, ref, className: baseItemClass, children: [
4520
4558
  leftContent,
4521
4559
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full flex-col items-center", children: [
@@ -4535,11 +4573,7 @@ var TimeLineItem = React4__namespace.forwardRef((props, ref) => {
4535
4573
  /* @__PURE__ */ jsxRuntime.jsx(
4536
4574
  "span",
4537
4575
  {
4538
- className: tailwindMerge.twMerge(
4539
- "mt-3 flex-1 bg-gray-200 dark:bg-gray-700",
4540
- showLine ? void 0 : "invisible",
4541
- lineClassName
4542
- ),
4576
+ className: tailwindMerge.twMerge("mt-3 flex-1 bg-gray-200 dark:bg-gray-700", showLine ? void 0 : "invisible", lineClassName),
4543
4577
  style: lineStyle,
4544
4578
  "aria-hidden": true
4545
4579
  }
@@ -4559,6 +4593,7 @@ var isTimeLineItem = (child) => {
4559
4593
  var TimeLine = React4__namespace.forwardRef((props, ref) => {
4560
4594
  const {
4561
4595
  side = "right",
4596
+ axis = "center",
4562
4597
  align = "center",
4563
4598
  density = "default",
4564
4599
  color = "primary",
@@ -4577,6 +4612,7 @@ var TimeLine = React4__namespace.forwardRef((props, ref) => {
4577
4612
  }
4578
4613
  return React4__namespace.cloneElement(child, {
4579
4614
  __timelineSide: side,
4615
+ __timelineAxis: axis,
4580
4616
  __timelineAlign: align,
4581
4617
  __timelineDensity: density,
4582
4618
  __timelineColor: color,
@@ -4587,15 +4623,7 @@ var TimeLine = React4__namespace.forwardRef((props, ref) => {
4587
4623
  __timelineCount: childArray.length
4588
4624
  });
4589
4625
  });
4590
- return /* @__PURE__ */ jsxRuntime.jsx(
4591
- "div",
4592
- {
4593
- ...rest,
4594
- ref,
4595
- className: tailwindMerge.twMerge("timeline flex flex-col", resolvedGap, className),
4596
- children: resolvedChildren
4597
- }
4598
- );
4626
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, ref, className: tailwindMerge.twMerge("timeline flex flex-col", resolvedGap, className), children: resolvedChildren });
4599
4627
  });
4600
4628
  TimeLine.displayName = "TimeLine";
4601
4629
  var TimeLineWithItem = TimeLine;