@humain/ui 2.1.62 → 2.1.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/organisms/ai/AIToolCall/AIToolCall.d.ts +9 -3
- package/dist/components/organisms/ai/AIToolRun/index.d.ts +1 -1
- package/dist/components/organisms/ai/AIToolRun/validation.d.ts +24 -3
- package/dist/components/organisms/ai/_shared/format-ai-duration.d.ts +1 -0
- package/dist/components/organisms/ai/_shared/workflow-step-renderer.d.ts +1 -0
- package/dist/index.js +52 -52
- package/dist/index151.js +1 -1
- package/dist/index174.js +10 -333
- package/dist/index174.js.map +1 -1
- package/dist/index175.js +310 -137
- package/dist/index175.js.map +1 -1
- package/dist/index176.js +148 -174
- package/dist/index176.js.map +1 -1
- package/dist/index177.js +186 -78
- package/dist/index177.js.map +1 -1
- package/dist/index178.js +74 -124
- package/dist/index178.js.map +1 -1
- package/dist/index179.js +133 -1
- package/dist/index179.js.map +1 -0
- package/dist/index180.js +2 -201
- package/dist/index181.js +201 -0
- package/dist/{index180.js.map → index181.js.map} +1 -1
- package/dist/index183.js +130 -166
- package/dist/index183.js.map +1 -1
- package/dist/index184.js +195 -983
- package/dist/index184.js.map +1 -1
- package/dist/index185.js +1069 -369
- package/dist/index185.js.map +1 -1
- package/dist/index186.js +395 -197
- package/dist/index186.js.map +1 -1
- package/dist/index187.js +198 -243
- package/dist/index187.js.map +1 -1
- package/dist/index188.js +263 -3
- package/dist/index188.js.map +1 -1
- package/dist/index189.js +3 -209
- package/dist/index189.js.map +1 -1
- package/dist/index190.js +190 -777
- package/dist/index190.js.map +1 -1
- package/dist/index191.js +771 -252
- package/dist/index191.js.map +1 -1
- package/dist/index192.js +250 -65
- package/dist/index192.js.map +1 -1
- package/dist/index193.js +72 -523
- package/dist/index193.js.map +1 -1
- package/dist/index194.js +537 -144
- package/dist/index194.js.map +1 -1
- package/dist/index195.js +139 -720
- package/dist/index195.js.map +1 -1
- package/dist/index196.js +707 -167
- package/dist/index196.js.map +1 -1
- package/dist/index197.js +175 -151
- package/dist/index197.js.map +1 -1
- package/dist/index198.js +152 -487
- package/dist/index198.js.map +1 -1
- package/dist/index199.js +472 -225
- package/dist/index199.js.map +1 -1
- package/dist/index200.js +236 -260
- package/dist/index200.js.map +1 -1
- package/dist/index201.js +265 -215
- package/dist/index201.js.map +1 -1
- package/dist/index202.js +207 -307
- package/dist/index202.js.map +1 -1
- package/dist/index203.js +302 -135
- package/dist/index203.js.map +1 -1
- package/dist/index204.js +140 -271
- package/dist/index204.js.map +1 -1
- package/dist/index205.js +263 -253
- package/dist/index205.js.map +1 -1
- package/dist/index206.js +244 -137
- package/dist/index206.js.map +1 -1
- package/dist/index207.js +100 -238
- package/dist/index207.js.map +1 -1
- package/dist/index208.js +278 -74
- package/dist/index208.js.map +1 -1
- package/dist/index209.js +56 -97
- package/dist/index209.js.map +1 -1
- package/dist/index210.js +142 -47
- package/dist/index210.js.map +1 -1
- package/dist/index211.js +38 -84
- package/dist/index211.js.map +1 -1
- package/dist/index212.js +72 -252
- package/dist/index212.js.map +1 -1
- package/dist/index213.js +274 -26
- package/dist/index213.js.map +1 -1
- package/dist/index214.js +29 -94
- package/dist/index214.js.map +1 -1
- package/dist/index215.js +98 -25
- package/dist/index215.js.map +1 -1
- package/dist/index216.js +20 -565
- package/dist/index216.js.map +1 -1
- package/dist/index217.js +564 -17
- package/dist/index217.js.map +1 -1
- package/dist/index218.js +20 -23
- package/dist/index218.js.map +1 -1
- package/dist/index219.js +20 -95
- package/dist/index219.js.map +1 -1
- package/dist/index220.js +92 -88
- package/dist/index220.js.map +1 -1
- package/dist/index221.js +97 -29
- package/dist/index221.js.map +1 -1
- package/dist/index222.js +24 -470
- package/dist/index222.js.map +1 -1
- package/dist/index223.js +446 -196
- package/dist/index223.js.map +1 -1
- package/dist/index224.js +199 -729
- package/dist/index224.js.map +1 -1
- package/dist/index225.js +750 -61
- package/dist/index225.js.map +1 -1
- package/dist/index226.js +58 -181
- package/dist/index226.js.map +1 -1
- package/dist/index227.js +175 -259
- package/dist/index227.js.map +1 -1
- package/dist/index228.js +246 -172
- package/dist/index228.js.map +1 -1
- package/dist/index229.js +195 -32
- package/dist/index229.js.map +1 -1
- package/dist/index230.js +12 -40
- package/dist/index230.js.map +1 -1
- package/dist/index231.js +23 -26
- package/dist/index231.js.map +1 -1
- package/dist/index232.js +45 -22
- package/dist/index232.js.map +1 -1
- package/dist/index233.js +27 -48
- package/dist/index233.js.map +1 -1
- package/dist/index234.js +52 -26
- package/dist/index234.js.map +1 -1
- package/dist/index235.js +40 -225
- package/dist/index235.js.map +1 -1
- package/dist/index236.js +217 -39
- package/dist/index236.js.map +1 -1
- package/dist/index237.js +50 -0
- package/dist/index237.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/wc/AIToolCall.js +218 -0
- package/dist/wc/AIToolCall.js.map +1 -0
- package/dist/wc/hf-ai-tool-call.js +34 -219
- package/dist/wc/hf-ai-tool-call.js.map +1 -1
- package/dist/wc/hf-ai-tool-run.js +673 -576
- package/dist/wc/hf-ai-tool-run.js.map +1 -1
- package/dist/wc/workflow-step-renderer.js +94 -86
- package/dist/wc/workflow-step-renderer.js.map +1 -1
- package/dist/wc-react/AIToolCall.js +218 -0
- package/dist/wc-react/AIToolCall.js.map +1 -0
- package/dist/wc-react/hf-ai-tool-call.js +32 -217
- package/dist/wc-react/hf-ai-tool-call.js.map +1 -1
- package/dist/wc-react/hf-ai-tool-run.js +698 -601
- package/dist/wc-react/hf-ai-tool-run.js.map +1 -1
- package/dist/wc-react/workflow-step-renderer.js +76 -68
- package/dist/wc-react/workflow-step-renderer.js.map +1 -1
- package/package.json +1 -1
- package/skills/humain-ui/SKILL.md +1 -1
- package/skills/humain-ui-wc/SKILL.md +1 -1
- package/skills/humain-ui-wc.skill +0 -0
- package/skills/humain-ui.skill +0 -0
- package/dist/index182.js +0 -143
- package/dist/index182.js.map +0 -1
- package/dist/wc/wrench.js +0 -10
- package/dist/wc/wrench.js.map +0 -1
- package/dist/wc-react/wrench.js +0 -10
- package/dist/wc-react/wrench.js.map +0 -1
package/dist/index211.js
CHANGED
|
@@ -1,105 +1,59 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "./index2.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
"data-slot": "popover",
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { PreviewCard } from "@base-ui/react/preview-card";
|
|
5
|
+
//#region src/components/organisms/overlays/HoverCard/HoverCard.tsx
|
|
6
|
+
function HoverCard({ ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(PreviewCard.Root, {
|
|
8
|
+
"data-slot": "hover-card",
|
|
10
9
|
...props
|
|
11
10
|
});
|
|
12
11
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
HoverCard.displayName = "HoverCard";
|
|
13
|
+
function HoverCardTrigger({ ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
|
|
15
|
+
"data-slot": "hover-card-trigger",
|
|
16
16
|
...props
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
HoverCardTrigger.displayName = "HoverCard.Trigger";
|
|
20
|
+
function HoverCardPopup({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx(PreviewCard.Portal, {
|
|
22
|
+
"data-slot": "hover-card-portal",
|
|
23
|
+
children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
|
|
24
|
+
align,
|
|
25
|
+
alignOffset,
|
|
26
|
+
side,
|
|
27
|
+
sideOffset,
|
|
28
|
+
className: "isolate z-50",
|
|
29
|
+
children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
|
|
30
|
+
"data-slot": "hover-card-popup",
|
|
31
|
+
className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none bg-popover text-popover-foreground w-64 rounded-xl border border-border p-4 text-sm shadow-[var(--shadow-hover-card)] supports-backdrop-filter:backdrop-blur-[60px] duration-150 z-50 origin-(--transform-origin) outline-hidden [&>*]:delight-fade-in [&>*]:motion-reduce:!animate-none", className),
|
|
32
|
+
...props
|
|
33
|
+
})
|
|
33
34
|
})
|
|
34
|
-
}) });
|
|
35
|
-
}
|
|
36
|
-
function PopoverHeader({ className, ...props }) {
|
|
37
|
-
return /* @__PURE__ */ jsx("div", {
|
|
38
|
-
"data-slot": "popover-header",
|
|
39
|
-
className: cn("flex flex-col gap-1 text-sm", className),
|
|
40
|
-
...props
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
function PopoverTitle({ className, ...props }) {
|
|
44
|
-
return /* @__PURE__ */ jsx(Popover.Title, {
|
|
45
|
-
"data-slot": "popover-title",
|
|
46
|
-
className: cn("font-medium delight-stagger motion-reduce:!animate-none", className),
|
|
47
|
-
...props,
|
|
48
|
-
style: { "--delight-delay": "50ms" }
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
function PopoverDescription({ className, ...props }) {
|
|
52
|
-
return /* @__PURE__ */ jsx(Popover.Description, {
|
|
53
|
-
"data-slot": "popover-description",
|
|
54
|
-
className: cn("text-muted-foreground delight-stagger motion-reduce:!animate-none", className),
|
|
55
|
-
...props,
|
|
56
|
-
style: { "--delight-delay": "100ms" }
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
function Popover$1({ trigger, open: controlledOpen, defaultOpen = false, onOpenChange, children, ...props }) {
|
|
60
|
-
const [open, handleOpenChange] = useControllableState({
|
|
61
|
-
value: controlledOpen,
|
|
62
|
-
defaultValue: defaultOpen,
|
|
63
|
-
onChange: onOpenChange
|
|
64
|
-
});
|
|
65
|
-
return /* @__PURE__ */ jsxs(PopoverRoot, {
|
|
66
|
-
open,
|
|
67
|
-
onOpenChange: handleOpenChange,
|
|
68
|
-
...props,
|
|
69
|
-
children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: trigger }), children]
|
|
70
35
|
});
|
|
71
36
|
}
|
|
72
|
-
|
|
73
|
-
PopoverRoot.displayName = "Popover.Root";
|
|
74
|
-
PopoverTrigger.displayName = "Popover.Trigger";
|
|
75
|
-
PopoverPopup.displayName = "Popover.Popup";
|
|
76
|
-
PopoverHeader.displayName = "Popover.Header";
|
|
77
|
-
PopoverTitle.displayName = "Popover.Title";
|
|
78
|
-
PopoverDescription.displayName = "Popover.Description";
|
|
37
|
+
HoverCardPopup.displayName = "HoverCard.Popup";
|
|
79
38
|
/**
|
|
80
|
-
*
|
|
39
|
+
* HoverCard component with dot notation for compound parts.
|
|
81
40
|
*
|
|
82
41
|
* @example
|
|
83
42
|
* ```tsx
|
|
84
|
-
* <
|
|
85
|
-
* <
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
* </Popover.Popup>
|
|
91
|
-
* </Popover>
|
|
43
|
+
* <HoverCard>
|
|
44
|
+
* <HoverCard.Trigger>Hover me</HoverCard.Trigger>
|
|
45
|
+
* <HoverCard.Popup>
|
|
46
|
+
* Preview content here
|
|
47
|
+
* </HoverCard.Popup>
|
|
48
|
+
* </HoverCard>
|
|
92
49
|
* ```
|
|
93
50
|
*/
|
|
94
|
-
var
|
|
95
|
-
Root:
|
|
96
|
-
Trigger:
|
|
97
|
-
Popup:
|
|
98
|
-
Header: PopoverHeader,
|
|
99
|
-
Title: PopoverTitle,
|
|
100
|
-
Description: PopoverDescription
|
|
51
|
+
var HoverCardCompound = Object.assign(HoverCard, {
|
|
52
|
+
Root: HoverCard,
|
|
53
|
+
Trigger: HoverCardTrigger,
|
|
54
|
+
Popup: HoverCardPopup
|
|
101
55
|
});
|
|
102
56
|
//#endregion
|
|
103
|
-
export {
|
|
57
|
+
export { HoverCardCompound as HoverCard, HoverCardPopup, HoverCardTrigger };
|
|
104
58
|
|
|
105
59
|
//# sourceMappingURL=index211.js.map
|
package/dist/index211.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index211.js","names":[],"sources":["../src/components/organisms/overlays/
|
|
1
|
+
{"version":3,"file":"index211.js","names":[],"sources":["../src/components/organisms/overlays/HoverCard/HoverCard.tsx"],"sourcesContent":["'use client';\n\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport type * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type HoverCardProps = React.ComponentProps<typeof HoverCard>;\nexport type HoverCardTriggerProps = React.ComponentProps<\n typeof HoverCardTrigger\n>;\nexport type HoverCardPopupProps = PreviewCardPrimitive.Popup.Props &\n Pick<\n PreviewCardPrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n >;\n\n// ============================================================================\n// HoverCard Components\n// ============================================================================\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\nHoverCard.displayName = 'HoverCard';\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n return (\n <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n );\n}\n\nHoverCardTrigger.displayName = 'HoverCard.Trigger';\n\nfunction HoverCardPopup({\n className,\n side = 'bottom',\n sideOffset = 4,\n align = 'center',\n alignOffset = 4,\n ...props\n}: HoverCardPopupProps) {\n return (\n <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n <PreviewCardPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n className=\"isolate z-50\"\n >\n <PreviewCardPrimitive.Popup\n data-slot=\"hover-card-popup\"\n className={cn(\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none bg-popover text-popover-foreground w-64 rounded-xl border border-border p-4 text-sm shadow-[var(--shadow-hover-card)] supports-backdrop-filter:backdrop-blur-[60px] duration-150 z-50 origin-(--transform-origin) outline-hidden [&>*]:delight-fade-in [&>*]:motion-reduce:!animate-none',\n className,\n )}\n {...props}\n />\n </PreviewCardPrimitive.Positioner>\n </PreviewCardPrimitive.Portal>\n );\n}\n\nHoverCardPopup.displayName = 'HoverCard.Popup';\n\n// ============================================================================\n// Compound Component\n// ============================================================================\n\n/**\n * HoverCard component with dot notation for compound parts.\n *\n * @example\n * ```tsx\n * <HoverCard>\n * <HoverCard.Trigger>Hover me</HoverCard.Trigger>\n * <HoverCard.Popup>\n * Preview content here\n * </HoverCard.Popup>\n * </HoverCard>\n * ```\n */\nconst HoverCardCompound = Object.assign(HoverCard, {\n Root: HoverCard,\n Trigger: HoverCardTrigger,\n Popup: HoverCardPopup,\n});\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { HoverCardCompound as HoverCard, HoverCardPopup, HoverCardTrigger };\n"],"mappings":";;;;;AAyBA,SAAS,UAAU,EAAE,GAAG,SAA0C;CAChE,OAAO,oBAAC,YAAqB,MAAtB;EAA2B,aAAU;EAAa,GAAI;CAAQ,CAAA;AACvE;AAEA,UAAU,cAAc;AAExB,SAAS,iBAAiB,EAAE,GAAG,SAA6C;CAC1E,OACE,oBAAC,YAAqB,SAAtB;EAA8B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAE7E;AAEA,iBAAiB,cAAc;AAE/B,SAAS,eAAe,EACtB,WACA,OAAO,UACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,GAAG,SACmB;CACtB,OACE,oBAAC,YAAqB,QAAtB;EAA6B,aAAU;YACrC,oBAAC,YAAqB,YAAtB;GACS;GACM;GACP;GACM;GACZ,WAAU;aAEV,oBAAC,YAAqB,OAAtB;IACE,aAAU;IACV,WAAW,GACT,wlBACA,SACF;IACA,GAAI;GACL,CAAA;EAC8B,CAAA;CACN,CAAA;AAEjC;AAEA,eAAe,cAAc;;;;;;;;;;;;;;AAmB7B,IAAM,oBAAoB,OAAO,OAAO,WAAW;CACjD,MAAM;CACN,SAAS;CACT,OAAO;AACT,CAAC"}
|
package/dist/index212.js
CHANGED
|
@@ -1,285 +1,105 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "./index2.js";
|
|
3
|
-
import { Button } from "./index5.js";
|
|
4
3
|
import { useControllableState } from "./index12.js";
|
|
5
|
-
import { cva } from "class-variance-authority";
|
|
6
|
-
import { X } from "lucide-react";
|
|
7
|
-
import * as React from "react";
|
|
8
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
import {
|
|
10
|
-
//#region src/components/organisms/overlays/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
md: "",
|
|
15
|
-
lg: ""
|
|
16
|
-
} },
|
|
17
|
-
defaultVariants: { size: "sm" }
|
|
18
|
-
});
|
|
19
|
-
var buttonSizeMap = {
|
|
20
|
-
sm: "icon-sm",
|
|
21
|
-
md: "icon",
|
|
22
|
-
lg: "icon-lg"
|
|
23
|
-
};
|
|
24
|
-
var CloseButton = React.forwardRef(({ className, size = "sm", "aria-label": ariaLabel = "Close", ...props }, ref) => {
|
|
25
|
-
return /* @__PURE__ */ jsxs(Button, {
|
|
26
|
-
ref,
|
|
27
|
-
"data-slot": "close-button",
|
|
28
|
-
appearance: "ghost",
|
|
29
|
-
variant: "secondary",
|
|
30
|
-
size: buttonSizeMap[size ?? "sm"],
|
|
31
|
-
className: cn(closeButtonVariants({ size }), className),
|
|
32
|
-
"aria-label": ariaLabel,
|
|
33
|
-
...props,
|
|
34
|
-
children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
|
|
35
|
-
className: "sr-only",
|
|
36
|
-
children: ariaLabel
|
|
37
|
-
})]
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
CloseButton.displayName = "CloseButton";
|
|
41
|
-
var Root = React.forwardRef(function Root({ ...props }, _ref) {
|
|
42
|
-
return /* @__PURE__ */ jsx(Dialog.Root, {
|
|
43
|
-
"data-slot": "sheet",
|
|
44
|
-
...props
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
Root.displayName = "Sheet.Root";
|
|
48
|
-
var Trigger = React.forwardRef(function Trigger({ ...props }, ref) {
|
|
49
|
-
return /* @__PURE__ */ jsx(Dialog.Trigger, {
|
|
50
|
-
ref,
|
|
51
|
-
"data-slot": "sheet-trigger",
|
|
52
|
-
...props
|
|
53
|
-
});
|
|
54
|
-
});
|
|
55
|
-
Trigger.displayName = "Sheet.Trigger";
|
|
56
|
-
var Close = React.forwardRef(function Close({ ...props }, ref) {
|
|
57
|
-
return /* @__PURE__ */ jsx(Dialog.Close, {
|
|
58
|
-
ref,
|
|
59
|
-
"data-slot": "sheet-close",
|
|
60
|
-
...props
|
|
61
|
-
});
|
|
62
|
-
});
|
|
63
|
-
Close.displayName = "Sheet.Close";
|
|
64
|
-
function Portal({ ...props }) {
|
|
65
|
-
return /* @__PURE__ */ jsx(Dialog.Portal, {
|
|
66
|
-
"data-slot": "sheet-portal",
|
|
5
|
+
import { Popover } from "@base-ui/react/popover";
|
|
6
|
+
//#region src/components/organisms/overlays/Popover/Popover.tsx
|
|
7
|
+
function PopoverRoot({ ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsx(Popover.Root, {
|
|
9
|
+
"data-slot": "popover",
|
|
67
10
|
...props
|
|
68
11
|
});
|
|
69
12
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
ref,
|
|
74
|
-
"data-slot": "sheet-backdrop",
|
|
75
|
-
className: cn("bg-background/80/10 fixed inset-0 z-50", !disableAnimation && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:animate-none", !disableBackdropBlur && "supports-backdrop-filter:backdrop-blur-xs", className),
|
|
13
|
+
function PopoverTrigger({ ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(Popover.Trigger, {
|
|
15
|
+
"data-slot": "popover-trigger",
|
|
76
16
|
...props
|
|
77
17
|
});
|
|
78
|
-
});
|
|
79
|
-
Backdrop.displayName = "Sheet.Backdrop";
|
|
80
|
-
var Viewport = React.forwardRef(function Viewport({ className, children, ...props }, ref) {
|
|
81
|
-
return /* @__PURE__ */ jsx(Dialog.Viewport, {
|
|
82
|
-
ref,
|
|
83
|
-
"data-slot": "sheet-viewport",
|
|
84
|
-
className: cn("fixed inset-0 z-50", className),
|
|
85
|
-
...props,
|
|
86
|
-
children
|
|
87
|
-
});
|
|
88
|
-
});
|
|
89
|
-
Viewport.displayName = "Sheet.Viewport";
|
|
90
|
-
function PopupBase({ className, children, side = "right", showCloseButton = true, disableAnimation, disableBackdropBlur, ...props }) {
|
|
91
|
-
return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Backdrop, {
|
|
92
|
-
disableAnimation,
|
|
93
|
-
disableBackdropBlur
|
|
94
|
-
}), /* @__PURE__ */ jsxs(Dialog.Popup, {
|
|
95
|
-
"data-slot": "sheet-popup",
|
|
96
|
-
"data-side": side,
|
|
97
|
-
className: cn("bg-background fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", !disableAnimation && "data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-full data-[side=right]:data-open:slide-in-from-right-full data-[side=left]:data-closed:slide-out-to-left-full data-[side=left]:data-open:slide-in-from-left-full data-[side=top]:data-closed:slide-out-to-top-full data-[side=top]:data-open:slide-in-from-top-full data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-full data-[side=bottom]:data-open:slide-in-from-bottom-full data-open:duration-300 data-closed:duration-200 data-open:ease-(--ease-decelerate) data-closed:ease-in motion-reduce:animate-none", className),
|
|
98
|
-
...props,
|
|
99
|
-
children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(CloseButton, { className: "absolute top-4 end-4" }) })]
|
|
100
|
-
})] });
|
|
101
18
|
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
19
|
+
function PopoverPopup({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, collisionAvoidance, positionMethod, ...props }) {
|
|
20
|
+
return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
|
|
21
|
+
align,
|
|
22
|
+
alignOffset,
|
|
23
|
+
side,
|
|
24
|
+
sideOffset,
|
|
25
|
+
anchor,
|
|
26
|
+
collisionAvoidance,
|
|
27
|
+
positionMethod,
|
|
28
|
+
className: "isolate z-50",
|
|
29
|
+
children: /* @__PURE__ */ jsx(Popover.Popup, {
|
|
30
|
+
"data-slot": "popover-popup",
|
|
31
|
+
className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none ring-foreground/10 flex flex-col gap-4 rounded-md p-4 text-sm shadow-lg ring-1 duration-150 z-50 w-72 origin-(--transform-origin) outline-hidden", className),
|
|
32
|
+
...props
|
|
33
|
+
})
|
|
34
|
+
}) });
|
|
109
35
|
}
|
|
110
|
-
|
|
111
|
-
function FooterBase({ className, ...props }) {
|
|
36
|
+
function PopoverHeader({ className, ...props }) {
|
|
112
37
|
return /* @__PURE__ */ jsx("div", {
|
|
113
|
-
"data-slot": "
|
|
114
|
-
className: cn("
|
|
38
|
+
"data-slot": "popover-header",
|
|
39
|
+
className: cn("flex flex-col gap-1 text-sm", className),
|
|
115
40
|
...props
|
|
116
41
|
});
|
|
117
42
|
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
43
|
+
function PopoverTitle({ className, ...props }) {
|
|
44
|
+
return /* @__PURE__ */ jsx(Popover.Title, {
|
|
45
|
+
"data-slot": "popover-title",
|
|
46
|
+
className: cn("font-medium delight-stagger motion-reduce:!animate-none", className),
|
|
47
|
+
...props,
|
|
48
|
+
style: { "--delight-delay": "50ms" }
|
|
124
49
|
});
|
|
125
50
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
51
|
+
function PopoverDescription({ className, ...props }) {
|
|
52
|
+
return /* @__PURE__ */ jsx(Popover.Description, {
|
|
53
|
+
"data-slot": "popover-description",
|
|
54
|
+
className: cn("text-muted-foreground delight-stagger motion-reduce:!animate-none", className),
|
|
55
|
+
...props,
|
|
56
|
+
style: { "--delight-delay": "100ms" }
|
|
132
57
|
});
|
|
133
58
|
}
|
|
134
|
-
|
|
135
|
-
function SheetComponent({ trigger, open: controlledOpen, defaultOpen = false, onOpenChange, children, ...props }) {
|
|
59
|
+
function Popover$1({ trigger, open: controlledOpen, defaultOpen = false, onOpenChange, children, ...props }) {
|
|
136
60
|
const [open, handleOpenChange] = useControllableState({
|
|
137
61
|
value: controlledOpen,
|
|
138
62
|
defaultValue: defaultOpen,
|
|
139
63
|
onChange: onOpenChange
|
|
140
64
|
});
|
|
141
|
-
return /* @__PURE__ */ jsxs(
|
|
65
|
+
return /* @__PURE__ */ jsxs(PopoverRoot, {
|
|
142
66
|
open,
|
|
143
67
|
onOpenChange: handleOpenChange,
|
|
144
68
|
...props,
|
|
145
|
-
children: [
|
|
146
|
-
});
|
|
147
|
-
}
|
|
148
|
-
SheetComponent.displayName = "Sheet";
|
|
149
|
-
var sheetWidthClasses = {
|
|
150
|
-
sm: "data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
|
|
151
|
-
md: "data-[side=left]:sm:max-w-md data-[side=right]:sm:max-w-md",
|
|
152
|
-
lg: "data-[side=left]:sm:max-w-lg data-[side=right]:sm:max-w-lg",
|
|
153
|
-
xl: "data-[side=left]:sm:max-w-xl data-[side=right]:sm:max-w-xl",
|
|
154
|
-
full: "data-[side=left]:sm:max-w-full data-[side=right]:sm:max-w-full"
|
|
155
|
-
};
|
|
156
|
-
function Popup({ className, width = "md", children, showCloseButton = false, ...props }) {
|
|
157
|
-
return /* @__PURE__ */ jsx(PopupBase, {
|
|
158
|
-
className: cn("shadow-xl border-border", sheetWidthClasses[width], className),
|
|
159
|
-
showCloseButton,
|
|
160
|
-
...props,
|
|
161
|
-
children
|
|
162
|
-
});
|
|
163
|
-
}
|
|
164
|
-
Popup.displayName = "Sheet.Popup";
|
|
165
|
-
function Header({ className, children, icon, showCloseButton = true, onClose, ...props }) {
|
|
166
|
-
return /* @__PURE__ */ jsxs(HeaderBase, {
|
|
167
|
-
className: cn("relative flex flex-row items-start gap-4 px-6 pt-6 pb-0", className),
|
|
168
|
-
...props,
|
|
169
|
-
children: [
|
|
170
|
-
icon && /* @__PURE__ */ jsx("div", {
|
|
171
|
-
className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background shadow-xs delight-bounce-in motion-reduce:!animate-none",
|
|
172
|
-
children: /* @__PURE__ */ jsx("span", {
|
|
173
|
-
className: "text-secondary-foreground [&>svg]:size-5",
|
|
174
|
-
children: icon
|
|
175
|
-
})
|
|
176
|
-
}),
|
|
177
|
-
/* @__PURE__ */ jsx("div", {
|
|
178
|
-
className: "flex min-w-0 flex-1 flex-col gap-0.5",
|
|
179
|
-
children
|
|
180
|
-
}),
|
|
181
|
-
showCloseButton && /* @__PURE__ */ jsx(Close, {
|
|
182
|
-
onClick: onClose,
|
|
183
|
-
render: /* @__PURE__ */ jsx(CloseButton, {
|
|
184
|
-
size: "md",
|
|
185
|
-
className: "absolute end-4 top-3"
|
|
186
|
-
})
|
|
187
|
-
})
|
|
188
|
-
]
|
|
189
|
-
});
|
|
190
|
-
}
|
|
191
|
-
Header.displayName = "Sheet.Header";
|
|
192
|
-
function Title({ className, ...props }) {
|
|
193
|
-
return /* @__PURE__ */ jsx(TitleBase, {
|
|
194
|
-
className: cn("text-xl font-semibold text-foreground delight-stagger motion-reduce:!animate-none", className),
|
|
195
|
-
...props,
|
|
196
|
-
style: { "--delight-delay": "50ms" }
|
|
197
|
-
});
|
|
198
|
-
}
|
|
199
|
-
Title.displayName = "Sheet.Title";
|
|
200
|
-
function Description({ className, ...props }) {
|
|
201
|
-
return /* @__PURE__ */ jsx(DescriptionBase, {
|
|
202
|
-
className: cn("text-sm text-tertiary-foreground delight-stagger motion-reduce:!animate-none", className),
|
|
203
|
-
...props,
|
|
204
|
-
style: { "--delight-delay": "100ms" }
|
|
205
|
-
});
|
|
206
|
-
}
|
|
207
|
-
Description.displayName = "Sheet.Description";
|
|
208
|
-
function Body({ className, children, ...props }) {
|
|
209
|
-
return /* @__PURE__ */ jsx("div", {
|
|
210
|
-
"data-slot": "sheet-body",
|
|
211
|
-
className: cn("flex flex-1 flex-col gap-6 overflow-y-auto px-6", className),
|
|
212
|
-
...props,
|
|
213
|
-
children
|
|
214
|
-
});
|
|
215
|
-
}
|
|
216
|
-
Body.displayName = "Sheet.Body";
|
|
217
|
-
function Section({ className, children, label, description, ...props }) {
|
|
218
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
219
|
-
"data-slot": "sheet-section",
|
|
220
|
-
className: cn("flex flex-col gap-4", className),
|
|
221
|
-
...props,
|
|
222
|
-
children: [(label || description) && /* @__PURE__ */ jsxs("div", {
|
|
223
|
-
className: "flex flex-col gap-1",
|
|
224
|
-
children: [label && /* @__PURE__ */ jsx("p", {
|
|
225
|
-
className: "text-sm font-medium text-secondary-foreground",
|
|
226
|
-
children: label
|
|
227
|
-
}), description && /* @__PURE__ */ jsx("p", {
|
|
228
|
-
className: "text-sm text-tertiary-foreground",
|
|
229
|
-
children: description
|
|
230
|
-
})]
|
|
231
|
-
}), children]
|
|
232
|
-
});
|
|
233
|
-
}
|
|
234
|
-
Section.displayName = "Sheet.Section";
|
|
235
|
-
function Divider({ className, ...props }) {
|
|
236
|
-
return /* @__PURE__ */ jsx("div", {
|
|
237
|
-
"data-slot": "sheet-divider",
|
|
238
|
-
className: cn("h-px w-full bg-border-secondary", className),
|
|
239
|
-
...props
|
|
240
|
-
});
|
|
241
|
-
}
|
|
242
|
-
Divider.displayName = "Sheet.Divider";
|
|
243
|
-
function Footer({ className, children, primaryAction, secondaryAction, onPrimaryAction, onSecondaryAction, primaryLoading, primaryDisabled, ...props }) {
|
|
244
|
-
if (children) return /* @__PURE__ */ jsx(FooterBase, {
|
|
245
|
-
className: cn("flex-row items-center justify-end gap-3 border-t border-border px-6 py-4", className),
|
|
246
|
-
...props,
|
|
247
|
-
children
|
|
248
|
-
});
|
|
249
|
-
return /* @__PURE__ */ jsxs(FooterBase, {
|
|
250
|
-
className: cn("flex-row items-center justify-end gap-3 border-t border-border px-6 py-4", className),
|
|
251
|
-
...props,
|
|
252
|
-
children: [secondaryAction && /* @__PURE__ */ jsx(Close, { render: /* @__PURE__ */ jsx(Button, {
|
|
253
|
-
appearance: "outline",
|
|
254
|
-
variant: "secondary",
|
|
255
|
-
onClick: onSecondaryAction,
|
|
256
|
-
children: secondaryAction
|
|
257
|
-
}) }), primaryAction && /* @__PURE__ */ jsx(Button, {
|
|
258
|
-
onClick: onPrimaryAction,
|
|
259
|
-
loading: primaryLoading,
|
|
260
|
-
disabled: primaryDisabled,
|
|
261
|
-
children: primaryAction
|
|
262
|
-
})]
|
|
69
|
+
children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: trigger }), children]
|
|
263
70
|
});
|
|
264
71
|
}
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
72
|
+
Popover$1.displayName = "Popover";
|
|
73
|
+
PopoverRoot.displayName = "Popover.Root";
|
|
74
|
+
PopoverTrigger.displayName = "Popover.Trigger";
|
|
75
|
+
PopoverPopup.displayName = "Popover.Popup";
|
|
76
|
+
PopoverHeader.displayName = "Popover.Header";
|
|
77
|
+
PopoverTitle.displayName = "Popover.Title";
|
|
78
|
+
PopoverDescription.displayName = "Popover.Description";
|
|
79
|
+
/**
|
|
80
|
+
* Popover component with dot notation for compound parts.
|
|
81
|
+
*
|
|
82
|
+
* @example
|
|
83
|
+
* ```tsx
|
|
84
|
+
* <Popover trigger={<Button>Open</Button>}>
|
|
85
|
+
* <Popover.Popup>
|
|
86
|
+
* <Popover.Header>
|
|
87
|
+
* <Popover.Title>Title</Popover.Title>
|
|
88
|
+
* <Popover.Description>Description</Popover.Description>
|
|
89
|
+
* </Popover.Header>
|
|
90
|
+
* </Popover.Popup>
|
|
91
|
+
* </Popover>
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
94
|
+
var PopoverCompound = Object.assign(Popover$1, {
|
|
95
|
+
Root: PopoverRoot,
|
|
96
|
+
Trigger: PopoverTrigger,
|
|
97
|
+
Popup: PopoverPopup,
|
|
98
|
+
Header: PopoverHeader,
|
|
99
|
+
Title: PopoverTitle,
|
|
100
|
+
Description: PopoverDescription
|
|
281
101
|
});
|
|
282
102
|
//#endregion
|
|
283
|
-
export {
|
|
103
|
+
export { PopoverCompound as Popover, PopoverDescription, PopoverHeader, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger };
|
|
284
104
|
|
|
285
105
|
//# sourceMappingURL=index212.js.map
|
package/dist/index212.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index212.js","names":[],"sources":["../src/components/organisms/overlays/Sheet/Sheet.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog as SheetPrimitive } from '@base-ui/react/dialog';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport * as React from 'react';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { useControllableState } from '@/hooks/use-controllable-state';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// CloseButton - Internal component for sheet close button\n// ============================================\n\nconst closeButtonVariants = cva('', {\n variants: {\n size: {\n sm: '',\n md: '',\n lg: '',\n },\n },\n defaultVariants: {\n size: 'sm',\n },\n});\n\nconst buttonSizeMap = {\n sm: 'icon-sm',\n md: 'icon',\n lg: 'icon-lg',\n} as const;\n\ninterface CloseButtonProps\n extends Omit<\n React.ComponentProps<typeof Button>,\n 'variant' | 'size' | 'children'\n >,\n VariantProps<typeof closeButtonVariants> {\n 'aria-label'?: string;\n}\n\nconst CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(\n (\n { className, size = 'sm', 'aria-label': ariaLabel = 'Close', ...props },\n ref,\n ) => {\n return (\n <Button\n ref={ref}\n data-slot=\"close-button\"\n appearance=\"ghost\"\n variant=\"secondary\"\n size={buttonSizeMap[size ?? 'sm']}\n className={cn(closeButtonVariants({ size }), className)}\n aria-label={ariaLabel}\n {...props}\n >\n <X />\n <span className=\"sr-only\">{ariaLabel}</span>\n </Button>\n );\n },\n);\n\nCloseButton.displayName = 'CloseButton';\n\n// ============================================\n// Base Sheet Components\n// ============================================\n\nconst Root = React.forwardRef<HTMLDivElement, SheetPrimitive.Root.Props>(\n function Root({ ...props }, _ref) {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n },\n);\nRoot.displayName = 'Sheet.Root';\n\nconst Trigger = React.forwardRef<\n HTMLButtonElement,\n SheetPrimitive.Trigger.Props\n>(function Trigger({ ...props }, ref) {\n return (\n <SheetPrimitive.Trigger ref={ref} data-slot=\"sheet-trigger\" {...props} />\n );\n});\nTrigger.displayName = 'Sheet.Trigger';\n\nconst Close = React.forwardRef<HTMLButtonElement, SheetPrimitive.Close.Props>(\n function Close({ ...props }, ref) {\n return (\n <SheetPrimitive.Close ref={ref} data-slot=\"sheet-close\" {...props} />\n );\n },\n);\nClose.displayName = 'Sheet.Close';\n\nfunction Portal({ ...props }: SheetPrimitive.Portal.Props) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\nPortal.displayName = 'Sheet.Portal';\n\nexport interface BackdropProps extends SheetPrimitive.Backdrop.Props {\n /** Disables open/close animations */\n disableAnimation?: boolean;\n /** Disables backdrop blur effect */\n disableBackdropBlur?: boolean;\n}\n\nconst Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(\n function Backdrop(\n { className, disableAnimation, disableBackdropBlur, ...props },\n ref,\n ) {\n return (\n <SheetPrimitive.Backdrop\n ref={ref}\n data-slot=\"sheet-backdrop\"\n className={cn(\n 'bg-background/80/10 fixed inset-0 z-50',\n !disableAnimation &&\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:animate-none',\n !disableBackdropBlur && 'supports-backdrop-filter:backdrop-blur-xs',\n className,\n )}\n {...props}\n />\n );\n },\n);\nBackdrop.displayName = 'Sheet.Backdrop';\n\n// ============================================\n// Viewport - Scroll container for sheet positioning\n// ============================================\n\nexport interface ViewportProps extends SheetPrimitive.Viewport.Props {}\n\nconst Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(\n function Viewport({ className, children, ...props }, ref) {\n return (\n <SheetPrimitive.Viewport\n ref={ref}\n data-slot=\"sheet-viewport\"\n className={cn('fixed inset-0 z-50', className)}\n {...props}\n >\n {children}\n </SheetPrimitive.Viewport>\n );\n },\n);\nViewport.displayName = 'Sheet.Viewport';\n\n// Base PopupBase (internal use)\ninterface PopupBaseProps extends SheetPrimitive.Popup.Props {\n side?: 'top' | 'right' | 'bottom' | 'left';\n showCloseButton?: boolean;\n disableAnimation?: boolean;\n disableBackdropBlur?: boolean;\n}\n\nfunction PopupBase({\n className,\n children,\n side = 'right',\n showCloseButton = true,\n disableAnimation,\n disableBackdropBlur,\n ...props\n}: PopupBaseProps) {\n return (\n <Portal>\n <Backdrop\n disableAnimation={disableAnimation}\n disableBackdropBlur={disableBackdropBlur}\n />\n <SheetPrimitive.Popup\n data-slot=\"sheet-popup\"\n data-side={side}\n className={cn(\n 'bg-background fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',\n !disableAnimation &&\n 'data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-full data-[side=right]:data-open:slide-in-from-right-full data-[side=left]:data-closed:slide-out-to-left-full data-[side=left]:data-open:slide-in-from-left-full data-[side=top]:data-closed:slide-out-to-top-full data-[side=top]:data-open:slide-in-from-top-full data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-full data-[side=bottom]:data-open:slide-in-from-bottom-full data-open:duration-300 data-closed:duration-200 data-open:ease-(--ease-decelerate) data-closed:ease-in motion-reduce:animate-none',\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <SheetPrimitive.Close\n render={<CloseButton className=\"absolute top-4 end-4\" />}\n />\n )}\n </SheetPrimitive.Popup>\n </Portal>\n );\n}\nPopupBase.displayName = 'PopupBase';\n\n// Base HeaderBase (internal use)\nfunction HeaderBase({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn('gap-1.5 p-4 flex flex-col', className)}\n {...props}\n />\n );\n}\nHeaderBase.displayName = 'HeaderBase';\n\n// Base FooterBase (internal use)\nfunction FooterBase({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn('gap-2 p-4 mt-auto flex flex-col', className)}\n {...props}\n />\n );\n}\nFooterBase.displayName = 'FooterBase';\n\n// Base TitleBase (internal use)\nfunction TitleBase({ className, ...props }: SheetPrimitive.Title.Props) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn('text-foreground font-medium', className)}\n {...props}\n />\n );\n}\nTitleBase.displayName = 'TitleBase';\n\n// Base DescriptionBase (internal use)\nfunction DescriptionBase({\n className,\n ...props\n}: SheetPrimitive.Description.Props) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n );\n}\nDescriptionBase.displayName = 'DescriptionBase';\n\n// ============================================\n// Sheet (supports both controlled and uncontrolled modes)\n// ============================================\n\nexport interface SheetProps {\n /**\n * Optional trigger element that opens the sheet.\n * When provided, uses base-ui's render prop to prevent nested button hydration errors.\n * The trigger element will be rendered directly (not wrapped in a button).\n *\n * @example\n * <Sheet trigger={<Button>Open Sheet</Button>}>\n * <Sheet.Popup>...</Sheet.Popup>\n * </Sheet>\n */\n trigger?: React.ReactElement;\n /** Sheet content */\n children?: React.ReactNode;\n /**\n * Controlled open state. When provided, the sheet is in controlled mode.\n * Use with `onOpenChange` to manage state externally.\n */\n open?: boolean;\n /**\n * Callback fired when the open state changes.\n * Required for controlled mode, optional for uncontrolled mode.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Initial open state for uncontrolled mode.\n * Ignored when `open` prop is provided (controlled mode).\n */\n defaultOpen?: boolean;\n /** Whether the sheet is modal (blocks interaction with the rest of the page) */\n modal?: boolean;\n /** Called when the sheet should be dismissed */\n onDismiss?: () => void;\n}\n\nfunction SheetComponent({\n trigger,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n children,\n ...props\n}: SheetProps) {\n const [open, handleOpenChange] = useControllableState({\n value: controlledOpen,\n defaultValue: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <Root open={open} onOpenChange={handleOpenChange} {...props}>\n {trigger && <Trigger render={trigger} />}\n {children}\n </Root>\n );\n}\nSheetComponent.displayName = 'Sheet';\n\n// ============================================\n// Popup - Enhanced with Figma styling and width variants\n// ============================================\n\nconst sheetWidthClasses = {\n sm: 'data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',\n md: 'data-[side=left]:sm:max-w-md data-[side=right]:sm:max-w-md',\n lg: 'data-[side=left]:sm:max-w-lg data-[side=right]:sm:max-w-lg',\n xl: 'data-[side=left]:sm:max-w-xl data-[side=right]:sm:max-w-xl',\n full: 'data-[side=left]:sm:max-w-full data-[side=right]:sm:max-w-full',\n};\n\nexport interface PopupProps extends React.ComponentProps<typeof PopupBase> {\n /** Width of the sheet for left/right sides */\n width?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n}\n\nfunction Popup({\n className,\n width = 'md',\n children,\n showCloseButton = false,\n ...props\n}: PopupProps) {\n return (\n <PopupBase\n className={cn(\n 'shadow-xl border-border',\n sheetWidthClasses[width],\n className,\n )}\n showCloseButton={showCloseButton}\n {...props}\n >\n {children}\n </PopupBase>\n );\n}\nPopup.displayName = 'Sheet.Popup';\n\n// ============================================\n// Header - Enhanced with icon support\n// ============================================\n\nexport interface HeaderProps extends React.ComponentProps<'div'> {\n /** Icon to display in the header */\n icon?: React.ReactNode;\n /** Show close button in header */\n showCloseButton?: boolean;\n /** Callback when close button is clicked */\n onClose?: () => void;\n}\n\nfunction Header({\n className,\n children,\n icon,\n showCloseButton = true,\n onClose,\n ...props\n}: HeaderProps) {\n return (\n <HeaderBase\n className={cn(\n 'relative flex flex-row items-start gap-4 px-6 pt-6 pb-0',\n className,\n )}\n {...props}\n >\n {icon && (\n <div className=\"flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background shadow-xs delight-bounce-in motion-reduce:!animate-none\">\n <span className=\"text-secondary-foreground [&>svg]:size-5\">\n {icon}\n </span>\n </div>\n )}\n <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">{children}</div>\n {showCloseButton && (\n <Close\n onClick={onClose}\n render={<CloseButton size=\"md\" className=\"absolute end-4 top-3\" />}\n />\n )}\n </HeaderBase>\n );\n}\nHeader.displayName = 'Sheet.Header';\n\n// ============================================\n// Title - Enhanced typography\n// ============================================\n\nexport interface TitleProps extends React.ComponentProps<typeof TitleBase> {}\n\nfunction Title({ className, ...props }: TitleProps) {\n return (\n <TitleBase\n className={cn(\n 'text-xl font-semibold text-foreground delight-stagger motion-reduce:!animate-none',\n className,\n )}\n {...props}\n style={{ '--delight-delay': '50ms' } as React.CSSProperties}\n />\n );\n}\nTitle.displayName = 'Sheet.Title';\n\n// ============================================\n// Description - Enhanced typography\n// ============================================\n\nexport interface DescriptionProps\n extends React.ComponentProps<typeof DescriptionBase> {}\n\nfunction Description({ className, ...props }: DescriptionProps) {\n return (\n <DescriptionBase\n className={cn(\n 'text-sm text-tertiary-foreground delight-stagger motion-reduce:!animate-none',\n className,\n )}\n {...props}\n style={{ '--delight-delay': '100ms' } as React.CSSProperties}\n />\n );\n}\nDescription.displayName = 'Sheet.Description';\n\n// ============================================\n// Body - Scrollable content area\n// ============================================\n\nexport interface BodyProps extends React.ComponentProps<'div'> {}\n\nfunction Body({ className, children, ...props }: BodyProps) {\n return (\n <div\n data-slot=\"sheet-body\"\n className={cn(\n 'flex flex-1 flex-col gap-6 overflow-y-auto px-6',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n}\nBody.displayName = 'Sheet.Body';\n\n// ============================================\n// Section - Grouped content section\n// ============================================\n\nexport interface SectionProps extends React.ComponentProps<'div'> {\n /** Section label */\n label?: string;\n /** Section description/supporting text */\n description?: string;\n}\n\nfunction Section({\n className,\n children,\n label,\n description,\n ...props\n}: SectionProps) {\n return (\n <div\n data-slot=\"sheet-section\"\n className={cn('flex flex-col gap-4', className)}\n {...props}\n >\n {(label || description) && (\n <div className=\"flex flex-col gap-1\">\n {label && (\n <p className=\"text-sm font-medium text-secondary-foreground\">\n {label}\n </p>\n )}\n {description && (\n <p className=\"text-sm text-tertiary-foreground\">{description}</p>\n )}\n </div>\n )}\n {children}\n </div>\n );\n}\nSection.displayName = 'Sheet.Section';\n\n// ============================================\n// Divider - Visual separator\n// ============================================\n\nexport interface DividerProps extends React.ComponentProps<'div'> {}\n\nfunction Divider({ className, ...props }: DividerProps) {\n return (\n <div\n data-slot=\"sheet-divider\"\n className={cn('h-px w-full bg-border-secondary', className)}\n {...props}\n />\n );\n}\nDivider.displayName = 'Sheet.Divider';\n\n// ============================================\n// Footer - Enhanced with button alignment\n// ============================================\n\nexport interface FooterProps extends React.ComponentProps<'div'> {\n /** Primary action button text */\n primaryAction?: string;\n /** Secondary action button text */\n secondaryAction?: string;\n /** Callback for primary action */\n onPrimaryAction?: () => void;\n /** Callback for secondary action */\n onSecondaryAction?: () => void;\n /** Loading state for primary button */\n primaryLoading?: boolean;\n /** Disable primary button */\n primaryDisabled?: boolean;\n}\n\nfunction Footer({\n className,\n children,\n primaryAction,\n secondaryAction,\n onPrimaryAction,\n onSecondaryAction,\n primaryLoading,\n primaryDisabled,\n ...props\n}: FooterProps) {\n // If custom children provided, render those instead\n if (children) {\n return (\n <FooterBase\n className={cn(\n 'flex-row items-center justify-end gap-3 border-t border-border px-6 py-4',\n className,\n )}\n {...props}\n >\n {children}\n </FooterBase>\n );\n }\n\n // Default footer with primary/secondary actions\n return (\n <FooterBase\n className={cn(\n 'flex-row items-center justify-end gap-3 border-t border-border px-6 py-4',\n className,\n )}\n {...props}\n >\n {secondaryAction && (\n <Close\n render={\n <Button\n appearance=\"outline\"\n variant=\"secondary\"\n onClick={onSecondaryAction}\n >\n {secondaryAction}\n </Button>\n }\n />\n )}\n {primaryAction && (\n <Button\n onClick={onPrimaryAction}\n loading={primaryLoading}\n disabled={primaryDisabled}\n >\n {primaryAction}\n </Button>\n )}\n </FooterBase>\n );\n}\nFooter.displayName = 'Sheet.Footer';\n\n// ============================================\n// Type exports\n// ============================================\n\nexport type CloseProps = SheetPrimitive.Close.Props;\nexport type PortalProps = SheetPrimitive.Portal.Props;\nexport type TriggerProps = SheetPrimitive.Trigger.Props;\nexport type RootProps = SheetPrimitive.Root.Props;\n\n// ============================================\n// Compound component via dot notation (ADR-011)\n// ============================================\n\nconst Sheet = Object.assign(SheetComponent, {\n Root,\n Trigger,\n Portal,\n Backdrop,\n Viewport,\n Popup,\n Header,\n Body,\n Footer,\n Title,\n Description,\n Close,\n Section,\n Divider,\n});\n\nexport {\n Backdrop as SheetBackdrop,\n Body as SheetBody,\n Close as SheetClose,\n Description as SheetDescription,\n Divider as SheetDivider,\n Footer as SheetFooter,\n Header as SheetHeader,\n Popup as SheetPopup,\n Portal as SheetPortal,\n // Sub-components with Sheet prefix for direct imports\n Root as SheetRoot,\n Section as SheetSection,\n Sheet,\n Title as SheetTitle,\n Trigger as SheetTrigger,\n Viewport as SheetViewport,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index212.js","names":[],"sources":["../src/components/organisms/overlays/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport type * as React from 'react';\nimport { useControllableState } from '@/hooks/use-controllable-state';\n\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// Base Popover Components (from ui/popover.tsx)\n// ============================================\n\nfunction PopoverRoot({ ...props }: PopoverPrimitive.Root.Props) {\n return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverPopup({\n className,\n align = 'center',\n alignOffset = 0,\n side = 'bottom',\n sideOffset = 4,\n anchor,\n collisionAvoidance,\n positionMethod,\n ...props\n}: PopoverPrimitive.Popup.Props &\n Pick<\n PopoverPrimitive.Positioner.Props,\n | 'align'\n | 'alignOffset'\n | 'side'\n | 'sideOffset'\n | 'anchor'\n | 'collisionAvoidance'\n | 'positionMethod'\n >) {\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n anchor={anchor}\n collisionAvoidance={collisionAvoidance}\n positionMethod={positionMethod}\n className=\"isolate z-50\"\n >\n <PopoverPrimitive.Popup\n data-slot=\"popover-popup\"\n className={cn(\n 'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none ring-foreground/10 flex flex-col gap-4 rounded-md p-4 text-sm shadow-lg ring-1 duration-150 z-50 w-72 origin-(--transform-origin) outline-hidden',\n className,\n )}\n {...props}\n />\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n );\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"popover-header\"\n className={cn('flex flex-col gap-1 text-sm', className)}\n {...props}\n />\n );\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n return (\n <PopoverPrimitive.Title\n data-slot=\"popover-title\"\n className={cn(\n 'font-medium delight-stagger motion-reduce:!animate-none',\n className,\n )}\n {...props}\n style={{ '--delight-delay': '50ms' } as React.CSSProperties}\n />\n );\n}\n\nfunction PopoverDescription({\n className,\n ...props\n}: PopoverPrimitive.Description.Props) {\n return (\n <PopoverPrimitive.Description\n data-slot=\"popover-description\"\n className={cn(\n 'text-muted-foreground delight-stagger motion-reduce:!animate-none',\n className,\n )}\n {...props}\n style={{ '--delight-delay': '100ms' } as React.CSSProperties}\n />\n );\n}\n\n// ============================================\n// Popover Wrapper (with controlled/uncontrolled support)\n// ============================================\n\nexport interface PopoverProps\n extends Omit<\n React.ComponentProps<typeof PopoverRoot>,\n 'onOpenChange' | 'children'\n > {\n /** The element that triggers the popover (required) */\n trigger: React.ReactElement;\n /** Popover content (typically Popover.Popup component) */\n children?: React.ReactNode;\n /** Controlled open state. When provided, component is controlled. */\n open?: boolean;\n /** Initial open state for uncontrolled mode */\n defaultOpen?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n}\n\nfunction Popover({\n trigger,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n children,\n ...props\n}: PopoverProps) {\n const [open, handleOpenChange] = useControllableState({\n value: controlledOpen,\n defaultValue: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <PopoverRoot open={open} onOpenChange={handleOpenChange} {...props}>\n <PopoverTrigger render={trigger} />\n {children}\n </PopoverRoot>\n );\n}\n\n// Type exports\nexport type PopoverTriggerProps = PopoverPrimitive.Trigger.Props;\nexport type PopoverPopupProps = PopoverPrimitive.Popup.Props &\n Pick<\n PopoverPrimitive.Positioner.Props,\n | 'align'\n | 'alignOffset'\n | 'side'\n | 'sideOffset'\n | 'anchor'\n | 'collisionAvoidance'\n | 'positionMethod'\n >;\nexport type PopoverHeaderProps = React.ComponentProps<'div'>;\nexport type PopoverTitleProps = PopoverPrimitive.Title.Props;\nexport type PopoverDescriptionProps = PopoverPrimitive.Description.Props;\n\nPopover.displayName = 'Popover';\nPopoverRoot.displayName = 'Popover.Root';\nPopoverTrigger.displayName = 'Popover.Trigger';\nPopoverPopup.displayName = 'Popover.Popup';\nPopoverHeader.displayName = 'Popover.Header';\nPopoverTitle.displayName = 'Popover.Title';\nPopoverDescription.displayName = 'Popover.Description';\n\n/**\n * Popover component with dot notation for compound parts.\n *\n * @example\n * ```tsx\n * <Popover trigger={<Button>Open</Button>}>\n * <Popover.Popup>\n * <Popover.Header>\n * <Popover.Title>Title</Popover.Title>\n * <Popover.Description>Description</Popover.Description>\n * </Popover.Header>\n * </Popover.Popup>\n * </Popover>\n * ```\n */\nconst PopoverCompound = Object.assign(Popover, {\n Root: PopoverRoot,\n Trigger: PopoverTrigger,\n Popup: PopoverPopup,\n Header: PopoverHeader,\n Title: PopoverTitle,\n Description: PopoverDescription,\n});\n\nexport {\n PopoverCompound as Popover,\n PopoverDescription,\n PopoverHeader,\n PopoverPopup,\n PopoverRoot,\n PopoverTitle,\n PopoverTrigger,\n};\n"],"mappings":";;;;;;AAYA,SAAS,YAAY,EAAE,GAAG,SAAsC;CAC9D,OAAO,oBAAC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,EAAE,GAAG,SAAyC;CACpE,OAAO,oBAAC,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,aAAa,EACpB,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,QACA,oBACA,gBACA,GAAG,SAWA;CACH,OACE,oBAAC,QAAiB,QAAlB,EAAA,UACE,oBAAC,QAAiB,YAAlB;EACS;EACM;EACP;EACM;EACJ;EACY;EACJ;EAChB,WAAU;YAEV,oBAAC,QAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,mfACA,SACF;GACA,GAAI;EACL,CAAA;CAC0B,CAAA,EACN,CAAA;AAE7B;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAuC;CAC3E,OACE,oBAAC,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,2DACA,SACF;EACA,GAAI;EACJ,OAAO,EAAE,mBAAmB,OAAO;CACpC,CAAA;AAEL;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACkC;CACrC,OACE,oBAAC,QAAiB,aAAlB;EACE,aAAU;EACV,WAAW,GACT,qEACA,SACF;EACA,GAAI;EACJ,OAAO,EAAE,mBAAmB,QAAQ;CACrC,CAAA;AAEL;AAuBA,SAAS,UAAQ,EACf,SACA,MAAM,gBACN,cAAc,OACd,cACA,UACA,GAAG,SACY;CACf,MAAM,CAAC,MAAM,oBAAoB,qBAAqB;EACpD,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CAED,OACE,qBAAC,aAAD;EAAmB;EAAM,cAAc;EAAkB,GAAI;YAA7D,CACE,oBAAC,gBAAD,EAAgB,QAAQ,QAAU,CAAA,GACjC,QACU;;AAEjB;AAmBA,UAAQ,cAAc;AACtB,YAAY,cAAc;AAC1B,eAAe,cAAc;AAC7B,aAAa,cAAc;AAC3B,cAAc,cAAc;AAC5B,aAAa,cAAc;AAC3B,mBAAmB,cAAc;;;;;;;;;;;;;;;;AAiBjC,IAAM,kBAAkB,OAAO,OAAO,WAAS;CAC7C,MAAM;CACN,SAAS;CACT,OAAO;CACP,QAAQ;CACR,OAAO;CACP,aAAa;AACf,CAAC"}
|