@grupor5/raya 0.2.6 → 0.2.7

package/dist/index.d.mts

@@ -27,6 +27,7 @@ export { Step, StepContent, StepDescription, StepLabel, Stepper, StepperAPI, use
 export { Dropdown, DropdownProps } from './molecules/dropdown/index.mjs';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './molecules/accordion/index.mjs';
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './molecules/chart/index.mjs';
+export { Grid, GridItem, GridItemProps, GridProps, ResponsiveValue } from './molecules/grid/index.mjs';
 export { useModal } from './hooks/useModal.mjs';
 import 'clsx';
 import 'class-variance-authority/dist/types';

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export { Step, StepContent, StepDescription, StepLabel, Stepper, StepperAPI, use
 export { Dropdown, DropdownProps } from './molecules/dropdown/index.js';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './molecules/accordion/index.js';
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './molecules/chart/index.js';
+export { Grid, GridItem, GridItemProps, GridProps, ResponsiveValue } from './molecules/grid/index.js';
 export { useModal } from './hooks/useModal.js';
 import 'clsx';
 import 'class-variance-authority/dist/types';

package/dist/index.js

@@ -2613,6 +2613,212 @@ 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__namespace.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",
+      // Column configuration
+      getColsClasses(cols),
+      // Gap configuration
+      getGapClasses(gap),
+      // Margin configuration (follows design system)
+      margin && "mx-4 md:mx-5 lg:mx-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 = React17__namespace.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";
 function Modal({ open, onClose, children }) {
   if (!open) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0,0,0,0.5)" }, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "100px auto", background: "#fff", padding: 24, borderRadius: 8, minWidth: 320 }, onClick: (e) => e.stopPropagation(), children }) });
@@ -2659,6 +2865,8 @@ exports.Form = Form;
 exports.FormField = FormField;
 exports.FormLabel = FormLabel;
 exports.FormMessage = FormMessage;
+exports.Grid = Grid;
+exports.GridItem = GridItem;
 exports.Input = Input;
 exports.Label = Label;
 exports.Modal = Modal;

package/dist/index.mjs

@@ -2585,6 +2585,212 @@ 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",
+      // Column configuration
+      getColsClasses(cols),
+      // Gap configuration
+      getGapClasses(gap),
+      // Margin configuration (follows design system)
+      margin && "mx-4 md:mx-5 lg:mx-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 }) });
@@ -2603,4 +2809,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, 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 margins 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
+ * - **Mobile**: 0px (4 columns, 16px margins/gaps)
+ * - **Tablet**: 768px (8 columns, 20px margins/gaps)
+ * - **Desktop**: 1024px (12 columns, 24px margins/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 };