@hanzo/ui 8.0.66 → 8.0.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/backends/gui/accordion.cjs +69 -0
- package/dist/backends/gui/accordion.d.ts +57 -0
- package/dist/backends/gui/accordion.d.ts.map +1 -0
- package/dist/backends/gui/accordion.js +64 -0
- package/dist/backends/gui/accordion.js.map +1 -0
- package/dist/backends/gui/alert-dialog.cjs +91 -0
- package/dist/backends/gui/alert-dialog.d.ts +77 -0
- package/dist/backends/gui/alert-dialog.d.ts.map +1 -0
- package/dist/backends/gui/alert-dialog.js +79 -0
- package/dist/backends/gui/alert-dialog.js.map +1 -0
- package/dist/backends/gui/context-menu.cjs +189 -0
- package/dist/backends/gui/context-menu.d.ts +116 -0
- package/dist/backends/gui/context-menu.d.ts.map +1 -0
- package/dist/backends/gui/context-menu.js +140 -0
- package/dist/backends/gui/context-menu.js.map +1 -0
- package/dist/backends/gui/dropdown-menu.d.ts +1 -1
- package/dist/backends/gui/hover-card.cjs +76 -0
- package/dist/backends/gui/hover-card.d.ts +57 -0
- package/dist/backends/gui/hover-card.d.ts.map +1 -0
- package/dist/backends/gui/hover-card.js +72 -0
- package/dist/backends/gui/hover-card.js.map +1 -0
- package/dist/backends/gui/index.cjs +53 -3
- package/dist/backends/gui/index.d.ts +7 -1
- package/dist/backends/gui/index.d.ts.map +1 -1
- package/dist/backends/gui/index.js +12 -1
- package/dist/backends/gui/index.js.map +1 -1
- package/dist/backends/gui/layout.cjs +3 -2
- package/dist/backends/gui/layout.d.ts +1 -1
- package/dist/backends/gui/layout.d.ts.map +1 -1
- package/dist/backends/gui/layout.js +2 -2
- package/dist/backends/gui/layout.js.map +1 -1
- package/dist/backends/gui/radio-group.cjs +47 -0
- package/dist/backends/gui/radio-group.d.ts +36 -0
- package/dist/backends/gui/radio-group.d.ts.map +1 -0
- package/dist/backends/gui/radio-group.js +44 -0
- package/dist/backends/gui/radio-group.js.map +1 -0
- package/dist/backends/gui/toggle-group.cjs +114 -0
- package/dist/backends/gui/toggle-group.d.ts +57 -0
- package/dist/backends/gui/toggle-group.d.ts.map +1 -0
- package/dist/backends/gui/toggle-group.js +112 -0
- package/dist/backends/gui/toggle-group.js.map +1 -0
- package/dist/gallery.cjs +2 -2
- package/dist/gallery.d.ts.map +1 -1
- package/dist/gallery.js +3 -3
- package/dist/gallery.js.map +1 -1
- package/dist/glass.css +117 -0
- package/dist/gui-config.cjs +76 -43
- package/dist/gui-config.d.ts +204 -204
- package/dist/gui-config.d.ts.map +1 -1
- package/dist/gui-config.js +76 -43
- package/dist/gui-config.js.map +1 -1
- package/dist/index.cjs +57 -1
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +18 -1
- package/dist/index.js.map +1 -1
- package/dist/primitives/Accordion.cjs +8 -0
- package/dist/primitives/Accordion.d.ts +2 -0
- package/dist/primitives/Accordion.d.ts.map +1 -0
- package/dist/primitives/Accordion.js +5 -0
- package/dist/primitives/Accordion.js.map +1 -0
- package/dist/primitives/AccordionContent.cjs +8 -0
- package/dist/primitives/AccordionContent.d.ts +2 -0
- package/dist/primitives/AccordionContent.d.ts.map +1 -0
- package/dist/primitives/AccordionContent.js +5 -0
- package/dist/primitives/AccordionContent.js.map +1 -0
- package/dist/primitives/AccordionItem.cjs +8 -0
- package/dist/primitives/AccordionItem.d.ts +2 -0
- package/dist/primitives/AccordionItem.d.ts.map +1 -0
- package/dist/primitives/AccordionItem.js +5 -0
- package/dist/primitives/AccordionItem.js.map +1 -0
- package/dist/primitives/AccordionTrigger.cjs +8 -0
- package/dist/primitives/AccordionTrigger.d.ts +2 -0
- package/dist/primitives/AccordionTrigger.d.ts.map +1 -0
- package/dist/primitives/AccordionTrigger.js +5 -0
- package/dist/primitives/AccordionTrigger.js.map +1 -0
- package/dist/primitives/AlertDialog.cjs +8 -0
- package/dist/primitives/AlertDialog.d.ts +2 -0
- package/dist/primitives/AlertDialog.d.ts.map +1 -0
- package/dist/primitives/AlertDialog.js +5 -0
- package/dist/primitives/AlertDialog.js.map +1 -0
- package/dist/primitives/AlertDialogAction.cjs +8 -0
- package/dist/primitives/AlertDialogAction.d.ts +2 -0
- package/dist/primitives/AlertDialogAction.d.ts.map +1 -0
- package/dist/primitives/AlertDialogAction.js +5 -0
- package/dist/primitives/AlertDialogAction.js.map +1 -0
- package/dist/primitives/AlertDialogCancel.cjs +8 -0
- package/dist/primitives/AlertDialogCancel.d.ts +2 -0
- package/dist/primitives/AlertDialogCancel.d.ts.map +1 -0
- package/dist/primitives/AlertDialogCancel.js +5 -0
- package/dist/primitives/AlertDialogCancel.js.map +1 -0
- package/dist/primitives/AlertDialogContent.cjs +8 -0
- package/dist/primitives/AlertDialogContent.d.ts +2 -0
- package/dist/primitives/AlertDialogContent.d.ts.map +1 -0
- package/dist/primitives/AlertDialogContent.js +5 -0
- package/dist/primitives/AlertDialogContent.js.map +1 -0
- package/dist/primitives/AlertDialogDescription.cjs +8 -0
- package/dist/primitives/AlertDialogDescription.d.ts +2 -0
- package/dist/primitives/AlertDialogDescription.d.ts.map +1 -0
- package/dist/primitives/AlertDialogDescription.js +5 -0
- package/dist/primitives/AlertDialogDescription.js.map +1 -0
- package/dist/primitives/AlertDialogFooter.cjs +8 -0
- package/dist/primitives/AlertDialogFooter.d.ts +2 -0
- package/dist/primitives/AlertDialogFooter.d.ts.map +1 -0
- package/dist/primitives/AlertDialogFooter.js +5 -0
- package/dist/primitives/AlertDialogFooter.js.map +1 -0
- package/dist/primitives/AlertDialogHeader.cjs +8 -0
- package/dist/primitives/AlertDialogHeader.d.ts +2 -0
- package/dist/primitives/AlertDialogHeader.d.ts.map +1 -0
- package/dist/primitives/AlertDialogHeader.js +5 -0
- package/dist/primitives/AlertDialogHeader.js.map +1 -0
- package/dist/primitives/AlertDialogOverlay.cjs +8 -0
- package/dist/primitives/AlertDialogOverlay.d.ts +2 -0
- package/dist/primitives/AlertDialogOverlay.d.ts.map +1 -0
- package/dist/primitives/AlertDialogOverlay.js +5 -0
- package/dist/primitives/AlertDialogOverlay.js.map +1 -0
- package/dist/primitives/AlertDialogPortal.cjs +8 -0
- package/dist/primitives/AlertDialogPortal.d.ts +2 -0
- package/dist/primitives/AlertDialogPortal.d.ts.map +1 -0
- package/dist/primitives/AlertDialogPortal.js +5 -0
- package/dist/primitives/AlertDialogPortal.js.map +1 -0
- package/dist/primitives/AlertDialogTitle.cjs +8 -0
- package/dist/primitives/AlertDialogTitle.d.ts +2 -0
- package/dist/primitives/AlertDialogTitle.d.ts.map +1 -0
- package/dist/primitives/AlertDialogTitle.js +5 -0
- package/dist/primitives/AlertDialogTitle.js.map +1 -0
- package/dist/primitives/AlertDialogTrigger.cjs +8 -0
- package/dist/primitives/AlertDialogTrigger.d.ts +2 -0
- package/dist/primitives/AlertDialogTrigger.d.ts.map +1 -0
- package/dist/primitives/AlertDialogTrigger.js +5 -0
- package/dist/primitives/AlertDialogTrigger.js.map +1 -0
- package/dist/primitives/Anchor.cjs +8 -0
- package/dist/primitives/Anchor.d.ts +2 -0
- package/dist/primitives/Anchor.d.ts.map +1 -0
- package/dist/primitives/Anchor.js +5 -0
- package/dist/primitives/Anchor.js.map +1 -0
- package/dist/primitives/HoverCard.cjs +8 -0
- package/dist/primitives/HoverCard.d.ts +2 -0
- package/dist/primitives/HoverCard.d.ts.map +1 -0
- package/dist/primitives/HoverCard.js +5 -0
- package/dist/primitives/HoverCard.js.map +1 -0
- package/dist/primitives/HoverCardContent.cjs +8 -0
- package/dist/primitives/HoverCardContent.d.ts +2 -0
- package/dist/primitives/HoverCardContent.d.ts.map +1 -0
- package/dist/primitives/HoverCardContent.js +5 -0
- package/dist/primitives/HoverCardContent.js.map +1 -0
- package/dist/primitives/HoverCardTrigger.cjs +8 -0
- package/dist/primitives/HoverCardTrigger.d.ts +2 -0
- package/dist/primitives/HoverCardTrigger.d.ts.map +1 -0
- package/dist/primitives/HoverCardTrigger.js +5 -0
- package/dist/primitives/HoverCardTrigger.js.map +1 -0
- package/dist/primitives/RadioGroup.cjs +8 -0
- package/dist/primitives/RadioGroup.d.ts +2 -0
- package/dist/primitives/RadioGroup.d.ts.map +1 -0
- package/dist/primitives/RadioGroup.js +5 -0
- package/dist/primitives/RadioGroup.js.map +1 -0
- package/dist/primitives/RadioGroupItem.cjs +8 -0
- package/dist/primitives/RadioGroupItem.d.ts +2 -0
- package/dist/primitives/RadioGroupItem.d.ts.map +1 -0
- package/dist/primitives/RadioGroupItem.js +5 -0
- package/dist/primitives/RadioGroupItem.js.map +1 -0
- package/dist/primitives/ToggleGroup.cjs +8 -0
- package/dist/primitives/ToggleGroup.d.ts +2 -0
- package/dist/primitives/ToggleGroup.d.ts.map +1 -0
- package/dist/primitives/ToggleGroup.js +5 -0
- package/dist/primitives/ToggleGroup.js.map +1 -0
- package/dist/primitives/ToggleGroupItem.cjs +8 -0
- package/dist/primitives/ToggleGroupItem.d.ts +2 -0
- package/dist/primitives/ToggleGroupItem.d.ts.map +1 -0
- package/dist/primitives/ToggleGroupItem.js +5 -0
- package/dist/primitives/ToggleGroupItem.js.map +1 -0
- package/dist/product/AppHeader.cjs +3 -3
- package/dist/product/AppHeader.js +3 -3
- package/dist/product/CommerceResource.cjs +1 -1
- package/dist/product/CommerceResource.js +1 -1
- package/dist/product/ConfirmDelete.cjs +1 -1
- package/dist/product/ConfirmDelete.js +1 -1
- package/dist/product/EmptyState.cjs +1 -1
- package/dist/product/EmptyState.js +1 -1
- package/dist/product/Field.cjs +8 -3
- package/dist/product/Field.d.ts.map +1 -1
- package/dist/product/Field.js +8 -3
- package/dist/product/Field.js.map +1 -1
- package/dist/product/Filters.cjs +1 -1
- package/dist/product/Filters.js +1 -1
- package/dist/product/OrgSwitcher.cjs +2 -2
- package/dist/product/OrgSwitcher.js +2 -2
- package/dist/product/Pagination.cjs +1 -1
- package/dist/product/Pagination.js +1 -1
- package/dist/product/PrimaryButton.cjs +12 -0
- package/dist/product/PrimaryButton.d.ts.map +1 -1
- package/dist/product/PrimaryButton.js +12 -0
- package/dist/product/PrimaryButton.js.map +1 -1
- package/dist/product/UserMenu.cjs +1 -1
- package/dist/product/UserMenu.js +1 -1
- package/dist/product/social/PostCard.cjs +1 -1
- package/dist/product/social/PostCard.js +1 -1
- package/dist/styles.css +244 -45
- package/dist/theme.css +190 -41
- package/package.json +2 -2
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.AccordionContent = exports.AccordionTrigger = exports.AccordionItem = exports.Accordion = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
/**
|
|
7
|
+
* Accordion — @hanzogui/accordion's five parts under the four shadcn names.
|
|
8
|
+
*
|
|
9
|
+
* The behaviour is entirely the primitive's and nothing here re-implements any
|
|
10
|
+
* of it: the roving Arrow/Home/End focus lives in gui's `Accordion` root,
|
|
11
|
+
* `aria-expanded` + `aria-controls` on `Collapsible.Trigger`, `role="region"` +
|
|
12
|
+
* `aria-labelledby` on `Accordion.Content`, and `aria-disabled` on a row that is
|
|
13
|
+
* open in a non-collapsible single accordion. This file flattens the compound
|
|
14
|
+
* into the four names and corrects four things:
|
|
15
|
+
*
|
|
16
|
+
* 1. gui's `Accordion.Header` renders an `<h1>` at `size: '$10'`. An accordion
|
|
17
|
+
* is a list of sections INSIDE a page that already has a title, so every
|
|
18
|
+
* item shipped a competing document heading and a screen reader's heading
|
|
19
|
+
* list came out as N level-1s. Radix's default is `<h3>`; `headingLevel`
|
|
20
|
+
* re-hosts it (and sets the matching `aria-level`, which gui's inherited
|
|
21
|
+
* `role="heading"` requires to be valid) so a call site can place the row in
|
|
22
|
+
* its own outline.
|
|
23
|
+
*
|
|
24
|
+
* 2. `unstyled` means gui applies nothing — which on web leaves the UA's own
|
|
25
|
+
* button chrome, and a native `<button>` is #efefef with a 2px outset black
|
|
26
|
+
* border. Unstyled must mean "no chrome", not "the browser's chrome". Same
|
|
27
|
+
* correction `collapsible.tsx` makes, for the same primitive underneath.
|
|
28
|
+
*
|
|
29
|
+
* 3. The chevron has to know whether its row is open, and gui exports no item
|
|
30
|
+
* context. `Collapsible.Trigger` renders a FUNCTION child with `{ open }` —
|
|
31
|
+
* that is the only seam, and it is typed as `ReactNode`, hence the one cast
|
|
32
|
+
* below. Reading `data-state` from CSS instead is not available to us: gui
|
|
33
|
+
* compiles style props to atomic classes and has no parent-state selector,
|
|
34
|
+
* and a Tailwind `[data-state=open]>svg` rule loses to gui's runtime sheet.
|
|
35
|
+
*
|
|
36
|
+
* 4. That trigger is a BARE `<button>`, and a bare button inside a form is a
|
|
37
|
+
* SUBMIT button — an accordion in a settings form posted the form every
|
|
38
|
+
* time someone opened a section. `type="button"`, declared on the props for
|
|
39
|
+
* the same reason `Button` declares it: gui's props come from the
|
|
40
|
+
* cross-platform stack and name no DOM attribute, so it reaches the element
|
|
41
|
+
* but does not type.
|
|
42
|
+
*
|
|
43
|
+
* ADDED, not from shadcn: `hideArrow` (kept from the desktop fork this replaces —
|
|
44
|
+
* a row whose state is already shown some other way) and `headingLevel`.
|
|
45
|
+
*/
|
|
46
|
+
const gui_1 = require("@hanzo/gui");
|
|
47
|
+
const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
|
|
48
|
+
const ink_1 = require("./ink.cjs");
|
|
49
|
+
const slot_1 = require("./slot.cjs");
|
|
50
|
+
/** The row IS the touch target — a full-width disclosure never needs `touch()`. */
|
|
51
|
+
const ROW_MIN_H = 44;
|
|
52
|
+
const ICON = 16;
|
|
53
|
+
const Accordion = (p) => (0, jsx_runtime_1.jsx)(gui_1.Accordion, { ...(0, slot_1.slot)('accordion'), ...p });
|
|
54
|
+
exports.Accordion = Accordion;
|
|
55
|
+
const AccordionItem = (p) => ((0, jsx_runtime_1.jsx)(gui_1.Accordion.Item, { ...(0, slot_1.slot)('accordion-item'), borderBottomWidth: 1, borderColor: "$borderColor", ...p }));
|
|
56
|
+
exports.AccordionItem = AccordionItem;
|
|
57
|
+
const AccordionTrigger = ({ children, hideArrow = false, headingLevel = 3, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Accordion.Header, { ...(0, slot_1.slot)('accordion-header'), unstyled: true, render: `h${headingLevel}`, "aria-level": headingLevel, display: "flex",
|
|
58
|
+
// The header is STRUCTURE, not type: it holds one button and the button
|
|
59
|
+
// holds the type. Left at gui's heading scale it publishes a 32px
|
|
60
|
+
// font-family/size down the tree, which any element child of the trigger
|
|
61
|
+
// inherits the moment a reset says `button { font: inherit }`.
|
|
62
|
+
size: "$3", children: (0, jsx_runtime_1.jsx)(gui_1.Accordion.Trigger, { ...(0, slot_1.slot)('accordion-trigger'), unstyled: true, type: "button", bg: "transparent", borderWidth: 0, flexDirection: "row", items: "center", justify: "space-between", gap: "$2", width: "100%", minH: ROW_MIN_H, px: 0, py: "$2", cursor: "pointer",
|
|
63
|
+
// The same two rungs every row in this backend uses for hover and for the
|
|
64
|
+
// keyboard's arrow-key landing — an unstyled trigger has no focus ring of
|
|
65
|
+
// its own, and roving focus that shows nothing is roving nowhere.
|
|
66
|
+
hoverStyle: { bg: '$color2' }, focusStyle: { bg: '$color3' }, pressStyle: { bg: '$color3' }, ...p, children: (({ open }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, ink_1.ink)(children, undefined, { fontSize: '$3', fontWeight: '500', color: '$color12' }), hideArrow ? null : ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('accordion-chevron'), shrink: 0, items: "center", justify: "center", rotate: open ? '180deg' : '0deg', opacity: 0.6, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: ICON }) }))] }))) }) }));
|
|
67
|
+
exports.AccordionTrigger = AccordionTrigger;
|
|
68
|
+
const AccordionContent = ({ children, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Accordion.Content, { ...(0, slot_1.slot)('accordion-content'), unstyled: true, overflow: "hidden", pb: "$3", ...p, children: (0, ink_1.ink)(children, undefined, { fontSize: '$2', color: '$color11' }) }));
|
|
69
|
+
exports.AccordionContent = AccordionContent;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Accordion — @hanzogui/accordion's five parts under the four shadcn names.
|
|
3
|
+
*
|
|
4
|
+
* The behaviour is entirely the primitive's and nothing here re-implements any
|
|
5
|
+
* of it: the roving Arrow/Home/End focus lives in gui's `Accordion` root,
|
|
6
|
+
* `aria-expanded` + `aria-controls` on `Collapsible.Trigger`, `role="region"` +
|
|
7
|
+
* `aria-labelledby` on `Accordion.Content`, and `aria-disabled` on a row that is
|
|
8
|
+
* open in a non-collapsible single accordion. This file flattens the compound
|
|
9
|
+
* into the four names and corrects four things:
|
|
10
|
+
*
|
|
11
|
+
* 1. gui's `Accordion.Header` renders an `<h1>` at `size: '$10'`. An accordion
|
|
12
|
+
* is a list of sections INSIDE a page that already has a title, so every
|
|
13
|
+
* item shipped a competing document heading and a screen reader's heading
|
|
14
|
+
* list came out as N level-1s. Radix's default is `<h3>`; `headingLevel`
|
|
15
|
+
* re-hosts it (and sets the matching `aria-level`, which gui's inherited
|
|
16
|
+
* `role="heading"` requires to be valid) so a call site can place the row in
|
|
17
|
+
* its own outline.
|
|
18
|
+
*
|
|
19
|
+
* 2. `unstyled` means gui applies nothing — which on web leaves the UA's own
|
|
20
|
+
* button chrome, and a native `<button>` is #efefef with a 2px outset black
|
|
21
|
+
* border. Unstyled must mean "no chrome", not "the browser's chrome". Same
|
|
22
|
+
* correction `collapsible.tsx` makes, for the same primitive underneath.
|
|
23
|
+
*
|
|
24
|
+
* 3. The chevron has to know whether its row is open, and gui exports no item
|
|
25
|
+
* context. `Collapsible.Trigger` renders a FUNCTION child with `{ open }` —
|
|
26
|
+
* that is the only seam, and it is typed as `ReactNode`, hence the one cast
|
|
27
|
+
* below. Reading `data-state` from CSS instead is not available to us: gui
|
|
28
|
+
* compiles style props to atomic classes and has no parent-state selector,
|
|
29
|
+
* and a Tailwind `[data-state=open]>svg` rule loses to gui's runtime sheet.
|
|
30
|
+
*
|
|
31
|
+
* 4. That trigger is a BARE `<button>`, and a bare button inside a form is a
|
|
32
|
+
* SUBMIT button — an accordion in a settings form posted the form every
|
|
33
|
+
* time someone opened a section. `type="button"`, declared on the props for
|
|
34
|
+
* the same reason `Button` declares it: gui's props come from the
|
|
35
|
+
* cross-platform stack and name no DOM attribute, so it reaches the element
|
|
36
|
+
* but does not type.
|
|
37
|
+
*
|
|
38
|
+
* ADDED, not from shadcn: `hideArrow` (kept from the desktop fork this replaces —
|
|
39
|
+
* a row whose state is already shown some other way) and `headingLevel`.
|
|
40
|
+
*/
|
|
41
|
+
import { Accordion as GuiAccordion } from '@hanzo/gui';
|
|
42
|
+
import type { ComponentProps } from 'react';
|
|
43
|
+
export type AccordionProps = ComponentProps<typeof GuiAccordion>;
|
|
44
|
+
export type AccordionItemProps = ComponentProps<typeof GuiAccordion.Item>;
|
|
45
|
+
export type AccordionContentProps = ComponentProps<typeof GuiAccordion.Content>;
|
|
46
|
+
export type AccordionTriggerProps = ComponentProps<typeof GuiAccordion.Trigger> & {
|
|
47
|
+
hideArrow?: boolean;
|
|
48
|
+
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
49
|
+
/** The DOM button type — see (4). Defaults to `button`, not the UA's submit. */
|
|
50
|
+
type?: 'button' | 'submit' | 'reset';
|
|
51
|
+
};
|
|
52
|
+
declare const Accordion: (p: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
declare const AccordionItem: (p: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
declare const AccordionTrigger: ({ children, hideArrow, headingLevel, ...p }: AccordionTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
55
|
+
declare const AccordionContent: ({ children, ...p }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
|
57
|
+
//# sourceMappingURL=accordion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/accordion.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,SAAS,IAAI,YAAY,EAAU,MAAM,YAAY,CAAA;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAa,MAAM,OAAO,CAAA;AAQtD,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAA;AAChE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAA;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,CAAA;AAC/E,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,GAAG;IAChF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACpC,gFAAgF;IAChF,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CACrC,CAAA;AAED,QAAA,MAAM,SAAS,GAAI,GAAG,cAAc,4CAAmD,CAAA;AAEvF,QAAA,MAAM,aAAa,GAAI,GAAG,kBAAkB,4CAO3C,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,6CAKvB,qBAAqB,4CAuDvB,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,oBAAoB,qBAAqB,4CAIlE,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
/**
|
|
4
|
+
* Accordion — @hanzogui/accordion's five parts under the four shadcn names.
|
|
5
|
+
*
|
|
6
|
+
* The behaviour is entirely the primitive's and nothing here re-implements any
|
|
7
|
+
* of it: the roving Arrow/Home/End focus lives in gui's `Accordion` root,
|
|
8
|
+
* `aria-expanded` + `aria-controls` on `Collapsible.Trigger`, `role="region"` +
|
|
9
|
+
* `aria-labelledby` on `Accordion.Content`, and `aria-disabled` on a row that is
|
|
10
|
+
* open in a non-collapsible single accordion. This file flattens the compound
|
|
11
|
+
* into the four names and corrects four things:
|
|
12
|
+
*
|
|
13
|
+
* 1. gui's `Accordion.Header` renders an `<h1>` at `size: '$10'`. An accordion
|
|
14
|
+
* is a list of sections INSIDE a page that already has a title, so every
|
|
15
|
+
* item shipped a competing document heading and a screen reader's heading
|
|
16
|
+
* list came out as N level-1s. Radix's default is `<h3>`; `headingLevel`
|
|
17
|
+
* re-hosts it (and sets the matching `aria-level`, which gui's inherited
|
|
18
|
+
* `role="heading"` requires to be valid) so a call site can place the row in
|
|
19
|
+
* its own outline.
|
|
20
|
+
*
|
|
21
|
+
* 2. `unstyled` means gui applies nothing — which on web leaves the UA's own
|
|
22
|
+
* button chrome, and a native `<button>` is #efefef with a 2px outset black
|
|
23
|
+
* border. Unstyled must mean "no chrome", not "the browser's chrome". Same
|
|
24
|
+
* correction `collapsible.tsx` makes, for the same primitive underneath.
|
|
25
|
+
*
|
|
26
|
+
* 3. The chevron has to know whether its row is open, and gui exports no item
|
|
27
|
+
* context. `Collapsible.Trigger` renders a FUNCTION child with `{ open }` —
|
|
28
|
+
* that is the only seam, and it is typed as `ReactNode`, hence the one cast
|
|
29
|
+
* below. Reading `data-state` from CSS instead is not available to us: gui
|
|
30
|
+
* compiles style props to atomic classes and has no parent-state selector,
|
|
31
|
+
* and a Tailwind `[data-state=open]>svg` rule loses to gui's runtime sheet.
|
|
32
|
+
*
|
|
33
|
+
* 4. That trigger is a BARE `<button>`, and a bare button inside a form is a
|
|
34
|
+
* SUBMIT button — an accordion in a settings form posted the form every
|
|
35
|
+
* time someone opened a section. `type="button"`, declared on the props for
|
|
36
|
+
* the same reason `Button` declares it: gui's props come from the
|
|
37
|
+
* cross-platform stack and name no DOM attribute, so it reaches the element
|
|
38
|
+
* but does not type.
|
|
39
|
+
*
|
|
40
|
+
* ADDED, not from shadcn: `hideArrow` (kept from the desktop fork this replaces —
|
|
41
|
+
* a row whose state is already shown some other way) and `headingLevel`.
|
|
42
|
+
*/
|
|
43
|
+
import { Accordion as GuiAccordion, XStack } from '@hanzo/gui';
|
|
44
|
+
import { ChevronDown } from '@hanzogui/lucide-icons-2';
|
|
45
|
+
import { ink } from './ink.js';
|
|
46
|
+
import { slot } from './slot.js';
|
|
47
|
+
/** The row IS the touch target — a full-width disclosure never needs `touch()`. */
|
|
48
|
+
const ROW_MIN_H = 44;
|
|
49
|
+
const ICON = 16;
|
|
50
|
+
const Accordion = (p) => _jsx(GuiAccordion, { ...slot('accordion'), ...p });
|
|
51
|
+
const AccordionItem = (p) => (_jsx(GuiAccordion.Item, { ...slot('accordion-item'), borderBottomWidth: 1, borderColor: "$borderColor", ...p }));
|
|
52
|
+
const AccordionTrigger = ({ children, hideArrow = false, headingLevel = 3, ...p }) => (_jsx(GuiAccordion.Header, { ...slot('accordion-header'), unstyled: true, render: `h${headingLevel}`, "aria-level": headingLevel, display: "flex",
|
|
53
|
+
// The header is STRUCTURE, not type: it holds one button and the button
|
|
54
|
+
// holds the type. Left at gui's heading scale it publishes a 32px
|
|
55
|
+
// font-family/size down the tree, which any element child of the trigger
|
|
56
|
+
// inherits the moment a reset says `button { font: inherit }`.
|
|
57
|
+
size: "$3", children: _jsx(GuiAccordion.Trigger, { ...slot('accordion-trigger'), unstyled: true, type: "button", bg: "transparent", borderWidth: 0, flexDirection: "row", items: "center", justify: "space-between", gap: "$2", width: "100%", minH: ROW_MIN_H, px: 0, py: "$2", cursor: "pointer",
|
|
58
|
+
// The same two rungs every row in this backend uses for hover and for the
|
|
59
|
+
// keyboard's arrow-key landing — an unstyled trigger has no focus ring of
|
|
60
|
+
// its own, and roving focus that shows nothing is roving nowhere.
|
|
61
|
+
hoverStyle: { bg: '$color2' }, focusStyle: { bg: '$color3' }, pressStyle: { bg: '$color3' }, ...p, children: (({ open }) => (_jsxs(_Fragment, { children: [ink(children, undefined, { fontSize: '$3', fontWeight: '500', color: '$color12' }), hideArrow ? null : (_jsx(XStack, { ...slot('accordion-chevron'), shrink: 0, items: "center", justify: "center", rotate: open ? '180deg' : '0deg', opacity: 0.6, children: _jsx(ChevronDown, { size: ICON }) }))] }))) }) }));
|
|
62
|
+
const AccordionContent = ({ children, ...p }) => (_jsx(GuiAccordion.Content, { ...slot('accordion-content'), unstyled: true, overflow: "hidden", pb: "$3", ...p, children: ink(children, undefined, { fontSize: '$2', color: '$color11' }) }));
|
|
63
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
|
64
|
+
//# sourceMappingURL=accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/backends/gui/accordion.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.AlertDialogTrigger = exports.AlertDialogTitle = exports.AlertDialogPortal = exports.AlertDialogOverlay = exports.AlertDialogHeader = exports.AlertDialogFooter = exports.AlertDialogDescription = exports.AlertDialogContent = exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialog = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
/**
|
|
7
|
+
* AlertDialog — the modal that INTERRUPTS. It is not a Dialog with different
|
|
8
|
+
* words in it: `role="alertdialog"`, focus opens on Cancel rather than on the
|
|
9
|
+
* panel, and a click outside is refused — the only ways out are Escape and the
|
|
10
|
+
* dialog's own two buttons. All of that is @hanzogui/alert-dialog's; this file
|
|
11
|
+
* flattens its compound parts into the shadcn names and dresses them in the
|
|
12
|
+
* Hanzo tokens, exactly as `dialog.tsx` does for the ordinary modal.
|
|
13
|
+
*
|
|
14
|
+
* `AlertDialogContent` mounts its OWN portal + overlay (so callers never wrap
|
|
15
|
+
* it) and re-applies the trigger's resolved theme inside the portal via
|
|
16
|
+
* `PortalTheme` — gui portals re-root the subtree, so React theme context does
|
|
17
|
+
* not flow.
|
|
18
|
+
*
|
|
19
|
+
* RENAME, unavoidable, and only on the two buttons: shadcn dresses Action and
|
|
20
|
+
* Cancel by pasting a `buttonVariants({ variant })` string into the class name.
|
|
21
|
+
* Here they ARE the `Button`, with gui's close part as its host, so the variant
|
|
22
|
+
* is a PROP:
|
|
23
|
+
*
|
|
24
|
+
* <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
|
|
25
|
+
*
|
|
26
|
+
* A leftover `buttonVariants(...)` string handed to the class name still
|
|
27
|
+
* type-checks and still lands on the element — it just no longer paints. gui
|
|
28
|
+
* injects its stylesheet at runtime, after the bundled CSS, so a utility class
|
|
29
|
+
* colliding with a gui style prop loses the tie silently. There is one button
|
|
30
|
+
* component in this package and this is it; a second variant table living in a
|
|
31
|
+
* class string is how the two drift.
|
|
32
|
+
*
|
|
33
|
+
* Defaults follow @hanzo/ui's Button, not shadcn's: `primary` is the loud
|
|
34
|
+
* variant here (`default` is deliberately the quiet one), so the confirming
|
|
35
|
+
* button is `primary` and Cancel is `outline`.
|
|
36
|
+
*/
|
|
37
|
+
const gui_1 = require("@hanzo/gui");
|
|
38
|
+
const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
|
|
39
|
+
const button_1 = require("./button.cjs");
|
|
40
|
+
const slot_1 = require("./slot.cjs");
|
|
41
|
+
/** The same panel padding the ordinary modal uses — one modal geometry. */
|
|
42
|
+
const PAD = 24;
|
|
43
|
+
const AlertDialog = (p) => (0, jsx_runtime_1.jsx)(gui_1.AlertDialog, { ...p });
|
|
44
|
+
exports.AlertDialog = AlertDialog;
|
|
45
|
+
const AlertDialogTrigger = gui_1.AlertDialog.Trigger;
|
|
46
|
+
exports.AlertDialogTrigger = AlertDialogTrigger;
|
|
47
|
+
const AlertDialogPortal = gui_1.AlertDialog.Portal;
|
|
48
|
+
exports.AlertDialogPortal = AlertDialogPortal;
|
|
49
|
+
const AlertDialogOverlay = (props) => ((0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Overlay, { ...(0, slot_1.slot)('alert-dialog-overlay'), bg: "rgba(0,0,0,0.5)", opacity: 0.5, ...props }));
|
|
50
|
+
exports.AlertDialogOverlay = AlertDialogOverlay;
|
|
51
|
+
const AlertDialogContent = ({ children, ...props }) => {
|
|
52
|
+
const themeName = (0, portal_theme_1.useThemeName)();
|
|
53
|
+
return ((0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Portal, { children: (0, jsx_runtime_1.jsxs)(portal_theme_1.PortalTheme, { name: themeName, children: [(0, jsx_runtime_1.jsx)(AlertDialogOverlay, {}), (0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Content, { ...(0, slot_1.slot)('alert-dialog-content'), bg: "$background", borderWidth: 1, borderColor: "$borderColor", rounded: "$5", p: PAD, gap: "$4", width: "100%", maxW: 512, ...props, children: children })] }) }));
|
|
54
|
+
};
|
|
55
|
+
exports.AlertDialogContent = AlertDialogContent;
|
|
56
|
+
const AlertDialogHeader = (props) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('alert-dialog-header'), gap: "$2", ...props }));
|
|
57
|
+
exports.AlertDialogHeader = AlertDialogHeader;
|
|
58
|
+
const AlertDialogFooter = (props) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('alert-dialog-footer'), gap: "$2", justify: "flex-end", items: "center", ...props }));
|
|
59
|
+
exports.AlertDialogFooter = AlertDialogFooter;
|
|
60
|
+
const AlertDialogTitle = (props) => ((0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Title, { ...(0, slot_1.slot)('alert-dialog-title'), size: "$5", fontWeight: "600", ...props }));
|
|
61
|
+
exports.AlertDialogTitle = AlertDialogTitle;
|
|
62
|
+
const AlertDialogDescription = (props) => ((0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Description, { ...(0, slot_1.slot)('alert-dialog-description'), size: "$2", color: "$color11", ...props }));
|
|
63
|
+
exports.AlertDialogDescription = AlertDialogDescription;
|
|
64
|
+
/**
|
|
65
|
+
* Both buttons are the one `Button` with gui's close part as its HOST — the
|
|
66
|
+
* `Button asChild` direction, the same one `Button`-as-link already takes, and
|
|
67
|
+
* the direction matters:
|
|
68
|
+
*
|
|
69
|
+
* - `<Action asChild><Button/></Action>` (the obvious way round) also merges
|
|
70
|
+
* into one element, but the element it keeps is Button's frame, which is a
|
|
71
|
+
* `<div role="button" tabindex="0">`. Measured: a click still works and
|
|
72
|
+
* ENTER DOES NOTHING. A decision you can only confirm with a mouse is not a
|
|
73
|
+
* decision every user can make.
|
|
74
|
+
* - This way round, `Button`'s `render` hands the tag to gui's `DialogClose`,
|
|
75
|
+
* which is a real `<button>` — so Enter and Space activate it, the close
|
|
76
|
+
* handler composes onto the caller's `onPress`, and Cancel's ref (the one
|
|
77
|
+
* the content focuses when it opens) still reaches the DOM node.
|
|
78
|
+
*
|
|
79
|
+
* `aria-label` is cleared on purpose. gui's `DialogClose` hardcodes
|
|
80
|
+
* `aria-label="Dialog Close"`, which OVERRIDES the button's own text — every
|
|
81
|
+
* choice in the dialog would be announced "Dialog Close, button", including
|
|
82
|
+
* the destructive one. These buttons are named by what they say.
|
|
83
|
+
*
|
|
84
|
+
* `type="button"` because gui's close part renders a bare `<button>`, and a
|
|
85
|
+
* bare button inside a form is a SUBMIT button: confirming a destructive action
|
|
86
|
+
* would also post the form behind the modal.
|
|
87
|
+
*/
|
|
88
|
+
const AlertDialogAction = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('alert-dialog-action'), variant: "primary", type: "button", ...props, asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Action, { "aria-label": undefined, children: children }) }));
|
|
89
|
+
exports.AlertDialogAction = AlertDialogAction;
|
|
90
|
+
const AlertDialogCancel = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('alert-dialog-cancel'), variant: "outline", type: "button", ...props, asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Cancel, { "aria-label": undefined, children: children }) }));
|
|
91
|
+
exports.AlertDialogCancel = AlertDialogCancel;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AlertDialog — the modal that INTERRUPTS. It is not a Dialog with different
|
|
3
|
+
* words in it: `role="alertdialog"`, focus opens on Cancel rather than on the
|
|
4
|
+
* panel, and a click outside is refused — the only ways out are Escape and the
|
|
5
|
+
* dialog's own two buttons. All of that is @hanzogui/alert-dialog's; this file
|
|
6
|
+
* flattens its compound parts into the shadcn names and dresses them in the
|
|
7
|
+
* Hanzo tokens, exactly as `dialog.tsx` does for the ordinary modal.
|
|
8
|
+
*
|
|
9
|
+
* `AlertDialogContent` mounts its OWN portal + overlay (so callers never wrap
|
|
10
|
+
* it) and re-applies the trigger's resolved theme inside the portal via
|
|
11
|
+
* `PortalTheme` — gui portals re-root the subtree, so React theme context does
|
|
12
|
+
* not flow.
|
|
13
|
+
*
|
|
14
|
+
* RENAME, unavoidable, and only on the two buttons: shadcn dresses Action and
|
|
15
|
+
* Cancel by pasting a `buttonVariants({ variant })` string into the class name.
|
|
16
|
+
* Here they ARE the `Button`, with gui's close part as its host, so the variant
|
|
17
|
+
* is a PROP:
|
|
18
|
+
*
|
|
19
|
+
* <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
|
|
20
|
+
*
|
|
21
|
+
* A leftover `buttonVariants(...)` string handed to the class name still
|
|
22
|
+
* type-checks and still lands on the element — it just no longer paints. gui
|
|
23
|
+
* injects its stylesheet at runtime, after the bundled CSS, so a utility class
|
|
24
|
+
* colliding with a gui style prop loses the tie silently. There is one button
|
|
25
|
+
* component in this package and this is it; a second variant table living in a
|
|
26
|
+
* class string is how the two drift.
|
|
27
|
+
*
|
|
28
|
+
* Defaults follow @hanzo/ui's Button, not shadcn's: `primary` is the loud
|
|
29
|
+
* variant here (`default` is deliberately the quiet one), so the confirming
|
|
30
|
+
* button is `primary` and Cancel is `outline`.
|
|
31
|
+
*/
|
|
32
|
+
import { AlertDialog as GuiAlertDialog, XStack, YStack } from '@hanzo/gui';
|
|
33
|
+
import type { ComponentProps, ReactNode } from 'react';
|
|
34
|
+
import { type ButtonProps } from './button.js';
|
|
35
|
+
export type AlertDialogProps = ComponentProps<typeof GuiAlertDialog>;
|
|
36
|
+
declare const AlertDialog: (p: AlertDialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
declare const AlertDialogTrigger: typeof GuiAlertDialog.Trigger;
|
|
38
|
+
declare const AlertDialogPortal: typeof GuiAlertDialog.Portal;
|
|
39
|
+
export type AlertDialogOverlayProps = ComponentProps<typeof GuiAlertDialog.Overlay>;
|
|
40
|
+
declare const AlertDialogOverlay: (props: AlertDialogOverlayProps) => import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
export type AlertDialogContentProps = ComponentProps<typeof GuiAlertDialog.Content>;
|
|
42
|
+
declare const AlertDialogContent: ({ children, ...props }: AlertDialogContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export type AlertDialogSectionProps = ComponentProps<typeof YStack> & {
|
|
44
|
+
children?: ReactNode;
|
|
45
|
+
};
|
|
46
|
+
declare const AlertDialogHeader: (props: AlertDialogSectionProps) => import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
declare const AlertDialogFooter: (props: ComponentProps<typeof XStack>) => import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
declare const AlertDialogTitle: (props: ComponentProps<typeof GuiAlertDialog.Title>) => import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
declare const AlertDialogDescription: (props: ComponentProps<typeof GuiAlertDialog.Description>) => import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
/**
|
|
51
|
+
* Both buttons are the one `Button` with gui's close part as its HOST — the
|
|
52
|
+
* `Button asChild` direction, the same one `Button`-as-link already takes, and
|
|
53
|
+
* the direction matters:
|
|
54
|
+
*
|
|
55
|
+
* - `<Action asChild><Button/></Action>` (the obvious way round) also merges
|
|
56
|
+
* into one element, but the element it keeps is Button's frame, which is a
|
|
57
|
+
* `<div role="button" tabindex="0">`. Measured: a click still works and
|
|
58
|
+
* ENTER DOES NOTHING. A decision you can only confirm with a mouse is not a
|
|
59
|
+
* decision every user can make.
|
|
60
|
+
* - This way round, `Button`'s `render` hands the tag to gui's `DialogClose`,
|
|
61
|
+
* which is a real `<button>` — so Enter and Space activate it, the close
|
|
62
|
+
* handler composes onto the caller's `onPress`, and Cancel's ref (the one
|
|
63
|
+
* the content focuses when it opens) still reaches the DOM node.
|
|
64
|
+
*
|
|
65
|
+
* `aria-label` is cleared on purpose. gui's `DialogClose` hardcodes
|
|
66
|
+
* `aria-label="Dialog Close"`, which OVERRIDES the button's own text — every
|
|
67
|
+
* choice in the dialog would be announced "Dialog Close, button", including
|
|
68
|
+
* the destructive one. These buttons are named by what they say.
|
|
69
|
+
*
|
|
70
|
+
* `type="button"` because gui's close part renders a bare `<button>`, and a
|
|
71
|
+
* bare button inside a form is a SUBMIT button: confirming a destructive action
|
|
72
|
+
* would also post the form behind the modal.
|
|
73
|
+
*/
|
|
74
|
+
declare const AlertDialogAction: ({ children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
75
|
+
declare const AlertDialogCancel: ({ children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
76
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
|
|
77
|
+
//# sourceMappingURL=alert-dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/alert-dialog.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAMnD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AAEpE,QAAA,MAAM,WAAW,GAAI,GAAG,gBAAgB,4CAA8B,CAAA;AACtE,QAAA,MAAM,kBAAkB,EAAE,OAAO,cAAc,CAAC,OAAgC,CAAA;AAChF,QAAA,MAAM,iBAAiB,EAAE,OAAO,cAAc,CAAC,MAA8B,CAAA;AAE7E,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,CAAA;AAEnF,QAAA,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAOzD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,CAAA;AAEnF,QAAA,MAAM,kBAAkB,GAAI,wBAAwB,uBAAuB,4CAuB1E,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAA;AAE9F,QAAA,MAAM,iBAAiB,GAAI,OAAO,uBAAuB,4CAExD,CAAA;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,cAAc,CAAC,OAAO,MAAM,CAAC,4CAE9D,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,4CAE3E,CAAA;AAED,QAAA,MAAM,sBAAsB,GAAI,OAAO,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,4CAOvF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,iBAAiB,GAAI,wBAAwB,WAAW,4CAI7D,CAAA;AAED,QAAA,MAAM,iBAAiB,GAAI,wBAAwB,WAAW,4CAI7D,CAAA;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAA"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
/**
|
|
4
|
+
* AlertDialog — the modal that INTERRUPTS. It is not a Dialog with different
|
|
5
|
+
* words in it: `role="alertdialog"`, focus opens on Cancel rather than on the
|
|
6
|
+
* panel, and a click outside is refused — the only ways out are Escape and the
|
|
7
|
+
* dialog's own two buttons. All of that is @hanzogui/alert-dialog's; this file
|
|
8
|
+
* flattens its compound parts into the shadcn names and dresses them in the
|
|
9
|
+
* Hanzo tokens, exactly as `dialog.tsx` does for the ordinary modal.
|
|
10
|
+
*
|
|
11
|
+
* `AlertDialogContent` mounts its OWN portal + overlay (so callers never wrap
|
|
12
|
+
* it) and re-applies the trigger's resolved theme inside the portal via
|
|
13
|
+
* `PortalTheme` — gui portals re-root the subtree, so React theme context does
|
|
14
|
+
* not flow.
|
|
15
|
+
*
|
|
16
|
+
* RENAME, unavoidable, and only on the two buttons: shadcn dresses Action and
|
|
17
|
+
* Cancel by pasting a `buttonVariants({ variant })` string into the class name.
|
|
18
|
+
* Here they ARE the `Button`, with gui's close part as its host, so the variant
|
|
19
|
+
* is a PROP:
|
|
20
|
+
*
|
|
21
|
+
* <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
|
|
22
|
+
*
|
|
23
|
+
* A leftover `buttonVariants(...)` string handed to the class name still
|
|
24
|
+
* type-checks and still lands on the element — it just no longer paints. gui
|
|
25
|
+
* injects its stylesheet at runtime, after the bundled CSS, so a utility class
|
|
26
|
+
* colliding with a gui style prop loses the tie silently. There is one button
|
|
27
|
+
* component in this package and this is it; a second variant table living in a
|
|
28
|
+
* class string is how the two drift.
|
|
29
|
+
*
|
|
30
|
+
* Defaults follow @hanzo/ui's Button, not shadcn's: `primary` is the loud
|
|
31
|
+
* variant here (`default` is deliberately the quiet one), so the confirming
|
|
32
|
+
* button is `primary` and Cancel is `outline`.
|
|
33
|
+
*/
|
|
34
|
+
import { AlertDialog as GuiAlertDialog, XStack, YStack } from '@hanzo/gui';
|
|
35
|
+
import { PortalTheme, useThemeName } from '../../product/menu/portal-theme.js';
|
|
36
|
+
import { Button } from './button.js';
|
|
37
|
+
import { slot } from './slot.js';
|
|
38
|
+
/** The same panel padding the ordinary modal uses — one modal geometry. */
|
|
39
|
+
const PAD = 24;
|
|
40
|
+
const AlertDialog = (p) => _jsx(GuiAlertDialog, { ...p });
|
|
41
|
+
const AlertDialogTrigger = GuiAlertDialog.Trigger;
|
|
42
|
+
const AlertDialogPortal = GuiAlertDialog.Portal;
|
|
43
|
+
const AlertDialogOverlay = (props) => (_jsx(GuiAlertDialog.Overlay, { ...slot('alert-dialog-overlay'), bg: "rgba(0,0,0,0.5)", opacity: 0.5, ...props }));
|
|
44
|
+
const AlertDialogContent = ({ children, ...props }) => {
|
|
45
|
+
const themeName = useThemeName();
|
|
46
|
+
return (_jsx(GuiAlertDialog.Portal, { children: _jsxs(PortalTheme, { name: themeName, children: [_jsx(AlertDialogOverlay, {}), _jsx(GuiAlertDialog.Content, { ...slot('alert-dialog-content'), bg: "$background", borderWidth: 1, borderColor: "$borderColor", rounded: "$5", p: PAD, gap: "$4", width: "100%", maxW: 512, ...props, children: children })] }) }));
|
|
47
|
+
};
|
|
48
|
+
const AlertDialogHeader = (props) => (_jsx(YStack, { ...slot('alert-dialog-header'), gap: "$2", ...props }));
|
|
49
|
+
const AlertDialogFooter = (props) => (_jsx(XStack, { ...slot('alert-dialog-footer'), gap: "$2", justify: "flex-end", items: "center", ...props }));
|
|
50
|
+
const AlertDialogTitle = (props) => (_jsx(GuiAlertDialog.Title, { ...slot('alert-dialog-title'), size: "$5", fontWeight: "600", ...props }));
|
|
51
|
+
const AlertDialogDescription = (props) => (_jsx(GuiAlertDialog.Description, { ...slot('alert-dialog-description'), size: "$2", color: "$color11", ...props }));
|
|
52
|
+
/**
|
|
53
|
+
* Both buttons are the one `Button` with gui's close part as its HOST — the
|
|
54
|
+
* `Button asChild` direction, the same one `Button`-as-link already takes, and
|
|
55
|
+
* the direction matters:
|
|
56
|
+
*
|
|
57
|
+
* - `<Action asChild><Button/></Action>` (the obvious way round) also merges
|
|
58
|
+
* into one element, but the element it keeps is Button's frame, which is a
|
|
59
|
+
* `<div role="button" tabindex="0">`. Measured: a click still works and
|
|
60
|
+
* ENTER DOES NOTHING. A decision you can only confirm with a mouse is not a
|
|
61
|
+
* decision every user can make.
|
|
62
|
+
* - This way round, `Button`'s `render` hands the tag to gui's `DialogClose`,
|
|
63
|
+
* which is a real `<button>` — so Enter and Space activate it, the close
|
|
64
|
+
* handler composes onto the caller's `onPress`, and Cancel's ref (the one
|
|
65
|
+
* the content focuses when it opens) still reaches the DOM node.
|
|
66
|
+
*
|
|
67
|
+
* `aria-label` is cleared on purpose. gui's `DialogClose` hardcodes
|
|
68
|
+
* `aria-label="Dialog Close"`, which OVERRIDES the button's own text — every
|
|
69
|
+
* choice in the dialog would be announced "Dialog Close, button", including
|
|
70
|
+
* the destructive one. These buttons are named by what they say.
|
|
71
|
+
*
|
|
72
|
+
* `type="button"` because gui's close part renders a bare `<button>`, and a
|
|
73
|
+
* bare button inside a form is a SUBMIT button: confirming a destructive action
|
|
74
|
+
* would also post the form behind the modal.
|
|
75
|
+
*/
|
|
76
|
+
const AlertDialogAction = ({ children, ...props }) => (_jsx(Button, { ...slot('alert-dialog-action'), variant: "primary", type: "button", ...props, asChild: true, children: _jsx(GuiAlertDialog.Action, { "aria-label": undefined, children: children }) }));
|
|
77
|
+
const AlertDialogCancel = ({ children, ...props }) => (_jsx(Button, { ...slot('alert-dialog-cancel'), variant: "outline", type: "button", ...props, asChild: true, children: _jsx(GuiAlertDialog.Cancel, { "aria-label": undefined, children: children }) }));
|
|
78
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
|
|
79
|
+
//# sourceMappingURL=alert-dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.js","sourceRoot":"","sources":["../../../src/backends/gui/alert-dialog.tsx"],"names":[],"mappings":"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"}
|