@keboola/design 10.1.0 → 11.0.1

package/dist/PageToolbar-0_1OBzaZ.js

@@ -0,0 +1,153 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { ChevronDown, Plus, X } from "./icons-Cek151jC.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { Popover } from "./Popover-Ca0V6AD1.js";
+import { Badge } from "./Badge-Ch26CXoP.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/PageToolbar/PageToolbarToken.tsx
+/**
+* Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`
+* popover trigger for editing values and an `×` dismiss button. The popover content
+* is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).
+*/
+const PageToolbarToken = ({ children, popover, onRemove, removeAriaLabel, ...props }) => /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(Badge, {
+	...props,
+	asChild: true,
+	variant: "pill",
+	color: "blue-inverse",
+	suffix: /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "inline",
+		size: "icon-2xs",
+		"aria-label": removeAriaLabel,
+		onClick: onRemove,
+		children: /* @__PURE__ */ jsx(X, { className: "tw:size-3" })
+	}),
+	children: /* @__PURE__ */ jsxs(Popover.Trigger, {
+		type: "button",
+		className: "tw:inline-flex tw:cursor-pointer tw:items-center tw:gap-1 tw:bg-inherit tw:text-inherit tailwindcss-preflight",
+		children: [children, /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-3" })]
+	})
+}), /* @__PURE__ */ jsx(Popover.Content, {
+	align: "start",
+	children: popover
+})] });
+//#endregion
+//#region src/blocks/PageToolbar/PageToolbar.tsx
+const Root = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:w-full", className),
+	...props,
+	children
+});
+const Search = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:mr-auto tw:flex tw:items-center tw:gap-2 tw:w-full tw:sm:w-auto tw:sm:min-w-64 tw:sm:max-w-md", className),
+	...props,
+	children
+});
+const Right = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:flex tw:flex-wrap tw:items-center tw:gap-2", className),
+	...props,
+	children
+});
+const ControlGroup = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:flex tw:items-center tw:gap-2", className),
+	...props,
+	children
+});
+const ActiveFilters = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:basis-full", className),
+	...props,
+	children
+});
+const Chip = ({ children, onRemove, removeAriaLabel, ...props }) => /* @__PURE__ */ jsx(Badge, {
+	...props,
+	variant: "pill",
+	color: "blue-inverse",
+	suffix: /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "inline",
+		size: "icon-2xs",
+		"aria-label": removeAriaLabel,
+		onClick: onRemove,
+		children: /* @__PURE__ */ jsx(X, { className: "tw:size-3" })
+	}),
+	children
+});
+const AddFilter = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(Button, {
+	variant: "invisible",
+	size: "small",
+	className: cn("tw:gap-1.5", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(Plus, { className: "tw:size-4" }), children ?? "Add filter"]
+});
+const Clear = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Button, {
+	variant: "invisible",
+	size: "small",
+	className: cn("tw:ml-auto", className),
+	...props,
+	children: children ?? "Clear all"
+});
+/**
+* Two-row toolbar for index pages — search on the left, filter / sort / utility / view
+* controls on the right, an optional Active Filters row below for filter chips or tokens.
+*
+* **When to use:** every index page that supports search or filtering. Hosts inside
+* `PageLayout` as the search / filter row, between `PageLayout.Header` and `PageLayout.Content`.
+* **When NOT to use:** detail pages, form pages, or anywhere there is no search / filter
+* surface. For routing-based tab rows reach for `PageLayout.Tabs`.
+*
+* **Recommended composition (enforced at the call site):**
+*
+* - `Search` sits on the left; the right cluster auto-aligns via flex.
+* - Right cluster order: `Filters` → `Sort` → `Actions` → `View`. View controls are always
+*   the final control group — do not render any control after `View`.
+* - `ActiveFilters` is the second row. Render it only when one or more filters are active.
+* - `Clear` self-aligns to the far right of `ActiveFilters`.
+*
+* The block is variant-agnostic: render filter chips (Standard variant, non-editable) or
+* tokens (Query Builder variant, editable) into `ActiveFilters` as plain children — do not
+* mix the two in one toolbar.
+*
+* @see https://github.com/evviku/design-system-docs/blob/main/docs/patterns/toolbar/toolbar.md
+*/
+const PageToolbar = Object.assign(Root, {
+	/** Left slot — typically a `SearchInput`. */
+	Search,
+	/** Right cluster — host the four control groups below in the recommended order. */
+	Right,
+	/** Filter controls (`Combobox`, `Select`, `DatePicker`). */
+	Filters: ControlGroup,
+	/** Sort control. */
+	Sort: ControlGroup,
+	/** Utility actions (Export, Refresh, …). */
+	Actions: ControlGroup,
+	/** View toggle (List / Grid). Always render last in the right cluster. */
+	View: ControlGroup,
+	/**
+	* Active filters row. Render only when one or more filters are active. Pass filter chips
+	* (Standard variant) or tokens (Query Builder variant) as children, optionally followed
+	* by `AddFilter` / `Clear`.
+	*/
+	ActiveFilters,
+	/** Non-editable filter chip (Standard variant) — `Badge` pill with a dismiss button. */
+	Chip,
+	/**
+	* Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`
+	* popover trigger for editing values and an `×` dismiss button. The popover content
+	* is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).
+	*/
+	Token: PageToolbarToken,
+	/** "+ Add filter" action — typically rendered after the chips/tokens in `ActiveFilters`. */
+	AddFilter,
+	/** "Clear all" action — self-aligns to the far right of `ActiveFilters`. */
+	Clear
+});
+//#endregion
+export { PageToolbar };
+
+//# sourceMappingURL=PageToolbar-0_1OBzaZ.js.map

package/dist/PageToolbar-0_1OBzaZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageToolbar-0_1OBzaZ.js","names":[],"sources":["../src/blocks/PageToolbar/PageToolbarToken.tsx","../src/blocks/PageToolbar/PageToolbar.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Popover } from '../../components/Popover';\nimport { ChevronDown, X } from '../../icons';\n\ntype PageToolbarTokenProps = Omit<\n  ComponentPropsWithoutRef<typeof Badge>,\n  'variant' | 'color' | 'suffix' | 'children' | 'asChild' | 'popover'\n> & {\n  children: ReactNode;\n  /** Popover content rendered when the chevron-down trigger is clicked — typically a value editor. */\n  popover: ReactNode;\n  onRemove: () => void;\n  removeAriaLabel: string;\n};\n\n/**\n * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`\n * popover trigger for editing values and an `×` dismiss button. The popover content\n * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).\n */\nexport const PageToolbarToken = ({\n  children,\n  popover,\n  onRemove,\n  removeAriaLabel,\n  ...props\n}: PageToolbarTokenProps) => (\n  <Popover>\n    <Badge\n      {...props}\n      asChild\n      variant=\"pill\"\n      color=\"blue-inverse\"\n      suffix={\n        <Button\n          type=\"button\"\n          variant=\"inline\"\n          size=\"icon-2xs\"\n          aria-label={removeAriaLabel}\n          onClick={onRemove}\n        >\n          <X className=\"tw:size-3\" />\n        </Button>\n      }\n    >\n      <Popover.Trigger\n        type=\"button\"\n        className=\"tw:inline-flex tw:cursor-pointer tw:items-center tw:gap-1 tw:bg-inherit tw:text-inherit tailwindcss-preflight\"\n      >\n        {children}\n        <ChevronDown className=\"tw:size-3\" />\n      </Popover.Trigger>\n    </Badge>\n    <Popover.Content align=\"start\">{popover}</Popover.Content>\n  </Popover>\n);\n","import type { ComponentProps, ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Plus, X } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PageToolbarToken } from './PageToolbarToken';\n\ntype DivProps = ComponentProps<'div'>;\n\nconst Root = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:w-full', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst Search = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn(\n      'tw:mr-auto tw:flex tw:items-center tw:gap-2 tw:w-full tw:sm:w-auto tw:sm:min-w-64 tw:sm:max-w-md',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst Right = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst ControlGroup = ({ ref, className, children, ...props }: DivProps) => (\n  <div ref={ref} className={cn('tw:flex tw:items-center tw:gap-2', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst ActiveFilters = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:basis-full', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ChipProps = Omit<\n  ComponentPropsWithoutRef<typeof Badge>,\n  'variant' | 'color' | 'suffix' | 'children'\n> & {\n  children: ReactNode;\n  onRemove: () => void;\n  removeAriaLabel: string;\n};\n\nconst Chip = ({ children, onRemove, removeAriaLabel, ...props }: ChipProps) => (\n  <Badge\n    {...props}\n    variant=\"pill\"\n    color=\"blue-inverse\"\n    suffix={\n      <Button\n        type=\"button\"\n        variant=\"inline\"\n        size=\"icon-2xs\"\n        aria-label={removeAriaLabel}\n        onClick={onRemove}\n      >\n        <X className=\"tw:size-3\" />\n      </Button>\n    }\n  >\n    {children}\n  </Badge>\n);\n\ntype ActionProps = ComponentPropsWithoutRef<typeof Button>;\n\nconst AddFilter = ({ className, children, ...props }: ActionProps) => (\n  <Button variant=\"invisible\" size=\"small\" className={cn('tw:gap-1.5', className)} {...props}>\n    <Plus className=\"tw:size-4\" />\n    {children ?? 'Add filter'}\n  </Button>\n);\n\nconst Clear = ({ className, children, ...props }: ActionProps) => (\n  <Button variant=\"invisible\" size=\"small\" className={cn('tw:ml-auto', className)} {...props}>\n    {children ?? 'Clear all'}\n  </Button>\n);\n\n/**\n * Two-row toolbar for index pages — search on the left, filter / sort / utility / view\n * controls on the right, an optional Active Filters row below for filter chips or tokens.\n *\n * **When to use:** every index page that supports search or filtering. Hosts inside\n * `PageLayout` as the search / filter row, between `PageLayout.Header` and `PageLayout.Content`.\n * **When NOT to use:** detail pages, form pages, or anywhere there is no search / filter\n * surface. For routing-based tab rows reach for `PageLayout.Tabs`.\n *\n * **Recommended composition (enforced at the call site):**\n *\n * - `Search` sits on the left; the right cluster auto-aligns via flex.\n * - Right cluster order: `Filters` → `Sort` → `Actions` → `View`. View controls are always\n *   the final control group — do not render any control after `View`.\n * - `ActiveFilters` is the second row. Render it only when one or more filters are active.\n * - `Clear` self-aligns to the far right of `ActiveFilters`.\n *\n * The block is variant-agnostic: render filter chips (Standard variant, non-editable) or\n * tokens (Query Builder variant, editable) into `ActiveFilters` as plain children — do not\n * mix the two in one toolbar.\n *\n * @see https://github.com/evviku/design-system-docs/blob/main/docs/patterns/toolbar/toolbar.md\n */\nexport const PageToolbar = Object.assign(Root, {\n  /** Left slot — typically a `SearchInput`. */\n  Search,\n  /** Right cluster — host the four control groups below in the recommended order. */\n  Right,\n  /** Filter controls (`Combobox`, `Select`, `DatePicker`). */\n  Filters: ControlGroup,\n  /** Sort control. */\n  Sort: ControlGroup,\n  /** Utility actions (Export, Refresh, …). */\n  Actions: ControlGroup,\n  /** View toggle (List / Grid). Always render last in the right cluster. */\n  View: ControlGroup,\n  /**\n   * Active filters row. Render only when one or more filters are active. Pass filter chips\n   * (Standard variant) or tokens (Query Builder variant) as children, optionally followed\n   * by `AddFilter` / `Clear`.\n   */\n  ActiveFilters,\n  /** Non-editable filter chip (Standard variant) — `Badge` pill with a dismiss button. */\n  Chip,\n  /**\n   * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`\n   * popover trigger for editing values and an `×` dismiss button. The popover content\n   * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).\n   */\n  Token: PageToolbarToken,\n  /** \"+ Add filter\" action — typically rendered after the chips/tokens in `ActiveFilters`. */\n  AddFilter,\n  /** \"Clear all\" action — self-aligns to the far right of `ActiveFilters`. */\n  Clear,\n});\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,oBAAoB,EAC/B,UACA,SACA,UACA,iBACA,GAAG,YAEH,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,OAAD;CACE,GAAI;CACJ,SAAA;CACA,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGV,UAAA,qBAAC,QAAQ,SAAT;EACE,MAAK;EACL,WAAU;EAFZ,UAAA,CAIG,UACD,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,CACrB;;AACZ,CAAA,GACP,oBAAC,QAAQ,SAAT;CAAiB,OAAM;CAAS,UAAA;AAAyB,CAAA,CAClD,EAAA,CAAA;;;AC9CX,MAAM,QAAQ,EAAE,KAAK,WAAW,UAAU,GAAG,YAC3C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,2DAA2D,SAAS;CAClF,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,UAAU,EAAE,KAAK,WAAW,UAAU,GAAG,YAC7C,oBAAC,OAAD;CACO;CACL,WAAW,GACT,oGACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,SAAS,EAAE,KAAK,WAAW,UAAU,GAAG,YAC5C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,gBAAgB,EAAE,KAAK,WAAW,UAAU,GAAG,YACnD,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,oCAAoC,SAAS;CAAG,GAAI;CAC9E;AACE,CAAA;AAGP,MAAM,iBAAiB,EAAE,KAAK,WAAW,UAAU,GAAG,YACpD,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,+DAA+D,SAAS;CACtF,GAAI;CAEH;AACE,CAAA;AAYP,MAAM,QAAQ,EAAE,UAAU,UAAU,iBAAiB,GAAG,YACtD,oBAAC,OAAD;CACE,GAAI;CACJ,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGT;AACI,CAAA;AAKT,MAAM,aAAa,EAAE,WAAW,UAAU,GAAG,YAC3C,qBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAArF,UAAA,CACE,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,GAC5B,YAAY,YACP;;AAGV,MAAM,SAAS,EAAE,WAAW,UAAU,GAAG,YACvC,oBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAClF,UAAA,YAAY;AACP,CAAA;;;;;;;;;;;;;;;;;;;;;;;;AA0BV,MAAa,cAAc,OAAO,OAAO,MAAM;;CAE7C;;CAEA;;CAEA,SAAS;;CAET,MAAM;;CAEN,SAAS;;CAET,MAAM;;;;;;CAMN;;CAEA;;;;;;CAMA,OAAO;;CAEP;;CAEA;AACF,CAAC"}

package/dist/Pagination-CM_Rszz-.js

@@ -0,0 +1,70 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { ChevronLeft, ChevronRight, Ellipsis } from "./icons-Cek151jC.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Pagination/PaginationButton.tsx
+const PaginationButton = ({ ref, active: isActive = false, className, children, size = "icon", ...props }) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	ref,
+	variant: "invisible",
+	size,
+	"data-slot": "pagination-link",
+	"aria-current": isActive ? "page" : void 0,
+	"data-active": isActive,
+	className: cn("tw:data-[active=true]:bg-accent", "tw:data-[active=true]:text-accent-foreground", "tw:data-[active=true]:border-accent", className),
+	children
+});
+//#endregion
+//#region src/components/Pagination/PaginationContent.tsx
+const PaginationContent = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+	...props,
+	className: cn("tw:flex", "tw:flex-row", "tw:items-center", "tw:gap-1", className)
+});
+//#endregion
+//#region src/components/Pagination/PaginationEllipsis.tsx
+const PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	className: cn("tw:flex", "tw:p-2.5", "tw:items-center", "tw:justify-center", "tw:text-foreground", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-4", className),
+	...props,
+	children: /* @__PURE__ */ jsx(Ellipsis, {})
+});
+//#endregion
+//#region src/components/Pagination/PaginationItem.tsx
+const PaginationItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	className: cn("tw:list-none", className),
+	...props
+});
+//#endregion
+//#region src/components/Pagination/PaginationNext.tsx
+const PaginationNext = ({ children, className, ...props }) => /* @__PURE__ */ jsxs(PaginationButton, {
+	...props,
+	"aria-label": "Go to next page",
+	size: "medium",
+	className: cn("tw:flex-row-reverse", className),
+	children: [/* @__PURE__ */ jsx(ChevronRight, { className: "tw:size-5" }), children ?? "Next"]
+});
+//#endregion
+//#region src/components/Pagination/PaginationPrevious.tsx
+const PaginationPrevious = ({ children, ...props }) => /* @__PURE__ */ jsxs(PaginationButton, {
+	...props,
+	size: "medium",
+	"aria-label": "Go to previous page",
+	children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "tw:size-5" }), children ?? "Previous"]
+});
+//#endregion
+//#region src/components/Pagination/Pagination.tsx
+const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", {
+	...props,
+	"aria-label": "pagination",
+	className: cn("tailwindcss-preflight", "tw:mx-auto", "tw:flex", "tw:w-full", "tw:justify-center", className)
+});
+Pagination.Content = PaginationContent;
+Pagination.Item = PaginationItem;
+Pagination.Button = PaginationButton;
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
+Pagination.Ellipsis = PaginationEllipsis;
+//#endregion
+export { Pagination };
+
+//# sourceMappingURL=Pagination-CM_Rszz-.js.map

package/dist/Pagination-CM_Rszz-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination-CM_Rszz-.js","names":[],"sources":["../src/components/Pagination/PaginationButton.tsx","../src/components/Pagination/PaginationContent.tsx","../src/components/Pagination/PaginationEllipsis.tsx","../src/components/Pagination/PaginationItem.tsx","../src/components/Pagination/PaginationNext.tsx","../src/components/Pagination/PaginationPrevious.tsx","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype Props = {\n  active?: boolean;\n} & Omit<ComponentProps<typeof Button>, 'variant'>;\n\nexport const PaginationButton = ({\n  ref,\n  active: isActive = false,\n  className,\n  children,\n  size = 'icon',\n  ...props\n}: Props) => (\n  <Button\n    {...props}\n    ref={ref}\n    variant=\"invisible\"\n    size={size}\n    data-slot=\"pagination-link\"\n    aria-current={isActive ? 'page' : undefined}\n    data-active={isActive}\n    className={cn(\n      'tw:data-[active=true]:bg-accent',\n      'tw:data-[active=true]:text-accent-foreground',\n      'tw:data-[active=true]:border-accent',\n      className,\n    )}\n  >\n    {children}\n  </Button>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'ul'>;\n\nexport const PaginationContent = ({ className, ...props }: Props) => (\n  <ul\n    {...props}\n    className={cn('tw:flex', 'tw:flex-row', 'tw:items-center', 'tw:gap-1', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { Ellipsis } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const PaginationEllipsis = ({ className, ...props }: Props) => (\n  <span\n    aria-hidden=\"true\"\n    className={cn(\n      // layout\n      'tw:flex',\n      'tw:p-2.5',\n      'tw:items-center',\n      'tw:justify-center',\n\n      'tw:text-foreground',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      className,\n    )}\n    {...props}\n  >\n    <Ellipsis />\n  </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const PaginationItem = ({ className, ...props }: Props) => (\n  <li className={cn('tw:list-none', className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronRight } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationNext = ({ children, className, ...props }: Props) => (\n  <PaginationButton\n    {...props}\n    aria-label=\"Go to next page\"\n    size=\"medium\"\n    className={cn('tw:flex-row-reverse', className)}\n  >\n    <ChevronRight className=\"tw:size-5\" />\n    {children ?? 'Next'}\n  </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronLeft } from '../../icons';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationPrevious = ({ children, ...props }: Props) => (\n  <PaginationButton {...props} size=\"medium\" aria-label=\"Go to previous page\">\n    <ChevronLeft className=\"tw:size-5\" />\n    {children ?? 'Previous'}\n  </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\nimport { PaginationContent } from './PaginationContent';\nimport { PaginationEllipsis } from './PaginationEllipsis';\nimport { PaginationItem } from './PaginationItem';\nimport { PaginationNext } from './PaginationNext';\nimport { PaginationPrevious } from './PaginationPrevious';\n\ntype Props = ComponentProps<'nav'>;\n\nexport const Pagination = ({ className, ...props }: Props) => (\n  <nav\n    {...props}\n    aria-label=\"pagination\"\n    className={cn(\n      'tailwindcss-preflight',\n      'tw:mx-auto',\n      'tw:flex',\n      'tw:w-full',\n      'tw:justify-center',\n      className,\n    )}\n  />\n);\n\nPagination.Content = PaginationContent;\nPagination.Item = PaginationItem;\nPagination.Button = PaginationButton;\nPagination.Previous = PaginationPrevious;\nPagination.Next = PaginationNext;\nPagination.Ellipsis = PaginationEllipsis;\n"],"mappings":";;;;;AASA,MAAa,oBAAoB,EAC/B,KACA,QAAQ,WAAW,OACnB,WACA,UACA,OAAO,QACP,GAAG,YAEH,oBAAC,QAAD;CACE,GAAI;CACC;CACL,SAAQ;CACF;CACN,aAAU;CACV,gBAAc,WAAW,SAAS,KAAA;CAClC,eAAa;CACb,WAAW,GACT,mCACA,gDACA,uCACA,SACF;CAEC;AACK,CAAA;;;AC3BV,MAAa,qBAAqB,EAAE,WAAW,GAAG,YAChD,oBAAC,MAAD;CACE,GAAI;CACJ,WAAW,GAAG,WAAW,eAAe,mBAAmB,YAAY,SAAS;AACjF,CAAA;;;ACHH,MAAa,sBAAsB,EAAE,WAAW,GAAG,YACjD,oBAAC,QAAD;CACE,eAAY;CACZ,WAAW,GAET,WACA,YACA,mBACA,qBAEA,sBACA,gDACA,SACF;CACA,GAAI;CAEJ,UAAA,oBAAC,UAAD,CAAW,CAAA;AACP,CAAA;;;AClBR,MAAa,kBAAkB,EAAE,WAAW,GAAG,YAC7C,oBAAC,MAAD;CAAI,WAAW,GAAG,gBAAgB,SAAS;CAAG,GAAI;AAAQ,CAAA;;;ACE5D,MAAa,kBAAkB,EAAE,UAAU,WAAW,GAAG,YACvD,qBAAC,kBAAD;CACE,GAAI;CACJ,cAAW;CACX,MAAK;CACL,WAAW,GAAG,uBAAuB,SAAS;CAJhD,UAAA,CAME,oBAAC,cAAD,EAAc,WAAU,YAAa,CAAA,GACpC,YAAY,MACG;;;;ACVpB,MAAa,sBAAsB,EAAE,UAAU,GAAG,YAChD,qBAAC,kBAAD;CAAkB,GAAI;CAAO,MAAK;CAAS,cAAW;CAAtD,UAAA,CACE,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,GACnC,YAAY,UACG;;;;ACCpB,MAAa,cAAc,EAAE,WAAW,GAAG,YACzC,oBAAC,OAAD;CACE,GAAI;CACJ,cAAW;CACX,WAAW,GACT,yBACA,cACA,WACA,aACA,qBACA,SACF;AACD,CAAA;AAGH,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,WAAW"}

package/dist/Popconfirm-BGe1jLov.js

@@ -0,0 +1,170 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { Popover } from "./Popover-Ca0V6AD1.js";
+import { Slot } from "@radix-ui/react-slot";
+import { createContext, use, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Popconfirm/context.ts
+const PopconfirmContext = createContext(null);
+const PopconfirmContextProvider = PopconfirmContext;
+const usePopconfirmContext = () => {
+	const context = use(PopconfirmContext);
+	if (!context) throw new Error("usePopconfirmContext must be used within a Popconfirm");
+	return context;
+};
+//#endregion
+//#region src/components/Popconfirm/PopconfirmBody.tsx
+const PopconfirmBody = (props) => /* @__PURE__ */ jsx("div", { ...props });
+//#endregion
+//#region src/components/Popconfirm/PopconfirmCancel.tsx
+const PopconfirmCancel = ({ ref, onClick, children, asChild, className, ...props }) => {
+	const { onCancel, isLoading } = usePopconfirmContext();
+	const handleClick = (event) => {
+		onClick?.(event);
+		onCancel(event);
+	};
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		asChild: true,
+		onClick: handleClick,
+		disabled: isLoading,
+		children: asChild ? /* @__PURE__ */ jsx(Slot, {
+			...props,
+			ref,
+			className,
+			children
+		}) : /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "small",
+			...props,
+			ref,
+			className: cn(className),
+			children: children ?? "Cancel"
+		})
+	});
+};
+//#endregion
+//#region src/components/Popconfirm/PopconfirmConfirm.tsx
+const PopconfirmConfirm = ({ ref, onClick, children, asChild, className, ...props }) => {
+	const { onConfirm, variant, isLoading } = usePopconfirmContext();
+	const handleOnClick = (event) => {
+		onClick?.(event);
+		onConfirm(event);
+	};
+	const defaultLabel = (() => {
+		if (children) return children;
+		return variant === "danger" ? "Delete" : "Confirm";
+	})();
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		asChild: true,
+		onClick: handleOnClick,
+		disabled: isLoading,
+		"data-loading": isLoading,
+		children: asChild ? /* @__PURE__ */ jsx(Slot, {
+			...props,
+			ref,
+			className,
+			children
+		}) : /* @__PURE__ */ jsx(Button, {
+			size: "small",
+			variant: variant === "danger" ? "danger" : "primary",
+			...props,
+			ref,
+			className: cn("tw:flex-1", className),
+			isLoading,
+			children: defaultLabel
+		})
+	});
+};
+//#endregion
+//#region src/components/Popconfirm/PopconfirmContent.tsx
+const PopconfirmContent = ({ className, onInteractOutside, ...props }) => {
+	const { isLoading } = usePopconfirmContext();
+	const handleOnInteractOutside = (event) => {
+		if (isLoading) event.preventDefault();
+		onInteractOutside?.(event);
+	};
+	return /* @__PURE__ */ jsx(Popover.Content, {
+		...props,
+		onInteractOutside: handleOnInteractOutside,
+		className: cn("tw:flex", "tw:flex-col", "tw:gap-3", "tw:px-4", "tw:py-3", className)
+	});
+};
+//#endregion
+//#region src/components/Popconfirm/PopconfirmFooter.tsx
+const PopconfirmFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: cn("tw:flex tw:gap-2 tw:w-full", className)
+});
+//#endregion
+//#region src/components/Popconfirm/PopconfirmTrigger.tsx
+const PopconfirmTrigger = ({ onClick, ...props }) => {
+	const { enabled, onConfirm } = usePopconfirmContext();
+	const handleClick = (event) => {
+		if (!enabled) {
+			event.preventDefault();
+			onConfirm(event);
+		}
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		...props,
+		onClick: handleClick
+	});
+};
+//#endregion
+//#region src/components/Popconfirm/Popconfirm.tsx
+const noop = () => void 0;
+const Popconfirm = ({ children, onConfirm = noop, onCancel = noop, variant = "confirm", enabled = true, onOpenChange = noop, open, skipAsyncWait = false, ...rest }) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+	const confirmRef = useRef(onConfirm);
+	const cancelRef = useRef(onCancel);
+	confirmRef.current = onConfirm;
+	cancelRef.current = onCancel;
+	const handleOnOpenChange = (open) => {
+		setIsOpen(open);
+		onOpenChange(open);
+	};
+	const context = useMemo(() => ({
+		variant,
+		isLoading,
+		enabled,
+		onConfirm: (event) => {
+			const result = confirmRef.current(event);
+			if (!(result instanceof Promise) || skipAsyncWait) return;
+			event.preventDefault();
+			setIsLoading(true);
+			result.finally(() => {
+				setIsLoading(false);
+				setIsOpen(false);
+			});
+		},
+		onCancel: (event) => {
+			cancelRef.current(event);
+		}
+	}), [
+		variant,
+		isLoading,
+		enabled,
+		skipAsyncWait
+	]);
+	return /* @__PURE__ */ jsx(Popover, {
+		...rest,
+		open: open || isOpen,
+		onOpenChange: handleOnOpenChange,
+		children: /* @__PURE__ */ jsx(PopconfirmContextProvider, {
+			value: context,
+			children
+		})
+	});
+};
+Popconfirm.Confirm = PopconfirmConfirm;
+Popconfirm.Cancel = PopconfirmCancel;
+Popconfirm.Footer = PopconfirmFooter;
+Popconfirm.Content = PopconfirmContent;
+Popconfirm.Body = PopconfirmBody;
+Popconfirm.Trigger = PopconfirmTrigger;
+//#endregion
+export { Popconfirm };
+
+//# sourceMappingURL=Popconfirm-BGe1jLov.js.map

package/dist/Popconfirm-BGe1jLov.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popconfirm-BGe1jLov.js","names":[],"sources":["../src/components/Popconfirm/context.ts","../src/components/Popconfirm/PopconfirmBody.tsx","../src/components/Popconfirm/PopconfirmCancel.tsx","../src/components/Popconfirm/PopconfirmConfirm.tsx","../src/components/Popconfirm/PopconfirmContent.tsx","../src/components/Popconfirm/PopconfirmFooter.tsx","../src/components/Popconfirm/PopconfirmTrigger.tsx","../src/components/Popconfirm/Popconfirm.tsx"],"sourcesContent":["import { createContext, type MouseEvent, use } from 'react';\n\nexport type PopconfirmContextType = {\n  variant: 'confirm' | 'danger';\n  onConfirm: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;\n  onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n  enabled: boolean;\n  isLoading: boolean;\n};\n\nconst PopconfirmContext = createContext<PopconfirmContextType | null>(null);\n\nexport const PopconfirmContextProvider = PopconfirmContext;\n\nexport const usePopconfirmContext = () => {\n  const context = use(PopconfirmContext);\n  if (!context) throw new Error('usePopconfirmContext must be used within a Popconfirm');\n  return context;\n};\n","import type { ComponentProps } from 'react';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmBody = (props: Props) => <div {...props} />;\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n  ComponentProps<typeof Button>,\n  'children'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmCancel = ({\n  ref,\n  onClick,\n  children,\n  asChild,\n  className,\n  ...props\n}: Props) => {\n  const { onCancel, isLoading } = usePopconfirmContext();\n\n  const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n    onClick?.(event);\n    onCancel(event);\n  };\n\n  return (\n    <Popover.Close asChild onClick={handleClick} disabled={isLoading}>\n      {asChild ? (\n        <Slot {...props} ref={ref} className={className}>\n          {children}\n        </Slot>\n      ) : (\n        <Button variant=\"outline\" size=\"small\" {...props} ref={ref} className={cn(className)}>\n          {children ?? 'Cancel'}\n        </Button>\n      )}\n    </Popover.Close>\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button/Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n  ComponentProps<typeof Button>,\n  'children' | 'isLoading'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmConfirm = ({\n  ref,\n  onClick,\n  children,\n  asChild,\n  className,\n  ...props\n}: Props) => {\n  const { onConfirm, variant, isLoading } = usePopconfirmContext();\n\n  const handleOnClick: ComponentProps<'button'>['onClick'] = (event) => {\n    onClick?.(event);\n    onConfirm(event);\n  };\n\n  const defaultLabel = (() => {\n    if (children) return children;\n    return variant === 'danger' ? 'Delete' : 'Confirm';\n  })();\n\n  return (\n    <Popover.Close asChild onClick={handleOnClick} disabled={isLoading} data-loading={isLoading}>\n      {asChild ? (\n        <Slot {...props} ref={ref} className={className}>\n          {children}\n        </Slot>\n      ) : (\n        <Button\n          size=\"small\"\n          variant={variant === 'danger' ? 'danger' : 'primary'}\n          {...props}\n          ref={ref}\n          className={cn('tw:flex-1', className)}\n          isLoading={isLoading}\n        >\n          {defaultLabel}\n        </Button>\n      )}\n    </Popover.Close>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Popover.Content>, 'showArrow'>;\n\nexport const PopconfirmContent = ({ className, onInteractOutside, ...props }: Props) => {\n  const { isLoading } = usePopconfirmContext();\n\n  const handleOnInteractOutside: Props['onInteractOutside'] = (event) => {\n    if (isLoading) event.preventDefault();\n    onInteractOutside?.(event);\n  };\n\n  return (\n    <Popover.Content\n      {...props}\n      onInteractOutside={handleOnInteractOutside}\n      className={cn('tw:flex', 'tw:flex-col', 'tw:gap-3', 'tw:px-4', 'tw:py-3', className)}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmFooter = ({ className, ...props }: Props) => (\n  <div {...props} className={cn('tw:flex tw:gap-2 tw:w-full', className)} />\n);\n","import type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = ComponentProps<typeof Popover.Trigger>;\n\nexport const PopconfirmTrigger = ({ onClick, ...props }: Props) => {\n  const { enabled, onConfirm } = usePopconfirmContext();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    if (!enabled) {\n      event.preventDefault();\n      onConfirm(event);\n    }\n\n    onClick?.(event);\n  };\n\n  return <Popover.Trigger {...props} onClick={handleClick} />;\n};\n","import { useMemo, useRef, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { PopconfirmContextProvider, type PopconfirmContextType } from './context';\nimport { PopconfirmBody } from './PopconfirmBody';\nimport { PopconfirmCancel } from './PopconfirmCancel';\nimport { PopconfirmConfirm } from './PopconfirmConfirm';\nimport { PopconfirmContent } from './PopconfirmContent';\nimport { PopconfirmFooter } from './PopconfirmFooter';\nimport { PopconfirmTrigger } from './PopconfirmTrigger';\n\nconst noop = () => void 0;\n\ntype Props = {\n  children: ReactNode;\n  skipAsyncWait?: boolean;\n} & ComponentProps<typeof Popover> &\n  Omit<Partial<PopconfirmContextType>, 'isLoading'>;\n\nexport const Popconfirm = ({\n  children,\n  onConfirm = noop,\n  onCancel = noop,\n  variant = 'confirm',\n  enabled = true,\n  onOpenChange = noop,\n  open,\n  skipAsyncWait = false,\n  ...rest\n}: Props) => {\n  const [isLoading, setIsLoading] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const confirmRef = useRef(onConfirm);\n  const cancelRef = useRef(onCancel);\n  confirmRef.current = onConfirm;\n  cancelRef.current = onCancel;\n\n  const handleOnOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    onOpenChange(open);\n  };\n\n  const context = useMemo<PopconfirmContextType>(\n    () => ({\n      variant,\n      isLoading,\n      enabled,\n      onConfirm: (event) => {\n        const result = confirmRef.current(event);\n\n        if (!(result instanceof Promise) || skipAsyncWait) return;\n\n        event.preventDefault();\n        setIsLoading(true);\n        result.finally(() => {\n          setIsLoading(false);\n          setIsOpen(false);\n        });\n      },\n      onCancel: (event) => {\n        cancelRef.current(event);\n      },\n    }),\n    [variant, isLoading, enabled, skipAsyncWait],\n  );\n\n  return (\n    <Popover {...rest} open={open || isOpen} onOpenChange={handleOnOpenChange}>\n      <PopconfirmContextProvider value={context}>{children}</PopconfirmContextProvider>\n    </Popover>\n  );\n};\n\nPopconfirm.Confirm = PopconfirmConfirm;\nPopconfirm.Cancel = PopconfirmCancel;\nPopconfirm.Footer = PopconfirmFooter;\nPopconfirm.Content = PopconfirmContent;\nPopconfirm.Body = PopconfirmBody;\nPopconfirm.Trigger = PopconfirmTrigger;\n"],"mappings":";;;;;;;AAUA,MAAM,oBAAoB,cAA4C,IAAI;AAE1E,MAAa,4BAA4B;AAEzC,MAAa,6BAA6B;CACxC,MAAM,UAAU,IAAI,iBAAiB;CACrC,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,uDAAuD;CACrF,OAAO;AACT;;;ACdA,MAAa,kBAAkB,UAAiB,oBAAC,OAAD,EAAK,GAAI,MAAQ,CAAA;;;ACYjE,MAAa,oBAAoB,EAC/B,KACA,SACA,UACA,SACA,WACA,GAAG,YACQ;CACX,MAAM,EAAE,UAAU,cAAc,qBAAqB;CAErD,MAAM,eAAoD,UAAU;EAClE,UAAU,KAAK;EACf,SAAS,KAAK;CAChB;CAEA,OACE,oBAAC,QAAQ,OAAT;EAAe,SAAA;EAAQ,SAAS;EAAa,UAAU;EACpD,UAAA,UACC,oBAAC,MAAD;GAAM,GAAI;GAAY;GAAgB;GACnC;EACG,CAAA,IAEN,oBAAC,QAAD;GAAQ,SAAQ;GAAU,MAAK;GAAQ,GAAI;GAAY;GAAK,WAAW,GAAG,SAAS;GAChF,UAAA,YAAY;EACP,CAAA;CAEG,CAAA;AAEnB;;;AC5BA,MAAa,qBAAqB,EAChC,KACA,SACA,UACA,SACA,WACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,SAAS,cAAc,qBAAqB;CAE/D,MAAM,iBAAsD,UAAU;EACpE,UAAU,KAAK;EACf,UAAU,KAAK;CACjB;CAEA,MAAM,sBAAsB;EAC1B,IAAI,UAAU,OAAO;EACrB,OAAO,YAAY,WAAW,WAAW;CAC3C,EAAA,CAAG;CAEH,OACE,oBAAC,QAAQ,OAAT;EAAe,SAAA;EAAQ,SAAS;EAAe,UAAU;EAAW,gBAAc;EAC/E,UAAA,UACC,oBAAC,MAAD;GAAM,GAAI;GAAY;GAAgB;GACnC;EACG,CAAA,IAEN,oBAAC,QAAD;GACE,MAAK;GACL,SAAS,YAAY,WAAW,WAAW;GAC3C,GAAI;GACC;GACL,WAAW,GAAG,aAAa,SAAS;GACzB;GAEV,UAAA;EACK,CAAA;CAEG,CAAA;AAEnB;;;AC/CA,MAAa,qBAAqB,EAAE,WAAW,mBAAmB,GAAG,YAAmB;CACtF,MAAM,EAAE,cAAc,qBAAqB;CAE3C,MAAM,2BAAuD,UAAU;EACrE,IAAI,WAAW,MAAM,eAAe;EACpC,oBAAoB,KAAK;CAC3B;CAEA,OACE,oBAAC,QAAQ,SAAT;EACE,GAAI;EACJ,mBAAmB;EACnB,WAAW,GAAG,WAAW,eAAe,YAAY,WAAW,WAAW,SAAS;CACpF,CAAA;AAEL;;;AClBA,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAC/C,oBAAC,OAAD;CAAK,GAAI;CAAO,WAAW,GAAG,8BAA8B,SAAS;AAAI,CAAA;;;ACC3E,MAAa,qBAAqB,EAAE,SAAS,GAAG,YAAmB;CACjE,MAAM,EAAE,SAAS,cAAc,qBAAqB;CAEpD,MAAM,eAAqD,UAAU;EACnE,IAAI,CAAC,SAAS;GACZ,MAAM,eAAe;GACrB,UAAU,KAAK;EACjB;EAEA,UAAU,KAAK;CACjB;CAEA,OAAO,oBAAC,QAAQ,SAAT;EAAiB,GAAI;EAAO,SAAS;CAAc,CAAA;AAC5D;;;ACRA,MAAM,aAAa,KAAK;AAQxB,MAAa,cAAc,EACzB,UACA,YAAY,MACZ,WAAW,MACX,UAAU,WACV,UAAU,MACV,eAAe,MACf,MACA,gBAAgB,OAChB,GAAG,WACQ;CACX,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,aAAa,OAAO,SAAS;CACnC,MAAM,YAAY,OAAO,QAAQ;CACjC,WAAW,UAAU;CACrB,UAAU,UAAU;CAEpB,MAAM,sBAAsB,SAAkB;EAC5C,UAAU,IAAI;EACd,aAAa,IAAI;CACnB;CAEA,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA,YAAY,UAAU;GACpB,MAAM,SAAS,WAAW,QAAQ,KAAK;GAEvC,IAAI,EAAE,kBAAkB,YAAY,eAAe;GAEnD,MAAM,eAAe;GACrB,aAAa,IAAI;GACjB,OAAO,cAAc;IACnB,aAAa,KAAK;IAClB,UAAU,KAAK;GACjB,CAAC;EACH;EACA,WAAW,UAAU;GACnB,UAAU,QAAQ,KAAK;EACzB;CACF,IACA;EAAC;EAAS;EAAW;EAAS;CAAa,CAC7C;CAEA,OACE,oBAAC,SAAD;EAAS,GAAI;EAAM,MAAM,QAAQ;EAAQ,cAAc;EACrD,UAAA,oBAAC,2BAAD;GAA2B,OAAO;GAAU;EAAoC,CAAA;CACzE,CAAA;AAEb;AAEA,WAAW,UAAU;AACrB,WAAW,SAAS;AACpB,WAAW,SAAS;AACpB,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,UAAU"}

package/dist/Popover-Ca0V6AD1.js

@@ -0,0 +1,92 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Close, Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
+//#region src/components/Popover/PopoverContent.tsx
+const variants = cva([
+	"tailwindcss-preflight",
+	"tw:group/popover-content",
+	"tw:z-[1055]",
+	"tw:focus-visible:outline-hidden",
+	"tw:pointer-events-auto",
+	"tw:min-w-32",
+	"tw:max-h-[var(--radix-popover-content-available-height)]",
+	"tw:origin-(--radix-popover-content-transform-origin)",
+	"tw:flex",
+	"tw:flex-col",
+	"tw:overflow-y-auto",
+	"tw:box-border",
+	"tw:border",
+	"tw:border-solid",
+	"tw:shadow-lg",
+	"tw:data-[state=open]:animate-in",
+	"tw:data-[state=open]:fade-in-0",
+	"tw:data-[state=open]:zoom-in-95",
+	"tw:data-[state=closed]:animate-out",
+	"tw:data-[state=closed]:fade-out-0",
+	"tw:data-[state=closed]:zoom-out-95",
+	"tw:data-[side=bottom]:slide-in-from-top-2",
+	"tw:data-[side=left]:slide-in-from-right-2",
+	"tw:data-[side=right]:slide-in-from-left-2",
+	"tw:data-[side=top]:slide-in-from-bottom-2",
+	"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4",
+	"tw:[&_svg]:shrink-0"
+], {
+	defaultVariants: {
+		matchTriggerWidth: false,
+		variant: "default"
+	},
+	variants: {
+		variant: {
+			default: [
+				"tw:rounded-md",
+				"tw:border-neutral-100",
+				"tw:bg-white",
+				"tw:text-neutral-800"
+			],
+			argo: [
+				"tw:rounded-2xl",
+				"tw:border-border",
+				"tw:bg-popover",
+				"tw:text-popover-foreground"
+			]
+		},
+		matchTriggerWidth: {
+			true: ["tw:w-[var(--radix-popover-trigger-width)]"],
+			false: []
+		}
+	}
+});
+const PopoverContent = ({ ref, className, align = "center", sideOffset = 4, matchTriggerWidth = false, children, onEscapeKeyDown, ...props }) => {
+	const effectiveVariant = useArgoDesign() ? "argo" : "default";
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+		ref,
+		align: matchTriggerWidth ? "start" : align,
+		sideOffset,
+		className: cn(variants({
+			className,
+			matchTriggerWidth,
+			variant: effectiveVariant
+		})),
+		onEscapeKeyDown: (event) => {
+			event.stopPropagation();
+			onEscapeKeyDown?.(event);
+		},
+		...props,
+		children
+	}) });
+};
+//#endregion
+//#region src/components/Popover/Popover.tsx
+const Popover = (props) => /* @__PURE__ */ jsx(Root, { ...props });
+/**
+* Main Layout
+*/
+Popover.Content = PopoverContent;
+Popover.Trigger = Trigger;
+Popover.Close = Close;
+//#endregion
+export { Popover };
+
+//# sourceMappingURL=Popover-Ca0V6AD1.js.map

package/dist/Popover-Ca0V6AD1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover-Ca0V6AD1.js","names":[],"sources":["../src/components/Popover/PopoverContent.tsx","../src/components/Popover/Popover.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-popover';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nconst variants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/popover-content',\n    'tw:z-[1055]',\n    'tw:focus-visible:outline-hidden',\n\n    // An open Radix Dialog locks `pointer-events: none` on <body>. Popover content\n    // is portalled to <body> as a sibling of the dialog, so it inherits the lock\n    // and clicks fall through — re-enable pointer events on the content itself\n    // (dismiss-on-outside-click still works, it listens on document).\n    'tw:pointer-events-auto',\n\n    // sizing\n    'tw:min-w-32',\n    'tw:max-h-[var(--radix-popover-content-available-height)]',\n    'tw:origin-(--radix-popover-content-transform-origin)',\n\n    // layout\n    'tw:flex',\n    'tw:flex-col',\n    'tw:overflow-y-auto',\n\n    // border\n    'tw:box-border',\n    'tw:border',\n    'tw:border-solid',\n    'tw:shadow-lg',\n\n    // open animation\n    'tw:data-[state=open]:animate-in',\n    'tw:data-[state=open]:fade-in-0',\n    'tw:data-[state=open]:zoom-in-95',\n\n    // closed animation\n    'tw:data-[state=closed]:animate-out',\n    'tw:data-[state=closed]:fade-out-0',\n    'tw:data-[state=closed]:zoom-out-95',\n\n    // position animation\n    'tw:data-[side=bottom]:slide-in-from-top-2',\n    'tw:data-[side=left]:slide-in-from-right-2',\n    'tw:data-[side=right]:slide-in-from-left-2',\n    'tw:data-[side=top]:slide-in-from-bottom-2',\n\n    // Default size for nested Lucide icons; callers can override on the icon.\n    \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n    'tw:[&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: {\n      matchTriggerWidth: false,\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        // Legacy surface — fixed white panel.\n        default: ['tw:rounded-md', 'tw:border-neutral-100', 'tw:bg-white', 'tw:text-neutral-800'],\n        // Argo surface — semantic popover tokens (brand + dark aware).\n        argo: ['tw:rounded-2xl', 'tw:border-border', 'tw:bg-popover', 'tw:text-popover-foreground'],\n      },\n      matchTriggerWidth: {\n        true: ['tw:w-[var(--radix-popover-trigger-width)]'],\n        false: [],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<typeof Content> & Omit<VariantProps<typeof variants>, 'variant'>;\n\nexport const PopoverContent = ({\n  ref,\n  className,\n  align = 'center',\n  sideOffset = 4,\n  matchTriggerWidth = false,\n  children,\n  onEscapeKeyDown,\n  ...props\n}: Props) => {\n  const effectiveVariant: NonNullable<VariantProps<typeof variants>['variant']> = useArgoDesign()\n    ? 'argo'\n    : 'default';\n  return (\n    <Portal>\n      <Content\n        ref={ref}\n        align={matchTriggerWidth ? 'start' : align}\n        sideOffset={sideOffset}\n        className={cn(variants({ className, matchTriggerWidth, variant: effectiveVariant }))}\n        onEscapeKeyDown={(event) => {\n          // Stop propagation to prevent parent modals (like FullScreenModal) from closing\n          event.stopPropagation();\n          onEscapeKeyDown?.(event);\n        }}\n        {...props}\n      >\n        {children}\n      </Content>\n    </Portal>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-popover';\n\nimport { PopoverContent } from './PopoverContent';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const Popover = (props: Props) => <Root {...props} />;\n\n/**\n * Main Layout\n */\nPopover.Content = PopoverContent;\nPopover.Trigger = Trigger;\nPopover.Close = Close;\n"],"mappings":";;;;;;AAQA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CAMA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,mBAAmB;EACnB,SAAS;CACX;CACA,UAAU;EACR,SAAS;GAEP,SAAS;IAAC;IAAiB;IAAyB;IAAe;GAAqB;GAExF,MAAM;IAAC;IAAkB;IAAoB;IAAiB;GAA4B;EAC5F;EACA,mBAAmB;GACjB,MAAM,CAAC,2CAA2C;GAClD,OAAO,CAAC;EACV;CACF;AACF,CACF;AAIA,MAAa,kBAAkB,EAC7B,KACA,WACA,QAAQ,UACR,aAAa,GACb,oBAAoB,OACpB,UACA,iBACA,GAAG,YACQ;CACX,MAAM,mBAA0E,cAAc,IAC1F,SACA;CACJ,OACE,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAD;EACO;EACL,OAAO,oBAAoB,UAAU;EACzB;EACZ,WAAW,GAAG,SAAS;GAAE;GAAW;GAAmB,SAAS;EAAiB,CAAC,CAAC;EACnF,kBAAkB,UAAU;GAE1B,MAAM,gBAAgB;GACtB,kBAAkB,KAAK;EACzB;EACA,GAAI;EAEH;CACM,CAAA,EACH,CAAA;AAEZ;;;ACvGA,MAAa,WAAW,UAAiB,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;;;;AAK3D,QAAQ,UAAU;AAClB,QAAQ,UAAU;AAClB,QAAQ,QAAQ"}