@grupor5/raya 0.2.6 → 0.2.8

package/dist/index.mjs

@@ -2585,10 +2585,363 @@ function getPayloadConfigFromPayload(config, payload, key) {
   }
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
+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 = React17__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__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: gridClasses,
+        "aria-label": ariaLabel,
+        "data-testid": dataTestId
+      }, props), {
+        children
+      })
+    );
+  }
+);
+Grid.displayName = "Grid";
+var GridItem = React17__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__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: itemClasses,
+        "data-testid": dataTestId
+      }, props), {
+        children
+      })
+    );
+  }
+);
+GridItem.displayName = "GridItem";
 function Modal({ open, onClose, children }) {
   if (!open) return null;
   return /* @__PURE__ */ jsx("div", { style: { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0,0,0,0.5)" }, onClick: onClose, children: /* @__PURE__ */ jsx("div", { style: { margin: "100px auto", background: "#fff", padding: 24, borderRadius: 8, minWidth: 320 }, onClick: (e) => e.stopPropagation(), children }) });
 }
+var NavigationItemComponent = ({ item, isActive, onNavigate, collapsed = false, level = 0 }) => {
+  var _a;
+  const [isExpanded, setIsExpanded] = React17__default.useState(false);
+  const hasChildren = item.children && item.children.length > 0;
+  const handleClick = () => {
+    if (hasChildren && item.isCollapsible) {
+      setIsExpanded(!isExpanded);
+    } else {
+      onNavigate == null ? void 0 : onNavigate(item);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: isActive ? "secondary" : "ghost",
+        size: "sm",
+        onClick: handleClick,
+        className: cn(
+          "w-full justify-start text-left font-normal h-10",
+          level > 0 && "ml-4",
+          isActive && "bg-primary-100 text-primary-900 font-medium"
+        ),
+        "data-testid": `nav-item-${item.id}`,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            item.icon && /* @__PURE__ */ jsx("span", { className: cn("text-gray-500", isActive && "text-primary-600"), children: item.icon }),
+            !collapsed && /* @__PURE__ */ jsx("span", { className: "text-sm", children: item.label })
+          ] }),
+          !collapsed && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            item.badge && /* @__PURE__ */ jsx("span", { className: "bg-red-500 text-white text-xs px-2 py-1 rounded-full min-w-[20px] text-center", children: item.badge }),
+            hasChildren && item.isCollapsible && /* @__PURE__ */ jsx("span", { className: cn(
+              "text-gray-400 transition-transform",
+              isExpanded && "rotate-90"
+            ), children: "\u25B6" })
+          ] })
+        ] })
+      }
+    ),
+    hasChildren && isExpanded && !collapsed && /* @__PURE__ */ jsx("div", { className: "space-y-1", children: (_a = item.children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsx(
+      NavigationItemComponent,
+      {
+        item: child,
+        isActive: child.path === item.path,
+        onNavigate,
+        collapsed,
+        level: level + 1
+      },
+      child.id
+    )) })
+  ] });
+};
+var Sidebar = React17__default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      brand,
+      navigation,
+      currentPath,
+      collapsed = false,
+      onNavigate,
+      onToggleCollapse,
+      className,
+      "data-testid": dataTestId
+    } = _b, props = __objRest(_b, [
+      "brand",
+      "navigation",
+      "currentPath",
+      "collapsed",
+      "onNavigate",
+      "onToggleCollapse",
+      "className",
+      "data-testid"
+    ]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "h-full bg-white border-r border-gray-200 flex flex-col",
+          "transition-all duration-300",
+          collapsed ? "w-16" : "w-full",
+          className
+        ),
+        "data-testid": dataTestId
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(
+            "p-4 border-b border-gray-100",
+            collapsed && "px-2"
+          ), children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              brand.logo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: brand.logo }),
+              !collapsed && /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subheading-md", className: "text-gray-900 font-bold truncate", children: brand.name }),
+                brand.tagline && /* @__PURE__ */ jsx(Typography, { variant: "body-xs", className: "text-gray-500 truncate", children: brand.tagline })
+              ] })
+            ] }),
+            onToggleCollapse && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: onToggleCollapse,
+                className: cn(
+                  "mt-3 w-full h-8",
+                  collapsed && "w-8 mx-auto"
+                ),
+                "data-testid": "sidebar-toggle",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: cn(
+                    "transition-transform",
+                    collapsed && "rotate-180"
+                  ), children: "\u25C0" }),
+                  !collapsed && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs", children: "Colapsar" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("nav", { className: "flex-1 p-4 space-y-2 overflow-y-auto", children: navigation.map((item) => /* @__PURE__ */ jsx(
+            NavigationItemComponent,
+            {
+              item,
+              isActive: currentPath === item.path,
+              onNavigate,
+              collapsed
+            },
+            item.id
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: cn(
+            "p-4 border-t border-gray-100",
+            collapsed && "px-2"
+          ), children: !collapsed && /* @__PURE__ */ jsx(Typography, { variant: "body-xs", className: "text-gray-400 text-center", children: "\xA9 2024 Design System" }) })
+        ]
+      })
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
 function AuthLayout({ children }) {
   return /* @__PURE__ */ jsx("div", { style: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx("main", { children }) });
 }
@@ -2603,4 +2956,4 @@ function useModal(initialOpen = false) {
   return { open, openModal, closeModal };
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AuthLayout, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Dropdown, Form, FormField, FormLabel, FormMessage, Input, Label, Modal, Paragraph, ProgressBar, RadioGroup, RadioGroupItem, Step, StepContent, StepDescription, StepLabel, Stepper, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, ThemeProvider, Title, Typography, badgeTokens, badgeVariants, classNames, cn, colors, componentStrokes, createStroke, fontFamily, fontSize, fontWeight, generateSpacingCSS, generateStrokesCSS, generateTypographyCSS, getSpacing, getSpacingPx, getStroke, getStrokeColor, letterSpacing, lineHeight, presets, responsiveStrokes, spacing, spacingPx, spacingStyles, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tagTokens, tailwindSpacing, tailwindStrokes, typography, typographyVariants, typographyVars, useModal, useStepper, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AuthLayout, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Dropdown, Form, FormField, FormLabel, FormMessage, Grid, GridItem, Input, Label, Modal, Paragraph, ProgressBar, RadioGroup, RadioGroupItem, Sidebar, Step, StepContent, StepDescription, StepLabel, Stepper, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, ThemeProvider, Title, Typography, badgeTokens, badgeVariants, classNames, cn, colors, componentStrokes, createStroke, fontFamily, fontSize, fontWeight, generateSpacingCSS, generateStrokesCSS, generateTypographyCSS, getSpacing, getSpacingPx, getStroke, getStrokeColor, letterSpacing, lineHeight, presets, responsiveStrokes, spacing, spacingPx, spacingStyles, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tagTokens, tailwindSpacing, tailwindStrokes, typography, typographyVariants, typographyVars, useModal, useStepper, useTheme };

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

@@ -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 };