@allxsmith/bestax-bulma 5.43.1 → 5.45.0

package/dist/types/components/Carousel.d.ts

@@ -134,9 +134,31 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * a carousel inside a form is not submitted by picking a slide.
      */
     indicator?: boolean;
-    /** Position indicators inside carousel. */
+    /**
+     * Puts the indicators over the slides instead of below them, at the edge
+     * `indicatorPosition` names. It also turns on the overlay look unless
+     * `overlayControls` says otherwise, so on its own it gives the look made
+     * for photos: light arrows, and light indicators on a dark gradient band.
+     */
     indicatorInside?: boolean;
-    /** Indicator position. Default: 'bottom'. */
+    /**
+     * The overlay look, made for photos. The arrows take the
+     * `--bulma-carousel-overlay-arrow-*` colors, and indicators over the
+     * slides take the `--bulma-carousel-overlay-indicator-*` colors on a dark
+     * gradient band. Indicators below the slides keep their plain colors,
+     * since they sit on the page. It follows `indicatorInside` unless you set
+     * it, so `overlayControls={false}` puts the indicators over the slides
+     * with the plain look, and `overlayControls` alone gives the arrows the
+     * overlay look with the indicators below. While it's on, `arrowColor`
+     * doesn't apply.
+     * @defaultValue indicatorInside
+     */
+    overlayControls?: boolean;
+    /**
+     * The edge of the slides `indicatorInside` puts the indicators on.
+     * Default: 'bottom'. Without `indicatorInside` they sit below the slides
+     * whatever this says, so leave it unset there.
+     */
     indicatorPosition?: 'bottom' | 'top';
     /** Indicator style. Default: 'dots'. */
     indicatorStyle?: 'circles' | 'dots' | 'lines' | 'bars';
@@ -154,7 +176,11 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     iconFeatures?: string | string[];
     /** Show semi-transparent background on arrow buttons. Set to `false` for icon-only arrows. */
     arrowBackground?: boolean;
-    /** Color theme for navigation arrows. */
+    /**
+     * Color theme for navigation arrows. Not applied while the overlay look is
+     * on (see `overlayControls`, which `indicatorInside` turns on), whose
+     * arrows take `--bulma-carousel-overlay-arrow-color`.
+     */
     arrowColor?: 'light' | 'dark';
     /** Accessible label for the carousel region. Default: 'Image carousel'. */
     ariaLabel?: string;

package/dist/types/elements/Td.d.ts

@@ -3,6 +3,7 @@
  */
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { TableAlignment } from './tableAlignment.js';
 /**
  * The values the table `color` prop accepts, as a readonly tuple.
  *
@@ -34,6 +35,8 @@ export type TableColor = (typeof validTableColors)[number];
 export interface TdProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
     /** Additional CSS classes to apply. */
     className?: string;
+    /** Text alignment for the table cell ('left', 'right', 'centered'). */
+    isAligned?: TableAlignment;
     /** Bulma color modifier for the table cell. */
     color?: TableColor;
     /** Table cell content. */
@@ -42,7 +45,7 @@ export interface TdProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElemen
 /**
  * Td component for rendering a styled Bulma table cell.
  *
- * Supports Bulma color modifiers and helper classes for additional styling.
+ * Supports alignment, Bulma color modifiers, and helper classes for additional styling.
  *
  * @function
  * @param {TdProps} props - Props for the Td component.

package/dist/types/elements/Th.d.ts

@@ -4,11 +4,7 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
 import { TableColor } from './Td.js';
-declare const validAlignments: readonly ["left", "right", "centered"];
-/**
- * Valid alignment values for the Th component.
- */
-type TableAlignment = (typeof validAlignments)[number];
+import { TableAlignment } from './tableAlignment.js';
 /**
  * Props for the Th component.
  */
@@ -35,4 +31,3 @@ export interface ThProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElemen
  * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}
  */
 export declare const Th: React.FC<ThProps>;
-export {};

package/dist/types/elements/tableAlignment.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The `isAligned` values `Th` and `Td` accept. Each one writes
+ * `has-text-<value>` on the cell, and a value outside the tuple adds no class.
+ *
+ * One copy, imported by both cells, so a header and its body cells always
+ * take the same values.
+ *
+ * Its own module rather than `Th.tsx` or `Td.tsx` because `src/index.ts`
+ * wildcard-exports those files, and everything published there is public
+ * forever. `iconProps.ts` makes the same call.
+ */
+export declare const validTableAlignments: readonly ["left", "right", "centered"];
+/**
+ * Valid alignment values for the Th and Td components.
+ */
+export type TableAlignment = (typeof validTableAlignments)[number];

package/dist/types/form/Checkbox.d.ts

@@ -47,12 +47,14 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Shows the mixed state, as in a "Select all" box when some of what it
      * covers is checked. It's a look and an announcement only: `checked` is
-     * still the value, and a click still toggles `checked`. A browser clears
-     * the mixed state on a click, so the component sets it again from this
-     * prop after every click and every render. Left unset, the component
-     * doesn't touch it, and once it has set it, going back to unset clears it
-     * once and hands it back. It has no HTML attribute, so server-rendered
-     * markup can't carry it, and a mixed box renders unmixed until hydration.
+     * still the value, and a click still toggles `checked`. Set to `true` or
+     * `false`, it's controlled: a browser clears the mixed state on a click,
+     * so the component sets it again from this prop after every click and
+     * every render. Unset isn't `false`. The component leaves the input's own
+     * `indeterminate` property alone, so a ref can set it, and going from set
+     * to unset clears it once and hands it back. It has no HTML attribute, so
+     * server-rendered markup can't carry it, and a mixed box renders unmixed
+     * until hydration.
      */
     indeterminate?: boolean;
     /**

package/dist/types-cjs/components/Carousel.d.ts

@@ -134,9 +134,31 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * a carousel inside a form is not submitted by picking a slide.
      */
     indicator?: boolean;
-    /** Position indicators inside carousel. */
+    /**
+     * Puts the indicators over the slides instead of below them, at the edge
+     * `indicatorPosition` names. It also turns on the overlay look unless
+     * `overlayControls` says otherwise, so on its own it gives the look made
+     * for photos: light arrows, and light indicators on a dark gradient band.
+     */
     indicatorInside?: boolean;
-    /** Indicator position. Default: 'bottom'. */
+    /**
+     * The overlay look, made for photos. The arrows take the
+     * `--bulma-carousel-overlay-arrow-*` colors, and indicators over the
+     * slides take the `--bulma-carousel-overlay-indicator-*` colors on a dark
+     * gradient band. Indicators below the slides keep their plain colors,
+     * since they sit on the page. It follows `indicatorInside` unless you set
+     * it, so `overlayControls={false}` puts the indicators over the slides
+     * with the plain look, and `overlayControls` alone gives the arrows the
+     * overlay look with the indicators below. While it's on, `arrowColor`
+     * doesn't apply.
+     * @defaultValue indicatorInside
+     */
+    overlayControls?: boolean;
+    /**
+     * The edge of the slides `indicatorInside` puts the indicators on.
+     * Default: 'bottom'. Without `indicatorInside` they sit below the slides
+     * whatever this says, so leave it unset there.
+     */
     indicatorPosition?: 'bottom' | 'top';
     /** Indicator style. Default: 'dots'. */
     indicatorStyle?: 'circles' | 'dots' | 'lines' | 'bars';
@@ -154,7 +176,11 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     iconFeatures?: string | string[];
     /** Show semi-transparent background on arrow buttons. Set to `false` for icon-only arrows. */
     arrowBackground?: boolean;
-    /** Color theme for navigation arrows. */
+    /**
+     * Color theme for navigation arrows. Not applied while the overlay look is
+     * on (see `overlayControls`, which `indicatorInside` turns on), whose
+     * arrows take `--bulma-carousel-overlay-arrow-color`.
+     */
     arrowColor?: 'light' | 'dark';
     /** Accessible label for the carousel region. Default: 'Image carousel'. */
     ariaLabel?: string;

package/dist/types-cjs/elements/Td.d.ts

@@ -3,6 +3,7 @@
  */
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { TableAlignment } from './tableAlignment.js';
 /**
  * The values the table `color` prop accepts, as a readonly tuple.
  *
@@ -34,6 +35,8 @@ export type TableColor = (typeof validTableColors)[number];
 export interface TdProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
     /** Additional CSS classes to apply. */
     className?: string;
+    /** Text alignment for the table cell ('left', 'right', 'centered'). */
+    isAligned?: TableAlignment;
     /** Bulma color modifier for the table cell. */
     color?: TableColor;
     /** Table cell content. */
@@ -42,7 +45,7 @@ export interface TdProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElemen
 /**
  * Td component for rendering a styled Bulma table cell.
  *
- * Supports Bulma color modifiers and helper classes for additional styling.
+ * Supports alignment, Bulma color modifiers, and helper classes for additional styling.
  *
  * @function
  * @param {TdProps} props - Props for the Td component.

package/dist/types-cjs/elements/Th.d.ts

@@ -4,11 +4,7 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
 import { TableColor } from './Td.js';
-declare const validAlignments: readonly ["left", "right", "centered"];
-/**
- * Valid alignment values for the Th component.
- */
-type TableAlignment = (typeof validAlignments)[number];
+import { TableAlignment } from './tableAlignment.js';
 /**
  * Props for the Th component.
  */
@@ -35,4 +31,3 @@ export interface ThProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElemen
  * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}
  */
 export declare const Th: React.FC<ThProps>;
-export {};

package/dist/types-cjs/elements/tableAlignment.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The `isAligned` values `Th` and `Td` accept. Each one writes
+ * `has-text-<value>` on the cell, and a value outside the tuple adds no class.
+ *
+ * One copy, imported by both cells, so a header and its body cells always
+ * take the same values.
+ *
+ * Its own module rather than `Th.tsx` or `Td.tsx` because `src/index.ts`
+ * wildcard-exports those files, and everything published there is public
+ * forever. `iconProps.ts` makes the same call.
+ */
+export declare const validTableAlignments: readonly ["left", "right", "centered"];
+/**
+ * Valid alignment values for the Th and Td components.
+ */
+export type TableAlignment = (typeof validTableAlignments)[number];

package/dist/types-cjs/form/Checkbox.d.ts

@@ -47,12 +47,14 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Shows the mixed state, as in a "Select all" box when some of what it
      * covers is checked. It's a look and an announcement only: `checked` is
-     * still the value, and a click still toggles `checked`. A browser clears
-     * the mixed state on a click, so the component sets it again from this
-     * prop after every click and every render. Left unset, the component
-     * doesn't touch it, and once it has set it, going back to unset clears it
-     * once and hands it back. It has no HTML attribute, so server-rendered
-     * markup can't carry it, and a mixed box renders unmixed until hydration.
+     * still the value, and a click still toggles `checked`. Set to `true` or
+     * `false`, it's controlled: a browser clears the mixed state on a click,
+     * so the component sets it again from this prop after every click and
+     * every render. Unset isn't `false`. The component leaves the input's own
+     * `indeterminate` property alone, so a ref can set it, and going from set
+     * to unset clears it once and hands it back. It has no HTML attribute, so
+     * server-rendered markup can't carry it, and a mixed box renders unmixed
+     * until hydration.
      */
     indeterminate?: boolean;
     /**