@lindle/linoardo 1.0.39 → 1.0.41

package/dist/select.d.cts

@@ -1,6 +1,6 @@
 import react__default from 'react';
-import { b as PropIcon, a as GlobalSize } from './global.types-D-o85tuX.cjs';
-import { a as InputVariant } from './types-DqPSePni.cjs';
+import { P as PropIcon, G as GlobalSize } from './global.types-gx9A7mUe.cjs';
+import { a as InputVariant } from './types-CJ0zqPXF.cjs';
 
 interface SelectOptionObject {
     value: string | number;
@@ -9,7 +9,7 @@ interface SelectOptionObject {
     icon?: PropIcon;
 }
 type SelectOption = SelectOptionObject | string;
-interface SelectProps extends Omit<react__default.DetailsHTMLAttributes<HTMLDetailsElement>, 'onChange' | 'value' | 'defaultValue'> {
+interface SelectProps extends Omit<react__default.DetailsHTMLAttributes<HTMLDetailsElement>, 'onBlur' | 'onChange' | 'value' | 'defaultValue'> {
     options: SelectOption[];
     label?: string;
     placeholder?: string;
@@ -25,11 +25,12 @@ interface SelectProps extends Omit<react__default.DetailsHTMLAttributes<HTMLDeta
     disabled?: boolean;
     required?: boolean;
     onChange?: react__default.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: react__default.FocusEventHandler<HTMLInputElement>;
 }
 /**
  * Custom styled Select component using <details> and radio/checkbox inputs.
  * Supports icons and custom styling while remaining a Server Component (no hooks).
  */
-declare const Select: react__default.FC<SelectProps>;
+declare const Select: react__default.ForwardRefExoticComponent<SelectProps & react__default.RefAttributes<HTMLInputElement>>;
 
 export { type SelectOption, type SelectOptionObject, type SelectProps, Select as default };

package/dist/select.d.ts

@@ -1,6 +1,6 @@
 import react__default from 'react';
-import { b as PropIcon, a as GlobalSize } from './global.types-D-o85tuX.js';
-import { a as InputVariant } from './types-CbQEphC3.js';
+import { P as PropIcon, G as GlobalSize } from './global.types-gx9A7mUe.js';
+import { a as InputVariant } from './types-DaTHYIPO.js';
 
 interface SelectOptionObject {
     value: string | number;
@@ -9,7 +9,7 @@ interface SelectOptionObject {
     icon?: PropIcon;
 }
 type SelectOption = SelectOptionObject | string;
-interface SelectProps extends Omit<react__default.DetailsHTMLAttributes<HTMLDetailsElement>, 'onChange' | 'value' | 'defaultValue'> {
+interface SelectProps extends Omit<react__default.DetailsHTMLAttributes<HTMLDetailsElement>, 'onBlur' | 'onChange' | 'value' | 'defaultValue'> {
     options: SelectOption[];
     label?: string;
     placeholder?: string;
@@ -25,11 +25,12 @@ interface SelectProps extends Omit<react__default.DetailsHTMLAttributes<HTMLDeta
     disabled?: boolean;
     required?: boolean;
     onChange?: react__default.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: react__default.FocusEventHandler<HTMLInputElement>;
 }
 /**
  * Custom styled Select component using <details> and radio/checkbox inputs.
  * Supports icons and custom styling while remaining a Server Component (no hooks).
  */
-declare const Select: react__default.FC<SelectProps>;
+declare const Select: react__default.ForwardRefExoticComponent<SelectProps & react__default.RefAttributes<HTMLInputElement>>;
 
 export { type SelectOption, type SelectOptionObject, type SelectProps, Select as default };

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select_default as default } from './chunk-BDN4EDJQ.js';
+export { Select_default as default } from './chunk-LULQOD2K.js';
 import './chunk-6SKW43XI.js';
 import './chunk-IEILIKS2.js';
 //# sourceMappingURL=select.js.map

package/dist/slider.d.cts

@@ -1,4 +1,4 @@
-import { P as Palette } from './global.types-D-o85tuX.cjs';
+import { a as Palette } from './global.types-gx9A7mUe.cjs';
 
 type SliderSize = 'small' | 'medium' | 'large';
 type SliderProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value' | 'defaultValue'> & {

package/dist/slider.d.ts

@@ -1,4 +1,4 @@
-import { P as Palette } from './global.types-D-o85tuX.js';
+import { a as Palette } from './global.types-gx9A7mUe.js';
 
 type SliderSize = 'small' | 'medium' | 'large';
 type SliderProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value' | 'defaultValue'> & {

package/dist/styles.css

@@ -471,6 +471,9 @@
   .-mr-1 {
     margin-right: calc(var(--spacing) * -1);
   }
+  .-mb-px {
+    margin-bottom: -1px;
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -543,6 +546,9 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
@@ -606,6 +612,9 @@
   .min-h-80 {
     min-height: calc(var(--spacing) * 80);
   }
+  .min-h-112 {
+    min-height: calc(var(--spacing) * 112);
+  }
   .min-h-\[1\.5rem\] {
     min-height: 1.5rem;
   }
@@ -627,9 +636,6 @@
   .min-h-\[18rem\] {
     min-height: 18rem;
   }
-  .min-h-\[28rem\] {
-    min-height: 28rem;
-  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -858,6 +864,9 @@
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-\[1fr_auto_1fr\] {
+    grid-template-columns: 1fr auto 1fr;
+  }
   .grid-cols-\[auto_1fr_auto\] {
     grid-template-columns: auto 1fr auto;
   }
@@ -1013,6 +1022,9 @@
   .overflow-visible {
     overflow: visible;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -1106,6 +1118,12 @@
   .border-black {
     border-color: var(--color-black);
   }
+  .border-black\/20 {
+    border-color: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+  }
   .border-black\/30 {
     border-color: color-mix(in srgb, #000 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1313,12 +1331,21 @@
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
+  .bg-gray-100\/80 {
+    background-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-100) 80%, transparent);
+    }
+  }
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
   .bg-gray-300 {
     background-color: var(--color-gray-300);
   }
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
@@ -1729,6 +1756,9 @@
   .px-7 {
     padding-inline: calc(var(--spacing) * 7);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -1852,6 +1882,12 @@
   .pl-12 {
     padding-left: calc(var(--spacing) * 12);
   }
+  .pl-14 {
+    padding-left: calc(var(--spacing) * 14);
+  }
+  .pl-16 {
+    padding-left: calc(var(--spacing) * 16);
+  }
   .text-center {
     text-align: center;
   }
@@ -1896,6 +1932,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[0\.6rem\] {
+    font-size: 0.6rem;
+  }
   .text-\[0\.55rem\] {
     font-size: 0.55rem;
   }
@@ -1989,6 +2028,9 @@
   .text-emerald-900 {
     color: var(--color-emerald-900);
   }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
   .text-gray-500 {
     color: var(--color-gray-500);
   }
@@ -2240,6 +2282,18 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-slate-900) 40%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
+  .ring-amber-500\/20 {
+    --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
+    }
+  }
+  .ring-amber-500\/30 {
+    --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
+    }
+  }
   .ring-black {
     --tw-ring-color: var(--color-black);
   }
@@ -2255,6 +2309,18 @@
       --tw-ring-color: color-mix(in oklab, var(--color-black) 10%, transparent);
     }
   }
+  .ring-black\/20 {
+    --tw-ring-color: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+  }
+  .ring-black\/30 {
+    --tw-ring-color: color-mix(in srgb, #000 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    }
+  }
   .ring-black\/40 {
     --tw-ring-color: color-mix(in srgb, #000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2267,6 +2333,84 @@
       --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
     }
   }
+  .ring-emerald-500\/20 {
+    --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
+    }
+  }
+  .ring-emerald-500\/30 {
+    --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
+    }
+  }
+  .ring-gray-300\/20 {
+    --tw-ring-color: color-mix(in srgb, oklch(87.2% 0.01 258.338) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-gray-300) 20%, transparent);
+    }
+  }
+  .ring-gray-300\/30 {
+    --tw-ring-color: color-mix(in srgb, oklch(87.2% 0.01 258.338) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-gray-300) 30%, transparent);
+    }
+  }
+  .ring-gray-900\/10 {
+    --tw-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-gray-900) 10%, transparent);
+    }
+  }
+  .ring-gray-900\/15 {
+    --tw-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-gray-900) 15%, transparent);
+    }
+  }
+  .ring-gray-900\/20 {
+    --tw-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-gray-900) 20%, transparent);
+    }
+  }
+  .ring-primary\/20 {
+    --tw-ring-color: color-mix(in srgb, oklch(0.62 0.13 250) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    }
+  }
+  .ring-primary\/30 {
+    --tw-ring-color: color-mix(in srgb, oklch(0.62 0.13 250) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+    }
+  }
+  .ring-red-500\/20 {
+    --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
+    }
+  }
+  .ring-red-500\/30 {
+    --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
+    }
+  }
+  .ring-sky-500\/20 {
+    --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
+    }
+  }
+  .ring-sky-500\/30 {
+    --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
+    }
+  }
   .ring-white {
     --tw-ring-color: var(--color-white);
   }
@@ -2618,9 +2762,14 @@
       top: calc(var(--spacing) * 0);
     }
   }
-  .peer-focus\:left-7 {
+  .peer-focus\:left-3 {
+    &:is(:where(.peer):focus ~ *) {
+      left: calc(var(--spacing) * 3);
+    }
+  }
+  .peer-focus\:left-10 {
     &:is(:where(.peer):focus ~ *) {
-      left: calc(var(--spacing) * 7);
+      left: calc(var(--spacing) * 10);
     }
   }
   .peer-focus\:-translate-y-1\/2 {
@@ -3145,6 +3294,13 @@
       }
     }
   }
+  .hover\:text-gray-900 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-900);
+      }
+    }
+  }
   .hover\:text-primary {
     &:hover {
       @media (hover: hover) {
@@ -3788,6 +3944,11 @@
       background-color: var(--color-gray-100);
     }
   }
+  .dark\:bg-gray-700 {
+    &:is(.dark &) {
+      background-color: var(--color-gray-700);
+    }
+  }
   .dark\:bg-gray-800 {
     &:is(.dark &) {
       background-color: var(--color-gray-800);

package/dist/switch.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { P as Palette } from './global.types-D-o85tuX.cjs';
+import { a as Palette } from './global.types-gx9A7mUe.cjs';
 
 type SwitchSize = 'small' | 'medium' | 'large';
 

package/dist/switch.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { P as Palette } from './global.types-D-o85tuX.js';
+import { a as Palette } from './global.types-gx9A7mUe.js';
 
 type SwitchSize = 'small' | 'medium' | 'large';
 

package/dist/timeline.cjs

@@ -0,0 +1,274 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/Feedback/TimeLine/index.tsx
+
+// src/globals.ts
+var iconBaseClasses = {
+  mdi: ["mdi"]
+};
+
+// src/Containment/Chip/states.chip.ts
+var resolveIconClassName = (icon) => {
+  if (!icon) {
+    return void 0;
+  }
+  if (typeof icon === "string") {
+    const trimmed = icon.trim();
+    if (!trimmed) {
+      return void 0;
+    }
+    if (trimmed.includes(" ")) {
+      return trimmed;
+    }
+    const normalized2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
+    return ["mdi", normalized2].join(" ");
+  }
+  const [library, providedName] = icon;
+  const normalizedLibrary = library.trim();
+  const baseClasses = iconBaseClasses[normalizedLibrary] ?? [normalizedLibrary];
+  const iconName = providedName.trim();
+  if (!iconName) {
+    return baseClasses.join(" ");
+  }
+  const normalized = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
+  return Array.from(/* @__PURE__ */ new Set([...baseClasses, normalized])).join(" ");
+};
+var densityGapClasses = {
+  default: "gap-6",
+  compact: "gap-4"
+};
+var alignClasses = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end"
+};
+var dotSizeClasses = {
+  sm: "h-6 w-6 text-xs",
+  md: "h-8 w-8 text-sm",
+  lg: "h-10 w-10 text-base"
+};
+var paletteDotClasses = {
+  primary: {
+    filled: { dot: "bg-primary text-white border border-primary", ring: "ring-primary/30" },
+    outlined: { dot: "bg-white text-primary border border-primary", ring: "ring-primary/20" },
+    tonal: { dot: "bg-primary/15 text-primary border border-primary/20", ring: "ring-primary/20" }
+  },
+  neutral: {
+    filled: { dot: "bg-gray-900 text-white border border-gray-900", ring: "ring-gray-900/20" },
+    outlined: { dot: "bg-white text-gray-900 border border-gray-900", ring: "ring-gray-900/15" },
+    tonal: { dot: "bg-gray-100 text-gray-800 border border-gray-200", ring: "ring-gray-900/10" }
+  },
+  info: {
+    filled: { dot: "bg-sky-500 text-white border border-sky-500", ring: "ring-sky-500/30" },
+    outlined: { dot: "bg-white text-sky-600 border border-sky-500", ring: "ring-sky-500/20" },
+    tonal: { dot: "bg-sky-100 text-sky-700 border border-sky-200", ring: "ring-sky-500/20" }
+  },
+  success: {
+    filled: { dot: "bg-emerald-500 text-white border border-emerald-500", ring: "ring-emerald-500/30" },
+    outlined: { dot: "bg-white text-emerald-600 border border-emerald-500", ring: "ring-emerald-500/20" },
+    tonal: { dot: "bg-emerald-100 text-emerald-700 border border-emerald-200", ring: "ring-emerald-500/20" }
+  },
+  warning: {
+    filled: { dot: "bg-amber-500 text-white border border-amber-500", ring: "ring-amber-500/30" },
+    outlined: { dot: "bg-white text-amber-700 border border-amber-500", ring: "ring-amber-500/20" },
+    tonal: { dot: "bg-amber-100 text-amber-800 border border-amber-200", ring: "ring-amber-500/20" }
+  },
+  danger: {
+    filled: { dot: "bg-red-500 text-white border border-red-500", ring: "ring-red-500/30" },
+    outlined: { dot: "bg-white text-red-600 border border-red-500", ring: "ring-red-500/20" },
+    tonal: { dot: "bg-red-100 text-red-700 border border-red-200", ring: "ring-red-500/20" }
+  },
+  surface: {
+    filled: { dot: "bg-white text-gray-900 border border-gray-200", ring: "ring-gray-300/30" },
+    outlined: { dot: "bg-white text-gray-900 border border-gray-300", ring: "ring-gray-300/20" },
+    tonal: { dot: "bg-gray-50 text-gray-800 border border-gray-200", ring: "ring-gray-300/20" }
+  },
+  bw: {
+    filled: { dot: "bg-black text-white border border-black", ring: "ring-black/30" },
+    outlined: { dot: "bg-white text-black border border-black", ring: "ring-black/20" },
+    tonal: { dot: "bg-black/10 text-black border border-black/20", ring: "ring-black/20" }
+  }
+};
+var resolveDotPalette = (color, variant) => {
+  const palette = paletteDotClasses[color] ?? paletteDotClasses.primary;
+  return palette[variant] ?? palette.filled;
+};
+var resolveSide = (side, index) => {
+  if (side === "alternate") {
+    return index % 2 === 0 ? "left" : "right";
+  }
+  return side;
+};
+var resolveIconNode = (icon) => {
+  if (!icon) return null;
+  const iconClass = resolveIconClassName(icon);
+  return iconClass ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: iconClass, "aria-hidden": true }) : null;
+};
+var TimeLineItem = React__namespace.forwardRef((props, ref) => {
+  const {
+    title,
+    subtitle,
+    opposite,
+    icon,
+    dot,
+    color,
+    variant = "filled",
+    side,
+    align,
+    hideLine,
+    dotClassName,
+    contentClassName,
+    oppositeClassName,
+    lineClassName,
+    className,
+    children,
+    __timelineSide = "right",
+    __timelineAlign = "center",
+    __timelineDensity = "default",
+    __timelineColor = "primary",
+    __timelineDotSize = "md",
+    __timelineLineColor,
+    __timelineLineWidth = 2,
+    __timelineIndex = 0,
+    __timelineCount = 1,
+    ...rest
+  } = props;
+  const resolvedAlign = align ?? __timelineAlign;
+  const resolvedSide = resolveSide(side ?? __timelineSide, __timelineIndex);
+  const resolvedColor = color ?? __timelineColor;
+  const dotSizeClass = dotSizeClasses[__timelineDotSize] ?? dotSizeClasses.md;
+  const dotPalette = resolveDotPalette(resolvedColor, variant);
+  const iconNode = resolveIconNode(icon);
+  const isLast = __timelineIndex >= __timelineCount - 1;
+  const showLine = !hideLine && !isLast;
+  const lineStyle = {
+    width: __timelineLineWidth,
+    backgroundColor: __timelineLineColor
+  };
+  const baseItemClass = tailwindMerge.twMerge(
+    "timeline-item grid grid-cols-[1fr_auto_1fr] gap-4",
+    alignClasses[resolvedAlign] ?? alignClasses.center,
+    className
+  );
+  const contentNode = children ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-900", children: title }),
+    subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: subtitle })
+  ] });
+  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", {});
+  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", {});
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, ref, className: baseItemClass, children: [
+    leftContent,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full flex-col items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: tailwindMerge.twMerge(
+            "flex items-center justify-center rounded-full ring-4 ring-white",
+            dotSizeClass,
+            dotPalette.dot,
+            dotPalette.ring,
+            dotClassName
+          ),
+          children: dot ?? iconNode
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: tailwindMerge.twMerge(
+            "mt-3 flex-1 bg-gray-200 dark:bg-gray-700",
+            showLine ? void 0 : "invisible",
+            lineClassName
+          ),
+          style: lineStyle,
+          "aria-hidden": true
+        }
+      )
+    ] }),
+    rightContent
+  ] });
+});
+TimeLineItem.displayName = "TimeLine.Item";
+var isTimeLineItem = (child) => {
+  if (!React__namespace.isValidElement(child)) {
+    return false;
+  }
+  const elementType = child.type;
+  return child.type === TimeLineItem || elementType.displayName === TimeLineItem.displayName;
+};
+var TimeLine = React__namespace.forwardRef((props, ref) => {
+  const {
+    side = "right",
+    align = "center",
+    density = "default",
+    color = "primary",
+    lineColor,
+    lineWidth = 2,
+    dotSize = "md",
+    className,
+    children,
+    ...rest
+  } = props;
+  const resolvedGap = densityGapClasses[density] ?? densityGapClasses.default;
+  const childArray = React__namespace.Children.toArray(children);
+  const resolvedChildren = childArray.map((child, index) => {
+    if (!isTimeLineItem(child)) {
+      return child;
+    }
+    return React__namespace.cloneElement(child, {
+      __timelineSide: side,
+      __timelineAlign: align,
+      __timelineDensity: density,
+      __timelineColor: color,
+      __timelineDotSize: dotSize,
+      __timelineLineColor: lineColor,
+      __timelineLineWidth: lineWidth,
+      __timelineIndex: index,
+      __timelineCount: childArray.length
+    });
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: tailwindMerge.twMerge("timeline flex flex-col", resolvedGap, className),
+      children: resolvedChildren
+    }
+  );
+});
+TimeLine.displayName = "TimeLine";
+var TimeLineWithItem = TimeLine;
+TimeLineWithItem.Item = TimeLineItem;
+var TimeLine_default = TimeLineWithItem;
+
+exports.TimeLineItem = TimeLineItem;
+exports.default = TimeLine_default;
+//# sourceMappingURL=timeline.cjs.map
+//# sourceMappingURL=timeline.cjs.map