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

@plexui/ui 0.19.1 → 0.20.1

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 (402) hide show

package/README.md CHANGED Viewed

@@ -1,175 +1,52 @@
 # @plexui/ui
-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.
+React components of [Plex UI](https://plexui.com): 50 accessible components on Radix primitives, one 9-size scale across every control, three-layer design tokens and dark mode. Built for AI agents, with an MCP server, an agent skill and `llms.txt`.
-[Documentation](https://plexui.com) &bull; [GitHub](https://github.com/plex-ui/docs) &bull; [Figma Kit](https://plexui.com/#pricing)
+The same components for Vue: [`@plexui/vue`](https://www.npmjs.com/package/@plexui/vue).
-> **Figma Design System PRO** — 22,000+ variants, all on Figma Variables. [Get the kit &rarr;](https://plexui.com/#pricing)
+[Docs](https://plexui.com) · [Components](https://plexui.com/components) · [GitHub](https://github.com/plex-ui/ui)
----
-## Highlights
-- **Production-grade** — components designed and tested for real products at scale.
-- **9-step size scale** — all key controls (Button, Input, Select, SegmentedControl, etc.) share a unified `ControlSize` scale from `3xs` (22 px) to `3xl` (48 px). Most competitors offer only 3–4.
-- **Three-layer design tokens** — primitive → semantic → component CSS custom properties with `light-dark()` theming, alpha transparency scale, and 4-level elevation system.
-- **Radix + Tailwind 4** — accessible primitives under the hood, utility-first styling on top.
-- **Built for AI code editors** — consistent naming, clear token system, and comprehensive props give Claude, Cursor, Codex & other AI tools the building blocks to generate professional UI.
----
-## Installation
+## Install
 ```bash
 npm install @plexui/ui
 ```
-### Peer dependencies
-The package requires the following peers — install them if they are not already in your project:
-```bash
-npm install react react-dom tailwindcss
-```
-| Peer | Version |
-|------|---------|
-| `react` | `^18 \|\| ^19` |
-| `react-dom` | `^18 \|\| ^19` |
-| `tailwindcss` | `^4.0.10` |
----
-## Setup
-### 1. Import CSS
-Add the Plex UI stylesheet to your global CSS file alongside Tailwind:
+Requires React 19 and Tailwind CSS 4.
 ```css
-/* app/globals.css */
+/* globals.css */
+@layer theme, base, components, utilities;
 @import "tailwindcss";
 @import "@plexui/ui/css";
+@source "../node_modules/@plexui/ui";
 ```
-### 2. Wrap your app in PlexUIProvider
-`PlexUIProvider` supplies shared context (e.g. the link component) to all Plex UI components.
+On Vite, add `plexui()` from `@plexui/ui/vite` and drop the `@layer` line. Wrap the app in `PlexUIProvider` to set the link component (for example Next.js `Link`):
 ```tsx
-// app/layout.tsx (Next.js example)
 import { PlexUIProvider } from "@plexui/ui/components/PlexUIProvider";
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>
-        <PlexUIProvider linkComponent="a">
-          {children}
-        </PlexUIProvider>
-      </body>
-    </html>
-  );
-}
+<PlexUIProvider linkComponent={Link}>{children}</PlexUIProvider>
 ```
-> **Next.js:** Pass your `<Link>` component from `next/link` as `linkComponent` so navigation links use client-side routing.
-### 3. Use components
+## Use
 ```tsx
 import { Button } from "@plexui/ui/components/Button";
-export function Example() {
-  return (
-    <Button color="primary" variant="solid" size="md">
-      Get started
-    </Button>
-  );
-}
-```
----
-## Exports
-All exports use subpath imports for optimal tree-shaking.
-### Components
-```ts
-import { Button, ButtonLink } from "@plexui/ui/components/Button";
-import { Input } from "@plexui/ui/components/Input";
-import { Select, Option } from "@plexui/ui/components/Select";
-// ... 35 components total
-```
-<details>
-<summary>Full component list</summary>
-Alert, Avatar, AvatarGroup, Badge, Button, ButtonLink, Checkbox, CodeBlock, CopyTooltip, DateInput, DatePicker, DateRangePicker, EmptyMessage, FieldError, FloatingLabelInput, Icon, Image, Indicators (LoadingIndicator, LoadingDots, CircularProgress), Input, Markdown, Menu, PlexUIProvider, Popover, ProgressSteps, RadioGroup, SegmentedControl, Select, SelectControl, ShimmerText, Sidebar, Skeleton, Slider, Switch, TagInput, TextLink, Textarea, Tooltip, Transition (Animate, AnimateLayout, AnimateLayoutGroup, TransitionGroup)
-</details>
-### Hooks
-```ts
-import { useBreakpoints } from "@plexui/ui/hooks/useBreakpoints";
-import { useScrollable } from "@plexui/ui/hooks/useScrollable";
-// ... 14 hooks total
-```
-### Types
-```ts
-import type { ControlSize, SemanticColors, Variants } from "@plexui/ui/types";
-```
-### CSS
-```css
-@import "@plexui/ui/css";
-```
-### Utilities
-```ts
-import { theme } from "@plexui/ui/theme";
-import { helpers } from "@plexui/ui/helpers";
-import { dateUtils } from "@plexui/ui/dateUtils";
+<Button color="primary" size="lg">Get started</Button>
 ```
----
+Every component has its own subpath: `@plexui/ui/components/<Name>`. Hooks live in `@plexui/ui/hooks/<name>`, shared types in `@plexui/ui/types`, theme helpers in `@plexui/ui/theme`.
 ## Size scale
-All key controls share a unified height scale:
-| Size | Height |
-|------|--------|
-| `3xs` | 22 px |
-| `2xs` | 24 px |
-| `xs` | 26 px |
-| `sm` | 28 px |
-| **`md`** | **32 px** (default) |
-| `lg` | 36 px |
-| `xl` | 40 px |
-| `2xl` | 44 px |
-| `3xl` | 48 px |
----
+Controls share one `size` scale: `3xs` 22px, `2xs` 24px, `xs` 26px, `sm` 28px, `md` 32px (default), `lg` 36px, `xl` 40px, `2xl` 44px, `3xl` 48px.
 ## Dark mode
-Plex UI uses the CSS `light-dark()` function. Toggle between themes by setting the `color-scheme` property on the root element:
-```css
-:root { color-scheme: light; }       /* light theme */
-:root { color-scheme: dark; }        /* dark theme */
-:root { color-scheme: light dark; }  /* follows OS preference */
-```
----
+Set `data-theme="dark"` (or `"light"`) on `<html>`; it also works on any element for a nested scope. `applyDocumentTheme`, `getDocumentTheme` and `useDocumentTheme` from `@plexui/ui/theme` read and set it. See [Dark mode](https://plexui.com/docs/concepts#dark-mode).
 ## License

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":"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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 \"./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"]}