@grupor5/raya 0.2.1 → 0.2.2

package/dist/tokens/stroke.d.mts

@@ -0,0 +1,292 @@
+/**
+ * Raya Design System - Stroke Tokens
+ *
+ * Stroke system for defining element outlines and providing visual hierarchy
+ * through consistent border treatments.
+ */
+declare const stroke: {
+    readonly 1: "1px";
+    readonly 2: "2px";
+};
+type StrokeToken = keyof typeof stroke;
+/**
+ * Stroke colors using design system color tokens
+ */
+declare const strokeColors: {
+    readonly default: "hsl(var(--border))";
+    readonly muted: "hsl(var(--muted))";
+    readonly primary: "hsl(var(--primary))";
+    readonly secondary: "hsl(var(--secondary))";
+    readonly destructive: "hsl(var(--destructive))";
+    readonly focus: "hsl(var(--ring))";
+    readonly transparent: "transparent";
+};
+type StrokeColorToken = keyof typeof strokeColors;
+/**
+ * Pre-composed stroke styles for common use cases
+ */
+declare const strokeStyles: {
+    readonly default: {
+        readonly width: "1px";
+        readonly color: "hsl(var(--border))";
+        readonly style: "solid";
+    };
+    readonly emphasized: {
+        readonly width: "2px";
+        readonly color: "hsl(var(--border))";
+        readonly style: "solid";
+    };
+    readonly focus: {
+        readonly width: "2px";
+        readonly color: "hsl(var(--ring))";
+        readonly style: "solid";
+    };
+    readonly hover: {
+        readonly width: "2px";
+        readonly color: "hsl(var(--primary))";
+        readonly style: "solid";
+    };
+    readonly primary: {
+        readonly width: "1px";
+        readonly color: "hsl(var(--primary))";
+        readonly style: "solid";
+    };
+    readonly primaryEmphasized: {
+        readonly width: "2px";
+        readonly color: "hsl(var(--primary))";
+        readonly style: "solid";
+    };
+    readonly destructive: {
+        readonly width: "1px";
+        readonly color: "hsl(var(--destructive))";
+        readonly style: "solid";
+    };
+    readonly destructiveEmphasized: {
+        readonly width: "2px";
+        readonly color: "hsl(var(--destructive))";
+        readonly style: "solid";
+    };
+    readonly muted: {
+        readonly width: "1px";
+        readonly color: "hsl(var(--muted))";
+        readonly style: "solid";
+    };
+    readonly transparent: {
+        readonly width: "1px";
+        readonly color: "transparent";
+        readonly style: "solid";
+    };
+};
+/**
+ * Component-specific stroke configurations
+ */
+declare const componentStrokes: {
+    readonly button: {
+        readonly outline: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+        readonly outlineHover: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+        readonly outlineFocus: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--ring))";
+            readonly style: "solid";
+        };
+        readonly destructiveOutline: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--destructive))";
+            readonly style: "solid";
+        };
+        readonly destructiveOutlineHover: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--destructive))";
+            readonly style: "solid";
+        };
+    };
+    readonly card: {
+        readonly default: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly emphasized: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly interactive: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly interactiveHover: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+        readonly selected: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+    };
+    readonly form: {
+        readonly input: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly inputFocus: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--ring))";
+            readonly style: "solid";
+        };
+        readonly inputError: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--destructive))";
+            readonly style: "solid";
+        };
+        readonly inputDisabled: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--muted))";
+            readonly style: "solid";
+        };
+        readonly select: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly checkbox: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly checkboxChecked: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+    };
+    readonly navigation: {
+        readonly divider: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly tabActive: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+        readonly tabInactive: {
+            readonly width: "1px";
+            readonly color: "transparent";
+            readonly style: "solid";
+        };
+        readonly tabHover: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+    };
+    readonly layout: {
+        readonly divider: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly section: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--muted))";
+            readonly style: "solid";
+        };
+        readonly container: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+    };
+};
+/**
+ * Directional stroke utilities
+ */
+declare const strokeDirections: {
+    readonly all: "border";
+    readonly top: "border-top";
+    readonly right: "border-right";
+    readonly bottom: "border-bottom";
+    readonly left: "border-left";
+    readonly horizontal: readonly ["border-left", "border-right"];
+    readonly vertical: readonly ["border-top", "border-bottom"];
+};
+type StrokeDirection = keyof typeof strokeDirections;
+/**
+ * Utility function to get stroke value
+ */
+declare const getStroke: (token: StrokeToken) => string;
+/**
+ * Utility function to get stroke color
+ */
+declare const getStrokeColor: (token: StrokeColorToken) => string;
+/**
+ * Utility function to create complete stroke style
+ */
+declare const createStroke: (width: StrokeToken, color?: StrokeColorToken, style?: "solid" | "dashed" | "dotted") => string;
+/**
+ * Generate CSS custom properties for strokes
+ */
+declare const generateStrokesCSS: () => string;
+/**
+ * Stroke tokens for Tailwind CSS configuration
+ */
+declare const tailwindStrokes: {
+    readonly borderWidth: {
+        readonly 'stroke-1': "var(--stroke-1)";
+        readonly 'stroke-2': "var(--stroke-2)";
+    };
+    readonly outlineWidth: {
+        readonly 'stroke-1': "var(--stroke-1)";
+        readonly 'stroke-2': "var(--stroke-2)";
+    };
+    readonly borderColor: {
+        readonly 'stroke-default': "var(--stroke-color-default)";
+        readonly 'stroke-muted': "var(--stroke-color-muted)";
+        readonly 'stroke-primary': "var(--stroke-color-primary)";
+        readonly 'stroke-destructive': "var(--stroke-color-destructive)";
+        readonly 'stroke-focus': "var(--stroke-color-focus)";
+    };
+};
+/**
+ * Animation-ready stroke transitions
+ */
+declare const strokeTransitions: {
+    readonly fast: "border-width 0.15s ease-in-out, border-color 0.15s ease-in-out";
+    readonly medium: "border-width 0.2s ease-in-out, border-color 0.2s ease-in-out";
+    readonly slow: "border-width 0.3s ease-in-out, border-color 0.3s ease-in-out";
+    readonly colorOnly: "border-color 0.2s ease-in-out";
+    readonly widthOnly: "border-width 0.2s ease-in-out";
+};
+/**
+ * Responsive stroke utilities
+ */
+declare const responsiveStrokes: {
+    readonly mobile: {
+        readonly default: "1px";
+        readonly emphasized: "1px";
+    };
+    readonly tablet: {
+        readonly default: "1px";
+        readonly emphasized: "2px";
+    };
+    readonly desktop: {
+        readonly default: "1px";
+        readonly emphasized: "2px";
+    };
+};
+
+export { type StrokeColorToken, type StrokeDirection, type StrokeToken, componentStrokes, createStroke, stroke as default, generateStrokesCSS, getStroke, getStrokeColor, responsiveStrokes, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tailwindStrokes };

package/dist/tokens/stroke.d.ts

@@ -0,0 +1,292 @@
+/**
+ * Raya Design System - Stroke Tokens
+ *
+ * Stroke system for defining element outlines and providing visual hierarchy
+ * through consistent border treatments.
+ */
+declare const stroke: {
+    readonly 1: "1px";
+    readonly 2: "2px";
+};
+type StrokeToken = keyof typeof stroke;
+/**
+ * Stroke colors using design system color tokens
+ */
+declare const strokeColors: {
+    readonly default: "hsl(var(--border))";
+    readonly muted: "hsl(var(--muted))";
+    readonly primary: "hsl(var(--primary))";
+    readonly secondary: "hsl(var(--secondary))";
+    readonly destructive: "hsl(var(--destructive))";
+    readonly focus: "hsl(var(--ring))";
+    readonly transparent: "transparent";
+};
+type StrokeColorToken = keyof typeof strokeColors;
+/**
+ * Pre-composed stroke styles for common use cases
+ */
+declare const strokeStyles: {
+    readonly default: {
+        readonly width: "1px";
+        readonly color: "hsl(var(--border))";
+        readonly style: "solid";
+    };
+    readonly emphasized: {
+        readonly width: "2px";
+        readonly color: "hsl(var(--border))";
+        readonly style: "solid";
+    };
+    readonly focus: {
+        readonly width: "2px";
+        readonly color: "hsl(var(--ring))";
+        readonly style: "solid";
+    };
+    readonly hover: {
+        readonly width: "2px";
+        readonly color: "hsl(var(--primary))";
+        readonly style: "solid";
+    };
+    readonly primary: {
+        readonly width: "1px";
+        readonly color: "hsl(var(--primary))";
+        readonly style: "solid";
+    };
+    readonly primaryEmphasized: {
+        readonly width: "2px";
+        readonly color: "hsl(var(--primary))";
+        readonly style: "solid";
+    };
+    readonly destructive: {
+        readonly width: "1px";
+        readonly color: "hsl(var(--destructive))";
+        readonly style: "solid";
+    };
+    readonly destructiveEmphasized: {
+        readonly width: "2px";
+        readonly color: "hsl(var(--destructive))";
+        readonly style: "solid";
+    };
+    readonly muted: {
+        readonly width: "1px";
+        readonly color: "hsl(var(--muted))";
+        readonly style: "solid";
+    };
+    readonly transparent: {
+        readonly width: "1px";
+        readonly color: "transparent";
+        readonly style: "solid";
+    };
+};
+/**
+ * Component-specific stroke configurations
+ */
+declare const componentStrokes: {
+    readonly button: {
+        readonly outline: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+        readonly outlineHover: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+        readonly outlineFocus: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--ring))";
+            readonly style: "solid";
+        };
+        readonly destructiveOutline: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--destructive))";
+            readonly style: "solid";
+        };
+        readonly destructiveOutlineHover: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--destructive))";
+            readonly style: "solid";
+        };
+    };
+    readonly card: {
+        readonly default: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly emphasized: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly interactive: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly interactiveHover: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+        readonly selected: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+    };
+    readonly form: {
+        readonly input: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly inputFocus: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--ring))";
+            readonly style: "solid";
+        };
+        readonly inputError: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--destructive))";
+            readonly style: "solid";
+        };
+        readonly inputDisabled: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--muted))";
+            readonly style: "solid";
+        };
+        readonly select: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly checkbox: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly checkboxChecked: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+    };
+    readonly navigation: {
+        readonly divider: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly tabActive: {
+            readonly width: "2px";
+            readonly color: "hsl(var(--primary))";
+            readonly style: "solid";
+        };
+        readonly tabInactive: {
+            readonly width: "1px";
+            readonly color: "transparent";
+            readonly style: "solid";
+        };
+        readonly tabHover: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+    };
+    readonly layout: {
+        readonly divider: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+        readonly section: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--muted))";
+            readonly style: "solid";
+        };
+        readonly container: {
+            readonly width: "1px";
+            readonly color: "hsl(var(--border))";
+            readonly style: "solid";
+        };
+    };
+};
+/**
+ * Directional stroke utilities
+ */
+declare const strokeDirections: {
+    readonly all: "border";
+    readonly top: "border-top";
+    readonly right: "border-right";
+    readonly bottom: "border-bottom";
+    readonly left: "border-left";
+    readonly horizontal: readonly ["border-left", "border-right"];
+    readonly vertical: readonly ["border-top", "border-bottom"];
+};
+type StrokeDirection = keyof typeof strokeDirections;
+/**
+ * Utility function to get stroke value
+ */
+declare const getStroke: (token: StrokeToken) => string;
+/**
+ * Utility function to get stroke color
+ */
+declare const getStrokeColor: (token: StrokeColorToken) => string;
+/**
+ * Utility function to create complete stroke style
+ */
+declare const createStroke: (width: StrokeToken, color?: StrokeColorToken, style?: "solid" | "dashed" | "dotted") => string;
+/**
+ * Generate CSS custom properties for strokes
+ */
+declare const generateStrokesCSS: () => string;
+/**
+ * Stroke tokens for Tailwind CSS configuration
+ */
+declare const tailwindStrokes: {
+    readonly borderWidth: {
+        readonly 'stroke-1': "var(--stroke-1)";
+        readonly 'stroke-2': "var(--stroke-2)";
+    };
+    readonly outlineWidth: {
+        readonly 'stroke-1': "var(--stroke-1)";
+        readonly 'stroke-2': "var(--stroke-2)";
+    };
+    readonly borderColor: {
+        readonly 'stroke-default': "var(--stroke-color-default)";
+        readonly 'stroke-muted': "var(--stroke-color-muted)";
+        readonly 'stroke-primary': "var(--stroke-color-primary)";
+        readonly 'stroke-destructive': "var(--stroke-color-destructive)";
+        readonly 'stroke-focus': "var(--stroke-color-focus)";
+    };
+};
+/**
+ * Animation-ready stroke transitions
+ */
+declare const strokeTransitions: {
+    readonly fast: "border-width 0.15s ease-in-out, border-color 0.15s ease-in-out";
+    readonly medium: "border-width 0.2s ease-in-out, border-color 0.2s ease-in-out";
+    readonly slow: "border-width 0.3s ease-in-out, border-color 0.3s ease-in-out";
+    readonly colorOnly: "border-color 0.2s ease-in-out";
+    readonly widthOnly: "border-width 0.2s ease-in-out";
+};
+/**
+ * Responsive stroke utilities
+ */
+declare const responsiveStrokes: {
+    readonly mobile: {
+        readonly default: "1px";
+        readonly emphasized: "1px";
+    };
+    readonly tablet: {
+        readonly default: "1px";
+        readonly emphasized: "2px";
+    };
+    readonly desktop: {
+        readonly default: "1px";
+        readonly emphasized: "2px";
+    };
+};
+
+export { type StrokeColorToken, type StrokeDirection, type StrokeToken, componentStrokes, createStroke, stroke as default, generateStrokesCSS, getStroke, getStrokeColor, responsiveStrokes, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tailwindStrokes };