@grupor5/raya 0.2.1 → 0.2.2

package/dist/tokens/progress-bar.d.mts

@@ -0,0 +1,31 @@
+declare const progressBarTokens: {
+    colors: {
+        trackBackground: string;
+        indicatorBackground: string;
+        label: string;
+    };
+    height: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    typography: {
+        sm: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        md: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        lg: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+    };
+};
+
+export { progressBarTokens };

package/dist/tokens/progress-bar.d.ts

@@ -0,0 +1,31 @@
+declare const progressBarTokens: {
+    colors: {
+        trackBackground: string;
+        indicatorBackground: string;
+        label: string;
+    };
+    height: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    typography: {
+        sm: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        md: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        lg: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+    };
+};
+
+export { progressBarTokens };

package/dist/tokens/progress-bar.js

@@ -0,0 +1,70 @@
+'use strict';
+
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    1200: "#222028"
+  },
+  secondary: {
+    200: "#f2e4f6",
+    600: "#ac50c7"}};
+
+// src/tokens/typography.ts
+var typography = {
+  fontWeight: {
+    regular: 400},
+  fontSize: {
+    // Body Scale - Text content with Regular and Semi-bold variants
+    body: {
+      // 18px - Body/L
+      md: "1rem",
+      // 16px - Body/M
+      sm: "0.875rem",
+      // 14px - Body/S
+      xs: "0.75rem"
+      // 12px - Body/XS
+    }},
+  lineHeight: {
+    // Body line heights (same for both bold and regular)
+    body: {
+      // 28px - Body/L & Body/Bold/L
+      md: "1.5rem",
+      // 24px - Body/M & Body/Bold/M
+      sm: "1.25rem",
+      // 20px - Body/S & Body/Bold/S
+      xs: "1.25rem"
+      // 20px - Body/XS & Body/Bold/XS
+    }}};
+
+// src/tokens/progress-bar.ts
+var progressBarTokens = {
+  colors: {
+    trackBackground: colors.secondary[200],
+    indicatorBackground: colors.secondary[600],
+    label: colors.primary[1200]
+  },
+  height: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px"
+  },
+  typography: {
+    sm: {
+      fontSize: typography.fontSize.body.xs,
+      lineHeight: typography.lineHeight.body.xs,
+      fontWeight: typography.fontWeight.regular
+    },
+    md: {
+      fontSize: typography.fontSize.body.sm,
+      lineHeight: typography.lineHeight.body.sm,
+      fontWeight: typography.fontWeight.regular
+    },
+    lg: {
+      fontSize: typography.fontSize.body.md,
+      lineHeight: typography.lineHeight.body.md,
+      fontWeight: typography.fontWeight.regular
+    }
+  }
+};
+
+exports.progressBarTokens = progressBarTokens;

package/dist/tokens/progress-bar.mjs

@@ -0,0 +1,68 @@
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    1200: "#222028"
+  },
+  secondary: {
+    200: "#f2e4f6",
+    600: "#ac50c7"}};
+
+// src/tokens/typography.ts
+var typography = {
+  fontWeight: {
+    regular: 400},
+  fontSize: {
+    // Body Scale - Text content with Regular and Semi-bold variants
+    body: {
+      // 18px - Body/L
+      md: "1rem",
+      // 16px - Body/M
+      sm: "0.875rem",
+      // 14px - Body/S
+      xs: "0.75rem"
+      // 12px - Body/XS
+    }},
+  lineHeight: {
+    // Body line heights (same for both bold and regular)
+    body: {
+      // 28px - Body/L & Body/Bold/L
+      md: "1.5rem",
+      // 24px - Body/M & Body/Bold/M
+      sm: "1.25rem",
+      // 20px - Body/S & Body/Bold/S
+      xs: "1.25rem"
+      // 20px - Body/XS & Body/Bold/XS
+    }}};
+
+// src/tokens/progress-bar.ts
+var progressBarTokens = {
+  colors: {
+    trackBackground: colors.secondary[200],
+    indicatorBackground: colors.secondary[600],
+    label: colors.primary[1200]
+  },
+  height: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px"
+  },
+  typography: {
+    sm: {
+      fontSize: typography.fontSize.body.xs,
+      lineHeight: typography.lineHeight.body.xs,
+      fontWeight: typography.fontWeight.regular
+    },
+    md: {
+      fontSize: typography.fontSize.body.sm,
+      lineHeight: typography.lineHeight.body.sm,
+      fontWeight: typography.fontWeight.regular
+    },
+    lg: {
+      fontSize: typography.fontSize.body.md,
+      lineHeight: typography.lineHeight.body.md,
+      fontWeight: typography.fontWeight.regular
+    }
+  }
+};
+
+export { progressBarTokens };

package/dist/tokens/spacing.d.mts

@@ -0,0 +1,90 @@
+/**
+ * Raya Design System - Spacing Tokens
+ *
+ * Spacing system based on 4px base unit with mathematical progression
+ * for consistent spatial relationships across all components.
+ */
+declare const spacing: {
+    readonly base: "0.25rem";
+    readonly xs: "0.25rem";
+    readonly s: "0.5rem";
+    readonly m: "1rem";
+    readonly l: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "2.5rem";
+    readonly '3xl': "3rem";
+    readonly '4xl': "3.5rem";
+};
+type SpacingToken = keyof typeof spacing;
+/**
+ * Spacing values in pixels for calculations and documentation
+ */
+declare const spacingPx: {
+    readonly base: 4;
+    readonly xs: 4;
+    readonly s: 8;
+    readonly m: 16;
+    readonly l: 24;
+    readonly xl: 32;
+    readonly '2xl': 40;
+    readonly '3xl': 48;
+    readonly '4xl': 56;
+};
+/**
+ * Pre-composed spacing styles for common use cases
+ */
+declare const spacingStyles: {
+    readonly buttonPadding: {
+        readonly small: "0.25rem 0.5rem";
+        readonly medium: "0.5rem 1rem";
+        readonly large: "1rem 1.5rem";
+    };
+    readonly cardPadding: {
+        readonly compact: "1rem";
+        readonly comfortable: "1.5rem";
+        readonly spacious: "2rem";
+    };
+    readonly formSpacing: {
+        readonly fieldGap: "1rem";
+        readonly labelGap: "0.25rem";
+        readonly helpGap: "0.25rem";
+    };
+    readonly layoutSpacing: {
+        readonly sectionGap: "2.5rem";
+        readonly componentGap: "2rem";
+        readonly elementGap: "1rem";
+    };
+    readonly gridGap: {
+        readonly tight: "0.5rem";
+        readonly normal: "1rem";
+        readonly comfortable: "1.5rem";
+        readonly loose: "2rem";
+    };
+};
+/**
+ * Utility function to get spacing value
+ */
+declare const getSpacing: (token: SpacingToken) => string;
+/**
+ * Utility function to get spacing value in pixels
+ */
+declare const getSpacingPx: (token: SpacingToken) => number;
+/**
+ * Generate CSS custom properties for spacing
+ */
+declare const generateSpacingCSS: () => string;
+/**
+ * Spacing tokens for Tailwind CSS configuration
+ */
+declare const tailwindSpacing: {
+    readonly xs: "var(--spacing-xs)";
+    readonly s: "var(--spacing-s)";
+    readonly m: "var(--spacing-m)";
+    readonly l: "var(--spacing-l)";
+    readonly xl: "var(--spacing-xl)";
+    readonly '2xl': "var(--spacing-2xl)";
+    readonly '3xl': "var(--spacing-3xl)";
+    readonly '4xl': "var(--spacing-4xl)";
+};
+
+export { type SpacingToken, spacing as default, generateSpacingCSS, getSpacing, getSpacingPx, spacing, spacingPx, spacingStyles, tailwindSpacing };

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Raya Design System - Spacing Tokens
+ *
+ * Spacing system based on 4px base unit with mathematical progression
+ * for consistent spatial relationships across all components.
+ */
+declare const spacing: {
+    readonly base: "0.25rem";
+    readonly xs: "0.25rem";
+    readonly s: "0.5rem";
+    readonly m: "1rem";
+    readonly l: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "2.5rem";
+    readonly '3xl': "3rem";
+    readonly '4xl': "3.5rem";
+};
+type SpacingToken = keyof typeof spacing;
+/**
+ * Spacing values in pixels for calculations and documentation
+ */
+declare const spacingPx: {
+    readonly base: 4;
+    readonly xs: 4;
+    readonly s: 8;
+    readonly m: 16;
+    readonly l: 24;
+    readonly xl: 32;
+    readonly '2xl': 40;
+    readonly '3xl': 48;
+    readonly '4xl': 56;
+};
+/**
+ * Pre-composed spacing styles for common use cases
+ */
+declare const spacingStyles: {
+    readonly buttonPadding: {
+        readonly small: "0.25rem 0.5rem";
+        readonly medium: "0.5rem 1rem";
+        readonly large: "1rem 1.5rem";
+    };
+    readonly cardPadding: {
+        readonly compact: "1rem";
+        readonly comfortable: "1.5rem";
+        readonly spacious: "2rem";
+    };
+    readonly formSpacing: {
+        readonly fieldGap: "1rem";
+        readonly labelGap: "0.25rem";
+        readonly helpGap: "0.25rem";
+    };
+    readonly layoutSpacing: {
+        readonly sectionGap: "2.5rem";
+        readonly componentGap: "2rem";
+        readonly elementGap: "1rem";
+    };
+    readonly gridGap: {
+        readonly tight: "0.5rem";
+        readonly normal: "1rem";
+        readonly comfortable: "1.5rem";
+        readonly loose: "2rem";
+    };
+};
+/**
+ * Utility function to get spacing value
+ */
+declare const getSpacing: (token: SpacingToken) => string;
+/**
+ * Utility function to get spacing value in pixels
+ */
+declare const getSpacingPx: (token: SpacingToken) => number;
+/**
+ * Generate CSS custom properties for spacing
+ */
+declare const generateSpacingCSS: () => string;
+/**
+ * Spacing tokens for Tailwind CSS configuration
+ */
+declare const tailwindSpacing: {
+    readonly xs: "var(--spacing-xs)";
+    readonly s: "var(--spacing-s)";
+    readonly m: "var(--spacing-m)";
+    readonly l: "var(--spacing-l)";
+    readonly xl: "var(--spacing-xl)";
+    readonly '2xl': "var(--spacing-2xl)";
+    readonly '3xl': "var(--spacing-3xl)";
+    readonly '4xl': "var(--spacing-4xl)";
+};
+
+export { type SpacingToken, spacing as default, generateSpacingCSS, getSpacing, getSpacingPx, spacing, spacingPx, spacingStyles, tailwindSpacing };

package/dist/tokens/spacing.js

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// src/tokens/spacing.ts
+var spacing = {
+  // Base unit
+  base: "0.25rem",
+  // 4px
+  // Spacing scale
+  xs: "0.25rem",
+  // 4px - Minimal spacing, tight layouts
+  s: "0.5rem",
+  // 8px - Small gaps, compact components
+  m: "1rem",
+  // 16px - Default spacing, standard gaps
+  l: "1.5rem",
+  // 24px - Comfortable spacing, section gaps
+  xl: "2rem",
+  // 32px - Large spacing, major sections
+  "2xl": "2.5rem",
+  // 40px - Extra large spacing, page sections
+  "3xl": "3rem",
+  // 48px - Generous spacing, hero sections
+  "4xl": "3.5rem"
+  // 56px - Maximum spacing, major layouts
+};
+var spacingPx = {
+  base: 4,
+  xs: 4,
+  s: 8,
+  m: 16,
+  l: 24,
+  xl: 32,
+  "2xl": 40,
+  "3xl": 48,
+  "4xl": 56
+};
+var spacingStyles = {
+  // Component padding
+  buttonPadding: {
+    small: `${spacing.xs} ${spacing.s}`,
+    // 4px 8px
+    medium: `${spacing.s} ${spacing.m}`,
+    // 8px 16px
+    large: `${spacing.m} ${spacing.l}`
+    // 16px 24px
+  },
+  // Card spacing
+  cardPadding: {
+    compact: spacing.m,
+    // 16px
+    comfortable: spacing.l,
+    // 24px
+    spacious: spacing.xl
+    // 32px
+  },
+  // Form spacing
+  formSpacing: {
+    fieldGap: spacing.m,
+    // 16px between form fields
+    labelGap: spacing.xs,
+    // 4px between label and input
+    helpGap: spacing.xs
+    // 4px between input and help text
+  },
+  // Layout spacing
+  layoutSpacing: {
+    sectionGap: spacing["2xl"],
+    // 40px between major sections
+    componentGap: spacing.xl,
+    // 32px between components
+    elementGap: spacing.m
+    // 16px between elements
+  },
+  // Grid spacing
+  gridGap: {
+    tight: spacing.s,
+    // 8px
+    normal: spacing.m,
+    // 16px
+    comfortable: spacing.l,
+    // 24px
+    loose: spacing.xl
+    // 32px
+  }
+};
+var getSpacing = (token) => {
+  return spacing[token];
+};
+var getSpacingPx = (token) => {
+  return spacingPx[token];
+};
+var generateSpacingCSS = () => {
+  const cssVars = Object.entries(spacing).map(([key, value]) => `  --spacing-${key}: ${value};`).join("\n");
+  return `:root {
+  /* Spacing tokens */
+${cssVars}
+}`;
+};
+var tailwindSpacing = {
+  "xs": "var(--spacing-xs)",
+  "s": "var(--spacing-s)",
+  "m": "var(--spacing-m)",
+  "l": "var(--spacing-l)",
+  "xl": "var(--spacing-xl)",
+  "2xl": "var(--spacing-2xl)",
+  "3xl": "var(--spacing-3xl)",
+  "4xl": "var(--spacing-4xl)"
+};
+var spacing_default = spacing;
+
+exports.default = spacing_default;
+exports.generateSpacingCSS = generateSpacingCSS;
+exports.getSpacing = getSpacing;
+exports.getSpacingPx = getSpacingPx;
+exports.spacing = spacing;
+exports.spacingPx = spacingPx;
+exports.spacingStyles = spacingStyles;
+exports.tailwindSpacing = tailwindSpacing;

package/dist/tokens/spacing.mjs

@@ -0,0 +1,109 @@
+// src/tokens/spacing.ts
+var spacing = {
+  // Base unit
+  base: "0.25rem",
+  // 4px
+  // Spacing scale
+  xs: "0.25rem",
+  // 4px - Minimal spacing, tight layouts
+  s: "0.5rem",
+  // 8px - Small gaps, compact components
+  m: "1rem",
+  // 16px - Default spacing, standard gaps
+  l: "1.5rem",
+  // 24px - Comfortable spacing, section gaps
+  xl: "2rem",
+  // 32px - Large spacing, major sections
+  "2xl": "2.5rem",
+  // 40px - Extra large spacing, page sections
+  "3xl": "3rem",
+  // 48px - Generous spacing, hero sections
+  "4xl": "3.5rem"
+  // 56px - Maximum spacing, major layouts
+};
+var spacingPx = {
+  base: 4,
+  xs: 4,
+  s: 8,
+  m: 16,
+  l: 24,
+  xl: 32,
+  "2xl": 40,
+  "3xl": 48,
+  "4xl": 56
+};
+var spacingStyles = {
+  // Component padding
+  buttonPadding: {
+    small: `${spacing.xs} ${spacing.s}`,
+    // 4px 8px
+    medium: `${spacing.s} ${spacing.m}`,
+    // 8px 16px
+    large: `${spacing.m} ${spacing.l}`
+    // 16px 24px
+  },
+  // Card spacing
+  cardPadding: {
+    compact: spacing.m,
+    // 16px
+    comfortable: spacing.l,
+    // 24px
+    spacious: spacing.xl
+    // 32px
+  },
+  // Form spacing
+  formSpacing: {
+    fieldGap: spacing.m,
+    // 16px between form fields
+    labelGap: spacing.xs,
+    // 4px between label and input
+    helpGap: spacing.xs
+    // 4px between input and help text
+  },
+  // Layout spacing
+  layoutSpacing: {
+    sectionGap: spacing["2xl"],
+    // 40px between major sections
+    componentGap: spacing.xl,
+    // 32px between components
+    elementGap: spacing.m
+    // 16px between elements
+  },
+  // Grid spacing
+  gridGap: {
+    tight: spacing.s,
+    // 8px
+    normal: spacing.m,
+    // 16px
+    comfortable: spacing.l,
+    // 24px
+    loose: spacing.xl
+    // 32px
+  }
+};
+var getSpacing = (token) => {
+  return spacing[token];
+};
+var getSpacingPx = (token) => {
+  return spacingPx[token];
+};
+var generateSpacingCSS = () => {
+  const cssVars = Object.entries(spacing).map(([key, value]) => `  --spacing-${key}: ${value};`).join("\n");
+  return `:root {
+  /* Spacing tokens */
+${cssVars}
+}`;
+};
+var tailwindSpacing = {
+  "xs": "var(--spacing-xs)",
+  "s": "var(--spacing-s)",
+  "m": "var(--spacing-m)",
+  "l": "var(--spacing-l)",
+  "xl": "var(--spacing-xl)",
+  "2xl": "var(--spacing-2xl)",
+  "3xl": "var(--spacing-3xl)",
+  "4xl": "var(--spacing-4xl)"
+};
+var spacing_default = spacing;
+
+export { spacing_default as default, generateSpacingCSS, getSpacing, getSpacingPx, spacing, spacingPx, spacingStyles, tailwindSpacing };