@jiwambe/components 0.2.0

package/dist/components/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\n/**\n * Edge from which the drawer panel slides in. Use 'left' for navigation-style drawers,\n * 'right' for filters or detail panels.\n */\nexport type DrawerAnchor = 'left' | 'right';\n\n/**\n * Props for the Drawer component. Drawer does not control visibility — use it inside\n * an Overlay and control open/onClose on the Overlay.\n */\nexport interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Which edge the drawer panel slides in from. @default 'right' */\n  anchor?: DrawerAnchor;\n  /** Max width of the drawer panel. @default '24rem' (384px) */\n  maxWidth?: string;\n  /** Panel content. Typically Stack or nav content. @default undefined */\n  children?: React.ReactNode;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst anchorClasses: Record<DrawerAnchor, string> = {\n  left: 'left-0',\n  right: 'right-0',\n};\n\n/**\n * Slide-in side panel for mobile navigation, filters, or detail views.\n * Designed to be used inside an `<Overlay>`.\n *\n * @example\n * ```tsx\n * <Overlay open={isOpen} onClose={close}>\n *   <Drawer anchor=\"right\">\n *     <Stack gap=\"space-4\" className=\"p-space-4\">...</Stack>\n *   </Drawer>\n * </Overlay>\n * ```\n */\nexport function Drawer({\n  anchor = 'right',\n  maxWidth = '24rem',\n  children,\n  className = '',\n  style,\n  ref,\n  ...rest\n}: DrawerProps) {\n  const classes = [\n    'absolute inset-y-0 w-full bg-fill-bg-primary shadow-elevation-normal',\n    anchorClasses[anchor],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={{ maxWidth, ...style }}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAyBA;AAAoD;AAC5C;AAER;AAeO;AAAgB;AACZ;AACE;AACX;AACY;AACZ;AACA;AAEF;AACE;AAAgB;AACd;AACoB;AACpB;AAKF;AACE;AAAC;AAAA;AACC;AACW;AACW;AACjB;AACM;AACP;AAEH;AAAA;AAGP;;;;"}

package/dist/components/FAQ/FAQ.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { FAQItem } from '../../types';
+/**
+ * Props for the FAQ component. Each item uses the FAQItem shape: question, answer, disabled?.
+ * @see FAQItem
+ */
+export interface FAQProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Section heading displayed above the accordion list. @default 'FAQ' */
+    heading?: string;
+    /** Array of question/answer pairs. Each item: question (string), answer (ReactNode), disabled? (boolean). */
+    items: FAQItem[];
+    /** Index of the item open by default (uncontrolled). -1 = none. @default undefined */
+    defaultOpenIndex?: number;
+    /** Currently open index (controlled). Pass -1 for all closed. Use with onChange. @default undefined */
+    value?: number;
+    /** Called when the open index changes. @default undefined */
+    onChange?: (index: number) => void;
+    /** Optional link rendered below the list (e.g. "View all FAQs"). @default undefined */
+    link?: {
+        label: string;
+        href: string;
+    };
+    /** Component to render the footer link as (e.g. next/link). @default 'a' */
+    linkAs?: React.ElementType;
+    /** Forwarded ref for the section. @default undefined */
+    ref?: React.Ref<HTMLElement>;
+}
+/**
+ * FAQ section: heading plus an accordion of question/answer pairs. Uses FAQItem shape
+ * (question, answer, optional disabled). Supports controlled (value/onChange) or uncontrolled
+ * (defaultOpenIndex) expansion. Optional footer link for "View all FAQs" etc.
+ *
+ * @example
+ * <FAQ heading="Questions" items={[{ question: 'What is X?', answer: 'X is...' }]} />
+ *
+ * @example
+ * <FAQ items={faqItems} defaultOpenIndex={0} link={{ label: 'View all', href: '/faq' }} />
+ */
+export declare function FAQ({ heading, items, defaultOpenIndex, value, onChange, link, linkAs, className, ref, ...rest }: FAQProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FAQ.d.ts.map

package/dist/components/FAQ/FAQ.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../../src/components/FAQ/FAQ.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAqB3C;;;GAGG;AACH,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACnF,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6GAA6G;IAC7G,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,sFAAsF;IACtF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uFAAuF;IACvF,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,4EAA4E;IAC5E,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC3B,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,GAAG,CAAC,EAClB,OAAe,EACf,KAAK,EACL,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,SAAc,EACd,GAAG,EACH,GAAG,IAAI,EACR,EAAE,QAAQ,2CA6IV"}

package/dist/components/FAQ/FAQ.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useId, useState, useEffect, useRef, useCallback } from "react";
+function ChevronIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+    }
+  );
+}
+function FAQ({
+  heading = "FAQ",
+  items,
+  defaultOpenIndex,
+  value,
+  onChange,
+  link,
+  linkAs,
+  className = "",
+  ref,
+  ...rest
+}) {
+  const baseId = useId();
+  const isControlled = value !== void 0;
+  const [internalOpen, setInternalOpen] = useState(defaultOpenIndex ?? -1);
+  const openIndex = isControlled ? value : internalOpen;
+  useEffect(() => {
+    if (!isControlled && defaultOpenIndex !== void 0) {
+      setInternalOpen(defaultOpenIndex);
+    }
+  }, [defaultOpenIndex, isControlled]);
+  const triggerRefs = useRef([]);
+  const toggle = useCallback(
+    (index) => {
+      const next = openIndex === index ? -1 : index;
+      if (isControlled) {
+        onChange == null ? void 0 : onChange(next);
+      } else {
+        setInternalOpen(next);
+      }
+    },
+    [openIndex, isControlled, onChange]
+  );
+  const focusTrigger = (index) => {
+    var _a;
+    (_a = triggerRefs.current[index]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (e, index) => {
+    const enabledIndices = items.map((_, i) => i).filter((i) => !items[i].disabled);
+    const currentPos = enabledIndices.indexOf(index);
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[(currentPos + 1) % enabledIndices.length]);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[(currentPos - 1 + enabledIndices.length) % enabledIndices.length]);
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[0]);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[enabledIndices.length - 1]);
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref,
+      className: `w-full bg-fill-bg-secondary px-space-fluid-4-8 py-space-fluid-8-16 ${className}`,
+      ...rest,
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-[1328px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-fluid-4-5", children: [
+          heading && /* @__PURE__ */ jsx("h2", { className: "text-title-lg text-text-primary", children: heading }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-space-2", children: items.map((item, index) => {
+            const isOpen = openIndex === index;
+            const triggerId = `${baseId}-faq-trigger-${index}`;
+            const panelId = `${baseId}-faq-panel-${index}`;
+            const disabled = !!item.disabled;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex flex-col gap-space-fluid-2-4 rounded-rad-md overflow-hidden bg-fill-action-inverse p-space-fluid-4-8",
+                children: [
+                  /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      ref: (el) => {
+                        triggerRefs.current[index] = el;
+                      },
+                      id: triggerId,
+                      type: "button",
+                      className: `flex w-full items-center justify-between gap-space-fluid-4-6 text-title-sm text-left transition-colors outline-none ${disabled ? "text-text-disabled cursor-not-allowed" : "text-text-primary hover:bg-fill-bg-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus cursor-pointer"}`,
+                      "aria-expanded": isOpen,
+                      "aria-controls": panelId,
+                      "aria-disabled": disabled || void 0,
+                      disabled,
+                      onClick: () => toggle(index),
+                      onKeyDown: (e) => handleKeyDown(e, index),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: item.question }),
+                        /* @__PURE__ */ jsx(
+                          ChevronIcon,
+                          {
+                            className: `h-6 w-6 shrink-0 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: panelId,
+                      role: "region",
+                      "aria-labelledby": triggerId,
+                      className: `overflow-hidden transition-all duration-200 ease-in-out ${isOpen ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"}`,
+                      children: /* @__PURE__ */ jsx("div", { className: "text-text-md text-text-primary", children: item.answer })
+                    }
+                  )
+                ]
+              },
+              index
+            );
+          }) })
+        ] }),
+        link && /* @__PURE__ */ jsx("div", { className: "mt-space-fluid-4-6", children: React.createElement(
+          linkAs || "a",
+          {
+            href: link.href,
+            className: "text-link-md text-link-primary underline hover:text-link-primary-hover transition-colors"
+          },
+          link.label
+        ) })
+      ] })
+    }
+  );
+}
+export {
+  FAQ
+};
+//# sourceMappingURL=FAQ.js.map

package/dist/components/FAQ/FAQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FAQ.js","sources":["../../../src/components/FAQ/FAQ.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useRef, useCallback, useId, useEffect } from 'react';\nimport type { FAQItem } from '../../types';\n\nfunction ChevronIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 9l6 6 6-6\" />\n    </svg>\n  );\n}\n\n/**\n * Props for the FAQ component. Each item uses the FAQItem shape: question, answer, disabled?.\n * @see FAQItem\n */\nexport interface FAQProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** Section heading displayed above the accordion list. @default 'FAQ' */\n  heading?: string;\n  /** Array of question/answer pairs. Each item: question (string), answer (ReactNode), disabled? (boolean). */\n  items: FAQItem[];\n  /** Index of the item open by default (uncontrolled). -1 = none. @default undefined */\n  defaultOpenIndex?: number;\n  /** Currently open index (controlled). Pass -1 for all closed. Use with onChange. @default undefined */\n  value?: number;\n  /** Called when the open index changes. @default undefined */\n  onChange?: (index: number) => void;\n  /** Optional link rendered below the list (e.g. \"View all FAQs\"). @default undefined */\n  link?: {\n    label: string;\n    href: string;\n  };\n  /** Component to render the footer link as (e.g. next/link). @default 'a' */\n  linkAs?: React.ElementType;\n  /** Forwarded ref for the section. @default undefined */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * FAQ section: heading plus an accordion of question/answer pairs. Uses FAQItem shape\n * (question, answer, optional disabled). Supports controlled (value/onChange) or uncontrolled\n * (defaultOpenIndex) expansion. Optional footer link for \"View all FAQs\" etc.\n *\n * @example\n * <FAQ heading=\"Questions\" items={[{ question: 'What is X?', answer: 'X is...' }]} />\n *\n * @example\n * <FAQ items={faqItems} defaultOpenIndex={0} link={{ label: 'View all', href: '/faq' }} />\n */\nexport function FAQ({\n  heading = 'FAQ',\n  items,\n  defaultOpenIndex,\n  value,\n  onChange,\n  link,\n  linkAs,\n  className = '',\n  ref,\n  ...rest\n}: FAQProps) {\n    const baseId = useId();\n    const isControlled = value !== undefined;\n\n    const [internalOpen, setInternalOpen] = useState<number>(defaultOpenIndex ?? -1);\n    const openIndex = isControlled ? value : internalOpen;\n\n    useEffect(() => {\n      if (!isControlled && defaultOpenIndex !== undefined) {\n        setInternalOpen(defaultOpenIndex);\n      }\n    }, [defaultOpenIndex, isControlled]);\n\n    const triggerRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const toggle = useCallback(\n      (index: number) => {\n        const next = openIndex === index ? -1 : index;\n        if (isControlled) {\n          onChange?.(next);\n        } else {\n          setInternalOpen(next);\n        }\n      },\n      [openIndex, isControlled, onChange],\n    );\n\n    const focusTrigger = (index: number) => {\n      triggerRefs.current[index]?.focus();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const enabledIndices = items\n        .map((_, i) => i)\n        .filter((i) => !items[i].disabled);\n      const currentPos = enabledIndices.indexOf(index);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[(currentPos + 1) % enabledIndices.length]);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[(currentPos - 1 + enabledIndices.length) % enabledIndices.length]);\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[0]);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[enabledIndices.length - 1]);\n          break;\n        }\n      }\n    };\n\n    return (\n      <section\n        ref={ref}\n        className={`w-full bg-fill-bg-secondary px-space-fluid-4-8 py-space-fluid-8-16 ${className}`}\n        {...rest}\n      >\n        <div className=\"mx-auto w-full max-w-[1328px]\">\n          <div className=\"flex flex-col gap-space-fluid-4-5\">\n            {heading && (\n              <h2 className=\"text-title-lg text-text-primary\">{heading}</h2>\n            )}\n\n            <div className=\"flex flex-col gap-space-2\">\n              {items.map((item, index) => {\n                const isOpen = openIndex === index;\n                const triggerId = `${baseId}-faq-trigger-${index}`;\n                const panelId = `${baseId}-faq-panel-${index}`;\n                const disabled = !!item.disabled;\n\n                return (\n                  <div\n                    key={index}\n                    className=\"flex flex-col gap-space-fluid-2-4 rounded-rad-md overflow-hidden bg-fill-action-inverse p-space-fluid-4-8\"\n                  >\n                    <h3>\n                      <button\n                        ref={(el) => { triggerRefs.current[index] = el; }}\n                        id={triggerId}\n                        type=\"button\"\n                        className={`flex w-full items-center justify-between gap-space-fluid-4-6 text-title-sm text-left transition-colors outline-none ${\n                          disabled\n                            ? 'text-text-disabled cursor-not-allowed'\n                            : 'text-text-primary hover:bg-fill-bg-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus cursor-pointer'\n                        }`}\n                        aria-expanded={isOpen}\n                        aria-controls={panelId}\n                        aria-disabled={disabled || undefined}\n                        disabled={disabled}\n                        onClick={() => toggle(index)}\n                        onKeyDown={(e) => handleKeyDown(e, index)}\n                      >\n                        <span>{item.question}</span>\n                        <ChevronIcon\n                          className={`h-6 w-6 shrink-0 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}\n                        />\n                      </button>\n                    </h3>\n                    <div\n                      id={panelId}\n                      role=\"region\"\n                      aria-labelledby={triggerId}\n                      className={`overflow-hidden transition-all duration-200 ease-in-out ${\n                        isOpen ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'\n                      }`}\n                    >\n                      <div className=\"text-text-md text-text-primary\">\n                        {item.answer}\n                      </div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n\n          {link && (\n            <div className=\"mt-space-fluid-4-6\">\n              {React.createElement(\n                linkAs || 'a',\n                {\n                  href: link.href,\n                  className: 'text-link-md text-link-primary underline hover:text-link-primary-hover transition-colors',\n                },\n                link.label,\n              )}\n            </div>\n          )}\n        </div>\n      </section>\n    );\n}\n"],"names":[],"mappings":";;;AAKA;AACE;AACE;AAAC;AAAA;AACC;AACM;AACC;AACC;AACH;AACE;AACK;AACE;AACC;AACH;AAEW;AAAA;AAG7B;AAuCO;AAAa;AACR;AACV;AACA;AACA;AACA;AACA;AACA;AACY;AACZ;AAEF;AACI;AACA;AAEA;AACA;AAEA;AACE;AACE;AAAgC;AAClC;AAGF;AAEA;AAAe;AAEX;AACA;AACE;AAAW;AAEX;AAAoB;AACtB;AACF;AACkC;AAGpC;;AACE;AAA4B;AAG9B;AACE;AAGA;AAEA;AAAU;AAEN;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAAA;AAIJ;AACE;AAAC;AAAA;AACC;AAC0F;AACtF;AAGF;AACG;AAC0D;AAKvD;AACA;AACA;AACA;AAEA;AACE;AAAC;AAAA;AAEW;AAEV;AACE;AAAC;AAAA;AACgB;AAA6B;AAAI;AAC5C;AACC;AAKL;AACe;AACA;AACY;AAC3B;AAC2B;AACa;AAExC;AAAqB;AACrB;AAAC;AAAA;AAC4F;AAAA;AAAA;AAC7F;AAAA;AAEJ;AACA;AAAC;AAAA;AACK;AACC;AACY;AAGjB;AAIA;AAAA;AAAA;AACF;AAAA;AArCK;AAAA;AAyCb;AACF;AAIW;AACK;AACV;AACa;AACA;AAAA;AAER;AAET;AAEJ;AAAA;AAGR;;;;"}

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../../utils/responsive-props';
+import { SpacingProps, GapProps } from '../../types/spacing';
+import { LayoutProps } from '../../types/layout';
+/**
+ * Props for the Grid component. Extends div attributes (display omitted),
+ * SpacingProps, GapProps, and a subset of LayoutProps (alignItems,
+ * justifyContent, alignSelf only).
+ */
+export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'display'>, SpacingProps, GapProps, Pick<LayoutProps, 'alignItems' | 'justifyContent' | 'alignSelf'> {
+    /**
+     * Number of equal-width columns in the grid.
+     *
+     * Pass a number for a fixed layout:
+     *   columns={3} → grid-template-columns: repeat(3, minmax(0, 1fr))
+     *
+     * Pass a responsive object for breakpoint-specific layouts:
+     *   columns={{ base: 1, sm: 2, lg: 4 }}
+     *   Breakpoints: sm=600px, md=800px, lg=940px, xl=1440px
+     *
+     * When undefined, defaults to a 9-column grid at base and
+     * 12-column at sm (the library's default layout grid).
+     * @default undefined
+     */
+    columns?: ResponsiveValue<number>;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Grid cell content. @default undefined */
+    children?: React.ReactNode;
+}
+/**
+ * Two-dimensional CSS grid layout component. Use for multi-column
+ * layouts, card grids, and any content that needs rows and columns.
+ *
+ * For one-dimensional sequences of children, use Stack instead.
+ * Grid renders with display: grid and width: 100% by default.
+ *
+ * The columns prop accepts a number for a fixed column count or a
+ * responsive object for breakpoint-specific column counts.
+ *
+ * @example
+ * // Fixed 3-column grid
+ * <Grid columns={3} gap="space-4">
+ *   <Card />
+ *   <Card />
+ *   <Card />
+ * </Grid>
+ *
+ * @example
+ * // Responsive column grid
+ * <Grid columns={{ base: 1, sm: 2, lg: 3 }} gap="space-6" p="space-4">
+ *   <Card />
+ *   <Card />
+ *   <Card />
+ * </Grid>
+ */
+export declare function Grid({ columns, gap, rowGap, columnGap, alignItems, justifyContent, alignSelf, children, className, style, ref, ...rest }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Grid {
+    var displayName: string;
+}
+//# sourceMappingURL=Grid.d.ts.map

package/dist/components/Grid/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKL,KAAK,eAAe,EACrB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAatD;;;;GAIG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,EAC3D,YAAY,EACZ,QAAQ,EACR,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,gBAAgB,GAAG,WAAW,CAAC;IAClE;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAClC,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,GAAe,EACf,MAAM,EACN,SAAS,EACT,UAAU,EACV,cAAc,EACd,SAAS,EACT,QAAQ,EACR,SAAc,EACd,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CA6EX;yBA1Fe,IAAI"}

package/dist/components/Grid/Grid.js

@@ -0,0 +1,95 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { isResponsiveObject, buildMediaCSS, generateScopeId, renderScopedStyle } from "../../utils/responsive-props.js";
+import { resolveSpacing, SPACING_PROP_KEYS } from "../../utils/spacing.js";
+import { resolveLayout } from "../../utils/layoutClasses.js";
+const GRID_SPACING_KEYS = [
+  ...SPACING_PROP_KEYS,
+  "gap",
+  "rowGap",
+  "columnGap"
+];
+const GRID_LAYOUT_KEYS = ["alignItems", "justifyContent", "alignSelf"];
+function Grid({
+  columns,
+  gap = "space-2",
+  rowGap,
+  columnGap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  children,
+  className = "",
+  style,
+  ref,
+  ...rest
+}) {
+  const spacingClasses = resolveSpacing({
+    ...rest,
+    gap,
+    rowGap,
+    columnGap
+  });
+  const layoutClasses = resolveLayout({
+    alignItems,
+    justifyContent,
+    alignSelf
+  });
+  const restWithoutSpacing = { ...rest };
+  for (const key of GRID_SPACING_KEYS) {
+    delete restWithoutSpacing[key];
+  }
+  for (const key of GRID_LAYOUT_KEYS) {
+    delete restWithoutSpacing[key];
+  }
+  const base = {
+    display: "grid",
+    width: "100%",
+    ...style
+  };
+  let needsId = false;
+  const mediaRules = {};
+  const useDefaultColumns = columns === void 0;
+  if (columns !== void 0) {
+    if (isResponsiveObject(columns)) {
+      needsId = true;
+      for (const [bp, val] of Object.entries(columns)) {
+        if (val === void 0) continue;
+        const gridVal = `repeat(${val}, minmax(0, 1fr))`;
+        if (bp === "base") {
+          base.gridTemplateColumns = gridVal;
+        } else {
+          if (!mediaRules[bp]) mediaRules[bp] = {};
+          mediaRules[bp]["grid-template-columns"] = gridVal;
+        }
+      }
+    } else {
+      base.gridTemplateColumns = `repeat(${columns}, minmax(0, 1fr))`;
+    }
+  }
+  const componentMedia = buildMediaCSS(mediaRules);
+  const scopeId = needsId && componentMedia ? generateScopeId(componentMedia, "grd") : void 0;
+  const classes = [
+    useDefaultColumns ? "grid-cols-9 sm:grid-cols-12" : "",
+    layoutClasses,
+    spacingClasses,
+    className
+  ].filter(Boolean).join(" ");
+  const elementProps = {
+    ref,
+    className: classes || void 0,
+    style: base,
+    ...restWithoutSpacing
+  };
+  if (scopeId) {
+    elementProps["data-jds"] = scopeId;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    scopeId && renderScopedStyle(componentMedia, scopeId),
+    /* @__PURE__ */ jsx("div", { ...elementProps, children })
+  ] });
+}
+Grid.displayName = "Grid";
+export {
+  Grid
+};
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  isResponsiveObject,\n  generateScopeId,\n  buildMediaCSS,\n  renderScopedStyle,\n  type ResponsiveValue,\n} from '../../utils/responsive-props';\nimport type { SpacingProps, GapProps } from '../../types/spacing';\nimport type { LayoutProps } from '../../types/layout';\nimport { resolveSpacing, SPACING_PROP_KEYS } from '../../utils/spacing';\nimport { resolveLayout } from '../../utils/layoutClasses';\n\nconst GRID_SPACING_KEYS = [\n  ...SPACING_PROP_KEYS,\n  'gap',\n  'rowGap',\n  'columnGap',\n] as const;\n\nconst GRID_LAYOUT_KEYS = ['alignItems', 'justifyContent', 'alignSelf'] as const;\n\n/**\n * Props for the Grid component. Extends div attributes (display omitted),\n * SpacingProps, GapProps, and a subset of LayoutProps (alignItems,\n * justifyContent, alignSelf only).\n */\nexport interface GridProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'display'>,\n    SpacingProps,\n    GapProps,\n    Pick<LayoutProps, 'alignItems' | 'justifyContent' | 'alignSelf'> {\n  /**\n   * Number of equal-width columns in the grid.\n   *\n   * Pass a number for a fixed layout:\n   *   columns={3} → grid-template-columns: repeat(3, minmax(0, 1fr))\n   *\n   * Pass a responsive object for breakpoint-specific layouts:\n   *   columns={{ base: 1, sm: 2, lg: 4 }}\n   *   Breakpoints: sm=600px, md=800px, lg=940px, xl=1440px\n   *\n   * When undefined, defaults to a 9-column grid at base and\n   * 12-column at sm (the library's default layout grid).\n   * @default undefined\n   */\n  columns?: ResponsiveValue<number>;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n  /** Grid cell content. @default undefined */\n  children?: React.ReactNode;\n}\n\n/**\n * Two-dimensional CSS grid layout component. Use for multi-column\n * layouts, card grids, and any content that needs rows and columns.\n *\n * For one-dimensional sequences of children, use Stack instead.\n * Grid renders with display: grid and width: 100% by default.\n *\n * The columns prop accepts a number for a fixed column count or a\n * responsive object for breakpoint-specific column counts.\n *\n * @example\n * // Fixed 3-column grid\n * <Grid columns={3} gap=\"space-4\">\n *   <Card />\n *   <Card />\n *   <Card />\n * </Grid>\n *\n * @example\n * // Responsive column grid\n * <Grid columns={{ base: 1, sm: 2, lg: 3 }} gap=\"space-6\" p=\"space-4\">\n *   <Card />\n *   <Card />\n *   <Card />\n * </Grid>\n */\nexport function Grid({\n  columns,\n  gap = 'space-2',\n  rowGap,\n  columnGap,\n  alignItems,\n  justifyContent,\n  alignSelf,\n  children,\n  className = '',\n  style,\n  ref,\n  ...rest\n}: GridProps) {\n  const spacingClasses = resolveSpacing({\n    ...rest,\n    gap,\n    rowGap,\n    columnGap,\n  });\n  const layoutClasses = resolveLayout({\n    alignItems,\n    justifyContent,\n    alignSelf,\n  });\n  const restWithoutSpacing = { ...rest };\n  for (const key of GRID_SPACING_KEYS) {\n    delete (restWithoutSpacing as Record<string, unknown>)[key];\n  }\n  for (const key of GRID_LAYOUT_KEYS) {\n    delete (restWithoutSpacing as Record<string, unknown>)[key];\n  }\n\n  const base: React.CSSProperties = {\n    display: 'grid',\n    width: '100%',\n    ...style,\n  };\n\n  let needsId = false;\n  const mediaRules: Record<string, Record<string, string>> = {};\n  const useDefaultColumns = columns === undefined;\n\n  if (columns !== undefined) {\n    if (isResponsiveObject(columns)) {\n      needsId = true;\n      for (const [bp, val] of Object.entries(columns)) {\n        if (val === undefined) continue;\n        const gridVal = `repeat(${val}, minmax(0, 1fr))`;\n        if (bp === 'base') {\n          base.gridTemplateColumns = gridVal;\n        } else {\n          if (!mediaRules[bp]) mediaRules[bp] = {};\n          mediaRules[bp]['grid-template-columns'] = gridVal;\n        }\n      }\n    } else {\n      base.gridTemplateColumns = `repeat(${columns}, minmax(0, 1fr))`;\n    }\n  }\n\n  const componentMedia = buildMediaCSS(mediaRules);\n  const scopeId = needsId && componentMedia ? generateScopeId(componentMedia, 'grd') : undefined;\n\n  const classes = [\n    useDefaultColumns ? 'grid-cols-9 sm:grid-cols-12' : '',\n    layoutClasses,\n    spacingClasses,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const elementProps: Record<string, unknown> = {\n    ref,\n    className: classes || undefined,\n    style: base,\n    ...restWithoutSpacing,\n  };\n\n  if (scopeId) {\n    elementProps['data-jds'] = scopeId;\n  }\n\n  return (\n    <>\n      {scopeId && renderScopedStyle(componentMedia, scopeId)}\n      <div {...elementProps}>{children}</div>\n    </>\n  );\n}\n\nGrid.displayName = 'Grid';\n"],"names":[],"mappings":";;;;AAaA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,mBAAmB,CAAC,cAAc,kBAAkB,WAAW;AA2D9D,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,iBAAiB,eAAe;AAAA,IACpC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,QAAM,gBAAgB,cAAc;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,QAAM,qBAAqB,EAAE,GAAG,KAAA;AAChC,aAAW,OAAO,mBAAmB;AACnC,WAAQ,mBAA+C,GAAG;AAAA,EAC5D;AACA,aAAW,OAAO,kBAAkB;AAClC,WAAQ,mBAA+C,GAAG;AAAA,EAC5D;AAEA,QAAM,OAA4B;AAAA,IAChC,SAAS;AAAA,IACT,OAAO;AAAA,IACP,GAAG;AAAA,EAAA;AAGL,MAAI,UAAU;AACd,QAAM,aAAqD,CAAA;AAC3D,QAAM,oBAAoB,YAAY;AAEtC,MAAI,YAAY,QAAW;AACzB,QAAI,mBAAmB,OAAO,GAAG;AAC/B,gBAAU;AACV,iBAAW,CAAC,IAAI,GAAG,KAAK,OAAO,QAAQ,OAAO,GAAG;AAC/C,YAAI,QAAQ,OAAW;AACvB,cAAM,UAAU,UAAU,GAAG;AAC7B,YAAI,OAAO,QAAQ;AACjB,eAAK,sBAAsB;AAAA,QAC7B,OAAO;AACL,cAAI,CAAC,WAAW,EAAE,EAAG,YAAW,EAAE,IAAI,CAAA;AACtC,qBAAW,EAAE,EAAE,uBAAuB,IAAI;AAAA,QAC5C;AAAA,MACF;AAAA,IACF,OAAO;AACL,WAAK,sBAAsB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF;AAEA,QAAM,iBAAiB,cAAc,UAAU;AAC/C,QAAM,UAAU,WAAW,iBAAiB,gBAAgB,gBAAgB,KAAK,IAAI;AAErF,QAAM,UAAU;AAAA,IACd,oBAAoB,gCAAgC;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,eAAwC;AAAA,IAC5C;AAAA,IACA,WAAW,WAAW;AAAA,IACtB,OAAO;AAAA,IACP,GAAG;AAAA,EAAA;AAGL,MAAI,SAAS;AACX,iBAAa,UAAU,IAAI;AAAA,EAC7B;AAEA,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,WAAW,kBAAkB,gBAAgB,OAAO;AAAA,IACrD,oBAAC,OAAA,EAAK,GAAG,cAAe,SAAA,CAAS;AAAA,EAAA,GACnC;AAEJ;AAEA,KAAK,cAAc;"}

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+/**
+ * Union of all available icon names in the library. Use with the Icon component's name prop.
+ * Icons use currentColor so they inherit text colour from CSS.
+ */
+export type IconName = 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'arrow-right' | 'arrow-left' | 'arrow-up' | 'arrow-down' | 'close' | 'menu' | 'check' | 'search' | 'globe' | 'info' | 'warning' | 'error' | 'plus' | 'minus' | 'edit' | 'trash' | 'eye' | 'eye-off' | 'copy' | 'download' | 'upload' | 'filter' | 'sort' | 'calendar' | 'clock' | 'user' | 'settings' | 'home' | 'mail' | 'phone' | 'map-pin' | 'external-link' | 'link' | 'star' | 'heart' | 'share' | 'whatsapp' | 'facebook' | 'instagram' | 'tiktok' | 'linkedin' | 'x-twitter';
+/**
+ * Props for the Icon component. Renders an inline SVG; colour comes from CSS (currentColor).
+ */
+export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
+    /** Which icon to render. Must be a valid IconName. */
+    name: IconName;
+    /** Width and height in pixels. @default 24 */
+    size?: number;
+    /** Additional class names. @default undefined */
+    className?: string;
+    /** Forwarded ref for the SVG element. @default undefined */
+    ref?: React.Ref<SVGSVGElement>;
+}
+export declare function Icon({ name, size, className, style, ref, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAChB,cAAc,GACd,YAAY,GACZ,cAAc,GACd,eAAe,GACf,aAAa,GACb,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,OAAO,GACP,MAAM,GACN,SAAS,GACT,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,KAAK,GACL,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,UAAU,GACV,OAAO,GACP,MAAM,GACN,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,GACP,SAAS,GACT,eAAe,GACf,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,UAAU,GACV,UAAU,GACV,WAAW,GACX,QAAQ,GACR,UAAU,GACV,WAAW,CAAC;AAEhB;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IACnE,sDAAsD;IACtD,IAAI,EAAE,QAAQ,CAAC;IACf,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AA0PD,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,SAAc,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAiBvF"}