@grupor5/raya 0.2.1 → 0.2.2

package/dist/tokens/stroke.js

@@ -0,0 +1,202 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// src/tokens/stroke.ts
+var stroke = {
+  // Stroke widths
+  1: "1px",
+  2: "2px"
+};
+var strokeColors = {
+  default: "hsl(var(--border))",
+  muted: "hsl(var(--muted))",
+  primary: "hsl(var(--primary))",
+  secondary: "hsl(var(--secondary))",
+  destructive: "hsl(var(--destructive))",
+  focus: "hsl(var(--ring))",
+  transparent: "transparent"
+};
+var strokeStyles = {
+  // Default stroke styles
+  default: {
+    width: stroke[1],
+    color: strokeColors.default,
+    style: "solid"
+  },
+  emphasized: {
+    width: stroke[2],
+    color: strokeColors.default,
+    style: "solid"
+  },
+  // Interactive stroke styles
+  focus: {
+    width: stroke[2],
+    color: strokeColors.focus,
+    style: "solid"
+  },
+  hover: {
+    width: stroke[2],
+    color: strokeColors.primary,
+    style: "solid"
+  },
+  // Semantic stroke styles
+  primary: {
+    width: stroke[1],
+    color: strokeColors.primary,
+    style: "solid"
+  },
+  primaryEmphasized: {
+    width: stroke[2],
+    color: strokeColors.primary,
+    style: "solid"
+  },
+  destructive: {
+    width: stroke[1],
+    color: strokeColors.destructive,
+    style: "solid"
+  },
+  destructiveEmphasized: {
+    width: stroke[2],
+    color: strokeColors.destructive,
+    style: "solid"
+  },
+  // Utility stroke styles
+  muted: {
+    width: stroke[1],
+    color: strokeColors.muted,
+    style: "solid"
+  },
+  transparent: {
+    width: stroke[1],
+    color: strokeColors.transparent,
+    style: "solid"
+  }
+};
+var componentStrokes = {
+  // Button component strokes
+  button: {
+    outline: strokeStyles.primary,
+    outlineHover: strokeStyles.primaryEmphasized,
+    outlineFocus: strokeStyles.focus,
+    destructiveOutline: strokeStyles.destructive,
+    destructiveOutlineHover: strokeStyles.destructiveEmphasized
+  },
+  // Card component strokes
+  card: {
+    default: strokeStyles.default,
+    emphasized: strokeStyles.emphasized,
+    interactive: strokeStyles.default,
+    interactiveHover: strokeStyles.hover,
+    selected: strokeStyles.primaryEmphasized
+  },
+  // Form component strokes
+  form: {
+    input: strokeStyles.default,
+    inputFocus: strokeStyles.focus,
+    inputError: strokeStyles.destructive,
+    inputDisabled: strokeStyles.muted,
+    select: strokeStyles.default,
+    checkbox: strokeStyles.default,
+    checkboxChecked: strokeStyles.primary
+  },
+  // Navigation component strokes
+  navigation: {
+    divider: strokeStyles.default,
+    tabActive: strokeStyles.primaryEmphasized,
+    tabInactive: strokeStyles.transparent,
+    tabHover: strokeStyles.default
+  },
+  // Layout component strokes
+  layout: {
+    divider: strokeStyles.default,
+    section: strokeStyles.muted,
+    container: strokeStyles.default
+  }
+};
+var strokeDirections = {
+  all: "border",
+  top: "border-top",
+  right: "border-right",
+  bottom: "border-bottom",
+  left: "border-left",
+  horizontal: ["border-left", "border-right"],
+  vertical: ["border-top", "border-bottom"]
+};
+var getStroke = (token) => {
+  return stroke[token];
+};
+var getStrokeColor = (token) => {
+  return strokeColors[token];
+};
+var createStroke = (width, color = "default", style = "solid") => {
+  return `${stroke[width]} ${style} ${strokeColors[color]}`;
+};
+var generateStrokesCSS = () => {
+  const widthVars = Object.entries(stroke).map(([key, value]) => `  --stroke-${key}: ${value};`).join("\n");
+  const colorVars = Object.entries(strokeColors).map(([key, value]) => `  --stroke-color-${key}: ${value};`).join("\n");
+  return `:root {
+  /* Stroke width tokens */
+${widthVars}
+
+  /* Stroke color tokens */
+${colorVars}
+}`;
+};
+var tailwindStrokes = {
+  // Border widths
+  borderWidth: {
+    "stroke-1": "var(--stroke-1)",
+    "stroke-2": "var(--stroke-2)"
+  },
+  // Outline widths
+  outlineWidth: {
+    "stroke-1": "var(--stroke-1)",
+    "stroke-2": "var(--stroke-2)"
+  },
+  // Border colors (using existing design system colors)
+  borderColor: {
+    "stroke-default": "var(--stroke-color-default)",
+    "stroke-muted": "var(--stroke-color-muted)",
+    "stroke-primary": "var(--stroke-color-primary)",
+    "stroke-destructive": "var(--stroke-color-destructive)",
+    "stroke-focus": "var(--stroke-color-focus)"
+  }
+};
+var strokeTransitions = {
+  fast: "border-width 0.15s ease-in-out, border-color 0.15s ease-in-out",
+  medium: "border-width 0.2s ease-in-out, border-color 0.2s ease-in-out",
+  slow: "border-width 0.3s ease-in-out, border-color 0.3s ease-in-out",
+  colorOnly: "border-color 0.2s ease-in-out",
+  widthOnly: "border-width 0.2s ease-in-out"
+};
+var responsiveStrokes = {
+  mobile: {
+    default: stroke[1],
+    emphasized: stroke[1]
+    // Reduce emphasis on mobile
+  },
+  tablet: {
+    default: stroke[1],
+    emphasized: stroke[2]
+  },
+  desktop: {
+    default: stroke[1],
+    emphasized: stroke[2]
+  }
+};
+var stroke_default = stroke;
+
+exports.componentStrokes = componentStrokes;
+exports.createStroke = createStroke;
+exports.default = stroke_default;
+exports.generateStrokesCSS = generateStrokesCSS;
+exports.getStroke = getStroke;
+exports.getStrokeColor = getStrokeColor;
+exports.responsiveStrokes = responsiveStrokes;
+exports.stroke = stroke;
+exports.strokeColors = strokeColors;
+exports.strokeDirections = strokeDirections;
+exports.strokeStyles = strokeStyles;
+exports.strokeTransitions = strokeTransitions;
+exports.tailwindStrokes = tailwindStrokes;

package/dist/tokens/stroke.mjs

@@ -0,0 +1,186 @@
+// src/tokens/stroke.ts
+var stroke = {
+  // Stroke widths
+  1: "1px",
+  2: "2px"
+};
+var strokeColors = {
+  default: "hsl(var(--border))",
+  muted: "hsl(var(--muted))",
+  primary: "hsl(var(--primary))",
+  secondary: "hsl(var(--secondary))",
+  destructive: "hsl(var(--destructive))",
+  focus: "hsl(var(--ring))",
+  transparent: "transparent"
+};
+var strokeStyles = {
+  // Default stroke styles
+  default: {
+    width: stroke[1],
+    color: strokeColors.default,
+    style: "solid"
+  },
+  emphasized: {
+    width: stroke[2],
+    color: strokeColors.default,
+    style: "solid"
+  },
+  // Interactive stroke styles
+  focus: {
+    width: stroke[2],
+    color: strokeColors.focus,
+    style: "solid"
+  },
+  hover: {
+    width: stroke[2],
+    color: strokeColors.primary,
+    style: "solid"
+  },
+  // Semantic stroke styles
+  primary: {
+    width: stroke[1],
+    color: strokeColors.primary,
+    style: "solid"
+  },
+  primaryEmphasized: {
+    width: stroke[2],
+    color: strokeColors.primary,
+    style: "solid"
+  },
+  destructive: {
+    width: stroke[1],
+    color: strokeColors.destructive,
+    style: "solid"
+  },
+  destructiveEmphasized: {
+    width: stroke[2],
+    color: strokeColors.destructive,
+    style: "solid"
+  },
+  // Utility stroke styles
+  muted: {
+    width: stroke[1],
+    color: strokeColors.muted,
+    style: "solid"
+  },
+  transparent: {
+    width: stroke[1],
+    color: strokeColors.transparent,
+    style: "solid"
+  }
+};
+var componentStrokes = {
+  // Button component strokes
+  button: {
+    outline: strokeStyles.primary,
+    outlineHover: strokeStyles.primaryEmphasized,
+    outlineFocus: strokeStyles.focus,
+    destructiveOutline: strokeStyles.destructive,
+    destructiveOutlineHover: strokeStyles.destructiveEmphasized
+  },
+  // Card component strokes
+  card: {
+    default: strokeStyles.default,
+    emphasized: strokeStyles.emphasized,
+    interactive: strokeStyles.default,
+    interactiveHover: strokeStyles.hover,
+    selected: strokeStyles.primaryEmphasized
+  },
+  // Form component strokes
+  form: {
+    input: strokeStyles.default,
+    inputFocus: strokeStyles.focus,
+    inputError: strokeStyles.destructive,
+    inputDisabled: strokeStyles.muted,
+    select: strokeStyles.default,
+    checkbox: strokeStyles.default,
+    checkboxChecked: strokeStyles.primary
+  },
+  // Navigation component strokes
+  navigation: {
+    divider: strokeStyles.default,
+    tabActive: strokeStyles.primaryEmphasized,
+    tabInactive: strokeStyles.transparent,
+    tabHover: strokeStyles.default
+  },
+  // Layout component strokes
+  layout: {
+    divider: strokeStyles.default,
+    section: strokeStyles.muted,
+    container: strokeStyles.default
+  }
+};
+var strokeDirections = {
+  all: "border",
+  top: "border-top",
+  right: "border-right",
+  bottom: "border-bottom",
+  left: "border-left",
+  horizontal: ["border-left", "border-right"],
+  vertical: ["border-top", "border-bottom"]
+};
+var getStroke = (token) => {
+  return stroke[token];
+};
+var getStrokeColor = (token) => {
+  return strokeColors[token];
+};
+var createStroke = (width, color = "default", style = "solid") => {
+  return `${stroke[width]} ${style} ${strokeColors[color]}`;
+};
+var generateStrokesCSS = () => {
+  const widthVars = Object.entries(stroke).map(([key, value]) => `  --stroke-${key}: ${value};`).join("\n");
+  const colorVars = Object.entries(strokeColors).map(([key, value]) => `  --stroke-color-${key}: ${value};`).join("\n");
+  return `:root {
+  /* Stroke width tokens */
+${widthVars}
+
+  /* Stroke color tokens */
+${colorVars}
+}`;
+};
+var tailwindStrokes = {
+  // Border widths
+  borderWidth: {
+    "stroke-1": "var(--stroke-1)",
+    "stroke-2": "var(--stroke-2)"
+  },
+  // Outline widths
+  outlineWidth: {
+    "stroke-1": "var(--stroke-1)",
+    "stroke-2": "var(--stroke-2)"
+  },
+  // Border colors (using existing design system colors)
+  borderColor: {
+    "stroke-default": "var(--stroke-color-default)",
+    "stroke-muted": "var(--stroke-color-muted)",
+    "stroke-primary": "var(--stroke-color-primary)",
+    "stroke-destructive": "var(--stroke-color-destructive)",
+    "stroke-focus": "var(--stroke-color-focus)"
+  }
+};
+var strokeTransitions = {
+  fast: "border-width 0.15s ease-in-out, border-color 0.15s ease-in-out",
+  medium: "border-width 0.2s ease-in-out, border-color 0.2s ease-in-out",
+  slow: "border-width 0.3s ease-in-out, border-color 0.3s ease-in-out",
+  colorOnly: "border-color 0.2s ease-in-out",
+  widthOnly: "border-width 0.2s ease-in-out"
+};
+var responsiveStrokes = {
+  mobile: {
+    default: stroke[1],
+    emphasized: stroke[1]
+    // Reduce emphasis on mobile
+  },
+  tablet: {
+    default: stroke[1],
+    emphasized: stroke[2]
+  },
+  desktop: {
+    default: stroke[1],
+    emphasized: stroke[2]
+  }
+};
+var stroke_default = stroke;
+
+export { componentStrokes, createStroke, stroke_default as default, generateStrokesCSS, getStroke, getStrokeColor, responsiveStrokes, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tailwindStrokes };

package/dist/tokens/tab.d.mts

@@ -0,0 +1,31 @@
+declare const tab: {
+    background: {
+        default: string;
+        hover: string;
+        selected: string;
+    };
+    text: {
+        default: string;
+        hover: string;
+        selected: string;
+        disabled: string;
+    };
+    border: {
+        selected: string;
+        default: string;
+    };
+    padding: {
+        x: string;
+        y: string;
+    };
+    font: {
+        size: string;
+        weight: string;
+    };
+    badge: {
+        background: string;
+        text: string;
+    };
+};
+
+export { tab };

package/dist/tokens/tab.d.ts

@@ -0,0 +1,31 @@
+declare const tab: {
+    background: {
+        default: string;
+        hover: string;
+        selected: string;
+    };
+    text: {
+        default: string;
+        hover: string;
+        selected: string;
+        disabled: string;
+    };
+    border: {
+        selected: string;
+        default: string;
+    };
+    padding: {
+        x: string;
+        y: string;
+    };
+    font: {
+        size: string;
+        weight: string;
+    };
+    badge: {
+        background: string;
+        text: string;
+    };
+};
+
+export { tab };

package/dist/tokens/tab.js

@@ -0,0 +1,48 @@
+'use strict';
+
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    200: "#eeedf1",
+    500: "#a8a3b6",
+    1200: "#222028"
+  },
+  neutral: {
+    500: "#bdb3b3",
+    300: "#d2caca",
+    10: "#ffffff"},
+  red: {
+    400: "#e86e6e"}};
+
+// src/tokens/tab.ts
+var tab = {
+  background: {
+    default: "transparent",
+    hover: colors.primary[200],
+    selected: "transparent"
+  },
+  text: {
+    default: colors.neutral[500],
+    hover: colors.primary[500],
+    selected: colors.primary[1200],
+    disabled: colors.neutral[300]
+  },
+  border: {
+    selected: colors.primary[1200],
+    default: "transparent"
+  },
+  padding: {
+    x: "16px",
+    y: "8px"
+  },
+  font: {
+    size: "16px",
+    weight: "400"
+  },
+  badge: {
+    background: colors.red[400],
+    text: colors.neutral[10]
+  }
+};
+
+exports.tab = tab;

package/dist/tokens/tab.mjs

@@ -0,0 +1,46 @@
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    200: "#eeedf1",
+    500: "#a8a3b6",
+    1200: "#222028"
+  },
+  neutral: {
+    500: "#bdb3b3",
+    300: "#d2caca",
+    10: "#ffffff"},
+  red: {
+    400: "#e86e6e"}};
+
+// src/tokens/tab.ts
+var tab = {
+  background: {
+    default: "transparent",
+    hover: colors.primary[200],
+    selected: "transparent"
+  },
+  text: {
+    default: colors.neutral[500],
+    hover: colors.primary[500],
+    selected: colors.primary[1200],
+    disabled: colors.neutral[300]
+  },
+  border: {
+    selected: colors.primary[1200],
+    default: "transparent"
+  },
+  padding: {
+    x: "16px",
+    y: "8px"
+  },
+  font: {
+    size: "16px",
+    weight: "400"
+  },
+  badge: {
+    background: colors.red[400],
+    text: colors.neutral[10]
+  }
+};
+
+export { tab };

package/dist/tokens/tag.d.mts

@@ -0,0 +1,53 @@
+declare const tagTokens: {
+    colors: {
+        default: {
+            background: string;
+            text: string;
+            bullet: string;
+            closeIconBorder: string;
+            hover: {
+                background: string;
+                closeIconBorder: string;
+            };
+        };
+        success: {
+            background: string;
+            text: string;
+            bullet: string;
+            closeIconBorder: string;
+            hover: {
+                background: string;
+                closeIconBorder: string;
+            };
+        };
+        warning: {
+            background: string;
+            text: string;
+            bullet: string;
+            closeIconBorder: string;
+            hover: {
+                background: string;
+                closeIconBorder: string;
+            };
+        };
+        danger: {
+            background: string;
+            text: string;
+            bullet: string;
+            closeIconBorder: string;
+            hover: {
+                background: string;
+                closeIconBorder: string;
+            };
+        };
+    };
+    fontSize: string;
+    padding: {
+        x: string;
+        y: string;
+    };
+    borderRadius: string;
+    iconSize: string;
+};
+
+export { tagTokens };

package/dist/tokens/tag.d.ts

@@ -0,0 +1,53 @@
+declare const tagTokens: {
+    colors: {
+        default: {
+            background: string;
+            text: string;
+            bullet: string;
+            closeIconBorder: string;
+            hover: {
+                background: string;
+                closeIconBorder: string;
+            };
+        };
+        success: {
+            background: string;
+            text: string;
+            bullet: string;
+            closeIconBorder: string;
+            hover: {
+                background: string;
+                closeIconBorder: string;
+            };
+        };
+        warning: {
+            background: string;
+            text: string;
+            bullet: string;
+            closeIconBorder: string;
+            hover: {
+                background: string;
+                closeIconBorder: string;
+            };
+        };
+        danger: {
+            background: string;
+            text: string;
+            bullet: string;
+            closeIconBorder: string;
+            hover: {
+                background: string;
+                closeIconBorder: string;
+            };
+        };
+    };
+    fontSize: string;
+    padding: {
+        x: string;
+        y: string;
+    };
+    borderRadius: string;
+    iconSize: string;
+};
+
+export { tagTokens };