@devalok/shilp-sutra 0.56.0 → 0.59.0
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/MIGRATION.md +198 -0
- package/dist/_chunks/badge-group.js +75 -174
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/chat.js +270 -253
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/document-preview.js +1 -1
- package/dist/_chunks/document-preview.js.map +1 -1
- package/dist/_chunks/emoji-suggestion.js +1 -1
- package/dist/_chunks/emoji-suggestion.js.map +1 -1
- package/dist/_chunks/image-preview.js +71 -70
- package/dist/_chunks/image-preview.js.map +1 -1
- package/dist/_chunks/mention-suggestion.js +2 -2
- package/dist/_chunks/mention-suggestion.js.map +1 -1
- package/dist/_chunks/motion-preference.js +15 -0
- package/dist/_chunks/motion-preference.js.map +1 -0
- package/dist/_chunks/motion-provider.js +1 -1
- package/dist/_chunks/motion-provider.js.map +1 -1
- package/dist/_chunks/oauth-button.js +1 -1
- package/dist/_chunks/oauth-button.js.map +1 -1
- package/dist/_chunks/popover.js +50 -49
- package/dist/_chunks/popover.js.map +1 -1
- package/dist/_chunks/primitives-internal.js +29 -29
- package/dist/_chunks/primitives-internal.js.map +1 -1
- package/dist/_chunks/shared.js +48 -47
- package/dist/_chunks/shared.js.map +1 -1
- package/dist/_chunks/success.js +36 -36
- package/dist/_chunks/success.js.map +1 -1
- package/dist/_chunks/tree-view.js +1 -1
- package/dist/_chunks/tree-view.js.map +1 -1
- package/dist/_chunks/use-calendar.js +4 -4
- package/dist/_chunks/use-calendar.js.map +1 -1
- package/dist/ai/block-renderer.js +8 -8
- package/dist/ai/blocks/text.js +1 -1
- package/dist/ai/blocks/text.js.map +1 -1
- package/dist/ai/command-bar.js +67 -67
- package/dist/ai/command-bar.js.map +1 -1
- package/dist/ai/conversation.js +35 -35
- package/dist/ai/conversation.js.map +1 -1
- package/dist/ai/index.js +4 -4
- package/dist/composed/activity-feed.d.ts.map +1 -1
- package/dist/composed/activity-feed.js +109 -108
- package/dist/composed/activity-feed.js.map +1 -1
- package/dist/composed/avatar-group.d.ts +7 -2
- package/dist/composed/avatar-group.d.ts.map +1 -1
- package/dist/composed/avatar-group.js +3 -3
- package/dist/composed/avatar-group.js.map +1 -1
- package/dist/composed/command-palette.js +137 -137
- package/dist/composed/command-palette.js.map +1 -1
- package/dist/composed/content-card.js +2 -2
- package/dist/composed/content-card.js.map +1 -1
- package/dist/composed/date-picker/index.js +9 -9
- package/dist/composed/date-picker/index.js.map +1 -1
- package/dist/composed/diff.d.ts +23 -2
- package/dist/composed/diff.d.ts.map +1 -1
- package/dist/composed/diff.js +341 -260
- package/dist/composed/diff.js.map +1 -1
- package/dist/composed/emoji-picker.js +3 -3
- package/dist/composed/emoji-picker.js.map +1 -1
- package/dist/composed/empty-state.js +4 -4
- package/dist/composed/error-boundary.js +2 -2
- package/dist/composed/error-boundary.js.map +1 -1
- package/dist/composed/file-preview/image-preview.d.ts.map +1 -1
- package/dist/composed/file-preview/shared.d.ts.map +1 -1
- package/dist/composed/file-preview/video-preview.d.ts.map +1 -1
- package/dist/composed/file-preview.js +152 -151
- package/dist/composed/file-preview.js.map +1 -1
- package/dist/composed/filter-bar.d.ts.map +1 -1
- package/dist/composed/filter-bar.js +53 -52
- package/dist/composed/filter-bar.js.map +1 -1
- package/dist/composed/form-section.d.ts.map +1 -1
- package/dist/composed/form-section.js +38 -37
- package/dist/composed/form-section.js.map +1 -1
- package/dist/composed/inline-edit.js +1 -1
- package/dist/composed/inline-edit.js.map +1 -1
- package/dist/composed/loading-skeleton.js +3 -3
- package/dist/composed/loading-skeleton.js.map +1 -1
- package/dist/composed/master-detail.d.ts.map +1 -1
- package/dist/composed/master-detail.js +1 -1
- package/dist/composed/master-detail.js.map +1 -1
- package/dist/composed/member-picker.js +1 -1
- package/dist/composed/member-picker.js.map +1 -1
- package/dist/composed/multi-select-popover.d.ts.map +1 -1
- package/dist/composed/multi-select-popover.js +109 -108
- package/dist/composed/multi-select-popover.js.map +1 -1
- package/dist/composed/page-skeletons.js +4 -4
- package/dist/composed/page-skeletons.js.map +1 -1
- package/dist/composed/responsive-modal.js +1 -1
- package/dist/composed/responsive-modal.js.map +1 -1
- package/dist/composed/rich-chat-input/attachment-strip.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/reply-banner.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/schedule-send.d.ts.map +1 -1
- package/dist/composed/rich-chat-input.d.ts.map +1 -1
- package/dist/composed/rich-chat-input.js +473 -472
- package/dist/composed/rich-chat-input.js.map +1 -1
- package/dist/composed/rich-text-editor.js +6 -6
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/composed/schedule-view.js +5 -5
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/composed/status-badge.d.ts.map +1 -1
- package/dist/composed/status-badge.js +29 -28
- package/dist/composed/status-badge.js.map +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +4 -3
- package/dist/hooks/use-container-size.d.ts +18 -0
- package/dist/hooks/use-container-size.d.ts.map +1 -0
- package/dist/hooks/use-container-size.js +28 -0
- package/dist/hooks/use-container-size.js.map +1 -0
- package/dist/motion/index.d.ts +1 -0
- package/dist/motion/index.d.ts.map +1 -1
- package/dist/motion/index.js +2 -15
- package/dist/motion/motion-preference.d.ts +36 -0
- package/dist/motion/motion-preference.d.ts.map +1 -0
- package/dist/motion/motion-provider.d.ts +2 -1
- package/dist/motion/motion-provider.d.ts.map +1 -1
- package/dist/motion/primitives-index.js +103 -102
- package/dist/motion/primitives-index.js.map +1 -1
- package/dist/motion/primitives.d.ts.map +1 -1
- package/dist/shell/app-shell.d.ts +101 -0
- package/dist/shell/app-shell.d.ts.map +1 -0
- package/dist/shell/app-shell.js +76 -0
- package/dist/shell/app-shell.js.map +1 -0
- package/dist/shell/bottom-navbar.js +21 -21
- package/dist/shell/bottom-navbar.js.map +1 -1
- package/dist/shell/index.d.ts +2 -1
- package/dist/shell/index.d.ts.map +1 -1
- package/dist/shell/index.js +6 -5
- package/dist/shell/notification-center.d.ts +17 -0
- package/dist/shell/notification-center.d.ts.map +1 -1
- package/dist/shell/notification-center.js +110 -105
- package/dist/shell/notification-center.js.map +1 -1
- package/dist/shell/notification-preferences.js +1 -1
- package/dist/shell/notification-preferences.js.map +1 -1
- package/dist/shell/top-bar.js +7 -7
- package/dist/shell/top-bar.js.map +1 -1
- package/dist/tokens/generate-scale.d.ts +49 -0
- package/dist/tokens/generate-scale.d.ts.map +1 -1
- package/dist/tokens/index.css +1 -0
- package/dist/tokens/palettes.css +292 -0
- package/dist/tokens/primitives.css +29 -26
- package/dist/tokens/semantic.css +170 -47
- package/dist/tokens/shilp-sutra.css +1 -0
- package/dist/tokens/utilities.css +10 -7
- package/dist/tokens/variants.css +1 -1
- package/dist/ui/accordion.d.ts.map +1 -1
- package/dist/ui/accordion.js +27 -26
- package/dist/ui/accordion.js.map +1 -1
- package/dist/ui/alert-dialog.d.ts.map +1 -1
- package/dist/ui/alert-dialog.js +60 -59
- package/dist/ui/alert-dialog.js.map +1 -1
- package/dist/ui/alert.d.ts.map +1 -1
- package/dist/ui/alert.js +55 -113
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/autocomplete.js +80 -80
- package/dist/ui/autocomplete.js.map +1 -1
- package/dist/ui/avatar.d.ts.map +1 -1
- package/dist/ui/avatar.js +71 -70
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/badge-indicator.d.ts +4 -8
- package/dist/ui/badge-indicator.d.ts.map +1 -1
- package/dist/ui/badge-indicator.js +3 -8
- package/dist/ui/badge-indicator.js.map +1 -1
- package/dist/ui/badge.d.ts +55 -34
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/banner.d.ts.map +1 -1
- package/dist/ui/banner.js +43 -41
- package/dist/ui/banner.js.map +1 -1
- package/dist/ui/button-group.d.ts.map +1 -1
- package/dist/ui/button-group.js +3 -23
- package/dist/ui/button-group.js.map +1 -1
- package/dist/ui/button.d.ts +10 -1
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +79 -212
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/card.d.ts.map +1 -1
- package/dist/ui/card.js +78 -75
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/charts/radar-chart.d.ts.map +1 -1
- package/dist/ui/charts/radar-chart.js +1 -1
- package/dist/ui/charts/radar-chart.js.map +1 -1
- package/dist/ui/chat/date-separator.d.ts +8 -1
- package/dist/ui/chat/date-separator.d.ts.map +1 -1
- package/dist/ui/chat/message-list.d.ts.map +1 -1
- package/dist/ui/chat/message.d.ts.map +1 -1
- package/dist/ui/chat/typing-indicator.d.ts.map +1 -1
- package/dist/ui/checkbox.js +1 -1
- package/dist/ui/checkbox.js.map +1 -1
- package/dist/ui/code.js +2 -2
- package/dist/ui/code.js.map +1 -1
- package/dist/ui/color-input.d.ts.map +1 -1
- package/dist/ui/color-input.js +151 -150
- package/dist/ui/color-input.js.map +1 -1
- package/dist/ui/combobox.d.ts +14 -0
- package/dist/ui/combobox.d.ts.map +1 -1
- package/dist/ui/combobox.js +156 -152
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/context-menu.d.ts.map +1 -1
- package/dist/ui/context-menu.js +70 -69
- package/dist/ui/context-menu.js.map +1 -1
- package/dist/ui/data-table-body.d.ts +3 -1
- package/dist/ui/data-table-body.d.ts.map +1 -1
- package/dist/ui/data-table-body.js +93 -92
- package/dist/ui/data-table-body.js.map +1 -1
- package/dist/ui/data-table-bulk-actions.d.ts +7 -1
- package/dist/ui/data-table-bulk-actions.d.ts.map +1 -1
- package/dist/ui/data-table-bulk-actions.js +14 -8
- package/dist/ui/data-table-bulk-actions.js.map +1 -1
- package/dist/ui/data-table-card.d.ts.map +1 -1
- package/dist/ui/data-table-card.js +66 -47
- package/dist/ui/data-table-card.js.map +1 -1
- package/dist/ui/data-table-context.d.ts +4 -0
- package/dist/ui/data-table-context.d.ts.map +1 -1
- package/dist/ui/data-table-context.js +2 -2
- package/dist/ui/data-table-context.js.map +1 -1
- package/dist/ui/data-table-header.d.ts.map +1 -1
- package/dist/ui/data-table-header.js +50 -46
- package/dist/ui/data-table-header.js.map +1 -1
- package/dist/ui/data-table-pagination.js +3 -3
- package/dist/ui/data-table-pagination.js.map +1 -1
- package/dist/ui/data-table-toolbar.d.ts +11 -1
- package/dist/ui/data-table-toolbar.d.ts.map +1 -1
- package/dist/ui/data-table-toolbar.js +7 -7
- package/dist/ui/data-table-toolbar.js.map +1 -1
- package/dist/ui/data-table.d.ts +52 -5
- package/dist/ui/data-table.d.ts.map +1 -1
- package/dist/ui/data-table.js +181 -169
- package/dist/ui/data-table.js.map +1 -1
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +62 -61
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/dot.d.ts.map +1 -1
- package/dist/ui/dot.js +10 -41
- package/dist/ui/dot.js.map +1 -1
- package/dist/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/ui/dropdown-menu.js +79 -78
- package/dist/ui/dropdown-menu.js.map +1 -1
- package/dist/ui/file-upload.d.ts.map +1 -1
- package/dist/ui/file-upload.js +117 -116
- package/dist/ui/file-upload.js.map +1 -1
- package/dist/ui/form.d.ts.map +1 -1
- package/dist/ui/form.js +27 -26
- package/dist/ui/form.js.map +1 -1
- package/dist/ui/hover-card.d.ts.map +1 -1
- package/dist/ui/hover-card.js +26 -25
- package/dist/ui/hover-card.js.map +1 -1
- package/dist/ui/icon.js +7 -7
- package/dist/ui/index.d.ts +2 -2
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +3 -3
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/input-otp.js +1 -1
- package/dist/ui/input-otp.js.map +1 -1
- package/dist/ui/input.js +8 -8
- package/dist/ui/input.js.map +1 -1
- package/dist/ui/menubar.d.ts.map +1 -1
- package/dist/ui/menubar.js +73 -72
- package/dist/ui/menubar.js.map +1 -1
- package/dist/ui/navigation-menu.d.ts.map +1 -1
- package/dist/ui/navigation-menu.js +80 -79
- package/dist/ui/navigation-menu.js.map +1 -1
- package/dist/ui/number-input.js +3 -3
- package/dist/ui/number-input.js.map +1 -1
- package/dist/ui/pagination.js +1 -1
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/popover.d.ts.map +1 -1
- package/dist/ui/progress-ring.js +2 -2
- package/dist/ui/progress-ring.js.map +1 -1
- package/dist/ui/progress.d.ts.map +1 -1
- package/dist/ui/progress.js +82 -74
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/radio.d.ts.map +1 -1
- package/dist/ui/radio.js +32 -31
- package/dist/ui/radio.js.map +1 -1
- package/dist/ui/search-input.d.ts.map +1 -1
- package/dist/ui/search-input.js +28 -27
- package/dist/ui/search-input.js.map +1 -1
- package/dist/ui/select.d.ts.map +1 -1
- package/dist/ui/select.js +67 -66
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/sheet.js +1 -1
- package/dist/ui/sheet.js.map +1 -1
- package/dist/ui/sidebar.d.ts.map +1 -1
- package/dist/ui/sidebar.js +14 -14
- package/dist/ui/sidebar.js.map +1 -1
- package/dist/ui/slider.d.ts +63 -9
- package/dist/ui/slider.d.ts.map +1 -1
- package/dist/ui/slider.js +75 -33
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/split-button.d.ts +8 -2
- package/dist/ui/split-button.d.ts.map +1 -1
- package/dist/ui/split-button.js +49 -95
- package/dist/ui/split-button.js.map +1 -1
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +89 -88
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/stat-flash.js +16 -16
- package/dist/ui/stepper.d.ts.map +1 -1
- package/dist/ui/stepper.js +63 -62
- package/dist/ui/stepper.js.map +1 -1
- package/dist/ui/surface.d.ts.map +1 -1
- package/dist/ui/surface.js +2 -2
- package/dist/ui/surface.js.map +1 -1
- package/dist/ui/switch.js +1 -1
- package/dist/ui/switch.js.map +1 -1
- package/dist/ui/table.js +3 -3
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/tabs.d.ts.map +1 -1
- package/dist/ui/tabs.js +68 -67
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/textarea.js +5 -5
- package/dist/ui/textarea.js.map +1 -1
- package/dist/ui/toast.d.ts.map +1 -1
- package/dist/ui/toast.js +196 -195
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toggle.d.ts.map +1 -1
- package/dist/ui/toggle.js +26 -24
- package/dist/ui/toggle.js.map +1 -1
- package/dist/ui/tooltip.d.ts.map +1 -1
- package/dist/ui/tooltip.js +37 -36
- package/dist/ui/tooltip.js.map +1 -1
- package/dist/ui/tree-view/tree-item.d.ts.map +1 -1
- package/docs/components/composed/avatar-group.md +4 -4
- package/docs/components/composed/diff.md +10 -2
- package/docs/components/composed/schedule-view.md +1 -1
- package/docs/components/shell/app-shell.md +132 -0
- package/docs/components/ui/avatar.md +1 -1
- package/docs/components/ui/button.md +1 -1
- package/docs/components/ui/chat.md +7 -1
- package/docs/components/ui/color-swatch.md +1 -1
- package/docs/components/ui/data-table-toolbar.md +6 -2
- package/docs/components/ui/data-table.md +41 -7
- package/docs/components/ui/dot.md +1 -1
- package/docs/components/ui/progress.md +1 -0
- package/docs/components/ui/surface.md +3 -3
- package/docs/components/ui/table.md +2 -2
- package/docs/recipes/customize-brand.md +58 -0
- package/docs/recipes/install-astro.md +1 -0
- package/docs/recipes/install-next-app-router.md +1 -0
- package/docs/recipes/install-next-pages.md +22 -1
- package/docs/recipes/install-remix.md +1 -0
- package/docs/recipes/install-tanstack-start.md +1 -0
- package/docs/recipes/install-vite.md +2 -0
- package/docs/recipes/server-components.md +7 -4
- package/docs/recipes/troubleshoot.md +1 -0
- package/llms.txt +2 -1
- package/make-kit/Guidelines.md +2 -2
- package/make-kit/components/button.md +1 -1
- package/make-kit/components/card.md +6 -6
- package/make-kit/components/surface.md +4 -4
- package/make-kit/foundations/color.md +4 -4
- package/make-kit/foundations/dark-mode.md +1 -1
- package/make-kit/foundations/radius.md +1 -1
- package/make-kit/foundations/surfaces.md +9 -9
- package/mcp-manifest.json +358 -35
- package/package.json +8 -4
- package/skill/SKILL.md +12 -6
- package/skill/references/components.md +2 -1
- package/skill/references/customize-brand.md +58 -0
- package/skill/references/server-components.md +7 -4
- package/skill/references/setup-astro.md +1 -0
- package/skill/references/setup-next-app-router.md +1 -0
- package/skill/references/setup-next-pages.md +22 -1
- package/skill/references/setup-remix.md +1 -0
- package/skill/references/setup-tanstack-start.md +1 -0
- package/skill/references/setup-vite.md +2 -0
- package/skill/references/troubleshoot.md +1 -0
- package/dist/motion/check-motion-provider.d.ts +0 -2
- package/dist/motion/check-motion-provider.d.ts.map +0 -1
- package/dist/motion/index.js.map +0 -1
- package/dist/primitives/react-toast.d.ts +0 -120
- package/dist/ui/charts/_internal/scales.d.ts +0 -5
- package/dist/ui/charts/_internal/scales.d.ts.map +0 -1
- package/dist/ui/lib/slot.d.ts +0 -8
- package/dist/ui/lib/slot.d.ts.map +0 -1
package/dist/ui/alert-dialog.js
CHANGED
|
@@ -1,115 +1,116 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { springs as e, tweens as t } from "./lib/motion.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
3
|
+
import { MotionPreference as n } from "../_chunks/motion-preference.js";
|
|
4
|
+
import { cn as r } from "./lib/utils.js";
|
|
5
|
+
import { Action as i, Cancel as a, Content2 as o, Description2 as s, Overlay2 as c, Portal2 as l, Root2 as u, Title2 as d, Trigger2 as f } from "../_chunks/primitives/react-alert-dialog.js";
|
|
6
|
+
import { useIsMobile as p } from "../hooks/use-mobile.js";
|
|
7
|
+
import * as m from "react";
|
|
8
|
+
import { jsx as h, jsxs as g } from "react/jsx-runtime";
|
|
9
|
+
import { AnimatePresence as _, motion as v } from "framer-motion";
|
|
9
10
|
//#region src/ui/alert-dialog.tsx
|
|
10
|
-
var
|
|
11
|
-
let [i, a] =
|
|
11
|
+
var y = m.createContext({ open: !1 }), b = () => m.useContext(y), x = ({ open: e, defaultOpen: t, onOpenChange: n, ...r }) => {
|
|
12
|
+
let [i, a] = m.useState(t ?? !1), o = e !== void 0, s = o ? e : i, c = m.useCallback((e) => {
|
|
12
13
|
o || a(e), n?.(e);
|
|
13
|
-
}, [o, n]),
|
|
14
|
-
return /* @__PURE__ */
|
|
15
|
-
value:
|
|
16
|
-
children: /* @__PURE__ */
|
|
14
|
+
}, [o, n]), l = m.useMemo(() => ({ open: s }), [s]);
|
|
15
|
+
return /* @__PURE__ */ h(y.Provider, {
|
|
16
|
+
value: l,
|
|
17
|
+
children: /* @__PURE__ */ h(u, {
|
|
17
18
|
open: s,
|
|
18
19
|
onOpenChange: c,
|
|
19
20
|
...r
|
|
20
21
|
})
|
|
21
22
|
});
|
|
22
23
|
};
|
|
23
|
-
|
|
24
|
-
var
|
|
25
|
-
ref:
|
|
24
|
+
x.displayName = "AlertDialog";
|
|
25
|
+
var S = f, C = l, w = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h(c, {
|
|
26
|
+
ref: n,
|
|
26
27
|
forceMount: !0,
|
|
27
|
-
className:
|
|
28
|
+
className: r("fixed inset-0 z-modal bg-overlay", e),
|
|
28
29
|
...t
|
|
29
30
|
}));
|
|
30
|
-
|
|
31
|
-
var
|
|
32
|
-
let { open:
|
|
33
|
-
return /* @__PURE__ */
|
|
31
|
+
w.displayName = c.displayName;
|
|
32
|
+
var T = m.forwardRef(({ className: i, children: a, responsive: s, ...c }, l) => {
|
|
33
|
+
let { open: u } = b(), d = p(), f = s !== !1 && d;
|
|
34
|
+
return /* @__PURE__ */ h(n, { children: /* @__PURE__ */ h(_, { children: u && /* @__PURE__ */ g(C, {
|
|
34
35
|
forceMount: !0,
|
|
35
|
-
children: [/* @__PURE__ */
|
|
36
|
+
children: [/* @__PURE__ */ h(w, {
|
|
36
37
|
asChild: !0,
|
|
37
|
-
children: /* @__PURE__ */
|
|
38
|
+
children: /* @__PURE__ */ h(v.div, {
|
|
38
39
|
initial: { opacity: 0 },
|
|
39
40
|
animate: { opacity: 1 },
|
|
40
41
|
exit: { opacity: 0 },
|
|
41
42
|
transition: t.fade
|
|
42
43
|
})
|
|
43
|
-
}), /* @__PURE__ */
|
|
44
|
-
ref:
|
|
44
|
+
}), /* @__PURE__ */ h(o, {
|
|
45
|
+
ref: l,
|
|
45
46
|
forceMount: !0,
|
|
46
47
|
asChild: !0,
|
|
47
|
-
...
|
|
48
|
-
children: /* @__PURE__ */
|
|
49
|
-
initial:
|
|
48
|
+
...c,
|
|
49
|
+
children: /* @__PURE__ */ h(v.div, {
|
|
50
|
+
initial: f ? { y: "100%" } : {
|
|
50
51
|
opacity: 0,
|
|
51
52
|
scale: .95,
|
|
52
53
|
x: "-50%",
|
|
53
54
|
y: "-50%"
|
|
54
55
|
},
|
|
55
|
-
animate:
|
|
56
|
+
animate: f ? { y: 0 } : {
|
|
56
57
|
opacity: 1,
|
|
57
58
|
scale: 1,
|
|
58
59
|
x: "-50%",
|
|
59
60
|
y: "-50%"
|
|
60
61
|
},
|
|
61
|
-
exit:
|
|
62
|
+
exit: f ? { y: "100%" } : {
|
|
62
63
|
opacity: 0,
|
|
63
64
|
scale: .95,
|
|
64
65
|
x: "-50%",
|
|
65
66
|
y: "-50%"
|
|
66
67
|
},
|
|
67
|
-
transition:
|
|
68
|
+
transition: f ? e.smooth : {
|
|
68
69
|
...e.smooth,
|
|
69
70
|
opacity: t.fade
|
|
70
71
|
},
|
|
71
|
-
className:
|
|
72
|
-
children:
|
|
72
|
+
className: r("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", s === !1 ? "left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay", i),
|
|
73
|
+
children: a
|
|
73
74
|
})
|
|
74
75
|
})]
|
|
75
|
-
}) });
|
|
76
|
+
}) }) });
|
|
76
77
|
});
|
|
77
|
-
|
|
78
|
-
var
|
|
79
|
-
ref:
|
|
80
|
-
className:
|
|
78
|
+
T.displayName = o.displayName;
|
|
79
|
+
var E = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h("div", {
|
|
80
|
+
ref: n,
|
|
81
|
+
className: r("flex flex-col space-y-ds-02b text-center sm:text-left", e),
|
|
81
82
|
...t
|
|
82
83
|
}));
|
|
83
|
-
|
|
84
|
-
var
|
|
85
|
-
ref:
|
|
86
|
-
className:
|
|
84
|
+
E.displayName = "AlertDialogHeader";
|
|
85
|
+
var D = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h("div", {
|
|
86
|
+
ref: n,
|
|
87
|
+
className: r("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03", e),
|
|
87
88
|
...t
|
|
88
89
|
}));
|
|
89
|
-
|
|
90
|
-
var
|
|
91
|
-
ref:
|
|
92
|
-
className:
|
|
90
|
+
D.displayName = "AlertDialogFooter";
|
|
91
|
+
var O = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h(d, {
|
|
92
|
+
ref: n,
|
|
93
|
+
className: r("text-heading-xs font-semibold", e),
|
|
93
94
|
...t
|
|
94
95
|
}));
|
|
95
|
-
|
|
96
|
-
var
|
|
97
|
-
ref:
|
|
98
|
-
className:
|
|
96
|
+
O.displayName = d.displayName;
|
|
97
|
+
var k = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h(s, {
|
|
98
|
+
ref: n,
|
|
99
|
+
className: r("text-body-md text-surface-fg-muted", e),
|
|
99
100
|
...t
|
|
100
101
|
}));
|
|
101
|
-
|
|
102
|
-
var
|
|
103
|
-
ref:
|
|
104
|
-
className:
|
|
102
|
+
k.displayName = s.displayName;
|
|
103
|
+
var A = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h(i, {
|
|
104
|
+
ref: n,
|
|
105
|
+
className: r("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", e),
|
|
105
106
|
...t
|
|
106
107
|
}));
|
|
107
|
-
|
|
108
|
-
var
|
|
109
|
-
ref:
|
|
110
|
-
className:
|
|
108
|
+
A.displayName = i.displayName;
|
|
109
|
+
var j = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h(a, {
|
|
110
|
+
ref: n,
|
|
111
|
+
className: r("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-interactive hover:bg-surface-panel-hover hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", e),
|
|
111
112
|
...t
|
|
112
113
|
}));
|
|
113
|
-
|
|
114
|
+
j.displayName = a.displayName;
|
|
114
115
|
//#endregion
|
|
115
|
-
export {
|
|
116
|
+
export { x as AlertDialog, A as AlertDialogAction, j as AlertDialogCancel, T as AlertDialogContent, k as AlertDialogDescription, D as AlertDialogFooter, E as AlertDialogHeader, w as AlertDialogOverlay, C as AlertDialogPortal, O as AlertDialogTitle, S as AlertDialogTrigger };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/ui/alert-dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as AlertDialogPrimitive from '@primitives/react-alert-dialog'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\ntype AlertDialogContextValue = { open: boolean }\nconst AlertDialogContext = React.createContext<AlertDialogContextValue>({ open: false })\nconst useAlertDialogOpen = () => React.useContext(AlertDialogContext)\n\nconst AlertDialog: React.FC<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>> = ({\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...props\n}) => {\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n const isControlled = openProp !== undefined\n const open = isControlled ? openProp : internalOpen\n\n const handleOpenChange = React.useCallback(\n (nextOpen: boolean) => {\n if (!isControlled) setInternalOpen(nextOpen)\n onOpenChange?.(nextOpen)\n },\n [isControlled, onOpenChange],\n )\n\n const contextValue = React.useMemo(() => ({ open }), [open])\n\n return (\n <AlertDialogContext.Provider value={contextValue}>\n <AlertDialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n </AlertDialogContext.Provider>\n )\n}\nAlertDialog.displayName = 'AlertDialog'\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Overlay\n ref={ref}\n forceMount\n className={cn(\n 'fixed inset-0 z-modal bg-overlay',\n className,\n )}\n {...props}\n />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\ninterface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {\n /** When true (default), AlertDialog fills the screen on mobile (<768px). Set false to always use centered modal. */\n responsive?: boolean\n}\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\n AlertDialogContentProps\n>(({ className, children, responsive, ...props }, ref) => {\n const { open } = useAlertDialogOpen()\n const isMobileRaw = useIsMobile()\n const isMobile = responsive !== false && isMobileRaw\n\n return (\n <AnimatePresence>\n {open && (\n <AlertDialogPortal forceMount>\n <AlertDialogOverlay asChild>\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={tweens.fade}\n />\n </AlertDialogOverlay>\n <AlertDialogPrimitive.Content\n ref={ref}\n forceMount\n asChild\n {...props}\n >\n <motion.div\n initial={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n animate={isMobile ? { y: 0 } : { opacity: 1, scale: 1, x: '-50%', y: '-50%' }}\n exit={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n transition={isMobile\n ? springs.smooth\n : { ...springs.smooth, opacity: tweens.fade }\n }\n className={cn(\n 'fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06',\n responsive !== false\n ? 'inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay'\n : 'left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay',\n className,\n )}\n >\n {children}\n </motion.div>\n </AlertDialogPrimitive.Content>\n </AlertDialogPortal>\n )}\n </AnimatePresence>\n )\n})\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col space-y-ds-02b text-center sm:text-left',\n className,\n )}\n {...props}\n />\n ),\n)\nAlertDialogHeader.displayName = 'AlertDialogHeader'\n\nconst AlertDialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n className,\n )}\n {...props}\n />\n ),\n)\nAlertDialogFooter.displayName = 'AlertDialogFooter'\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Title\n ref={ref}\n className={cn(\n 'text-heading-xs font-semibold',\n className,\n )}\n {...props}\n />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Description\n ref={ref}\n className={cn('text-body-md text-surface-fg-muted', className)}\n {...props}\n />\n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Action\n ref={ref}\n className={cn(\n 'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n className,\n )}\n {...props}\n />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Cancel\n ref={ref}\n className={cn(\n 'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-raised hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n className,\n )}\n {...props}\n />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport type { AlertDialogContentProps }\nexport type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\nexport type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/ui/alert-dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as AlertDialogPrimitive from '@primitives/react-alert-dialog'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { MotionPreference } from '../motion/motion-preference'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\ntype AlertDialogContextValue = { open: boolean }\nconst AlertDialogContext = React.createContext<AlertDialogContextValue>({ open: false })\nconst useAlertDialogOpen = () => React.useContext(AlertDialogContext)\n\nconst AlertDialog: React.FC<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>> = ({\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...props\n}) => {\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n const isControlled = openProp !== undefined\n const open = isControlled ? openProp : internalOpen\n\n const handleOpenChange = React.useCallback(\n (nextOpen: boolean) => {\n if (!isControlled) setInternalOpen(nextOpen)\n onOpenChange?.(nextOpen)\n },\n [isControlled, onOpenChange],\n )\n\n const contextValue = React.useMemo(() => ({ open }), [open])\n\n return (\n <AlertDialogContext.Provider value={contextValue}>\n <AlertDialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n </AlertDialogContext.Provider>\n )\n}\nAlertDialog.displayName = 'AlertDialog'\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Overlay\n ref={ref}\n forceMount\n className={cn(\n 'fixed inset-0 z-modal bg-overlay',\n className,\n )}\n {...props}\n />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\ninterface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {\n /** When true (default), AlertDialog fills the screen on mobile (<768px). Set false to always use centered modal. */\n responsive?: boolean\n}\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\n AlertDialogContentProps\n>(({ className, children, responsive, ...props }, ref) => {\n const { open } = useAlertDialogOpen()\n const isMobileRaw = useIsMobile()\n const isMobile = responsive !== false && isMobileRaw\n\n return (\n <MotionPreference>\n <AnimatePresence>\n {open && (\n <AlertDialogPortal forceMount>\n <AlertDialogOverlay asChild>\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={tweens.fade}\n />\n </AlertDialogOverlay>\n <AlertDialogPrimitive.Content\n ref={ref}\n forceMount\n asChild\n {...props}\n >\n <motion.div\n initial={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n animate={isMobile ? { y: 0 } : { opacity: 1, scale: 1, x: '-50%', y: '-50%' }}\n exit={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n transition={isMobile\n ? springs.smooth\n : { ...springs.smooth, opacity: tweens.fade }\n }\n className={cn(\n 'fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06',\n responsive !== false\n ? 'inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay'\n : 'left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay',\n className,\n )}\n >\n {children}\n </motion.div>\n </AlertDialogPrimitive.Content>\n </AlertDialogPortal>\n )}\n </AnimatePresence>\n </MotionPreference>\n )\n})\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col space-y-ds-02b text-center sm:text-left',\n className,\n )}\n {...props}\n />\n ),\n)\nAlertDialogHeader.displayName = 'AlertDialogHeader'\n\nconst AlertDialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n className,\n )}\n {...props}\n />\n ),\n)\nAlertDialogFooter.displayName = 'AlertDialogFooter'\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Title\n ref={ref}\n className={cn(\n 'text-heading-xs font-semibold',\n className,\n )}\n {...props}\n />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Description\n ref={ref}\n className={cn('text-body-md text-surface-fg-muted', className)}\n {...props}\n />\n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Action\n ref={ref}\n className={cn(\n 'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n className,\n )}\n {...props}\n />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Cancel\n ref={ref}\n className={cn(\n 'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-interactive hover:bg-surface-panel-hover hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n className,\n )}\n {...props}\n />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport type { AlertDialogContentProps }\nexport type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\nexport type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n"],"mappings":"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"}
|
package/dist/ui/alert.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,QAAA,MAAM,aAAa;;;;8EAiDlB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,mFAqEV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
|
package/dist/ui/alert.js
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { motionProps as e, springs as t } from "./lib/motion.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
3
|
+
import { MotionPreference as n } from "../_chunks/motion-preference.js";
|
|
4
|
+
import { cn as r } from "./lib/utils.js";
|
|
5
|
+
import { Icon as i } from "./icon.js";
|
|
6
|
+
import * as a from "react";
|
|
7
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
8
|
+
import { IconAlertCircle as c, IconAlertTriangle as l, IconCircleCheck as u, IconInfoCircle as d, IconX as f } from "@tabler/icons-react";
|
|
9
|
+
import { AnimatePresence as p, motion as m } from "framer-motion";
|
|
10
|
+
import { cva as h } from "class-variance-authority";
|
|
10
11
|
//#region src/ui/alert.tsx
|
|
11
|
-
var
|
|
12
|
+
var g = h("relative flex rounded-surface border", {
|
|
12
13
|
variants: {
|
|
13
14
|
variant: {
|
|
14
|
-
subtle: "",
|
|
15
|
-
solid: "",
|
|
16
|
-
outline: ""
|
|
15
|
+
subtle: "bg-palette-subtle border-palette-border text-palette-text",
|
|
16
|
+
solid: "bg-palette-solid text-palette-fg border-transparent [&>svg]:text-palette-fg",
|
|
17
|
+
outline: "bg-transparent border-palette-border text-palette-text"
|
|
17
18
|
},
|
|
18
19
|
color: {
|
|
19
20
|
info: "",
|
|
@@ -29,80 +30,20 @@ var h = m("relative flex rounded-surface border", {
|
|
|
29
30
|
}
|
|
30
31
|
},
|
|
31
32
|
compoundVariants: [
|
|
32
|
-
{
|
|
33
|
-
variant: "subtle",
|
|
34
|
-
color: "info",
|
|
35
|
-
className: "bg-info-3 border-info-7 text-info-11"
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
variant: "subtle",
|
|
39
|
-
color: "success",
|
|
40
|
-
className: "bg-success-3 border-success-7 text-success-11"
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
variant: "subtle",
|
|
44
|
-
color: "warning",
|
|
45
|
-
className: "bg-warning-3 border-warning-7 text-warning-11"
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
variant: "subtle",
|
|
49
|
-
color: "error",
|
|
50
|
-
className: "bg-error-3 border-error-7 text-error-11"
|
|
51
|
-
},
|
|
52
33
|
{
|
|
53
34
|
variant: "subtle",
|
|
54
35
|
color: "neutral",
|
|
55
|
-
className: "bg-surface-
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
variant: "solid",
|
|
59
|
-
color: "info",
|
|
60
|
-
className: "bg-info-9 text-info-fg border-transparent [&>svg]:text-info-fg"
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
variant: "solid",
|
|
64
|
-
color: "success",
|
|
65
|
-
className: "bg-success-9 text-success-fg border-transparent [&>svg]:text-success-fg"
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
variant: "solid",
|
|
69
|
-
color: "warning",
|
|
70
|
-
className: "bg-warning-9 text-warning-fg border-transparent [&>svg]:text-warning-fg"
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
variant: "solid",
|
|
74
|
-
color: "error",
|
|
75
|
-
className: "bg-error-9 text-error-fg border-transparent [&>svg]:text-error-fg"
|
|
36
|
+
className: "bg-surface-panel text-surface-fg [&>svg]:text-surface-fg-muted"
|
|
76
37
|
},
|
|
77
38
|
{
|
|
78
39
|
variant: "solid",
|
|
79
40
|
color: "neutral",
|
|
80
|
-
className: "bg-surface-
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
variant: "outline",
|
|
84
|
-
color: "info",
|
|
85
|
-
className: "bg-transparent border-info-7 text-info-11"
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
variant: "outline",
|
|
89
|
-
color: "success",
|
|
90
|
-
className: "bg-transparent border-success-7 text-success-11"
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
variant: "outline",
|
|
94
|
-
color: "warning",
|
|
95
|
-
className: "bg-transparent border-warning-7 text-warning-11"
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
variant: "outline",
|
|
99
|
-
color: "error",
|
|
100
|
-
className: "bg-transparent border-error-7 text-error-11"
|
|
41
|
+
className: "bg-surface-panel-hover text-surface-fg [&>svg]:text-surface-fg-muted"
|
|
101
42
|
},
|
|
102
43
|
{
|
|
103
44
|
variant: "outline",
|
|
104
45
|
color: "neutral",
|
|
105
|
-
className: "
|
|
46
|
+
className: "text-surface-fg [&>svg]:text-surface-fg-muted"
|
|
106
47
|
}
|
|
107
48
|
],
|
|
108
49
|
defaultVariants: {
|
|
@@ -110,20 +51,20 @@ var h = m("relative flex rounded-surface border", {
|
|
|
110
51
|
color: "info",
|
|
111
52
|
size: "md"
|
|
112
53
|
}
|
|
113
|
-
}),
|
|
114
|
-
info:
|
|
115
|
-
success:
|
|
116
|
-
warning:
|
|
117
|
-
error:
|
|
118
|
-
neutral:
|
|
119
|
-
},
|
|
120
|
-
let
|
|
121
|
-
|
|
122
|
-
}, []),
|
|
123
|
-
return /* @__PURE__ */
|
|
124
|
-
onExitComplete:
|
|
125
|
-
children:
|
|
126
|
-
ref:
|
|
54
|
+
}), _ = {
|
|
55
|
+
info: d,
|
|
56
|
+
success: u,
|
|
57
|
+
warning: l,
|
|
58
|
+
error: c,
|
|
59
|
+
neutral: d
|
|
60
|
+
}, v = a.forwardRef(({ className: c, variant: l = "subtle", color: u = "info", size: d = "md", title: h, onDismiss: v, children: y, ...b }, x) => {
|
|
61
|
+
let S = _[u ?? "info"], [C, w] = a.useState(!0), T = a.useCallback(() => {
|
|
62
|
+
w(!1);
|
|
63
|
+
}, []), E = d === "sm" ? "sm" : d === "lg" ? "lg" : "md", D = d === "sm" ? "xs" : "sm", O = d === "sm" ? "text-body-xs" : "text-body-md", k = d === "sm" ? "text-body-sm" : d === "lg" ? "text-heading-xs" : "text-body-md";
|
|
64
|
+
return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(p, {
|
|
65
|
+
onExitComplete: v,
|
|
66
|
+
children: C && /* @__PURE__ */ s(m.div, {
|
|
67
|
+
ref: x,
|
|
127
68
|
initial: {
|
|
128
69
|
opacity: 1,
|
|
129
70
|
y: 0
|
|
@@ -137,43 +78,44 @@ var h = m("relative flex rounded-surface border", {
|
|
|
137
78
|
y: -8
|
|
138
79
|
},
|
|
139
80
|
transition: t.snappy,
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
81
|
+
"data-palette": u,
|
|
82
|
+
className: r(g({
|
|
83
|
+
variant: l,
|
|
84
|
+
color: u,
|
|
85
|
+
size: d
|
|
86
|
+
}), c),
|
|
145
87
|
role: "alert",
|
|
146
|
-
...e(
|
|
88
|
+
...e(b),
|
|
147
89
|
children: [
|
|
148
|
-
/* @__PURE__ */
|
|
149
|
-
icon:
|
|
150
|
-
size:
|
|
90
|
+
/* @__PURE__ */ o(i, {
|
|
91
|
+
icon: S,
|
|
92
|
+
size: E,
|
|
151
93
|
className: "mt-ds-01 shrink-0"
|
|
152
94
|
}),
|
|
153
|
-
/* @__PURE__ */
|
|
95
|
+
/* @__PURE__ */ s("div", {
|
|
154
96
|
className: "flex-1 min-w-0",
|
|
155
|
-
children: [
|
|
156
|
-
className:
|
|
157
|
-
children:
|
|
158
|
-
}), /* @__PURE__ */
|
|
159
|
-
className:
|
|
160
|
-
children:
|
|
97
|
+
children: [h && /* @__PURE__ */ o("p", {
|
|
98
|
+
className: r(k, "font-semibold mb-ds-01"),
|
|
99
|
+
children: h
|
|
100
|
+
}), /* @__PURE__ */ o("div", {
|
|
101
|
+
className: r(O, l !== "solid" && "text-surface-fg-muted"),
|
|
102
|
+
children: y
|
|
161
103
|
})]
|
|
162
104
|
}),
|
|
163
|
-
|
|
105
|
+
v && /* @__PURE__ */ o("button", {
|
|
164
106
|
type: "button",
|
|
165
|
-
onClick:
|
|
166
|
-
className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner
|
|
107
|
+
onClick: T,
|
|
108
|
+
className: r("shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-fast-01 ease-productive-standard active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", l === "solid" ? "text-current opacity-80 hover:opacity-100" : "text-surface-fg-subtle hover:text-surface-fg-muted hover:bg-surface-panel-hover"),
|
|
167
109
|
"aria-label": "Dismiss",
|
|
168
|
-
children: /* @__PURE__ */
|
|
169
|
-
icon:
|
|
170
|
-
size:
|
|
110
|
+
children: /* @__PURE__ */ o(i, {
|
|
111
|
+
icon: f,
|
|
112
|
+
size: D
|
|
171
113
|
})
|
|
172
114
|
})
|
|
173
115
|
]
|
|
174
116
|
})
|
|
175
|
-
});
|
|
117
|
+
}) });
|
|
176
118
|
});
|
|
177
|
-
|
|
119
|
+
v.displayName = "Alert";
|
|
178
120
|
//#endregion
|
|
179
|
-
export {
|
|
121
|
+
export { v as Alert, g as alertVariants };
|
package/dist/ui/alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","names":[],"sources":["../../src/ui/alert.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst alertVariants = cva(\n 'relative flex rounded-surface border',\n {\n variants: {\n variant: {\n subtle: '',\n solid: '',\n outline: '',\n },\n color: {\n info: '',\n success: '',\n warning: '',\n error: '',\n neutral: '',\n },\n size: {\n sm: 'gap-ds-03 p-ds-03',\n md: 'gap-ds-04 p-ds-05',\n lg: 'gap-ds-05 p-ds-07',\n },\n },\n compoundVariants: [\n // subtle (surface bg) — default, matches previous behavior\n { variant: 'subtle', color: 'info', className: 'bg-info-3 border-info-7 text-info-11' },\n { variant: 'subtle', color: 'success', className: 'bg-success-3 border-success-7 text-success-11' },\n { variant: 'subtle', color: 'warning', className: 'bg-warning-3 border-warning-7 text-warning-11' },\n { variant: 'subtle', color: 'error', className: 'bg-error-3 border-error-7 text-error-11' },\n { variant: 'subtle', color: 'neutral', className: 'bg-surface-raised border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted' },\n // solid (solid bg, contrasting text) — canonical name\n { variant: 'solid', color: 'info', className: 'bg-info-9 text-info-fg border-transparent [&>svg]:text-info-fg' },\n { variant: 'solid', color: 'success', className: 'bg-success-9 text-success-fg border-transparent [&>svg]:text-success-fg' },\n { variant: 'solid', color: 'warning', className: 'bg-warning-9 text-warning-fg border-transparent [&>svg]:text-warning-fg' },\n { variant: 'solid', color: 'error', className: 'bg-error-9 text-error-fg border-transparent [&>svg]:text-error-fg' },\n { variant: 'solid', color: 'neutral', className: 'bg-surface-raised-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted' },\n // outline (transparent bg, colored border)\n { variant: 'outline', color: 'info', className: 'bg-transparent border-info-7 text-info-11' },\n { variant: 'outline', color: 'success', className: 'bg-transparent border-success-7 text-success-11' },\n { variant: 'outline', color: 'warning', className: 'bg-transparent border-warning-7 text-warning-11' },\n { variant: 'outline', color: 'error', className: 'bg-transparent border-error-7 text-error-11' },\n { variant: 'outline', color: 'neutral', className: 'bg-transparent border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted' },\n ],\n defaultVariants: { variant: 'subtle', color: 'info', size: 'md' },\n },\n)\n\nconst ALERT_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n info: IconInfoCircle,\n success: IconCircleCheck,\n warning: IconAlertTriangle,\n error: IconAlertCircle,\n neutral: IconInfoCircle,\n}\n\n/**\n * Props for Alert — an inline message block with a colored icon, optional title, optional body,\n * and an optional dismiss button. Renders with `role=\"alert\"` for screen reader announcements.\n *\n * **Variants:** `subtle` (default, tinted surface) | `solid` (solid colored bg) | `outline` (transparent bg, colored border)\n *\n * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`\n * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.\n *\n * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification\n * strip rendered at the top of a page/section (see `<Banner>`).\n *\n * **Dismissible:** Provide `onDismiss` to show an × button. Absence of the prop = non-dismissible.\n *\n * @example\n * // Informational tip inside a settings form:\n * <Alert title=\"Tip\" color=\"info\">\n * Changes take effect after you save and reload the page.\n * </Alert>\n *\n * @example\n * // Error feedback after a failed API call (dismissible):\n * <Alert color=\"error\" title=\"Save failed\" onDismiss={() => setError(null)}>\n * Your changes could not be saved. Please try again.\n * </Alert>\n *\n * @example\n * // Success confirmation after publishing:\n * <Alert color=\"success\" title=\"Published!\">\n * Your post is now live and visible to all subscribers.\n * </Alert>\n *\n * @example\n * // Neutral inline note (no colored intent):\n * <Alert color=\"neutral\">This field is auto-populated from your profile.</Alert>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AlertProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n VariantProps<typeof alertVariants> {\n title?: string\n /**\n * Called after the exit animation completes, not immediately on click.\n * The dismiss button sets internal visibility to false, triggering the exit\n * animation; `onDismiss` fires via `AnimatePresence.onExitComplete`.\n */\n onDismiss?: () => void\n}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n ({ className, variant = 'subtle', color = 'info', size = 'md', title, onDismiss, children, ...props }, ref) => {\n const AlertIcon = ALERT_ICONS[color ?? 'info']\n const [isVisible, setIsVisible] = React.useState(true)\n\n const handleDismiss = React.useCallback(() => {\n setIsVisible(false)\n }, [])\n\n const iconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'\n const dismissIconSize = size === 'sm' ? 'xs' : 'sm'\n const textClass = size === 'sm' ? 'text-body-xs' : size === 'lg' ? 'text-body-md' : 'text-body-md'\n const titleClass = size === 'sm' ? 'text-body-sm' : size === 'lg' ? 'text-heading-xs' : 'text-body-md'\n\n return (\n <AnimatePresence onExitComplete={onDismiss}>\n {isVisible && (\n <motion.div\n ref={ref}\n initial={{ opacity: 1, y: 0 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -8 }}\n transition={springs.snappy}\n className={cn(alertVariants({ variant, color, size }), className)}\n role=\"alert\"\n {...motionProps(props)}\n >\n <Icon icon={AlertIcon} size={iconSize} className=\"mt-ds-01 shrink-0\" />\n <div className=\"flex-1 min-w-0\">\n {title && <p className={cn(titleClass, 'font-semibold mb-ds-01')}>{title}</p>}\n {/* Body: on solid variants the CVA sets text-accent-fg (white) on\n saturated step-9 backgrounds. Muting the body to surface-fg (grey)\n there drops contrast below WCAG AA. Only mute on subtle/outline\n variants where the root color is a readable step-11. */}\n <div\n className={cn(\n textClass,\n variant !== 'solid' && 'text-surface-fg-muted',\n )}\n >\n {children}\n </div>\n </div>\n {onDismiss && (\n <button\n type=\"button\"\n onClick={handleDismiss}\n className=\"shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n aria-label=\"Dismiss\"\n >\n <Icon icon={IconX} size={dismissIconSize} />\n </button>\n )}\n </motion.div>\n )}\n </AnimatePresence>\n )\n },\n)\nAlert.displayName = 'Alert'\n\nexport { Alert, alertVariants }\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"alert.js","names":[],"sources":["../../src/ui/alert.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst alertVariants = cva(\n 'relative flex rounded-surface border',\n {\n variants: {\n // Colour is a role; the hue arrives via `data-palette` on the element.\n // Alert's subtle edge was already step 4, which is what the `border` role\n // now resolves to, so it is an exact match rather than a compromise.\n variant: {\n subtle: 'bg-palette-subtle border-palette-border text-palette-text',\n solid:\n 'bg-palette-solid text-palette-fg border-transparent [&>svg]:text-palette-fg',\n outline: 'bg-transparent border-palette-border text-palette-text',\n },\n color: {\n info: '',\n success: '',\n warning: '',\n error: '',\n neutral: '',\n },\n size: {\n sm: 'gap-ds-03 p-ds-03',\n md: 'gap-ds-04 p-ds-05',\n lg: 'gap-ds-05 p-ds-07',\n },\n },\n // Fifteen compounds become three, all of them `neutral`. A neutral alert is\n // not a grey version of a coloured one — it is a plain panel, so its ground\n // and its text come from the surface family rather than a ramp, and its icon\n // steps back to muted instead of matching the label.\n compoundVariants: [\n {\n variant: 'subtle',\n color: 'neutral',\n className: 'bg-surface-panel text-surface-fg [&>svg]:text-surface-fg-muted',\n },\n {\n variant: 'solid',\n color: 'neutral',\n className: 'bg-surface-panel-hover text-surface-fg [&>svg]:text-surface-fg-muted',\n },\n {\n variant: 'outline',\n color: 'neutral',\n className: 'text-surface-fg [&>svg]:text-surface-fg-muted',\n },\n ],\n defaultVariants: { variant: 'subtle', color: 'info', size: 'md' },\n },\n)\n\nconst ALERT_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n info: IconInfoCircle,\n success: IconCircleCheck,\n warning: IconAlertTriangle,\n error: IconAlertCircle,\n neutral: IconInfoCircle,\n}\n\n/**\n * Props for Alert — an inline message block with a colored icon, optional title, optional body,\n * and an optional dismiss button. Renders with `role=\"alert\"` for screen reader announcements.\n *\n * **Variants:** `subtle` (default, tinted surface) | `solid` (solid colored bg) | `outline` (transparent bg, colored border)\n *\n * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`\n * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.\n *\n * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification\n * strip rendered at the top of a page/section (see `<Banner>`).\n *\n * **Dismissible:** Provide `onDismiss` to show an × button. Absence of the prop = non-dismissible.\n *\n * @example\n * // Informational tip inside a settings form:\n * <Alert title=\"Tip\" color=\"info\">\n * Changes take effect after you save and reload the page.\n * </Alert>\n *\n * @example\n * // Error feedback after a failed API call (dismissible):\n * <Alert color=\"error\" title=\"Save failed\" onDismiss={() => setError(null)}>\n * Your changes could not be saved. Please try again.\n * </Alert>\n *\n * @example\n * // Success confirmation after publishing:\n * <Alert color=\"success\" title=\"Published!\">\n * Your post is now live and visible to all subscribers.\n * </Alert>\n *\n * @example\n * // Neutral inline note (no colored intent):\n * <Alert color=\"neutral\">This field is auto-populated from your profile.</Alert>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AlertProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n VariantProps<typeof alertVariants> {\n title?: string\n /**\n * Called after the exit animation completes, not immediately on click.\n * The dismiss button sets internal visibility to false, triggering the exit\n * animation; `onDismiss` fires via `AnimatePresence.onExitComplete`.\n */\n onDismiss?: () => void\n}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n ({ className, variant = 'subtle', color = 'info', size = 'md', title, onDismiss, children, ...props }, ref) => {\n const AlertIcon = ALERT_ICONS[color ?? 'info']\n const [isVisible, setIsVisible] = React.useState(true)\n\n const handleDismiss = React.useCallback(() => {\n setIsVisible(false)\n }, [])\n\n const iconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'\n const dismissIconSize = size === 'sm' ? 'xs' : 'sm'\n const textClass = size === 'sm' ? 'text-body-xs' : size === 'lg' ? 'text-body-md' : 'text-body-md'\n const titleClass = size === 'sm' ? 'text-body-sm' : size === 'lg' ? 'text-heading-xs' : 'text-body-md'\n\n return (\n <MotionPreference>\n <AnimatePresence onExitComplete={onDismiss}>\n {isVisible && (\n <motion.div\n ref={ref}\n initial={{ opacity: 1, y: 0 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -8 }}\n transition={springs.snappy}\n data-palette={color}\n className={cn(alertVariants({ variant, color, size }), className)}\n role=\"alert\"\n {...motionProps(props)}\n >\n <Icon icon={AlertIcon} size={iconSize} className=\"mt-ds-01 shrink-0\" />\n <div className=\"flex-1 min-w-0\">\n {title && <p className={cn(titleClass, 'font-semibold mb-ds-01')}>{title}</p>}\n {/* Body: on solid variants the CVA sets text-accent-fg (white) on\n saturated step-9 backgrounds. Muting the body to surface-fg (grey)\n there drops contrast below WCAG AA. Only mute on subtle/outline\n variants where the root color is a readable step-11. */}\n <div\n className={cn(\n textClass,\n variant !== 'solid' && 'text-surface-fg-muted',\n )}\n >\n {children}\n </div>\n </div>\n {onDismiss && (\n <button\n type=\"button\"\n onClick={handleDismiss}\n className={cn(\n 'shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-fast-01 ease-productive-standard active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n // On solid the fill is a saturated step 9, where a mid grey\n // measures as low as 1.01:1. Inherit the alert's own foreground,\n // exactly as the title and body already do.\n variant === 'solid'\n ? 'text-current opacity-80 hover:opacity-100'\n : 'text-surface-fg-subtle hover:text-surface-fg-muted hover:bg-surface-panel-hover',\n )}\n aria-label=\"Dismiss\"\n >\n <Icon icon={IconX} size={dismissIconSize} />\n </button>\n )}\n </motion.div>\n )}\n </AnimatePresence>\n </MotionPreference>\n )\n },\n)\nAlert.displayName = 'Alert'\n\nexport { Alert, alertVariants }\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,IAAgB,EACpB,wCACA;CACE,UAAU;EAIR,SAAS;GACP,QAAQ;GACR,OACE;GACF,SAAS;EACX;EACA,OAAO;GACL,MAAM;GACN,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;EACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CAKA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,WAAW;EACb;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW;EACb;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW;EACb;CACF;CACA,iBAAiB;EAAE,SAAS;EAAU,OAAO;EAAQ,MAAM;CAAK;AAClE,CACF,GAEM,IAAoE;CACxE,MAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,SAAS;AACX,GAmDM,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,UAAU,WAAQ,QAAQ,UAAO,MAAM,UAAO,cAAW,aAAU,GAAG,KAAS,MAAQ;CAC7G,IAAM,IAAY,EAAY,KAAS,SACjC,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAI,GAE/C,IAAgB,EAAM,kBAAkB;EAC5C,EAAa,EAAK;CACpB,GAAG,CAAC,CAAC,GAEC,IAAW,MAAS,OAAO,OAAO,MAAS,OAAO,OAAO,MACzD,IAAkB,MAAS,OAAO,OAAO,MACzC,IAAY,MAAS,OAAO,iBAAiC,gBAC7D,IAAa,MAAS,OAAO,iBAAiB,MAAS,OAAO,oBAAoB;CAExF,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAiB,gBAAgB;YAC9B,KACC,kBAAC,EAAO,KAAR;GACO;GACL,SAAS;IAAE,SAAS;IAAG,GAAG;GAAE;GAC5B,SAAS;IAAE,SAAS;IAAG,GAAG;GAAE;GAC5B,MAAM;IAAE,SAAS;IAAG,GAAG;GAAG;GAC1B,YAAY,EAAQ;GACpB,gBAAc;GACd,WAAW,EAAG,EAAc;IAAE;IAAS;IAAO;GAAK,CAAC,GAAG,CAAS;GAChE,MAAK;GACL,GAAI,EAAY,CAAK;aATvB;IAWE,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAM;KAAU,WAAU;IAAqB,CAAA;IACtE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,KAAS,kBAAC,KAAD;MAAG,WAAW,EAAG,GAAY,wBAAwB;gBAAI;KAAS,CAAA,GAK5E,kBAAC,OAAD;MACE,WAAW,EACT,GACA,MAAY,WAAW,uBACzB;MAEC;KACE,CAAA,CACF;;IACJ,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAW,EACT,qPAIA,MAAY,UACR,8CACA,iFACN;KACA,cAAW;eAEX,kBAAC,GAAD;MAAM,MAAM;MAAO,MAAM;KAAkB,CAAA;IACrC,CAAA;GAEA;;CAEC,CAAA,EACD,CAAA;AAEtB,CACF;AACA,EAAM,cAAc"}
|