@photonix/basic 3.9.0 → 4.1.0

package/dist/index.css

@@ -7148,14 +7148,20 @@
   border-radius: var(--radius-full);
   corner-shape: round;
 }
-.searchFieldRoot:hover:not(.searchFieldDisabled) {
+.searchFieldRoot:hover:not(.searchFieldDisabled, .bare) {
   background-color: var(--surface-state-hover);
   border-color: var(--border-state-hover);
 }
-.searchFieldFocused {
+.searchFieldFocused:not(.bare) {
   border-color: var(--border-state-focus);
   box-shadow: inset 0 0 0 var(--border-sm) var(--border-state-focus);
 }
+.bare {
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  padding: 0;
+}
 .searchFieldDisabled {
   background-color: var(--surface-state-disabled);
   cursor: not-allowed;
@@ -8734,6 +8740,22 @@
 .strokeAvatar .chipAvatar {
   --avatar-stroke-color: var(--surface-neutral-primary-inverse);
 }
+.iconSquare {
+  justify-content: center;
+  padding: 0;
+}
+.iconSquare .chipContainer {
+  justify-content: center;
+}
+.iconSquare.large {
+  inline-size: var(--dimensions-44);
+}
+.iconSquare.medium {
+  inline-size: var(--dimensions-36);
+}
+.iconSquare.small {
+  inline-size: var(--dimensions-32);
+}
 .disabled {
   cursor: not-allowed;
   pointer-events: none;
@@ -8963,7 +8985,7 @@
   box-sizing: border-box;
   display: flex;
   flex-grow: 1;
-  gap: var(--space-xs);
+  gap: var(--space-2xs);
   inline-size: 100%;
   margin-inline: 0;
   min-inline-size: 0;

package/dist/index.d.mts

@@ -765,6 +765,15 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
      * so typing replaces it. Handy for short numeric fields.
      */
     selectOnFocus?: boolean;
+    /**
+     * For `phone` and `bankAccount`: read numbers out of a whole message. Pasting
+     * "STK 0071000123456 Vietcombank, SĐT 0912 345 678" fills the field with the
+     * number of its kind instead of a run of digits, and hands the message to
+     * every other field (`useNumberSuggestions`). The field draws no suggestions
+     * itself: show them with your own UI wherever suits — a toolbar, a sheet, the
+     * keyboard's accessory. Default true.
+     */
+    smartPaste?: boolean;
 }
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -1037,6 +1046,12 @@ interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
      * Optional icon on the left
      */
     icon?: React.ReactNode;
+    /**
+     * Shows only `icon`: the label is hidden and becomes the chip's accessible
+     * name. With nothing else in the chip (no badge, dropdown or action) it is a
+     * circle as tall as a chip of the same size — e.g. the filter chip leading a ChipBar.
+     */
+    iconOnly?: boolean;
     /**
      * Optional avatar on the left
      */
@@ -1111,7 +1126,8 @@ type BarSurface = 'flat' | 'merged' | 'elevated';
 
 interface ChipBarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Element to show on the left, typically a filter Chip or IconButton
+     * Element to show on the left, typically a filter Chip — `<Chip iconOnly …/>` for an
+     * icon alone. It takes the bar's chip size, so it lines up with the chips beside it.
      */
     leading?: React.ReactNode;
     /**
@@ -1154,6 +1170,65 @@ interface VisuallyHiddenOwnProps {
 type VisuallyHiddenProps<C extends React.ElementType = 'span'> = PolymorphicComponentPropWithRef<C, VisuallyHiddenOwnProps>;
 declare const VisuallyHidden: React.ForwardRefExoticComponent<Omit<VisuallyHiddenProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;
 
+interface ShellSnapshot {
+    /** A floating drawer is in the layout. */
+    drawerFloating: boolean;
+    /** Drawers mounted in the shell. */
+    drawerCount: number;
+    /** The floating drawer's card is shown. */
+    open: boolean;
+    /** The rail item the card was last opened from. */
+    parentId: string | null;
+    /** The rail's selected item. */
+    selectedRailId: string | null;
+    /** Rail items seen selected while no drawer was in the layout: their page has none. */
+    noDrawer: ReadonlySet<string>;
+}
+/**
+ * What the rail, drawer and top bar of one shell share, so the narrow-window behaviour needs no
+ * wiring: which rail items own the drawer, whether its floating card is open, and how to go to
+ * the page of the item it was opened from.
+ */
+declare class ShellStore {
+    private state;
+    private listeners;
+    private railClicks;
+    private closeTimer;
+    private floatingDrawers;
+    /** Delay (ms) before the card closes, so the pointer can cross from the rail item to it. */
+    closeDelay: number;
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => ShellSnapshot;
+    private set;
+    private reconcileQueued;
+    /**
+     * After a commit (rail items and drawers report in effects, in tree order), note whether the
+     * selected item's page has a drawer.
+     */
+    private reconcile;
+    /** A drawer joins (`+1`) or leaves (`-1`) the layout. */
+    drawerMounted(delta: 1 | -1): void;
+    /** A drawer starts (`true`) or stops floating. */
+    drawerFloats(floating: boolean): void;
+    /** A rail item reports its click handler; the selected one also marks itself. */
+    railItem(id: string, selected: boolean, onClick: ((id: string) => void) | undefined): () => void;
+    /**
+     * Whether a rail item reveals the floating drawer: any item, while a drawer floats in the
+     * shell, except one whose page turned out to have none. `hint` (NavItem `hasDrawer`) decides
+     * outright when given.
+     */
+    isParent(id: string, hint?: boolean): boolean;
+    /** Opens at once; closing waits `closeDelay` and any open on the way cancels it. */
+    setOpen: (open: boolean) => void;
+    /** Pointer or focus entering / leaving a parent rail item. */
+    hoverParent(id: string, hovering: boolean): void;
+    /** The app's own drawer toggle, while floating: show the card for the selected item, or hide it. */
+    toggleForSelected(): void;
+    close: () => void;
+    /** An item was chosen in the floating card: go to the page it was opened from, then close. */
+    choose(): void;
+}
+
 interface LayoutContextValue {
     /** Whether a NavigationDrawer is present in the layout */
     hasDrawer: boolean;
@@ -1161,6 +1236,8 @@ interface LayoutContextValue {
     registerDrawer: () => void;
     /** Unregister a drawer (called by NavigationDrawer on unmount) */
     unregisterDrawer: () => void;
+    /** State the shell's rail, drawer and top bar share (narrow-window behaviour). */
+    shell: ShellStore;
 }
 declare const LayoutContext: React.Context<LayoutContextValue | null>;
 interface LayoutProviderProps {

package/dist/index.d.ts

@@ -765,6 +765,15 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
      * so typing replaces it. Handy for short numeric fields.
      */
     selectOnFocus?: boolean;
+    /**
+     * For `phone` and `bankAccount`: read numbers out of a whole message. Pasting
+     * "STK 0071000123456 Vietcombank, SĐT 0912 345 678" fills the field with the
+     * number of its kind instead of a run of digits, and hands the message to
+     * every other field (`useNumberSuggestions`). The field draws no suggestions
+     * itself: show them with your own UI wherever suits — a toolbar, a sheet, the
+     * keyboard's accessory. Default true.
+     */
+    smartPaste?: boolean;
 }
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -1037,6 +1046,12 @@ interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
      * Optional icon on the left
      */
     icon?: React.ReactNode;
+    /**
+     * Shows only `icon`: the label is hidden and becomes the chip's accessible
+     * name. With nothing else in the chip (no badge, dropdown or action) it is a
+     * circle as tall as a chip of the same size — e.g. the filter chip leading a ChipBar.
+     */
+    iconOnly?: boolean;
     /**
      * Optional avatar on the left
      */
@@ -1111,7 +1126,8 @@ type BarSurface = 'flat' | 'merged' | 'elevated';
 
 interface ChipBarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Element to show on the left, typically a filter Chip or IconButton
+     * Element to show on the left, typically a filter Chip — `<Chip iconOnly …/>` for an
+     * icon alone. It takes the bar's chip size, so it lines up with the chips beside it.
      */
     leading?: React.ReactNode;
     /**
@@ -1154,6 +1170,65 @@ interface VisuallyHiddenOwnProps {
 type VisuallyHiddenProps<C extends React.ElementType = 'span'> = PolymorphicComponentPropWithRef<C, VisuallyHiddenOwnProps>;
 declare const VisuallyHidden: React.ForwardRefExoticComponent<Omit<VisuallyHiddenProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;
 
+interface ShellSnapshot {
+    /** A floating drawer is in the layout. */
+    drawerFloating: boolean;
+    /** Drawers mounted in the shell. */
+    drawerCount: number;
+    /** The floating drawer's card is shown. */
+    open: boolean;
+    /** The rail item the card was last opened from. */
+    parentId: string | null;
+    /** The rail's selected item. */
+    selectedRailId: string | null;
+    /** Rail items seen selected while no drawer was in the layout: their page has none. */
+    noDrawer: ReadonlySet<string>;
+}
+/**
+ * What the rail, drawer and top bar of one shell share, so the narrow-window behaviour needs no
+ * wiring: which rail items own the drawer, whether its floating card is open, and how to go to
+ * the page of the item it was opened from.
+ */
+declare class ShellStore {
+    private state;
+    private listeners;
+    private railClicks;
+    private closeTimer;
+    private floatingDrawers;
+    /** Delay (ms) before the card closes, so the pointer can cross from the rail item to it. */
+    closeDelay: number;
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => ShellSnapshot;
+    private set;
+    private reconcileQueued;
+    /**
+     * After a commit (rail items and drawers report in effects, in tree order), note whether the
+     * selected item's page has a drawer.
+     */
+    private reconcile;
+    /** A drawer joins (`+1`) or leaves (`-1`) the layout. */
+    drawerMounted(delta: 1 | -1): void;
+    /** A drawer starts (`true`) or stops floating. */
+    drawerFloats(floating: boolean): void;
+    /** A rail item reports its click handler; the selected one also marks itself. */
+    railItem(id: string, selected: boolean, onClick: ((id: string) => void) | undefined): () => void;
+    /**
+     * Whether a rail item reveals the floating drawer: any item, while a drawer floats in the
+     * shell, except one whose page turned out to have none. `hint` (NavItem `hasDrawer`) decides
+     * outright when given.
+     */
+    isParent(id: string, hint?: boolean): boolean;
+    /** Opens at once; closing waits `closeDelay` and any open on the way cancels it. */
+    setOpen: (open: boolean) => void;
+    /** Pointer or focus entering / leaving a parent rail item. */
+    hoverParent(id: string, hovering: boolean): void;
+    /** The app's own drawer toggle, while floating: show the card for the selected item, or hide it. */
+    toggleForSelected(): void;
+    close: () => void;
+    /** An item was chosen in the floating card: go to the page it was opened from, then close. */
+    choose(): void;
+}
+
 interface LayoutContextValue {
     /** Whether a NavigationDrawer is present in the layout */
     hasDrawer: boolean;
@@ -1161,6 +1236,8 @@ interface LayoutContextValue {
     registerDrawer: () => void;
     /** Unregister a drawer (called by NavigationDrawer on unmount) */
     unregisterDrawer: () => void;
+    /** State the shell's rail, drawer and top bar share (narrow-window behaviour). */
+    shell: ShellStore;
 }
 declare const LayoutContext: React.Context<LayoutContextValue | null>;
 interface LayoutProviderProps {