@fragments-sdk/ui 0.12.0 → 0.14.0

package/dist/table.js

@@ -27,11 +27,18 @@ function TableCell({ className, children, ...props }) {
 function TableHeaderCell({ className, scope = "col", children, ...props }) {
   return /* @__PURE__ */ jsx("th", { className: [styles.th, className].filter(Boolean).join(" "), scope, ...props, children: /* @__PURE__ */ jsx("div", { className: styles.headerContent, children }) });
 }
-function TableCaption({ className, hidden: visuallyHidden, children, ...props }) {
+function TableCaption({
+  className,
+  visuallyHidden,
+  hidden,
+  children,
+  ...props
+}) {
+  const useVisuallyHidden = visuallyHidden ?? hidden;
   return /* @__PURE__ */ jsx(
     "caption",
     {
-      className: [visuallyHidden ? styles.captionHidden : styles.caption, className].filter(Boolean).join(" "),
+      className: [useVisuallyHidden ? styles.captionHidden : styles.caption, className].filter(Boolean).join(" "),
       ...props,
       children
     }
@@ -41,6 +48,8 @@ function TableRoot({
   size = "md",
   striped = false,
   bordered = false,
+  wrapperClassName,
+  wrapperProps,
   className,
   children,
   ...htmlProps
@@ -51,7 +60,14 @@ function TableRoot({
     striped && styles.striped,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { className: [styles.wrapper, bordered && styles.bordered].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx("table", { className: tableClasses, ...htmlProps, children }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...wrapperProps,
+      className: [styles.wrapper, bordered && styles.bordered, wrapperProps == null ? void 0 : wrapperProps.className, wrapperClassName].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx("table", { className: tableClasses, ...htmlProps, children })
+    }
+  );
 }
 const Table = Object.assign(TableRoot, {
   Root: TableRoot,

package/dist/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../src/components/Table/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n// Import globals to ensure CSS variables are defined\nimport '../../styles/globals.scss';\nimport styles from './Table.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Size variant */\n  size?: 'sm' | 'md';\n  /** Show alternating row backgrounds */\n  striped?: boolean;\n  /** Wrap table in a bordered container */\n  bordered?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark row as selected */\n  selected?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  children?: React.ReactNode;\n}\n\nexport interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Scope for the header cell */\n  scope?: string;\n  children?: React.ReactNode;\n}\n\nexport interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {\n  /** Visually hide the caption (screen readers only) */\n  hidden?: boolean;\n  children?: React.ReactNode;\n}\n\n// ============================================\n// Sub-components\n// ============================================\n\nfunction TableHead({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {\n  return (\n    <thead className={[styles.thead, className].filter(Boolean).join(' ')} {...props}>\n      {children}\n    </thead>\n  );\n}\n\nfunction TableBody({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {\n  return (\n    <tbody className={[styles.tbody, className].filter(Boolean).join(' ')} {...props}>\n      {children}\n    </tbody>\n  );\n}\n\nfunction TableFooter({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {\n  return (\n    <tfoot className={[styles.tfoot, className].filter(Boolean).join(' ')} {...props}>\n      {children}\n    </tfoot>\n  );\n}\n\nfunction TableRow({ className, selected, children, ...props }: TableRowProps) {\n  return (\n    <tr\n      className={[styles.row, selected && styles.selected, className].filter(Boolean).join(' ')}\n      data-selected={selected || undefined}\n      {...props}\n    >\n      {children}\n    </tr>\n  );\n}\n\nfunction TableCell({ className, children, ...props }: TableCellProps) {\n  return (\n    <td className={[styles.td, className].filter(Boolean).join(' ')} {...props}>\n      {children}\n    </td>\n  );\n}\n\nfunction TableHeaderCell({ className, scope = 'col', children, ...props }: TableHeaderCellProps) {\n  return (\n    <th className={[styles.th, className].filter(Boolean).join(' ')} scope={scope} {...props}>\n      <div className={styles.headerContent}>{children}</div>\n    </th>\n  );\n}\n\nfunction TableCaption({ className, hidden: visuallyHidden, children, ...props }: TableCaptionProps) {\n  return (\n    <caption\n      className={[visuallyHidden ? styles.captionHidden : styles.caption, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {children}\n    </caption>\n  );\n}\n\n// ============================================\n// Root component\n// ============================================\n\nfunction TableRoot({\n  size = 'md',\n  striped = false,\n  bordered = false,\n  className,\n  children,\n  ...htmlProps\n}: TableProps) {\n  const tableClasses = [\n    styles.table,\n    styles[size],\n    striped && styles.striped,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>\n      <table className={tableClasses} {...htmlProps}>\n        {children}\n      </table>\n    </div>\n  );\n}\n\n// ============================================\n// Compound export\n// ============================================\n\nexport const Table = Object.assign(TableRoot, {\n  Root: TableRoot,\n  Head: TableHead,\n  Body: TableBody,\n  Footer: TableFooter,\n  Row: TableRow,\n  Cell: TableCell,\n  HeaderCell: TableHeaderCell,\n  Caption: TableCaption,\n});\n"],"names":[],"mappings":";;;AA+CA,SAAS,UAAU,EAAE,WAAW,UAAU,GAAG,SAAwD;AACnG,6BACG,SAAA,EAAM,WAAW,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OACxE,UACH;AAEJ;AAEA,SAAS,UAAU,EAAE,WAAW,UAAU,GAAG,SAAwD;AACnG,6BACG,SAAA,EAAM,WAAW,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OACxE,UACH;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,SAAwD;AACrG,6BACG,SAAA,EAAM,WAAW,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OACxE,UACH;AAEJ;AAEA,SAAS,SAAS,EAAE,WAAW,UAAU,UAAU,GAAG,SAAwB;AAC5E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,OAAO,KAAK,YAAY,OAAO,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACxF,iBAAe,YAAY;AAAA,MAC1B,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,UAAU,EAAE,WAAW,UAAU,GAAG,SAAyB;AACpE,6BACG,MAAA,EAAG,WAAW,CAAC,OAAO,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OAClE,UACH;AAEJ;AAEA,SAAS,gBAAgB,EAAE,WAAW,QAAQ,OAAO,UAAU,GAAG,SAA+B;AAC/F,SACE,oBAAC,QAAG,WAAW,CAAC,OAAO,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,OAAe,GAAG,OACjF,UAAA,oBAAC,SAAI,WAAW,OAAO,eAAgB,SAAA,CAAS,EAAA,CAClD;AAEJ;AAEA,SAAS,aAAa,EAAE,WAAW,QAAQ,gBAAgB,UAAU,GAAG,SAA4B;AAClG,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,iBAAiB,OAAO,gBAAgB,OAAO,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACtG,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAMA,SAAS,UAAU;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,OAAO,IAAI;AAAA,IACX,WAAW,OAAO;AAAA,IAClB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,oBAAC,SAAI,WAAW,CAAC,OAAO,SAAS,YAAY,OAAO,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACpF,UAAA,oBAAC,SAAA,EAAM,WAAW,cAAe,GAAG,WACjC,SAAA,CACH,EAAA,CACF;AAEJ;AAMO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;"}
+{"version":3,"file":"table.js","sources":["../src/components/Table/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n// Import globals to ensure CSS variables are defined\nimport '../../styles/globals.scss';\nimport styles from './Table.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Size variant */\n  size?: 'sm' | 'md';\n  /** Show alternating row backgrounds */\n  striped?: boolean;\n  /** Wrap table in a bordered container */\n  bordered?: boolean;\n  /** Class applied to the outer wrapper element */\n  wrapperClassName?: string;\n  /** Props applied to the outer wrapper element */\n  wrapperProps?: React.HTMLAttributes<HTMLDivElement>;\n  children?: React.ReactNode;\n}\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark row as selected */\n  selected?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  children?: React.ReactNode;\n}\n\nexport interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableHeaderCellElement> {\n  /** Scope for the header cell */\n  scope?: string;\n  children?: React.ReactNode;\n}\n\nexport interface TableCaptionProps extends Omit<React.HTMLAttributes<HTMLTableCaptionElement>, 'hidden'> {\n  /** Visually hide the caption (screen readers only) */\n  visuallyHidden?: boolean;\n  /** @deprecated Use visuallyHidden */\n  hidden?: boolean;\n  children?: React.ReactNode;\n}\n\n// ============================================\n// Sub-components\n// ============================================\n\nfunction TableHead({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {\n  return (\n    <thead className={[styles.thead, className].filter(Boolean).join(' ')} {...props}>\n      {children}\n    </thead>\n  );\n}\n\nfunction TableBody({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {\n  return (\n    <tbody className={[styles.tbody, className].filter(Boolean).join(' ')} {...props}>\n      {children}\n    </tbody>\n  );\n}\n\nfunction TableFooter({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {\n  return (\n    <tfoot className={[styles.tfoot, className].filter(Boolean).join(' ')} {...props}>\n      {children}\n    </tfoot>\n  );\n}\n\nfunction TableRow({ className, selected, children, ...props }: TableRowProps) {\n  return (\n    <tr\n      className={[styles.row, selected && styles.selected, className].filter(Boolean).join(' ')}\n      data-selected={selected || undefined}\n      {...props}\n    >\n      {children}\n    </tr>\n  );\n}\n\nfunction TableCell({ className, children, ...props }: TableCellProps) {\n  return (\n    <td className={[styles.td, className].filter(Boolean).join(' ')} {...props}>\n      {children}\n    </td>\n  );\n}\n\nfunction TableHeaderCell({ className, scope = 'col', children, ...props }: TableHeaderCellProps) {\n  return (\n    <th className={[styles.th, className].filter(Boolean).join(' ')} scope={scope} {...props}>\n      <div className={styles.headerContent}>{children}</div>\n    </th>\n  );\n}\n\nfunction TableCaption({\n  className,\n  visuallyHidden,\n  hidden,\n  children,\n  ...props\n}: TableCaptionProps) {\n  const useVisuallyHidden = visuallyHidden ?? hidden;\n  return (\n    <caption\n      className={[useVisuallyHidden ? styles.captionHidden : styles.caption, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {children}\n    </caption>\n  );\n}\n\n// ============================================\n// Root component\n// ============================================\n\nfunction TableRoot({\n  size = 'md',\n  striped = false,\n  bordered = false,\n  wrapperClassName,\n  wrapperProps,\n  className,\n  children,\n  ...htmlProps\n}: TableProps) {\n  const tableClasses = [\n    styles.table,\n    styles[size],\n    striped && styles.striped,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      {...wrapperProps}\n      className={[styles.wrapper, bordered && styles.bordered, wrapperProps?.className, wrapperClassName].filter(Boolean).join(' ')}\n    >\n      <table className={tableClasses} {...htmlProps}>\n        {children}\n      </table>\n    </div>\n  );\n}\n\n// ============================================\n// Compound export\n// ============================================\n\nexport const Table = Object.assign(TableRoot, {\n  Root: TableRoot,\n  Head: TableHead,\n  Body: TableBody,\n  Footer: TableFooter,\n  Row: TableRow,\n  Cell: TableCell,\n  HeaderCell: TableHeaderCell,\n  Caption: TableCaption,\n});\n"],"names":[],"mappings":";;;AAqDA,SAAS,UAAU,EAAE,WAAW,UAAU,GAAG,SAAwD;AACnG,6BACG,SAAA,EAAM,WAAW,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OACxE,UACH;AAEJ;AAEA,SAAS,UAAU,EAAE,WAAW,UAAU,GAAG,SAAwD;AACnG,6BACG,SAAA,EAAM,WAAW,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OACxE,UACH;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,SAAwD;AACrG,6BACG,SAAA,EAAM,WAAW,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OACxE,UACH;AAEJ;AAEA,SAAS,SAAS,EAAE,WAAW,UAAU,UAAU,GAAG,SAAwB;AAC5E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,OAAO,KAAK,YAAY,OAAO,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACxF,iBAAe,YAAY;AAAA,MAC1B,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,UAAU,EAAE,WAAW,UAAU,GAAG,SAAyB;AACpE,6BACG,MAAA,EAAG,WAAW,CAAC,OAAO,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OAClE,UACH;AAEJ;AAEA,SAAS,gBAAgB,EAAE,WAAW,QAAQ,OAAO,UAAU,GAAG,SAA+B;AAC/F,SACE,oBAAC,QAAG,WAAW,CAAC,OAAO,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,OAAe,GAAG,OACjF,UAAA,oBAAC,SAAI,WAAW,OAAO,eAAgB,SAAA,CAAS,EAAA,CAClD;AAEJ;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,oBAAoB,kBAAkB;AAC5C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,oBAAoB,OAAO,gBAAgB,OAAO,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACzG,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAMA,SAAS,UAAU;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,OAAO,IAAI;AAAA,IACX,WAAW,OAAO;AAAA,IAClB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,OAAO,SAAS,YAAY,OAAO,UAAU,6CAAc,WAAW,gBAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAE5H,8BAAC,SAAA,EAAM,WAAW,cAAe,GAAG,WACjC,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAMO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;"}