@usableapp/cardds 0.7.103 → 0.7.105

package/dist/actions/IconBtn.d.ts

@@ -5,17 +5,26 @@ export interface IconBtnProps extends ComponentProps<'button'> {
     label: string;
     /** the icon to show (sized to the button); or pass an Icon as children */
     icon?: IconName;
-    /** 40px, for a card head or a top bar; default 48px */
+    /** 40px, for a card head or a top bar; default 48px (the short form of `size="sm"`) */
     sm?: boolean;
+    /** the round sizes, all on `--tap-base`: `sm` (44) · default (48) · `lg` (56, the hero control) · `xl` (68, the biggest — a card foot of a few big
+     *  round buttons). In `lg` and `xl` the icon is a share of the circle (knob `--icon-btn-icon`) and a word child keeps inside it
+     *  (knob `--icon-btn-word-max`). Each size has its knob: `--icon-btn-lg-size`, `--icon-btn-xl-size` */
+    size?: 'sm' | 'lg' | 'xl';
     /** filled accent (the forward arrow, the send button) */
     invert?: boolean;
+    /** filled with the primary Btn's fill (the palette's primary, `--btn-primary-bg`): the one answer, on a card whose foot is round buttons.
+     *  `invert` is the accent, `primary` the primary — the same fill on the wireframe, two on a palette that gives them two colours */
+    primary?: boolean;
     /** a link styled as a round button */
     href?: string;
 }
-/** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move.
+/** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move, `primary` for the
+ *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<CardFoot round>`); a short WORD may stand in one
+ *  as its child (`<IconBtn size="xl" primary label="ช่วยเหลือ">ช่วย</IconBtn>`): it grows with the member's text size up to the circle's share.
  *  It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
  *  wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */
-export declare function IconBtn({ label, icon, sm, invert, href, className, type, children, ...rest }: IconBtnProps): import("react").DetailedReactHTMLElement<{
+export declare function IconBtn({ label, icon, sm, size, invert, primary, href, className, type, children, ...rest }: IconBtnProps): import("react").DetailedReactHTMLElement<{
     ref?: import("react").Ref<HTMLButtonElement> | undefined;
     key?: import("react").Key | null | undefined;
     disabled?: boolean | undefined;

package/dist/actions/IconBtn.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement } from 'react';
 import { cx } from '../cx.js';
+import { warnOnce } from '../state.js';
 import { Icon } from '../type/Icon.js';
-/** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move.
+/** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move, `primary` for the
+ *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<CardFoot round>`); a short WORD may stand in one
+ *  as its child (`<IconBtn size="xl" primary label="ช่วยเหลือ">ช่วย</IconBtn>`): it grows with the member's text size up to the circle's share.
  *  It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
  *  wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */
-export function IconBtn({ label, icon, sm, invert, href, className, type, children, ...rest }) {
-    const btn = createElement(href ? 'a' : 'button', { href, type: href ? undefined : type ?? 'button', 'aria-label': label, className: cx('icon-btn', sm && 'icon-btn--sm', invert && 'icon-btn--invert', className), ...rest }, icon ? _jsx(Icon, { name: icon, size: sm ? 'sm' : 'md' }) : children);
+export function IconBtn({ label, icon, sm, size, invert, primary, href, className, type, children, ...rest }) {
+    if (invert && primary)
+        warnOnce('icon-btn-fill', 'cardds IconBtn: `invert` and `primary` together — two fills for one button; `primary` is drawn');
+    const step = size ?? (sm ? 'sm' : undefined);
+    const btn = createElement(href ? 'a' : 'button', { href, type: href ? undefined : type ?? 'button', 'aria-label': label, className: cx('icon-btn', step && `icon-btn--${step}`, invert && 'icon-btn--invert', primary && 'icon-btn--primary', className), ...rest }, icon ? _jsx(Icon, { name: icon, size: step === 'sm' ? 'sm' : 'md' }) : children);
     return btn;
 }