@allxsmith/bestax-bulma 5.54.1 → 5.55.0

package/dist/esm/elements/ColorSwatch.js

@@ -0,0 +1,49 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { warnOnce } from '../helpers/devWarnings.js';
+
+const validColorSwatchSizes = ['small', 'medium', 'large'];
+/**
+ * The `ColorSwatch` component shows a color as a small chip, named by its label or by the color itself.
+ *
+ * It's an image to assistive tech, so the color is always there in words.
+ * In forced colors it keeps its color, edged in the system's text color.
+ *
+ * @function
+ * @param {ColorSwatchProps} props - Props for the ColorSwatch component.
+ * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the `<span>`.
+ * @returns {JSX.Element} The rendered swatch.
+ *
+ * @example
+ * <ColorSwatch color="#1e6b99" label="Brand blue" />
+ */
+const ColorSwatch = forwardRef(({ className, textColor, color, label, size, isRounded, children, style, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        ...props,
+    });
+    const unnamed = /^\s*var\(/i.test(color) &&
+        !label &&
+        !rest['aria-label'] &&
+        !rest['aria-labelledby'] &&
+        !rest['aria-hidden'];
+    useEffect(() => {
+        if (unnamed) {
+            warnOnce('ColorSwatch:unnamed-var', '[bestax-bulma] <ColorSwatch> shows a CSS variable with no label, ' +
+                'so a screen reader reads the var() as its name. Pass label, ' +
+                'such as "Primary".');
+        }
+    }, [unnamed]);
+    const swatchClass = usePrefixedClassNames('color-swatch', {
+        [`is-${size}`]: !!size && validColorSwatchSizes.includes(size),
+        'is-rounded': !!isRounded,
+    });
+    return (jsx("span", { ref: ref, className: classNames(swatchClass, bulmaHelperClasses, className), style: { ...style, ['--color-swatch-color']: color }, ...rest, role: "img", "aria-label": rest['aria-label'] || label || color, children: children !== undefined && children !== null && (jsx("span", { "aria-hidden": "true", children: children })) }));
+});
+ColorSwatch.displayName = 'ColorSwatch';
+
+export { ColorSwatch };
+//# sourceMappingURL=ColorSwatch.js.map

package/dist/esm/elements/ColorSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.js","sources":["../../../src/elements/ColorSwatch.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnOnce } from '../helpers/devWarnings';\n\nconst validColorSwatchSizes = ['small', 'medium', 'large'] as const;\n\n/**\n * Props for the ColorSwatch component. The helper props, the other\n * attributes and the `ref` land on its `<span>`.\n *\n * @extraProp {React.Ref<HTMLSpanElement>} [ref] - Ref forwarded to the `<span>`.\n * @extraProp {string} [aria-label] - Names the swatch in place of `label`.\n * @extraProp {boolean} [aria-hidden] - Hides the swatch from assistive tech, for one beside text that already names the color.\n */\nexport interface ColorSwatchProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'role'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * The color it shows: any CSS color, such as `#1e6b99`,\n   * `hsl(202, 67%, 36%)` or `var(--bulma-primary)`. A see-through color\n   * shows a checkerboard behind it.\n   */\n  color: string;\n  /**\n   * What the color is called, such as \"Brand blue\", read as the swatch's\n   * name in place of `color` as written. A `var()` reads as nothing useful,\n   * so a development build warns when one has no name.\n   */\n  label?: string;\n  /** The swatch's size. */\n  size?: (typeof validColorSwatchSizes)[number];\n  /** Draws a circle in place of a rounded square. */\n  isRounded?: boolean;\n  /**\n   * Drawn on the swatch, such as an icon. It's hidden from assistive tech,\n   * since the swatch is an image named by its label.\n   */\n  children?: React.ReactNode;\n  /** Text color helper, the color of anything drawn on the swatch. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n}\n\n/**\n * The `ColorSwatch` component shows a color as a small chip, named by its label or by the color itself.\n *\n * It's an image to assistive tech, so the color is always there in words.\n * In forced colors it keeps its color, edged in the system's text color.\n *\n * @function\n * @param {ColorSwatchProps} props - Props for the ColorSwatch component.\n * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the `<span>`.\n * @returns {JSX.Element} The rendered swatch.\n *\n * @example\n * <ColorSwatch color=\"#1e6b99\" label=\"Brand blue\" />\n */\nexport const ColorSwatch = forwardRef<HTMLSpanElement, ColorSwatchProps>(\n  (\n    {\n      className,\n      textColor,\n      color,\n      label,\n      size,\n      isRounded,\n      children,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    const unnamed =\n      /^\\s*var\\(/i.test(color) &&\n      !label &&\n      !rest['aria-label'] &&\n      !rest['aria-labelledby'] &&\n      !rest['aria-hidden'];\n    useEffect(() => {\n      if (unnamed) {\n        warnOnce(\n          'ColorSwatch:unnamed-var',\n          '[bestax-bulma] <ColorSwatch> shows a CSS variable with no label, ' +\n            'so a screen reader reads the var() as its name. Pass label, ' +\n            'such as \"Primary\".'\n        );\n      }\n    }, [unnamed]);\n\n    const swatchClass = usePrefixedClassNames('color-swatch', {\n      [`is-${size}`]:\n        !!size && (validColorSwatchSizes as readonly string[]).includes(size),\n      'is-rounded': !!isRounded,\n    });\n\n    return (\n      <span\n        ref={ref}\n        className={classNames(swatchClass, bulmaHelperClasses, className)}\n        style={{ ...style, ['--color-swatch-color' as string]: color }}\n        {...rest}\n        role=\"img\"\n        aria-label={rest['aria-label'] || label || color}\n      >\n        {children !== undefined && children !== null && (\n          <span aria-hidden=\"true\">{children}</span>\n        )}\n      </span>\n    );\n  }\n);\n\nColorSwatch.displayName = 'ColorSwatch';\n\nexport default ColorSwatch;\n"],"names":["_jsx"],"mappings":";;;;;;;AASA,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU;AAyCnE;;;;;;;;;;;;;AAaG;AACI,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EACE,SAAS,EACT,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;AAEF,IAAA,MAAM,OAAO,GACX,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,CAAC,KAAK;QACN,CAAC,IAAI,CAAC,YAAY,CAAC;QACnB,CAAC,IAAI,CAAC,iBAAiB,CAAC;AACxB,QAAA,CAAC,IAAI,CAAC,aAAa,CAAC;IACtB,SAAS,CAAC,MAAK;QACb,IAAI,OAAO,EAAE;YACX,QAAQ,CACN,yBAAyB,EACzB,mEAAmE;gBACjE,8DAA8D;AAC9D,gBAAA,oBAAoB,CACvB;QACH;AACF,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,cAAc,EAAE;AACxD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GACX,CAAC,CAAC,IAAI,IAAK,qBAA2C,CAAC,QAAQ,CAAC,IAAI,CAAC;QACvE,YAAY,EAAE,CAAC,CAAC,SAAS;AAC1B,KAAA,CAAC;AAEF,IAAA,QACEA,GAAA,CAAA,MAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,EACjE,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,CAAC,sBAAgC,GAAG,KAAK,EAAE,EAAA,GAC1D,IAAI,EACR,IAAI,EAAC,KAAK,EAAA,YAAA,EACE,IAAI,CAAC,YAAY,CAAC,IAAI,KAAK,IAAI,KAAK,EAAA,QAAA,EAE/C,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,KAC1CA,GAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAQ,CAC3C,EAAA,CACI;AAEX,CAAC;AAGH,WAAW,CAAC,WAAW,GAAG,aAAa;;"}

package/dist/esm/elements/RingProgress.js

@@ -20,7 +20,7 @@ const validRingProgressColors = [
     'white',
 ];
 const validRingProgressSizes = ['small', 'medium', 'large'];
-const clamp$2 = (value, low, high) => Math.min(Math.max(value, low), high);
+const clamp$4 = (value, low, high) => Math.min(Math.max(value, low), high);
 /**
  * The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle.
  *
@@ -58,7 +58,7 @@ const RingProgress = forwardRef(({ className, textColor, bgColor, value, max = 1
         }
     }, [named, mixed]);
     const total = max > 0 ? max : 100;
-    const share = (part) => (clamp$2(part, 0, total) / total) * 100;
+    const share = (part) => (clamp$4(part, 0, total) / total) * 100;
     // Each arc starts where the one before ended, and the last stops at the
     // top, so a total over max fills the ring and no more.
     const arcs = [];
@@ -104,7 +104,7 @@ const RingProgress = forwardRef(({ className, textColor, bgColor, value, max = 1
         }
         : {
             role: isMeter ? 'meter' : 'progressbar',
-            'aria-valuenow': clamp$2(value ?? 0, 0, total),
+            'aria-valuenow': clamp$4(value ?? 0, 0, total),
             'aria-valuemin': 0,
             'aria-valuemax': total,
             'aria-label': label || rest['aria-label'],

package/dist/esm/elements/Td.js

@@ -39,17 +39,19 @@ const validTableColors = [
 /**
  * Td component for rendering a styled Bulma table cell.
  *
- * Supports alignment, Bulma color modifiers, and helper classes for additional styling.
+ * Supports alignment, narrow and vertically centered cells, Bulma color modifiers, and helper classes for additional styling.
  *
  * @function
  * @param {TdProps} props - Props for the Td component.
  * @returns {JSX.Element} The rendered table cell element.
  * @see {@link https://bulma.io/documentation/elements/table/#table-body | Bulma Table documentation}
  */
-const Td = ({ className, isAligned, color, children, ...props }) => {
+const Td = ({ className, isAligned, isNarrow, isVcentered, color, children, ...props }) => {
     const bulmaClasses = usePrefixedClassNames('', {
         [`has-text-${isAligned}`]: isAligned && validTableAlignments.includes(isAligned),
         [`is-${color}`]: color && validTableColors.includes(color),
+        'is-narrow': isNarrow,
+        'is-vcentered': isVcentered,
     });
     /**
      * Generates Bulma helper classes and separates out remaining props.

package/dist/esm/elements/Td.js.map

@@ -1 +1 @@
-{"version":3,"file":"Td.js","sources":["../../../src/elements/Td.tsx"],"sourcesContent":["/**\n * @group Table\n */\nimport React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { TableAlignment, validTableAlignments } from './tableAlignment';\n\n/**\n * The values the table `color` prop accepts, as a readonly tuple.\n *\n * `TableColor` is typed from it, and `Tr`, `Th` and `Td` all take a\n * `TableColor`, so the tuple and those props list the same values. Map over\n * it to build a color picker, or check a value that arrives at runtime before\n * passing it in: the components add no color class for a value outside the\n * tuple.\n *\n * @example\n * import { Tr, Td, validTableColors } from '@allxsmith/bestax-bulma';\n *\n * <Tr>\n *   {validTableColors.map(color => (\n *     <Td key={color} color={color}>\n *       {color}\n *     </Td>\n *   ))}\n * </Tr>;\n */\nexport const validTableColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'black',\n  'dark',\n  'light',\n  'white',\n] as const;\n\n/**\n * The color values `Tr`, `Th` and `Td` accept, typed from `validTableColors`.\n */\nexport type TableColor = (typeof validTableColors)[number];\n\n/**\n * Props for the Td component.\n */\nexport interface TdProps\n  extends\n    Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'color'>,\n    Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text alignment for the table cell ('left', 'right', 'centered'). */\n  isAligned?: TableAlignment;\n  /** Bulma color modifier for the table cell. */\n  color?: TableColor;\n  /** Table cell content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Td component for rendering a styled Bulma table cell.\n *\n * Supports alignment, Bulma color modifiers, and helper classes for additional styling.\n *\n * @function\n * @param {TdProps} props - Props for the Td component.\n * @returns {JSX.Element} The rendered table cell element.\n * @see {@link https://bulma.io/documentation/elements/table/#table-body | Bulma Table documentation}\n */\nexport const Td: React.FC<TdProps> = ({\n  className,\n  isAligned,\n  color,\n  children,\n  ...props\n}) => {\n  const bulmaClasses = usePrefixedClassNames('', {\n    [`has-text-${isAligned}`]:\n      isAligned && validTableAlignments.includes(isAligned),\n    [`is-${color}`]: color && validTableColors.includes(color),\n  });\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n  const tdClasses = classNames(bulmaClasses, className, bulmaHelperClasses);\n\n  return (\n    <td className={tdClasses || undefined} {...rest}>\n      {children}\n    </td>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAQA;;;;;;;;;;;;;;;;;;;AAmBG;AACI,MAAM,gBAAgB,GAAG;IAC9B,SAAS;IACT,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;IACR,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;;AAyBT;;;;;;;;;AASG;AACI,MAAM,EAAE,GAAsB,CAAC,EACpC,SAAS,EACT,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,EAAE,EAAE;AAC7C,QAAA,CAAC,CAAA,SAAA,EAAY,SAAS,CAAA,CAAE,GACtB,SAAS,IAAI,oBAAoB,CAAC,QAAQ,CAAC,SAAS,CAAC;AACvD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,KAAA,CAAC;AAEF;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IAElE,MAAM,SAAS,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE,kBAAkB,CAAC;AAEzE,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,SAAS,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAC5C,QAAQ,EAAA,CACN;AAET;;"}
+{"version":3,"file":"Td.js","sources":["../../../src/elements/Td.tsx"],"sourcesContent":["/**\n * @group Table\n */\nimport React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { TableAlignment, validTableAlignments } from './tableAlignment';\n\n/**\n * The values the table `color` prop accepts, as a readonly tuple.\n *\n * `TableColor` is typed from it, and `Tr`, `Th` and `Td` all take a\n * `TableColor`, so the tuple and those props list the same values. Map over\n * it to build a color picker, or check a value that arrives at runtime before\n * passing it in: the components add no color class for a value outside the\n * tuple.\n *\n * @example\n * import { Tr, Td, validTableColors } from '@allxsmith/bestax-bulma';\n *\n * <Tr>\n *   {validTableColors.map(color => (\n *     <Td key={color} color={color}>\n *       {color}\n *     </Td>\n *   ))}\n * </Tr>;\n */\nexport const validTableColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'black',\n  'dark',\n  'light',\n  'white',\n] as const;\n\n/**\n * The color values `Tr`, `Th` and `Td` accept, typed from `validTableColors`.\n */\nexport type TableColor = (typeof validTableColors)[number];\n\n/**\n * Props for the Td component.\n */\nexport interface TdProps\n  extends\n    Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'color'>,\n    Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text alignment for the table cell ('left', 'right', 'centered'). */\n  isAligned?: TableAlignment;\n  /**\n   * Shrinks the cell to its content and keeps that on one line (Bulma's\n   * `is-narrow`), as for a column of checkboxes or actions. Not the table's\n   * own `isNarrow`, which tightens every cell's padding.\n   */\n  isNarrow?: boolean;\n  /** Centers the content vertically (Bulma's `is-vcentered`). Cells sit at the top otherwise. */\n  isVcentered?: boolean;\n  /** Bulma color modifier for the table cell. */\n  color?: TableColor;\n  /** Table cell content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Td component for rendering a styled Bulma table cell.\n *\n * Supports alignment, narrow and vertically centered cells, Bulma color modifiers, and helper classes for additional styling.\n *\n * @function\n * @param {TdProps} props - Props for the Td component.\n * @returns {JSX.Element} The rendered table cell element.\n * @see {@link https://bulma.io/documentation/elements/table/#table-body | Bulma Table documentation}\n */\nexport const Td: React.FC<TdProps> = ({\n  className,\n  isAligned,\n  isNarrow,\n  isVcentered,\n  color,\n  children,\n  ...props\n}) => {\n  const bulmaClasses = usePrefixedClassNames('', {\n    [`has-text-${isAligned}`]:\n      isAligned && validTableAlignments.includes(isAligned),\n    [`is-${color}`]: color && validTableColors.includes(color),\n    'is-narrow': isNarrow,\n    'is-vcentered': isVcentered,\n  });\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n  const tdClasses = classNames(bulmaClasses, className, bulmaHelperClasses);\n\n  return (\n    <td className={tdClasses || undefined} {...rest}>\n      {children}\n    </td>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAQA;;;;;;;;;;;;;;;;;;;AAmBG;AACI,MAAM,gBAAgB,GAAG;IAC9B,SAAS;IACT,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;IACR,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;;AAiCT;;;;;;;;;AASG;MACU,EAAE,GAAsB,CAAC,EACpC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,WAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,EAAE,EAAE;AAC7C,QAAA,CAAC,CAAA,SAAA,EAAY,SAAS,CAAA,CAAE,GACtB,SAAS,IAAI,oBAAoB,CAAC,QAAQ,CAAC,SAAS,CAAC;AACvD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC1D,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,cAAc,EAAE,WAAW;AAC5B,KAAA,CAAC;AAEF;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IAElE,MAAM,SAAS,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE,kBAAkB,CAAC;AAEzE,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,SAAS,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAC5C,QAAQ,EAAA,CACN;AAET;;"}

package/dist/esm/elements/Th.js

@@ -8,26 +8,34 @@ import { validTableAlignments } from './tableAlignment.js';
 /**
  * Th component for rendering a styled Bulma table header cell.
  *
- * Supports alignment, width, and color modifiers.
+ * Supports alignment, width, narrow and vertically centered cells, and color modifiers.
  *
  * @function
  * @param {ThProps} props - Props for the Th component.
  * @returns {JSX.Element} The rendered table header cell element.
  * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}
  */
-const Th = ({ className, isAligned, width, color, children, ...props }) => {
+const Th = ({ className, isAligned, isNarrow, isVcentered, width, color, style, children, ...props }) => {
     const bulmaClasses = usePrefixedClassNames('', {
         [`has-text-${isAligned}`]: isAligned && validTableAlignments.includes(isAligned),
         [`is-${color}`]: color && validTableColors.includes(color),
+        'is-narrow': isNarrow,
+        'is-vcentered': isVcentered,
     });
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsx("th", { className: thClasses || undefined, style: width
-            ? { width: typeof width === 'number' ? `${width}px` : width }
-            : undefined, ...rest, children: children }));
+    return (jsx("th", { className: thClasses || undefined, style: 
+        // A `width` key the style leaves undefined isn't a width, so the
+        // prop's stays.
+        width && style?.width === undefined
+            ? {
+                ...style,
+                width: typeof width === 'number' ? `${width}px` : width,
+            }
+            : style, ...rest, children: children }));
 };
 
 export { Th };

package/dist/esm/elements/Th.js.map

@@ -1 +1 @@
-{"version":3,"file":"Th.js","sources":["../../../src/elements/Th.tsx"],"sourcesContent":["/**\n * @group Table\n */\nimport React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { TableColor, validTableColors } from './Td';\nimport { TableAlignment, validTableAlignments } from './tableAlignment';\n\n/**\n * Props for the Th component.\n */\nexport interface ThProps\n  extends\n    Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'color'>,\n    Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text alignment for the header cell ('left', 'right', 'centered'). */\n  isAligned?: TableAlignment;\n  /** Width of the header cell (e.g., '100px' or 100). */\n  width?: string | number;\n  /** Bulma color modifier for the header cell. */\n  color?: TableColor;\n  /** Table header cell content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Th component for rendering a styled Bulma table header cell.\n *\n * Supports alignment, width, and color modifiers.\n *\n * @function\n * @param {ThProps} props - Props for the Th component.\n * @returns {JSX.Element} The rendered table header cell element.\n * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}\n */\nexport const Th: React.FC<ThProps> = ({\n  className,\n  isAligned,\n  width,\n  color,\n  children,\n  ...props\n}) => {\n  const bulmaClasses = usePrefixedClassNames('', {\n    [`has-text-${isAligned}`]:\n      isAligned && validTableAlignments.includes(isAligned),\n    [`is-${color}`]: color && validTableColors.includes(color),\n  });\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n  const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);\n\n  return (\n    <th\n      className={thClasses || undefined}\n      style={\n        width\n          ? { width: typeof width === 'number' ? `${width}px` : width }\n          : undefined\n      }\n      {...rest}\n    >\n      {children}\n    </th>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AA4BA;;;;;;;;;AASG;MACU,EAAE,GAAsB,CAAC,EACpC,SAAS,EACT,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,EAAE,EAAE;AAC7C,QAAA,CAAC,CAAA,SAAA,EAAY,SAAS,CAAA,CAAE,GACtB,SAAS,IAAI,oBAAoB,CAAC,QAAQ,CAAC,SAAS,CAAC;AACvD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,KAAA,CAAC;AAEF;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IAElE,MAAM,SAAS,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE,kBAAkB,CAAC;IAEzE,QACEA,GAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,SAAS,IAAI,SAAS,EACjC,KAAK,EACH;AACE,cAAE,EAAE,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,GAAG,KAAK,CAAA,EAAA,CAAI,GAAG,KAAK;cACzD,SAAS,EAAA,GAEX,IAAI,YAEP,QAAQ,EAAA,CACN;AAET;;"}
+{"version":3,"file":"Th.js","sources":["../../../src/elements/Th.tsx"],"sourcesContent":["/**\n * @group Table\n */\nimport React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { TableColor, validTableColors } from './Td';\nimport { TableAlignment, validTableAlignments } from './tableAlignment';\n\n/**\n * Props for the Th component.\n */\nexport interface ThProps\n  extends\n    Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'color'>,\n    Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text alignment for the header cell ('left', 'right', 'centered'). */\n  isAligned?: TableAlignment;\n  /**\n   * Shrinks the cell to its content and keeps that on one line (Bulma's\n   * `is-narrow`), as for a column of checkboxes or actions. Not the table's\n   * own `isNarrow`, which tightens every cell's padding.\n   */\n  isNarrow?: boolean;\n  /** Centers the content vertically (Bulma's `is-vcentered`). Cells sit at the top otherwise. */\n  isVcentered?: boolean;\n  /**\n   * Width of the header cell (e.g., '100px' or 100), written into its\n   * `style`. A `style` passed as well keeps it, and a `width` that `style`\n   * sets wins.\n   */\n  width?: string | number;\n  /** Bulma color modifier for the header cell. */\n  color?: TableColor;\n  /** Table header cell content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Th component for rendering a styled Bulma table header cell.\n *\n * Supports alignment, width, narrow and vertically centered cells, and color modifiers.\n *\n * @function\n * @param {ThProps} props - Props for the Th component.\n * @returns {JSX.Element} The rendered table header cell element.\n * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}\n */\nexport const Th: React.FC<ThProps> = ({\n  className,\n  isAligned,\n  isNarrow,\n  isVcentered,\n  width,\n  color,\n  style,\n  children,\n  ...props\n}) => {\n  const bulmaClasses = usePrefixedClassNames('', {\n    [`has-text-${isAligned}`]:\n      isAligned && validTableAlignments.includes(isAligned),\n    [`is-${color}`]: color && validTableColors.includes(color),\n    'is-narrow': isNarrow,\n    'is-vcentered': isVcentered,\n  });\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n  const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);\n\n  return (\n    <th\n      className={thClasses || undefined}\n      style={\n        // A `width` key the style leaves undefined isn't a width, so the\n        // prop's stays.\n        width && style?.width === undefined\n          ? {\n              ...style,\n              width: typeof width === 'number' ? `${width}px` : width,\n            }\n          : style\n      }\n      {...rest}\n    >\n      {children}\n    </th>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAwCA;;;;;;;;;AASG;AACI,MAAM,EAAE,GAAsB,CAAC,EACpC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,WAAW,EACX,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,EAAE,EAAE;AAC7C,QAAA,CAAC,CAAA,SAAA,EAAY,SAAS,CAAA,CAAE,GACtB,SAAS,IAAI,oBAAoB,CAAC,QAAQ,CAAC,SAAS,CAAC;AACvD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC1D,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,cAAc,EAAE,WAAW;AAC5B,KAAA,CAAC;AAEF;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IAElE,MAAM,SAAS,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE,kBAAkB,CAAC;IAEzE,QACEA,YACE,SAAS,EAAE,SAAS,IAAI,SAAS,EACjC,KAAK;;;AAGH,QAAA,KAAK,IAAI,KAAK,EAAE,KAAK,KAAK;AACxB,cAAE;AACE,gBAAA,GAAG,KAAK;AACR,gBAAA,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,GAAG,KAAK;AACxD;cACD,KAAK,EAAA,GAEP,IAAI,YAEP,QAAQ,EAAA,CACN;AAET;;"}

package/dist/esm/elements/Tr.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tr.js","sources":["../../../src/elements/Tr.tsx"],"sourcesContent":["/**\n * @group Table\n */\nimport React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { TableColor, validTableColors } from './Td'; // Import TableColor from Td\n\n/**\n * Props for the Tr component.\n */\nexport interface TrProps\n  extends\n    Omit<React.HTMLAttributes<HTMLTableRowElement>, 'color'>,\n    Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Whether the row is selected (adds Bulma's is-selected class). */\n  isSelected?: boolean;\n  /** Bulma color modifier for the table row. */\n  color?: TableColor;\n  /** Table row content (cells). */\n  children?: React.ReactNode;\n}\n\n/**\n * Tr component for rendering a styled Bulma table row.\n *\n * Supports the is-selected modifier and color modifiers.\n *\n * @function\n * @param {TrProps} props - Props for the Tr component.\n * @returns {JSX.Element} The rendered table row element.\n * @see {@link https://bulma.io/documentation/elements/table/#table-row | Bulma Table documentation}\n */\nexport const Tr: React.FC<TrProps> = ({\n  className,\n  isSelected,\n  color,\n  children,\n  ...props\n}) => {\n  const bulmaClasses = usePrefixedClassNames('', {\n    'is-selected': isSelected,\n    [`is-${color}`]: color && validTableColors.includes(color),\n  });\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n  const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);\n\n  return (\n    <tr className={trClasses || undefined} {...rest}>\n      {children}\n    </tr>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAyBA;;;;;;;;;AASG;AACI,MAAM,EAAE,GAAsB,CAAC,EACpC,SAAS,EACT,UAAU,EACV,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,EAAE,EAAE;AAC7C,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,KAAA,CAAC;AAEF;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IAElE,MAAM,SAAS,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE,kBAAkB,CAAC;AAEzE,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,SAAS,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAC5C,QAAQ,EAAA,CACN;AAET;;"}
+{"version":3,"file":"Tr.js","sources":["../../../src/elements/Tr.tsx"],"sourcesContent":["/**\n * @group Table\n */\nimport React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { TableColor, validTableColors } from './Td'; // Import TableColor from Td\n\n/**\n * Props for the Tr component.\n */\nexport interface TrProps\n  extends\n    Omit<React.HTMLAttributes<HTMLTableRowElement>, 'color'>,\n    Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Whether the row is selected (adds Bulma's is-selected class). It's a look\n   * only: it says nothing to assistive tech, so pair it with a checkbox named\n   * for the row when the selection matters. A bestax `Checkbox` placed\n   * straight in one of the row's cells takes the row's text color, so a\n   * checked box shows on the row's fill. One in a menu or a table nested in a\n   * cell, or in a cell with a `color` of its own, keeps its own colors, since\n   * it sits on that surface instead, and so does every one in a row with a\n   * `color`, whose cells paint that color over the fill.\n   */\n  isSelected?: boolean;\n  /** Bulma color modifier for the table row. */\n  color?: TableColor;\n  /** Table row content (cells). */\n  children?: React.ReactNode;\n}\n\n/**\n * Tr component for rendering a styled Bulma table row.\n *\n * Supports the is-selected modifier and color modifiers.\n *\n * @function\n * @param {TrProps} props - Props for the Tr component.\n * @returns {JSX.Element} The rendered table row element.\n * @see {@link https://bulma.io/documentation/elements/table/#table-row | Bulma Table documentation}\n */\nexport const Tr: React.FC<TrProps> = ({\n  className,\n  isSelected,\n  color,\n  children,\n  ...props\n}) => {\n  const bulmaClasses = usePrefixedClassNames('', {\n    'is-selected': isSelected,\n    [`is-${color}`]: color && validTableColors.includes(color),\n  });\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n  const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);\n\n  return (\n    <tr className={trClasses || undefined} {...rest}>\n      {children}\n    </tr>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAkCA;;;;;;;;;AASG;AACI,MAAM,EAAE,GAAsB,CAAC,EACpC,SAAS,EACT,UAAU,EACV,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,EAAE,EAAE;AAC7C,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,KAAA,CAAC;AAEF;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IAElE,MAAM,SAAS,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE,kBAAkB,CAAC;AAEzE,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,SAAS,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAC5C,QAAQ,EAAA,CACN;AAET;;"}