@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/blocks/settings-notifications-01/settings-notifications.js

@@ -0,0 +1,202 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Field, FieldDescription, FieldLabel } from '../../components/ui/field.js';
+import { Section, SectionHeading, childLevel, } from '../../components/ui/section.js';
+import { Switch } from '../../components/ui/switch.js';
+/**
+ * The refusals, so that a preferences surface never renders a control it cannot
+ * explain.
+ *
+ * A switch that moves and reports nothing, a switch that reports a move and
+ * cannot move, an event marked as one the product cannot work without and no
+ * words for the reader on either side of that, and a required set with no note
+ * saying so anywhere on the page. Each is a caller's mistake rather than a
+ * request, so each throws in a console rather than rendering the quiet version of
+ * itself.
+ */
+function assertProps(props) {
+    const { channels, onToggle, updateLabel, disabledLabel } = props;
+    if (onToggle !== undefined && updateLabel === undefined) {
+        throw new Error('SettingsNotifications01: onToggle was passed with no updateLabel, so every switch would be announced ' +
+            'by the name of the event alone. That name says what the control is, not what pressing it does, and ' +
+            'a reader who cannot tell those two things apart has to press the control to find out.');
+    }
+    if (onToggle === undefined && updateLabel !== undefined) {
+        throw new Error('SettingsNotifications01: updateLabel was passed with no onToggle, so the sentences would be composed ' +
+            'and then discarded, which is a caller who believes they have named the switches on a surface that ' +
+            'has none.');
+    }
+    for (const channel of channels) {
+        if (channel.events.length === 0) {
+            throw new Error(`SettingsNotifications01: the channel ${JSON.stringify(channel.name)} carries no events, so the group ` +
+                'would be a heading with a line under it and nothing to decide. Omit the channel, or give it the ' +
+                'events it is for.');
+        }
+        for (const event of channel.events) {
+            if (event.required === true &&
+                (event.requiredLabel === undefined || event.requiredLabel.trim() === '')) {
+                throw new Error('SettingsNotifications01: an event is marked required and passed no requiredLabel, so the control ' +
+                    'that will not move would say nothing about why. Pass the mark, and the note on the section.');
+            }
+        }
+    }
+    const anyRequired = channels.some((channel) => channel.events.some((event) => event.required === true));
+    if (anyRequired && (disabledLabel === undefined || disabledLabel.trim() === '')) {
+        throw new Error('SettingsNotifications01: an event is marked required and no disabledLabel was passed, so a reader ' +
+            'would meet a control that will not move with no sentence anywhere on the page explaining that a ' +
+            'product decision is what stopped them. Pass the note.');
+    }
+}
+/**
+ * Per-channel notification preferences: a channel, a line about it, a set of
+ * switches for the events on it, and a note where the product has a standing
+ * requirement of its own.
+ *
+ * **This is the Block where a design system's care is most visible and least
+ * appreciated, because the reader came to change one thing and leave.** A
+ * preferences surface is the densest set of controls a product puts in front of a
+ * reader, and it is the one they visit least often and trust most. They are not
+ * reading it, they are hunting. They want the switch for the one event and they
+ * want to be sure of three things when they find it: that this is the right
+ * event, that pressing it does what they think, and that it did what they wanted.
+ * Everything below is in service of the third of those, which is the one a
+ * surface usually gets wrong, usually by being optimistic.
+ *
+ * **The `required` flag is the load-bearing decision, and the set is a prop
+ * because a design system that fixed the list would be deciding for every
+ * product which of its events are load-bearing.** The argument has two halves and
+ * both matter. A preference surface where every control is optional is a surface
+ * that will let a reader turn off something the product cannot work without: the
+ * reader is told the switch is theirs, presses it, the product stores the answer,
+ * and the failure arrives days later in a different part of the product with
+ * nothing on this page to point at. The reader is right that the switch was
+ * there and the product is right that the event was needed, and neither of them
+ * is wrong, which is the worst possible place for a disagreement to live. So a
+ * required set has to exist. And the fixed-list alternative is worse than the
+ * problem: this package does not know what any product cannot work without. A
+ * product whose password reset email is load-bearing and a product that mails
+ * nothing at all are both real, and a Block that shipped the first product's list
+ * would install it into the second, where a reader could turn off a notification
+ * that does not exist and a support ticket would arrive with no cause anyone can
+ * find. So the flag is on the event, the note is the caller's, and the
+ * consequence is that a consumer wiring this Block up has to decide which of their
+ * own events are load-bearing. That is a sentence worth naming rather than
+ * hiding: it is a decision, and it is theirs.
+ *
+ * **A required control is drawn read-only rather than disabled, and the reason is
+ * that a disabled control is not in the tab order.** A keyboard reader who tabs
+ * across a preferences surface with three required events meets three holes where
+ * three controls used to be. They cannot find the setting, they cannot come back
+ * to it, and there is nothing in the document to tell them the setting exists at
+ * all, so the most likely reading is that the page is broken or that the product
+ * has hidden something from them. Both are worse than the truth, which is that a
+ * decision has been made on their behalf. So the control keeps its place in the
+ * order, keeps its state announced, and takes the note as its description: the
+ * reader meets it, hears that it will not move, and hears why. The cost is
+ * stated rather than hidden, because it is real: a read-only control is drawn in
+ * the same ink as a live one, so the mark beside it and the note under the title
+ * are what carry the fact, and there is no flag on this package that dims it. A
+ * caller who wants the visual weight of a disabled control has to choose between
+ * that and the focus hole, and the focus hole is the worse of the two, so the
+ * decision here is not that read-only is better but that it is less bad.
+ *
+ * **The switch's accessible name says what pressing it will do, and the sentence
+ * is the caller's.** A switch announces its state, so a reader who meets a
+ * control named "Deploys" with the state off knows the current answer and has to
+ * work out the consequence themselves, which is the one step a switch exists to
+ * remove. So the name is composed from the state the control would move to, and
+ * it is a function rather than a record of strings because the honest sentence
+ * names the event, the channel and sometimes a qualification, and because a
+ * consumer in three languages has the sentence in three languages and Prism has
+ * none of them. The name is not consulted for a required event, and that is a
+ * consequence rather than an omission: a sentence describing what pressing a
+ * read-only control would do is a claim about a thing that cannot happen, and a
+ * Block that printed one would be the defect it exists to prevent.
+ *
+ * **The note is described once and repeated by reference, so every read-only
+ * control on the page carries it.** It is drawn at the top rather than repeated on
+ * each row, for the reason `list-panel` states for a count: it is the product's
+ * standing reason for the whole set, so a reader who meets it once has met it. The
+ * `aria-describedby` is what makes it true per control, and that is a real
+ * difference rather than a nicety: a sentence a reader has to go and find is a
+ * sentence most readers do not go and find, and a control that will not move with
+ * an unfound reason behind it is exactly the control a reader reports as broken.
+ * The same attribute carries the event's own description, which was drawn and never
+ * referred to, so the two are assembled rather than chosen between: a read-only
+ * event has both, and a reader who meets one without the other has to work out
+ * which half they are missing.
+ *
+ * **A switch is the control, and not a checkbox and not a button.** `Switch` is
+ * composed for all three reasons the Component's own JSDoc gives, and the third
+ * is the one that matters on this surface: a switch takes effect immediately, so
+ * there is no save control on the page for a reader to press and no state in which
+ * the page is holding changes the reader has not committed. That is the whole
+ * reason a preferences surface is drawn as switches rather than as a form, and
+ * re-deriving it here would mean a hand-written checkbox with no keyboard model, a
+ * hidden input that may not submit, and a page where a reader has to look for a
+ * button to find out whether they pressed the right thing.
+ *
+ * **The Block holds no preference state, so a failed change is the caller's to
+ * show.** `event.on` is the truth, the switch is controlled from it, and
+ * `onToggle` is a request. A Block that moved the switch and rolled it back would
+ * show a reader a preference the product rejected, and a reader who left the page
+ * in the moment between would leave believing they had turned something off that
+ * was still on. The arrangement is the one a server action wants, and it is
+ * stated rather than hidden: with a slow network the switch does not move until
+ * the product answers, which is slower than the alternative and the only version
+ * of it that is not lying.
+ *
+ * It is a client Component, and the directive is unconditional: a surface that
+ * attaches a handler owns the JavaScript that carries it, and the directive is on
+ * the module rather than in a leaf so a consumer composing a server page gets the
+ * boundary in one place they can see. `Switch` is the only client leaf it draws,
+ * and it is a client leaf for the same reason.
+ */
+export function SettingsNotifications01({ eyebrow, title, description, channels, onToggle, updateLabel, disabledLabel, empty, headingLevel = 'h2', className, }) {
+    assertProps({ channels, onToggle, updateLabel, disabledLabel });
+    // A channel is a group inside the section, so its name is one level below the
+    // section's own heading and travels with it when the Block is composed deeper.
+    const ChannelTitle = childLevel(headingLevel);
+    const base = useId();
+    const noteId = disabledLabel === undefined ? undefined : `${base}-note`;
+    // Whether there is anything at all to decide, which is a fact about the data
+    // rather than a prop a caller has to keep in step with the channels.
+    const hasEvents = channels.some((channel) => channel.events.length > 0);
+    if (!hasEvents) {
+        return (_jsxs(Section, { className: className, "data-slot": "settings-notifications", children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description }), _jsx("p", { "data-slot": "settings-notifications-empty", className: "text-muted-foreground text-pretty text-sm", children: empty })] }));
+    }
+    return (_jsxs(Section, { className: className, "data-slot": "settings-notifications", children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-8" }), noteId === undefined ? null : (_jsx("p", { id: noteId, "data-slot": "settings-notifications-note", className: "text-muted-foreground mb-8 text-pretty text-sm", children: disabledLabel })), _jsx("div", { "data-slot": "settings-notifications-channels", className: "flex flex-col gap-10", children: channels.map((channel) => {
+                    if (channel.events.length === 0)
+                        return null;
+                    return (_jsxs("section", { "data-slot": "settings-notifications-channel", "data-channel": channel.id, className: "flex flex-col gap-5", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(ChannelTitle, { "data-slot": "settings-notifications-channel-name", className: "text-lg font-semibold tracking-tight", children: channel.name }), channel.description === undefined ? null : (_jsx("p", { className: "text-muted-foreground text-pretty text-sm", children: channel.description }))] }), _jsx("ul", { "data-slot": "settings-notifications-events", className: "flex flex-col", children: channel.events.map((event) => {
+                                    const controlId = `${base}-${channel.id}-${event.id}`;
+                                    const required = event.required === true;
+                                    const descriptionId = event.description === undefined ? undefined : `${controlId}-description`;
+                                    /*
+                                     * Up to two referrers, one attribute, assembled rather than chosen
+                                     * between. The event's own description says what the event is and
+                                     * what it carries, and the note says why a control will not move; a
+                                     * read-only event has both, and a reader who meets one without the
+                                     * other has to guess which half they are missing. Assembled from
+                                     * templates rather than from a `join`, for the reason
+                                     * `MultiCombobox` gives for its own pair: a bare separator literal
+                                     * is a string the copy gate reads as a space somebody typed.
+                                     */
+                                    const describedBy = descriptionId === undefined
+                                        ? required
+                                            ? noteId
+                                            : undefined
+                                        : required && noteId !== undefined
+                                            ? `${descriptionId} ${noteId}`
+                                            : descriptionId;
+                                    const describedByIds = describedBy === '' ? undefined : describedBy;
+                                    return (_jsxs("li", { "data-slot": "settings-notifications-event", "data-event": event.id, "data-required": required ? 'true' : undefined, className: "border-border flex flex-col gap-3 border-b py-4 last:border-b-0 sm:flex-row sm:items-start sm:justify-between sm:gap-6", children: [_jsxs(Field, { className: "min-w-0 gap-1", children: [_jsx(FieldLabel, { htmlFor: controlId, className: "text-base", children: event.label }), event.description === undefined ? null : (_jsx(FieldDescription, { id: descriptionId, children: event.description }))] }), _jsxs("div", { "data-slot": "settings-notifications-control", className: "flex shrink-0 items-center gap-3 pt-0.5 sm:pt-1", children: [required && event.requiredLabel === undefined ? null : (_jsx("span", { "data-slot": "settings-notifications-required", className: "text-muted-foreground text-xs font-medium", children: event.requiredLabel })), _jsx(Switch, { id: controlId, checked: event.on, readOnly: required, "aria-label": required || updateLabel === undefined
+                                                            ? undefined
+                                                            : updateLabel(channel, event, !event.on), "aria-describedby": describedByIds, onCheckedChange: onToggle === undefined
+                                                            ? undefined
+                                                            : (next) => onToggle(channel.id, event.id, next) })] })] }, event.id));
+                                }) })] }, channel.id));
+                }) })] }));
+}
+export default SettingsNotifications01;

package/dist/blocks/settings-panel-01/index.d.ts

@@ -1,3 +1,3 @@
-export { SettingsPanel01, default } from './settings-panel';
-export type { SettingsPanel01Props, SettingsPanelField, SettingsPanelOption, SettingsPanelSection, } from './settings-panel';
+export { SettingsPanel01, default } from './settings-panel.js';
+export type { SettingsPanel01Props, SettingsPanelField, SettingsPanelOption, SettingsPanelSection, } from './settings-panel.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/blocks/settings-panel-01/index.js

@@ -1 +1 @@
-export { SettingsPanel01, default } from './settings-panel';
+export { SettingsPanel01, default } from './settings-panel.js';

package/dist/blocks/settings-panel-01/settings-panel.d.ts

@@ -1,4 +1,5 @@
 import { type FormEvent, type ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
 export type SettingsPanelOption = {
     label: string;
     value: string;
@@ -44,6 +45,15 @@ export type SettingsPanelSection = {
 };
 export type SettingsPanel01Props = {
     title: string;
+    /**
+     * Heading level for the card's title. See `HeadingLevel`.
+     *
+     * This Block draws no Section heading of its own, so the card title is the one
+     * heading it renders and takes the level directly rather than a step below one.
+     * The groups inside take their level from this one, so moving the panel in a
+     * document moves every heading in it together.
+     */
+    headingLevel?: HeadingLevel;
     description?: string;
     /** The settings groups, each rendered with a heading and its own fields. */
     sections: SettingsPanelSection[];
@@ -66,6 +76,6 @@ export type SettingsPanel01Props = {
  * block renders the card, the groups and the footer; it owns no values and no
  * copy, so a consumer wires it to whatever form state or mutation they use.
  */
-export declare function SettingsPanel01({ title, description, sections, submitLabel, onSubmit, secondaryAction, footer, }: SettingsPanel01Props): import("react").JSX.Element;
+export declare function SettingsPanel01({ title, description, sections, submitLabel, onSubmit, secondaryAction, footer, headingLevel, }: SettingsPanel01Props): import("react").JSX.Element;
 export default SettingsPanel01;
 //# sourceMappingURL=settings-panel.d.ts.map

package/dist/blocks/settings-panel-01/settings-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-panel.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-panel-01/settings-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AA6BhE,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAElE,KAAK,sBAAsB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAC1B,CAAC,sBAAsB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAC,GACF,CAAC,sBAAsB,GAAG;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAC,GACF,CAAC,sBAAsB,GAAG;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7C,CAAC,GACF,CAAC,sBAAsB,GAAG;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAC,CAAA;AAEN,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4EAA4E;IAC5E,QAAQ,EAAE,oBAAoB,EAAE,CAAA;IAChC,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IACtD,2CAA2C;IAC3C,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAA;IACzD,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAyFD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,eAAe,EACf,MAAM,GACP,EAAE,oBAAoB,+BAmDtB;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"settings-panel.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-panel-01/settings-panel.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/settings-panel-01/settings-panel.js

@@ -1,14 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { Button } from '../../components/ui/button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card';
-import { Field, FieldDescription, FieldGroup, FieldLabel, } from '../../components/ui/field';
-import { Input } from '../../components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../components/ui/select';
-import { Separator } from '../../components/ui/separator';
-import { Switch } from '../../components/ui/switch';
-import { Textarea } from '../../components/ui/textarea';
+import { Button } from '../../components/ui/button.js';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card.js';
+import { Field, FieldDescription, FieldGroup, FieldLabel, } from '../../components/ui/field.js';
+import { Input } from '../../components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../components/ui/select.js';
+import { Separator } from '../../components/ui/separator.js';
+import { Switch } from '../../components/ui/switch.js';
+import { childLevel } from '../../components/ui/section.js';
+import { Textarea } from '../../components/ui/textarea.js';
 function SettingsField({ field }) {
     if (field.kind === 'switch') {
         return (_jsxs(Field, { className: "flex-row items-center justify-between gap-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(FieldLabel, { htmlFor: field.id, children: field.label }), field.description ? (_jsx(FieldDescription, { children: field.description })) : null] }), _jsx(Switch, { id: field.id, checked: field.checked, defaultChecked: field.defaultChecked, onCheckedChange: field.onCheckedChange, disabled: field.disabled })] }));
@@ -31,8 +32,12 @@ function SettingsField({ field }) {
  * block renders the card, the groups and the footer; it owns no values and no
  * copy, so a consumer wires it to whatever form state or mutation they use.
  */
-export function SettingsPanel01({ title, description, sections, submitLabel, onSubmit, secondaryAction, footer, }) {
+export function SettingsPanel01({ title, description, sections, submitLabel, onSubmit, secondaryAction, footer, headingLevel = 'h2', }) {
+    // The panel title is the one heading the panel renders, and a group inside it is
+    // one step below, so the whole outline moves together when the panel does.
+    const Title = headingLevel;
+    const GroupTitle = childLevel(headingLevel);
     const hasFooter = Boolean(submitLabel || secondaryAction || footer);
-    return (_jsx("form", { onSubmit: onSubmit, className: "w-full", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: title }), description ? _jsx(CardDescription, { children: description }) : null] }), _jsx(CardContent, { className: "flex flex-col", children: sections.map((section, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Separator, { className: "my-6" }) : null, _jsxs("section", { className: "flex flex-col gap-4", "aria-labelledby": `${section.id}-heading`, children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h3", { id: `${section.id}-heading`, className: "text-lg font-semibold tracking-tight", children: section.title }), section.description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: section.description })) : null] }), _jsx(FieldGroup, { children: section.fields.map((field) => (_jsx(SettingsField, { field: field }, field.id))) })] })] }, section.id))) }), hasFooter ? (_jsxs(CardFooter, { className: "justify-end gap-2", children: [footer, secondaryAction ? (_jsx(Button, { type: "button", variant: "outline", onClick: secondaryAction.onClick, children: secondaryAction.label })) : null, submitLabel ? _jsx(Button, { type: "submit", children: submitLabel }) : null] })) : null] }) }));
+    return (_jsx("form", { onSubmit: onSubmit, className: "w-full", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsx(Title, { children: title }) }), description ? _jsx(CardDescription, { children: description }) : null] }), _jsx(CardContent, { className: "flex flex-col", children: sections.map((section, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Separator, { className: "my-6" }) : null, _jsxs("section", { className: "flex flex-col gap-4", "aria-labelledby": `${section.id}-heading`, children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(GroupTitle, { id: `${section.id}-heading`, className: "text-lg font-semibold tracking-tight", children: section.title }), section.description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: section.description })) : null] }), _jsx(FieldGroup, { children: section.fields.map((field) => (_jsx(SettingsField, { field: field }, field.id))) })] })] }, section.id))) }), hasFooter ? (_jsxs(CardFooter, { className: "justify-end gap-2", children: [footer, secondaryAction ? (_jsx(Button, { type: "button", variant: "outline", onClick: secondaryAction.onClick, children: secondaryAction.label })) : null, submitLabel ? _jsx(Button, { type: "submit", children: submitLabel }) : null] })) : null] }) }));
 }
 export default SettingsPanel01;

package/dist/blocks/settings-security-01/index.d.ts

@@ -0,0 +1,3 @@
+export { SettingsSecurity01, default } from './settings-security.js';
+export type { SettingsSecurity01Props, SettingsSecurityChangePassword, SettingsSecurityLabels, SettingsSecurityMethod, SettingsSecurityMethodState, SettingsSecurityPasswordField, SettingsSecuritySession, SettingsSecurityTwoFactor, SettingsSecurityTwoFactorState, } from './settings-security.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/settings-security-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-security-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAMjE,YAAY,EACV,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,sBAAsB,EACtB,2BAA2B,EAC3B,6BAA6B,EAC7B,uBAAuB,EACvB,yBAAyB,EACzB,8BAA8B,GAC/B,MAAM,qBAAqB,CAAA"}

package/dist/blocks/settings-security-01/index.js

@@ -0,0 +1 @@
+export { SettingsSecurity01, default } from './settings-security.js';