@humain/ui 2.1.63 → 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.
Files changed (160) hide show
  1. package/dist/components/organisms/ai/AIToolCall/AIToolCall.d.ts +9 -3
  2. package/dist/components/organisms/ai/AIToolRun/index.d.ts +1 -1
  3. package/dist/components/organisms/ai/AIToolRun/validation.d.ts +24 -3
  4. package/dist/components/organisms/ai/_shared/format-ai-duration.d.ts +1 -0
  5. package/dist/components/organisms/ai/_shared/workflow-step-renderer.d.ts +1 -0
  6. package/dist/index.js +52 -52
  7. package/dist/index151.js +1 -1
  8. package/dist/index174.js +7 -339
  9. package/dist/index174.js.map +1 -1
  10. package/dist/index175.js +310 -137
  11. package/dist/index175.js.map +1 -1
  12. package/dist/index176.js +148 -174
  13. package/dist/index176.js.map +1 -1
  14. package/dist/index177.js +186 -78
  15. package/dist/index177.js.map +1 -1
  16. package/dist/index178.js +74 -124
  17. package/dist/index178.js.map +1 -1
  18. package/dist/index179.js +133 -1
  19. package/dist/index179.js.map +1 -0
  20. package/dist/index180.js +2 -201
  21. package/dist/index181.js +201 -0
  22. package/dist/{index180.js.map → index181.js.map} +1 -1
  23. package/dist/index183.js +130 -166
  24. package/dist/index183.js.map +1 -1
  25. package/dist/index184.js +195 -983
  26. package/dist/index184.js.map +1 -1
  27. package/dist/index185.js +1069 -369
  28. package/dist/index185.js.map +1 -1
  29. package/dist/index186.js +395 -197
  30. package/dist/index186.js.map +1 -1
  31. package/dist/index187.js +198 -243
  32. package/dist/index187.js.map +1 -1
  33. package/dist/index188.js +263 -3
  34. package/dist/index188.js.map +1 -1
  35. package/dist/index189.js +3 -209
  36. package/dist/index189.js.map +1 -1
  37. package/dist/index190.js +190 -777
  38. package/dist/index190.js.map +1 -1
  39. package/dist/index191.js +771 -252
  40. package/dist/index191.js.map +1 -1
  41. package/dist/index192.js +250 -65
  42. package/dist/index192.js.map +1 -1
  43. package/dist/index193.js +72 -523
  44. package/dist/index193.js.map +1 -1
  45. package/dist/index194.js +537 -144
  46. package/dist/index194.js.map +1 -1
  47. package/dist/index195.js +139 -720
  48. package/dist/index195.js.map +1 -1
  49. package/dist/index196.js +707 -167
  50. package/dist/index196.js.map +1 -1
  51. package/dist/index197.js +175 -151
  52. package/dist/index197.js.map +1 -1
  53. package/dist/index198.js +152 -487
  54. package/dist/index198.js.map +1 -1
  55. package/dist/index199.js +472 -225
  56. package/dist/index199.js.map +1 -1
  57. package/dist/index200.js +236 -260
  58. package/dist/index200.js.map +1 -1
  59. package/dist/index201.js +265 -215
  60. package/dist/index201.js.map +1 -1
  61. package/dist/index202.js +207 -307
  62. package/dist/index202.js.map +1 -1
  63. package/dist/index203.js +302 -135
  64. package/dist/index203.js.map +1 -1
  65. package/dist/index204.js +140 -271
  66. package/dist/index204.js.map +1 -1
  67. package/dist/index205.js +263 -253
  68. package/dist/index205.js.map +1 -1
  69. package/dist/index206.js +244 -137
  70. package/dist/index206.js.map +1 -1
  71. package/dist/index207.js +100 -238
  72. package/dist/index207.js.map +1 -1
  73. package/dist/index208.js +278 -74
  74. package/dist/index208.js.map +1 -1
  75. package/dist/index209.js +56 -97
  76. package/dist/index209.js.map +1 -1
  77. package/dist/index210.js +142 -47
  78. package/dist/index210.js.map +1 -1
  79. package/dist/index211.js +38 -84
  80. package/dist/index211.js.map +1 -1
  81. package/dist/index212.js +72 -252
  82. package/dist/index212.js.map +1 -1
  83. package/dist/index213.js +274 -26
  84. package/dist/index213.js.map +1 -1
  85. package/dist/index214.js +29 -94
  86. package/dist/index214.js.map +1 -1
  87. package/dist/index215.js +98 -25
  88. package/dist/index215.js.map +1 -1
  89. package/dist/index216.js +20 -565
  90. package/dist/index216.js.map +1 -1
  91. package/dist/index217.js +564 -17
  92. package/dist/index217.js.map +1 -1
  93. package/dist/index218.js +20 -23
  94. package/dist/index218.js.map +1 -1
  95. package/dist/index219.js +20 -95
  96. package/dist/index219.js.map +1 -1
  97. package/dist/index220.js +92 -88
  98. package/dist/index220.js.map +1 -1
  99. package/dist/index221.js +97 -29
  100. package/dist/index221.js.map +1 -1
  101. package/dist/index222.js +24 -470
  102. package/dist/index222.js.map +1 -1
  103. package/dist/index223.js +446 -196
  104. package/dist/index223.js.map +1 -1
  105. package/dist/index224.js +199 -729
  106. package/dist/index224.js.map +1 -1
  107. package/dist/index225.js +750 -61
  108. package/dist/index225.js.map +1 -1
  109. package/dist/index226.js +58 -181
  110. package/dist/index226.js.map +1 -1
  111. package/dist/index227.js +175 -259
  112. package/dist/index227.js.map +1 -1
  113. package/dist/index228.js +246 -172
  114. package/dist/index228.js.map +1 -1
  115. package/dist/index229.js +195 -32
  116. package/dist/index229.js.map +1 -1
  117. package/dist/index230.js +12 -40
  118. package/dist/index230.js.map +1 -1
  119. package/dist/index231.js +23 -26
  120. package/dist/index231.js.map +1 -1
  121. package/dist/index232.js +45 -22
  122. package/dist/index232.js.map +1 -1
  123. package/dist/index233.js +27 -48
  124. package/dist/index233.js.map +1 -1
  125. package/dist/index234.js +52 -26
  126. package/dist/index234.js.map +1 -1
  127. package/dist/index235.js +40 -225
  128. package/dist/index235.js.map +1 -1
  129. package/dist/index236.js +217 -39
  130. package/dist/index236.js.map +1 -1
  131. package/dist/index237.js +50 -0
  132. package/dist/index237.js.map +1 -0
  133. package/dist/styles.css +1 -1
  134. package/dist/wc/AIToolCall.js +218 -0
  135. package/dist/wc/AIToolCall.js.map +1 -0
  136. package/dist/wc/hf-ai-tool-call.js +34 -219
  137. package/dist/wc/hf-ai-tool-call.js.map +1 -1
  138. package/dist/wc/hf-ai-tool-run.js +673 -576
  139. package/dist/wc/hf-ai-tool-run.js.map +1 -1
  140. package/dist/wc/workflow-step-renderer.js +79 -78
  141. package/dist/wc/workflow-step-renderer.js.map +1 -1
  142. package/dist/wc-react/AIToolCall.js +218 -0
  143. package/dist/wc-react/AIToolCall.js.map +1 -0
  144. package/dist/wc-react/hf-ai-tool-call.js +32 -217
  145. package/dist/wc-react/hf-ai-tool-call.js.map +1 -1
  146. package/dist/wc-react/hf-ai-tool-run.js +698 -601
  147. package/dist/wc-react/hf-ai-tool-run.js.map +1 -1
  148. package/dist/wc-react/workflow-step-renderer.js +58 -57
  149. package/dist/wc-react/workflow-step-renderer.js.map +1 -1
  150. package/package.json +1 -1
  151. package/skills/humain-ui/SKILL.md +1 -1
  152. package/skills/humain-ui-wc/SKILL.md +1 -1
  153. package/skills/humain-ui-wc.skill +0 -0
  154. package/skills/humain-ui.skill +0 -0
  155. package/dist/index182.js +0 -143
  156. package/dist/index182.js.map +0 -1
  157. package/dist/wc/wrench.js +0 -10
  158. package/dist/wc/wrench.js.map +0 -1
  159. package/dist/wc-react/wrench.js +0 -10
  160. 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 { useControllableState } from "./index12.js";
4
- import { jsx, jsxs } from "react/jsx-runtime";
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",
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
- function PopoverTrigger({ ...props }) {
14
- return /* @__PURE__ */ jsx(Popover.Trigger, {
15
- "data-slot": "popover-trigger",
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
- 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
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
- 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";
37
+ HoverCardPopup.displayName = "HoverCard.Popup";
79
38
  /**
80
- * Popover component with dot notation for compound parts.
39
+ * HoverCard component with dot notation for compound parts.
81
40
  *
82
41
  * @example
83
42
  * ```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>
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 PopoverCompound = Object.assign(Popover$1, {
95
- Root: PopoverRoot,
96
- Trigger: PopoverTrigger,
97
- Popup: PopoverPopup,
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 { PopoverCompound as Popover, PopoverDescription, PopoverHeader, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger };
57
+ export { HoverCardCompound as HoverCard, HoverCardPopup, HoverCardTrigger };
104
58
 
105
59
  //# sourceMappingURL=index211.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index211.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"}
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 { Dialog } from "@base-ui/react/dialog";
10
- //#region src/components/organisms/overlays/Sheet/Sheet.tsx
11
- var closeButtonVariants = cva("", {
12
- variants: { size: {
13
- sm: "",
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
- Portal.displayName = "Sheet.Portal";
71
- var Backdrop = React.forwardRef(function Backdrop({ className, disableAnimation, disableBackdropBlur, ...props }, ref) {
72
- return /* @__PURE__ */ jsx(Dialog.Backdrop, {
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
- PopupBase.displayName = "PopupBase";
103
- function HeaderBase({ className, ...props }) {
104
- return /* @__PURE__ */ jsx("div", {
105
- "data-slot": "sheet-header",
106
- className: cn("gap-1.5 p-4 flex flex-col", className),
107
- ...props
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
- HeaderBase.displayName = "HeaderBase";
111
- function FooterBase({ className, ...props }) {
36
+ function PopoverHeader({ className, ...props }) {
112
37
  return /* @__PURE__ */ jsx("div", {
113
- "data-slot": "sheet-footer",
114
- className: cn("gap-2 p-4 mt-auto flex flex-col", className),
38
+ "data-slot": "popover-header",
39
+ className: cn("flex flex-col gap-1 text-sm", className),
115
40
  ...props
116
41
  });
117
42
  }
118
- FooterBase.displayName = "FooterBase";
119
- function TitleBase({ className, ...props }) {
120
- return /* @__PURE__ */ jsx(Dialog.Title, {
121
- "data-slot": "sheet-title",
122
- className: cn("text-foreground font-medium", className),
123
- ...props
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
- TitleBase.displayName = "TitleBase";
127
- function DescriptionBase({ className, ...props }) {
128
- return /* @__PURE__ */ jsx(Dialog.Description, {
129
- "data-slot": "sheet-description",
130
- className: cn("text-muted-foreground text-sm", className),
131
- ...props
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
- DescriptionBase.displayName = "DescriptionBase";
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(Root, {
65
+ return /* @__PURE__ */ jsxs(PopoverRoot, {
142
66
  open,
143
67
  onOpenChange: handleOpenChange,
144
68
  ...props,
145
- children: [trigger && /* @__PURE__ */ jsx(Trigger, { render: trigger }), 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
- Footer.displayName = "Sheet.Footer";
266
- var Sheet = Object.assign(SheetComponent, {
267
- Root,
268
- Trigger,
269
- Portal,
270
- Backdrop,
271
- Viewport,
272
- Popup,
273
- Header,
274
- Body,
275
- Footer,
276
- Title,
277
- Description,
278
- Close,
279
- Section,
280
- Divider
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 { Sheet, Backdrop as SheetBackdrop, Body as SheetBody, Close as SheetClose, Description as SheetDescription, Divider as SheetDivider, Footer as SheetFooter, Header as SheetHeader, Popup as SheetPopup, Portal as SheetPortal, Root as SheetRoot, Section as SheetSection, Title as SheetTitle, Trigger as SheetTrigger, Viewport as SheetViewport };
103
+ export { PopoverCompound as Popover, PopoverDescription, PopoverHeader, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger };
284
104
 
285
105
  //# sourceMappingURL=index212.js.map
@@ -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"}