@stackone/malachite 2.69.0 → 2.70.0

package/COMPONENTS.md

@@ -100,6 +100,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 
 - **`Button`** — Primary button. Variants: `filled`, `outline`, `surface` (outline's geometry on a ground of its own, for a control sitting on a tinted surface), `assistant` (the violet the assistant is named in — provenance, not a severity: it says who is being asked, not that anything is wrong), `destructive`, `success`, `warning`, `error`, `ghost`, `no-style`. Supports `iconOnly`, `loading`, `tooltip`. `leading` puts something that is not an icon, such as an avatar, before the label at its own size; `contentAlign="start"` starts the label at the leading edge and pins an end `icon` to the far edge, which with `flexGrow` makes a full-width switcher trigger — a project pill whose width comes from its container (e.g. a box `SIDEBAR_POPOVER_WIDTH_PX` wide, so it lines up with the `Sidebar.Panel` it opens). _Key props:_ `variant`, `size`, `icon`, `iconPosition`, `leading`, `contentAlign` (`center` | `start`), `flexGrow` (fills the container), `iconOnly`, `loading`, `disabled`, `fill`, `tooltip`.
 - **`CloseButton`** — The bare X that dismisses a screen, panel or wizard: secondary at rest, primary on hover and keyboard focus, with no box or background at either. Use it instead of a `ghost` `Button` (which draws a hover box) or `no-style` (which has no disabled look). `surface="inverse"` is for a panel that stays dark in every theme, such as `SplitScreenLayout`’s, and reads the `closeButton` theme tokens. `loading` swaps the X for a spinner and sets `aria-busy`. Disabled and loading both use `aria-disabled` rather than `disabled`, so they ignore clicks but stay focusable and can still trigger a `Tooltip` explaining why. Named "Close" unless `aria-label` says otherwise. _Key props:_ `onClick`, `aria-label`, `size` (`small` 24px | `medium` 32px, 12px glyph), `surface` (`default` | `inverse`), `disabled`, `loading`.
+- **`AccessPills`** — Three toggle pills, R / W / D, saying which effects an account grants (Read, Write, Delete) — on a linked-account row and in the header above the rows. Each pill is a button with `aria-pressed`, named in full by its state (`Write: some actions off`), and a tooltip on hover and focus spells that name out, since a letter alone is cryptic. On paints the effect’s tint (Read in `Tag`’s primary, Write in warning, Delete in error, the colours the dashboard already gives these effects), `"mixed"` (some, not all, of its actions on) an empty pill with a dashed border, off a neutral one. The colours come from the theme and there is no colour prop. It reports only which pill was pressed through `onToggle`: any cascade between effects (Read off turning Write and Delete off, say) and what pressing a mixed pill means belong to the caller. A pill in `disabled` stays focusable with `aria-disabled`, ignores clicks and keys, and its tooltip shows `disabledReason` instead, which is also its accessible description. `size="dense"` draws 24×20 pills in place of 26×24, for a narrow screen. _Key props:_ `value` (`{ read, write, delete }`, each `true` | `false` | `"mixed"`), `onToggle(effect)`, `disabled` (per effect), `disabledReason` (per effect, or one string), `size` (`default` | `dense`), `aria-label`, `aria-labelledby`.
 - **`PillButton`** — Pill-shaped button, often used for filters/toggleable chips. `shape="tab"` squares the top corners so a row of them reads as attached to whatever sits above — the controls under a chat composer. Pass `href` and an interactive, non-disabled pill renders a real anchor (cmd-click, copy-link) instead of navigating from `onClick`; a disabled or `interactive={false}` pill stays static, and an unsafe scheme such as `javascript:` is dropped. `target="_blank"` always carries `noopener noreferrer`. _Key props:_ `label`, `icon`, `trailingIcon`, `selected`, `disabled`, `interactive`, `size`, `variant`, `shape` (`pill` | `tab`), `onClick`, `href`, `target`, `rel`.
 - **`Link`** — Styled anchor/link text. _Key props:_ `LinkProps`.
 - **`InlineConfirm`** — A confirmation asked on the control that triggered it rather than in a modal, for a reversible bulk edit where a dialog would be heavier than the change it guards. Drawn to the design's chip: 33px tall, 12px radius, its confirm cell running to the pill's own edge between two rules. Reads its own `inlineConfirm` theme tokens — a shade off the `SelectionBar` it appears beside, by design. Carries a spinning glyph by default — its own, so it takes the pill's colour rather than the sheet's dimmed grey — standing for a change waiting on an answer; pass `icon={null}` to drop it or a node to replace it. Anchored placement is in viewport coordinates, so the chip must not sit inside an ancestor carrying `transform`, `filter` or `contain`. It takes focus on open so `Enter` confirms, dismisses on `Escape` (through the shared escape-layer stack, so the topmost overlay answers) or a click outside, and returns focus to whatever opened it. `role="alertdialog"` named by the message itself, so the confirm button is never announced bare. Only one can be open at a time: opening a second dismisses the first, so it is never ambiguous what Yes answers. Pass `anchorTo` (a ref to the control it answers for) and it pins itself to that control's left, follows it while the page or a sticky header scrolls, dismisses once it scrolls out of view, and treats clicks on it as inside — without which the same click would dismiss and reopen. Left unanchored it renders in flow for the consumer to place, and must then not sit in a container that clips overflow (`Table` header cells among them). Nothing renders while `open` is false, and its listeners are attached only while it is open. _Key props:_ `open`, `message`, `confirmLabel`, `onConfirm`, `onDismiss`, `anchorTo`, `icon`, `className`, `style`.

package/dist/components/AccessPills.js

@@ -0,0 +1,99 @@
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useId as _ } from "react";
+import w from "./Tooltip.js";
+import { FOCUS_RING as y } from "./focusRing.js";
+const S = ["read", "write", "delete"], s = {
+  read: { full: "Read", letter: "R" },
+  write: { full: "Write", letter: "W" },
+  delete: { full: "Delete", letter: "D" }
+}, k = "inline-flex shrink-0 items-center justify-center border rounded-[var(--malachite-radius-md,6px)] bg-[var(--malachite-card-background,rgb(255,255,255))] font-semibold leading-none text-[length:var(--malachite-font-size-xsmall,11px)] whitespace-nowrap transition-colors duration-150 ease-in-out", E = {
+  default: "h-6 w-[26px]",
+  dense: "h-5 w-6"
+}, $ = {
+  read: {
+    on: "border-solid text-[var(--malachite-tag-primary-foreground)] [background-image:linear-gradient(var(--malachite-tag-primary-background),var(--malachite-tag-primary-background))] border-[var(--malachite-tag-primary-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-primary-border)_35%,transparent)]",
+    mixed: "border-dashed text-[var(--malachite-tag-primary-foreground)] border-[var(--malachite-tag-primary-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-primary-border)_65%,transparent)]"
+  },
+  write: {
+    on: "border-solid text-[var(--malachite-tag-warning-foreground)] [background-image:linear-gradient(var(--malachite-tag-warning-background),var(--malachite-tag-warning-background))] border-[var(--malachite-tag-warning-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-warning-border)_35%,transparent)]",
+    mixed: "border-dashed text-[var(--malachite-tag-warning-foreground)] border-[var(--malachite-tag-warning-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-warning-border)_65%,transparent)]"
+  },
+  delete: {
+    on: "border-solid text-[var(--malachite-tag-error-foreground)] [background-image:linear-gradient(var(--malachite-tag-error-background),var(--malachite-tag-error-background))] border-[var(--malachite-tag-error-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-error-border)_35%,transparent)]",
+    mixed: "border-dashed text-[var(--malachite-tag-error-foreground)] border-[var(--malachite-tag-error-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-error-border)_65%,transparent)]"
+  }
+}, C = "border-solid text-[var(--malachite-text-muted,rgb(76,75,75))] border-[var(--malachite-card-border,rgb(232,232,232))]", A = {
+  read: {
+    on: "hover:border-[var(--malachite-tag-primary-border)]",
+    mixed: "hover:border-[var(--malachite-tag-primary-border)]",
+    off: "hover:border-[var(--malachite-text-dimmed,rgb(161,161,161))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]"
+  },
+  write: {
+    on: "hover:border-[var(--malachite-tag-warning-border)]",
+    mixed: "hover:border-[var(--malachite-tag-warning-border)]",
+    off: "hover:border-[var(--malachite-text-dimmed,rgb(161,161,161))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]"
+  },
+  delete: {
+    on: "hover:border-[var(--malachite-tag-error-border)]",
+    mixed: "hover:border-[var(--malachite-tag-error-border)]",
+    off: "hover:border-[var(--malachite-text-dimmed,rgb(161,161,161))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]"
+  }
+}, L = {
+  on: "all actions on",
+  mixed: "some actions off",
+  off: "off"
+}, T = (r) => r === "mixed" ? "mixed" : r ? "on" : "off", F = (r, i) => typeof r == "string" ? r : r == null ? void 0 : r[i], O = (r) => {
+  r.preventDefault(), r.stopPropagation();
+}, P = ({
+  value: r,
+  onToggle: i,
+  disabled: n,
+  disabledReason: g,
+  size: b = "default",
+  "aria-label": h,
+  "aria-labelledby": v
+}) => {
+  const p = _();
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      role: "group",
+      "aria-label": h,
+      "aria-labelledby": v,
+      className: "inline-flex shrink-0 items-center gap-1",
+      children: S.map((a) => {
+        const l = r[a], e = T(l), o = !!(n != null && n[a]), t = o ? F(g, a) : void 0, c = `${p}-${a}-reason`, x = e === "off" ? C : $[a][e], u = o ? "cursor-not-allowed opacity-50" : `cursor-pointer ${A[a][e]}`, m = `${s[a].full}: ${L[e]}`;
+        return /* @__PURE__ */ d(
+          w,
+          {
+            text: t ?? m,
+            delay: 0.2,
+            describesTrigger: !1,
+            children: /* @__PURE__ */ f(
+              "button",
+              {
+                type: "button",
+                "aria-label": m,
+                "aria-pressed": l,
+                "aria-disabled": o || void 0,
+                "aria-describedby": t ? c : void 0,
+                onClick: o ? O : () => i(a),
+                className: `${y} ${k} ${E[b]} ${x} ${u}`,
+                children: [
+                  s[a].letter,
+                  t && /* @__PURE__ */ d("span", { id: c, hidden: !0, children: t })
+                ]
+              }
+            )
+          },
+          a
+        );
+      })
+    }
+  );
+};
+export {
+  P as AccessPills,
+  P as default
+};
+//# sourceMappingURL=AccessPills.js.map

package/dist/components/AccessPills.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessPills.js","sources":["../../src/components/AccessPills.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport Tooltip from './Tooltip';\nimport { FOCUS_RING } from './focusRing';\n\nexport type AccessEffect = 'read' | 'write' | 'delete';\n\n/** `'mixed'` is partly on: some, not all, of the effect's actions are allowed. */\nexport type AccessPillState = boolean | 'mixed';\n\n/** `dense` draws the pills smaller, for a narrow screen. */\nexport type AccessPillsSize = 'default' | 'dense';\n\nexport interface AccessPillsProps {\n    value: Record<AccessEffect, AccessPillState>;\n    /** Reports the pill pressed. Cascading the change to the other effects is the caller's call. */\n    onToggle: (effect: AccessEffect) => void;\n    /** An effect with nothing to grant, e.g. a connector with no delete actions. */\n    disabled?: Partial<Record<AccessEffect, boolean>>;\n    /** Why a pill is disabled, per effect or one sentence for all of them. */\n    disabledReason?: string | Partial<Record<AccessEffect, string>>;\n    size?: AccessPillsSize;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst EFFECTS: AccessEffect[] = ['read', 'write', 'delete'];\n\nconst LABELS: Record<AccessEffect, { full: string; letter: string }> = {\n    read: { full: 'Read', letter: 'R' },\n    write: { full: 'Write', letter: 'W' },\n    delete: { full: 'Delete', letter: 'D' },\n};\n\nconst BASE =\n    'inline-flex shrink-0 items-center justify-center border rounded-[var(--malachite-radius-md,6px)] bg-[var(--malachite-card-background,rgb(255,255,255))] font-semibold leading-none text-[length:var(--malachite-font-size-xsmall,11px)] whitespace-nowrap transition-colors duration-150 ease-in-out';\n\nconst SIZE_CLASSES: Record<AccessPillsSize, string> = {\n    default: 'h-6 w-[26px]',\n    dense: 'h-5 w-6',\n};\n\ntype PillLook = 'on' | 'mixed' | 'off';\n\n// Every look names its border style: a bare `border` paints `var(--tw-border-style)`, which a\n// shadow root inherits from whatever ancestor set it. The tints read the same tokens as `Tag`'s\n// primary / warning / error, the colours the dashboard already gives these effects.\nconst LOOK_CLASSES: Record<AccessEffect, Record<Exclude<PillLook, 'off'>, string>> = {\n    read: {\n        on: 'border-solid text-[var(--malachite-tag-primary-foreground)] [background-image:linear-gradient(var(--malachite-tag-primary-background),var(--malachite-tag-primary-background))] border-[var(--malachite-tag-primary-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-primary-border)_35%,transparent)]',\n        mixed: 'border-dashed text-[var(--malachite-tag-primary-foreground)] border-[var(--malachite-tag-primary-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-primary-border)_65%,transparent)]',\n    },\n    write: {\n        on: 'border-solid text-[var(--malachite-tag-warning-foreground)] [background-image:linear-gradient(var(--malachite-tag-warning-background),var(--malachite-tag-warning-background))] border-[var(--malachite-tag-warning-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-warning-border)_35%,transparent)]',\n        mixed: 'border-dashed text-[var(--malachite-tag-warning-foreground)] border-[var(--malachite-tag-warning-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-warning-border)_65%,transparent)]',\n    },\n    delete: {\n        on: 'border-solid text-[var(--malachite-tag-error-foreground)] [background-image:linear-gradient(var(--malachite-tag-error-background),var(--malachite-tag-error-background))] border-[var(--malachite-tag-error-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-error-border)_35%,transparent)]',\n        mixed: 'border-dashed text-[var(--malachite-tag-error-foreground)] border-[var(--malachite-tag-error-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-tag-error-border)_65%,transparent)]',\n    },\n};\n\n// `text-muted`, not `text-secondary`: secondary is 4.2:1 on a light card, short of AA at 11px.\nconst OFF_CLASSES =\n    'border-solid text-[var(--malachite-text-muted,rgb(76,75,75))] border-[var(--malachite-card-border,rgb(232,232,232))]';\n\nconst HOVER_CLASSES: Record<AccessEffect, Record<PillLook, string>> = {\n    read: {\n        on: 'hover:border-[var(--malachite-tag-primary-border)]',\n        mixed: 'hover:border-[var(--malachite-tag-primary-border)]',\n        off: 'hover:border-[var(--malachite-text-dimmed,rgb(161,161,161))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]',\n    },\n    write: {\n        on: 'hover:border-[var(--malachite-tag-warning-border)]',\n        mixed: 'hover:border-[var(--malachite-tag-warning-border)]',\n        off: 'hover:border-[var(--malachite-text-dimmed,rgb(161,161,161))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]',\n    },\n    delete: {\n        on: 'hover:border-[var(--malachite-tag-error-border)]',\n        mixed: 'hover:border-[var(--malachite-tag-error-border)]',\n        off: 'hover:border-[var(--malachite-text-dimmed,rgb(161,161,161))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]',\n    },\n};\n\nconst STATE_TEXT: Record<PillLook, string> = {\n    on: 'all actions on',\n    mixed: 'some actions off',\n    off: 'off',\n};\n\nconst lookOf = (state: AccessPillState): PillLook =>\n    state === 'mixed' ? 'mixed' : state ? 'on' : 'off';\n\nconst reasonFor = (\n    disabledReason: AccessPillsProps['disabledReason'],\n    effect: AccessEffect,\n): string | undefined =>\n    typeof disabledReason === 'string' ? disabledReason : disabledReason?.[effect];\n\n// An aria-disabled button still dispatches clicks, so stop one before a clickable row sees it.\nconst swallowClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n};\n\nconst AccessPills: React.FC<AccessPillsProps> = ({\n    value,\n    onToggle,\n    disabled,\n    disabledReason,\n    size = 'default',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n}) => {\n    const idPrefix = useId();\n\n    return (\n        <div\n            role=\"group\"\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            className=\"inline-flex shrink-0 items-center gap-1\"\n        >\n            {EFFECTS.map((effect) => {\n                const state = value[effect];\n                const look = lookOf(state);\n                const isDisabled = !!disabled?.[effect];\n                const reason = isDisabled ? reasonFor(disabledReason, effect) : undefined;\n                const reasonId = `${idPrefix}-${effect}-reason`;\n                const lookClasses = look === 'off' ? OFF_CLASSES : LOOK_CLASSES[effect][look];\n                const interaction = isDisabled\n                    ? 'cursor-not-allowed opacity-50'\n                    : `cursor-pointer ${HOVER_CLASSES[effect][look]}`;\n\n                const name = `${LABELS[effect].full}: ${STATE_TEXT[look]}`;\n\n                // The tooltip repeats the name (or the reason, already linked below), so it does\n                // not describe the trigger. Always mounted, so toggling `disabled` keeps focus.\n                return (\n                    <Tooltip\n                        key={effect}\n                        text={reason ?? name}\n                        delay={0.2}\n                        describesTrigger={false}\n                    >\n                        <button\n                            type=\"button\"\n                            aria-label={name}\n                            aria-pressed={state}\n                            aria-disabled={isDisabled || undefined}\n                            aria-describedby={reason ? reasonId : undefined}\n                            onClick={isDisabled ? swallowClick : () => onToggle(effect)}\n                            className={`${FOCUS_RING} ${BASE} ${SIZE_CLASSES[size]} ${lookClasses} ${interaction}`}\n                        >\n                            {LABELS[effect].letter}\n                            {reason && (\n                                <span id={reasonId} hidden>\n                                    {reason}\n                                </span>\n                            )}\n                        </button>\n                    </Tooltip>\n                );\n            })}\n        </div>\n    );\n};\n\nexport { AccessPills };\nexport default AccessPills;\n"],"names":["EFFECTS","LABELS","BASE","SIZE_CLASSES","LOOK_CLASSES","OFF_CLASSES","HOVER_CLASSES","STATE_TEXT","lookOf","state","reasonFor","disabledReason","effect","swallowClick","event","AccessPills","value","onToggle","disabled","size","ariaLabel","ariaLabelledBy","idPrefix","useId","jsx","look","isDisabled","reason","reasonId","lookClasses","interaction","name","Tooltip","jsxs","FOCUS_RING"],"mappings":";;;;AAyBA,MAAMA,IAA0B,CAAC,QAAQ,SAAS,QAAQ,GAEpDC,IAAiE;AAAA,EACnE,MAAM,EAAE,MAAM,QAAQ,QAAQ,IAAA;AAAA,EAC9B,OAAO,EAAE,MAAM,SAAS,QAAQ,IAAA;AAAA,EAChC,QAAQ,EAAE,MAAM,UAAU,QAAQ,IAAA;AACtC,GAEMC,IACF,wSAEEC,IAAgD;AAAA,EAClD,SAAS;AAAA,EACT,OAAO;AACX,GAOMC,IAA+E;AAAA,EACjF,MAAM;AAAA,IACF,IAAI;AAAA,IACJ,OAAO;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACH,IAAI;AAAA,IACJ,OAAO;AAAA,EAAA;AAAA,EAEX,QAAQ;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,EAAA;AAEf,GAGMC,IACF,wHAEEC,IAAgE;AAAA,EAClE,MAAM;AAAA,IACF,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACH,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAEb,GAEMC,IAAuC;AAAA,EACzC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACT,GAEMC,IAAS,CAACC,MACZA,MAAU,UAAU,UAAUA,IAAQ,OAAO,OAE3CC,IAAY,CACdC,GACAC,MAEA,OAAOD,KAAmB,WAAWA,IAAiBA,KAAA,gBAAAA,EAAiBC,IAGrEC,IAAe,CAACC,MAA+C;AACjE,EAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA;AACV,GAEMC,IAA0C,CAAC;AAAA,EAC7C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAP;AAAA,EACA,MAAAQ,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,mBAAmBC;AACvB,MAAM;AACF,QAAMC,IAAWC,EAAA;AAEjB,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYJ;AAAA,MACZ,mBAAiBC;AAAA,MACjB,WAAU;AAAA,MAET,UAAArB,EAAQ,IAAI,CAACY,MAAW;AACrB,cAAMH,IAAQO,EAAMJ,CAAM,GACpBa,IAAOjB,EAAOC,CAAK,GACnBiB,IAAa,CAAC,EAACR,KAAA,QAAAA,EAAWN,KAC1Be,IAASD,IAAahB,EAAUC,GAAgBC,CAAM,IAAI,QAC1DgB,IAAW,GAAGN,CAAQ,IAAIV,CAAM,WAChCiB,IAAcJ,MAAS,QAAQpB,IAAcD,EAAaQ,CAAM,EAAEa,CAAI,GACtEK,IAAcJ,IACd,kCACA,kBAAkBpB,EAAcM,CAAM,EAAEa,CAAI,CAAC,IAE7CM,IAAO,GAAG9B,EAAOW,CAAM,EAAE,IAAI,KAAKL,EAAWkB,CAAI,CAAC;AAIxD,eACI,gBAAAD;AAAA,UAACQ;AAAA,UAAA;AAAA,YAEG,MAAML,KAAUI;AAAA,YAChB,OAAO;AAAA,YACP,kBAAkB;AAAA,YAElB,UAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,MAAK;AAAA,gBACL,cAAYF;AAAA,gBACZ,gBAActB;AAAA,gBACd,iBAAeiB,KAAc;AAAA,gBAC7B,oBAAkBC,IAASC,IAAW;AAAA,gBACtC,SAASF,IAAab,IAAe,MAAMI,EAASL,CAAM;AAAA,gBAC1D,WAAW,GAAGsB,CAAU,IAAIhC,CAAI,IAAIC,EAAagB,CAAI,CAAC,IAAIU,CAAW,IAAIC,CAAW;AAAA,gBAEnF,UAAA;AAAA,kBAAA7B,EAAOW,CAAM,EAAE;AAAA,kBACfe,KACG,gBAAAH,EAAC,QAAA,EAAK,IAAII,GAAU,QAAM,IACrB,UAAAD,EAAA,CACL;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAER;AAAA,UApBKf;AAAA,QAAA;AAAA,MAuBjB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/index.d.ts

@@ -9,6 +9,29 @@ import { NamedExoticComponent } from 'react';
 import { ReactNode } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 
+export declare type AccessEffect = 'read' | 'write' | 'delete';
+
+export declare const AccessPills: default_2.FC<AccessPillsProps>;
+
+export declare interface AccessPillsProps {
+    value: Record<AccessEffect, AccessPillState>;
+    /** Reports the pill pressed. Cascading the change to the other effects is the caller's call. */
+    onToggle: (effect: AccessEffect) => void;
+    /** An effect with nothing to grant, e.g. a connector with no delete actions. */
+    disabled?: Partial<Record<AccessEffect, boolean>>;
+    /** Why a pill is disabled, per effect or one sentence for all of them. */
+    disabledReason?: string | Partial<Record<AccessEffect, string>>;
+    size?: AccessPillsSize;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+
+/** `dense` draws the pills smaller, for a narrow screen. */
+export declare type AccessPillsSize = 'default' | 'dense';
+
+/** `'mixed'` is partly on: some, not all, of the effect's actions are allowed. */
+export declare type AccessPillState = boolean | 'mixed';
+
 export declare const Accordion: default_2.FC<AccordionProps>;
 
 declare interface AccordionBaseProps {