@allxsmith/bestax-bulma 5.51.0 → 5.53.0

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const radioCardColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Props for the RadioCard component.
+ *
+ * @helperProps Helper props go on the outer `<label>`, the `.card`, with
+ * `className`. The other attributes go on the `<input>`.
+ * @extraProp {string} [name] - The form field name, which the cards of one choice share, so the arrow keys move between them. Inside `Radios`, the group's `name` when this is unset.
+ * @extraProp {string} [value] - What a form sends when this card is the one picked. Inside a `Radios` group that takes `value`, `defaultValue` or `onChange`, the card is checked while the group's value is this.
+ */
+export interface RadioCardProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color' | 'title'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /**
+     * What the option is, such as "Express". It names the radio, so a screen
+     * reader says it with the state and its place in the group. Without it,
+     * the card's whole text names the radio, as a label's text does.
+     */
+    title?: React.ReactNode;
+    /**
+     * A line or two about the option, read after the name and the state. It's
+     * the radio's description when `title`, `aria-label` or `aria-labelledby`
+     * names it. Without one of those it's part of the name already, so it
+     * isn't read twice.
+     */
+    description?: React.ReactNode;
+    /**
+     * Anything else in the card, after the description, such as a price. A
+     * label holds phrasing content only, so spans, images and links: a link
+     * works and doesn't pick the card, but a button or another input can't go
+     * inside a label at all. It isn't read when the radio takes focus, so put
+     * what a screen reader should hear in `title` and `description`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Shows the radio at the start of the card. Without it, the card's edge
+     * alone shows the selection, and it's thicker when picked, so the
+     * selection never rests on color.
+     */
+    hasIndicator?: boolean;
+    /** The color of the radio and of a picked card's edge. */
+    color?: (typeof radioCardColors)[number];
+    /**
+     * Text color helper, on the card. The title and the children take it, and
+     * the description keeps its own color.
+     */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Whether the card is disabled. A disabled card dims, takes no clicks, and the arrow keys skip it. */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes, on the outer `<label>`, the card. That's the
+     * element that declares the `--bulma-radio-card-*` variables, and Bulma's
+     * `--bulma-card-*` ones, so a class is how to set one: `style` and the
+     * other input attributes go to the `<input>`. Name `.radio-card` beside
+     * your class in the selector, so it beats the card's own declaration
+     * whatever order the stylesheets load in. A `color` prop declares the
+     * active color again on `.radio-card.is-<color>`, which ties that
+     * selector, so leave `color` unset when a class sets it.
+     */
+    className?: string;
+}
+/**
+ * The `RadioCard` component is a radio button drawn as a card, with a title and a description, picked wherever you click it.
+ *
+ * It's a `<label>` around a real radio, so it sends its `value` with a form,
+ * and the cards that share a `name` are one choice the arrow keys move
+ * through. The title names the radio and the description describes it.
+ * Inside `Radios` it takes the group's name and selection, as `Radio` does.
+ *
+ * @function
+ * @param {RadioCardProps} props - Props for the RadioCard component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The rendered card.
+ *
+ * @example
+ * <Radios label="Shipping" name="shipping" defaultValue="standard">
+ *   <RadioCard value="standard" title="Standard" description="Arrives in 4 to 6 days." />
+ *   <RadioCard value="express" title="Express" description="Arrives tomorrow." />
+ * </Radios>
+ */
+export declare const RadioCard: React.ForwardRefExoticComponent<RadioCardProps & React.RefAttributes<HTMLInputElement>>;
+export default RadioCard;

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

@@ -30,6 +30,19 @@ export interface RadiosProps extends Omit<BulmaClassesProps, 'color'>, FormField
     onChange?: (value: string) => void;
     /** Radio elements to render in the group. */
     children: React.ReactNode;
+    /**
+     * The element the group renders as. With `fieldset` it's a native
+     * `<fieldset>` that keeps `role="radiogroup"`. Where the group renders a
+     * `Field` of its own, that `Field` is the `<fieldset>` and the `label` is
+     * its `<legend>`, in the label column when `horizontal`, so the legend names
+     * the group with no ids to wire. Your other attributes then go on the
+     * `<fieldset>`, while `className` and the helper props stay on the box that
+     * lays out the radios. Inside an outer `Field` there's no legend: the group
+     * element itself is the `<fieldset>`, named by that `Field`'s label as
+     * before. `div`, the default, renders the group as it always has.
+     * @defaultValue 'div'
+     */
+    as?: 'div' | 'fieldset';
 }
 export declare const Radios: React.FC<RadiosProps> & {
     Radio: React.ForwardRefExoticComponent<import("./Radio.js").RadioProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -42,7 +42,11 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
      * keeps what the format leaves out, such as seconds and the date.
      */
     parse?: (s: string) => Date | null;
-    /** BCP-47 locale tag for Intl formatting. */
+    /**
+     * BCP-47 locale tag for Intl formatting. Unset, it is the `locale` of a
+     * `LocaleProvider` around the picker, and with neither, `Intl` uses the
+     * runtime's own locale.
+     */
     locale?: string;
     /** Render the spinner inline (no popover). */
     inline?: boolean;

package/dist/types-cjs/form/_pickerInternals/PickerPopover.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type PortalLocale } from '../../helpers/LocaleProvider.js';
 import { PickerPosition } from './pickerTypes.js';
 export interface PickerPopoverProps {
     isOpen: boolean;
@@ -29,6 +30,11 @@ export interface PickerPopoverProps {
      * nothing matches, or the match can't take focus, the first tab stop does.
      */
     initialFocusSelector?: string;
+    /**
+     * The `dir` and `lang` the panel carries when it portals, in place of a
+     * `LocaleProvider`'s: the picker's own, from `usePickerLocaleScope`.
+     */
+    localeScope?: PortalLocale;
 }
 export declare const PickerPopover: React.FC<PickerPopoverProps>;
 export default PickerPopover;

package/dist/types-cjs/form/_pickerInternals/useLocaleDefaults.d.ts

@@ -0,0 +1,49 @@
+import { type PortalLocale } from '../../helpers/LocaleProvider.js';
+import type { DayOfWeek } from './pickerTypes.js';
+/**
+ * A picker's locale: its own `locale`, else the one a `LocaleProvider` around
+ * it sets, else `undefined`, which leaves `Intl` to use the runtime's.
+ */
+export declare function usePickerLocale(own: string | undefined): string | undefined;
+/** Where a picker's own language and direction go, inside a `LocaleProvider`. */
+export interface PickerLocaleScope {
+    /**
+     * The `lang` and `dir` for the picker's root, so what renders inside it,
+     * an inline calendar or a popover in place, follows them. Empty unless the
+     * picker has a `locale` of its own.
+     */
+    rootAttrs: {
+        lang?: string;
+        dir?: string;
+    };
+    /** What its portaled panel carries; unset outside a provider. */
+    panel?: PortalLocale;
+}
+/**
+ * A picker's language and direction inside a `LocaleProvider`, by the rule a
+ * nested provider follows: its `lang` is its own `locale`, else the
+ * provider's, and its `dir` is the `dir` passed to it, else its own locale's
+ * direction when it has one, else the provider's. Outside a provider it
+ * changes nothing. A `locale` `Intl` refuses counts as none here, since the
+ * picker's own formatting reports it.
+ */
+export declare function usePickerLocaleScope(ownLocale: string | undefined, ownDir: string | undefined): PickerLocaleScope;
+/**
+ * Whether a picker's `dayNames` replace the calendar's own, which `Calendar`
+ * does only for a full week of seven.
+ */
+export declare function hasOwnDayNames(dayNames: string[] | undefined): boolean;
+/**
+ * The day a picker's week starts on: its own `firstDayOfWeek`, else, inside a
+ * `LocaleProvider`, the first day of the locale the picker uses, else Sunday.
+ * Outside a provider it stays Sunday whatever the locale, as it always has,
+ * and so does a picker inside one with no locale from either, since the
+ * runtime's own differs between the server and the browser.
+ *
+ * It also stays Sunday for a picker that brings its own `dayNames`. The
+ * calendar shows those exactly as given, in calendar order, and before the
+ * provider an unset `firstDayOfWeek` was always Sunday, so names written
+ * Sunday first would sit a day or more off their columns if the week moved
+ * under them.
+ */
+export declare function usePickerFirstDayOfWeek(own: DayOfWeek | undefined, locale: string | undefined, hasDayNames: boolean): DayOfWeek;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { FormFieldProps } from './fieldProps.js';
+interface GroupFieldsetProps {
+    /** The group's label, rendered as the `<legend>`. */
+    label: React.ReactNode;
+    /** Sizes the legend's label column when `horizontal`. */
+    labelSize?: FormFieldProps['labelSize'];
+    /** Props for the element that shows the label; any `htmlFor` is dropped. */
+    labelProps?: FormFieldProps['labelProps'];
+    /** Puts the legend in the label column and the rest in the body. */
+    horizontal?: boolean;
+    /** Set on the `<fieldset>` beside its `field` class. */
+    fieldClassName?: string;
+    /** The group's role, when it isn't the fieldset's own `group`. */
+    role?: 'radiogroup';
+    /** The group's own attributes: they describe the group, so they go on the `<fieldset>`. */
+    attributes: object;
+    /** The group's help text, after the content. */
+    message: React.ReactNode;
+    /** The group's content: its `Control` and the box of choices. */
+    children: React.ReactNode;
+}
+/**
+ * The `Field` a `Checkboxes` or `Radios` with `as="fieldset"` renders of its
+ * own, as a native `<fieldset>`: Bulma's field markup, with its label as the
+ * `<legend>` (inside the `field-label` column when horizontal), so the legend
+ * names the group and needs no id. It holds a `Field`'s place for what is
+ * inside, so the choices read as inside a `Field`. Internal; not part of the
+ * public API.
+ */
+export declare const GroupFieldset: React.FC<GroupFieldsetProps>;
+export {};

package/dist/types-cjs/helpers/LocaleProvider.d.ts

@@ -0,0 +1,128 @@
+import React from 'react';
+import { BulmaClassesProps } from './useBulmaClasses.js';
+/** A writing direction. */
+export type TextDirection = 'ltr' | 'rtl';
+/** What the nearest `LocaleProvider` sets, both `undefined` outside one. */
+export interface LocaleContextValue {
+    /**
+     * The locale, as a canonical BCP 47 tag such as `"ar-EG"`: the provider's
+     * own, else the one an outer provider sets.
+     */
+    locale?: string;
+    /**
+     * The direction: the provider's own `dir`, else its own locale's, else the
+     * one an outer provider sets.
+     */
+    dir?: TextDirection;
+}
+/**
+ * Props for the LocaleProvider component. The helper props, the other
+ * attributes and the `ref` land on its `<div>`.
+ */
+export interface LocaleProviderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'dir' | 'lang' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /**
+     * A BCP 47 language tag, such as `"de"` or `"ar-EG"`. It becomes the
+     * wrapper's `lang`, the default `locale` of the date and time pickers
+     * inside, and, with no `dir`, the direction, from the way its script is
+     * written. Unset, a nested provider keeps the outer one's. A tag `Intl`
+     * refuses is ignored, with a warning in development.
+     */
+    locale?: string;
+    /**
+     * The direction, whatever the locale. Unset, it follows this provider's
+     * `locale`, else an outer provider's direction, else the page's.
+     */
+    dir?: TextDirection;
+    /** The part of the app it covers. */
+    children?: React.ReactNode;
+}
+/**
+ * Sets the language and writing direction for the part of the app inside it, on a wrapper `<div>` and on what the library portals out of it.
+ *
+ * The wrapper carries `dir` and `lang`, so CSS and the components that read
+ * the computed direction follow it, as they follow `<html dir>`. A `locale`
+ * alone sets the direction of its script, and a `dir` sets the direction
+ * whatever the locale. A nested provider keeps whatever it leaves unset.
+ *
+ * Inside it, the date and time pickers take its `locale` unless given their
+ * own, and their week starts on the first day of the locale they use unless
+ * `firstDayOfWeek` is set, and a picker with a `locale` of its own is read
+ * like a nested provider. The library's portaled content, such as a
+ * `Popover` panel, a `Modal` with `portal`, a `Toast` or a `Portal`'s
+ * children, keeps the same `dir` and `lang` though it renders outside the
+ * wrapper: in a container outside the wrapper, it sits in a
+ * `display: contents` element that carries them. Without a provider none of
+ * this changes.
+ *
+ * @function
+ * @param {LocaleProviderProps} props - Props for the LocaleProvider.
+ * @returns {JSX.Element} The wrapper, inside the context.
+ *
+ * @example
+ * <LocaleProvider locale="ar-EG">
+ *   <App />
+ * </LocaleProvider>
+ */
+export declare const LocaleProvider: React.ForwardRefExoticComponent<LocaleProviderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The locale and direction the nearest `LocaleProvider` sets, for an app's own `Intl` calls or its own portaled content; both are `undefined` outside one.
+ *
+ * It isn't the page's direction: with no provider, or one that sets no
+ * direction, the page's `<html dir>` still decides. To act on the direction
+ * an element is laid out in, read `getComputedStyle(element).direction`, as
+ * the library's components do.
+ *
+ * @function
+ * @returns {LocaleContextValue} The nearest provider's `locale` and `dir`.
+ *
+ * @example
+ * const { locale } = useLocale();
+ * const price = new Intl.NumberFormat(locale, {
+ *   style: 'currency',
+ *   currency: 'EUR',
+ * }).format(12.5);
+ */
+export declare function useLocale(): LocaleContextValue;
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. The nearest
+ * provider's settings, or `null` outside any provider, so a caller can tell
+ * "no provider" from "a provider that sets nothing".
+ */
+export declare function useLocaleScope(): LocaleContextValue | null;
+/** The `dir` and `lang` portaled content carries: a provider's, or a picker's own. */
+export interface PortalLocale {
+    /** The `lang` to carry, unset for none. */
+    locale?: string;
+    /** The `dir` to carry, unset for none. */
+    dir?: string;
+}
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. Keeps the `dir`
+ * and `lang` of the nearest provider, or the `scope` given in their place,
+ * on content the library portals into `target`, which has left the
+ * provider's wrapper behind.
+ *
+ * A target inside the provider's own wrapper gets the content as it is: it
+ * inherits from the wrapper, and follows it when the provider changes.
+ * Content that must be its container's direct child, a `<tr>` portaled into
+ * a `<tbody>` there, stays one. Any other target, `document.body` included,
+ * gets the content inside a `display: contents` element carrying the
+ * values, which adds no box. So does content with a `scope` of its own, a
+ * picker's panel, since the provider's values aren't its own.
+ *
+ * Which of the two is decided once, when the content mounts, and kept while
+ * it stays: switching between them would put a different element in its
+ * place and remount everything inside, losing typed text, focus and timers.
+ * A change of locale or direction updates the wrapper's attributes instead.
+ * A target is never left bare because something else, such as `<html>`,
+ * happens to carry the same values, since that can stop being true without
+ * the content remounting. Outside a provider it renders the children alone,
+ * so nothing changes there.
+ */
+export declare function LocalePortalScope({ children, target, scope, }: {
+    children: React.ReactNode;
+    /** The element the content is portaled into. */
+    target: Element;
+    /** Values to carry in place of the provider's, such as a picker's own. */
+    scope?: PortalLocale;
+}): React.JSX.Element;

package/dist/types-cjs/helpers/localeInfo.d.ts

@@ -0,0 +1,23 @@
+import type { DayOfWeek } from '../form/_pickerInternals/pickerTypes.js';
+/**
+ * The canonical form of a BCP 47 tag (`"en-us"` becomes `"en-US"`), or
+ * `undefined` for an empty or missing one. Throws a `RangeError` for a tag
+ * `Intl` refuses, as `Intl.DateTimeFormat` would.
+ */
+export declare function canonicalLocale(tag: string | undefined): string | undefined;
+/**
+ * The direction a locale's script is written in: from `Intl.Locale`'s text
+ * info, else from the script `maximize()` fills in, else from the language.
+ *
+ * @param locale - A canonical tag, as `canonicalLocale` returns.
+ */
+export declare function localeDirection(locale: string): 'ltr' | 'rtl';
+/**
+ * The day a locale's week starts on, 0 for Sunday, as `getWeekInfo()` reads
+ * it: the tag's `-u-fw-` keyword, else the region its `-u-rg-` keyword names,
+ * else its own region or the one `maximize()` fills in, looked up in CLDR's
+ * week data, where a region not listed starts on Monday.
+ *
+ * @param locale - A canonical tag, as `canonicalLocale` returns.
+ */
+export declare function localeFirstDay(locale: string): DayOfWeek;

package/dist/types-cjs/helpers/portal.d.ts

@@ -75,6 +75,17 @@ export interface PortalProps {
  * also reaches what the library's components portal, such as Popover's
  * `appendToBody` panel or a `Modal` with `portal`.
  *
+ * Inside a `LocaleProvider`, the children keep its `dir` and `lang`. A
+ * container inside the provider's own wrapper takes the children as they
+ * are, and they follow the provider through the page. Any other,
+ * `document.body` included, gets them inside one `<div>` carrying the
+ * provider's values, with `display: contents` so it adds no box. It is
+ * still an element, so content that must be the container's direct child,
+ * a `<tr>` in a `<tbody>`, or that a direct-child selector styles, belongs
+ * in a container inside the provider. Which of the two is settled when the
+ * children mount, so a change of locale updates them in place rather than
+ * remounting them.
+ *
  * Tab order and focus follow the DOM too. Content portaled from inside a
  * focus trap is no longer inside the trapped element, so the trap neither
  * reaches it nor holds focus there: render nested overlays inside the

package/dist/types-cjs/index.d.ts

@@ -31,6 +31,7 @@ export * from './components/Carousel.js';
 export * from './components/Reveal.js';
 export * from './components/TreeView.js';
 export * from './components/ScrollArea.js';
+export * from './components/Command.js';
 export * from './elements/Block.js';
 export * from './elements/Box.js';
 export * from './elements/Button.js';
@@ -73,11 +74,14 @@ export * from './elements/Title.js';
 export * from './elements/Tr.js';
 export * from './elements/UnorderedList.js';
 export * from './form/Checkbox.js';
+export * from './form/CheckboxCard.js';
 export * from './form/Checkboxes.js';
 export * from './form/Control.js';
 export * from './form/Field.js';
+export * from './form/Fieldset.js';
 export * from './form/File.js';
 export * from './form/Radio.js';
+export * from './form/RadioCard.js';
 export * from './form/Radios.js';
 export * from './form/Switch.js';
 export * from './form/Slider.js';
@@ -130,6 +134,8 @@ export type { ClientOnlyProps } from './helpers/ClientOnly.js';
 export { useIsHydrated } from './helpers/useIsHydrated.js';
 export { Portal } from './helpers/portal.js';
 export type { PortalProps } from './helpers/portal.js';
+export { LocaleProvider, useLocale } from './helpers/LocaleProvider.js';
+export type { LocaleContextValue, LocaleProviderProps, TextDirection, } from './helpers/LocaleProvider.js';
 export { useFocusTrap } from './helpers/useFocusTrap.js';
 export type { UseFocusTrapOptions } from './helpers/useFocusTrap.js';
 export * from './layout/Container.js';