npm - @plexui/ui - Versions diffs - 0.2.0 - Mend

@plexui/ui 0.2.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 (2278) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025-present Plex UI
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,173 @@
+# @plexui/ui
+A modern React component library built on the same design foundations as OpenAI's ChatGPT UI. 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)
+---
+## Highlights
+- **Battle-tested at ChatGPT scale** — components validated in a product used by hundreds of millions.
+- **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.
+---
+## Installation
+```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:
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@plexui/ui/css";
+```
+### 2. Wrap your app in PlexUIProvider
+`PlexUIProvider` supplies shared context (e.g. the link component) to all Plex UI components.
+```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>
+  );
+}
+```
+> **Next.js:** Pass your `<Link>` component from `next/link` as `linkComponent` so navigation links use client-side routing.
+### 3. Use components
+```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, 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";
+```
+---
+## 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 |
+---
+## 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 */
+```
+---
+## License
+[MIT](./LICENSE)

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

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, X } from "../Icon";
+import s from "./Alert.module.css";
+export const Alert = ({ color = "primary", variant = "outline", title, description, actions, actionsPlacement, indicator, className, actionsClassName, onDismiss, ref, ...restProps }) => {
+    const containerRef = useRef(null);
+    const actionsRef = useRef(null);
+    const [actionsAutoPlacement, setActionsAutoPlacement] = useState("end");
+    // @ts-expect-error -- Type issue in usehooks-ts
+    const { width: containerWidth } = useResizeObserver({ ref: containerRef });
+    useEffect(() => {
+        const actionsWidth = actionsRef.current?.clientWidth ?? 0;
+        if (actionsWidth && containerWidth) {
+            // If actions are larger than a third of the container width, wrap them.
+            const placement = actionsWidth > containerWidth / 3 ? "bottom" : "end";
+            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 && (_jsx("div", { className: clsx(s.Actions, actionsClassName), ref: actionsRef, children: actions }))] }), onDismiss && (_jsx("button", { type: "button", onClick: onDismiss, className: s.DismissButton, "aria-label": "Dismiss", children: _jsx(X, {}) }))] }));
+};
+export const Indicator = ({ color }) => {
+    // Choose a default icon based on the color (which signals intention)
+    switch (color) {
+        case "warning":
+        case "caution":
+        case "danger":
+            return _jsx(Warning, {});
+        case "success":
+            return _jsx(CheckCircle, {});
+        default:
+            return _jsx(Info, {});
+    }
+};
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +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, X } from \"../Icon\"\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 && (\n <div className={clsx(s.Actions, actionsClassName)} ref={actionsRef}>\n {actions}\n </div>\n )}\n </div>\n {onDismiss && (\n <button type=\"button\" onClick={onDismiss} className={s.DismissButton} aria-label=\"Dismiss\">\n <X />\n </button>\n )}\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/Alert.module.css ADDED Viewed

@@ -0,0 +1,210 @@
+@layer components {.Alert {
+  display: flex;
+  align-items: center;
+  gap: var(--alert-gap);
+  width: 100%;
+  padding: var(--alert-gutter);
+  border-radius: var(--alert-border-radius);
+  font-size: var(--alert-font-size);
+  line-height: var(--alert-line-height);
+}
+  .Alert:where([data-actions-placement="bottom"]) {
+    align-items: flex-start;
+  }
+  /* =============================================
+    Variants
+  ============================================= */
+  .Alert[data-variant="soft"] {
+    background-color: var(--alert-background-color);
+    box-shadow: 0 0 0 1px var(--alert-border-color) inset;
+    color: var(--alert-text-color);
+  }
+    .Alert[data-variant="soft"]:where([data-color="primary"]) {
+      --alert-background-color: var(--color-background-primary-surface);
+      --alert-border-color: var(--color-border-primary-surface);
+      --alert-text-color: var(--color-text);
+    }
+    .Alert[data-variant="soft"]:where([data-color="success"]) {
+      --alert-background-color: var(--color-background-success-surface);
+      --alert-border-color: var(--color-border-success-surface);
+      --alert-text-color: var(--color-text-success-surface);
+    }
+    .Alert[data-variant="soft"]:where([data-color="warning"]) {
+      --alert-background-color: var(--color-background-warning-surface);
+      --alert-border-color: var(--color-border-warning-surface);
+      --alert-text-color: var(--color-text-warning-surface);
+    }
+    .Alert[data-variant="soft"]:where([data-color="caution"]) {
+      --alert-background-color: var(--color-background-caution-surface);
+      --alert-border-color: var(--color-border-caution-surface);
+      --alert-text-color: var(--color-text-caution-surface);
+    }
+    .Alert[data-variant="soft"]:where([data-color="danger"]) {
+      --alert-background-color: var(--color-background-danger-surface);
+      --alert-border-color: var(--color-border-danger-surface);
+      --alert-text-color: var(--color-text-danger-surface);
+    }
+    .Alert[data-variant="soft"]:where([data-color="info"]) {
+      --alert-background-color: var(--color-background-info-surface);
+      --alert-border-color: var(--color-border-info-surface);
+      --alert-text-color: var(--color-text-info-surface);
+    }
+    .Alert[data-variant="soft"]:where([data-color="discovery"]) {
+      --alert-background-color: var(--color-background-discovery-surface);
+      --alert-border-color: var(--color-border-discovery-surface);
+      --alert-text-color: var(--color-text-discovery-surface);
+    }
+  .Alert[data-variant="solid"] {
+    background-color: var(--alert-background-color);
+    color: var(--alert-text-color);
+  }
+    .Alert[data-variant="solid"]:where([data-color="primary"]) {
+      --alert-background-color: var(--color-background-primary-solid);
+      --alert-text-color: var(--color-text-primary-solid);
+    }
+    .Alert[data-variant="solid"]:where([data-color="success"]) {
+      --alert-background-color: var(--color-background-success-solid);
+      --alert-text-color: var(--color-text-success-solid);
+    }
+    .Alert[data-variant="solid"]:where([data-color="warning"]) {
+      --alert-background-color: var(--color-background-warning-solid);
+      --alert-text-color: var(--color-text-warning-solid);
+    }
+    .Alert[data-variant="solid"]:where([data-color="caution"]) {
+      --alert-background-color: var(--color-background-caution-solid);
+      --alert-text-color: var(--color-text-caution-solid);
+    }
+    .Alert[data-variant="solid"]:where([data-color="danger"]) {
+      --alert-background-color: var(--color-background-danger-solid);
+      --alert-text-color: var(--color-text-danger-solid);
+    }
+    .Alert[data-variant="solid"]:where([data-color="info"]) {
+      --alert-background-color: var(--color-background-info-solid);
+      --alert-text-color: var(--color-text-info-solid);
+    }
+    .Alert[data-variant="solid"]:where([data-color="discovery"]) {
+      --alert-background-color: var(--color-background-discovery-solid);
+      --alert-text-color: var(--color-text-discovery-solid);
+    }
+  .Alert[data-variant="outline"] {
+    box-shadow: 0 0 0 1px var(--alert-border-color) inset;
+    color: var(--alert-text-color);
+  }
+    .Alert[data-variant="outline"]:where([data-color="primary"]) {
+      --alert-border-color: var(--color-border);
+      --alert-text-color: var(--color-text);
+    }
+    .Alert[data-variant="outline"]:where([data-color="success"]) {
+      --alert-border-color: var(--color-border-success-outline);
+      --alert-text-color: var(--color-text-success-outline);
+    }
+    .Alert[data-variant="outline"]:where([data-color="warning"]) {
+      --alert-border-color: var(--color-border-warning-outline);
+      --alert-text-color: var(--color-text-warning-outline);
+    }
+    .Alert[data-variant="outline"]:where([data-color="caution"]) {
+      --alert-border-color: var(--color-border-caution-outline);
+      --alert-text-color: var(--color-text-caution-outline);
+    }
+    .Alert[data-variant="outline"]:where([data-color="danger"]) {
+      --alert-border-color: var(--color-border-danger-outline);
+      --alert-text-color: var(--color-text-danger-outline);
+    }
+    .Alert[data-variant="outline"]:where([data-color="info"]) {
+      --alert-border-color: var(--color-border-info-outline);
+      --alert-text-color: var(--color-text-info-outline);
+    }
+    .Alert[data-variant="outline"]:where([data-color="discovery"]) {
+      --alert-border-color: var(--color-border-discovery-outline);
+      --alert-text-color: var(--color-text-discovery-outline);
+    }.Content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  min-width: 0;
+}
+  :where(.Alert[data-actions-placement="bottom"]) .Content {
+    display: block;
+  }
+  .Indicator svg {
+    width: var(--alert-indicator-size, 20px);
+    height: var(--alert-indicator-size, 20px);
+  }.Message {
+  flex: 1;
+  min-width: 0;
+}.Title {
+  font-weight: var(--alert-title-font-weight);
+  text-wrap: pretty;
+}
+  /* Slight spacing when paired with a description */
+  .Title ~ .Description {
+    margin-top: 2px;
+  }.Description {
+  opacity: 1;
+  text-wrap: pretty;
+}.Actions {
+  display: flex;
+  gap: calc(var(--spacing) * 2);
+}
+  :where(.Alert[data-actions-placement="end"]) .Actions {
+    align-self: center;
+    /* Additional padding between right side or actions */
+    margin-left: var(--alert-gutter);
+  }
+  :where(.Alert[data-actions-placement="bottom"]) .Actions {
+    margin-top: var(--alert-gutter);
+  }.DismissButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: calc(var(--spacing) * 1);
+  margin: calc(calc(var(--spacing) * 1) * -1);
+  border: none;
+  background: transparent;
+  color: currentColor;
+  opacity: 0.5;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: opacity 0.15s;
+}
+  .DismissButton:hover {
+    opacity: 1;
+  }
+  .DismissButton svg {
+    width: 16px;
+    height: 16px;
+  }
+}

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

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

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA","sourcesContent":["export { Alert, type AlertProps } from \"./Alert\"\n"]}

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

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+export const Avatar = (props) => {
+    // Validate the image url before sending to the component
+    const validImageUrl = validateImageUrl(props.imageUrl);
+    // Keying off of imageUrl allows us to refresh imageStatus automatically through React rendering
+    return _createElement(AvatarInner, { ...props, imageUrl: validImageUrl, key: validImageUrl });
+};
+export const AvatarInner = (props) => {
+    const { className, size, overflowCount, name, color = "secondary", variant = "soft", imageUrl, Icon,
+    // asChild support
+    ...restProps } = props;
+    const [imageStatus, setImageStatus] = useState();
+    const isInteractive = !!(restProps.onPointerDown || restProps.onClick);
+    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: (() => {
+            if (imageUrl && imageStatus !== "error") {
+                return (_jsx(AvatarImage, { status: imageStatus, url: imageUrl, onError: () => setImageStatus("error"), onLoad: () => setImageStatus("loaded") }));
+            }
+            if (Icon) {
+                return _jsx(Icon, { className: s.AvatarIcon });
+            }
+            return overflowCount ? (_jsx(AvatarOverflowCount, { count: overflowCount })) : (_jsx(AvatarInitial, { name: name }));
+        })() }));
+};
+const validateImageUrl = (imageUrl) => {
+    if (!imageUrl) {
+        return;
+    }
+    // Avoid specific pattern of images from gravatar.com, which use a pair of initials, instead of a single initial.
+    if (imageUrl.includes("gravatar.com") && imageUrl.includes("cdn.auth0.com")) {
+        return;
+    }
+    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" }) }));
+};
+const AvatarInitial = ({ name = "" }) => {
+    const firstInitial = useMemo(() => name.charAt(0).toUpperCase(), [name]);
+    return _jsx("span", { className: s.AvatarInitial, children: firstInitial });
+};
+const AvatarOverflowCount = ({ count }) => {
+    const formattedCount = useMemo(() => {
+        return new Intl.NumberFormat("en", {
+            notation: "compact",
+            compactDisplay: "short",
+            maximumFractionDigits: 0,
+        })
+            .format(count)
+            .toLocaleLowerCase();
+    }, [count]);
+    return (_jsxs("span", { className: s.AvatarOverflowCount, "data-letter-count": formattedCount.length, children: [_jsx("span", { className: s.AvatarOverflowCountSymbol, children: "+" }), formattedCount] }));
+};
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +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 \"./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 if (imageUrl && imageStatus !== \"error\") {\n return (\n <AvatarImage\n status={imageStatus}\n url={imageUrl}\n onError={() => setImageStatus(\"error\")}\n onLoad={() => setImageStatus(\"loaded\")}\n />\n )\n }\n if (Icon) {\n return <Icon className={s.AvatarIcon} />\n }\n return overflowCount ? (\n <AvatarOverflowCount count={overflowCount} />\n ) : (\n <AvatarInitial name={name} />\n )\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"]}