@economic/taco 14.1.1 → 14.2.0-tanstack-virtual-update.0

package/dist/components/Table3/listeners/useTableEditingListener.js

@@ -1,12 +1,13 @@
 import React__default from "react";
 import { useGlobalKeyDown } from "../../../hooks/useGlobalKeyDown.js";
 import { useLazyEffect } from "../../../hooks/useLazyEffect.js";
+import { getTableMeta } from "../../../primitives/Table/useTableManager/util/rows.js";
 import { resetHighlightedColumnIndexes } from "../../../primitives/Table/useTableManager/util/search.js";
 import { isElementInsideOrTriggeredFromContainer } from "../../../utils/dom.js";
 import { shortcut } from "../util/editing.js";
 import { useLocalization } from "../../Provider/Localization.js";
 function useTableEditingListener(table, tableRef, scrollToIndex) {
-  const tableMeta = table.options.meta;
+  const tableMeta = getTableMeta(table);
   const localization = useLocalization();
   const hasChanges = tableMeta.editing.hasChanges();
   React__default.useEffect(() => {

package/dist/components/Table3/listeners/useTableEditingListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableEditingListener.js","sources":["../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useLocalization } from '@/components';\nimport { useGlobalKeyDown } from '@/hooks/useGlobalKeyDown';\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\nimport type { TableRef } from '@/primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '@/primitives/Table/useTableManager/util/search';\nimport { isElementInsideOrTriggeredFromContainer } from '@/utils/dom';\n\nimport { shortcut } from '../util/editing';\n\nexport function useTableEditingListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const localization = useLocalization();\n\n    // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n    const hasChanges = tableMeta.editing.hasChanges();\n\n    React.useEffect(() => {\n        function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n            if (tableMeta.editing.isEditing && hasChanges) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        }\n\n        window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n        };\n    }, [tableMeta.editing.isEditing, hasChanges]);\n\n    const hasSavedChanges = tableMeta.editing.hasSaved();\n\n    useLazyEffect(() => {\n        if (hasSavedChanges) {\n            // recompute search highlights against the freshly saved data, but keep the active row where it is -\n            // moving it to the first match would jump focus to the top of the list mid-edit.\n            resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization, false);\n        }\n    }, [hasSavedChanges]);\n\n    React.useEffect(() => {\n        const onClickOutside = (event: MouseEvent) => {\n            if (tableMeta.editing.isEditing) {\n                const element = event.target as Element;\n\n                const isClickOnTableOrInsideTable =\n                    element.tagName === 'TABLE' ||\n                    element.tagName === 'TBODY' ||\n                    element.getAttribute('data-taco') === 'backdrop' ||\n                    element.getAttribute('data-table') === 'editing-toggle' ||\n                    !document.body.contains(element) ||\n                    isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n                if (isClickOnTableOrInsideTable) {\n                    return;\n                }\n\n                const dialog = element.closest('[role=\"dialog\"]');\n                const isClickInsideParentDialog = dialog !== null && tableRef.current?.closest('[role=\"dialog\"]') === dialog;\n                // If dialog doesn't exist then the click is outside the table on a non dialog element\n                const isClickOutside = dialog === null;\n\n                // The below condition makes sure that we don't save the changes when click is inside a non parent dialog.\n                // Those dialogs can possibly be opened by row actions and editing cell controls.\n                // Users can click the white space below rows which could be inside the table, but a valid scenario to save\n                if (isClickInsideParentDialog || isClickOutside) {\n                    tableMeta.editing.saveChanges(table);\n                }\n            }\n        };\n\n        document.addEventListener('click', onClickOutside);\n\n        return () => document.removeEventListener('click', onClickOutside);\n    }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n    // shortcuts\n    useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n    });\n\n    useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        tableMeta.editing.saveChanges(table);\n    });\n}\n"],"names":["React"],"mappings":";;;;;;;AAYO,SAAS,wBACZ,OACA,UACA,eACF;AACE,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,eAAe,gBAAA;AAGrB,QAAM,aAAa,UAAU,QAAQ,WAAA;AAErCA,iBAAM,UAAU,MAAM;AAClB,aAAS,0BAA0B,OAA0B;AACzD,UAAI,UAAU,QAAQ,aAAa,YAAY;AAC3C,cAAM,cAAc;AACpB,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,IACX;AAEA,WAAO,iBAAiB,gBAAgB,yBAAyB;AAEjE,WAAO,MAAM;AACT,aAAO,oBAAoB,gBAAgB,yBAAyB;AAAA,IACxE;AAAA,EACJ,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,CAAC;AAE5C,QAAM,kBAAkB,UAAU,QAAQ,SAAA;AAE1C,gBAAc,MAAM;AAChB,QAAI,iBAAiB;AAGjB,oCAA8B,MAAM,SAAA,EAAW,cAAc,OAAO,cAAc,KAAK;AAAA,IAC3F;AAAA,EACJ,GAAG,CAAC,eAAe,CAAC;AAEpBA,iBAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,CAAC,UAAsB;AAC1C,UAAI,UAAU,QAAQ,WAAW;AAC7B,cAAM,UAAU,MAAM;AAEtB,cAAM,8BACF,QAAQ,YAAY,WACpB,QAAQ,YAAY,WACpB,QAAQ,aAAa,WAAW,MAAM,cACtC,QAAQ,aAAa,YAAY,MAAM,oBACvC,CAAC,SAAS,KAAK,SAAS,OAAO,KAC/B,wCAAwC,SAAS,SAAS,OAAO;AAErE,YAAI,6BAA6B;AAC7B;AAAA,QACJ;AAEA,cAAM,SAAS,QAAQ,QAAQ,iBAAiB;AAChD,cAAM,4BAA4B,WAAW,QAAQ,SAAS,SAAS,QAAQ,iBAAiB,MAAM;AAEtG,cAAM,iBAAiB,WAAW;AAKlC,YAAI,6BAA6B,gBAAgB;AAC7C,oBAAU,QAAQ,YAAY,KAAK;AAAA,QACvC;AAAA,MACJ;AAAA,IACJ;AAEA,aAAS,iBAAiB,SAAS,cAAc;AAEjD,WAAO,MAAM,SAAS,oBAAoB,SAAS,cAAc;AAAA,EACrE,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,QAAQ,WAAW,CAAC;AAG/D,mBAAiB,UAAU,QAAQ,YAAY,WAAW,QAAW,CAAC,UAAyB;AAC3F,UAAM,eAAA;AACN,cAAU,QAAQ,cAAc,CAAC,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EACtF,CAAC;AAED,mBAAiB,UAAU,QAAQ,YAAY,EAAE,KAAK,KAAK,MAAM,MAAM,OAAO,MAAA,IAAU,QAAW,CAAA,UAAS;AACxG,UAAM,eAAA;AACN,cAAU,QAAQ,YAAY,KAAK;AAAA,EACvC,CAAC;AACL;"}
+{"version":3,"file":"useTableEditingListener.js","sources":["../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useLocalization } from '@/components';\nimport { useGlobalKeyDown } from '@/hooks/useGlobalKeyDown';\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\nimport type { TableRef } from '@/primitives/Table/types';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\nimport { resetHighlightedColumnIndexes } from '@/primitives/Table/useTableManager/util/search';\nimport { isElementInsideOrTriggeredFromContainer } from '@/utils/dom';\n\nimport { shortcut } from '../util/editing';\n\nexport function useTableEditingListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = getTableMeta(table);\n    const localization = useLocalization();\n\n    // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n    const hasChanges = tableMeta.editing.hasChanges();\n\n    React.useEffect(() => {\n        function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n            if (tableMeta.editing.isEditing && hasChanges) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        }\n\n        window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n        };\n    }, [tableMeta.editing.isEditing, hasChanges]);\n\n    const hasSavedChanges = tableMeta.editing.hasSaved();\n\n    useLazyEffect(() => {\n        if (hasSavedChanges) {\n            // recompute search highlights against the freshly saved data, but keep the active row where it is -\n            // moving it to the first match would jump focus to the top of the list mid-edit.\n            resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization, false);\n        }\n    }, [hasSavedChanges]);\n\n    React.useEffect(() => {\n        const onClickOutside = (event: MouseEvent) => {\n            if (tableMeta.editing.isEditing) {\n                const element = event.target as Element;\n\n                const isClickOnTableOrInsideTable =\n                    element.tagName === 'TABLE' ||\n                    element.tagName === 'TBODY' ||\n                    element.getAttribute('data-taco') === 'backdrop' ||\n                    element.getAttribute('data-table') === 'editing-toggle' ||\n                    !document.body.contains(element) ||\n                    isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n                if (isClickOnTableOrInsideTable) {\n                    return;\n                }\n\n                const dialog = element.closest('[role=\"dialog\"]');\n                const isClickInsideParentDialog = dialog !== null && tableRef.current?.closest('[role=\"dialog\"]') === dialog;\n                // If dialog doesn't exist then the click is outside the table on a non dialog element\n                const isClickOutside = dialog === null;\n\n                // The below condition makes sure that we don't save the changes when click is inside a non parent dialog.\n                // Those dialogs can possibly be opened by row actions and editing cell controls.\n                // Users can click the white space below rows which could be inside the table, but a valid scenario to save\n                if (isClickInsideParentDialog || isClickOutside) {\n                    tableMeta.editing.saveChanges(table);\n                }\n            }\n        };\n\n        document.addEventListener('click', onClickOutside);\n\n        return () => document.removeEventListener('click', onClickOutside);\n    }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n    // shortcuts\n    useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n    });\n\n    useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        tableMeta.editing.saveChanges(table);\n    });\n}\n"],"names":["React"],"mappings":";;;;;;;;AAaO,SAAS,wBACZ,OACA,UACA,eACF;AACE,QAAM,YAAY,aAAa,KAAK;AACpC,QAAM,eAAe,gBAAA;AAGrB,QAAM,aAAa,UAAU,QAAQ,WAAA;AAErCA,iBAAM,UAAU,MAAM;AAClB,aAAS,0BAA0B,OAA0B;AACzD,UAAI,UAAU,QAAQ,aAAa,YAAY;AAC3C,cAAM,cAAc;AACpB,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,IACX;AAEA,WAAO,iBAAiB,gBAAgB,yBAAyB;AAEjE,WAAO,MAAM;AACT,aAAO,oBAAoB,gBAAgB,yBAAyB;AAAA,IACxE;AAAA,EACJ,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,CAAC;AAE5C,QAAM,kBAAkB,UAAU,QAAQ,SAAA;AAE1C,gBAAc,MAAM;AAChB,QAAI,iBAAiB;AAGjB,oCAA8B,MAAM,SAAA,EAAW,cAAc,OAAO,cAAc,KAAK;AAAA,IAC3F;AAAA,EACJ,GAAG,CAAC,eAAe,CAAC;AAEpBA,iBAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,CAAC,UAAsB;AAC1C,UAAI,UAAU,QAAQ,WAAW;AAC7B,cAAM,UAAU,MAAM;AAEtB,cAAM,8BACF,QAAQ,YAAY,WACpB,QAAQ,YAAY,WACpB,QAAQ,aAAa,WAAW,MAAM,cACtC,QAAQ,aAAa,YAAY,MAAM,oBACvC,CAAC,SAAS,KAAK,SAAS,OAAO,KAC/B,wCAAwC,SAAS,SAAS,OAAO;AAErE,YAAI,6BAA6B;AAC7B;AAAA,QACJ;AAEA,cAAM,SAAS,QAAQ,QAAQ,iBAAiB;AAChD,cAAM,4BAA4B,WAAW,QAAQ,SAAS,SAAS,QAAQ,iBAAiB,MAAM;AAEtG,cAAM,iBAAiB,WAAW;AAKlC,YAAI,6BAA6B,gBAAgB;AAC7C,oBAAU,QAAQ,YAAY,KAAK;AAAA,QACvC;AAAA,MACJ;AAAA,IACJ;AAEA,aAAS,iBAAiB,SAAS,cAAc;AAEjD,WAAO,MAAM,SAAS,oBAAoB,SAAS,cAAc;AAAA,EACrE,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,QAAQ,WAAW,CAAC;AAG/D,mBAAiB,UAAU,QAAQ,YAAY,WAAW,QAAW,CAAC,UAAyB;AAC3F,UAAM,eAAA;AACN,cAAU,QAAQ,cAAc,CAAC,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EACtF,CAAC;AAED,mBAAiB,UAAU,QAAQ,YAAY,EAAE,KAAK,KAAK,MAAM,MAAM,OAAO,MAAA,IAAU,QAAW,CAAA,UAAS;AACxG,UAAM,eAAA;AACN,cAAU,QAAQ,YAAY,KAAK;AAAA,EACvC,CAAC;AACL;"}

package/dist/components/Toggletip/Toggletip.cjs

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("@base-ui/react");
+const cn = require("clsx");
+const React = require("react");
+const Icon = require("../Icon/Icon.cjs");
+const Popover = require("../Popover/Popover.cjs");
+const util = require("../Popover/util.cjs");
+const Localization = require("../Provider/Localization.cjs");
+const ArrowTip = require("../../primitives/ArrowTip/ArrowTip.cjs");
+const BareButton = require("../../primitives/BareButton/BareButton.cjs");
+const tailwind = require("../../utils/tailwind.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TRIGGER_SIZE_CLASSNAME = {
+  sm: "size-[18px]",
+  md: "size-5",
+  lg: "size-6"
+};
+const TRIGGER_ICON_SIZE_CLASSNAME = {
+  sm: "!size-[18px]",
+  md: "!size-5",
+  lg: "!size-6"
+};
+const Toggletip = React__namespace.forwardRef(function Toggletip2(props, ref) {
+  const {
+    size = "md",
+    children,
+    placement = "top",
+    className: _className,
+    style: _style
+  } = props;
+  const { texts } = Localization.useLocalization();
+  const output = typeof children === "function" ? /* @__PURE__ */ React__namespace.createElement(react.Popover.Close, { render: /* @__PURE__ */ React__namespace.createElement(Popover.RenderPropWrapper, null, children) }) : children;
+  return /* @__PURE__ */ React__namespace.createElement(react.Popover.Root, null, /* @__PURE__ */ React__namespace.createElement(
+    react.Popover.Trigger,
+    {
+      ref,
+      render: /* @__PURE__ */ React__namespace.createElement(
+        BareButton.BareButton,
+        {
+          "data-taco": "toggletip",
+          className: cn(
+            "flex flex-shrink-0 cursor-pointer items-center justify-center rounded text-black hover:bg-gray-100 data-[popup-open]:bg-gray-200",
+            TRIGGER_SIZE_CLASSNAME[size]
+          )
+        },
+        /* @__PURE__ */ React__namespace.createElement("span", { "aria-hidden": "true", className: "inline-flex items-center leading-none", "data-taco": "toggletip-icon" }, /* @__PURE__ */ React__namespace.createElement(Icon.Icon, { name: "circle-information", className: TRIGGER_ICON_SIZE_CLASSNAME[size] })),
+        /* @__PURE__ */ React__namespace.createElement("span", { className: "sr-only", "data-taco": "toggletip-label" }, texts.toggletip.label)
+      )
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(react.Popover.Portal, null, /* @__PURE__ */ React__namespace.createElement(react.Popover.Positioner, { side: placement, sideOffset: 8 }, /* @__PURE__ */ React__namespace.createElement(
+    react.Popover.Popup,
+    {
+      className: cn("max-w-xs", util.POPOVER_CLASSNAMES, "focus:border-blue-300"),
+      "data-taco": "toggletip-content"
+    },
+    /* @__PURE__ */ React__namespace.createElement(react.Popover.Arrow, { className: tailwind.ARROW_TIP_POSITION_WIDE }, /* @__PURE__ */ React__namespace.createElement(
+      ArrowTip.ArrowTip,
+      {
+        outerFill: "fill-[canvas]",
+        innerFill: "fill-gray-100 group-focus:fill-blue-300",
+        focusFill: "group-focus:fill-none"
+      }
+    )),
+    output
+  ))));
+});
+exports.Toggletip = Toggletip;
+//# sourceMappingURL=Toggletip.cjs.map

package/dist/components/Toggletip/Toggletip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggletip.cjs","sources":["../../../src/components/Toggletip/Toggletip.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { Icon } from '@/components/Icon/Icon';\nimport { type PopoverContentRenderProps, RenderPropWrapper } from '@/components/Popover/Popover';\nimport { POPOVER_CLASSNAMES } from '@/components/Popover/util';\nimport { useLocalization } from '@/components/Provider/Localization';\nimport { ArrowTip } from '@/primitives/ArrowTip/ArrowTip';\nimport { BareButton } from '@/primitives/BareButton/BareButton';\nimport type { Placement } from '@/types';\nimport { ARROW_TIP_POSITION_WIDE } from '@/utils/tailwind';\n\nexport type ToggletipTexts = {\n    label: string;\n};\n\nexport type ToggletipSize = 'sm' | 'md' | 'lg';\n\nconst TRIGGER_SIZE_CLASSNAME: Record<ToggletipSize, string> = {\n    sm: 'size-[18px]',\n    md: 'size-5',\n    lg: 'size-6',\n};\n\nconst TRIGGER_ICON_SIZE_CLASSNAME: Record<ToggletipSize, string> = {\n    sm: '!size-[18px]',\n    md: '!size-5',\n    lg: '!size-6',\n};\n\nexport type ToggletipProps = {\n    size?: ToggletipSize;\n    children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\n    placement?: Placement;\n};\n\nexport const Toggletip = React.forwardRef<HTMLButtonElement, ToggletipProps>(function Toggletip(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        size = 'md',\n        children,\n        placement = 'top',\n        className: _className,\n        style: _style,\n    } = props as ToggletipProps & { className?: string; style?: React.CSSProperties };\n\n    const { texts } = useLocalization();\n\n    const output =\n        typeof children === 'function' ? (\n            <PopoverPrimitive.Close render={<RenderPropWrapper>{children}</RenderPropWrapper>} />\n        ) : (\n            children\n        );\n\n    return (\n        <PopoverPrimitive.Root>\n            <PopoverPrimitive.Trigger\n                ref={ref}\n                render={\n                    <BareButton\n                        data-taco=\"toggletip\"\n                        className={cn(\n                            'flex flex-shrink-0 cursor-pointer items-center justify-center rounded text-black hover:bg-gray-100 data-[popup-open]:bg-gray-200',\n                            TRIGGER_SIZE_CLASSNAME[size]\n                        )}>\n                        <span aria-hidden=\"true\" className=\"inline-flex items-center leading-none\" data-taco=\"toggletip-icon\">\n                            <Icon name=\"circle-information\" className={TRIGGER_ICON_SIZE_CLASSNAME[size]} />\n                        </span>\n                        <span className=\"sr-only\" data-taco=\"toggletip-label\">\n                            {texts.toggletip.label}\n                        </span>\n                    </BareButton>\n                }\n            />\n            <PopoverPrimitive.Portal>\n                <PopoverPrimitive.Positioner side={placement} sideOffset={8}>\n                    <PopoverPrimitive.Popup\n                        className={cn('max-w-xs', POPOVER_CLASSNAMES, 'focus:border-blue-300')}\n                        data-taco=\"toggletip-content\">\n                        <PopoverPrimitive.Arrow className={ARROW_TIP_POSITION_WIDE}>\n                            <ArrowTip\n                                outerFill=\"fill-[canvas]\"\n                                innerFill=\"fill-gray-100 group-focus:fill-blue-300\"\n                                focusFill=\"group-focus:fill-none\"\n                            />\n                        </PopoverPrimitive.Arrow>\n                        {output}\n                    </PopoverPrimitive.Popup>\n                </PopoverPrimitive.Positioner>\n            </PopoverPrimitive.Portal>\n        </PopoverPrimitive.Root>\n    );\n});\n"],"names":["React","Toggletip","useLocalization","PopoverPrimitive","RenderPropWrapper","BareButton","Icon","POPOVER_CLASSNAMES","ARROW_TIP_POSITION_WIDE","ArrowTip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,yBAAwD;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEA,MAAM,8BAA6D;AAAA,EAC/D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAQO,MAAM,YAAYA,iBAAM,WAA8C,SAASC,WAAU,OAAO,KAAK;AAExG,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,OAAO;AAAA,EAAA,IACP;AAEJ,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAElB,QAAM,SACF,OAAO,aAAa,aAChBF,iCAAA,cAACG,MAAAA,QAAiB,OAAjB,EAAuB,QAAQH,iCAAA,cAACI,QAAAA,mBAAA,MAAmB,QAAS,GAAsB,IAEnF;AAGR,SACIJ,iCAAA,cAACG,MAAAA,QAAiB,MAAjB,MACGH,iCAAA;AAAA,IAACG,MAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG;AAAA,MACA,QACIH,iCAAA;AAAA,QAACK,WAAAA;AAAAA,QAAA;AAAA,UACG,aAAU;AAAA,UACV,WAAW;AAAA,YACP;AAAA,YACA,uBAAuB,IAAI;AAAA,UAAA;AAAA,QAC/B;AAAA,uDACC,QAAA,EAAK,eAAY,QAAO,WAAU,yCAAwC,aAAU,iBAAA,GACjFL,iCAAA,cAACM,WAAA,EAAK,MAAK,sBAAqB,WAAW,4BAA4B,IAAI,GAAG,CAClF;AAAA,QACAN,iCAAA,cAAC,UAAK,WAAU,WAAU,aAAU,kBAAA,GAC/B,MAAM,UAAU,KACrB;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA,GAGRA,iCAAA,cAACG,MAAAA,QAAiB,QAAjB,MACGH,iCAAA,cAACG,MAAAA,QAAiB,YAAjB,EAA4B,MAAM,WAAW,YAAY,EAAA,GACtDH,iCAAA;AAAA,IAACG,MAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,WAAW,GAAG,YAAYI,KAAAA,oBAAoB,uBAAuB;AAAA,MACrE,aAAU;AAAA,IAAA;AAAA,IACVP,iCAAA,cAACG,MAAAA,QAAiB,OAAjB,EAAuB,WAAWK,SAAAA,wBAAA,GAC/BR,iCAAA;AAAA,MAACS,SAAAA;AAAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,WAAU;AAAA,QACV,WAAU;AAAA,MAAA;AAAA,IAAA,CAElB;AAAA,IACC;AAAA,EAAA,CAET,CACJ,CACJ;AAER,CAAC;;"}

package/dist/components/Toggletip/Toggletip.d.ts

@@ -0,0 +1,13 @@
+import { PopoverContentRenderProps } from '../Popover/Popover';
+import { Placement } from '../../types';
+import * as React from 'react';
+export type ToggletipTexts = {
+    label: string;
+};
+export type ToggletipSize = 'sm' | 'md' | 'lg';
+export type ToggletipProps = {
+    size?: ToggletipSize;
+    children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);
+    placement?: Placement;
+};
+export declare const Toggletip: React.ForwardRefExoticComponent<ToggletipProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Toggletip/Toggletip.js

@@ -0,0 +1,68 @@
+import { Popover } from "@base-ui/react";
+import cn from "clsx";
+import * as React from "react";
+import { Icon } from "../Icon/Icon.js";
+import { RenderPropWrapper } from "../Popover/Popover.js";
+import { POPOVER_CLASSNAMES } from "../Popover/util.js";
+import { useLocalization } from "../Provider/Localization.js";
+import { ArrowTip } from "../../primitives/ArrowTip/ArrowTip.js";
+import { BareButton } from "../../primitives/BareButton/BareButton.js";
+import { ARROW_TIP_POSITION_WIDE } from "../../utils/tailwind.js";
+const TRIGGER_SIZE_CLASSNAME = {
+  sm: "size-[18px]",
+  md: "size-5",
+  lg: "size-6"
+};
+const TRIGGER_ICON_SIZE_CLASSNAME = {
+  sm: "!size-[18px]",
+  md: "!size-5",
+  lg: "!size-6"
+};
+const Toggletip = React.forwardRef(function Toggletip2(props, ref) {
+  const {
+    size = "md",
+    children,
+    placement = "top",
+    className: _className,
+    style: _style
+  } = props;
+  const { texts } = useLocalization();
+  const output = typeof children === "function" ? /* @__PURE__ */ React.createElement(Popover.Close, { render: /* @__PURE__ */ React.createElement(RenderPropWrapper, null, children) }) : children;
+  return /* @__PURE__ */ React.createElement(Popover.Root, null, /* @__PURE__ */ React.createElement(
+    Popover.Trigger,
+    {
+      ref,
+      render: /* @__PURE__ */ React.createElement(
+        BareButton,
+        {
+          "data-taco": "toggletip",
+          className: cn(
+            "flex flex-shrink-0 cursor-pointer items-center justify-center rounded text-black hover:bg-gray-100 data-[popup-open]:bg-gray-200",
+            TRIGGER_SIZE_CLASSNAME[size]
+          )
+        },
+        /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", className: "inline-flex items-center leading-none", "data-taco": "toggletip-icon" }, /* @__PURE__ */ React.createElement(Icon, { name: "circle-information", className: TRIGGER_ICON_SIZE_CLASSNAME[size] })),
+        /* @__PURE__ */ React.createElement("span", { className: "sr-only", "data-taco": "toggletip-label" }, texts.toggletip.label)
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Positioner, { side: placement, sideOffset: 8 }, /* @__PURE__ */ React.createElement(
+    Popover.Popup,
+    {
+      className: cn("max-w-xs", POPOVER_CLASSNAMES, "focus:border-blue-300"),
+      "data-taco": "toggletip-content"
+    },
+    /* @__PURE__ */ React.createElement(Popover.Arrow, { className: ARROW_TIP_POSITION_WIDE }, /* @__PURE__ */ React.createElement(
+      ArrowTip,
+      {
+        outerFill: "fill-[canvas]",
+        innerFill: "fill-gray-100 group-focus:fill-blue-300",
+        focusFill: "group-focus:fill-none"
+      }
+    )),
+    output
+  ))));
+});
+export {
+  Toggletip
+};
+//# sourceMappingURL=Toggletip.js.map

package/dist/components/Toggletip/Toggletip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggletip.js","sources":["../../../src/components/Toggletip/Toggletip.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { Icon } from '@/components/Icon/Icon';\nimport { type PopoverContentRenderProps, RenderPropWrapper } from '@/components/Popover/Popover';\nimport { POPOVER_CLASSNAMES } from '@/components/Popover/util';\nimport { useLocalization } from '@/components/Provider/Localization';\nimport { ArrowTip } from '@/primitives/ArrowTip/ArrowTip';\nimport { BareButton } from '@/primitives/BareButton/BareButton';\nimport type { Placement } from '@/types';\nimport { ARROW_TIP_POSITION_WIDE } from '@/utils/tailwind';\n\nexport type ToggletipTexts = {\n    label: string;\n};\n\nexport type ToggletipSize = 'sm' | 'md' | 'lg';\n\nconst TRIGGER_SIZE_CLASSNAME: Record<ToggletipSize, string> = {\n    sm: 'size-[18px]',\n    md: 'size-5',\n    lg: 'size-6',\n};\n\nconst TRIGGER_ICON_SIZE_CLASSNAME: Record<ToggletipSize, string> = {\n    sm: '!size-[18px]',\n    md: '!size-5',\n    lg: '!size-6',\n};\n\nexport type ToggletipProps = {\n    size?: ToggletipSize;\n    children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\n    placement?: Placement;\n};\n\nexport const Toggletip = React.forwardRef<HTMLButtonElement, ToggletipProps>(function Toggletip(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        size = 'md',\n        children,\n        placement = 'top',\n        className: _className,\n        style: _style,\n    } = props as ToggletipProps & { className?: string; style?: React.CSSProperties };\n\n    const { texts } = useLocalization();\n\n    const output =\n        typeof children === 'function' ? (\n            <PopoverPrimitive.Close render={<RenderPropWrapper>{children}</RenderPropWrapper>} />\n        ) : (\n            children\n        );\n\n    return (\n        <PopoverPrimitive.Root>\n            <PopoverPrimitive.Trigger\n                ref={ref}\n                render={\n                    <BareButton\n                        data-taco=\"toggletip\"\n                        className={cn(\n                            'flex flex-shrink-0 cursor-pointer items-center justify-center rounded text-black hover:bg-gray-100 data-[popup-open]:bg-gray-200',\n                            TRIGGER_SIZE_CLASSNAME[size]\n                        )}>\n                        <span aria-hidden=\"true\" className=\"inline-flex items-center leading-none\" data-taco=\"toggletip-icon\">\n                            <Icon name=\"circle-information\" className={TRIGGER_ICON_SIZE_CLASSNAME[size]} />\n                        </span>\n                        <span className=\"sr-only\" data-taco=\"toggletip-label\">\n                            {texts.toggletip.label}\n                        </span>\n                    </BareButton>\n                }\n            />\n            <PopoverPrimitive.Portal>\n                <PopoverPrimitive.Positioner side={placement} sideOffset={8}>\n                    <PopoverPrimitive.Popup\n                        className={cn('max-w-xs', POPOVER_CLASSNAMES, 'focus:border-blue-300')}\n                        data-taco=\"toggletip-content\">\n                        <PopoverPrimitive.Arrow className={ARROW_TIP_POSITION_WIDE}>\n                            <ArrowTip\n                                outerFill=\"fill-[canvas]\"\n                                innerFill=\"fill-gray-100 group-focus:fill-blue-300\"\n                                focusFill=\"group-focus:fill-none\"\n                            />\n                        </PopoverPrimitive.Arrow>\n                        {output}\n                    </PopoverPrimitive.Popup>\n                </PopoverPrimitive.Positioner>\n            </PopoverPrimitive.Portal>\n        </PopoverPrimitive.Root>\n    );\n});\n"],"names":["Toggletip","PopoverPrimitive"],"mappings":";;;;;;;;;;AAmBA,MAAM,yBAAwD;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEA,MAAM,8BAA6D;AAAA,EAC/D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAQO,MAAM,YAAY,MAAM,WAA8C,SAASA,WAAU,OAAO,KAAK;AAExG,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,OAAO;AAAA,EAAA,IACP;AAEJ,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,QAAM,SACF,OAAO,aAAa,aAChB,sBAAA,cAACC,QAAiB,OAAjB,EAAuB,QAAQ,sBAAA,cAAC,mBAAA,MAAmB,QAAS,GAAsB,IAEnF;AAGR,SACI,sBAAA,cAACA,QAAiB,MAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG;AAAA,MACA,QACI,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,aAAU;AAAA,UACV,WAAW;AAAA,YACP;AAAA,YACA,uBAAuB,IAAI;AAAA,UAAA;AAAA,QAC/B;AAAA,4CACC,QAAA,EAAK,eAAY,QAAO,WAAU,yCAAwC,aAAU,iBAAA,GACjF,sBAAA,cAAC,MAAA,EAAK,MAAK,sBAAqB,WAAW,4BAA4B,IAAI,GAAG,CAClF;AAAA,QACA,sBAAA,cAAC,UAAK,WAAU,WAAU,aAAU,kBAAA,GAC/B,MAAM,UAAU,KACrB;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA,GAGR,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA,cAACA,QAAiB,YAAjB,EAA4B,MAAM,WAAW,YAAY,EAAA,GACtD,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,WAAW,GAAG,YAAY,oBAAoB,uBAAuB;AAAA,MACrE,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA,cAACA,QAAiB,OAAjB,EAAuB,WAAW,wBAAA,GAC/B,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,WAAU;AAAA,QACV,WAAU;AAAA,MAAA;AAAA,IAAA,CAElB;AAAA,IACC;AAAA,EAAA,CAET,CACJ,CACJ;AAER,CAAC;"}

package/dist/components/Tooltip/Tooltip.cjs

@@ -3,6 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tooltip = require("@base-ui/react/tooltip");
 const cn = require("clsx");
 const React = require("react");
+const ArrowTip = require("../../primitives/ArrowTip/ArrowTip.cjs");
+const tailwind = require("../../utils/tailwind.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -36,25 +38,7 @@ const Tooltip = React__namespace.forwardRef(function Tooltip2(props, ref) {
       ),
       "data-taco": "tooltip"
     },
-    /* @__PURE__ */ React__namespace.createElement(tooltip.Tooltip.Arrow, { className: "data-[side=bottom]:top-[-5px] data-[side=left]:right-[-10px] data-[side=right]:left-[-10px] data-[side=top]:bottom-[-5px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React__namespace.createElement("svg", { width: "20", height: "10", viewBox: "0 0 20 10" }, /* @__PURE__ */ React__namespace.createElement(
-      "path",
-      {
-        d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-        className: "fill-gray-900"
-      }
-    ), /* @__PURE__ */ React__namespace.createElement(
-      "path",
-      {
-        d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
-        className: "fill-gray-900"
-      }
-    ), /* @__PURE__ */ React__namespace.createElement(
-      "path",
-      {
-        className: "fill-gray-900",
-        d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-      }
-    ))),
+    /* @__PURE__ */ React__namespace.createElement(tooltip.Tooltip.Arrow, { className: tailwind.ARROW_TIP_POSITION_TIGHT }, /* @__PURE__ */ React__namespace.createElement(ArrowTip.ArrowTip, { outerFill: "fill-gray-900" })),
     title
   ))));
 });

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement<{ id?: string }>;\n\n    /** Use this value to hide tooltip conditionally */\n    hide?: boolean;\n    /** Text displayed in the tooltip */\n    title: string | React.JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, hide = false, ...otherProps } = props;\n    const className = cn('break-words', otherProps.className);\n\n    if (hide) {\n        return children;\n    }\n\n    return (\n        <TooltipPrimitive.Root>\n            {/* the trigger id must match the rendered element's id attribute - base-ui registers the trigger\n                under its own id, but an id on `children` overrides it on the DOM node, and base-ui@1.6 then\n                treats the open tooltip's trigger as unmounted and immediately closes it */}\n            <TooltipPrimitive.Trigger delay={250} id={children.props.id} ref={ref as any} render={children} />\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Positioner side={placement} sideOffset={8}>\n                    <TooltipPrimitive.Popup\n                        {...otherProps}\n                        className={cn(\n                            'max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-gray-900 px-2 py-1 text-xs text-white xs:max-w-[theme(spacing.56)] print:hidden',\n                            className\n                        )}\n                        data-taco=\"tooltip\">\n                        <TooltipPrimitive.Arrow className=\"data-[side=bottom]:top-[-5px] data-[side=left]:right-[-10px] data-[side=right]:left-[-10px] data-[side=top]:bottom-[-5px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n                            <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\">\n                                <path\n                                    d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                                    className=\"fill-gray-900\"\n                                />\n                                <path\n                                    d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                                    className=\"fill-gray-900\"\n                                />\n                                <path\n                                    className=\"fill-gray-900\"\n                                    d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                                />\n                            </svg>\n                        </TooltipPrimitive.Arrow>\n                        {title}\n                    </TooltipPrimitive.Popup>\n                </TooltipPrimitive.Positioner>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["React","Tooltip","TooltipPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,UAAUA,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAA6B;AACvG,QAAM,EAAE,OAAO,UAAU,WAAW,OAAO,OAAO,GAAG,eAAe;AACpE,QAAM,YAAY,GAAG,eAAe,WAAW,SAAS;AAExD,MAAI,MAAM;AACN,WAAO;AAAA,EACX;AAEA,SACID,iCAAA,cAACE,QAAAA,QAAiB,MAAjB,MAIGF,iCAAA,cAACE,QAAAA,QAAiB,SAAjB,EAAyB,OAAO,KAAK,IAAI,SAAS,MAAM,IAAI,KAAiB,QAAQ,SAAA,CAAU,GAChGF,iCAAA,cAACE,QAAAA,QAAiB,QAAjB,MACGF,iCAAA,cAACE,QAAAA,QAAiB,YAAjB,EAA4B,MAAM,WAAW,YAAY,EAAA,GACtDF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MAAA;AAAA,MAEJ,aAAU;AAAA,IAAA;AAAA,IACVF,iCAAA,cAACE,QAAAA,QAAiB,OAAjB,EAAuB,WAAU,+MAAA,GAC9BF,iCAAA,cAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,YAAA,GAChCA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA,GAEdA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA,GAEdA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,GAAE;AAAA,MAAA;AAAA,IAAA,CAEV,CACJ;AAAA,IACC;AAAA,EAAA,CAET,CACJ,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { ArrowTip } from '@/primitives/ArrowTip/ArrowTip';\nimport { ARROW_TIP_POSITION_TIGHT } from '@/utils/tailwind';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement<{ id?: string }>;\n\n    /** Use this value to hide tooltip conditionally */\n    hide?: boolean;\n    /** Text displayed in the tooltip */\n    title: string | React.JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, hide = false, ...otherProps } = props;\n    const className = cn('break-words', otherProps.className);\n\n    if (hide) {\n        return children;\n    }\n\n    return (\n        <TooltipPrimitive.Root>\n            {/* the trigger id must match the rendered element's id attribute - base-ui registers the trigger\n                under its own id, but an id on `children` overrides it on the DOM node, and base-ui@1.6 then\n                treats the open tooltip's trigger as unmounted and immediately closes it */}\n            <TooltipPrimitive.Trigger delay={250} id={children.props.id} ref={ref as any} render={children} />\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Positioner side={placement} sideOffset={8}>\n                    <TooltipPrimitive.Popup\n                        {...otherProps}\n                        className={cn(\n                            'max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-gray-900 px-2 py-1 text-xs text-white xs:max-w-[theme(spacing.56)] print:hidden',\n                            className\n                        )}\n                        data-taco=\"tooltip\">\n                        <TooltipPrimitive.Arrow className={ARROW_TIP_POSITION_TIGHT}>\n                            <ArrowTip outerFill=\"fill-gray-900\" />\n                        </TooltipPrimitive.Arrow>\n                        {title}\n                    </TooltipPrimitive.Popup>\n                </TooltipPrimitive.Positioner>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["React","Tooltip","TooltipPrimitive","ARROW_TIP_POSITION_TIGHT","ArrowTip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,UAAUA,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAA6B;AACvG,QAAM,EAAE,OAAO,UAAU,WAAW,OAAO,OAAO,GAAG,eAAe;AACpE,QAAM,YAAY,GAAG,eAAe,WAAW,SAAS;AAExD,MAAI,MAAM;AACN,WAAO;AAAA,EACX;AAEA,SACID,iCAAA,cAACE,QAAAA,QAAiB,MAAjB,MAIGF,iCAAA,cAACE,QAAAA,QAAiB,SAAjB,EAAyB,OAAO,KAAK,IAAI,SAAS,MAAM,IAAI,KAAiB,QAAQ,SAAA,CAAU,GAChGF,iCAAA,cAACE,QAAAA,QAAiB,QAAjB,MACGF,iCAAA,cAACE,QAAAA,QAAiB,YAAjB,EAA4B,MAAM,WAAW,YAAY,EAAA,GACtDF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MAAA;AAAA,MAEJ,aAAU;AAAA,IAAA;AAAA,IACVF,iCAAA,cAACE,QAAAA,QAAiB,OAAjB,EAAuB,WAAWC,SAAAA,4BAC/BH,iCAAA,cAACI,SAAAA,UAAA,EAAS,WAAU,gBAAA,CAAgB,CACxC;AAAA,IACC;AAAA,EAAA,CAET,CACJ,CACJ;AAER,CAAC;;"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,6 +1,8 @@
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import cn from "clsx";
 import * as React from "react";
+import { ArrowTip } from "../../primitives/ArrowTip/ArrowTip.js";
+import { ARROW_TIP_POSITION_TIGHT } from "../../utils/tailwind.js";
 const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
   const { title, children, placement, hide = false, ...otherProps } = props;
   const className = cn("break-words", otherProps.className);
@@ -17,25 +19,7 @@ const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
       ),
       "data-taco": "tooltip"
     },
-    /* @__PURE__ */ React.createElement(Tooltip$1.Arrow, { className: "data-[side=bottom]:top-[-5px] data-[side=left]:right-[-10px] data-[side=right]:left-[-10px] data-[side=top]:bottom-[-5px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React.createElement("svg", { width: "20", height: "10", viewBox: "0 0 20 10" }, /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-        className: "fill-gray-900"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
-        className: "fill-gray-900"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        className: "fill-gray-900",
-        d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-      }
-    ))),
+    /* @__PURE__ */ React.createElement(Tooltip$1.Arrow, { className: ARROW_TIP_POSITION_TIGHT }, /* @__PURE__ */ React.createElement(ArrowTip, { outerFill: "fill-gray-900" })),
     title
   ))));
 });

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement<{ id?: string }>;\n\n    /** Use this value to hide tooltip conditionally */\n    hide?: boolean;\n    /** Text displayed in the tooltip */\n    title: string | React.JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, hide = false, ...otherProps } = props;\n    const className = cn('break-words', otherProps.className);\n\n    if (hide) {\n        return children;\n    }\n\n    return (\n        <TooltipPrimitive.Root>\n            {/* the trigger id must match the rendered element's id attribute - base-ui registers the trigger\n                under its own id, but an id on `children` overrides it on the DOM node, and base-ui@1.6 then\n                treats the open tooltip's trigger as unmounted and immediately closes it */}\n            <TooltipPrimitive.Trigger delay={250} id={children.props.id} ref={ref as any} render={children} />\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Positioner side={placement} sideOffset={8}>\n                    <TooltipPrimitive.Popup\n                        {...otherProps}\n                        className={cn(\n                            'max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-gray-900 px-2 py-1 text-xs text-white xs:max-w-[theme(spacing.56)] print:hidden',\n                            className\n                        )}\n                        data-taco=\"tooltip\">\n                        <TooltipPrimitive.Arrow className=\"data-[side=bottom]:top-[-5px] data-[side=left]:right-[-10px] data-[side=right]:left-[-10px] data-[side=top]:bottom-[-5px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n                            <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\">\n                                <path\n                                    d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                                    className=\"fill-gray-900\"\n                                />\n                                <path\n                                    d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                                    className=\"fill-gray-900\"\n                                />\n                                <path\n                                    className=\"fill-gray-900\"\n                                    d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                                />\n                            </svg>\n                        </TooltipPrimitive.Arrow>\n                        {title}\n                    </TooltipPrimitive.Popup>\n                </TooltipPrimitive.Positioner>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","TooltipPrimitive"],"mappings":";;;AAmBO,MAAM,UAAU,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAA6B;AACvG,QAAM,EAAE,OAAO,UAAU,WAAW,OAAO,OAAO,GAAG,eAAe;AACpE,QAAM,YAAY,GAAG,eAAe,WAAW,SAAS;AAExD,MAAI,MAAM;AACN,WAAO;AAAA,EACX;AAEA,SACI,sBAAA,cAACC,UAAiB,MAAjB,MAIG,sBAAA,cAACA,UAAiB,SAAjB,EAAyB,OAAO,KAAK,IAAI,SAAS,MAAM,IAAI,KAAiB,QAAQ,SAAA,CAAU,GAChG,sBAAA,cAACA,UAAiB,QAAjB,MACG,sBAAA,cAACA,UAAiB,YAAjB,EAA4B,MAAM,WAAW,YAAY,EAAA,GACtD,sBAAA;AAAA,IAACA,UAAiB;AAAA,IAAjB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MAAA;AAAA,MAEJ,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA,cAACA,UAAiB,OAAjB,EAAuB,WAAU,+MAAA,GAC9B,sBAAA,cAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,YAAA,GAChC,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA,GAEd,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA,GAEd,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,GAAE;AAAA,MAAA;AAAA,IAAA,CAEV,CACJ;AAAA,IACC;AAAA,EAAA,CAET,CACJ,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { ArrowTip } from '@/primitives/ArrowTip/ArrowTip';\nimport { ARROW_TIP_POSITION_TIGHT } from '@/utils/tailwind';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement<{ id?: string }>;\n\n    /** Use this value to hide tooltip conditionally */\n    hide?: boolean;\n    /** Text displayed in the tooltip */\n    title: string | React.JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, hide = false, ...otherProps } = props;\n    const className = cn('break-words', otherProps.className);\n\n    if (hide) {\n        return children;\n    }\n\n    return (\n        <TooltipPrimitive.Root>\n            {/* the trigger id must match the rendered element's id attribute - base-ui registers the trigger\n                under its own id, but an id on `children` overrides it on the DOM node, and base-ui@1.6 then\n                treats the open tooltip's trigger as unmounted and immediately closes it */}\n            <TooltipPrimitive.Trigger delay={250} id={children.props.id} ref={ref as any} render={children} />\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Positioner side={placement} sideOffset={8}>\n                    <TooltipPrimitive.Popup\n                        {...otherProps}\n                        className={cn(\n                            'max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-gray-900 px-2 py-1 text-xs text-white xs:max-w-[theme(spacing.56)] print:hidden',\n                            className\n                        )}\n                        data-taco=\"tooltip\">\n                        <TooltipPrimitive.Arrow className={ARROW_TIP_POSITION_TIGHT}>\n                            <ArrowTip outerFill=\"fill-gray-900\" />\n                        </TooltipPrimitive.Arrow>\n                        {title}\n                    </TooltipPrimitive.Popup>\n                </TooltipPrimitive.Positioner>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","TooltipPrimitive"],"mappings":";;;;;AAsBO,MAAM,UAAU,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAA6B;AACvG,QAAM,EAAE,OAAO,UAAU,WAAW,OAAO,OAAO,GAAG,eAAe;AACpE,QAAM,YAAY,GAAG,eAAe,WAAW,SAAS;AAExD,MAAI,MAAM;AACN,WAAO;AAAA,EACX;AAEA,SACI,sBAAA,cAACC,UAAiB,MAAjB,MAIG,sBAAA,cAACA,UAAiB,SAAjB,EAAyB,OAAO,KAAK,IAAI,SAAS,MAAM,IAAI,KAAiB,QAAQ,SAAA,CAAU,GAChG,sBAAA,cAACA,UAAiB,QAAjB,MACG,sBAAA,cAACA,UAAiB,YAAjB,EAA4B,MAAM,WAAW,YAAY,EAAA,GACtD,sBAAA;AAAA,IAACA,UAAiB;AAAA,IAAjB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MAAA;AAAA,MAEJ,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA,cAACA,UAAiB,OAAjB,EAAuB,WAAW,4BAC/B,sBAAA,cAAC,UAAA,EAAS,WAAU,gBAAA,CAAgB,CACxC;AAAA,IACC;AAAA,EAAA,CAET,CACJ,CACJ;AAER,CAAC;"}

package/dist/components/index.d.ts

@@ -49,6 +49,7 @@ export * from './Tabs/Tabs';
 export * from './Tag/Tag';
 export * from './Textarea/Textarea';
 export * from './Toast/Toaster';
+export * from './Toggletip/Toggletip';
 export * from './Tooltip/Tooltip';
 export * from './Tour/Tour';
 export * from './Truncate/Truncate';

package/dist/index.cjs

@@ -85,6 +85,7 @@ const Tag = require("./components/Tag/Tag.cjs");
 const Text = require("./components/Typography/Text.cjs");
 const Textarea = require("./components/Textarea/Textarea.cjs");
 const Toaster = require("./components/Toast/Toaster.cjs");
+const Toggletip = require("./components/Toggletip/Toggletip.cjs");
 const Tooltip = require("./components/Tooltip/Tooltip.cjs");
 const Tour = require("./components/Tour/Tour.cjs");
 const Truncate = require("./components/Truncate/Truncate.cjs");
@@ -176,6 +177,7 @@ exports.OverflowGroup = OverflowGroup.OverflowGroup;
 exports.Pagination = Pagination.Pagination;
 exports.PieChart = PieChart.PieChart;
 exports.Popover = Popover.Popover;
+exports.RenderPropWrapper = Popover.RenderPropWrapper;
 exports.Progress = Progress.Progress;
 exports.Provider = Provider.Provider;
 exports.TacoContext = Provider.TacoContext;
@@ -196,6 +198,7 @@ exports.Text = Text.Text;
 exports.Textarea = Textarea.Textarea;
 exports.ToastProvider = Toaster.ToastProvider;
 exports.useToast = Toaster.useToast;
+exports.Toggletip = Toggletip.Toggletip;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Tour = Tour.Tour;
 exports.TourStep = Tour.TourStep;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -64,7 +64,7 @@ import { Navigation2 } from "./components/Navigation2/Navigation2.js";
 import { OverflowGroup } from "./components/OverflowGroup/OverflowGroup.js";
 import { Pagination } from "./components/Pagination/Pagination.js";
 import { PieChart } from "./charts/components/Pie/PieChart.js";
-import { Popover } from "./components/Popover/Popover.js";
+import { Popover, RenderPropWrapper } from "./components/Popover/Popover.js";
 import { Progress } from "./components/Progress/Progress.js";
 import { Provider, TacoContext } from "./components/Provider/Provider.js";
 import { RadioGroup } from "./components/RadioGroup/RadioGroup.js";
@@ -83,6 +83,7 @@ import { Tag } from "./components/Tag/Tag.js";
 import { Text } from "./components/Typography/Text.js";
 import { Textarea } from "./components/Textarea/Textarea.js";
 import { ToastProvider, useToast } from "./components/Toast/Toaster.js";
+import { Toggletip } from "./components/Toggletip/Toggletip.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 import { Tour, TourStep } from "./components/Tour/Tour.js";
 import { Truncate } from "./components/Truncate/Truncate.js";
@@ -146,6 +147,7 @@ export {
   Progress,
   Provider,
   RadioGroup,
+  RenderPropWrapper,
   Report,
   SearchInput,
   SearchInput2,
@@ -164,6 +166,7 @@ export {
   Textarea,
   Title,
   ToastProvider,
+  Toggletip,
   Tooltip,
   Tour,
   TourStep,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/primitives/ArrowTip/ArrowTip.cjs

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function ArrowTip({ outerFill, innerFill = outerFill, focusFill = innerFill }) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", { "aria-hidden": "true", width: "20", height: "10", viewBox: "0 0 20 10", fill: "none" }, /* @__PURE__ */ React__namespace.createElement(
+    "path",
+    {
+      className: outerFill,
+      d: "M9.33104 2.60207L4.47425 6.97318C3.73975 7.63423 2.78656 8 1.79839 8H0V10H20V8H18.20157C17.21347 8 16.26027 7.63423 15.52577 6.97318L10.66897 2.60207C10.28867 2.2598 9.71137 2.25979 9.33104 2.60207Z"
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(
+    "path",
+    {
+      className: innerFill,
+      d: "M8.66209 1.85876C9.42271 1.17425 10.57727 1.17422 11.33797 1.85878L16.19477 6.22989C16.74557 6.72568 17.46047 7.00001 18.20157 7.00001L15.55667 7L10.66897 2.60207C10.28867 2.2598 9.71137 2.2598 9.33103 2.60207L4.44401 7L1.79839 7.00001C2.53951 7.00001 3.25441 6.72568 3.80528 6.22989L8.66209 1.85876Z"
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(
+    "path",
+    {
+      className: focusFill,
+      d: "M10 3.34539L5.14321 7.71648C4.22509 8.54279 3.0336 9 1.79839 9H0V8H1.79839C2.78656 8 3.73975 7.63423 4.47425 6.97318L9.33104 2.60207C9.71137 2.25979 10.28867 2.2598 10.66897 2.60207L15.52577 6.97318C16.26027 7.63423 17.21347 8 18.20157 8H20V9H18.20157C16.96647 9 15.77497 8.54278 14.85677 7.71648L10 3.34539Z"
+    }
+  ));
+}
+exports.ArrowTip = ArrowTip;
+//# sourceMappingURL=ArrowTip.cjs.map

package/dist/primitives/ArrowTip/ArrowTip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowTip.cjs","sources":["../../../src/primitives/ArrowTip/ArrowTip.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type ArrowTipProps = {\n    /** Fill class for the outer, canvas-facing triangle. */\n    outerFill: string;\n    /** Fill class for the middle triangle (the border ring on a light card). Defaults to `outerFill`. */\n    innerFill?: string;\n    /** Fill class for the innermost triangle (the focus-ring layer on a light card). Defaults to `innerFill`. */\n    focusFill?: string;\n};\n\nexport function ArrowTip({ outerFill, innerFill = outerFill, focusFill = innerFill }: ArrowTipProps) {\n    return (\n        <svg aria-hidden=\"true\" width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                className={outerFill}\n                d=\"M9.33104 2.60207L4.47425 6.97318C3.73975 7.63423 2.78656 8 1.79839 8H0V10H20V8H18.20157C17.21347 8 16.26027 7.63423 15.52577 6.97318L10.66897 2.60207C10.28867 2.2598 9.71137 2.25979 9.33104 2.60207Z\"\n            />\n            <path\n                className={innerFill}\n                d=\"M8.66209 1.85876C9.42271 1.17425 10.57727 1.17422 11.33797 1.85878L16.19477 6.22989C16.74557 6.72568 17.46047 7.00001 18.20157 7.00001L15.55667 7L10.66897 2.60207C10.28867 2.2598 9.71137 2.2598 9.33103 2.60207L4.44401 7L1.79839 7.00001C2.53951 7.00001 3.25441 6.72568 3.80528 6.22989L8.66209 1.85876Z\"\n            />\n            <path\n                className={focusFill}\n                d=\"M10 3.34539L5.14321 7.71648C4.22509 8.54279 3.0336 9 1.79839 9H0V8H1.79839C2.78656 8 3.73975 7.63423 4.47425 6.97318L9.33104 2.60207C9.71137 2.25979 10.28867 2.2598 10.66897 2.60207L15.52577 6.97318C16.26027 7.63423 17.21347 8 18.20157 8H20V9H18.20157C16.96647 9 15.77497 8.54278 14.85677 7.71648L10 3.34539Z\"\n            />\n        </svg>\n    );\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAWO,SAAS,SAAS,EAAE,WAAW,YAAY,WAAW,YAAY,aAA4B;AACjG,SACIA,iCAAA,cAAC,OAAA,EAAI,eAAY,QAAO,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,OAAA,GACpEA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,GAAE;AAAA,IAAA;AAAA,EAAA,GAENA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,GAAE;AAAA,IAAA;AAAA,EAAA,GAENA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,GAAE;AAAA,IAAA;AAAA,EAAA,CAEV;AAER;;"}

package/dist/primitives/ArrowTip/ArrowTip.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export type ArrowTipProps = {
+    /** Fill class for the outer, canvas-facing triangle. */
+    outerFill: string;
+    /** Fill class for the middle triangle (the border ring on a light card). Defaults to `outerFill`. */
+    innerFill?: string;
+    /** Fill class for the innermost triangle (the focus-ring layer on a light card). Defaults to `innerFill`. */
+    focusFill?: string;
+};
+export declare function ArrowTip({ outerFill, innerFill, focusFill }: ArrowTipProps): React.JSX.Element;

package/dist/primitives/ArrowTip/ArrowTip.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+function ArrowTip({ outerFill, innerFill = outerFill, focusFill = innerFill }) {
+  return /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", width: "20", height: "10", viewBox: "0 0 20 10", fill: "none" }, /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      className: outerFill,
+      d: "M9.33104 2.60207L4.47425 6.97318C3.73975 7.63423 2.78656 8 1.79839 8H0V10H20V8H18.20157C17.21347 8 16.26027 7.63423 15.52577 6.97318L10.66897 2.60207C10.28867 2.2598 9.71137 2.25979 9.33104 2.60207Z"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      className: innerFill,
+      d: "M8.66209 1.85876C9.42271 1.17425 10.57727 1.17422 11.33797 1.85878L16.19477 6.22989C16.74557 6.72568 17.46047 7.00001 18.20157 7.00001L15.55667 7L10.66897 2.60207C10.28867 2.2598 9.71137 2.2598 9.33103 2.60207L4.44401 7L1.79839 7.00001C2.53951 7.00001 3.25441 6.72568 3.80528 6.22989L8.66209 1.85876Z"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      className: focusFill,
+      d: "M10 3.34539L5.14321 7.71648C4.22509 8.54279 3.0336 9 1.79839 9H0V8H1.79839C2.78656 8 3.73975 7.63423 4.47425 6.97318L9.33104 2.60207C9.71137 2.25979 10.28867 2.2598 10.66897 2.60207L15.52577 6.97318C16.26027 7.63423 17.21347 8 18.20157 8H20V9H18.20157C16.96647 9 15.77497 8.54278 14.85677 7.71648L10 3.34539Z"
+    }
+  ));
+}
+export {
+  ArrowTip
+};
+//# sourceMappingURL=ArrowTip.js.map

package/dist/primitives/ArrowTip/ArrowTip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowTip.js","sources":["../../../src/primitives/ArrowTip/ArrowTip.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type ArrowTipProps = {\n    /** Fill class for the outer, canvas-facing triangle. */\n    outerFill: string;\n    /** Fill class for the middle triangle (the border ring on a light card). Defaults to `outerFill`. */\n    innerFill?: string;\n    /** Fill class for the innermost triangle (the focus-ring layer on a light card). Defaults to `innerFill`. */\n    focusFill?: string;\n};\n\nexport function ArrowTip({ outerFill, innerFill = outerFill, focusFill = innerFill }: ArrowTipProps) {\n    return (\n        <svg aria-hidden=\"true\" width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                className={outerFill}\n                d=\"M9.33104 2.60207L4.47425 6.97318C3.73975 7.63423 2.78656 8 1.79839 8H0V10H20V8H18.20157C17.21347 8 16.26027 7.63423 15.52577 6.97318L10.66897 2.60207C10.28867 2.2598 9.71137 2.25979 9.33104 2.60207Z\"\n            />\n            <path\n                className={innerFill}\n                d=\"M8.66209 1.85876C9.42271 1.17425 10.57727 1.17422 11.33797 1.85878L16.19477 6.22989C16.74557 6.72568 17.46047 7.00001 18.20157 7.00001L15.55667 7L10.66897 2.60207C10.28867 2.2598 9.71137 2.2598 9.33103 2.60207L4.44401 7L1.79839 7.00001C2.53951 7.00001 3.25441 6.72568 3.80528 6.22989L8.66209 1.85876Z\"\n            />\n            <path\n                className={focusFill}\n                d=\"M10 3.34539L5.14321 7.71648C4.22509 8.54279 3.0336 9 1.79839 9H0V8H1.79839C2.78656 8 3.73975 7.63423 4.47425 6.97318L9.33104 2.60207C9.71137 2.25979 10.28867 2.2598 10.66897 2.60207L15.52577 6.97318C16.26027 7.63423 17.21347 8 18.20157 8H20V9H18.20157C16.96647 9 15.77497 8.54278 14.85677 7.71648L10 3.34539Z\"\n            />\n        </svg>\n    );\n}\n"],"names":[],"mappings":";AAWO,SAAS,SAAS,EAAE,WAAW,YAAY,WAAW,YAAY,aAA4B;AACjG,SACI,sBAAA,cAAC,OAAA,EAAI,eAAY,QAAO,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,OAAA,GACpE,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,GAAE;AAAA,IAAA;AAAA,EAAA,GAEN,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,GAAE;AAAA,IAAA;AAAA,EAAA,GAEN,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,GAAE;AAAA,IAAA;AAAA,EAAA,CAEV;AAER;"}

package/dist/primitives/BareButton/BareButton.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const cn = require("clsx");
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const RESET_CLASSNAME = "m-0 appearance-none border-0 p-0 text-left text-inherit [font:inherit] focus-visible:yt-focus cursor-auto";
+const BareButton = React__namespace.forwardRef(function BareButton2(props, ref) {
+  const { type = "button", className, ...otherProps } = props;
+  return /* @__PURE__ */ React__namespace.createElement("button", { ...otherProps, type, className: cn(RESET_CLASSNAME, className), ref });
+});
+exports.BareButton = BareButton;
+//# sourceMappingURL=BareButton.cjs.map

package/dist/primitives/BareButton/BareButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BareButton.cjs","sources":["../../../src/primitives/BareButton/BareButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nexport type BareButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactNode;\n};\n\n/** Explicitly undoes the native `<button>` styling (background, border, font, spacing) instead of implicitly relying on the global CSS reset. */\nconst RESET_CLASSNAME =\n    'm-0 appearance-none border-0 p-0 text-left text-inherit [font:inherit] focus-visible:yt-focus cursor-auto';\n\nexport const BareButton = React.forwardRef<HTMLButtonElement, BareButtonProps>(function BareButton(props, ref) {\n    const { type = 'button', className, ...otherProps } = props;\n\n    return <button {...otherProps} type={type} className={cn(RESET_CLASSNAME, className)} ref={ref} />;\n});\n"],"names":["React","BareButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,kBACF;AAEG,MAAM,aAAaA,iBAAM,WAA+C,SAASC,YAAW,OAAO,KAAK;AAC3G,QAAM,EAAE,OAAO,UAAU,WAAW,GAAG,eAAe;AAEtD,SAAOD,iCAAA,cAAC,UAAA,EAAQ,GAAG,YAAY,MAAY,WAAW,GAAG,iBAAiB,SAAS,GAAG,IAAA,CAAU;AACpG,CAAC;;"}

package/dist/primitives/BareButton/BareButton.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export type BareButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: React.ReactNode;
+};
+export declare const BareButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/primitives/BareButton/BareButton.js

@@ -0,0 +1,11 @@
+import cn from "clsx";
+import * as React from "react";
+const RESET_CLASSNAME = "m-0 appearance-none border-0 p-0 text-left text-inherit [font:inherit] focus-visible:yt-focus cursor-auto";
+const BareButton = React.forwardRef(function BareButton2(props, ref) {
+  const { type = "button", className, ...otherProps } = props;
+  return /* @__PURE__ */ React.createElement("button", { ...otherProps, type, className: cn(RESET_CLASSNAME, className), ref });
+});
+export {
+  BareButton
+};
+//# sourceMappingURL=BareButton.js.map

package/dist/primitives/BareButton/BareButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BareButton.js","sources":["../../../src/primitives/BareButton/BareButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nexport type BareButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactNode;\n};\n\n/** Explicitly undoes the native `<button>` styling (background, border, font, spacing) instead of implicitly relying on the global CSS reset. */\nconst RESET_CLASSNAME =\n    'm-0 appearance-none border-0 p-0 text-left text-inherit [font:inherit] focus-visible:yt-focus cursor-auto';\n\nexport const BareButton = React.forwardRef<HTMLButtonElement, BareButtonProps>(function BareButton(props, ref) {\n    const { type = 'button', className, ...otherProps } = props;\n\n    return <button {...otherProps} type={type} className={cn(RESET_CLASSNAME, className)} ref={ref} />;\n});\n"],"names":["BareButton"],"mappings":";;AAQA,MAAM,kBACF;AAEG,MAAM,aAAa,MAAM,WAA+C,SAASA,YAAW,OAAO,KAAK;AAC3G,QAAM,EAAE,OAAO,UAAU,WAAW,GAAG,eAAe;AAEtD,SAAO,sBAAA,cAAC,UAAA,EAAQ,GAAG,YAAY,MAAY,WAAW,GAAG,iBAAiB,SAAS,GAAG,IAAA,CAAU;AACpG,CAAC;"}