@wallarm-org/design-system 0.77.6 → 0.78.0

package/dist/components/NumericBadge/NumericBadge.d.ts

@@ -4,6 +4,8 @@ import type { TestableProps } from '../../utils/testId';
 import { numericBadgeVariants } from './classes';
 type NumericBadgeNativeProps = HTMLAttributes<HTMLDivElement>;
 type NumericBadgeVariantsProps = Omit<VariantProps<typeof numericBadgeVariants>, 'clickable'>;
-export type NumericBadgeProps = NumericBadgeNativeProps & NumericBadgeVariantsProps & TestableProps;
+export type NumericBadgeProps = NumericBadgeNativeProps & NumericBadgeVariantsProps & TestableProps & {
+    'data-slot'?: string;
+};
 export declare const NumericBadge: FC<NumericBadgeProps>;
 export {};

package/dist/components/NumericBadge/NumericBadge.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { numericBadgeVariants } from "./classes.js";
-const NumericBadge = ({ type = 'primary', size = 'default', onClick, ...props })=>{
+const NumericBadge = ({ type = 'primary', size = 'default', onClick, 'data-slot': dataSlot, ...props })=>{
     const isClickable = !!onClick;
     return /*#__PURE__*/ jsx("div", {
         ...props,
         tabIndex: isClickable ? 0 : void 0,
-        "data-slot": "numeric-badge",
+        "data-slot": dataSlot ?? 'numeric-badge',
         "data-type": type,
         onClick: onClick,
         className: cn(numericBadgeVariants({

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface TimelineProps extends HTMLAttributes<HTMLOListElement>, TestableProps {
+    ref?: Ref<HTMLOListElement>;
+    children: ReactNode;
+}
+export declare const Timeline: FC<TimelineProps>;

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { timelineVariants } from "./classes.js";
+const Timeline = ({ ref, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx("ol", {
+        ...props,
+        ref: ref,
+        "data-slot": "timeline",
+        "data-testid": testId,
+        role: "list",
+        className: cn(timelineVariants(), className),
+        children: /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: children
+        })
+    });
+Timeline.displayName = 'Timeline';
+export { Timeline };

package/dist/components/Timeline/TimelineConnector.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface TimelineConnectorProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+export declare const TimelineConnector: FC<TimelineConnectorProps>;

package/dist/components/Timeline/TimelineConnector.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { timelineConnectorVariants } from "./classes.js";
+const TimelineConnector = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('connector');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "timeline-connector",
+        "data-testid": testId,
+        className: cn(timelineConnectorVariants(), className),
+        children: children
+    });
+};
+TimelineConnector.displayName = 'TimelineConnector';
+export { TimelineConnector };

package/dist/components/Timeline/TimelineContent.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface TimelineContentProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+export declare const TimelineContent: FC<TimelineContentProps>;

package/dist/components/Timeline/TimelineContent.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { timelineContentVariants } from "./classes.js";
+const TimelineContent = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('content');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "timeline-content",
+        "data-testid": testId,
+        className: cn(timelineContentVariants(), className),
+        children: children
+    });
+};
+TimelineContent.displayName = 'TimelineContent';
+export { TimelineContent };

package/dist/components/Timeline/TimelineDescription.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode } from 'react';
+import { type TextProps } from '../Text';
+export interface TimelineDescriptionProps extends Omit<TextProps, 'size' | 'weight' | 'color'> {
+    children: ReactNode;
+}
+export declare const TimelineDescription: FC<TimelineDescriptionProps>;

package/dist/components/Timeline/TimelineDescription.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+const TimelineDescription = ({ children, ...props })=>{
+    const testId = useTestId("description");
+    return /*#__PURE__*/ jsx(Text, {
+        ...props,
+        "data-slot": "timeline-description",
+        "data-testid": testId,
+        size: "sm",
+        color: "secondary",
+        children: children
+    });
+};
+TimelineDescription.displayName = "TimelineDescription";
+export { TimelineDescription };

package/dist/components/Timeline/TimelineIndicator.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type NumericBadgeProps } from '../NumericBadge';
+export interface TimelineIndicatorProps extends Omit<NumericBadgeProps, 'type' | 'size' | 'data-slot'> {
+}
+export declare const TimelineIndicator: FC<TimelineIndicatorProps>;

package/dist/components/Timeline/TimelineIndicator.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { NumericBadge } from "../NumericBadge/index.js";
+const TimelineIndicator = (props)=>{
+    const testId = useTestId('indicator');
+    return /*#__PURE__*/ jsx(NumericBadge, {
+        ...props,
+        type: "outline",
+        "data-slot": "timeline-indicator",
+        "data-testid": testId
+    });
+};
+TimelineIndicator.displayName = 'TimelineIndicator';
+export { TimelineIndicator };

package/dist/components/Timeline/TimelineItem.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface TimelineItemProps extends HTMLAttributes<HTMLLIElement> {
+    ref?: Ref<HTMLLIElement>;
+    children: ReactNode;
+}
+export declare const TimelineItem: FC<TimelineItemProps>;

package/dist/components/Timeline/TimelineItem.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { timelineItemVariants } from "./classes.js";
+const TimelineItem = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('item');
+    return /*#__PURE__*/ jsx("li", {
+        ...props,
+        ref: ref,
+        "data-slot": "timeline-item",
+        "data-testid": testId,
+        className: cn(timelineItemVariants(), className),
+        children: /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: children
+        })
+    });
+};
+TimelineItem.displayName = 'TimelineItem';
+export { TimelineItem };

package/dist/components/Timeline/TimelineSeparator.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type SeparatorProps } from '../Separator';
+export interface TimelineSeparatorProps extends Omit<SeparatorProps, 'orientation'> {
+}
+export declare const TimelineSeparator: FC<TimelineSeparatorProps>;

package/dist/components/Timeline/TimelineSeparator.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Separator } from "../Separator/index.js";
+import { timelineSeparatorVariants } from "./classes.js";
+const TimelineSeparator = ({ className, ...props })=>{
+    const testId = useTestId('separator');
+    return /*#__PURE__*/ jsx(Separator, {
+        ...props,
+        orientation: "vertical",
+        "data-slot": "timeline-separator",
+        "data-testid": testId,
+        className: cn(timelineSeparatorVariants(), className)
+    });
+};
+TimelineSeparator.displayName = 'TimelineSeparator';
+export { TimelineSeparator };

package/dist/components/Timeline/TimelineTitle.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode } from 'react';
+import { type TextProps } from '../Text';
+export interface TimelineTitleProps extends Omit<TextProps, 'size' | 'weight' | 'color'> {
+    children: ReactNode;
+}
+export declare const TimelineTitle: FC<TimelineTitleProps>;

package/dist/components/Timeline/TimelineTitle.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+const TimelineTitle = ({ children, ...props })=>{
+    const testId = useTestId('title');
+    return /*#__PURE__*/ jsx(Text, {
+        ...props,
+        "data-slot": "timeline-title",
+        "data-testid": testId,
+        size: "sm",
+        weight: "medium",
+        color: "primary",
+        children: children
+    });
+};
+TimelineTitle.displayName = 'TimelineTitle';
+export { TimelineTitle };

package/dist/components/Timeline/classes.d.ts

@@ -0,0 +1,5 @@
+export declare const timelineVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const timelineItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const timelineConnectorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const timelineSeparatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const timelineContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/Timeline/classes.js

@@ -0,0 +1,8 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const timelineVariants = cva('list-none flex flex-col');
+const timelineItemVariants = cva(cn('grid grid-cols-[auto_1fr] gap-x-8', '[&:last-child_[data-slot=timeline-separator]]:hidden', '[&:last-child_[data-slot=timeline-content]]:pb-0'));
+const timelineConnectorVariants = cva('col-start-1 flex flex-col items-center h-full');
+const timelineSeparatorVariants = cva('flex-1 min-h-16 self-center');
+const timelineContentVariants = cva('col-start-2 flex flex-col gap-4 min-w-0 pb-16');
+export { timelineConnectorVariants, timelineContentVariants, timelineItemVariants, timelineSeparatorVariants, timelineVariants };

package/dist/components/Timeline/index.d.ts

@@ -0,0 +1,8 @@
+export { Timeline, type TimelineProps } from './Timeline';
+export { TimelineConnector, type TimelineConnectorProps } from './TimelineConnector';
+export { TimelineContent, type TimelineContentProps } from './TimelineContent';
+export { TimelineDescription, type TimelineDescriptionProps } from './TimelineDescription';
+export { TimelineIndicator, type TimelineIndicatorProps } from './TimelineIndicator';
+export { TimelineItem, type TimelineItemProps } from './TimelineItem';
+export { TimelineSeparator, type TimelineSeparatorProps } from './TimelineSeparator';
+export { TimelineTitle, type TimelineTitleProps } from './TimelineTitle';

package/dist/components/Timeline/index.js

@@ -0,0 +1,8 @@
+export { Timeline } from "./Timeline.js";
+export { TimelineConnector } from "./TimelineConnector.js";
+export { TimelineContent } from "./TimelineContent.js";
+export { TimelineDescription } from "./TimelineDescription.js";
+export { TimelineIndicator } from "./TimelineIndicator.js";
+export { TimelineItem } from "./TimelineItem.js";
+export { TimelineSeparator } from "./TimelineSeparator.js";
+export { TimelineTitle } from "./TimelineTitle.js";

package/dist/index.d.ts

@@ -78,6 +78,7 @@ export { Text, type TextProps } from './components/Text';
 export { Textarea, type TextareaProps } from './components/Textarea';
 export { type Theme, ThemeProvider, useTheme, } from './components/ThemeProvider';
 export { TimeInput, type TimeInputProps } from './components/TimeInput';
+export { Timeline, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineIndicator, type TimelineIndicatorProps, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, TimelineTitle, type TimelineTitleProps, } from './components/Timeline';
 export { Toast, ToastActions, Toaster, toaster } from './components/Toast';
 export { ToggleButton, type ToggleButtonProps, } from './components/ToggleButton';
 export { Tooltip, TooltipContent, type TooltipProps, TooltipTrigger, } from './components/Tooltip';

package/dist/index.js

@@ -67,6 +67,7 @@ export { Text } from "./components/Text/index.js";
 export { Textarea } from "./components/Textarea/index.js";
 export { ThemeProvider, useTheme } from "./components/ThemeProvider/index.js";
 export { TimeInput } from "./components/TimeInput/index.js";
+export { Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle } from "./components/Timeline/index.js";
 export { Toast, ToastActions, Toaster, toaster } from "./components/Toast/index.js";
 export { ToggleButton } from "./components/ToggleButton/index.js";
 export { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/index.js";