npm - @plexui/ui - Versions diffs - 0.19.1 → 0.20.0 - Mend

@plexui/ui 0.19.1 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (401) hide show

package/README.md CHANGED Viewed

@@ -2,9 +2,7 @@
 A modern React component library with 35 production-ready components, 14 hooks, a three-layer design token system, and a unified 9-step size scale — all powered by Radix primitives and Tailwind CSS 4.
-[Documentation](https://plexui.com) &bull; [GitHub](https://github.com/plex-ui/docs) &bull; [Figma Kit](https://plexui.com/#pricing)
-> **Figma Design System PRO** — 22,000+ variants, all on Figma Variables. [Get the kit &rarr;](https://plexui.com/#pricing)
+[Documentation](https://plexui.com) &bull; [GitHub](https://github.com/plex-ui/ui)
 ---

package/dist/es/components/Accordion/Accordion.js CHANGED Viewed

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import {} from "react";
 import { Accordion as RadixAccordion } from "radix-ui";
-import { ChevronDownMd } from "../Icon";
-import s from "./Accordion.module.css";
+import { ChevronDownMd } from "../Icon/index.js";
+import s from "@plexui/styles/components/Accordion/Accordion.module.css";
 const AccordionRoot = ({ className, ...restProps }) => (_jsx(RadixAccordion.Root, { className: clsx(s.Root, className), ...restProps }));
 const AccordionItem = ({ className, ...restProps }) => (_jsx(RadixAccordion.Item, { className: clsx(s.Item, className), ...restProps }));
 const AccordionTrigger = ({ className, children, ref, ...restProps }) => (_jsx(RadixAccordion.Header, { className: s.Header, children: _jsxs(RadixAccordion.Trigger, { ref: ref, className: clsx(s.Trigger, className), ...restProps, children: [children, _jsx(ChevronDownMd, { className: s.Chevron, "aria-hidden": true })] }) }));

package/dist/es/components/Accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAiC,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,CAAC,MAAM,~~wBAAwB~~,CAAA;~~AAUtC~~,MAAM,aAAa,GAAG,CAAC,EACrB,SAAS,EACT,GAAG,SAAS,EACG,EAAE,EAAE,CAAC,CACpB,KAAC,cAAc,CAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAC3E,CAAA;AAUD,MAAM,aAAa,GAAG,CAAC,EACrB,SAAS,EACT,GAAG,SAAS,EACO,EAAE,EAAE,CAAC,CACxB,KAAC,cAAc,CAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAC3E,CAAA;AAaD,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,SAAS,EACU,EAAE,EAAE,CAAC,CAC3B,KAAC,cAAc,CAAC,MAAM,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,YACxC,MAAC,cAAc,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,KACjC,SAAS,aAEZ,QAAQ,EACT,KAAC,aAAa,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,wBAAgB,IAC5B,GACH,CACzB,CAAA;AAYD,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACU,EAAE,EAAE,CAAC,CAC3B,KAAC,cAAc,CAAC,OAAO,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,KAAM,SAAS,YAC1E,cAAK,SAAS,EAAE,CAAC,CAAC,YAAY,YAAG,QAAQ,GAAO,GACzB,CAC1B,CAAA;AAYD,MAAM,CAAC,MAAM,SAAS,GAAG,aAAmC,CAAA;AAC5D,SAAS,CAAC,IAAI,GAAG,aAAa,CAAA;AAC9B,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAA;AACpC,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps, type Ref } from \"react\"\nimport { Accordion as RadixAccordion } from \"radix-ui\"\nimport { ChevronDownMd } from \"../Icon\"\nimport s from \"./Accordion.module.css\"\n\n/* ------------------------------------------------------------------ /\n/ Root /\n/ ------------------------------------------------------------------ /\n\nexport type AccordionProps = ComponentProps<typeof RadixAccordion.Root> & {\n className?: string\n}\n\nconst AccordionRoot = ({\n className,\n ...restProps\n}: AccordionProps) => (\n <RadixAccordion.Root className={clsx(s.Root, className)} {...restProps} />\n)\n\n/ ------------------------------------------------------------------ /\n/ Item /\n/ ------------------------------------------------------------------ /\n\nexport type AccordionItemProps = ComponentProps<typeof RadixAccordion.Item> & {\n className?: string\n}\n\nconst AccordionItem = ({\n className,\n ...restProps\n}: AccordionItemProps) => (\n <RadixAccordion.Item className={clsx(s.Item, className)} {...restProps} />\n)\n\n/ ------------------------------------------------------------------ /\n/ Trigger /\n/ ------------------------------------------------------------------ /\n\nexport type AccordionTriggerProps = ComponentProps<\n typeof RadixAccordion.Trigger\n> & {\n className?: string\n ref?: Ref<HTMLButtonElement>\n}\n\nconst AccordionTrigger = ({\n className,\n children,\n ref,\n ...restProps\n}: AccordionTriggerProps) => (\n <RadixAccordion.Header className={s.Header}>\n <RadixAccordion.Trigger\n ref={ref}\n className={clsx(s.Trigger, className)}\n {...restProps}\n >\n {children}\n <ChevronDownMd className={s.Chevron} aria-hidden />\n </RadixAccordion.Trigger>\n </RadixAccordion.Header>\n)\n\n/ ------------------------------------------------------------------ /\n/ Content /\n/ ------------------------------------------------------------------ /\n\nexport type AccordionContentProps = ComponentProps<\n typeof RadixAccordion.Content\n> & {\n className?: string\n}\n\nconst AccordionContent = ({\n className,\n children,\n ...restProps\n}: AccordionContentProps) => (\n <RadixAccordion.Content className={clsx(s.Content, className)} {...restProps}>\n <div className={s.ContentInner}>{children}</div>\n </RadixAccordion.Content>\n)\n\n/ ------------------------------------------------------------------ /\n/ Export — compound API /\n/ ------------------------------------------------------------------ */\n\ntype AccordionComponent = typeof AccordionRoot & {\n Item: typeof AccordionItem\n Trigger: typeof AccordionTrigger\n Content: typeof AccordionContent\n}\n\nexport const Accordion = AccordionRoot as AccordionComponent\nAccordion.Item = AccordionItem\nAccordion.Trigger = AccordionTrigger\nAccordion.Content = AccordionContent\n"]}
1	+ {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAiC,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,CAAC,MAAM,0DAA0D,CAAA;AAUxE,MAAM,aAAa,GAAG,CAAC,EACrB,SAAS,EACT,GAAG,SAAS,EACG,EAAE,EAAE,CAAC,CACpB,KAAC,cAAc,CAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAC3E,CAAA;AAUD,MAAM,aAAa,GAAG,CAAC,EACrB,SAAS,EACT,GAAG,SAAS,EACO,EAAE,EAAE,CAAC,CACxB,KAAC,cAAc,CAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAC3E,CAAA;AAaD,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,SAAS,EACU,EAAE,EAAE,CAAC,CAC3B,KAAC,cAAc,CAAC,MAAM,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,YACxC,MAAC,cAAc,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,KACjC,SAAS,aAEZ,QAAQ,EACT,KAAC,aAAa,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,wBAAgB,IAC5B,GACH,CACzB,CAAA;AAYD,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACU,EAAE,EAAE,CAAC,CAC3B,KAAC,cAAc,CAAC,OAAO,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,KAAM,SAAS,YAC1E,cAAK,SAAS,EAAE,CAAC,CAAC,YAAY,YAAG,QAAQ,GAAO,GACzB,CAC1B,CAAA;AAYD,MAAM,CAAC,MAAM,SAAS,GAAG,aAAmC,CAAA;AAC5D,SAAS,CAAC,IAAI,GAAG,aAAa,CAAA;AAC9B,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAA;AACpC,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps, type Ref } from \"react\"\nimport { Accordion as RadixAccordion } from \"radix-ui\"\nimport { ChevronDownMd } from \"../Icon\"\nimport s from \"@plexui/styles/components/Accordion/Accordion.module.css\"\n\n/* ------------------------------------------------------------------ /\n/ Root /\n/ ------------------------------------------------------------------ /\n\nexport type AccordionProps = ComponentProps<typeof RadixAccordion.Root> & {\n className?: string\n}\n\nconst AccordionRoot = ({\n className,\n ...restProps\n}: AccordionProps) => (\n <RadixAccordion.Root className={clsx(s.Root, className)} {...restProps} />\n)\n\n/ ------------------------------------------------------------------ /\n/ Item /\n/ ------------------------------------------------------------------ /\n\nexport type AccordionItemProps = ComponentProps<typeof RadixAccordion.Item> & {\n className?: string\n}\n\nconst AccordionItem = ({\n className,\n ...restProps\n}: AccordionItemProps) => (\n <RadixAccordion.Item className={clsx(s.Item, className)} {...restProps} />\n)\n\n/ ------------------------------------------------------------------ /\n/ Trigger /\n/ ------------------------------------------------------------------ /\n\nexport type AccordionTriggerProps = ComponentProps<\n typeof RadixAccordion.Trigger\n> & {\n className?: string\n ref?: Ref<HTMLButtonElement>\n}\n\nconst AccordionTrigger = ({\n className,\n children,\n ref,\n ...restProps\n}: AccordionTriggerProps) => (\n <RadixAccordion.Header className={s.Header}>\n <RadixAccordion.Trigger\n ref={ref}\n className={clsx(s.Trigger, className)}\n {...restProps}\n >\n {children}\n <ChevronDownMd className={s.Chevron} aria-hidden />\n </RadixAccordion.Trigger>\n </RadixAccordion.Header>\n)\n\n/ ------------------------------------------------------------------ /\n/ Content /\n/ ------------------------------------------------------------------ /\n\nexport type AccordionContentProps = ComponentProps<\n typeof RadixAccordion.Content\n> & {\n className?: string\n}\n\nconst AccordionContent = ({\n className,\n children,\n ...restProps\n}: AccordionContentProps) => (\n <RadixAccordion.Content className={clsx(s.Content, className)} {...restProps}>\n <div className={s.ContentInner}>{children}</div>\n </RadixAccordion.Content>\n)\n\n/ ------------------------------------------------------------------ /\n/ Export — compound API /\n/ ------------------------------------------------------------------ */\n\ntype AccordionComponent = typeof AccordionRoot & {\n Item: typeof AccordionItem\n Trigger: typeof AccordionTrigger\n Content: typeof AccordionContent\n}\n\nexport const Accordion = AccordionRoot as AccordionComponent\nAccordion.Item = AccordionItem\nAccordion.Trigger = AccordionTrigger\nAccordion.Content = AccordionContent\n"]}

package/dist/es/components/Accordion/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export { Accordion, } from "./Accordion";
+export { Accordion, } from "./Accordion.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Alert/Alert.js CHANGED Viewed

@@ -4,11 +4,11 @@ import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 import { mergeRefs } from "react-merge-refs";
 import { useResizeObserver } from "usehooks-ts";
-import {} from "../../types";
-import { CheckCircle, Info, Warning } from "../Icon";
-import { Button } from "../Button";
-import s from "./Alert.module.css";
-export const Alert = ({ color = "primary", variant = "outline", title, description, actions, actionsPlacement, indicator, className, actionsClassName, onDismiss, ref, ...restProps }) => {
+import {} from "../../types.js";
+import { CheckCircle, Info, Warning } from "../Icon/index.js";
+import { Button } from "../Button/index.js";
+import s from "@plexui/styles/components/Alert/Alert.module.css";
+export const Alert = ({ color = "primary", variant = "outline", title, description, actions, actionsPlacement, indicator, className, actionsClassName, onDismiss, banner = false, ref, ...restProps }) => {
     const containerRef = useRef(null);
     const actionsRef = useRef(null);
     const [actionsAutoPlacement, setActionsAutoPlacement] = useState("end");
@@ -22,7 +22,7 @@ export const Alert = ({ color = "primary", variant = "outline", title, descripti
             setActionsAutoPlacement(placement);
         }
     }, [containerWidth]);
-    return (_jsxs("div", { ref: mergeRefs([ref, containerRef]), className: clsx(s.Alert, className), "data-variant": variant, "data-color": color, role: color === "danger" ? "alert" : undefined, "data-actions-placement": actionsPlacement ?? actionsAutoPlacement, ...restProps, children: [indicator === false ? null : (_jsx("div", { className: s.Indicator, children: indicator ?? _jsx(Indicator, { color: color }) })), _jsxs("div", { className: s.Content, children: [_jsxs("div", { className: s.Message, children: [title && _jsx("div", { className: s.Title, children: title }), description && _jsx("div", { className: s.Description, children: description })] }), (actions || onDismiss) && (_jsxs("div", { className: clsx(s.Actions, actionsClassName), ref: actionsRef, children: [actions, onDismiss && (_jsx(Button, { type: "button", onClick: onDismiss, color: color, variant: "soft", pill: true, children: "Dismiss" }))] }))] })] }));
+    return (_jsxs("div", { ref: mergeRefs([ref, containerRef]), className: clsx(s.Alert, className), "data-variant": variant, "data-color": color, role: color === "danger" ? "alert" : undefined, "data-actions-placement": actionsPlacement ?? actionsAutoPlacement, "data-banner": banner ? "" : undefined, ...restProps, children: [indicator === false ? null : (_jsx("div", { className: s.Indicator, children: indicator ?? _jsx(Indicator, { color: color }) })), _jsxs("div", { className: s.Content, children: [_jsxs("div", { className: s.Message, children: [title && _jsx("div", { className: s.Title, children: title }), description && _jsx("div", { className: s.Description, children: description })] }), (actions || onDismiss) && (_jsxs("div", { className: clsx(s.Actions, actionsClassName), ref: actionsRef, children: [actions, onDismiss && (_jsx(Button, { type: "button", onClick: onDismiss, color: color, variant: "soft", pill: true, children: "Dismiss" }))] }))] })] }));
 };
 export const Indicator = ({ color }) => {
     // Choose a default icon based on the color (which signals intention)

package/dist/es/components/Alert/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAA4B,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAsC,MAAM,aAAa,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,CAAC,MAAM,~~oBAAoB~~,CAAA;~~AAmClC~~,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,WAAW,EACX,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACD,EAAE,EAAE;IACf,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACjD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC/C,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAmB,KAAK,CAAC,CAAA;IACzF,gDAAgD;IAChD,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,iBAAiB,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAA;IAE1E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,EAAE,WAAW,IAAI,CAAC,CAAA;QAEzD,IAAI,YAAY,IAAI,cAAc,EAAE,CAAC;YACnC,wEAAwE;YACxE,MAAM,SAAS,GAAG,YAAY,GAAG,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAA;YACtE,uBAAuB,CAAC,SAAS,CAAC,CAAA;QACpC,CAAC;IACH,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAA;IAEpB,OAAO,CACL,eACE,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,EACnC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,kBACrB,OAAO,gBACT,KAAK,EACjB,IAAI,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,4BACtB,gBAAgB,IAAI,oBAAoB,~~KAC5D~~,SAAS,aAEZ,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC5B,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,YAAG,SAAS,IAAI,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,GAAO,CAC9E,EACD,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,aACvB,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,aACtB,KAAK,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,KAAK,YAAG,KAAK,GAAO,EAC/C,WAAW,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,WAAW,YAAG,WAAW,GAAO,IAC9D,EACL,CAAC,OAAO,IAAI,SAAS,CAAC,IAAI,CACzB,eAAK,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAAE,GAAG,EAAE,UAAU,aAC/D,OAAO,EACP,SAAS,IAAI,CACZ,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,EAAC,IAAI,8BAElE,CACV,IACG,CACP,IACG,IACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAkC,EAAE,EAAE;IACrE,qEAAqE;IACrE,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,SAAS,CAAC;QACf,KAAK,SAAS,CAAC;QACf,KAAK,QAAQ;YACX,OAAO,KAAC,OAAO,KAAG,CAAA;QACpB,KAAK,SAAS;YACZ,OAAO,KAAC,WAAW,KAAG,CAAA;QACxB;YACE,OAAO,KAAC,IAAI,KAAG,CAAA;IACnB,CAAC;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ReactNode, type Ref, useEffect, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { useResizeObserver } from \"usehooks-ts\"\nimport { type SemanticColors, type Variants } from \"../../types\"\nimport { CheckCircle, Info, Warning } from \"../Icon\"\nimport { Button } from \"../Button\"\nimport s from \"./Alert.module.css\"\n\nexport type AlertProps = {\n /*\n Color for the button\n * @default primary\n /\n color?: SemanticColors<\n \"primary\" \| \"danger\" \| \"success\" \| \"info\" \| \"discovery\" \| \"caution\" \| \"warning\"\n >\n /\n Style variant for the Button\n * @default fill\n /\n variant?: Variants<\"solid\" \| \"soft\" \| \"outline\">\n /* Title displayed in the alert. /\n title?: ReactNode\n /* Description text displayed in the alert /\n description?: ReactNode\n /* Actions associated with the Alert. /\n actions?: ReactNode\n /* Sets the placement of `actions` always on the end or the bottom. Default behavior is automatic placement based on sizing. /\n actionsPlacement?: \"end\" \| \"bottom\"\n /* Optional override for the default indicator of the alert. When `false`, no indicator is shown. /\n indicator?: ReactNode \| false\n /* Class applied to the alert container /\n className?: string\n /* Class applied to the actions container /\n actionsClassName?: string\n /* Callback when dismiss button is clicked. Shows dismiss button when provided. /\n onDismiss?: () => void\n /* Ref applied to the alert container */\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Alert = ({\n color = \"primary\",\n variant = \"outline\",\n title,\n description,\n actions,\n actionsPlacement,\n indicator,\n className,\n actionsClassName,\n onDismiss,\n ref,\n ...restProps\n}: AlertProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const actionsRef = useRef<HTMLDivElement>(null)\n const [actionsAutoPlacement, setActionsAutoPlacement] = useState<\"end\" \| \"bottom\">(\"end\")\n // @ts-expect-error -- Type issue in usehooks-ts\n const { width: containerWidth } = useResizeObserver({ ref: containerRef })\n\n useEffect(() => {\n const actionsWidth = actionsRef.current?.clientWidth ?? 0\n\n if (actionsWidth && containerWidth) {\n // If actions are larger than a third of the container width, wrap them.\n const placement = actionsWidth > containerWidth / 3 ? \"bottom\" : \"end\"\n setActionsAutoPlacement(placement)\n }\n }, [containerWidth])\n\n return (\n <div\n ref={mergeRefs([ref, containerRef])}\n className={clsx(s.Alert, className)}\n data-variant={variant}\n data-color={color}\n role={color === \"danger\" ? \"alert\" : undefined}\n data-actions-placement={actionsPlacement ?? actionsAutoPlacement}\n {...restProps}\n >\n {indicator === false ? null : (\n <div className={s.Indicator}>{indicator ?? <Indicator color={color} />}</div>\n )}\n <div className={s.Content}>\n <div className={s.Message}>\n {title && <div className={s.Title}>{title}</div>}\n {description && <div className={s.Description}>{description}</div>}\n </div>\n {(actions \|\| onDismiss) && (\n <div className={clsx(s.Actions, actionsClassName)} ref={actionsRef}>\n {actions}\n {onDismiss && (\n <Button type=\"button\" onClick={onDismiss} color={color} variant=\"soft\" pill>\n Dismiss\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )\n}\n\nexport const Indicator = ({ color }: { color: AlertProps[\"color\"] }) => {\n // Choose a default icon based on the color (which signals intention)\n switch (color) {\n case \"warning\":\n case \"caution\":\n case \"danger\":\n return <Warning />\n case \"success\":\n return <CheckCircle />\n default:\n return <Info />\n }\n}\n"]}
1	+ {"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ReactNode, type Ref, useEffect, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { useResizeObserver } from \"usehooks-ts\"\nimport { type SemanticColors, type Variants } from \"../../types\"\nimport { CheckCircle, Info, Warning } from \"../Icon\"\nimport { Button } from \"../Button\"\nimport s from \"@plexui/styles/components/Alert/Alert.module.css\"\n\nexport type AlertProps = {\n /*\n Color for the button\n * @default primary\n /\n color?: SemanticColors<\n \"primary\" \| \"danger\" \| \"success\" \| \"info\" \| \"discovery\" \| \"caution\" \| \"warning\"\n >\n /\n Style variant for the Button\n * @default fill\n /\n variant?: Variants<\"solid\" \| \"soft\" \| \"outline\">\n /* Title displayed in the alert. /\n title?: ReactNode\n /* Description text displayed in the alert /\n description?: ReactNode\n /* Actions associated with the Alert. /\n actions?: ReactNode\n /* Sets the placement of `actions` always on the end or the bottom. Default behavior is automatic placement based on sizing. /\n actionsPlacement?: \"end\" \| \"bottom\"\n /* Optional override for the default indicator of the alert. When `false`, no indicator is shown. /\n indicator?: ReactNode \| false\n /* Class applied to the alert container /\n className?: string\n /* Class applied to the actions container /\n actionsClassName?: string\n /* Callback when dismiss button is clicked. Shows dismiss button when provided. /\n onDismiss?: () => void\n /\n A full-width strip across the top or bottom of a page or panel (offline,\n * read-only, a new version): square corners and lines above and below only.\n * @default false\n /\n banner?: boolean\n /* Ref applied to the alert container */\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Alert = ({\n color = \"primary\",\n variant = \"outline\",\n title,\n description,\n actions,\n actionsPlacement,\n indicator,\n className,\n actionsClassName,\n onDismiss,\n banner = false,\n ref,\n ...restProps\n}: AlertProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const actionsRef = useRef<HTMLDivElement>(null)\n const [actionsAutoPlacement, setActionsAutoPlacement] = useState<\"end\" \| \"bottom\">(\"end\")\n // @ts-expect-error -- Type issue in usehooks-ts\n const { width: containerWidth } = useResizeObserver({ ref: containerRef })\n\n useEffect(() => {\n const actionsWidth = actionsRef.current?.clientWidth ?? 0\n\n if (actionsWidth && containerWidth) {\n // If actions are larger than a third of the container width, wrap them.\n const placement = actionsWidth > containerWidth / 3 ? \"bottom\" : \"end\"\n setActionsAutoPlacement(placement)\n }\n }, [containerWidth])\n\n return (\n <div\n ref={mergeRefs([ref, containerRef])}\n className={clsx(s.Alert, className)}\n data-variant={variant}\n data-color={color}\n role={color === \"danger\" ? \"alert\" : undefined}\n data-actions-placement={actionsPlacement ?? actionsAutoPlacement}\n data-banner={banner ? \"\" : undefined}\n {...restProps}\n >\n {indicator === false ? null : (\n <div className={s.Indicator}>{indicator ?? <Indicator color={color} />}</div>\n )}\n <div className={s.Content}>\n <div className={s.Message}>\n {title && <div className={s.Title}>{title}</div>}\n {description && <div className={s.Description}>{description}</div>}\n </div>\n {(actions \|\| onDismiss) && (\n <div className={clsx(s.Actions, actionsClassName)} ref={actionsRef}>\n {actions}\n {onDismiss && (\n <Button type=\"button\" onClick={onDismiss} color={color} variant=\"soft\" pill>\n Dismiss\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )\n}\n\nexport const Indicator = ({ color }: { color: AlertProps[\"color\"] }) => {\n // Choose a default icon based on the color (which signals intention)\n switch (color) {\n case \"warning\":\n case \"caution\":\n case \"danger\":\n return <Warning />\n case \"success\":\n return <CheckCircle />\n default:\n return <Info />\n }\n}\n"]}

package/dist/es/components/Alert/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export { Alert } from "./Alert";
+export { Alert } from "./Alert.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Avatar/Avatar.js CHANGED Viewed

@@ -3,9 +3,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createElement as _createElement } from "react";
 import clsx from "clsx";
 import { useMemo, useState } from "react";
-import { toCssVariables } from "../../lib/helpers";
-import {} from "../../types";
-import s from "./Avatar.module.css";
+import { toCssVariables } from "../../lib/helpers.js";
+import {} from "../../types.js";
+import s from "@plexui/styles/components/Avatar/Avatar.module.css";
 export const Avatar = (props) => {
     // Validate the image url before sending to the component
     const validImageUrl = validateImageUrl(props.imageUrl);
@@ -21,7 +21,7 @@ export const AvatarInner = (props) => {
     const TagName = isInteractive ? "button" : "span";
     return (_jsx(TagName, { className: clsx(s.Avatar, className), style: toCssVariables({
             "avatar-size": size,
-        }), role: isInteractive ? undefined : "presentation", "data-color": color, "data-variant": variant, type: isInteractive ? "button" : undefined, ...restProps, children: (() => {
+        }), role: isInteractive ? undefined : "presentation", "aria-label": isInteractive ? name : undefined, "data-color": color, "data-variant": variant, type: isInteractive ? "button" : undefined, ...restProps, children: (() => {
             // Render a placeholder layer (initials / overflow / icon) behind the
             // image so slow networks never leave the avatar visually empty while
             // the image is loading. The image overlays it once loaded and hides
@@ -44,7 +44,14 @@ const validateImageUrl = (imageUrl) => {
     return imageUrl;
 };
 const AvatarImage = ({ url, status, onLoad, onError, }) => {
-    return (_jsx("span", { className: s.AvatarImageContainer, children: _jsx("img", { src: url, className: s.AvatarImage, "data-loaded": status === "loaded" ? "" : undefined, onLoad: onLoad, onError: onError, alt: "", role: "presentation" }) }));
+    return (_jsx("span", { className: s.AvatarImageContainer, children: _jsx("img", {
+            // An image that loaded before hydration fired its load event before
+            // React listened for it, and React does not replay it: read the
+            // element instead
+            ref: (img) => {
+                if (img && status !== "loaded" && img.complete && img.naturalWidth > 0)
+                    onLoad();
+            }, src: url, className: s.AvatarImage, "data-loaded": status === "loaded" ? "" : undefined, onLoad: onLoad, onError: onError, alt: "", role: "presentation" }) }));
 };
 const AvatarInitial = ({ name = "" }) => {
     const firstInitial = useMemo(() => name.charAt(0).toUpperCase(), [name]);

package/dist/es/components/Avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAsC,MAAM,aAAa,CAAA;AAChE,OAAO,CAAC,MAAM,~~qBAAqB~~,CAAA;~~AAiCnC~~,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,yDAAyD;IACzD,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAEtD,gGAAgG;IAChG,OAAO,eAAC,WAAW,OAAK,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,EAAE,aAAa,GAAI,CAAA;AAChF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAkB,EAAE,EAAE;IAChD,MAAM,EACJ,SAAS,EACT,IAAI,EACJ,aAAa,EACb,IAAI,EACJ,KAAK,GAAG,WAAW,EACnB,OAAO,GAAG,MAAM,EAChB,QAAQ,EACR,IAAI;IACJ,kBAAkB;IAClB,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IACT,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAe,CAAA;IAC7D,MAAM,aAAa,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,IAAI,SAAS,CAAC,OAAO,CAAC,CAAA;IACtE,MAAM,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;IAEjD,OAAO,CACL,KAAC,OAAO,IACN,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,EACpC,KAAK,EAAE,cAAc,CAAC;YACpB,aAAa,EAAE,IAAI;SACpB,CAAC,EACF,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,~~gBACpC~~,KAAK,kBACH,OAAO,EACrB,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,KACtC,SAAS,YAEZ,CAAC,GAAG,EAAE;YACL,qEAAqE;YACrE,qEAAqE;YACrE,oEAAoE;YACpE,2DAA2D;YAC3D,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,CAClC,KAAC,mBAAmB,IAAC,KAAK,EAAE,aAAa,GAAI,CAC9C,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,UAAU,GAAI,CAClC,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAI,CAC9B,CAAA;YAED,IAAI,QAAQ,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;gBACxC,OAAO,CACL,8BACG,WAAW,EACZ,KAAC,WAAW,IACV,MAAM,EAAE,WAAW,EACnB,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,EACtC,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,GACtC,IACD,CACJ,CAAA;YACH,CAAC;YACD,OAAO,WAAW,CAAA;QACpB,CAAC,CAAC,EAAE,GACI,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,QAAiB,EAAsB,EAAE;IACjE,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAM;IACR,CAAC;IAED,iHAAiH;IACjH,IAAI,QAAQ,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC;QAC5E,OAAM;IACR,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,EACnB,GAAG,EACH,MAAM,EACN,MAAM,EACN,OAAO,GAMR,EAAE,EAAE;IACH,OAAO,CACL,eAAM,SAAS,EAAE,CAAC,CAAC,oBAAoB,YACrC,~~cACE~~,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,WAAW,iBACX,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACjD,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAC,EAAE,EACN,IAAI,EAAC,cAAc,GACnB,GACG,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAqB,EAAE,EAAE;IACzD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAExE,OAAO,eAAM,SAAS,EAAE,CAAC,CAAC,aAAa,YAAG,YAAY,GAAQ,CAAA;AAChE,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,EAAqB,EAAE,EAAE;IAC3D,MAAM,cAAc,GAAG,OAAO,CAAS,GAAG,EAAE;QAC1C,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,OAAO;YACvB,qBAAqB,EAAE,CAAC;SACzB,CAAC;aACC,MAAM,CAAC,KAAK,CAAC;aACb,iBAAiB,EAAE,CAAA;IACxB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,gBAAM,SAAS,EAAE,CAAC,CAAC,mBAAmB,uBAAqB,cAAc,CAAC,MAAM,aAC9E,eAAM,SAAS,EAAE,CAAC,CAAC,yBAAyB,kBAAU,EACrD,cAAc,IACV,CACR,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useMemo, useState } from \"react\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport { type SemanticColors, type Variants } from \"../../types\"\nimport s from \"./Avatar.module.css\"\n\ntype ImageStatus = undefined \| \"error\" \| \"loaded\"\n\nexport type AvatarProps = {\n /** Class name applied to the avatar /\n className?: string\n /* Size of the avatar's width & height, in pixels. /\n size?: number\n /* Display a formatted count of overflow objects. /\n overflowCount?: number\n /* Name used to display initials from /\n name?: string\n /\n Color used for the avatar\n * @default secondary\n /\n color?: SemanticColors<\"primary\" \| \"secondary\" \| \"success\" \| \"info\" \| \"discovery\" \| \"danger\">\n /\n Style variant of the avatar\n * @default soft\n /\n variant?: Variants<\"soft\" \| \"solid\">\n /* URL of the image to display as the avatar /\n imageUrl?: string\n /* Icon to render in the avatar circle /\n Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>\n /* Optional click handler, which also enables semantic interactions /\n onClick?: () => void\n /* Optional pointer handler, which also enables semantic interactions */\n onPointerDown?: () => void\n}\n\nexport const Avatar = (props: AvatarProps) => {\n // Validate the image url before sending to the component\n const validImageUrl = validateImageUrl(props.imageUrl)\n\n // Keying off of imageUrl allows us to refresh imageStatus automatically through React rendering\n return <AvatarInner {...props} imageUrl={validImageUrl} key={validImageUrl} />\n}\n\nexport const AvatarInner = (props: AvatarProps) => {\n const {\n className,\n size,\n overflowCount,\n name,\n color = \"secondary\",\n variant = \"soft\",\n imageUrl,\n Icon,\n // asChild support\n ...restProps\n } = props\n const [imageStatus, setImageStatus] = useState<ImageStatus>()\n const isInteractive = !!(restProps.onPointerDown \|\| restProps.onClick)\n const TagName = isInteractive ? \"button\" : \"span\"\n\n return (\n <TagName\n className={clsx(s.Avatar, className)}\n style={toCssVariables({\n \"avatar-size\": size,\n })}\n role={isInteractive ? undefined : \"presentation\"}\n data-color={color}\n data-variant={variant}\n type={isInteractive ? \"button\" : undefined}\n {...restProps}\n >\n {(() => {\n // Render a placeholder layer (initials / overflow / icon) behind the\n // image so slow networks never leave the avatar visually empty while\n // the image is loading. The image overlays it once loaded and hides\n // it when it fails — either way the avatar is never blank.\n const placeholder = overflowCount ? (\n <AvatarOverflowCount count={overflowCount} />\n ) : Icon ? (\n <Icon className={s.AvatarIcon} />\n ) : (\n <AvatarInitial name={name} />\n )\n\n if (imageUrl && imageStatus !== \"error\") {\n return (\n <>\n {placeholder}\n <AvatarImage\n status={imageStatus}\n url={imageUrl}\n onError={() => setImageStatus(\"error\")}\n onLoad={() => setImageStatus(\"loaded\")}\n />\n </>\n )\n }\n return placeholder\n })()}\n </TagName>\n )\n}\n\nconst validateImageUrl = (imageUrl?: string): string \| undefined => {\n if (!imageUrl) {\n return\n }\n\n // Avoid specific pattern of images from gravatar.com, which use a pair of initials, instead of a single initial.\n if (imageUrl.includes(\"gravatar.com\") && imageUrl.includes(\"cdn.auth0.com\")) {\n return\n }\n\n return imageUrl\n}\n\nconst AvatarImage = ({\n url,\n status,\n onLoad,\n onError,\n}: {\n url: string\n status: ImageStatus\n onLoad: () => void\n onError: () => void\n}) => {\n return (\n <span className={s.AvatarImageContainer}>\n <img\n src={url}\n className={s.AvatarImage}\n data-loaded={status === \"loaded\" ? \"\" : undefined}\n onLoad={onLoad}\n onError={onError}\n alt=\"\"\n role=\"presentation\"\n />\n </span>\n )\n}\n\nconst AvatarInitial = ({ name = \"\" }: { name?: string }) => {\n const firstInitial = useMemo(() => name.charAt(0).toUpperCase(), [name])\n\n return <span className={s.AvatarInitial}>{firstInitial}</span>\n}\n\nconst AvatarOverflowCount = ({ count }: { count: number }) => {\n const formattedCount = useMemo<string>(() => {\n return new Intl.NumberFormat(\"en\", {\n notation: \"compact\",\n compactDisplay: \"short\",\n maximumFractionDigits: 0,\n })\n .format(count)\n .toLocaleLowerCase()\n }, [count])\n\n return (\n <span className={s.AvatarOverflowCount} data-letter-count={formattedCount.length}>\n <span className={s.AvatarOverflowCountSymbol}>+</span>\n {formattedCount}\n </span>\n )\n}\n"]}
1	+ {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useMemo, useState } from \"react\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport { type SemanticColors, type Variants } from \"../../types\"\nimport s from \"@plexui/styles/components/Avatar/Avatar.module.css\"\n\ntype ImageStatus = undefined \| \"error\" \| \"loaded\"\n\nexport type AvatarProps = {\n /** Class name applied to the avatar /\n className?: string\n /* Size of the avatar's width & height, in pixels. /\n size?: number\n /* Display a formatted count of overflow objects. /\n overflowCount?: number\n /* Name used to display initials from /\n name?: string\n /\n Color used for the avatar\n * @default secondary\n /\n color?: SemanticColors<\"primary\" \| \"secondary\" \| \"success\" \| \"info\" \| \"discovery\" \| \"danger\">\n /\n Style variant of the avatar\n * @default soft\n /\n variant?: Variants<\"soft\" \| \"solid\">\n /* URL of the image to display as the avatar /\n imageUrl?: string\n /* Icon to render in the avatar circle /\n Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>\n /* Optional click handler, which also enables semantic interactions /\n onClick?: () => void\n /* Optional pointer handler, which also enables semantic interactions */\n onPointerDown?: () => void\n}\n\nexport const Avatar = (props: AvatarProps) => {\n // Validate the image url before sending to the component\n const validImageUrl = validateImageUrl(props.imageUrl)\n\n // Keying off of imageUrl allows us to refresh imageStatus automatically through React rendering\n return <AvatarInner {...props} imageUrl={validImageUrl} key={validImageUrl} />\n}\n\nexport const AvatarInner = (props: AvatarProps) => {\n const {\n className,\n size,\n overflowCount,\n name,\n color = \"secondary\",\n variant = \"soft\",\n imageUrl,\n Icon,\n // asChild support\n ...restProps\n } = props\n const [imageStatus, setImageStatus] = useState<ImageStatus>()\n const isInteractive = !!(restProps.onPointerDown \|\| restProps.onClick)\n const TagName = isInteractive ? \"button\" : \"span\"\n\n return (\n <TagName\n className={clsx(s.Avatar, className)}\n style={toCssVariables({\n \"avatar-size\": size,\n })}\n role={isInteractive ? undefined : \"presentation\"}\n // An interactive avatar is a button; name it by the full name, not the initial\n aria-label={isInteractive ? name : undefined}\n data-color={color}\n data-variant={variant}\n type={isInteractive ? \"button\" : undefined}\n {...restProps}\n >\n {(() => {\n // Render a placeholder layer (initials / overflow / icon) behind the\n // image so slow networks never leave the avatar visually empty while\n // the image is loading. The image overlays it once loaded and hides\n // it when it fails — either way the avatar is never blank.\n const placeholder = overflowCount ? (\n <AvatarOverflowCount count={overflowCount} />\n ) : Icon ? (\n <Icon className={s.AvatarIcon} />\n ) : (\n <AvatarInitial name={name} />\n )\n\n if (imageUrl && imageStatus !== \"error\") {\n return (\n <>\n {placeholder}\n <AvatarImage\n status={imageStatus}\n url={imageUrl}\n onError={() => setImageStatus(\"error\")}\n onLoad={() => setImageStatus(\"loaded\")}\n />\n </>\n )\n }\n return placeholder\n })()}\n </TagName>\n )\n}\n\nconst validateImageUrl = (imageUrl?: string): string \| undefined => {\n if (!imageUrl) {\n return\n }\n\n // Avoid specific pattern of images from gravatar.com, which use a pair of initials, instead of a single initial.\n if (imageUrl.includes(\"gravatar.com\") && imageUrl.includes(\"cdn.auth0.com\")) {\n return\n }\n\n return imageUrl\n}\n\nconst AvatarImage = ({\n url,\n status,\n onLoad,\n onError,\n}: {\n url: string\n status: ImageStatus\n onLoad: () => void\n onError: () => void\n}) => {\n return (\n <span className={s.AvatarImageContainer}>\n <img\n // An image that loaded before hydration fired its load event before\n // React listened for it, and React does not replay it: read the\n // element instead\n ref={(img) => {\n if (img && status !== \"loaded\" && img.complete && img.naturalWidth > 0) onLoad()\n }}\n src={url}\n className={s.AvatarImage}\n data-loaded={status === \"loaded\" ? \"\" : undefined}\n onLoad={onLoad}\n onError={onError}\n alt=\"\"\n role=\"presentation\"\n />\n </span>\n )\n}\n\nconst AvatarInitial = ({ name = \"\" }: { name?: string }) => {\n const firstInitial = useMemo(() => name.charAt(0).toUpperCase(), [name])\n\n return <span className={s.AvatarInitial}>{firstInitial}</span>\n}\n\nconst AvatarOverflowCount = ({ count }: { count: number }) => {\n const formattedCount = useMemo<string>(() => {\n return new Intl.NumberFormat(\"en\", {\n notation: \"compact\",\n compactDisplay: \"short\",\n maximumFractionDigits: 0,\n })\n .format(count)\n .toLocaleLowerCase()\n }, [count])\n\n return (\n <span className={s.AvatarOverflowCount} data-letter-count={formattedCount.length}>\n <span className={s.AvatarOverflowCountSymbol}>+</span>\n {formattedCount}\n </span>\n )\n}\n"]}

package/dist/es/components/Avatar/AvatarGroup.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { Children, cloneElement, isValidElement } from "react";
-import { toCssVariables } from "../../lib/helpers";
-import s from "./AvatarGroup.module.css";
+import { toCssVariables } from "../../lib/helpers.js";
+import s from "@plexui/styles/components/Avatar/AvatarGroup.module.css";
 export const AvatarGroup = ({ className, stack = "start", size, children }) => {
     const childrenArray = Children.toArray(children);
     // Conditionally reverse the array depending on desired stacking priority

package/dist/es/components/Avatar/AvatarGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../src/components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAkB,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,CAAC,MAAM,~~0BAA0B~~,CAAA;~~AAexC~~,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAoB,EAAE,EAAE;IAC9F,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;IAChD,yEAAyE;IACzE,MAAM,qBAAqB,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,aAAa,CAAA;IAEjG,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,gBACvB,KAAK,EACjB,KAAK,EAAE,cAAc,CAAC;YACpB,aAAa,EAAE,IAAI;SACpB,CAAC,YAED,qBAAqB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GACxF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport { Children, cloneElement, isValidElement, type ReactNode } from \"react\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport s from \"./AvatarGroup.module.css\"\n\nexport type AvatarGroupProps = {\n /** Class name passed to the group container /\n className?: string\n /\n Determines stacking layer order\n * @default start\n /\n stack?: \"start\" \| \"end\"\n /* Size all avatars in the group, in pixels. */\n size?: number\n children: ReactNode\n}\n\nexport const AvatarGroup = ({ className, stack = \"start\", size, children }: AvatarGroupProps) => {\n const childrenArray = Children.toArray(children)\n // Conditionally reverse the array depending on desired stacking priority\n const maybeReversedChildren = stack === \"start\" ? childrenArray.slice().reverse() : childrenArray\n\n return (\n <div\n className={clsx(s.Group, className)}\n data-stack={stack}\n style={toCssVariables({\n \"avatar-size\": size,\n })}\n >\n {maybeReversedChildren.map((child) => (isValidElement(child) ? cloneElement(child) : child))}\n </div>\n )\n}\n"]}
1	+ {"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../src/components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAkB,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,CAAC,MAAM,yDAAyD,CAAA;AAevE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAoB,EAAE,EAAE;IAC9F,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;IAChD,yEAAyE;IACzE,MAAM,qBAAqB,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,aAAa,CAAA;IAEjG,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,gBACvB,KAAK,EACjB,KAAK,EAAE,cAAc,CAAC;YACpB,aAAa,EAAE,IAAI;SACpB,CAAC,YAED,qBAAqB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GACxF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport { Children, cloneElement, isValidElement, type ReactNode } from \"react\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport s from \"@plexui/styles/components/Avatar/AvatarGroup.module.css\"\n\nexport type AvatarGroupProps = {\n /** Class name passed to the group container /\n className?: string\n /\n Determines stacking layer order\n * @default start\n /\n stack?: \"start\" \| \"end\"\n /* Size all avatars in the group, in pixels. */\n size?: number\n children: ReactNode\n}\n\nexport const AvatarGroup = ({ className, stack = \"start\", size, children }: AvatarGroupProps) => {\n const childrenArray = Children.toArray(children)\n // Conditionally reverse the array depending on desired stacking priority\n const maybeReversedChildren = stack === \"start\" ? childrenArray.slice().reverse() : childrenArray\n\n return (\n <div\n className={clsx(s.Group, className)}\n data-stack={stack}\n style={toCssVariables({\n \"avatar-size\": size,\n })}\n >\n {maybeReversedChildren.map((child) => (isValidElement(child) ? cloneElement(child) : child))}\n </div>\n )\n}\n"]}

package/dist/es/components/Avatar/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-export { Avatar } from "./Avatar";
-export { AvatarGroup } from "./AvatarGroup";
+export { Avatar } from "./Avatar.js";
+export { AvatarGroup } from "./AvatarGroup.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Badge/index.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import {} from "react";
-import { wrapTextNodeSiblings } from "../../lib/renderHelpers";
-import {} from "../../types";
-import s from "./Badge.module.css";
+import { wrapTextNodeSiblings } from "../../lib/renderHelpers.js";
+import {} from "../../types.js";
+import s from "@plexui/styles/components/Badge/Badge.module.css";
 export const Badge = ({ children, className, variant = "soft", color = "secondary", size = "sm", pill, ...restMaybeAsChildProps }) => {
     return (_jsx("div", { className: clsx(s.Badge, className), "data-color": color, "data-size": size, "data-pill": pill ? "" : undefined, "data-variant": variant, ...restMaybeAsChildProps, children: wrapTextNodeSiblings(children) }));
 };

package/dist/es/components/Badge/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Badge/index.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAkD,MAAM,aAAa,CAAA;AAC5E,OAAO,CAAC,MAAM,~~oBAAoB~~,CAAA;~~AAmClC~~,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,WAAW,EACnB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,GAAG,qBAAqB,EACb,EAAE,EAAE;IACf,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,gBACvB,KAAK,eACN,IAAI,eACJ,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAClB,OAAO,KACjB,qBAAqB,YAExB,oBAAoB,CAAC,QAAQ,CAAC,GAC3B,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport { type ReactNode } from \"react\"\nimport { wrapTextNodeSiblings } from \"../../lib/renderHelpers\"\nimport { type SemanticColors, type Sizes, type Variants } from \"../../types\"\nimport s from \"./Badge.module.css\"\n\nexport type BadgeProps = {\n /** Content rendered inside the badge /\n children: ReactNode\n /* Class applied to the badge /\n className?: string\n /\n Visual style of the badge\n * @default soft\n /\n variant?: Variants<\"solid\" \| \"soft\" \| \"outline\">\n /\n Size scale of the badge\n \n \| sm \| md \| lg \|\n * \| ------- \| ------- \| ------- \|\n * \| `20px` \| `22px` \| `24px` \|\n * @default sm\n /\n size?: Sizes<\"sm\" \| \"md\" \| \"lg\">\n /\n Determines if the badge should be a fully rounded pill shape\n * @default false\n /\n pill?: boolean\n /\n Color of the badge, related to its meaning or intent\n * @default secondary\n */\n color?: SemanticColors<\n \"secondary\" \| \"success\" \| \"danger\" \| \"warning\" \| \"info\" \| \"discovery\" \| \"caution\"\n >\n}\n\nexport const Badge = ({\n children,\n className,\n variant = \"soft\",\n color = \"secondary\",\n size = \"sm\",\n pill,\n ...restMaybeAsChildProps\n}: BadgeProps) => {\n return (\n <div\n className={clsx(s.Badge, className)}\n data-color={color}\n data-size={size}\n data-pill={pill ? \"\" : undefined}\n data-variant={variant}\n {...restMaybeAsChildProps}\n >\n {wrapTextNodeSiblings(children)}\n </div>\n )\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Badge/index.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAkD,MAAM,aAAa,CAAA;AAC5E,OAAO,CAAC,MAAM,kDAAkD,CAAA;AAmChE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,WAAW,EACnB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,GAAG,qBAAqB,EACb,EAAE,EAAE;IACf,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,gBACvB,KAAK,eACN,IAAI,eACJ,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAClB,OAAO,KACjB,qBAAqB,YAExB,oBAAoB,CAAC,QAAQ,CAAC,GAC3B,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport { type ReactNode } from \"react\"\nimport { wrapTextNodeSiblings } from \"../../lib/renderHelpers\"\nimport { type SemanticColors, type Sizes, type Variants } from \"../../types\"\nimport s from \"@plexui/styles/components/Badge/Badge.module.css\"\n\nexport type BadgeProps = {\n /** Content rendered inside the badge /\n children: ReactNode\n /* Class applied to the badge /\n className?: string\n /\n Visual style of the badge\n * @default soft\n /\n variant?: Variants<\"solid\" \| \"soft\" \| \"outline\">\n /\n Size scale of the badge\n \n \| sm \| md \| lg \|\n * \| ------- \| ------- \| ------- \|\n * \| `20px` \| `22px` \| `24px` \|\n * @default sm\n /\n size?: Sizes<\"sm\" \| \"md\" \| \"lg\">\n /\n Determines if the badge should be a fully rounded pill shape\n * @default false\n /\n pill?: boolean\n /\n Color of the badge, related to its meaning or intent\n * @default secondary\n */\n color?: SemanticColors<\n \"secondary\" \| \"success\" \| \"danger\" \| \"warning\" \| \"info\" \| \"discovery\" \| \"caution\"\n >\n}\n\nexport const Badge = ({\n children,\n className,\n variant = \"soft\",\n color = \"secondary\",\n size = \"sm\",\n pill,\n ...restMaybeAsChildProps\n}: BadgeProps) => {\n return (\n <div\n className={clsx(s.Badge, className)}\n data-color={color}\n data-size={size}\n data-pill={pill ? \"\" : undefined}\n data-variant={variant}\n {...restMaybeAsChildProps}\n >\n {wrapTextNodeSiblings(children)}\n </div>\n )\n}\n"]}

package/dist/es/components/Breadcrumb/Breadcrumb.js ADDED Viewed

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createContext, useContext } from "react";
+import { ChevronRightSm } from "../Icon/index.js";
+import { TextLink } from "../TextLink/index.js";
+import s from "@plexui/styles/components/Breadcrumb/Breadcrumb.module.css";
+const SeparatorContext = createContext(null);
+// TextLink types `to` only for link components that take it; an item passes
+// whichever destination it got through to it
+const ItemLink = TextLink;
+/**
+ * The trail of pages that leads to the current one. Each `Breadcrumb.Item`
+ * is a link, a button (`onClick`) or the current page (`current`).
+ */
+export const Breadcrumb = ({ children, size = "md", separator, className, "aria-label": ariaLabel = "Breadcrumb", ...restProps }) => {
+    return (_jsx("nav", { "aria-label": ariaLabel, className: clsx(s.Breadcrumb, className), "data-size": size, ...restProps, children: _jsx(SeparatorContext.Provider, { value: separator ?? _jsx(ChevronRightSm, {}), children: _jsx("ol", { className: s.List, children: children }) }) }));
+};
+const Item = ({ children, href, to, current = false, onClick, className }) => {
+    const separator = useContext(SeparatorContext);
+    let content;
+    if (current) {
+        content = (_jsx("span", { className: s.Current, "aria-current": "page", children: children }));
+    }
+    else if (href || to || onClick) {
+        content = (_jsx(ItemLink, { className: s.Link, href: href, to: to, onClick: onClick, underline: false, children: children }));
+    }
+    else {
+        content = _jsx("span", { children: children });
+    }
+    return (_jsxs("li", { className: clsx(s.Item, className), children: [_jsx("span", { className: s.Separator, "aria-hidden": "true", children: separator }), content] }));
+};
+Breadcrumb.Item = Item;
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/es/components/Breadcrumb/Breadcrumb.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,aAAa,EAAE,UAAU,EAA2D,MAAM,OAAO,CAAA;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,CAAC,MAAM,4DAA4D,CAAA;AAE1E,MAAM,gBAAgB,GAAG,aAAa,CAAY,IAAI,CAAC,CAAA;AAEvD,4EAA4E;AAC5E,6CAA6C;AAC7C,MAAM,QAAQ,GAAG,QAA6D,CAAA;AAgB9E;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,SAAS,EACT,SAAS,EACT,YAAY,EAAE,SAAS,GAAG,YAAY,EACtC,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,OAAO,CACL,4BAAiB,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,eAAa,IAAI,KAAM,SAAS,YAClG,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAAI,KAAC,cAAc,KAAG,YAC/D,aAAI,SAAS,EAAE,CAAC,CAAC,IAAI,YAAG,QAAQ,GAAM,GACZ,GACxB,CACP,CAAA;AACH,CAAC,CAAA;AAeD,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,SAAS,EAAuB,EAAE,EAAE;IAChG,MAAM,SAAS,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAA;IAE9C,IAAI,OAAkB,CAAA;IACtB,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,GAAG,CACR,eAAM,SAAS,EAAE,CAAC,CAAC,OAAO,kBAAe,MAAM,YAC5C,QAAQ,GACJ,CACR,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,IAAI,EAAE,IAAI,OAAO,EAAE,CAAC;QACjC,OAAO,GAAG,CACR,KAAC,QAAQ,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,YAChF,QAAQ,GACA,CACZ,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,yBAAO,QAAQ,GAAQ,CAAA;IACnC,CAAC;IAED,OAAO,CACL,cAAI,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aACpC,eAAM,SAAS,EAAE,CAAC,CAAC,SAAS,iBAAc,MAAM,YAC7C,SAAS,GACL,EACN,OAAO,IACL,CACN,CAAA;AACH,CAAC,CAAA;AAED,UAAU,CAAC,IAAI,GAAG,IAAI,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { createContext, useContext, type ComponentProps, type ComponentType, type ReactNode } from \"react\"\nimport { ChevronRightSm } from \"../Icon\"\nimport { TextLink } from \"../TextLink\"\nimport s from \"@plexui/styles/components/Breadcrumb/Breadcrumb.module.css\"\n\nconst SeparatorContext = createContext<ReactNode>(null)\n\n// TextLink types `to` only for link components that take it; an item passes\n// whichever destination it got through to it\nconst ItemLink = TextLink as unknown as ComponentType<Record<string, unknown>>\n\nexport type BreadcrumbProps = Omit<ComponentProps<\"nav\">, \"children\"> & {\n children: ReactNode\n /**\n * Text size: `sm` for a trail above a compact header, `md` above a page title\n * @default md\n */\n size?: \"sm\" | \"md\"\n /**\n * What stands between two items\n * @default a small chevron\n */\n separator?: ReactNode\n}\n\n/**\n * The trail of pages that leads to the current one. Each `Breadcrumb.Item`\n * is a link, a button (`onClick`) or the current page (`current`).\n */\nexport const Breadcrumb = ({\n children,\n size = \"md\",\n separator,\n className,\n \"aria-label\": ariaLabel = \"Breadcrumb\",\n ...restProps\n}: BreadcrumbProps) => {\n return (\n <nav aria-label={ariaLabel} className={clsx(s.Breadcrumb, className)} data-size={size} {...restProps}>\n <SeparatorContext.Provider value={separator ?? <ChevronRightSm />}>\n <ol className={s.List}>{children}</ol>\n </SeparatorContext.Provider>\n </nav>\n )\n}\n\nexport type BreadcrumbItemProps = {\n children: ReactNode\n /** Link destination. Internal paths use the `linkComponent` of `PlexUIProvider` */\n href?: string\n /** Router link destination, for link components that take `to` */\n to?: string\n /** The current page: not a link, marked `aria-current=\"page\"` */\n current?: boolean\n /** Makes an item without a destination act as a button */\n onClick?: (event: React.MouseEvent<HTMLElement>) => void\n className?: string\n}\n\nconst Item = ({ children, href, to, current = false, onClick, className }: BreadcrumbItemProps) => {\n const separator = useContext(SeparatorContext)\n\n let content: ReactNode\n if (current) {\n content = (\n <span className={s.Current} aria-current=\"page\">\n {children}\n </span>\n )\n } else if (href || to || onClick) {\n content = (\n <ItemLink className={s.Link} href={href} to={to} onClick={onClick} underline={false}>\n {children}\n </ItemLink>\n )\n } else {\n content = <span>{children}</span>\n }\n\n return (\n <li className={clsx(s.Item, className)}>\n <span className={s.Separator} aria-hidden=\"true\">\n {separator}\n </span>\n {content}\n </li>\n )\n}\n\nBreadcrumb.Item = Item\n"]}

package/dist/es/components/Breadcrumb/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Breadcrumb } from "./Breadcrumb.js";
2	+ //# sourceMappingURL=index.js.map

package/dist/es/components/Breadcrumb/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkD,MAAM,cAAc,CAAA","sourcesContent":["export { Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps } from \"./Breadcrumb\"\n"]}

package/dist/es/components/Button/Button.js CHANGED Viewed

@@ -2,13 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useCallback, } from "react";
-import { handlePressableMouseEnter } from "../../lib/helpers";
-import { wrapTextNodeSiblings } from "../../lib/renderHelpers";
-import {} from "../../types";
-import { LoadingIndicator } from "../Indicator";
-import { useLinkComponent } from "../PlexUIProvider/internal";
-import { TransitionGroup } from "../Transition/TransitionGroup";
-import s from "./Button.module.css";
+import { handlePressableMouseEnter } from "../../lib/helpers.js";
+import { wrapTextNodeSiblings } from "../../lib/renderHelpers.js";
+import {} from "../../types.js";
+import { LoadingIndicator } from "../Indicator/index.js";
+import { useLinkComponent } from "../PlexUIProvider/internal.js";
+import { TransitionGroup } from "../Transition/TransitionGroup.js";
+import s from "@plexui/styles/components/Button/Button.module.css";
 export const Button = (props) => {
     const { type = "button", color = "primary", variant = "solid", pill = false, uniform = false, size = "md", iconSize, gutterSize, loading, selected, block, opticallyAlign, children, className, onClick, disabled, disabledTone,
     // Defaults to `loading` state

package/dist/es/components/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAML,WAAW,GACZ,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAoE,MAAM,aAAa,CAAA;AAC9F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,CAAC,MAAM,qBAAqB,CAAA;AA+FnC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,UAAU,EACV,OAAO,EACP,QAAQ,EACR,KAAK,EACL,cAAc,EACd,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,YAAY;IACZ,8BAA8B;IAC9B,KAAK,GAAG,OAAO,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,OAAO,GAAG,QAAQ,IAAI,KAAK,CAAA;IAEjC,MAAM,WAAW,GAAyC,WAAW,CACnE,CAAC,CAAC,EAAE,EAAE;QACJ,IAAI,QAAQ,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;IACd,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,OAAO,CACL,kBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,gBACxB,KAAK,kBACH,OAAO,eACV,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAClB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,eAC3B,IAAI,sBACG,UAAU,oBACZ,QAAQ,kBACV,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,mBACvB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,gBAC5B,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,0BACZ,cAAc,EACpC,cAAc,EAAE,yBAAyB;QACzC,qCAAqC;QACrC,0EAA0E;QAC1E,QAAQ,EAAE,OAAO,mBACF,OAAO,EACtB,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,mBAEnB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,wBACpB,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACvD,OAAO,EAAE,WAAW,KAChB,SAAS,aAEb,KAAC,eAAe,IAAC,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,YAC9E,OAAO,IAAI,KAAC,gBAAgB,MAAK,QAAQ,CAAG,GAC7B,EAClB,eAAM,SAAS,EAAE,CAAC,CAAC,WAAW,YAAG,oBAAoB,CAAC,QAAQ,CAAC,GAAQ,IAChE,CACV,CAAA;AACH,CAAC,CAAA;AAyBD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CACzB,KAMG,EACH,EAAE;IACF,MAAM,EACJ,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,IAAI,EACX,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,cAAc,EACd,EAAE,EAAE,iBAAiB,EACrB,IAAI,EACJ,EAAE,EACF,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,UAAU,GAAG,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;IACpE,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,CAAA;IAC3C,MAAM,aAAa,GAAG,iBAAiB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAA;IAEhF,MAAM,WAAW,GAAG;QAClB,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC;QACtC,QAAQ;QACR,eAAe,EAAE,QAAQ;QACzB,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;QACrC,oEAAoE;QACpE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;QAC1C,oBAAoB,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;QACzD,YAAY,EAAE,KAAK;QACnB,cAAc,EAAE,OAAO;QACvB,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;QAClC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;QACpC,sBAAsB,EAAE,cAAc;QACtC,WAAW,EAAE,IAAI;QACjB,kBAAkB,EAAE,UAAU;QAC9B,gBAAgB,EAAE,QAAQ;QAC1B,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;QACzC,gBAAgB,EAAE,CAAC,GAA0C,EAAE,EAAE;YAC/D,yBAAyB,CAAC,GAAG,CAAC,CAAA;YAC9B,cAAc,EAAE,CAAC,GAAG,CAAC,CAAA;QACvB,CAAC;KACF,CAAA;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,qFAAqF;QACrF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACnC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,CAC9B,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,KAAK,KAAK,UAAU,CACtE,CACF,CAAA;QACD,OAAO,CACL,eAAM,IAAI,EAAC,MAAM,KAAK,WAAW,KAAM,UAAU,YAC/C,eAAM,SAAS,EAAE,CAAC,CAAC,WAAW,YAAG,oBAAoB,CAAC,QAAQ,CAAC,GAAQ,GAClE,CACR,CAAA;IACH,CAAC;IAED,MAAM,SAAS,GAAG;QAChB,GAAG,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,EAAE;YACpE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;QACjB,GAAG,WAAW;QACd,GAAG,SAAS;KACb,CAAA;IAED,OAAO,CACL,KAAC,aAAa,OAAK,SAAS,YAC1B,eAAM,SAAS,EAAE,CAAC,CAAC,WAAW,YAAG,oBAAoB,CAAC,QAAQ,CAAC,GAAQ,GACzD,CACjB,CAAA;AACH,CAAC,CAAe,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport {\n type ButtonHTMLAttributes,\n type ComponentProps,\n type ComponentType,\n type MouseEventHandler,\n type ReactNode,\n useCallback,\n} from \"react\"\nimport { handlePressableMouseEnter } from \"../../lib/helpers\"\nimport { wrapTextNodeSiblings } from \"../../lib/renderHelpers\"\nimport { type ControlSize, type SemanticColors, type Sizes, type Variants } from \"../../types\"\nimport { LoadingIndicator } from \"../Indicator\"\nimport { useLinkComponent } from \"../PlexUIProvider/internal\"\nimport { TransitionGroup } from \"../Transition/TransitionGroup\"\nimport s from \"./Button.module.css\"\n\ntype CommonProps = {\n /*\n Color for the button\n * @default secondary\n /\n color: SemanticColors<\n \"primary\" \| \"secondary\" \| \"danger\" \| \"success\" \| \"info\" \| \"discovery\" \| \"caution\" \| \"warning\"\n >\n /\n Style variant for the Button\n * @default \"solid\"\n /\n variant?: Variants<\"solid\" \| \"soft\" \| \"outline\" \| \"ghost\">\n /\n Determines if the button should be a fully rounded pill shape\n * @default false\n /\n pill?: boolean\n /\n Disables the button visually and from interactions\n * @default false\n /\n disabled?: boolean\n /\n Controls the visual tone when the button is disabled. \"relaxed\" will use a default cursor instead of not-allowed.\n /\n disabledTone?: \"relaxed\"\n /\n Determines if the button should take up 100% of available width\n * @default false\n /\n block?: boolean\n /\n Applies a negative margin using the current gutter to optically align the button\n * with surrounding content.\n /\n opticallyAlign?: \"start\" \| \"end\"\n /\n Controls size of the button, specifically height, but also includes defaults for `gutterSize`, `iconSize`, `font-size`, etc.\n \n \| 3xs \| 2xs \| xs \| sm \| md \| lg \| xl \| 2xl \| 3xl \|\n * \| ------- \| ------- \| ------- \| ------- \| ------- \| ------- \| ------- \| ------- \| ------- \|\n * \| `22px` \| `24px` \| `26px` \| `28px` \| `32px` \| `36px` \| `40px` \| `44px` \| `48px` \|\n * @default md\n /\n size?: ControlSize\n /\n Controls the size of icons within the button, defaults to value from `size`.\n \n \| xs \| sm \| md \| lg \| xl \| 2xl \|\n * \| ------ \| ------ \| ------ \| ------ \| ------ \| ------ \|\n * \| `14px` \| `16px` \| `18px` \| `20px` \| `22px` \| `24px` \|\n /\n iconSize?: Sizes<\"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| \"2xl\">\n /\n Controls gutter on the edges of the button, defaults to value from `size`.\n \n \| 3xs \| 2xs \| xs \| sm \| md \| lg \| xl \|\n * \| ------ \| ------ \| ------ \| ------ \| ------ \| ------ \| ------ \|\n * \| `4px` \| `6px` \| `8px` \| `10px` \| `12px` \| `14px` \| `16px` \|\n /\n gutterSize?: Sizes<\"3xs\" \| \"2xs\" \| \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\">\n /* Custom class applied to the Button element /\n className?: string\n /* Content rendered inside of the Button /\n children: React.ReactNode\n}\n\nexport type ButtonProps = CommonProps & {\n /\n Determines if the button should have matching width and height, based on the `size`.\n * @default false\n /\n uniform?: boolean\n /\n Displays selected styles on the button, varying by `variant\n * @default false\n /\n selected?: boolean\n /\n Displays loading indicator on top of button contents\n * @default false\n /\n loading?: boolean\n /\n Determines whether the button should be made inert, without introducing visual change.\n * @default false\n /\n inert?: boolean\n /* Ref for the button /\n ref?: React.Ref<HTMLButtonElement \| null>\n} & ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const Button = (props: ButtonProps) => {\n const {\n type = \"button\",\n color = \"primary\",\n variant = \"solid\",\n pill = false,\n uniform = false,\n size = \"md\",\n iconSize,\n gutterSize,\n loading,\n selected,\n block,\n opticallyAlign,\n children,\n className,\n onClick,\n disabled,\n disabledTone,\n // Defaults to `loading` state\n inert = loading,\n ...restProps\n } = props\n\n const isInert = disabled \|\| inert\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n if (disabled) {\n return\n }\n onClick?.(e)\n },\n [onClick, disabled],\n )\n\n return (\n <button\n type={type}\n className={clsx(s.Button, className)}\n data-color={color}\n data-variant={variant}\n data-pill={pill ? \"\" : undefined}\n data-uniform={uniform ? \"\" : undefined}\n data-size={size}\n data-gutter-size={gutterSize}\n data-icon-size={iconSize}\n data-loading={loading ? \"\" : undefined}\n data-selected={selected ? \"\" : undefined}\n data-block={block ? \"\" : undefined}\n data-optically-align={opticallyAlign}\n onPointerEnter={handlePressableMouseEnter}\n // Non-visual, accessible disablement\n // NOTE: Do not use literal `inert` because that is incorrect semantically\n disabled={isInert}\n aria-disabled={isInert}\n tabIndex={isInert ? -1 : undefined}\n // Visual disablement\n data-disabled={disabled ? \"\" : undefined}\n data-disabled-tone={disabled ? disabledTone : undefined}\n onClick={handleClick}\n {...restProps}\n >\n <TransitionGroup className={s.ButtonLoader} enterDuration={250} exitDuration={150}>\n {loading && <LoadingIndicator key=\"loader\" />}\n </TransitionGroup>\n <span className={s.ButtonInner}>{wrapTextNodeSiblings(children)}</span>\n </button>\n )\n}\n\ntype ButtonLink = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n T extends ComponentType<any> \| \"a\" = PlexUI.LinkComponent,\n>(\n props: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> &\n CommonProps & {\n /\n Explicity specify that the link is an external link. This should be\n * automatically detected based on the URL, but in some cases (e.g.\n * my-app://foo) you may want to explicitly set this.\n /\n external?: boolean\n /\n Override the default component used for the link. This is useful for\n * using a routing library, or SSR rendering.\n * purposes.\n \n @default 'a'\n */\n as?: T\n } & ComponentProps<T>,\n) => ReactNode\n\nexport const ButtonLink = ((\n props: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> &\n CommonProps & {\n href?: string\n to?: string\n external?: boolean\n as?: PlexUI.LinkComponent\n },\n) => {\n const {\n color = \"primary\",\n variant = \"solid\",\n pill = false,\n size = \"md\",\n gutterSize,\n iconSize,\n external,\n block,\n opticallyAlign,\n children,\n className,\n disabled,\n disabledTone,\n onClick,\n onPointerEnter,\n as: OverrideComponent,\n href,\n to,\n ...restProps\n } = props\n\n const isExternal = external ?? /^https?:\\/\\//.test(href ?? to ?? \"\")\n const DefaultComponent = useLinkComponent()\n const LinkComponent = OverrideComponent \|\| (isExternal ? \"a\" : DefaultComponent)\n\n const sharedProps = {\n \"className\": clsx(s.Button, className),\n disabled,\n \"aria-disabled\": disabled,\n \"tabIndex\": disabled ? -1 : undefined,\n // Visual disablement (inert not supported in links, always applied)\n \"data-disabled\": disabled ? \"\" : undefined,\n \"data-disabled-tone\": disabled ? disabledTone : undefined,\n \"data-color\": color,\n \"data-variant\": variant,\n \"data-pill\": pill ? \"\" : undefined,\n \"data-block\": block ? \"\" : undefined,\n \"data-optically-align\": opticallyAlign,\n \"data-size\": size,\n \"data-gutter-size\": gutterSize,\n \"data-icon-size\": iconSize,\n \"onClick\": disabled ? undefined : onClick,\n \"onPointerEnter\": (evt: React.PointerEvent<HTMLAnchorElement>) => {\n handlePressableMouseEnter(evt)\n onPointerEnter?.(evt)\n },\n }\n\n if (disabled) {\n // Don't thread down stuff that isn't valid for a span - just keep the event handlers\n const eventProps = Object.fromEntries(\n Object.entries(restProps).filter(\n ([key, value]) => key.startsWith(\"on\") && typeof value === \"function\",\n ),\n )\n return (\n <span role=\"link\" {...sharedProps} {...eventProps}>\n <span className={s.ButtonInner}>{wrapTextNodeSiblings(children)}</span>\n </span>\n )\n }\n\n const linkProps = {\n ...(isExternal\n ? { target: \"_blank\", rel: \"noopener noreferrer\", href: href ?? to }\n : { href, to }),\n ...sharedProps,\n ...restProps,\n }\n\n return (\n <LinkComponent {...linkProps}>\n <span className={s.ButtonInner}>{wrapTextNodeSiblings(children)}</span>\n </LinkComponent>\n )\n}) as ButtonLink\n"]}
1	+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport {\n type ButtonHTMLAttributes,\n type ComponentProps,\n type ComponentType,\n type MouseEventHandler,\n type ReactNode,\n useCallback,\n} from \"react\"\nimport { handlePressableMouseEnter } from \"../../lib/helpers\"\nimport { wrapTextNodeSiblings } from \"../../lib/renderHelpers\"\nimport { type ControlSize, type SemanticColors, type Sizes, type Variants } from \"../../types\"\nimport { LoadingIndicator } from \"../Indicator\"\nimport { useLinkComponent } from \"../PlexUIProvider/internal\"\nimport { TransitionGroup } from \"../Transition/TransitionGroup\"\nimport s from \"@plexui/styles/components/Button/Button.module.css\"\n\ntype CommonProps = {\n /*\n Color for the button\n * @default primary\n /\n color?: SemanticColors<\n \"primary\" \| \"secondary\" \| \"danger\" \| \"success\" \| \"info\" \| \"discovery\" \| \"caution\" \| \"warning\"\n >\n /\n Style variant for the Button\n * @default \"solid\"\n /\n variant?: Variants<\"solid\" \| \"soft\" \| \"outline\" \| \"ghost\">\n /\n Determines if the button should be a fully rounded pill shape\n * @default false\n /\n pill?: boolean\n /\n Disables the button visually and from interactions\n * @default false\n /\n disabled?: boolean\n /\n Controls the visual tone when the button is disabled. \"relaxed\" will use a default cursor instead of not-allowed.\n /\n disabledTone?: \"relaxed\"\n /\n Determines if the button should take up 100% of available width\n * @default false\n /\n block?: boolean\n /\n Applies a negative margin using the current gutter to optically align the button\n * with surrounding content.\n /\n opticallyAlign?: \"start\" \| \"end\"\n /\n Controls size of the button, specifically height, but also includes defaults for `gutterSize`, `iconSize`, `font-size`, etc.\n \n \| 3xs \| 2xs \| xs \| sm \| md \| lg \| xl \| 2xl \| 3xl \|\n * \| ------- \| ------- \| ------- \| ------- \| ------- \| ------- \| ------- \| ------- \| ------- \|\n * \| `22px` \| `24px` \| `26px` \| `28px` \| `32px` \| `36px` \| `40px` \| `44px` \| `48px` \|\n * @default md\n /\n size?: ControlSize\n /\n Controls the size of icons within the button, defaults to value from `size`.\n \n \| xs \| sm \| md \| lg \| xl \| 2xl \|\n * \| ------ \| ------ \| ------ \| ------ \| ------ \| ------ \|\n * \| `14px` \| `16px` \| `18px` \| `20px` \| `22px` \| `24px` \|\n /\n iconSize?: Sizes<\"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| \"2xl\">\n /\n Controls gutter on the edges of the button, defaults to value from `size`.\n \n \| 3xs \| 2xs \| xs \| sm \| md \| lg \| xl \|\n * \| ------ \| ------ \| ------ \| ------ \| ------ \| ------ \| ------ \|\n * \| `4px` \| `6px` \| `8px` \| `10px` \| `12px` \| `14px` \| `16px` \|\n /\n gutterSize?: Sizes<\"3xs\" \| \"2xs\" \| \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\">\n /* Custom class applied to the Button element /\n className?: string\n /* Content rendered inside of the Button /\n children: React.ReactNode\n}\n\nexport type ButtonProps = CommonProps & {\n /\n Determines if the button should have matching width and height, based on the `size`.\n * @default false\n /\n uniform?: boolean\n /\n Displays selected styles on the button, varying by `variant\n * @default false\n /\n selected?: boolean\n /\n Displays loading indicator on top of button contents\n * @default false\n /\n loading?: boolean\n /\n Determines whether the button should be made inert, without introducing visual change.\n * @default false\n /\n inert?: boolean\n /* Ref for the button /\n ref?: React.Ref<HTMLButtonElement \| null>\n} & ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const Button = (props: ButtonProps) => {\n const {\n type = \"button\",\n color = \"primary\",\n variant = \"solid\",\n pill = false,\n uniform = false,\n size = \"md\",\n iconSize,\n gutterSize,\n loading,\n selected,\n block,\n opticallyAlign,\n children,\n className,\n onClick,\n disabled,\n disabledTone,\n // Defaults to `loading` state\n inert = loading,\n ...restProps\n } = props\n\n const isInert = disabled \|\| inert\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n if (disabled) {\n return\n }\n onClick?.(e)\n },\n [onClick, disabled],\n )\n\n return (\n <button\n type={type}\n className={clsx(s.Button, className)}\n data-color={color}\n data-variant={variant}\n data-pill={pill ? \"\" : undefined}\n data-uniform={uniform ? \"\" : undefined}\n data-size={size}\n data-gutter-size={gutterSize}\n data-icon-size={iconSize}\n data-loading={loading ? \"\" : undefined}\n data-selected={selected ? \"\" : undefined}\n data-block={block ? \"\" : undefined}\n data-optically-align={opticallyAlign}\n onPointerEnter={handlePressableMouseEnter}\n // Non-visual, accessible disablement\n // NOTE: Do not use literal `inert` because that is incorrect semantically\n disabled={isInert}\n aria-disabled={isInert}\n tabIndex={isInert ? -1 : undefined}\n // Visual disablement\n data-disabled={disabled ? \"\" : undefined}\n data-disabled-tone={disabled ? disabledTone : undefined}\n onClick={handleClick}\n {...restProps}\n >\n <TransitionGroup className={s.ButtonLoader} enterDuration={250} exitDuration={150}>\n {loading && <LoadingIndicator key=\"loader\" />}\n </TransitionGroup>\n <span className={s.ButtonInner}>{wrapTextNodeSiblings(children)}</span>\n </button>\n )\n}\n\ntype ButtonLink = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n T extends ComponentType<any> \| \"a\" = PlexUI.LinkComponent,\n>(\n props: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> &\n CommonProps & {\n /\n Explicity specify that the link is an external link. This should be\n * automatically detected based on the URL, but in some cases (e.g.\n * my-app://foo) you may want to explicitly set this.\n /\n external?: boolean\n /\n Override the default component used for the link. This is useful for\n * using a routing library, or SSR rendering.\n * purposes.\n \n @default 'a'\n */\n as?: T\n } & ComponentProps<T>,\n) => ReactNode\n\nexport const ButtonLink = ((\n props: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> &\n CommonProps & {\n href?: string\n to?: string\n external?: boolean\n as?: PlexUI.LinkComponent\n },\n) => {\n const {\n color = \"primary\",\n variant = \"solid\",\n pill = false,\n size = \"md\",\n gutterSize,\n iconSize,\n external,\n block,\n opticallyAlign,\n children,\n className,\n disabled,\n disabledTone,\n onClick,\n onPointerEnter,\n as: OverrideComponent,\n href,\n to,\n ...restProps\n } = props\n\n const isExternal = external ?? /^https?:\\/\\//.test(href ?? to ?? \"\")\n const DefaultComponent = useLinkComponent()\n const LinkComponent = OverrideComponent \|\| (isExternal ? \"a\" : DefaultComponent)\n\n const sharedProps = {\n \"className\": clsx(s.Button, className),\n disabled,\n \"aria-disabled\": disabled,\n \"tabIndex\": disabled ? -1 : undefined,\n // Visual disablement (inert not supported in links, always applied)\n \"data-disabled\": disabled ? \"\" : undefined,\n \"data-disabled-tone\": disabled ? disabledTone : undefined,\n \"data-color\": color,\n \"data-variant\": variant,\n \"data-pill\": pill ? \"\" : undefined,\n \"data-block\": block ? \"\" : undefined,\n \"data-optically-align\": opticallyAlign,\n \"data-size\": size,\n \"data-gutter-size\": gutterSize,\n \"data-icon-size\": iconSize,\n \"onClick\": disabled ? undefined : onClick,\n \"onPointerEnter\": (evt: React.PointerEvent<HTMLAnchorElement>) => {\n handlePressableMouseEnter(evt)\n onPointerEnter?.(evt)\n },\n }\n\n if (disabled) {\n // Don't thread down stuff that isn't valid for a span - just keep the event handlers\n const eventProps = Object.fromEntries(\n Object.entries(restProps).filter(\n ([key, value]) => key.startsWith(\"on\") && typeof value === \"function\",\n ),\n )\n return (\n <span role=\"link\" {...sharedProps} {...eventProps}>\n <span className={s.ButtonInner}>{wrapTextNodeSiblings(children)}</span>\n </span>\n )\n }\n\n const linkProps = {\n ...(isExternal\n ? { target: \"_blank\", rel: \"noopener noreferrer\", href: href ?? to }\n : { href, to }),\n ...sharedProps,\n ...restProps,\n }\n\n return (\n <LinkComponent {...linkProps}>\n <span className={s.ButtonInner}>{wrapTextNodeSiblings(children)}</span>\n </LinkComponent>\n )\n}) as ButtonLink\n"]}

package/dist/es/components/Button/CopyButton.js CHANGED Viewed

@@ -1,33 +1,45 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { copyToClipboard } from "../../lib/copyToClipboard";
-import { Check, Copy } from "../Icon";
-import { Animate } from "../Transition";
-import { Button } from "./Button";
-export const CopyButton = ({ children, copyValue, onClick, ...restProps }) => {
+import { copyToClipboard } from "../../lib/copyToClipboard.js";
+import { Check, Copy } from "../Icon/index.js";
+import { Animate } from "../Transition/index.js";
+import { Button } from "./Button.js";
+export const CopyButton = ({ children, copyValue, onClick, onCopy, ...restProps }) => {
     const [copied, setCopied] = useState(false);
     const copiedTimeout = useRef(null);
-    const handleClick = (evt) => {
-        // No-op when copied is true
-        if (copied) {
+    const pending = useRef(false);
+    const mounted = useRef(true);
+    const handleClick = async (evt) => {
+        // No-op while copied, or while a write is still in flight
+        if (copied || pending.current) {
             return;
         }
-        setCopied(true);
         onClick?.(evt);
-        // Copy content to clipboard
-        // NOTE: Failures are a silent no-op
-        copyToClipboard(typeof copyValue === "function" ? copyValue() : copyValue);
+        // The copied state follows the clipboard: a failed write shows no check
+        pending.current = true;
+        const succeeded = await copyToClipboard(typeof copyValue === "function" ? copyValue() : copyValue);
+        pending.current = false;
+        if (!mounted.current)
+            return;
+        onCopy?.(succeeded);
+        if (!succeeded)
+            return;
+        setCopied(true);
         copiedTimeout.current = window.setTimeout(() => {
             setCopied(false);
         }, 1300);
     };
     useEffect(() => {
+        mounted.current = true;
         return () => {
+            mounted.current = false;
             if (copiedTimeout.current)
                 clearTimeout(copiedTimeout.current);
         };
     }, []);
-    return (_jsxs(Button, { ...restProps, onClick: handleClick, children: [_jsx(Animate, { className: "w-[var(--button-icon-size)] h-[var(--button-icon-size)]", initial: { scale: 0.6 }, enter: { scale: 1, delay: 150, duration: 300 }, exit: { scale: 0.6, duration: 150 }, forceCompositeLayer: true, children: copied ? _jsx(Check, {}, "copied-icon") : _jsx(Copy, {}, "copy-icon") }), typeof children === "function" ? children({ copied }) : children] }));
+    // Icon-only copy buttons have no text content, so they need a name of their own
+    const ariaLabel = restProps["aria-label"] ?? (children == null ? (copied ? "Copied" : "Copy") : undefined);
+    return (_jsxs(Button, { ...restProps, "aria-label": ariaLabel, onClick: handleClick, children: [_jsx(Animate, { className: "w-[var(--button-icon-size)] h-[var(--button-icon-size)]", initial: { scale: 0.6 }, enter: { scale: 1, delay: 150, duration: 300 }, exit: { scale: 0.6, duration: 150 }, forceCompositeLayer: true, children: copied ? _jsx(Check, {}, "copied-icon") : _jsx(Copy, {}, "copy-icon") }), typeof children === "function" ? children({ copied }) : children] }));
 };
 //# sourceMappingURL=CopyButton.js.map

package/dist/es/components/Button/CopyButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../../../src/components/Button/CopyButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAmB,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,eAAe,EAAyB,MAAM,2BAA2B,CAAA;AAClF,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;~~AAOnD~~,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,SAAS,EAAmB,EAAE,EAAE;~~IAC5F~~,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACpD,MAAM,aAAa,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;~~IAEjD~~,MAAM,~~WAAW~~,GAAG,CAAC,GAAkC,EAAE,EAAE;~~QACzD~~,~~4BAA4B~~;~~QAC5B~~,IAAI,MAAM,EAAE,CAAC;~~YACX~~,OAAM;QACR,CAAC;QAED,~~SAAS~~,CAAC,~~IAAI~~,CAAC,CAAA;~~QACf~~,OAAO,~~EAAE,~~CAAC,GAAG,~~CAAC~~,CAAA;~~QAEd~~,~~4BAA4B;QAC5B~~,~~oCAAoC;QACpC~~,eAAe,CAAC,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;~~QAE1E~~,aAAa,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC7C,SAAS,CAAC,KAAK,CAAC,CAAA;QAClB,CAAC,EAAE,IAAI,CAAC,CAAA;IACV,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,aAAa,CAAC,OAAO;gBAAE,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QAChE,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,MAAC,MAAM,OAAK,SAAS,EAAE,OAAO,EAAE,WAAW,~~aACzC~~,KAAC,OAAO,IACN,SAAS,EAAC,yDAAyD,EACnE,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC9C,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,EACnC,mBAAmB,kBAElB,MAAM,CAAC,CAAC,CAAC,KAAC,KAAK,MAAK,aAAa,CAAG,CAAC,CAAC,CAAC,KAAC,IAAI,MAAK,WAAW,CAAG,GACxD,EACT,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,IAC1D,CACV,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { useEffect, useRef, useState, type MouseEvent } from \"react\"\nimport { copyToClipboard, type ClipboardContent } from \"../../lib/copyToClipboard\"\nimport { Check, Copy } from \"../Icon\"\nimport { Animate } from \"../Transition\"\nimport { Button, type ButtonProps } from \"./Button\"\n\nexport type CopyButtonProps = {\n copyValue: string \| ClipboardContent \| (() => string) \| (() => ClipboardContent)\n children?: React.ReactNode \| ((props: { copied: boolean }) => React.ReactNode)\n} & Omit<ButtonProps, \"children\">\n\nexport const CopyButton = ({ children, copyValue, onClick, ...restProps }: CopyButtonProps) => {\n const [copied, setCopied] = useState<boolean>(false)\n const copiedTimeout = useRef<number \| null>(null)\n\n const handleClick = (evt: MouseEvent<HTMLButtonElement>) => {\n // No-op ~~when~~ copied is ~~true~~\n if (copied) {\n return\n }\n\n ~~setCopied(true)\n~~ onClick?.(evt)\n\n // ~~Copy~~ ~~content~~ to clipboard~~\n // NOTE~~: ~~Failures~~ ~~are~~ a ~~silent~~ no~~-op~~\n copyToClipboard(typeof copyValue === \"function\" ? copyValue() : copyValue)\n\n copiedTimeout.current = window.setTimeout(() => {\n setCopied(false)\n }, 1300)\n }\n\n useEffect(() => {\n return () => {\n if (copiedTimeout.current) clearTimeout(copiedTimeout.current)\n }\n }, [])\n\n return (\n <Button {...restProps} onClick={handleClick}>\n <Animate\n className=\"w-[var(--button-icon-size)] h-[var(--button-icon-size)]\"\n initial={{ scale: 0.6 }}\n enter={{ scale: 1, delay: 150, duration: 300 }}\n exit={{ scale: 0.6, duration: 150 }}\n forceCompositeLayer\n >\n {copied ? <Check key=\"copied-icon\" /> : <Copy key=\"copy-icon\" />}\n </Animate>\n {typeof children === \"function\" ? children({ copied }) : children}\n </Button>\n )\n}\n"]}
1	+ {"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../../../src/components/Button/CopyButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAmB,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,eAAe,EAAyB,MAAM,2BAA2B,CAAA;AAClF,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAYnD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAAmB,EAAE,EAAE;IACpG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACpD,MAAM,aAAa,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IACjD,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC7B,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAE5B,MAAM,WAAW,GAAG,KAAK,EAAE,GAAkC,EAAE,EAAE;QAC/D,0DAA0D;QAC1D,IAAI,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YAC9B,OAAM;QACR,CAAC;QAED,OAAO,EAAE,CAAC,GAAG,CAAC,CAAA;QAEd,wEAAwE;QACxE,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;QACtB,MAAM,SAAS,GAAG,MAAM,eAAe,CAAC,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;QAClG,OAAO,CAAC,OAAO,GAAG,KAAK,CAAA;QACvB,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAM;QAC5B,MAAM,EAAE,CAAC,SAAS,CAAC,CAAA;QACnB,IAAI,CAAC,SAAS;YAAE,OAAM;QAEtB,SAAS,CAAC,IAAI,CAAC,CAAA;QACf,aAAa,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC7C,SAAS,CAAC,KAAK,CAAC,CAAA;QAClB,CAAC,EAAE,IAAI,CAAC,CAAA;IACV,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;QACtB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAA;YACvB,IAAI,aAAa,CAAC,OAAO;gBAAE,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QAChE,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,gFAAgF;IAChF,MAAM,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAE1G,OAAO,CACL,MAAC,MAAM,OAAK,SAAS,gBAAc,SAAS,EAAE,OAAO,EAAE,WAAW,aAChE,KAAC,OAAO,IACN,SAAS,EAAC,yDAAyD,EACnE,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC9C,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,EACnC,mBAAmB,kBAElB,MAAM,CAAC,CAAC,CAAC,KAAC,KAAK,MAAK,aAAa,CAAG,CAAC,CAAC,CAAC,KAAC,IAAI,MAAK,WAAW,CAAG,GACxD,EACT,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,IAC1D,CACV,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { useEffect, useRef, useState, type MouseEvent } from \"react\"\nimport { copyToClipboard, type ClipboardContent } from \"../../lib/copyToClipboard\"\nimport { Check, Copy } from \"../Icon\"\nimport { Animate } from \"../Transition\"\nimport { Button, type ButtonProps } from \"./Button\"\n\nexport type CopyButtonProps = {\n copyValue: string \| ClipboardContent \| (() => string) \| (() => ClipboardContent)\n children?: React.ReactNode \| ((props: { copied: boolean }) => React.ReactNode)\n /*\n Called once the clipboard write settles, with whether it succeeded. The\n * button shows the copied state only after a successful write.\n */\n onCopy?: (copied: boolean) => void\n} & Omit<ButtonProps, \"children\" \| \"onCopy\">\n\nexport const CopyButton = ({ children, copyValue, onClick, onCopy, ...restProps }: CopyButtonProps) => {\n const [copied, setCopied] = useState<boolean>(false)\n const copiedTimeout = useRef<number \| null>(null)\n const pending = useRef(false)\n const mounted = useRef(true)\n\n const handleClick = async (evt: MouseEvent<HTMLButtonElement>) => {\n // No-op while copied, or while a write is still in flight\n if (copied \|\| pending.current) {\n return\n }\n\n onClick?.(evt)\n\n // The copied state follows the clipboard: a failed write shows no check\n pending.current = true\n const succeeded = await copyToClipboard(typeof copyValue === \"function\" ? copyValue() : copyValue)\n pending.current = false\n if (!mounted.current) return\n onCopy?.(succeeded)\n if (!succeeded) return\n\n setCopied(true)\n copiedTimeout.current = window.setTimeout(() => {\n setCopied(false)\n }, 1300)\n }\n\n useEffect(() => {\n mounted.current = true\n return () => {\n mounted.current = false\n if (copiedTimeout.current) clearTimeout(copiedTimeout.current)\n }\n }, [])\n\n // Icon-only copy buttons have no text content, so they need a name of their own\n const ariaLabel = restProps[\"aria-label\"] ?? (children == null ? (copied ? \"Copied\" : \"Copy\") : undefined)\n\n return (\n <Button {...restProps} aria-label={ariaLabel} onClick={handleClick}>\n <Animate\n className=\"w-[var(--button-icon-size)] h-[var(--button-icon-size)]\"\n initial={{ scale: 0.6 }}\n enter={{ scale: 1, delay: 150, duration: 300 }}\n exit={{ scale: 0.6, duration: 150 }}\n forceCompositeLayer\n >\n {copied ? <Check key=\"copied-icon\" /> : <Copy key=\"copy-icon\" />}\n </Animate>\n {typeof children === \"function\" ? children({ copied }) : children}\n </Button>\n )\n}\n"]}

package/dist/es/components/Button/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-export { Button, ButtonLink } from "./Button";
-export { CopyButton } from "./CopyButton";
+export { Button, ButtonLink } from "./Button.js";
+export { CopyButton } from "./CopyButton.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/ButtonGroup/ButtonGroup.js CHANGED Viewed

@@ -3,8 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { Slot } from "radix-ui";
 import {} from "react";
-import { Separator } from "../Separator";
-import s from "./ButtonGroup.module.css";
+import { Separator } from "../Separator/index.js";
+import s from "@plexui/styles/components/ButtonGroup/ButtonGroup.module.css";
 const ButtonGroupRoot = ({ orientation = "horizontal", className, ref, ...restProps }) => (_jsx("div", { ref: ref, role: "group", "data-slot": "button-group", "data-orientation": orientation, className: clsx(s.Root, className), ...restProps }));
 const ButtonGroupSeparator = ({ className, orientation, ...restProps }) => (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation ?? "vertical", className: clsx(s.Separator, className), ...restProps }));
 const ButtonGroupText = ({ asChild = false, className, ref, ...restProps }) => {

package/dist/es/components/ButtonGroup/ButtonGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAC/B,OAAO,EAAsD,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,CAAC,MAAM,~~0BAA0B~~,CAAA;~~AAkBxC~~,MAAM,eAAe,GAAG,CAAC,EACvB,WAAW,GAAG,YAAY,EAC1B,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACK,EAAE,EAAE,CAAC,CACtB,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,eACF,cAAc,sBACN,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,GACb,CACH,CAAA;~~AAiBD~~,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACc,EAAE,EAAE,CAAC,CAC/B,KAAC,SAAS,iBACE,wBAAwB,EAClC,WAAW,EAAE,WAAW,IAAI,UAAU,EACtC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,KACnC,SAAS,GACb,CACH,CAAA;AAiBD,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,GAAG,KAAK,EACf,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACS,EAAE,EAAE;IACzB,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IACxC,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,eACE,mBAAmB,EAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,GACb,CACH,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,CAAC,MAAM,WAAW,GAAG,eAAuC,CAAA;AAClE,WAAW,CAAC,SAAS,GAAG,oBAAoB,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG,eAAe,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Slot } from \"radix-ui\"\nimport { type ComponentProps, type HTMLAttributes, type Ref } from \"react\"\nimport { Separator } from \"../Separator\"\nimport s from \"./ButtonGroup.module.css\"\n\n/* ------------------------------------------------------------------ /\n/ Root /\n/ ------------------------------------------------------------------ /\n\nexport type ButtonGroupOrientation = \"horizontal\" \| \"vertical\"\n\nexport type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {\n /\n Direction of the joined buttons.\n * @default \"horizontal\"\n /\n orientation?: ButtonGroupOrientation\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nconst ButtonGroupRoot = ({\n orientation = \"horizontal\",\n className,\n ref,\n ...restProps\n}: ButtonGroupProps) => (\n <div\n ref={ref}\n role=\"group\"\n data-slot=\"button-group\"\n data-orientation={orientation}\n className={clsx(s.Root, className)}\n {...restProps}\n />\n)\n\n/ ------------------------------------------------------------------ /\n/ Separator — thin divider between items /\n/ ------------------------------------------------------------------ /\n\nexport type ButtonGroupSeparatorProps = Omit<\n ComponentProps<typeof Separator>,\n \"orientation\"\n> & {\n /\n When omitted, ~~flips~~ to ~~match~~ the ~~surrounding~~ ~~ButtonGroup~~ ~~axis.\~~n * Pass explicitly to ~~override~~ ~~(rare)~~.\n /\n orientation?: ButtonGroupOrientation\n}\n\nconst ButtonGroupSeparator = ({\n className,\n orientation,\n ...restProps\n}: ButtonGroupSeparatorProps) => (\n <Separator\n data-slot=\"button-group-separator\"\n orientation={orientation ?? \"vertical\"}\n className={clsx(s.Separator, className)}\n {...restProps}\n />\n)\n\n/ ------------------------------------------------------------------ /\n/ Text — muted label/pill sharing the group's joined geometry /\n/ ------------------------------------------------------------------ /\n\nexport type ButtonGroupTextProps = HTMLAttributes<HTMLDivElement> & {\n /\n Swap the rendered element for a child (label, span, etc.) while\n * keeping the group's visual treatment.\n * @default false\n /\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nconst ButtonGroupText = ({\n asChild = false,\n className,\n ref,\n ...restProps\n}: ButtonGroupTextProps) => {\n const Comp = asChild ? Slot.Root : \"div\"\n return (\n <Comp\n ref={ref}\n data-slot=\"button-group-text\"\n className={clsx(s.Text, className)}\n {...restProps}\n />\n )\n}\n\n/ ------------------------------------------------------------------ /\n/ Export — compound API /\n/ ------------------------------------------------------------------ */\n\ntype ButtonGroupComponent = typeof ButtonGroupRoot & {\n Separator: typeof ButtonGroupSeparator\n Text: typeof ButtonGroupText\n}\n\nexport const ButtonGroup = ButtonGroupRoot as ButtonGroupComponent\nButtonGroup.Separator = ButtonGroupSeparator\nButtonGroup.Text = ButtonGroupText\n"]}
1	+ {"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAC/B,OAAO,EAAsD,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,CAAC,MAAM,8DAA8D,CAAA;AAkB5E,MAAM,eAAe,GAAG,CAAC,EACvB,WAAW,GAAG,YAAY,EAC1B,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACK,EAAE,EAAE,CAAC,CACtB,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,eACF,cAAc,sBACN,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,GACb,CACH,CAAA;AAkBD,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACc,EAAE,EAAE,CAAC,CAC/B,KAAC,SAAS,iBACE,wBAAwB,EAClC,WAAW,EAAE,WAAW,IAAI,UAAU,EACtC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,KACnC,SAAS,GACb,CACH,CAAA;AAiBD,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,GAAG,KAAK,EACf,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACS,EAAE,EAAE;IACzB,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IACxC,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,eACE,mBAAmB,EAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,GACb,CACH,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,CAAC,MAAM,WAAW,GAAG,eAAuC,CAAA;AAClE,WAAW,CAAC,SAAS,GAAG,oBAAoB,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG,eAAe,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Slot } from \"radix-ui\"\nimport { type ComponentProps, type HTMLAttributes, type Ref } from \"react\"\nimport { Separator } from \"../Separator\"\nimport s from \"@plexui/styles/components/ButtonGroup/ButtonGroup.module.css\"\n\n/* ------------------------------------------------------------------ /\n/ Root /\n/ ------------------------------------------------------------------ /\n\nexport type ButtonGroupOrientation = \"horizontal\" \| \"vertical\"\n\nexport type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {\n /\n Direction of the joined buttons.\n * @default \"horizontal\"\n /\n orientation?: ButtonGroupOrientation\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nconst ButtonGroupRoot = ({\n orientation = \"horizontal\",\n className,\n ref,\n ...restProps\n}: ButtonGroupProps) => (\n <div\n ref={ref}\n role=\"group\"\n data-slot=\"button-group\"\n data-orientation={orientation}\n className={clsx(s.Root, className)}\n {...restProps}\n />\n)\n\n/ ------------------------------------------------------------------ /\n/ Separator — thin divider between items /\n/ ------------------------------------------------------------------ /\n\nexport type ButtonGroupSeparatorProps = Omit<\n ComponentProps<typeof Separator>,\n \"orientation\"\n> & {\n /\n When omitted, uses `\"vertical\"`, the axis that looks right between\n * horizontal items. Pass explicitly inside a vertical group.\n * @default \"vertical\"\n /\n orientation?: ButtonGroupOrientation\n}\n\nconst ButtonGroupSeparator = ({\n className,\n orientation,\n ...restProps\n}: ButtonGroupSeparatorProps) => (\n <Separator\n data-slot=\"button-group-separator\"\n orientation={orientation ?? \"vertical\"}\n className={clsx(s.Separator, className)}\n {...restProps}\n />\n)\n\n/ ------------------------------------------------------------------ /\n/ Text — muted label/pill sharing the group's joined geometry /\n/ ------------------------------------------------------------------ /\n\nexport type ButtonGroupTextProps = HTMLAttributes<HTMLDivElement> & {\n /\n Swap the rendered element for a child (label, span, etc.) while\n * keeping the group's visual treatment.\n * @default false\n /\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nconst ButtonGroupText = ({\n asChild = false,\n className,\n ref,\n ...restProps\n}: ButtonGroupTextProps) => {\n const Comp = asChild ? Slot.Root : \"div\"\n return (\n <Comp\n ref={ref}\n data-slot=\"button-group-text\"\n className={clsx(s.Text, className)}\n {...restProps}\n />\n )\n}\n\n/ ------------------------------------------------------------------ /\n/ Export — compound API /\n/ ------------------------------------------------------------------ */\n\ntype ButtonGroupComponent = typeof ButtonGroupRoot & {\n Separator: typeof ButtonGroupSeparator\n Text: typeof ButtonGroupText\n}\n\nexport const ButtonGroup = ButtonGroupRoot as ButtonGroupComponent\nButtonGroup.Separator = ButtonGroupSeparator\nButtonGroup.Text = ButtonGroupText\n"]}

package/dist/es/components/ButtonGroup/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export { ButtonGroup, } from "./ButtonGroup";
+export { ButtonGroup, } from "./ButtonGroup.js";
 //# sourceMappingURL=index.js.map