@alma-oss/spirit-web-react 4.0.0

package/components/Timeline/Timeline.js

@@ -0,0 +1,32 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useStyleProps } from "../../hooks/index.js";
+import { mergeStyleProps } from "../../utils/index.js";
+import { TIMELINE_SIZE_DEFAULT } from "./constants.js";
+import { useTimelineStyleProps } from "./useTimelineStyleProps.js";
+const defaultProps = {
+    elementType: 'ol',
+    size: TIMELINE_SIZE_DEFAULT,
+};
+const Timeline = (props) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), props);
+    const { elementType: ElementTag = 'ol', children, size } = propsWithDefaults, restProps = __rest(propsWithDefaults, ["elementType", "children", "size"]);
+    const { classProps } = useTimelineStyleProps({ markerSize: size });
+    const { styleProps, props: otherProps } = useStyleProps(restProps);
+    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps, otherProps });
+    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+};
+Timeline.spiritComponent = 'Timeline';
+export default Timeline;
+//# sourceMappingURL=Timeline.js.map

package/components/Timeline/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,YAAY,GAAiC;IACjD,WAAW,EAAE,IAAI;IACjB,IAAI,EAAE,qBAAqB;CAC5B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAA+B,KAA6B,EAAE,EAAE;IAC/E,MAAM,iBAAiB,mCAAQ,YAAY,GAAK,KAAK,CAAE,CAAC;IACxD,MAAM,EAAE,WAAW,EAAE,UAAU,GAAG,IAAI,EAAE,QAAQ,EAAE,IAAI,KAAmB,iBAAiB,EAA/B,SAAS,UAAK,iBAAiB,EAApF,mCAAgE,CAAoB,CAAC;IAC3F,MAAM,EAAE,UAAU,EAAE,GAAG,qBAAqB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACnE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IACnE,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,EAAE,UAAU,EAAE,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAAC;IAE9G,OAAO,CACL,oBAAC,UAAU,oBAAK,UAAU,EAAM,gBAAgB,GAC7C,QAAQ,CACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;AAEtC,eAAe,QAAQ,CAAC"}

package/components/Timeline/TimelineContent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type SpiritTimelineContentProps } from '../../types';
+declare const TimelineContent: {
+    (props: SpiritTimelineContentProps): React.JSX.Element;
+    spiritComponent: string;
+};
+export default TimelineContent;

package/components/Timeline/TimelineContent.js

@@ -0,0 +1,25 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { useStyleProps } from "../../hooks/index.js";
+import { useTimelineStyleProps } from "./useTimelineStyleProps.js";
+const TimelineContent = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    const { classProps } = useTimelineStyleProps();
+    const { styleProps, props: otherProps } = useStyleProps(restProps);
+    return (React.createElement("div", Object.assign({}, otherProps, { className: classNames(classProps.content, styleProps.className), style: styleProps.style }), children));
+};
+TimelineContent.spiritComponent = 'TimelineContent';
+export default TimelineContent;
+//# sourceMappingURL=TimelineContent.js.map

package/components/Timeline/TimelineContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineContent.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineContent.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,eAAe,GAAG,CAAC,KAAiC,EAAE,EAAE;IAC5D,MAAM,EAAE,QAAQ,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAlC,YAA0B,CAAQ,CAAC;IACzC,MAAM,EAAE,UAAU,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC/C,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAEnE,OAAO,CACL,6CAAS,UAAU,IAAE,SAAS,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,KAC1G,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,eAAe,GAAG,iBAAiB,CAAC;AAEpD,eAAe,eAAe,CAAC"}

package/components/Timeline/TimelineHeading.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type SpiritTimelineHeadingProps } from '../../types';
+declare const TimelineHeading: {
+    (props: SpiritTimelineHeadingProps): React.JSX.Element;
+    spiritComponent: string;
+};
+export default TimelineHeading;

package/components/Timeline/TimelineHeading.js

@@ -0,0 +1,25 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { useStyleProps } from "../../hooks/index.js";
+import { useTimelineStyleProps } from "./useTimelineStyleProps.js";
+const TimelineHeading = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    const { classProps } = useTimelineStyleProps();
+    const { styleProps, props: otherProps } = useStyleProps(restProps);
+    return (React.createElement("div", Object.assign({}, otherProps, { className: classNames(classProps.heading, styleProps.className), style: styleProps.style }), children));
+};
+TimelineHeading.spiritComponent = 'TimelineHeading';
+export default TimelineHeading;
+//# sourceMappingURL=TimelineHeading.js.map

package/components/Timeline/TimelineHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineHeading.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineHeading.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,eAAe,GAAG,CAAC,KAAiC,EAAE,EAAE;IAC5D,MAAM,EAAE,QAAQ,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAlC,YAA0B,CAAQ,CAAC;IACzC,MAAM,EAAE,UAAU,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC/C,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAEnE,OAAO,CACL,6CAAS,UAAU,IAAE,SAAS,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,KAC1G,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,eAAe,GAAG,iBAAiB,CAAC;AAEpD,eAAe,eAAe,CAAC"}

package/components/Timeline/TimelineMarker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type SpiritTimelineMarkerProps } from '../../types';
+declare const TimelineMarker: {
+    (props: SpiritTimelineMarkerProps): React.JSX.Element;
+    spiritComponent: string;
+};
+export default TimelineMarker;

package/components/Timeline/TimelineMarker.js

@@ -0,0 +1,35 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { useStyleProps } from "../../hooks/index.js";
+import { TIMELINE_MARKER } from "./constants.js";
+import { useTimelineStyleProps } from "./useTimelineStyleProps.js";
+const defaultProps = {
+    variant: 'number',
+};
+const TimelineMarker = (props) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), props);
+    const { backgroundColor, borderColor, children, textColor, variant } = propsWithDefaults, restProps = __rest(propsWithDefaults, ["backgroundColor", "borderColor", "children", "textColor", "variant"]);
+    const { classProps } = useTimelineStyleProps({
+        markerBackgroundColor: backgroundColor,
+        markerBorderColor: borderColor,
+        markerTextColor: textColor,
+        markerVariant: variant,
+    });
+    const { styleProps, props: otherProps } = useStyleProps(restProps);
+    return (React.createElement("div", Object.assign({}, otherProps, { className: classNames(classProps.marker, styleProps.className), style: styleProps.style, "aria-hidden": "true" }), variant !== TIMELINE_MARKER.DOT && children));
+};
+TimelineMarker.spiritComponent = 'TimelineMarker';
+export default TimelineMarker;
+//# sourceMappingURL=TimelineMarker.js.map

package/components/Timeline/TimelineMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineMarker.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineMarker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,YAAY,GAAuC;IACvD,OAAO,EAAE,QAAQ;CAClB,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAgC,EAAE,EAAE;IAC1D,MAAM,iBAAiB,mCAAQ,YAAY,GAAK,KAAK,CAAE,CAAC;IACxD,MAAM,EAAE,eAAe,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,KAAmB,iBAAiB,EAA/B,SAAS,UAAK,iBAAiB,EAAhG,sEAA4E,CAAoB,CAAC;IACvG,MAAM,EAAE,UAAU,EAAE,GAAG,qBAAqB,CAAC;QAC3C,qBAAqB,EAAE,eAAe;QACtC,iBAAiB,EAAE,WAAW;QAC9B,eAAe,EAAE,SAAS;QAC1B,aAAa,EAAE,OAAO;KACvB,CAAC,CAAC;IACH,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAEnE,OAAO,CACL,6CACM,UAAU,IACd,SAAS,EAAE,UAAU,CAAC,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,SAAS,CAAC,EAC9D,KAAK,EAAE,UAAU,CAAC,KAAK,iBACX,MAAM,KAEjB,OAAO,KAAK,eAAe,CAAC,GAAG,IAAI,QAAQ,CACxC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,eAAe,GAAG,gBAAgB,CAAC;AAElD,eAAe,cAAc,CAAC"}

package/components/Timeline/TimelineStep.d.ts

@@ -0,0 +1,7 @@
+import React, { type ElementType } from 'react';
+import { type SpiritTimelineStepProps } from '../../types';
+declare const TimelineStep: {
+    <T extends ElementType = "li">(props: SpiritTimelineStepProps<T>): React.JSX.Element;
+    spiritComponent: string;
+};
+export default TimelineStep;

package/components/Timeline/TimelineStep.js

@@ -0,0 +1,30 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useStyleProps } from "../../hooks/index.js";
+import { mergeStyleProps } from "../../utils/index.js";
+import { useTimelineStyleProps } from "./useTimelineStyleProps.js";
+const defaultProps = {
+    elementType: 'li',
+};
+const TimelineStep = (props) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), props);
+    const { elementType: ElementTag = 'li', children } = propsWithDefaults, restProps = __rest(propsWithDefaults, ["elementType", "children"]);
+    const { classProps } = useTimelineStyleProps();
+    const { styleProps, props: otherProps } = useStyleProps(restProps);
+    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.step, styleProps, otherProps });
+    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+};
+TimelineStep.spiritComponent = 'TimelineStep';
+export default TimelineStep;
+//# sourceMappingURL=TimelineStep.js.map

package/components/Timeline/TimelineStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineStep.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineStep.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,YAAY,GAAqC;IACrD,WAAW,EAAE,IAAI;CAClB,CAAC;AAEF,MAAM,YAAY,GAAG,CAA+B,KAAiC,EAAE,EAAE;IACvF,MAAM,iBAAiB,mCAAQ,YAAY,GAAK,KAAK,CAAE,CAAC;IACxD,MAAM,EAAE,WAAW,EAAE,UAAU,GAAG,IAAI,EAAE,QAAQ,KAAmB,iBAAiB,EAA/B,SAAS,UAAK,iBAAiB,EAA9E,2BAA0D,CAAoB,CAAC;IACrF,MAAM,EAAE,UAAU,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC/C,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IACnE,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,EAAE,UAAU,EAAE,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAAC;IAE9G,OAAO,CACL,oBAAC,UAAU,oBAAK,UAAU,EAAM,gBAAgB,GAC7C,QAAQ,CACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,eAAe,GAAG,cAAc,CAAC;AAE9C,eAAe,YAAY,CAAC"}

package/components/Timeline/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const TIMELINE_MARKER: {
+    DOT: string;
+    NUMBER: string;
+    ICON: string;
+};
+export declare const TIMELINE_SIZE_DEFAULT: "small";

package/components/Timeline/constants.js

@@ -0,0 +1,8 @@
+import { Sizes } from "../../constants/index.js";
+export const TIMELINE_MARKER = {
+    DOT: 'dot',
+    NUMBER: 'number',
+    ICON: 'icon',
+};
+export const TIMELINE_SIZE_DEFAULT = Sizes.SMALL;
+//# sourceMappingURL=constants.js.map

package/components/Timeline/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/Timeline/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,KAAK,CAAC"}

package/components/Timeline/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Timeline } from './Timeline';
+export { default as TimelineContent } from './TimelineContent';
+export { default as TimelineHeading } from './TimelineHeading';
+export { default as TimelineMarker } from './TimelineMarker';
+export { default as TimelineStep } from './TimelineStep';
+export * from './useTimelineStyleProps';

package/components/Timeline/index.js

@@ -0,0 +1,7 @@
+export { default as Timeline } from "./Timeline.js";
+export { default as TimelineContent } from "./TimelineContent.js";
+export { default as TimelineHeading } from "./TimelineHeading.js";
+export { default as TimelineMarker } from "./TimelineMarker.js";
+export { default as TimelineStep } from "./TimelineStep.js";
+export * from "./useTimelineStyleProps.js";
+//# sourceMappingURL=index.js.map

package/components/Timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Timeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,yBAAyB,CAAC"}

package/components/Timeline/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@alma-oss/spirit-web-react/components/Timeline",
+  "type": "module",
+  "main": "Timeline.cjs",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/Timeline/useTimelineStyleProps.d.ts

@@ -0,0 +1,20 @@
+import { type ElementType } from 'react';
+import type { SingleOrResponsive, SizesDictionaryType, SpiritTimelineProps, TimelineMarkerProps } from '../../types';
+export interface UseTimelineStyleProps {
+    markerVariant?: TimelineMarkerProps['variant'];
+    markerBackgroundColor?: TimelineMarkerProps['backgroundColor'];
+    markerBorderColor?: TimelineMarkerProps['borderColor'];
+    markerTextColor?: TimelineMarkerProps['textColor'];
+    markerSize?: SingleOrResponsive<SizesDictionaryType>;
+}
+export interface TimelineStyles<T> {
+    classProps: {
+        content: string;
+        heading: string;
+        marker: string;
+        root: string;
+        step: string;
+    };
+    props: T;
+}
+export declare function useTimelineStyleProps(props?: UseTimelineStyleProps): TimelineStyles<SpiritTimelineProps<ElementType>>;

package/components/Timeline/useTimelineStyleProps.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import { useClassNamePrefix } from "../../hooks/index.js";
+import { generateResponsiveClassNames } from "../../utils/index.js";
+import { TIMELINE_MARKER, TIMELINE_SIZE_DEFAULT } from "./constants.js";
+export function useTimelineStyleProps(props) {
+    const _a = props || {}, { markerBackgroundColor, markerBorderColor, markerTextColor, markerVariant, markerSize = TIMELINE_SIZE_DEFAULT } = _a, restProps = __rest(_a, ["markerBackgroundColor", "markerBorderColor", "markerTextColor", "markerVariant", "markerSize"]);
+    const timelineClass = useClassNamePrefix('Timeline');
+    const contentClass = `${timelineClass}Content`;
+    const headingClass = `${timelineClass}Heading`;
+    const markerClass = `${timelineClass}Marker`;
+    const stepClass = `${timelineClass}Step`;
+    const shouldApplyBackgroundAndBorderColors = markerVariant === TIMELINE_MARKER.DOT || markerVariant === TIMELINE_MARKER.NUMBER;
+    const markerBackgroundPrefix = useClassNamePrefix(`bg-${markerBackgroundColor}`);
+    const markerBorderClassPrefix = useClassNamePrefix(`border-${markerBorderColor}`);
+    const markerTextColorClassPrefix = useClassNamePrefix(`text-${markerTextColor}`);
+    const markerBackgroundClass = markerBackgroundColor ? markerBackgroundPrefix : '';
+    const markerBorderClass = markerBorderColor ? markerBorderClassPrefix : '';
+    const markerTextColorClass = markerTextColor ? markerTextColorClassPrefix : '';
+    const markerClasses = classNames(markerClass, {
+        [`${markerClass}--${markerVariant}`]: !!markerVariant,
+        [markerBackgroundClass]: shouldApplyBackgroundAndBorderColors,
+        [markerBorderClass]: shouldApplyBackgroundAndBorderColors,
+        [markerTextColorClass]: !!markerTextColor,
+    });
+    const sizeClassNames = generateResponsiveClassNames(timelineClass, markerSize);
+    const rootClasses = classNames(timelineClass, ...sizeClassNames);
+    return {
+        classProps: {
+            content: contentClass,
+            heading: headingClass,
+            marker: markerClasses,
+            root: rootClasses,
+            step: stepClass,
+        },
+        props: restProps,
+    };
+}
+//# sourceMappingURL=useTimelineStyleProps.js.map

package/components/Timeline/useTimelineStyleProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimelineStyleProps.js","sourceRoot":"","sources":["../../../src/components/Timeline/useTimelineStyleProps.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,4BAA4B,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAuBrE,MAAM,UAAU,qBAAqB,CAAC,KAA6B;IACjE,MAAM,KAOF,KAAK,IAAI,EAAE,EAPT,EACJ,qBAAqB,EACrB,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,UAAU,GAAG,qBAAqB,OAErB,EADV,SAAS,cANR,gGAOL,CAAc,CAAC;IAChB,MAAM,aAAa,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,GAAG,aAAa,SAAS,CAAC;IAC/C,MAAM,YAAY,GAAG,GAAG,aAAa,SAAS,CAAC;IAC/C,MAAM,WAAW,GAAG,GAAG,aAAa,QAAQ,CAAC;IAC7C,MAAM,SAAS,GAAG,GAAG,aAAa,MAAM,CAAC;IACzC,MAAM,oCAAoC,GACxC,aAAa,KAAK,eAAe,CAAC,GAAG,IAAI,aAAa,KAAK,eAAe,CAAC,MAAM,CAAC;IACpF,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,MAAM,qBAAqB,EAAE,CAAC,CAAC;IACjF,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,UAAU,iBAAiB,EAAE,CAAC,CAAC;IAClF,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,QAAQ,eAAe,EAAE,CAAC,CAAC;IACjF,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IAClF,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3E,MAAM,oBAAoB,GAAG,eAAe,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/E,MAAM,aAAa,GAAG,UAAU,CAAC,WAAW,EAAE;QAC5C,CAAC,GAAG,WAAW,KAAK,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC,aAAa;QACrD,CAAC,qBAAqB,CAAC,EAAE,oCAAoC;QAC7D,CAAC,iBAAiB,CAAC,EAAE,oCAAoC;QACzD,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC,eAAe;KAC1C,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,4BAA4B,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAC/E,MAAM,WAAW,GAAG,UAAU,CAAC,aAAa,EAAE,GAAG,cAAc,CAAC,CAAC;IAEjE,OAAO;QACL,UAAU,EAAE;YACV,OAAO,EAAE,YAAY;YACrB,OAAO,EAAE,YAAY;YACrB,MAAM,EAAE,aAAa;YACrB,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,SAAS;SAChB;QACD,KAAK,EAAE,SAAS;KACjB,CAAC;AACJ,CAAC"}