@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/radio.js
CHANGED
|
@@ -1,60 +1,61 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { springs as e } from "./lib/motion.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
3
|
+
import { MotionPreference as t } from "../_chunks/motion-preference.js";
|
|
4
|
+
import { cn as n } from "./lib/utils.js";
|
|
5
|
+
import { useFormField as r } from "./form.js";
|
|
6
|
+
import { resolveFieldState as i } from "../_chunks/field-state.js";
|
|
7
|
+
import { Indicator as a, Item2 as o, Root2 as s } from "../_chunks/primitives/react-radio-group.js";
|
|
8
|
+
import * as c from "react";
|
|
9
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
10
|
+
import { IconCircle as u } from "@tabler/icons-react";
|
|
11
|
+
import { motion as d } from "framer-motion";
|
|
11
12
|
//#region src/ui/radio.tsx
|
|
12
|
-
var
|
|
13
|
+
var f = c.createContext(void 0), p = {
|
|
13
14
|
error: "border-error-7",
|
|
14
15
|
warning: "border-warning-7",
|
|
15
16
|
success: "border-success-7"
|
|
16
|
-
},
|
|
17
|
-
let
|
|
18
|
-
return /* @__PURE__ */
|
|
17
|
+
}, m = c.forwardRef(({ className: e, state: t, ...a }, o) => {
|
|
18
|
+
let c = r(), u = i(t, c.state), d = a["aria-describedby"] ?? c.helperTextId, p = a["aria-required"] ?? c.required;
|
|
19
|
+
return /* @__PURE__ */ l(f.Provider, {
|
|
19
20
|
value: u,
|
|
20
|
-
children: /* @__PURE__ */
|
|
21
|
-
className:
|
|
21
|
+
children: /* @__PURE__ */ l(s, {
|
|
22
|
+
className: n("grid gap-ds-03", e),
|
|
22
23
|
"aria-invalid": u === "error" || void 0,
|
|
23
|
-
"aria-describedby":
|
|
24
|
+
"aria-describedby": d,
|
|
24
25
|
"aria-required": p || void 0,
|
|
25
26
|
...a,
|
|
26
|
-
ref:
|
|
27
|
+
ref: o
|
|
27
28
|
})
|
|
28
29
|
});
|
|
29
30
|
});
|
|
30
|
-
|
|
31
|
-
var
|
|
31
|
+
m.displayName = s.displayName;
|
|
32
|
+
var h = {
|
|
32
33
|
sm: "h-5 w-5",
|
|
33
34
|
md: "h-6 w-6",
|
|
34
35
|
lg: "h-7 w-7"
|
|
35
|
-
},
|
|
36
|
+
}, g = {
|
|
36
37
|
sm: "h-1.5 w-1.5",
|
|
37
38
|
md: "h-ds-03 w-ds-03",
|
|
38
39
|
lg: "h-2.5 w-2.5"
|
|
39
|
-
},
|
|
40
|
-
let
|
|
41
|
-
return /* @__PURE__ */
|
|
42
|
-
ref:
|
|
43
|
-
className:
|
|
44
|
-
...
|
|
45
|
-
children: /* @__PURE__ */
|
|
40
|
+
}, _ = c.forwardRef(({ className: r, size: i = "md", ...s }, m) => {
|
|
41
|
+
let _ = c.useContext(f);
|
|
42
|
+
return /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(o, {
|
|
43
|
+
ref: m,
|
|
44
|
+
className: n("touch-target aspect-square rounded-pill", h[i], "border border-surface-border-interactive bg-surface-panel-hover", "transition-colors duration-fast-01", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-action-disabled", "hover:border-accent-7 hover:bg-surface-panel-active", "data-[state=checked]:border-accent-7", _ && p[_], r),
|
|
45
|
+
...s,
|
|
46
|
+
children: /* @__PURE__ */ l(a, {
|
|
46
47
|
asChild: !0,
|
|
47
48
|
className: "flex items-center justify-center",
|
|
48
|
-
children: /* @__PURE__ */
|
|
49
|
+
children: /* @__PURE__ */ l(d.span, {
|
|
49
50
|
className: "flex items-center justify-center",
|
|
50
51
|
initial: { scale: 0 },
|
|
51
52
|
animate: { scale: 1 },
|
|
52
53
|
transition: e.snappy,
|
|
53
|
-
children: /* @__PURE__ */
|
|
54
|
+
children: /* @__PURE__ */ l(u, { className: n(g[i], "fill-accent-9 text-accent-11") })
|
|
54
55
|
})
|
|
55
56
|
})
|
|
56
|
-
});
|
|
57
|
+
}) });
|
|
57
58
|
});
|
|
58
|
-
|
|
59
|
+
_.displayName = o.displayName;
|
|
59
60
|
//#endregion
|
|
60
|
-
export {
|
|
61
|
+
export { m as RadioGroup, _ as RadioGroupItem };
|
package/dist/ui/radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","names":[],"sources":["../../src/ui/radio.tsx"],"sourcesContent":["'use client'\n\nimport * as RadioGroupPrimitive from '@primitives/react-radio-group'\nimport { IconCircle } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// Thread the group's resolved state to items so they show the matching border tint.\nconst RadioStateContext = React.createContext<Exclude<FieldState, 'default'> | undefined>(undefined)\n\n/** Border tint per validation state, applied to each item. */\nconst stateBorderClasses: Record<Exclude<FieldState, 'default'>, string> = {\n error: 'border-error-7',\n warning: 'border-warning-7',\n success: 'border-success-7',\n}\n\nexport interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n /** Validation/feedback state for the whole group. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n state?: FieldState\n}\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\n RadioGroupProps\n>(({ className, state: stateProp, ...props }, ref) => {\n const fieldCtx = useFormField()\n const state = resolveFieldState(stateProp, fieldCtx.state)\n const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n return (\n <RadioStateContext.Provider value={state}>\n <RadioGroupPrimitive.Root\n className={cn('grid gap-ds-03', className)}\n aria-invalid={state === 'error' || undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={ariaRequired || undefined}\n {...props}\n ref={ref}\n />\n </RadioStateContext.Provider>\n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nexport interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {\n /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n size?: 'sm' | 'md' | 'lg'\n}\n\nconst radioSizeClasses = {\n sm: 'h-5 w-5',\n md: 'h-6 w-6',\n lg: 'h-7 w-7',\n} as const\n\nconst radioIndicatorClasses = {\n sm: 'h-1.5 w-1.5',\n md: 'h-ds-03 w-ds-03',\n lg: 'h-2.5 w-2.5',\n} as const\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\n RadioGroupItemProps\n>(({ className, size = 'md', ...props }, ref) => {\n const state = React.useContext(RadioStateContext)\n return (\n <RadioGroupPrimitive.Item\n
|
|
1
|
+
{"version":3,"file":"radio.js","names":[],"sources":["../../src/ui/radio.tsx"],"sourcesContent":["'use client'\n\nimport * as RadioGroupPrimitive from '@primitives/react-radio-group'\nimport { IconCircle } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// Thread the group's resolved state to items so they show the matching border tint.\nconst RadioStateContext = React.createContext<Exclude<FieldState, 'default'> | undefined>(undefined)\n\n/** Border tint per validation state, applied to each item. */\nconst stateBorderClasses: Record<Exclude<FieldState, 'default'>, string> = {\n error: 'border-error-7',\n warning: 'border-warning-7',\n success: 'border-success-7',\n}\n\nexport interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n /** Validation/feedback state for the whole group. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n state?: FieldState\n}\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\n RadioGroupProps\n>(({ className, state: stateProp, ...props }, ref) => {\n const fieldCtx = useFormField()\n const state = resolveFieldState(stateProp, fieldCtx.state)\n const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n return (\n <RadioStateContext.Provider value={state}>\n <RadioGroupPrimitive.Root\n className={cn('grid gap-ds-03', className)}\n aria-invalid={state === 'error' || undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={ariaRequired || undefined}\n {...props}\n ref={ref}\n />\n </RadioStateContext.Provider>\n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nexport interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {\n /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n size?: 'sm' | 'md' | 'lg'\n}\n\nconst radioSizeClasses = {\n sm: 'h-5 w-5',\n md: 'h-6 w-6',\n lg: 'h-7 w-7',\n} as const\n\nconst radioIndicatorClasses = {\n sm: 'h-1.5 w-1.5',\n md: 'h-ds-03 w-ds-03',\n lg: 'h-2.5 w-2.5',\n} as const\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\n RadioGroupItemProps\n>(({ className, size = 'md', ...props }, ref) => {\n const state = React.useContext(RadioStateContext)\n return (\n <MotionPreference>\n <RadioGroupPrimitive.Item\n ref={ref}\n className={cn(\n 'touch-target aspect-square rounded-pill',\n radioSizeClasses[size],\n 'border border-surface-border-interactive bg-surface-panel-hover',\n 'transition-colors duration-fast-01',\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n 'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n 'hover:border-accent-7 hover:bg-surface-panel-active',\n 'data-[state=checked]:border-accent-7',\n state && stateBorderClasses[state],\n className,\n )}\n {...props}\n >\n <RadioGroupPrimitive.Indicator asChild className=\"flex items-center justify-center\">\n <motion.span\n className=\"flex items-center justify-center\"\n initial={{ scale: 0 }}\n animate={{ scale: 1 }}\n transition={springs.snappy}\n >\n <IconCircle className={cn(radioIndicatorClasses[size], 'fill-accent-9 text-accent-11')} />\n </motion.span>\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n </MotionPreference>\n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,IAAoB,EAAM,cAA0D,KAAA,CAAS,GAG7F,IAAqE;CACzE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAOM,IAAa,EAAM,YAGtB,EAAE,cAAW,OAAO,GAAW,GAAG,KAAS,MAAQ;CACpD,IAAM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS;CAExD,OACE,kBAAC,EAAkB,UAAnB;EAA4B,OAAO;YACjC,kBAAC,GAAD;GACE,WAAW,EAAG,kBAAkB,CAAS;GACzC,gBAAc,MAAU,WAAW,KAAA;GACnC,oBAAkB;GAClB,iBAAe,KAAgB,KAAA;GAC/B,GAAI;GACC;EACN,CAAA;CACyB,CAAA;AAEhC,CAAC;AACD,EAAW,cAAA,EAAuC;AAOlD,IAAM,IAAmB;CACvB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAwB;CAC5B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAiB,EAAM,YAG1B,EAAE,cAAW,UAAO,MAAM,GAAG,KAAS,MAAQ;CAC/C,IAAM,IAAQ,EAAM,WAAW,CAAiB;CAChD,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACO;EACL,WAAW,EACT,2CACA,EAAiB,IACjB,mEACA,sCACA,6GACA,gEACA,uDACA,wCACA,KAAS,EAAmB,IAC5B,CACF;EACA,GAAI;YAEJ,kBAAC,GAAD;GAA+B,SAAA;GAAQ,WAAU;aAC/C,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS,EAAE,OAAO,EAAE;IACpB,SAAS,EAAE,OAAO,EAAE;IACpB,YAAY,EAAQ;cAEpB,kBAAC,GAAD,EAAY,WAAW,EAAG,EAAsB,IAAO,8BAA8B,EAAI,CAAA;GAC9E,CAAA;EACgB,CAAA;CACP,CAAA,EACV,CAAA;AAEtB,CAAC;AACD,EAAe,cAAA,EAAuC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-input.d.ts","sourceRoot":"","sources":["../../src/ui/search-input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"search-input.d.ts","sourceRoot":"","sources":["../../src/ui/search-input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oBAAoB;IACpB,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB;AAED,QAAA,MAAM,WAAW,2FAgDhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
package/dist/ui/search-input.js
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { springs as e } from "./lib/motion.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
3
|
+
import { MotionPreference as t } from "../_chunks/motion-preference.js";
|
|
4
|
+
import { Spinner as n } from "./spinner.js";
|
|
5
|
+
import { Icon as r } from "./icon.js";
|
|
6
|
+
import { Input as i } from "./input.js";
|
|
7
|
+
import { Button as a } from "./button.js";
|
|
8
|
+
import * as o from "react";
|
|
9
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
10
|
+
import { IconSearch as c, IconX as l } from "@tabler/icons-react";
|
|
11
|
+
import { AnimatePresence as u, motion as d } from "framer-motion";
|
|
11
12
|
//#region src/ui/search-input.tsx
|
|
12
|
-
var
|
|
13
|
-
let
|
|
13
|
+
var f = o.forwardRef(({ className: o, value: f, onClear: p, loading: m, size: h = "md", placeholder: g, ..._ }, v) => {
|
|
14
|
+
let y = f !== void 0 && f !== "", b = m ? /* @__PURE__ */ s(n, { size: "sm" }) : /* @__PURE__ */ s(u, { children: y && p && /* @__PURE__ */ s(d.div, {
|
|
14
15
|
className: "flex items-center justify-center",
|
|
15
16
|
initial: {
|
|
16
17
|
opacity: 0,
|
|
@@ -25,29 +26,29 @@ var d = a.forwardRef(({ className: a, value: d, onClear: f, loading: p, size: m
|
|
|
25
26
|
scale: .8
|
|
26
27
|
},
|
|
27
28
|
transition: e.snappy,
|
|
28
|
-
children: /* @__PURE__ */
|
|
29
|
+
children: /* @__PURE__ */ s(a, {
|
|
29
30
|
type: "button",
|
|
30
31
|
variant: "ghost",
|
|
31
32
|
size: "icon-xs",
|
|
32
|
-
onClick:
|
|
33
|
+
onClick: p,
|
|
33
34
|
"aria-label": "Clear search",
|
|
34
35
|
title: "Clear",
|
|
35
|
-
children: /* @__PURE__ */
|
|
36
|
+
children: /* @__PURE__ */ s(r, { icon: l })
|
|
36
37
|
})
|
|
37
38
|
}) });
|
|
38
|
-
return /* @__PURE__ */
|
|
39
|
-
ref:
|
|
40
|
-
size:
|
|
41
|
-
startSection: /* @__PURE__ */
|
|
42
|
-
endSection:
|
|
43
|
-
endSectionClickable: !!
|
|
44
|
-
placeholder:
|
|
45
|
-
value:
|
|
46
|
-
"aria-busy":
|
|
47
|
-
className:
|
|
48
|
-
...
|
|
49
|
-
});
|
|
39
|
+
return /* @__PURE__ */ s(t, { children: /* @__PURE__ */ s(i, {
|
|
40
|
+
ref: v,
|
|
41
|
+
size: h,
|
|
42
|
+
startSection: /* @__PURE__ */ s(r, { icon: c }),
|
|
43
|
+
endSection: b,
|
|
44
|
+
endSectionClickable: !!y && !m,
|
|
45
|
+
placeholder: g,
|
|
46
|
+
value: f,
|
|
47
|
+
"aria-busy": m || void 0,
|
|
48
|
+
className: o,
|
|
49
|
+
..._
|
|
50
|
+
}) });
|
|
50
51
|
});
|
|
51
|
-
|
|
52
|
+
f.displayName = "SearchInput";
|
|
52
53
|
//#endregion
|
|
53
|
-
export {
|
|
54
|
+
export { f as SearchInput };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-input.js","names":[],"sources":["../../src/ui/search-input.tsx"],"sourcesContent":["'use client'\n\nimport { IconSearch, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { springs } from './lib/motion'\nimport { Spinner } from './spinner'\n\ntype SearchInputSize = 'xs' | 'sm' | 'md' | 'lg'\n\n/**\n * Props for SearchInput — a search field with a built-in leading magnifier icon, optional loading\n * spinner, and an auto-shown clear button when `value` is non-empty and `onClear` is provided.\n *\n * **Sizes:** `sm` | `md` (default) | `lg` — matches Input's `size` prop API.\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Clear button:** Appears automatically when `value !== ''` and `onClear` is provided.\n * When `loading` is true, a spinning loader replaces the clear button.\n *\n * @example\n * // Controlled search with clear:\n * <SearchInput\n * value={query}\n * onChange={(e) => setQuery(e.target.value)}\n * onClear={() => setQuery('')}\n * placeholder=\"Search tasks...\"\n * />\n *\n * @example\n * // Async search with loading state while fetching results:\n * <SearchInput\n * value={query}\n * onChange={handleSearch}\n * loading={isSearching}\n * placeholder=\"Search clients...\"\n * />\n *\n * @example\n * // Compact search bar in a toolbar:\n * <SearchInput size=\"sm\" value={q} onChange={(e) => setQ(e.target.value)} onClear={() => setQ('')} />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n onClear?: () => void\n loading?: boolean\n /** @default 'md' */\n size?: SearchInputSize\n}\n\nconst SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n ({ className, value, onClear, loading, size = 'md', placeholder, ...props }, ref) => {\n const hasValue = value !== undefined && value !== ''\n\n const endContent = loading ? (\n <Spinner size=\"sm\" />\n ) : (\n <AnimatePresence>\n {hasValue && onClear && (\n <motion.div\n className=\"flex items-center justify-center\"\n initial={{ opacity: 0, scale: 0.8 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.8 }}\n transition={springs.snappy}\n >\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n onClick={onClear}\n aria-label=\"Clear search\"\n title=\"Clear\"\n >\n <Icon icon={IconX} />\n </Button>\n </motion.div>\n )}\n </AnimatePresence>\n )\n\n return (\n <Input\n
|
|
1
|
+
{"version":3,"file":"search-input.js","names":[],"sources":["../../src/ui/search-input.tsx"],"sourcesContent":["'use client'\n\nimport { IconSearch, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { springs } from './lib/motion'\nimport { Spinner } from './spinner'\n\ntype SearchInputSize = 'xs' | 'sm' | 'md' | 'lg'\n\n/**\n * Props for SearchInput — a search field with a built-in leading magnifier icon, optional loading\n * spinner, and an auto-shown clear button when `value` is non-empty and `onClear` is provided.\n *\n * **Sizes:** `sm` | `md` (default) | `lg` — matches Input's `size` prop API.\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Clear button:** Appears automatically when `value !== ''` and `onClear` is provided.\n * When `loading` is true, a spinning loader replaces the clear button.\n *\n * @example\n * // Controlled search with clear:\n * <SearchInput\n * value={query}\n * onChange={(e) => setQuery(e.target.value)}\n * onClear={() => setQuery('')}\n * placeholder=\"Search tasks...\"\n * />\n *\n * @example\n * // Async search with loading state while fetching results:\n * <SearchInput\n * value={query}\n * onChange={handleSearch}\n * loading={isSearching}\n * placeholder=\"Search clients...\"\n * />\n *\n * @example\n * // Compact search bar in a toolbar:\n * <SearchInput size=\"sm\" value={q} onChange={(e) => setQ(e.target.value)} onClear={() => setQ('')} />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n onClear?: () => void\n loading?: boolean\n /** @default 'md' */\n size?: SearchInputSize\n}\n\nconst SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n ({ className, value, onClear, loading, size = 'md', placeholder, ...props }, ref) => {\n const hasValue = value !== undefined && value !== ''\n\n const endContent = loading ? (\n <Spinner size=\"sm\" />\n ) : (\n <AnimatePresence>\n {hasValue && onClear && (\n <motion.div\n className=\"flex items-center justify-center\"\n initial={{ opacity: 0, scale: 0.8 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.8 }}\n transition={springs.snappy}\n >\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n onClick={onClear}\n aria-label=\"Clear search\"\n title=\"Clear\"\n >\n <Icon icon={IconX} />\n </Button>\n </motion.div>\n )}\n </AnimatePresence>\n )\n\n return (\n <MotionPreference>\n <Input\n ref={ref}\n size={size}\n startSection={<Icon icon={IconSearch} />}\n endSection={endContent}\n endSectionClickable={!!hasValue && !loading}\n placeholder={placeholder}\n value={value}\n aria-busy={loading || undefined}\n className={className}\n {...props}\n />\n </MotionPreference>\n )\n },\n)\nSearchInput.displayName = 'SearchInput'\n\nexport { SearchInput }\n"],"mappings":";;;;;;;;;;;;AAuDA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,UAAO,YAAS,YAAS,UAAO,MAAM,gBAAa,GAAG,KAAS,MAAQ;CACnF,IAAM,IAAW,MAAU,KAAA,KAAa,MAAU,IAE5C,IAAa,IACjB,kBAAC,GAAD,EAAS,MAAK,KAAM,CAAA,IAEpB,kBAAC,GAAD,EAAA,UACG,KAAY,KACX,kBAAC,EAAO,KAAR;EACE,WAAU;EACV,SAAS;GAAE,SAAS;GAAG,OAAO;EAAI;EAClC,SAAS;GAAE,SAAS;GAAG,OAAO;EAAE;EAChC,MAAM;GAAE,SAAS;GAAG,OAAO;EAAI;EAC/B,YAAY,EAAQ;YAEpB,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,SAAS;GACT,cAAW;GACX,OAAM;aAEN,kBAAC,GAAD,EAAM,MAAM,EAAQ,CAAA;EACd,CAAA;CACE,CAAA,EAEC,CAAA;CAGnB,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACO;EACC;EACN,cAAc,kBAAC,GAAD,EAAM,MAAM,EAAa,CAAA;EACvC,YAAY;EACZ,qBAAqB,CAAC,CAAC,KAAY,CAAC;EACvB;EACN;EACP,aAAW,KAAW,KAAA;EACX;EACX,GAAI;CACL,CAAA,EACe,CAAA;AAEtB,CACF;AACA,EAAY,cAAc"}
|
package/dist/ui/select.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AAEnC,QAAA,MAAM,WAAW,yGAAwB,CAAA;AAEzC,QAAA,MAAM,WAAW,0GAAwB,CAAA;AAEzC,eAAO,MAAM,qBAAqB;;;;8EA2BjC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,EACnF,YAAY,CAAC,OAAO,qBAAqB,CAAC;CAAG;AAEjD,QAAA,MAAM,aAAa,8FA2BjB,CAAA;AAGF,QAAA,MAAM,oBAAoB,qKAcxB,CAAA;AAGF,QAAA,MAAM,sBAAsB,uKAc1B,CAAA;AAIF,QAAA,MAAM,aAAa,8JAsCjB,CAAA;AAGF,QAAA,MAAM,WAAW,4JASf,CAAA;AAGF,QAAA,MAAM,UAAU,2JAmBd,CAAA;AAGF,QAAA,MAAM,eAAe,gKASnB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAA"}
|
package/dist/ui/select.js
CHANGED
|
@@ -1,22 +1,23 @@
|
|
|
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
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
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 { useFormField as a } from "./form.js";
|
|
7
|
+
import { resolveFieldState as o } from "../_chunks/field-state.js";
|
|
8
|
+
import { Content2 as s, Group as c, Icon as l, Item as u, ItemIndicator as d, ItemText as f, Label as p, Portal as m, Root2 as h, ScrollDownButton as g, ScrollUpButton as _, Separator as v, Trigger as y, Value as b, Viewport as x } from "../_chunks/primitives/react-select.js";
|
|
9
|
+
import * as S from "react";
|
|
10
|
+
import { jsx as C, jsxs as w } from "react/jsx-runtime";
|
|
11
|
+
import { IconCheck as T, IconChevronDown as E, IconChevronUp as D } from "@tabler/icons-react";
|
|
12
|
+
import { motion as O } from "framer-motion";
|
|
13
|
+
import { cva as k } from "class-variance-authority";
|
|
13
14
|
//#region src/ui/select.tsx
|
|
14
|
-
var
|
|
15
|
+
var A = h, j = c, M = b, N = k("flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1 [&>span]:min-w-0", {
|
|
15
16
|
variants: {
|
|
16
17
|
variant: {
|
|
17
|
-
default: "border border-surface-border-
|
|
18
|
-
outline: "border border-surface-border-
|
|
19
|
-
ghost: "border border-transparent bg-transparent hover:bg-surface-
|
|
18
|
+
default: "border border-surface-border-interactive bg-surface-panel-hover focus-visible:border-accent-7",
|
|
19
|
+
outline: "border border-surface-border-interactive bg-transparent focus-visible:border-accent-7",
|
|
20
|
+
ghost: "border border-transparent bg-transparent hover:bg-surface-panel-hover focus-visible:border-accent-7"
|
|
20
21
|
},
|
|
21
22
|
state: {
|
|
22
23
|
default: "",
|
|
@@ -36,57 +37,57 @@ var k = m, A = s, j = y, M = O("flex w-full items-center justify-between whitesp
|
|
|
36
37
|
state: "default",
|
|
37
38
|
size: "md"
|
|
38
39
|
}
|
|
39
|
-
}),
|
|
40
|
-
let f =
|
|
41
|
-
return /* @__PURE__ */
|
|
40
|
+
}), P = S.forwardRef(({ className: e, children: t, variant: n, state: s, size: c, ...u }, d) => {
|
|
41
|
+
let f = a(), p = o(s ?? void 0, f.state), m = u["aria-describedby"] ?? f.helperTextId, h = u["aria-required"] ?? f.required;
|
|
42
|
+
return /* @__PURE__ */ w(y, {
|
|
42
43
|
ref: d,
|
|
43
|
-
className:
|
|
44
|
-
variant:
|
|
44
|
+
className: r(N({
|
|
45
|
+
variant: n,
|
|
45
46
|
state: p ?? "default",
|
|
46
|
-
size:
|
|
47
|
+
size: c
|
|
47
48
|
}), e),
|
|
48
49
|
"aria-invalid": p === "error" || void 0,
|
|
49
50
|
"aria-describedby": m,
|
|
50
51
|
"aria-required": h || void 0,
|
|
51
52
|
...u,
|
|
52
53
|
id: u.id ?? f.inputId,
|
|
53
|
-
children: [t, /* @__PURE__ */
|
|
54
|
+
children: [t, /* @__PURE__ */ C(l, {
|
|
54
55
|
asChild: !0,
|
|
55
|
-
children: /* @__PURE__ */
|
|
56
|
-
icon:
|
|
56
|
+
children: /* @__PURE__ */ C(i, {
|
|
57
|
+
icon: E,
|
|
57
58
|
size: "sm",
|
|
58
59
|
className: "opacity-50"
|
|
59
60
|
})
|
|
60
61
|
})]
|
|
61
62
|
});
|
|
62
63
|
});
|
|
63
|
-
|
|
64
|
-
var
|
|
65
|
-
ref:
|
|
66
|
-
className:
|
|
64
|
+
P.displayName = y.displayName;
|
|
65
|
+
var F = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(_, {
|
|
66
|
+
ref: n,
|
|
67
|
+
className: r("flex cursor-default items-center justify-center py-ds-02", e),
|
|
67
68
|
...t,
|
|
68
|
-
children: /* @__PURE__ */
|
|
69
|
-
icon:
|
|
69
|
+
children: /* @__PURE__ */ C(i, {
|
|
70
|
+
icon: D,
|
|
70
71
|
size: "sm"
|
|
71
72
|
})
|
|
72
73
|
}));
|
|
73
|
-
|
|
74
|
-
var
|
|
75
|
-
ref:
|
|
76
|
-
className:
|
|
74
|
+
F.displayName = _.displayName;
|
|
75
|
+
var I = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(g, {
|
|
76
|
+
ref: n,
|
|
77
|
+
className: r("flex cursor-default items-center justify-center py-ds-02", e),
|
|
77
78
|
...t,
|
|
78
|
-
children: /* @__PURE__ */
|
|
79
|
-
icon:
|
|
79
|
+
children: /* @__PURE__ */ C(i, {
|
|
80
|
+
icon: E,
|
|
80
81
|
size: "sm"
|
|
81
82
|
})
|
|
82
83
|
}));
|
|
83
|
-
|
|
84
|
-
var
|
|
85
|
-
ref:
|
|
86
|
-
position:
|
|
84
|
+
I.displayName = g.displayName;
|
|
85
|
+
var L = S.forwardRef(({ className: i, children: a, position: o = "popper", ...c }, l) => /* @__PURE__ */ C(n, { children: /* @__PURE__ */ C(m, { children: /* @__PURE__ */ C(s, {
|
|
86
|
+
ref: l,
|
|
87
|
+
position: o,
|
|
87
88
|
asChild: !0,
|
|
88
|
-
...
|
|
89
|
-
children: /* @__PURE__ */
|
|
89
|
+
...c,
|
|
90
|
+
children: /* @__PURE__ */ w(O.div, {
|
|
90
91
|
initial: {
|
|
91
92
|
opacity: 0,
|
|
92
93
|
scale: .95
|
|
@@ -99,45 +100,45 @@ var I = x.forwardRef(({ className: r, children: i, position: a = "popper", ...s
|
|
|
99
100
|
...e.snappy,
|
|
100
101
|
opacity: t.fade
|
|
101
102
|
},
|
|
102
|
-
className:
|
|
103
|
+
className: r("relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay text-surface-fg shadow-floating", o === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", i),
|
|
103
104
|
children: [
|
|
104
|
-
/* @__PURE__ */
|
|
105
|
-
/* @__PURE__ */
|
|
106
|
-
className:
|
|
107
|
-
children:
|
|
105
|
+
/* @__PURE__ */ C(F, {}),
|
|
106
|
+
/* @__PURE__ */ C(x, {
|
|
107
|
+
className: r("p-ds-02", o === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
|
|
108
|
+
children: a
|
|
108
109
|
}),
|
|
109
|
-
/* @__PURE__ */
|
|
110
|
+
/* @__PURE__ */ C(I, {})
|
|
110
111
|
]
|
|
111
112
|
})
|
|
112
|
-
}) }));
|
|
113
|
-
|
|
114
|
-
var
|
|
115
|
-
ref:
|
|
116
|
-
className:
|
|
113
|
+
}) }) }));
|
|
114
|
+
L.displayName = s.displayName;
|
|
115
|
+
var R = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(p, {
|
|
116
|
+
ref: n,
|
|
117
|
+
className: r("px-ds-03 py-ds-02b text-body-md font-semibold", e),
|
|
117
118
|
...t
|
|
118
119
|
}));
|
|
119
|
-
|
|
120
|
-
var
|
|
120
|
+
R.displayName = p.displayName;
|
|
121
|
+
var z = S.forwardRef(({ className: e, children: t, ...n }, a) => /* @__PURE__ */ w(u, {
|
|
121
122
|
ref: a,
|
|
122
|
-
className:
|
|
123
|
-
...
|
|
124
|
-
children: [/* @__PURE__ */
|
|
123
|
+
className: r("relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 text-body-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-panel-hover focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
|
|
124
|
+
...n,
|
|
125
|
+
children: [/* @__PURE__ */ C("span", {
|
|
125
126
|
className: "absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
|
|
126
|
-
children: /* @__PURE__ */
|
|
127
|
-
icon:
|
|
127
|
+
children: /* @__PURE__ */ C(d, { children: /* @__PURE__ */ C(i, {
|
|
128
|
+
icon: T,
|
|
128
129
|
size: "sm"
|
|
129
130
|
}) })
|
|
130
|
-
}), /* @__PURE__ */
|
|
131
|
+
}), /* @__PURE__ */ C(f, {
|
|
131
132
|
className: "min-w-0 line-clamp-1",
|
|
132
133
|
children: t
|
|
133
134
|
})]
|
|
134
135
|
}));
|
|
135
|
-
|
|
136
|
-
var
|
|
137
|
-
ref:
|
|
138
|
-
className:
|
|
136
|
+
z.displayName = u.displayName;
|
|
137
|
+
var B = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(v, {
|
|
138
|
+
ref: n,
|
|
139
|
+
className: r("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
|
|
139
140
|
...t
|
|
140
141
|
}));
|
|
141
|
-
|
|
142
|
+
B.displayName = v.displayName;
|
|
142
143
|
//#endregion
|
|
143
|
-
export {
|
|
144
|
+
export { A as Select, L as SelectContent, j as SelectGroup, z as SelectItem, R as SelectLabel, I as SelectScrollDownButton, F as SelectScrollUpButton, B as SelectSeparator, P as SelectTrigger, M as SelectValue, N as selectTriggerVariants };
|
package/dist/ui/select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","names":[],"sources":["../../src/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@primitives/react-select'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Select root — manages open/close state and selected value.\n *\n * **Important:** `size` is NOT a prop on `Select`. Set it on `SelectTrigger` instead.\n * Passing `size` directly to `Select` produces no TypeScript error but has no effect.\n *\n * @example\n * // CORRECT — size goes on SelectTrigger:\n * <Select onValueChange={setValue}>\n * <SelectTrigger size=\"lg\">\n * <SelectValue placeholder=\"Choose...\" />\n * </SelectTrigger>\n * <SelectContent>\n * <SelectItem value=\"a\">Option A</SelectItem>\n * <SelectItem value=\"b\">Option B</SelectItem>\n * </SelectContent>\n * </Select>\n *\n * // WRONG — size on Select root is silently ignored (no TypeScript error):\n * // <Select size=\"lg\">...</Select>\n */\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nexport const selectTriggerVariants = cva(\n 'flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1 [&>span]:min-w-0',\n {\n variants: {\n variant: {\n default:\n 'border border-surface-border-strong bg-surface-raised-hover focus-visible:border-accent-7',\n outline:\n 'border border-surface-border-strong bg-transparent focus-visible:border-accent-7',\n ghost:\n 'border border-transparent bg-transparent hover:bg-surface-raised-hover focus-visible:border-accent-7',\n },\n state: {\n default: '',\n error: 'border-error-7 text-error-11 focus-visible:ring-error-9',\n success: 'border-success-7',\n warning: 'border-warning-7',\n },\n size: {\n xs: 'h-ds-xs-plus text-body-sm px-ds-02',\n sm: 'h-ds-sm text-body-sm px-ds-03',\n md: 'h-ds-md text-body-md px-ds-04',\n lg: 'h-ds-lg text-body-md px-ds-05',\n },\n },\n defaultVariants: { variant: 'default', state: 'default', size: 'md' },\n },\n)\n\n/**\n * Props for SelectTrigger. Use `size` here (not on the `Select` root).\n *\n * @example\n * <SelectTrigger size=\"lg\" className=\"w-[200px]\">\n * <SelectValue placeholder=\"Select an option\" />\n * </SelectTrigger>\n */\nexport interface SelectTriggerProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'color'>,\n VariantProps<typeof selectTriggerVariants> {}\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n SelectTriggerProps\n>(({ className, children, variant, state: stateProp, size, ...props }, ref) => {\n const fieldCtx = useFormField()\n // Explicit `state` prop wins over FormField context (shared precedence).\n const state = resolveFieldState((stateProp ?? undefined) as FieldState | undefined, fieldCtx.state)\n const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n return (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(selectTriggerVariants({ variant, state: state ?? 'default', size }), className)}\n aria-invalid={state === 'error' || undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={ariaRequired || undefined}\n {...props}\n // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n id={props.id ?? fieldCtx.inputId}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <Icon icon={IconChevronDown} size=\"sm\" className=\"opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-ds-02',\n className,\n )}\n {...props}\n >\n <Icon icon={IconChevronUp} size=\"sm\" />\n </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-ds-02',\n className,\n )}\n {...props}\n >\n <Icon icon={IconChevronDown} size=\"sm\" />\n </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n position={position}\n asChild\n {...props}\n >\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={{ ...springs.snappy, opacity: tweens.fade }}\n className={cn(\n 'relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay text-surface-fg shadow-floating',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n className,\n )}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-ds-02',\n position === 'popper' &&\n 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </motion.div>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-ds-03 py-ds-02b text-body-md font-semibold', className)}\n {...props}\n />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 text-body-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n className,\n )}\n {...props}\n >\n <span className=\"absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <Icon icon={IconCheck} size=\"sm\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText className=\"min-w-0 line-clamp-1\">{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n {...props}\n />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select.js","names":[],"sources":["../../src/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@primitives/react-select'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Select root — manages open/close state and selected value.\n *\n * **Important:** `size` is NOT a prop on `Select`. Set it on `SelectTrigger` instead.\n * Passing `size` directly to `Select` produces no TypeScript error but has no effect.\n *\n * @example\n * // CORRECT — size goes on SelectTrigger:\n * <Select onValueChange={setValue}>\n * <SelectTrigger size=\"lg\">\n * <SelectValue placeholder=\"Choose...\" />\n * </SelectTrigger>\n * <SelectContent>\n * <SelectItem value=\"a\">Option A</SelectItem>\n * <SelectItem value=\"b\">Option B</SelectItem>\n * </SelectContent>\n * </Select>\n *\n * // WRONG — size on Select root is silently ignored (no TypeScript error):\n * // <Select size=\"lg\">...</Select>\n */\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nexport const selectTriggerVariants = cva(\n 'flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1 [&>span]:min-w-0',\n {\n variants: {\n variant: {\n default:\n 'border border-surface-border-interactive bg-surface-panel-hover focus-visible:border-accent-7',\n outline:\n 'border border-surface-border-interactive bg-transparent focus-visible:border-accent-7',\n ghost:\n 'border border-transparent bg-transparent hover:bg-surface-panel-hover focus-visible:border-accent-7',\n },\n state: {\n default: '',\n error: 'border-error-7 text-error-11 focus-visible:ring-error-9',\n success: 'border-success-7',\n warning: 'border-warning-7',\n },\n size: {\n xs: 'h-ds-xs-plus text-body-sm px-ds-02',\n sm: 'h-ds-sm text-body-sm px-ds-03',\n md: 'h-ds-md text-body-md px-ds-04',\n lg: 'h-ds-lg text-body-md px-ds-05',\n },\n },\n defaultVariants: { variant: 'default', state: 'default', size: 'md' },\n },\n)\n\n/**\n * Props for SelectTrigger. Use `size` here (not on the `Select` root).\n *\n * @example\n * <SelectTrigger size=\"lg\" className=\"w-[200px]\">\n * <SelectValue placeholder=\"Select an option\" />\n * </SelectTrigger>\n */\nexport interface SelectTriggerProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'color'>,\n VariantProps<typeof selectTriggerVariants> {}\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n SelectTriggerProps\n>(({ className, children, variant, state: stateProp, size, ...props }, ref) => {\n const fieldCtx = useFormField()\n // Explicit `state` prop wins over FormField context (shared precedence).\n const state = resolveFieldState((stateProp ?? undefined) as FieldState | undefined, fieldCtx.state)\n const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n return (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(selectTriggerVariants({ variant, state: state ?? 'default', size }), className)}\n aria-invalid={state === 'error' || undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={ariaRequired || undefined}\n {...props}\n // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n id={props.id ?? fieldCtx.inputId}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <Icon icon={IconChevronDown} size=\"sm\" className=\"opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-ds-02',\n className,\n )}\n {...props}\n >\n <Icon icon={IconChevronUp} size=\"sm\" />\n </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-ds-02',\n className,\n )}\n {...props}\n >\n <Icon icon={IconChevronDown} size=\"sm\" />\n </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <MotionPreference>\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n position={position}\n asChild\n {...props}\n >\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={{ ...springs.snappy, opacity: tweens.fade }}\n className={cn(\n 'relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay text-surface-fg shadow-floating',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n className,\n )}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-ds-02',\n position === 'popper' &&\n 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </motion.div>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n </MotionPreference>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-ds-03 py-ds-02b text-body-md font-semibold', className)}\n {...props}\n />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 text-body-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-panel-hover focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n className,\n )}\n {...props}\n >\n <span className=\"absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <Icon icon={IconCheck} size=\"sm\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText className=\"min-w-0 line-clamp-1\">{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n {...props}\n />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n"],"mappings":"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"}
|
package/dist/ui/sheet.js
CHANGED
|
@@ -97,7 +97,7 @@ var k = {
|
|
|
97
97
|
}),
|
|
98
98
|
/* @__PURE__ */ _(a, {
|
|
99
99
|
title: "Close",
|
|
100
|
-
className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-
|
|
100
|
+
className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-panel-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
|
|
101
101
|
children: [/* @__PURE__ */ g(i, {
|
|
102
102
|
icon: v,
|
|
103
103
|
size: "sm"
|
package/dist/ui/sheet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","names":[],"sources":["../../src/ui/sheet.tsx"],"sourcesContent":["'use client'\n\nimport * as SheetPrimitive from '@primitives/react-dialog'\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from './icon'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { useControllableOpen } from './lib/use-controllable-open'\nimport { cn } from './lib/utils'\n\n// ── Internal open-state context ──────────────────────────────────────\n\nconst SheetOpenContext = React.createContext<{ open: boolean; onClose: () => void }>({ open: false, onClose: () => {} })\n\n/**\n * Sheet compound component — accessible sliding panel anchored to a screen edge, with focus trap\n * and Escape dismissal. Built on the Dialog primitive.\n *\n * **Parts (in composition order):**\n * - `Sheet` — manages open/closed state (this root)\n * - `SheetTrigger` — element that opens the sheet (use `asChild` to render your own button)\n * - `SheetContent` — the sliding panel (use `side=\"right\"|\"left\"|\"top\"|\"bottom\"`, default `\"right\"`)\n * - `SheetHeader` — optional layout wrapper for title + description\n * - `SheetTitle` — required for accessibility (sets the sheet's ARIA label)\n * - `SheetDescription` — optional subtitle text\n * - `SheetFooter` — optional layout wrapper for action buttons\n * - `SheetClose` — manual close trigger (a close button is already built into SheetContent)\n * - `SheetPortal` — low-level portal wrapper (exported for custom layout; used internally by SheetContent)\n * - `SheetOverlay` — the backdrop element (exported for custom overlay styling)\n *\n * @compound\n *\n * Note: The `side` prop goes on `SheetContent`, NOT on `Sheet`.\n * A close button is auto-rendered in the top corner of `SheetContent`.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n * <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n * <SheetContent>\n * <SheetHeader>\n * <SheetTitle>Account settings</SheetTitle>\n * <SheetDescription>Manage your profile and preferences.</SheetDescription>\n * </SheetHeader>\n * </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n * <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n * <SheetContent side=\"bottom\">\n * <SheetTitle>Actions</SheetTitle>\n * <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n * <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n * <Button variant=\"outline\" fullWidth>Duplicate</Button>\n * </div>\n * </SheetContent>\n * </Sheet>\n */\nconst Sheet: React.FC<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>> = ({\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n children,\n ...props\n}) => {\n const { open, setOpen, close } = useControllableOpen({ open: controlledOpen, defaultOpen, onOpenChange })\n\n const contextValue = React.useMemo(\n () => ({ open, onClose: close }),\n [open, close],\n )\n\n return (\n <SheetOpenContext.Provider value={contextValue}>\n <SheetPrimitive.Root open={open} onOpenChange={setOpen} {...props}>\n {children}\n </SheetPrimitive.Root>\n </SheetOpenContext.Provider>\n )\n}\nSheet.displayName = 'Sheet'\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Overlay forceMount asChild>\n <motion.div\n ref={ref}\n className={cn('fixed inset-0 z-modal bg-overlay', className)}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={tweens.fade}\n {...motionProps(props)}\n />\n </SheetPrimitive.Overlay>\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── Slide direction map ──────────────────────────────────────────────\n\nconst slideInitial = {\n top: { y: '-100%' },\n bottom: { y: '100%' },\n left: { x: '-100%' },\n right: { x: '100%' },\n} as const\n\nconst slideAnimate = {\n top: { y: 0 },\n bottom: { y: 0 },\n left: { x: 0 },\n right: { x: 0 },\n} as const\n\nconst sheetVariants = cva(\n 'fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b border-surface-border-strong',\n bottom: 'inset-x-0 bottom-0 border-t border-surface-border-strong',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-surface-border-strong sm:max-w-sm',\n right: 'inset-y-0 right-0 h-full w-3/4 border-l border-surface-border-strong sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n\n/**\n * Props for SheetContent — the sliding panel content that appears from one of four screen edges.\n * Built on the Dialog primitive: accessible, focus-trapped, and dismissible with Escape.\n *\n * **`side` variants:** `right` (default, slide from right) | `left` | `top` | `bottom`\n *\n * **Usage pattern:** Wrap the whole sheet in `<Sheet>`, add a `<SheetTrigger>`, and put content\n * inside `<SheetContent>`. Use `<SheetHeader>`, `<SheetTitle>`, and `<SheetDescription>` for\n * accessible structure. A close button is auto-rendered in the top corner.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n * <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n * <SheetContent>\n * <SheetHeader>\n * <SheetTitle>Account settings</SheetTitle>\n * <SheetDescription>Manage your profile and preferences.</SheetDescription>\n * </SheetHeader>\n * </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n * <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n * <SheetContent side=\"bottom\">\n * <SheetTitle>Actions</SheetTitle>\n * <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n * <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n * <Button variant=\"outline\" fullWidth>Duplicate</Button>\n * </div>\n * </SheetContent>\n * </Sheet>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SheetContentProps\n extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n VariantProps<typeof sheetVariants> {\n /** When true (default), Sheet slides from bottom on mobile with swipe-to-dismiss. */\n responsive?: boolean\n}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Content>,\n SheetContentProps\n>(({ side = 'right', responsive, className, children, ...props }, ref) => {\n const isMobileRaw = useIsMobile()\n const isMobile = responsive !== false && isMobileRaw\n const isReduced = useReducedMotion()\n const { open, onClose } = React.useContext(SheetOpenContext)\n const effectiveSide = isMobile ? 'bottom' : (side ?? 'right')\n\n const internalRef = React.useRef<HTMLDivElement>(null)\n const composedRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n internalRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n },\n [ref],\n )\n\n return (\n <AnimatePresence>\n {open && (\n <SheetPortal forceMount>\n <SheetOverlay />\n <SheetPrimitive.Content forceMount asChild>\n <motion.div\n ref={composedRef}\n className={cn(sheetVariants({ side: effectiveSide }), className)}\n initial={slideInitial[effectiveSide]}\n animate={slideAnimate[effectiveSide]}\n exit={slideInitial[effectiveSide]}\n transition={springs.smooth}\n drag={isMobile && !isReduced ? 'y' : false}\n dragConstraints={{ top: 0 }}\n dragElastic={0.2}\n onDragEnd={\n isMobile\n ? (\n _: unknown,\n info: { offset: { y: number }; velocity: { y: number } },\n ) => {\n const h =\n internalRef.current?.getBoundingClientRect().height ?? 300\n if (info.offset.y > h * 0.3 || info.velocity.y > 500)\n onClose()\n }\n : undefined\n }\n {...motionProps(props)}\n >\n {isMobile && (\n <div className=\"flex justify-center pt-ds-03 pb-ds-02\">\n <div className=\"h-1 w-8 rounded-pill bg-surface-border\" />\n </div>\n )}\n <SheetPrimitive.Close title=\"Close\" className=\"absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none\">\n <Icon icon={IconX} size=\"sm\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n {children}\n </motion.div>\n </SheetPrimitive.Content>\n </SheetPortal>\n )}\n </AnimatePresence>\n )\n})\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = 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-03 text-center sm:text-left',\n className,\n )}\n {...props}\n />\n ),\n)\nSheetHeader.displayName = 'SheetHeader'\n\nconst SheetFooter = 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)\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Title\n ref={ref}\n className={cn('text-heading-xs font-semibold text-surface-fg', className)}\n {...props}\n />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Description\n ref={ref}\n className={cn('text-body-md text-surface-fg-muted', className)}\n {...props}\n />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,IAAmB,EAAM,cAAsD;CAAE,MAAM;CAAO,eAAe,CAAC;AAAE,CAAC,GAgDjH,KAA+E,EACnF,MAAM,GACN,iBAAc,IACd,iBACA,aACA,GAAG,QACC;CACJ,IAAM,EAAE,SAAM,YAAS,aAAU,EAAoB;EAAE,MAAM;EAAgB;EAAa;CAAa,CAAC,GAElG,IAAe,EAAM,eAClB;EAAE;EAAM,SAAS;CAAM,IAC9B,CAAC,GAAM,CAAK,CACd;CAEA,OACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,GAAD;GAA2B;GAAM,cAAc;GAAS,GAAI;GACzD;EACkB,CAAA;CACI,CAAA;AAE/B;AACA,EAAM,cAAc;AAEpB,IAAM,IAAe,GAEf,IAAa,GAEb,IAAc,GAEd,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CAAwB,YAAA;CAAW,SAAA;WACjC,kBAAC,EAAO,KAAR;EACO;EACL,WAAW,EAAG,oCAAoC,CAAS;EAC3D,SAAS,EAAE,SAAS,EAAE;EACtB,SAAS,EAAE,SAAS,EAAE;EACtB,MAAM,EAAE,SAAS,EAAE;EACnB,YAAY,EAAO;EACnB,GAAI,EAAY,CAAK;CACtB,CAAA;AACqB,CAAA,CACzB;AACD,EAAa,cAAA,EAAqC;AAIlD,IAAM,IAAe;CACnB,KAAK,EAAE,GAAG,QAAQ;CAClB,QAAQ,EAAE,GAAG,OAAO;CACpB,MAAM,EAAE,GAAG,QAAQ;CACnB,OAAO,EAAE,GAAG,OAAO;AACrB,GAEM,IAAe;CACnB,KAAK,EAAE,GAAG,EAAE;CACZ,QAAQ,EAAE,GAAG,EAAE;CACf,MAAM,EAAE,GAAG,EAAE;CACb,OAAO,EAAE,GAAG,EAAE;AAChB,GAEM,IAAgB,EACpB,qEACA;CACE,UAAU,EACR,MAAM;EACJ,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF,GA6CM,IAAe,EAAM,YAGxB,EAAE,UAAO,SAAS,eAAY,cAAW,aAAU,GAAG,KAAS,MAAQ;CACxE,IAAM,IAAc,EAAY,GAC1B,IAAW,MAAe,MAAS,GACnC,IAAY,EAAiB,GAC7B,EAAE,SAAM,eAAY,EAAM,WAAW,CAAgB,GACrD,IAAgB,IAAW,WAAY,KAAQ,SAE/C,IAAc,EAAM,OAAuB,IAAI,GAC/C,IAAc,EAAM,aACvB,MAAgC;EAE/B,AADA,EAAY,UAAU,GAClB,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,MAAK,EAAuD,UAAU;CACjF,GACA,CAAC,CAAG,CACN;CAEA,OACE,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;EAAa,YAAA;YAAb,CACE,kBAAC,GAAD,CAAe,CAAA,GACf,kBAAC,GAAD;GAAwB,YAAA;GAAW,SAAA;aACjC,kBAAC,EAAO,KAAR;IACE,KAAK;IACL,WAAW,EAAG,EAAc,EAAE,MAAM,EAAc,CAAC,GAAG,CAAS;IAC/D,SAAS,EAAa;IACtB,SAAS,EAAa;IACtB,MAAM,EAAa;IACnB,YAAY,EAAQ;IACpB,MAAM,KAAY,CAAC,IAAY,MAAM;IACrC,iBAAiB,EAAE,KAAK,EAAE;IAC1B,aAAa;IACb,WACE,KAEM,GACA,MACG;KACH,IAAM,IACJ,EAAY,SAAS,sBAAsB,CAAC,CAAC,UAAU;KACzD,CAAI,EAAK,OAAO,IAAI,IAAI,MAAO,EAAK,SAAS,IAAI,QAC/C,EAAQ;IACZ,IACA,KAAA;IAEN,GAAI,EAAY,CAAK;cAvBvB;KAyBG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD,EAAK,WAAU,yCAA0C,CAAA;KACtD,CAAA;KAEP,kBAAC,GAAD;MAAsB,OAAM;MAAQ,WAAU;gBAA9C,CACE,kBAAC,GAAD;OAAM,MAAM;OAAO,MAAK;MAAM,CAAA,GAC9B,kBAAC,QAAD;OAAM,WAAU;iBAAU;MAAW,CAAA,CACjB;;KACrB;IACS;;EACU,CAAA,CACb;IAEA,CAAA;AAErB,CAAC;AACD,EAAa,cAAA,EAAqC;AAElD,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wDACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAY,cAAc;AAE1B,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,WAAW,EACT,qEACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAY,cAAc;AAE1B,IAAM,IAAa,EAAM,YAGtB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EAAG,iDAAiD,CAAS;CACxE,GAAI;AACL,CAAA,CACF;AACD,EAAW,cAAA,EAAmC;AAE9C,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EAAG,sCAAsC,CAAS;CAC7D,GAAI;AACL,CAAA,CACF;AACD,EAAiB,cAAA,EAAyC"}
|
|
1
|
+
{"version":3,"file":"sheet.js","names":[],"sources":["../../src/ui/sheet.tsx"],"sourcesContent":["'use client'\n\nimport * as SheetPrimitive from '@primitives/react-dialog'\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from './icon'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { useControllableOpen } from './lib/use-controllable-open'\nimport { cn } from './lib/utils'\n\n// ── Internal open-state context ──────────────────────────────────────\n\nconst SheetOpenContext = React.createContext<{ open: boolean; onClose: () => void }>({ open: false, onClose: () => {} })\n\n/**\n * Sheet compound component — accessible sliding panel anchored to a screen edge, with focus trap\n * and Escape dismissal. Built on the Dialog primitive.\n *\n * **Parts (in composition order):**\n * - `Sheet` — manages open/closed state (this root)\n * - `SheetTrigger` — element that opens the sheet (use `asChild` to render your own button)\n * - `SheetContent` — the sliding panel (use `side=\"right\"|\"left\"|\"top\"|\"bottom\"`, default `\"right\"`)\n * - `SheetHeader` — optional layout wrapper for title + description\n * - `SheetTitle` — required for accessibility (sets the sheet's ARIA label)\n * - `SheetDescription` — optional subtitle text\n * - `SheetFooter` — optional layout wrapper for action buttons\n * - `SheetClose` — manual close trigger (a close button is already built into SheetContent)\n * - `SheetPortal` — low-level portal wrapper (exported for custom layout; used internally by SheetContent)\n * - `SheetOverlay` — the backdrop element (exported for custom overlay styling)\n *\n * @compound\n *\n * Note: The `side` prop goes on `SheetContent`, NOT on `Sheet`.\n * A close button is auto-rendered in the top corner of `SheetContent`.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n * <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n * <SheetContent>\n * <SheetHeader>\n * <SheetTitle>Account settings</SheetTitle>\n * <SheetDescription>Manage your profile and preferences.</SheetDescription>\n * </SheetHeader>\n * </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n * <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n * <SheetContent side=\"bottom\">\n * <SheetTitle>Actions</SheetTitle>\n * <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n * <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n * <Button variant=\"outline\" fullWidth>Duplicate</Button>\n * </div>\n * </SheetContent>\n * </Sheet>\n */\nconst Sheet: React.FC<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>> = ({\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n children,\n ...props\n}) => {\n const { open, setOpen, close } = useControllableOpen({ open: controlledOpen, defaultOpen, onOpenChange })\n\n const contextValue = React.useMemo(\n () => ({ open, onClose: close }),\n [open, close],\n )\n\n return (\n <SheetOpenContext.Provider value={contextValue}>\n <SheetPrimitive.Root open={open} onOpenChange={setOpen} {...props}>\n {children}\n </SheetPrimitive.Root>\n </SheetOpenContext.Provider>\n )\n}\nSheet.displayName = 'Sheet'\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Overlay forceMount asChild>\n <motion.div\n ref={ref}\n className={cn('fixed inset-0 z-modal bg-overlay', className)}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={tweens.fade}\n {...motionProps(props)}\n />\n </SheetPrimitive.Overlay>\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── Slide direction map ──────────────────────────────────────────────\n\nconst slideInitial = {\n top: { y: '-100%' },\n bottom: { y: '100%' },\n left: { x: '-100%' },\n right: { x: '100%' },\n} as const\n\nconst slideAnimate = {\n top: { y: 0 },\n bottom: { y: 0 },\n left: { x: 0 },\n right: { x: 0 },\n} as const\n\nconst sheetVariants = cva(\n 'fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b border-surface-border-strong',\n bottom: 'inset-x-0 bottom-0 border-t border-surface-border-strong',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-surface-border-strong sm:max-w-sm',\n right: 'inset-y-0 right-0 h-full w-3/4 border-l border-surface-border-strong sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n\n/**\n * Props for SheetContent — the sliding panel content that appears from one of four screen edges.\n * Built on the Dialog primitive: accessible, focus-trapped, and dismissible with Escape.\n *\n * **`side` variants:** `right` (default, slide from right) | `left` | `top` | `bottom`\n *\n * **Usage pattern:** Wrap the whole sheet in `<Sheet>`, add a `<SheetTrigger>`, and put content\n * inside `<SheetContent>`. Use `<SheetHeader>`, `<SheetTitle>`, and `<SheetDescription>` for\n * accessible structure. A close button is auto-rendered in the top corner.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n * <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n * <SheetContent>\n * <SheetHeader>\n * <SheetTitle>Account settings</SheetTitle>\n * <SheetDescription>Manage your profile and preferences.</SheetDescription>\n * </SheetHeader>\n * </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n * <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n * <SheetContent side=\"bottom\">\n * <SheetTitle>Actions</SheetTitle>\n * <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n * <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n * <Button variant=\"outline\" fullWidth>Duplicate</Button>\n * </div>\n * </SheetContent>\n * </Sheet>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SheetContentProps\n extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n VariantProps<typeof sheetVariants> {\n /** When true (default), Sheet slides from bottom on mobile with swipe-to-dismiss. */\n responsive?: boolean\n}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Content>,\n SheetContentProps\n>(({ side = 'right', responsive, className, children, ...props }, ref) => {\n const isMobileRaw = useIsMobile()\n const isMobile = responsive !== false && isMobileRaw\n const isReduced = useReducedMotion()\n const { open, onClose } = React.useContext(SheetOpenContext)\n const effectiveSide = isMobile ? 'bottom' : (side ?? 'right')\n\n const internalRef = React.useRef<HTMLDivElement>(null)\n const composedRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n internalRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n },\n [ref],\n )\n\n return (\n <AnimatePresence>\n {open && (\n <SheetPortal forceMount>\n <SheetOverlay />\n <SheetPrimitive.Content forceMount asChild>\n <motion.div\n ref={composedRef}\n className={cn(sheetVariants({ side: effectiveSide }), className)}\n initial={slideInitial[effectiveSide]}\n animate={slideAnimate[effectiveSide]}\n exit={slideInitial[effectiveSide]}\n transition={springs.smooth}\n drag={isMobile && !isReduced ? 'y' : false}\n dragConstraints={{ top: 0 }}\n dragElastic={0.2}\n onDragEnd={\n isMobile\n ? (\n _: unknown,\n info: { offset: { y: number }; velocity: { y: number } },\n ) => {\n const h =\n internalRef.current?.getBoundingClientRect().height ?? 300\n if (info.offset.y > h * 0.3 || info.velocity.y > 500)\n onClose()\n }\n : undefined\n }\n {...motionProps(props)}\n >\n {isMobile && (\n <div className=\"flex justify-center pt-ds-03 pb-ds-02\">\n <div className=\"h-1 w-8 rounded-pill bg-surface-border\" />\n </div>\n )}\n <SheetPrimitive.Close title=\"Close\" className=\"absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-panel-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none\">\n <Icon icon={IconX} size=\"sm\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n {children}\n </motion.div>\n </SheetPrimitive.Content>\n </SheetPortal>\n )}\n </AnimatePresence>\n )\n})\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = 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-03 text-center sm:text-left',\n className,\n )}\n {...props}\n />\n ),\n)\nSheetHeader.displayName = 'SheetHeader'\n\nconst SheetFooter = 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)\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Title\n ref={ref}\n className={cn('text-heading-xs font-semibold text-surface-fg', className)}\n {...props}\n />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Description\n ref={ref}\n className={cn('text-body-md text-surface-fg-muted', className)}\n {...props}\n />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,IAAmB,EAAM,cAAsD;CAAE,MAAM;CAAO,eAAe,CAAC;AAAE,CAAC,GAgDjH,KAA+E,EACnF,MAAM,GACN,iBAAc,IACd,iBACA,aACA,GAAG,QACC;CACJ,IAAM,EAAE,SAAM,YAAS,aAAU,EAAoB;EAAE,MAAM;EAAgB;EAAa;CAAa,CAAC,GAElG,IAAe,EAAM,eAClB;EAAE;EAAM,SAAS;CAAM,IAC9B,CAAC,GAAM,CAAK,CACd;CAEA,OACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,GAAD;GAA2B;GAAM,cAAc;GAAS,GAAI;GACzD;EACkB,CAAA;CACI,CAAA;AAE/B;AACA,EAAM,cAAc;AAEpB,IAAM,IAAe,GAEf,IAAa,GAEb,IAAc,GAEd,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CAAwB,YAAA;CAAW,SAAA;WACjC,kBAAC,EAAO,KAAR;EACO;EACL,WAAW,EAAG,oCAAoC,CAAS;EAC3D,SAAS,EAAE,SAAS,EAAE;EACtB,SAAS,EAAE,SAAS,EAAE;EACtB,MAAM,EAAE,SAAS,EAAE;EACnB,YAAY,EAAO;EACnB,GAAI,EAAY,CAAK;CACtB,CAAA;AACqB,CAAA,CACzB;AACD,EAAa,cAAA,EAAqC;AAIlD,IAAM,IAAe;CACnB,KAAK,EAAE,GAAG,QAAQ;CAClB,QAAQ,EAAE,GAAG,OAAO;CACpB,MAAM,EAAE,GAAG,QAAQ;CACnB,OAAO,EAAE,GAAG,OAAO;AACrB,GAEM,IAAe;CACnB,KAAK,EAAE,GAAG,EAAE;CACZ,QAAQ,EAAE,GAAG,EAAE;CACf,MAAM,EAAE,GAAG,EAAE;CACb,OAAO,EAAE,GAAG,EAAE;AAChB,GAEM,IAAgB,EACpB,qEACA;CACE,UAAU,EACR,MAAM;EACJ,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF,GA6CM,IAAe,EAAM,YAGxB,EAAE,UAAO,SAAS,eAAY,cAAW,aAAU,GAAG,KAAS,MAAQ;CACxE,IAAM,IAAc,EAAY,GAC1B,IAAW,MAAe,MAAS,GACnC,IAAY,EAAiB,GAC7B,EAAE,SAAM,eAAY,EAAM,WAAW,CAAgB,GACrD,IAAgB,IAAW,WAAY,KAAQ,SAE/C,IAAc,EAAM,OAAuB,IAAI,GAC/C,IAAc,EAAM,aACvB,MAAgC;EAE/B,AADA,EAAY,UAAU,GAClB,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,MAAK,EAAuD,UAAU;CACjF,GACA,CAAC,CAAG,CACN;CAEA,OACE,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;EAAa,YAAA;YAAb,CACE,kBAAC,GAAD,CAAe,CAAA,GACf,kBAAC,GAAD;GAAwB,YAAA;GAAW,SAAA;aACjC,kBAAC,EAAO,KAAR;IACE,KAAK;IACL,WAAW,EAAG,EAAc,EAAE,MAAM,EAAc,CAAC,GAAG,CAAS;IAC/D,SAAS,EAAa;IACtB,SAAS,EAAa;IACtB,MAAM,EAAa;IACnB,YAAY,EAAQ;IACpB,MAAM,KAAY,CAAC,IAAY,MAAM;IACrC,iBAAiB,EAAE,KAAK,EAAE;IAC1B,aAAa;IACb,WACE,KAEM,GACA,MACG;KACH,IAAM,IACJ,EAAY,SAAS,sBAAsB,CAAC,CAAC,UAAU;KACzD,CAAI,EAAK,OAAO,IAAI,IAAI,MAAO,EAAK,SAAS,IAAI,QAC/C,EAAQ;IACZ,IACA,KAAA;IAEN,GAAI,EAAY,CAAK;cAvBvB;KAyBG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD,EAAK,WAAU,yCAA0C,CAAA;KACtD,CAAA;KAEP,kBAAC,GAAD;MAAsB,OAAM;MAAQ,WAAU;gBAA9C,CACE,kBAAC,GAAD;OAAM,MAAM;OAAO,MAAK;MAAM,CAAA,GAC9B,kBAAC,QAAD;OAAM,WAAU;iBAAU;MAAW,CAAA,CACjB;;KACrB;IACS;;EACU,CAAA,CACb;IAEA,CAAA;AAErB,CAAC;AACD,EAAa,cAAA,EAAqC;AAElD,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wDACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAY,cAAc;AAE1B,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,WAAW,EACT,qEACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAY,cAAc;AAE1B,IAAM,IAAa,EAAM,YAGtB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EAAG,iDAAiD,CAAS;CACxE,GAAI;AACL,CAAA,CACF;AACD,EAAW,cAAA,EAAmC;AAE9C,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EAAG,sCAAsC,CAAS;CAC7D,GAAI;AACL,CAAA,CACF;AACD,EAAiB,cAAA,EAAyC"}
|
package/dist/ui/sidebar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/ui/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EACL,cAAc,EAWf,MAAM,OAAO,CAAA;AAWd,OAAO,EAEL,cAAc,EAGf,MAAM,WAAW,CAAA;AASlB,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU,GAAG,WAAW,CAAA;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,cAAc,gDAA6C,CAAA;AAEjE,iBAAS,UAAU,mBAOlB;AAED,QAAA,MAAM,eAAe;kBAGH,OAAO;WACd,OAAO;mBACC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;0DAoGzC,CAAA;AAsDD,QAAA,MAAM,OAAO;WAGF,MAAM,GAAG,OAAO;cACb,SAAS,GAAG,UAAU,GAAG,OAAO;kBAC5B,WAAW,GAAG,MAAM,GAAG,MAAM;
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/ui/sidebar.tsx"],"names":[],"mappings":"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"}
|