@nxgt/material 3.10.1 → 3.11.0

package/dist/lib/components/ui/actions/icon-button/icon-button.variants.d.ts

@@ -1,11 +1,41 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * The classes of each `size`, written out whole so Tailwind finds them. A
+ * ladder of variables, read by `button.css` (the shared look) and
+ * `icon-button.css`: `--btn-h` the height (and so the round radius,
+ * `--btn-h / 2`), `--ib-k` the width as a factor of it (`width`), `--btn-ic`
+ * the icon, `--btn-sq` the square radius. `legacy` is a button without a
+ * `size`: the 36px, 16px-icon button it always was, in rem like `size-9`.
+ * `scripts/button-radius.spec.ts` reads the heights and radii back from here.
+ */
+export declare const iconButtonSizeClasses: {
+    readonly legacy: "h-9 w-[calc(2.25rem*var(--ib-k,1))] [--btn-h:2.25rem] [--btn-sq:10px] [--btn-ic:1rem] has-[[data-slot=icon]]:p-1.5";
+    readonly xs: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:24px] [--btn-sq:6px] [--btn-ic:14px]";
+    readonly sm: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:32px] [--btn-sq:8px] [--btn-ic:16px]";
+    readonly default: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:36px] [--btn-sq:10px] [--btn-ic:18px]";
+    readonly lg: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:40px] [--btn-sq:12px] [--btn-ic:20px]";
+    readonly xl: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:56px] [--btn-sq:16px] [--btn-ic:28px]";
+};
+export type IconButtonSize = Exclude<keyof typeof iconButtonSizeClasses, 'legacy'>;
+export type IconButtonWidth = 'narrow' | 'default' | 'wide';
 declare const variantsByColor: (props?: ({
+    look?: "btn" | "shaped" | null | undefined;
+    size?: "lg" | "sm" | "default" | "xs" | "xl" | "legacy" | null | undefined;
+    width?: "default" | "narrow" | "wide" | null | undefined;
     variant?: "tonal" | "filled" | "link" | "ghost" | "outlined" | null | undefined;
     color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type Props = Parameters<typeof variantsByColor>[0];
+/** What `iconButtonVariants` takes: `size` is optional and has no `legacy`. */
+export type IconButtonVariantProps = Omit<NonNullable<Props>, 'look' | 'size'> & {
+    size?: IconButtonSize | null;
+};
 /**
- * `IconButton`'s variant × color classes. On a ghost one, `color: null`
- * reads as the default colour, so it keeps its neutral hover (cva matches
- * no compound variant on `null`).
+ * `IconButton`'s variant x color x size x width classes. On a ghost one,
+ * `color: null` reads as the default colour, so it keeps its neutral hover.
  */
-export declare const variants: typeof variantsByColor;
+export declare const variants: (props?: IconButtonVariantProps) => string;
+/** The same classes for a button drawn as a shape (`shape`): it keeps its own ring and surface. */
+export declare const shapedVariants: (props?: IconButtonVariantProps) => string;
+export type IconButtonVariants = VariantProps<typeof variants>;
 export {};

package/dist/lib/components/ui/feedback/state-frame/state-scene-illustration.d.ts

@@ -1,5 +1,7 @@
 import { SceneId } from './scene-registry.js';
-export declare function StateSceneIllustration({ scene, size, }: {
+type SceneProps = {
     scene: SceneId;
     size: 'sm' | 'md';
-}): import("react").JSX.Element;
+};
+export declare function StateSceneIllustration({ scene, size }: SceneProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/feedback/typing-indicator/typing-indicator.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
 declare const typingIndicatorVariants: (props?: ({
     variant?: "bubble" | "dots" | null | undefined;
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TypingIndicatorProps = ComponentProps<'div'> & VariantProps<typeof typingIndicatorVariants> & {
     /** Its accessible name, announced politely (`role="status"`). Default: "Typing". */

package/dist/lib/components/ui/fields/slider/split-slider-props.d.ts

@@ -45,13 +45,13 @@ export declare function splitSliderProps({ defaultValue, value, min, max, step,
         minStepsBetweenThumbs?: number;
         onValueCommit?(value: number[]): void;
         form?: string;
+        title?: string | undefined | undefined;
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: import('react').CSSProperties | undefined;
-        title?: string | undefined | undefined;
         children?: import('react').ReactNode;
         key?: import('react').Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;

package/dist/lib/components/ui/fields/slider/use-slider-control.d.ts

@@ -19,13 +19,13 @@ export declare function useSliderControl(props: SliderControlProps): {
         minStepsBetweenThumbs?: number;
         onValueCommit?(value: number[]): void;
         form?: string;
+        title?: string | undefined | undefined;
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: import('react').CSSProperties | undefined;
-        title?: string | undefined | undefined;
         children?: import('react').ReactNode;
         key?: import('react').Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;

package/dist/lib/components/ui/overlays/dialog/dialog-variants.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
  * layer, so a utility in `className` still wins (`rounded-lg`, `bg-background`).
  */
 export declare const dialogContentVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | "full" | null | undefined;
     mobilePresentation?: "dialog" | "fullscreen" | "bottom-sheet" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type DialogContentVariants = VariantProps<typeof dialogContentVariants>;

package/dist/lib/components/ui/primitives/toggle/toggle.d.ts

@@ -9,7 +9,7 @@ import { ComponentProps } from 'react';
  */
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outlined" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "lg" | "sm" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
 export { Toggle, toggleVariants };

package/dist/lib/components/ui/primitives/typography/typography.d.ts

@@ -1,13 +1,23 @@
-import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
-export declare const typographyVariants: (props?: ({
-    variant?: "caption" | "normal" | "huge-larger" | "huge-large" | "huge-medium" | "huge-small" | "headline-larger" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "body-medium" | "body-small" | null | undefined;
-    tone?: "primary" | "error" | "default" | "muted" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type TypographyProps = ComponentProps<'p'> & VariantProps<typeof typographyVariants> & {
+import { TypographyVariantProps } from './typography.variants.js';
+export { typographyVariants } from './typography.variants.js';
+export type TypographyProps = ComponentProps<'p'> & Omit<TypographyVariantProps, 'variant'> & {
+    /**
+     * A step of the type scale, `<role>-<size>`: role `display`, `headline`,
+     * `title`, `body` or `label`, size `lg`, `md` or `sm`. Default `body-md`.
+     *
+     * The fifteen former names are kept as aliases of the scale and are
+     * deprecated: `normal`, `huge-larger`, `huge-large`, `huge-medium`,
+     * `huge-small`, `headline-larger`, `headline-large`, `headline-medium`,
+     * `headline-small`, `title-large`, `title-medium`, `title-small`,
+     * `body-medium`, `body-small` and `caption`.
+     */
+    variant?: TypographyVariantProps['variant'];
+    /** The heavier weight of the same step (`text-<step>-em`): same size, line height and tracking. No effect on a deprecated alias that is emphasized already. */
+    emphasized?: boolean | null;
     /** The element to render, `div` by default. Intrinsic tags only. */
     as?: keyof React.JSX.IntrinsicElements;
     /** Merge the typography classes onto the single child instead of rendering an element. */
     asChild?: boolean;
 };
-export declare function Typography({ className, variant, tone, as, asChild, ...props }: TypographyProps): import("react").JSX.Element;
+export declare function Typography({ className, variant, emphasized, tone, as, asChild, ...props }: TypographyProps): import("react").JSX.Element;

package/dist/lib/components/ui/primitives/typography/typography.variants.d.ts

@@ -0,0 +1,55 @@
+import { VariantProps } from 'class-variance-authority';
+/** The five roles of the type scale (lib/components/type-scale.css). */
+export declare const typeRoles: readonly ["display", "headline", "title", "body", "label"];
+export declare const typeSizes: readonly ["lg", "md", "sm"];
+type Role = (typeof typeRoles)[number];
+type Size = (typeof typeSizes)[number];
+/** `display-lg`, `title-md`… the fifteen scale variants. */
+export type ScaleVariant = `${Role}-${Size}`;
+export declare const scaleVariants: ScaleVariant[];
+/**
+ * The fifteen variants this component had before the scale, each mapped by
+ * name onto it: the old semibold ones to the emphasized variant, the others
+ * to the plain one. The sizes follow the scale, so they changed (the changelog
+ * has the table). `emphasized` has no effect on an alias that is emphasized
+ * already.
+ */
+export declare const aliases: {
+    /** @deprecated Use `body-md`. */
+    readonly normal: "body-md";
+    /** @deprecated Use `display-lg` with `emphasized`. */
+    readonly 'huge-larger': "display-lg-em";
+    /** @deprecated Use `display-lg` with `emphasized`. */
+    readonly 'huge-large': "display-lg-em";
+    /** @deprecated Use `display-md` with `emphasized`. */
+    readonly 'huge-medium': "display-md-em";
+    /** @deprecated Use `display-sm` with `emphasized`. */
+    readonly 'huge-small': "display-sm-em";
+    /** @deprecated Use `display-sm` with `emphasized`. */
+    readonly 'headline-larger': "display-sm-em";
+    /** @deprecated Use `headline-lg` with `emphasized`. */
+    readonly 'headline-large': "headline-lg-em";
+    /** @deprecated Use `headline-md` with `emphasized`. */
+    readonly 'headline-medium': "headline-md-em";
+    /** @deprecated Use `headline-sm` with `emphasized`. */
+    readonly 'headline-small': "headline-sm-em";
+    /** @deprecated Use `title-lg` with `emphasized`. */
+    readonly 'title-large': "title-lg-em";
+    /** @deprecated Use `title-md` with `emphasized`. */
+    readonly 'title-medium': "title-md-em";
+    /** @deprecated Use `title-sm` with `emphasized`. */
+    readonly 'title-small': "title-sm-em";
+    /** @deprecated Use `body-md`. */
+    readonly 'body-medium': "body-md";
+    /** @deprecated Use `body-sm`. */
+    readonly 'body-small': "body-sm";
+    /** @deprecated Use `label-sm` with `tone="muted"`. */
+    readonly caption: "label-sm";
+};
+export declare const typographyVariants: (props?: ({
+    variant?: "caption" | "normal" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md" | "label-sm" | "huge-larger" | "huge-large" | "huge-medium" | "huge-small" | "headline-larger" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "body-medium" | "body-small" | null | undefined;
+    emphasized?: boolean | null | undefined;
+    tone?: "primary" | "error" | "default" | "muted" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TypographyVariantProps = VariantProps<typeof typographyVariants>;
+export {};

package/dist/lib/components/ui/selection/choice-group/use-choice-group-field.d.ts

@@ -52,13 +52,13 @@ export declare function useChoiceGroupField(props: ChoiceGroupBase<HTMLButtonEle
     name: string | undefined;
     dom: {
         id?: string;
+        title?: string | undefined | undefined;
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: import('react').CSSProperties | undefined;
-        title?: string | undefined | undefined;
         key?: import('react').Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -329,13 +329,13 @@ export declare function useChoiceGroupField(props: ChoiceGroupBase<HTMLButtonEle
         onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
     } | {
         id?: string;
+        title?: string | undefined | undefined;
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: import('react').CSSProperties | undefined;
-        title?: string | undefined | undefined;
         key?: import('react').Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;