@grupor5/raya 0.2.6 → 0.2.8

package/dist/molecules/grid/index.d.ts

@@ -0,0 +1,194 @@
+import React__default from 'react';
+
+/**
+ * Responsive value type for breakpoint-specific configuration
+ *
+ * Allows different values for each breakpoint following the Raya Design System:
+ * - **mobile**: 0px and up (4-column grid)
+ * - **tablet**: 768px and up (8-column grid)
+ * - **desktop**: 1024px and up (12-column grid)
+ *
+ * @template T The type of value for each breakpoint
+ * @example
+ * ```tsx
+ * // Responsive columns
+ * const columns: ResponsiveValue<number> = {
+ *   mobile: 1,    // 1 column on mobile
+ *   tablet: 2,    // 2 columns on tablet
+ *   desktop: 4    // 4 columns on desktop
+ * }
+ *
+ * // Responsive gaps
+ * const gaps: ResponsiveValue<string> = {
+ *   mobile: 's',  // Small gap on mobile
+ *   tablet: 'm',  // Medium gap on tablet
+ *   desktop: 'l'  // Large gap on desktop
+ * }
+ * ```
+ */
+interface ResponsiveValue<T> {
+    /** Value for mobile breakpoint (0px and up) */
+    mobile?: T;
+    /** Value for tablet breakpoint (768px and up) */
+    tablet?: T;
+    /** Value for desktop breakpoint (1024px and up) */
+    desktop?: T;
+}
+/**
+ * Grid container props
+ */
+interface GridProps {
+    /**
+     * Whether this is a grid container (default: true)
+     * @default true
+     */
+    container?: boolean;
+    /**
+     * Number of columns per breakpoint. Supports single number or responsive values.
+     * Default: { mobile: 4, tablet: 8, desktop: 12 }
+     * @example { mobile: 1, tablet: 2, desktop: 3 }
+     */
+    cols?: ResponsiveValue<1 | 2 | 3 | 4 | 6 | 8 | 12> | 1 | 2 | 3 | 4 | 6 | 8 | 12;
+    /**
+     * Gap size between grid items using design system tokens.
+     * xs=4px, s=8px, m=16px, l=24px, xl=32px
+     * @example { mobile: 'm', tablet: 'l', desktop: 'xl' }
+     */
+    gap?: ResponsiveValue<'xs' | 's' | 'm' | 'l' | 'xl'> | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Whether to apply responsive padding and auto-centering following design system
+     * Mobile: 16px, Tablet: 20px, Desktop: 24px
+     * @default false
+     */
+    margin?: boolean;
+    /** Custom CSS classes to apply to the grid container */
+    className?: string;
+    /** Grid items or content to be rendered inside the grid */
+    children: React__default.ReactNode;
+    /** ARIA label for accessibility and screen readers */
+    'aria-label'?: string;
+    /** Data test id for testing purposes */
+    'data-testid'?: string;
+}
+/**
+ * Grid item props for responsive layout control
+ */
+interface GridItemProps {
+    /**
+     * Number of columns this item should span across breakpoints
+     * @example { mobile: 12, tablet: 6, desktop: 4 }
+     * @example 6 // Static span across all breakpoints
+     */
+    span?: ResponsiveValue<number> | number;
+    /**
+     * Number of rows this item should span across breakpoints
+     * @example { mobile: 1, desktop: 2 }
+     * @example 2 // Static row span across all breakpoints
+     */
+    rowSpan?: ResponsiveValue<number> | number;
+    /**
+     * Grid column start position (1-based indexing)
+     * @example { mobile: 1, desktop: 2 }
+     * @example 3 // Start at column 3
+     */
+    colStart?: ResponsiveValue<number> | number;
+    /**
+     * Grid column end position (1-based indexing)
+     * @example { mobile: -1, desktop: 5 }
+     * @example 6 // End at column 6
+     */
+    colEnd?: ResponsiveValue<number> | number;
+    /** Custom CSS classes to apply to the grid item */
+    className?: string;
+    /** Content to be rendered inside the grid item */
+    children: React__default.ReactNode;
+    /** Data test id for testing purposes */
+    'data-testid'?: string;
+}
+/**
+ * # Grid - MANDATORY Responsive Grid System
+ *
+ * ## 🚨 CRITICAL: ALL LAYOUTS MUST USE THIS COMPONENT
+ *
+ * This is the **MANDATORY** grid component for all screens and layouts in the Raya Design System.
+ * Manual CSS Grid classes are **FORBIDDEN**. Use this component to ensure consistent spacing,
+ * responsive behavior, and design system compliance.
+ *
+ * ### Features
+ * - **Responsive by Default**: Automatically adapts to mobile (4 cols), tablet (8 cols), desktop (12 cols)
+ * - **Design System Integration**: Consistent margins, gaps, and breakpoints
+ * - **Type Safety**: Full TypeScript support with responsive value types
+ * - **Accessibility**: ARIA labels and semantic HTML structure
+ *
+ * ### Breakpoints & Container Sizes
+ * - **Mobile**: 0px-767px (4 columns, max-width: 412px, 16px padding/gaps)
+ * - **Tablet**: 768px-1023px (8 columns, max-width: 834px, 20px padding/gaps)
+ * - **Desktop**: 1024px+ (12 columns, max-width: 1440px, 24px padding/gaps)
+ *
+ * @example
+ * ```tsx
+ * // ✅ CORRECT - Always use Grid component
+ * <Grid cols={{ mobile: 1, tablet: 2, desktop: 3 }} gap="l" margin>
+ *   <Card>Content 1</Card>
+ *   <Card>Content 2</Card>
+ *   <Card>Content 3</Card>
+ * </Grid>
+ *
+ * // ✅ CORRECT - Advanced responsive configuration
+ * <Grid cols={12} gap="m" margin>
+ *   <GridItem span={{ mobile: 12, desktop: 8 }}>
+ *     <MainContent />
+ *   </GridItem>
+ *   <GridItem span={{ mobile: 12, desktop: 4 }}>
+ *     <Sidebar />
+ *   </GridItem>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // ❌ FORBIDDEN - Never use manual CSS Grid
+ * <div className="grid grid-cols-3 gap-6">
+ *   <Card>Content</Card>
+ * </div>
+ * ```
+ */
+declare const Grid: React__default.ForwardRefExoticComponent<GridProps & React__default.RefAttributes<HTMLDivElement>>;
+/**
+ * # GridItem - Responsive Grid Item with Advanced Control
+ *
+ * Provides fine-grained control over individual grid items including
+ * column spans, row spans, and positioning. Use within a Grid component
+ * for precise layout control across breakpoints.
+ *
+ * ### Features
+ * - **Responsive Spans**: Different column/row spans per breakpoint
+ * - **Positioning**: Control exact grid placement with colStart/colEnd
+ * - **Flexible Layout**: Combine with Grid for complex layouts
+ *
+ * @example
+ * ```tsx
+ * <Grid cols={12} gap="m">
+ *   <GridItem span={6}>Half width</GridItem>
+ *   <GridItem span={{ mobile: 12, desktop: 4 }}>Responsive width</GridItem>
+ *   <GridItem span={3} rowSpan={2}>Tall item spanning 2 rows</GridItem>
+ *   <GridItem colStart={2} colEnd={5}>Positioned item (cols 2-5)</GridItem>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Content + Sidebar layout
+ * <Grid cols={12} margin>
+ *   <GridItem span={{ mobile: 12, desktop: 8 }}>
+ *     <MainContent />
+ *   </GridItem>
+ *   <GridItem span={{ mobile: 12, desktop: 4 }}>
+ *     <Sidebar />
+ *   </GridItem>
+ * </Grid>
+ * ```
+ */
+declare const GridItem: React__default.ForwardRefExoticComponent<GridItemProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Grid, GridItem, type GridItemProps, type GridProps, type ResponsiveValue };

package/dist/molecules/grid/index.js

@@ -0,0 +1,263 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var getColsClasses = (cols) => {
+  if (typeof cols === "number") {
+    return `grid-cols-${cols}`;
+  }
+  if (typeof cols === "object" && cols !== null) {
+    const classes = [];
+    if (cols.mobile) {
+      classes.push(`grid-cols-${cols.mobile}`);
+    }
+    if (cols.tablet) {
+      classes.push(`md:grid-cols-${cols.tablet}`);
+    }
+    if (cols.desktop) {
+      classes.push(`lg:grid-cols-${cols.desktop}`);
+    }
+    return classes.join(" ");
+  }
+  return "grid-cols-4 md:grid-cols-8 lg:grid-cols-12";
+};
+var getGapClasses = (gap) => {
+  if (typeof gap === "string") {
+    const gapMap = {
+      xs: "gap-1",
+      // 4px
+      s: "gap-2",
+      // 8px
+      m: "gap-4",
+      // 16px
+      l: "gap-6",
+      // 24px
+      xl: "gap-8"
+      // 32px
+    };
+    return gapMap[gap] || "gap-4";
+  }
+  if (typeof gap === "object" && gap !== null) {
+    const gapMap = {
+      xs: "1",
+      s: "2",
+      m: "4",
+      l: "6",
+      xl: "8"
+    };
+    const classes = [];
+    if (gap.mobile) {
+      classes.push(`gap-${gapMap[gap.mobile] || "4"}`);
+    }
+    if (gap.tablet) {
+      classes.push(`md:gap-${gapMap[gap.tablet] || "5"}`);
+    }
+    if (gap.desktop) {
+      classes.push(`lg:gap-${gapMap[gap.desktop] || "6"}`);
+    }
+    return classes.join(" ");
+  }
+  return "gap-4 md:gap-5 lg:gap-6";
+};
+var getSpanClasses = (span) => {
+  if (typeof span === "number") {
+    return `col-span-${span}`;
+  }
+  if (typeof span === "object" && span !== null) {
+    const classes = [];
+    if (span.mobile) {
+      classes.push(`col-span-${span.mobile}`);
+    }
+    if (span.tablet) {
+      classes.push(`md:col-span-${span.tablet}`);
+    }
+    if (span.desktop) {
+      classes.push(`lg:col-span-${span.desktop}`);
+    }
+    return classes.join(" ");
+  }
+  return "";
+};
+var getRowSpanClasses = (rowSpan) => {
+  if (typeof rowSpan === "number") {
+    return `row-span-${rowSpan}`;
+  }
+  if (typeof rowSpan === "object" && rowSpan !== null) {
+    const classes = [];
+    if (rowSpan.mobile) {
+      classes.push(`row-span-${rowSpan.mobile}`);
+    }
+    if (rowSpan.tablet) {
+      classes.push(`md:row-span-${rowSpan.tablet}`);
+    }
+    if (rowSpan.desktop) {
+      classes.push(`lg:row-span-${rowSpan.desktop}`);
+    }
+    return classes.join(" ");
+  }
+  return "";
+};
+var getColPositionClasses = (colStart, colEnd) => {
+  const classes = [];
+  if (colStart) {
+    if (typeof colStart === "number") {
+      classes.push(`col-start-${colStart}`);
+    } else if (typeof colStart === "object") {
+      if (colStart.mobile) classes.push(`col-start-${colStart.mobile}`);
+      if (colStart.tablet) classes.push(`md:col-start-${colStart.tablet}`);
+      if (colStart.desktop) classes.push(`lg:col-start-${colStart.desktop}`);
+    }
+  }
+  if (colEnd) {
+    if (typeof colEnd === "number") {
+      classes.push(`col-end-${colEnd}`);
+    } else if (typeof colEnd === "object") {
+      if (colEnd.mobile) classes.push(`col-end-${colEnd.mobile}`);
+      if (colEnd.tablet) classes.push(`md:col-end-${colEnd.tablet}`);
+      if (colEnd.desktop) classes.push(`lg:col-end-${colEnd.desktop}`);
+    }
+  }
+  return classes.join(" ");
+};
+var Grid = React__default.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      container = true,
+      cols,
+      gap,
+      margin = false,
+      className,
+      children,
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId
+    } = _b, props = __objRest(_b, [
+      "container",
+      "cols",
+      "gap",
+      "margin",
+      "className",
+      "children",
+      "aria-label",
+      "data-testid"
+    ]);
+    const gridClasses = cn(
+      // Base grid styles
+      container && "grid",
+      // Maximum width containers following design system
+      "max-w-grid-mobile",
+      // Mobile: 412px max-width
+      "md:max-w-grid-tablet",
+      // Tablet: 834px max-width  
+      "lg:max-w-grid-desktop",
+      // Desktop: 1440px max-width
+      // Center containers when margin is enabled
+      margin && "mx-auto",
+      // Column configuration
+      getColsClasses(cols),
+      // Gap configuration
+      getGapClasses(gap),
+      // Padding configuration (follows design system)
+      margin && "px-4 md:px-5 lg:px-6",
+      // Custom classes
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: gridClasses,
+        "aria-label": ariaLabel,
+        "data-testid": dataTestId
+      }, props), {
+        children
+      })
+    );
+  }
+);
+Grid.displayName = "Grid";
+var GridItem = React__default.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      span,
+      rowSpan,
+      colStart,
+      colEnd,
+      className,
+      children,
+      "data-testid": dataTestId
+    } = _b, props = __objRest(_b, [
+      "span",
+      "rowSpan",
+      "colStart",
+      "colEnd",
+      "className",
+      "children",
+      "data-testid"
+    ]);
+    const itemClasses = cn(
+      // Span configuration
+      getSpanClasses(span),
+      // Row span configuration
+      getRowSpanClasses(rowSpan),
+      // Position configuration
+      getColPositionClasses(colStart, colEnd),
+      // Custom classes
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: itemClasses,
+        "data-testid": dataTestId
+      }, props), {
+        children
+      })
+    );
+  }
+);
+GridItem.displayName = "GridItem";
+
+exports.Grid = Grid;
+exports.GridItem = GridItem;

package/dist/molecules/grid/index.mjs

@@ -0,0 +1,256 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var getColsClasses = (cols) => {
+  if (typeof cols === "number") {
+    return `grid-cols-${cols}`;
+  }
+  if (typeof cols === "object" && cols !== null) {
+    const classes = [];
+    if (cols.mobile) {
+      classes.push(`grid-cols-${cols.mobile}`);
+    }
+    if (cols.tablet) {
+      classes.push(`md:grid-cols-${cols.tablet}`);
+    }
+    if (cols.desktop) {
+      classes.push(`lg:grid-cols-${cols.desktop}`);
+    }
+    return classes.join(" ");
+  }
+  return "grid-cols-4 md:grid-cols-8 lg:grid-cols-12";
+};
+var getGapClasses = (gap) => {
+  if (typeof gap === "string") {
+    const gapMap = {
+      xs: "gap-1",
+      // 4px
+      s: "gap-2",
+      // 8px
+      m: "gap-4",
+      // 16px
+      l: "gap-6",
+      // 24px
+      xl: "gap-8"
+      // 32px
+    };
+    return gapMap[gap] || "gap-4";
+  }
+  if (typeof gap === "object" && gap !== null) {
+    const gapMap = {
+      xs: "1",
+      s: "2",
+      m: "4",
+      l: "6",
+      xl: "8"
+    };
+    const classes = [];
+    if (gap.mobile) {
+      classes.push(`gap-${gapMap[gap.mobile] || "4"}`);
+    }
+    if (gap.tablet) {
+      classes.push(`md:gap-${gapMap[gap.tablet] || "5"}`);
+    }
+    if (gap.desktop) {
+      classes.push(`lg:gap-${gapMap[gap.desktop] || "6"}`);
+    }
+    return classes.join(" ");
+  }
+  return "gap-4 md:gap-5 lg:gap-6";
+};
+var getSpanClasses = (span) => {
+  if (typeof span === "number") {
+    return `col-span-${span}`;
+  }
+  if (typeof span === "object" && span !== null) {
+    const classes = [];
+    if (span.mobile) {
+      classes.push(`col-span-${span.mobile}`);
+    }
+    if (span.tablet) {
+      classes.push(`md:col-span-${span.tablet}`);
+    }
+    if (span.desktop) {
+      classes.push(`lg:col-span-${span.desktop}`);
+    }
+    return classes.join(" ");
+  }
+  return "";
+};
+var getRowSpanClasses = (rowSpan) => {
+  if (typeof rowSpan === "number") {
+    return `row-span-${rowSpan}`;
+  }
+  if (typeof rowSpan === "object" && rowSpan !== null) {
+    const classes = [];
+    if (rowSpan.mobile) {
+      classes.push(`row-span-${rowSpan.mobile}`);
+    }
+    if (rowSpan.tablet) {
+      classes.push(`md:row-span-${rowSpan.tablet}`);
+    }
+    if (rowSpan.desktop) {
+      classes.push(`lg:row-span-${rowSpan.desktop}`);
+    }
+    return classes.join(" ");
+  }
+  return "";
+};
+var getColPositionClasses = (colStart, colEnd) => {
+  const classes = [];
+  if (colStart) {
+    if (typeof colStart === "number") {
+      classes.push(`col-start-${colStart}`);
+    } else if (typeof colStart === "object") {
+      if (colStart.mobile) classes.push(`col-start-${colStart.mobile}`);
+      if (colStart.tablet) classes.push(`md:col-start-${colStart.tablet}`);
+      if (colStart.desktop) classes.push(`lg:col-start-${colStart.desktop}`);
+    }
+  }
+  if (colEnd) {
+    if (typeof colEnd === "number") {
+      classes.push(`col-end-${colEnd}`);
+    } else if (typeof colEnd === "object") {
+      if (colEnd.mobile) classes.push(`col-end-${colEnd.mobile}`);
+      if (colEnd.tablet) classes.push(`md:col-end-${colEnd.tablet}`);
+      if (colEnd.desktop) classes.push(`lg:col-end-${colEnd.desktop}`);
+    }
+  }
+  return classes.join(" ");
+};
+var Grid = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      container = true,
+      cols,
+      gap,
+      margin = false,
+      className,
+      children,
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId
+    } = _b, props = __objRest(_b, [
+      "container",
+      "cols",
+      "gap",
+      "margin",
+      "className",
+      "children",
+      "aria-label",
+      "data-testid"
+    ]);
+    const gridClasses = cn(
+      // Base grid styles
+      container && "grid",
+      // Maximum width containers following design system
+      "max-w-grid-mobile",
+      // Mobile: 412px max-width
+      "md:max-w-grid-tablet",
+      // Tablet: 834px max-width  
+      "lg:max-w-grid-desktop",
+      // Desktop: 1440px max-width
+      // Center containers when margin is enabled
+      margin && "mx-auto",
+      // Column configuration
+      getColsClasses(cols),
+      // Gap configuration
+      getGapClasses(gap),
+      // Padding configuration (follows design system)
+      margin && "px-4 md:px-5 lg:px-6",
+      // Custom classes
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: gridClasses,
+        "aria-label": ariaLabel,
+        "data-testid": dataTestId
+      }, props), {
+        children
+      })
+    );
+  }
+);
+Grid.displayName = "Grid";
+var GridItem = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      span,
+      rowSpan,
+      colStart,
+      colEnd,
+      className,
+      children,
+      "data-testid": dataTestId
+    } = _b, props = __objRest(_b, [
+      "span",
+      "rowSpan",
+      "colStart",
+      "colEnd",
+      "className",
+      "children",
+      "data-testid"
+    ]);
+    const itemClasses = cn(
+      // Span configuration
+      getSpanClasses(span),
+      // Row span configuration
+      getRowSpanClasses(rowSpan),
+      // Position configuration
+      getColPositionClasses(colStart, colEnd),
+      // Custom classes
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: itemClasses,
+        "data-testid": dataTestId
+      }, props), {
+        children
+      })
+    );
+  }
+);
+GridItem.displayName = "GridItem";
+
+export { Grid, GridItem };