@jordan-mace/chaser-design-system 1.2.8 → 1.2.9

package/dist/components/Stack/Stack.d.ts

@@ -1,167 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type StackDirection = 'row' | 'column';
-export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
-export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-export type StackProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    direction?: StackDirection;
-    align?: StackAlign;
-    justify?: StackJustify;
-    gap?: 'none' | 'small' | 'medium' | 'large';
-    wrap?: boolean;
-    children?: React.ReactNode;
-};
-declare const Stack: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    display?: ("flex" | "none" | "block" | "inline" | {
-        mobile?: "flex" | "none" | "block" | "inline";
-        tablet?: "flex" | "none" | "block" | "inline";
-        desktop?: "flex" | "none" | "block" | "inline";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "flex" | "none" | "block" | "inline">;
-    width?: ("auto" | "100%" | "50%" | "25%" | {
-        mobile?: "auto" | "100%" | "50%" | "25%";
-        tablet?: "auto" | "100%" | "50%" | "25%";
-        desktop?: "auto" | "100%" | "50%" | "25%";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
-    height?: ("auto" | "100%" | "50%" | "25%" | {
-        mobile?: "auto" | "100%" | "50%" | "25%";
-        tablet?: "auto" | "100%" | "50%" | "25%";
-        desktop?: "auto" | "100%" | "50%" | "25%";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
-    flexDirection?: ("column" | "row" | {
-        mobile?: "column" | "row";
-        tablet?: "column" | "row";
-        desktop?: "column" | "row";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "column" | "row">;
-    justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
-        tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
-        desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start">;
-    alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start";
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start";
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start">;
-    paddingTop?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingRight?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginRight?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginTop?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderRight?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderTop?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderRadius?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    gap?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    padding?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    border?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingX?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingY?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginX?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginY?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start"> | ("stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start";
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start";
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start";
-    });
-} & {
-    color?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
-        lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-        darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-    };
-    background?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
-        lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-        darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-    };
-} & {
-    direction?: StackDirection;
-    align?: StackAlign;
-    justify?: StackJustify;
-    gap?: "none" | "small" | "medium" | "large";
-    wrap?: boolean;
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLElement>>;
-export default Stack;

package/dist/components/Stack/Stack.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import Box from '../Box';
-const alignMap = {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    stretch: 'stretch',
-};
-const justifyMap = {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    between: 'space-between',
-    around: 'space-around',
-    evenly: 'space-evenly',
-};
-const Stack = forwardRef(({ direction = 'column', align, justify, gap, wrap, children, className, style, ...rest }, ref) => {
-    const alignItems = align ? alignMap[align] : undefined;
-    const justifyContent = justify ? justifyMap[justify] : undefined;
-    return (_jsx(Box, { ref: ref, display: "flex", flexDirection: direction, alignItems: alignItems, justifyContent: justifyContent, gap: gap, className: className, style: { flexWrap: wrap ? 'wrap' : undefined, ...style }, ...rest, children: children }));
-});
-Stack.displayName = 'Stack';
-export default Stack;

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

@@ -1,2 +0,0 @@
-export { default as Stack } from './Stack';
-export type { StackProps, StackDirection, StackAlign, StackJustify } from './Stack';

package/dist/components/Stack/index.js

@@ -1 +0,0 @@
-export { default as Stack } from './Stack';

package/dist/components/Stepper/Stepper.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type StepperOrientation = 'horizontal' | 'vertical';
-export type StepStatus = 'pending' | 'current' | 'completed';
-export interface Step {
-    title: string;
-    description?: string;
-    status?: StepStatus;
-}
-export type StepperProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    steps: Step[];
-    currentStep?: number;
-    orientation?: StepperOrientation;
-    showConnectors?: boolean;
-    onStepClick?: (stepIndex: number) => void;
-    clickable?: boolean;
-};
-declare const Stepper: ({ steps, currentStep, orientation, showConnectors, onStepClick, clickable, className, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;
-export default Stepper;

package/dist/components/Stepper/Stepper.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { stepperContainer, stepperHorizontal, stepperVertical, step, stepVertical, stepIndicator, stepIndicatorVariants, stepContent, stepContentVertical, stepTitle, stepDescription, stepConnector, stepConnectorCompleted, stepConnectorVertical, } from './styles.css';
-import Box from '../Box';
-const Stepper = ({ steps, currentStep = 0, orientation = 'horizontal', showConnectors = true, onStepClick, clickable = false, className, ...props }) => {
-    const getStepStatus = (index) => {
-        if (index < currentStep)
-            return 'completed';
-        if (index === currentStep)
-            return 'current';
-        return 'pending';
-    };
-    const handleStepClick = (index) => {
-        if (clickable && onStepClick) {
-            onStepClick(index);
-        }
-    };
-    return (_jsx(Box, { className: clsx(stepperContainer, orientation === 'horizontal' ? stepperHorizontal : stepperVertical, className), role: "list", "aria-label": "Step progress", ...props, children: steps.map((stepItem, index) => {
-            const status = stepItem.status || getStepStatus(index);
-            const isLast = index === steps.length - 1;
-            const isCompleted = status === 'completed';
-            return (_jsxs(Box, { className: clsx(step, orientation === 'vertical' && stepVertical), role: "listitem", "aria-current": status === 'current' ? 'step' : undefined, children: [showConnectors && !isLast && orientation === 'horizontal' && (_jsx(Box, { className: clsx(stepConnector, isCompleted && stepConnectorCompleted), "aria-hidden": "true" })), showConnectors && !isLast && orientation === 'vertical' && (_jsx(Box, { className: stepConnectorVertical, style: { backgroundColor: isCompleted ? undefined : undefined }, "aria-hidden": "true" })), _jsx(Box, { className: clsx(stepIndicator, stepIndicatorVariants[status]), onClick: () => handleStepClick(index), style: { cursor: clickable ? 'pointer' : 'default' }, "aria-label": `Step ${index + 1}: ${stepItem.title}`, children: status === 'completed' ? '✓' : index + 1 }), _jsxs(Box, { className: clsx(stepContent, orientation === 'vertical' && stepContentVertical), children: [_jsx(Box, { as: "h4", className: stepTitle, children: stepItem.title }), stepItem.description && (_jsx(Box, { as: "p", className: stepDescription, children: stepItem.description }))] })] }, index));
-        }) }));
-};
-export default Stepper;

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

@@ -1,2 +0,0 @@
-export { default as Stepper } from './Stepper';
-export type { StepperProps, Step, StepperOrientation, StepStatus } from './Stepper';

package/dist/components/Stepper/index.js

@@ -1 +0,0 @@
-export { default as Stepper } from './Stepper';

package/dist/components/Stepper/styles.css.d.ts

@@ -1,14 +0,0 @@
-export declare const stepperContainer: string;
-export declare const stepperHorizontal: string;
-export declare const stepperVertical: string;
-export declare const step: string;
-export declare const stepVertical: string;
-export declare const stepIndicator: string;
-export declare const stepIndicatorVariants: Record<"current" | "pending" | "completed", string>;
-export declare const stepContent: string;
-export declare const stepContentVertical: string;
-export declare const stepTitle: string;
-export declare const stepDescription: string;
-export declare const stepConnector: string;
-export declare const stepConnectorCompleted: string;
-export declare const stepConnectorVertical: string;

package/dist/components/Stepper/styles.css.js

@@ -1,104 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const stepperContainer = styleWithLayer({
-    display: 'flex',
-    alignItems: 'flex-start',
-    width: '100%',
-});
-export const stepperHorizontal = styleWithLayer({
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-});
-export const stepperVertical = styleWithLayer({
-    flexDirection: 'column',
-    gap: '1rem',
-});
-export const step = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    position: 'relative',
-    flex: 1,
-});
-export const stepVertical = styleWithLayer({
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: '1rem',
-});
-export const stepIndicator = styleWithLayer({
-    width: '2.5rem',
-    height: '2.5rem',
-    borderRadius: '50%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontWeight: '600',
-    fontSize: '14px',
-    transition: 'all 0.3s ease',
-    zIndex: 1,
-});
-export const stepIndicatorVariants = styleVariants({
-    pending: {
-        backgroundColor: vars.colors.borderMuted,
-        color: vars.colors.textSecondary,
-        border: `2px solid ${vars.colors.borderMuted}`,
-    },
-    current: {
-        backgroundColor: vars.colors.buttonBackgroundPrimary,
-        color: vars.colors.buttonTextPrimary,
-        border: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        boxShadow: `0 0 0 4px ${vars.colors.alertInfoBackground}`,
-    },
-    completed: {
-        backgroundColor: vars.colors.alertSuccessBorder,
-        color: vars.colors.buttonTextPrimary,
-        border: `2px solid ${vars.colors.alertSuccessBorder}`,
-    },
-});
-export const stepContent = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    marginTop: '0.5rem',
-    textAlign: 'center',
-});
-export const stepContentVertical = styleWithLayer({
-    alignItems: 'flex-start',
-    marginTop: 0,
-    textAlign: 'left',
-});
-export const stepTitle = styleWithLayer({
-    fontFamily: vars.fontFamily.heading,
-    fontSize: '14px',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: 0,
-});
-export const stepDescription = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '0.25rem',
-    maxWidth: '200px',
-});
-export const stepConnector = styleWithLayer({
-    position: 'absolute',
-    top: '1.25rem',
-    left: 'calc(50% + 1.5rem)',
-    right: 'calc(-50% + 1.5rem)',
-    height: '2px',
-    backgroundColor: vars.colors.borderMuted,
-    zIndex: 0,
-});
-export const stepConnectorCompleted = styleWithLayer({
-    backgroundColor: vars.colors.alertSuccessBorder,
-});
-export const stepConnectorVertical = styleWithLayer({
-    position: 'absolute',
-    top: '2.5rem',
-    left: '1.25rem',
-    width: '2px',
-    height: 'calc(100% + 1rem)',
-    backgroundColor: vars.colors.borderMuted,
-    zIndex: 0,
-});

package/dist/components/Table/Table.d.ts

@@ -1,41 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type TableProps = React.HTMLAttributes<HTMLTableElement> & Sprinkles & {
-    children: React.ReactNode;
-    striped?: boolean;
-};
-type TheadProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-type TbodyProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-type TfootProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-type TrProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-type ThProps = {
-    children?: React.ReactNode;
-    className?: string;
-};
-type TdProps = {
-    children?: React.ReactNode;
-    className?: string;
-    colSpan?: number;
-    rowSpan?: number;
-};
-declare const Table: (({ children, striped, className, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element) & {
-    Thead: ({ children, className }: TheadProps) => import("react/jsx-runtime").JSX.Element;
-    Tbody: ({ children, className }: TbodyProps) => import("react/jsx-runtime").JSX.Element;
-    Tfoot: ({ children, className }: TfootProps) => import("react/jsx-runtime").JSX.Element;
-    Tr: ({ children, className }: TrProps) => import("react/jsx-runtime").JSX.Element;
-    Th: ({ children, className }: ThProps) => import("react/jsx-runtime").JSX.Element;
-    Td: ({ children, className, colSpan, rowSpan }: TdProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default Table;

package/dist/components/Table/Table.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { createContext, useContext } from 'react';
-import { table, thead, tbody, tfoot, tr, th, td, tableContainer, } from './styles.css';
-import Box from '../Box';
-// Context to pass striping info to rows
-const TableContext = createContext({});
-const TableComponent = ({ children, striped = false, className, ...props }) => {
-    return (_jsx(TableContext.Provider, { value: { striped }, children: _jsx(Box, { className: clsx(tableContainer, className), width: "100%", children: _jsx(Box, { as: "table", className: clsx(table), ...props, children: children }) }) }));
-};
-const Thead = ({ children, className }) => {
-    return (_jsx(Box, { as: "thead", className: clsx(thead, className), children: children }));
-};
-const Tbody = ({ children, className }) => {
-    return (_jsx(Box, { as: "tbody", className: clsx(tbody, className), children: children }));
-};
-const Tfoot = ({ children, className }) => {
-    return (_jsx(Box, { as: "tfoot", className: clsx(tfoot, className), children: children }));
-};
-const Tr = ({ children, className }) => {
-    const { striped } = useContext(TableContext);
-    return (_jsx(Box, { as: "tr", className: clsx(tr[striped ? 'striped' : 'default'], className), children: children }));
-};
-const Th = ({ children, className }) => {
-    return (_jsx(Box, { as: "th", className: clsx(th, className), children: children }));
-};
-const Td = ({ children, className, colSpan, rowSpan }) => {
-    return (_jsx(Box, { as: "td", className: clsx(td, className), colSpan: colSpan, rowSpan: rowSpan, children: children }));
-};
-// Attach sub-components
-const Table = Object.assign(TableComponent, {
-    Thead,
-    Tbody,
-    Tfoot,
-    Tr,
-    Th,
-    Td,
-});
-export default Table;

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

@@ -1 +0,0 @@
-export { default as Table } from './Table';

package/dist/components/Table/index.js

@@ -1 +0,0 @@
-export { default as Table } from './Table';

package/dist/components/Table/styles.css.d.ts

@@ -1,8 +0,0 @@
-export declare const table: string;
-export declare const thead: string;
-export declare const tbody: string;
-export declare const tfoot: string;
-export declare const tr: Record<"default" | "striped", string>;
-export declare const th: string;
-export declare const td: string;
-export declare const tableContainer: string;

package/dist/components/Table/styles.css.js

@@ -1,49 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const table = styleWithLayer({
-    width: '100%',
-    borderCollapse: 'collapse',
-    borderSpacing: 0,
-    fontFamily: vars.fontFamily.body,
-});
-export const thead = styleWithLayer({
-    backgroundColor: vars.colors.backgroundDefault,
-    borderBottom: `2px solid ${vars.colors.borderDefault}`,
-});
-export const tbody = styleWithLayer({
-    backgroundColor: 'transparent',
-});
-export const tfoot = styleWithLayer({
-    backgroundColor: vars.colors.backgroundMuted,
-    borderTop: `2px solid ${vars.colors.borderDefault}`,
-    fontWeight: 'bold',
-});
-export const tr = styleVariants({
-    default: {
-        borderBottom: `1px solid ${vars.colors.borderMuted}`,
-        ':hover': {
-            backgroundColor: vars.colors.backgroundMuted,
-        },
-    },
-    striped: {
-        borderBottom: `1px solid ${vars.colors.borderMuted}`,
-    },
-});
-export const th = styleWithLayer({
-    padding: '12px 16px',
-    textAlign: 'left',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    whiteSpace: 'nowrap',
-});
-export const td = styleWithLayer({
-    padding: '12px 16px',
-    color: vars.colors.textPrimary,
-    borderBottom: `1px solid ${vars.colors.borderMuted}`,
-});
-export const tableContainer = styleWithLayer({
-    overflowX: 'auto',
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '8px',
-});

package/dist/components/Tabs/Tabs.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type TabsProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    children: React.ReactNode;
-    defaultValue?: string;
-    orientation?: 'horizontal' | 'vertical';
-    onChange?: (value: string) => void;
-};
-type TabListProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-type TabProps = {
-    value: string;
-    children: React.ReactNode;
-    disabled?: boolean;
-    className?: string;
-};
-type TabPanelProps = {
-    value: string;
-    children: React.ReactNode;
-    className?: string;
-};
-declare const TabsComponent: (({ children, defaultValue, orientation, onChange, className, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element) & {
-    List: ({ children, className }: TabListProps) => import("react/jsx-runtime").JSX.Element;
-    Tab: ({ value, children, disabled, className }: TabProps) => import("react/jsx-runtime").JSX.Element;
-    Panel: ({ value, children, className }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default TabsComponent;

package/dist/components/Tabs/Tabs.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { createContext, useContext, useState } from 'react';
-import { tabsContainer, tabsList, tabsListHorizontal, tabsListVertical, tabItem, tabContent, } from './styles.css';
-import Box from '../Box';
-const TabsContext = createContext({
-    activeTab: '',
-    setActiveTab: () => { },
-});
-const Tabs = ({ children, defaultValue = '', orientation = 'horizontal', onChange, className, ...props }) => {
-    const [activeTab, setActiveTab] = useState(defaultValue);
-    const handleTabChange = (value) => {
-        setActiveTab(value);
-        if (onChange) {
-            onChange(value);
-        }
-    };
-    return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange, orientation }, children: _jsx(Box, { className: clsx(tabsContainer, className), width: "100%", ...props, children: children }) }));
-};
-const TabList = ({ children, className }) => {
-    const { orientation } = useContext(TabsContext);
-    return (_jsx(Box, { as: "div", role: "tablist", className: clsx(tabsList, orientation === 'vertical' ? tabsListVertical : tabsListHorizontal, className), children: children }));
-};
-const Tab = ({ value, children, disabled = false, className }) => {
-    const { activeTab, setActiveTab, orientation } = useContext(TabsContext);
-    const isActive = activeTab === value;
-    const handleClick = () => {
-        if (!disabled) {
-            setActiveTab(value);
-        }
-    };
-    return (_jsx(Box, { as: "button", role: "tab", "aria-selected": isActive, disabled: disabled, onClick: handleClick, className: clsx(tabItem[orientation === 'vertical'
-            ? isActive
-                ? 'verticalActive'
-                : 'base'
-            : isActive
-                ? 'active'
-                : 'base'], className), children: children }));
-};
-const TabPanel = ({ value, children, className }) => {
-    const { activeTab } = useContext(TabsContext);
-    const isActive = activeTab === value;
-    if (!isActive)
-        return null;
-    return (_jsx(Box, { as: "div", role: "tabpanel", className: clsx(tabContent, className), children: children }));
-};
-const TabsComponent = Object.assign(Tabs, {
-    List: TabList,
-    Tab,
-    Panel: TabPanel,
-});
-export default TabsComponent;

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

@@ -1 +0,0 @@
-export { default as Tabs } from './Tabs';

package/dist/components/Tabs/index.js

@@ -1 +0,0 @@
-export { default as Tabs } from './Tabs';