@kavagy/react 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,35 @@
+# @kavagy/react
+
+## 0.1.1
+
+### Patch Changes
+
+- cd4353a: Generate Tailwind utilities for the semantic bg/text/border tokens (`bg-brand-solid`, `text-primary_on-brand`, `border-primary`, ...). Before this, `theme.css` declared them only as `--color-*` custom properties, which Tailwind v4 maps to `bg-bg-*`, so the classes the components use produced no CSS and the components rendered unstyled in every consumer. `theme.css` now adds a `@theme inline` alias block; token names and CSS custom properties are unchanged. The prebuilt `styles.css` includes these rules.
+- Updated dependencies [cd4353a]
+  - @kavagy/tokens@0.1.1
+
+## 0.1.0
+
+### Minor Changes
+
+- 6b877ab: Align dark mode on `.dark`, and make brand surfaces re-brandable.
+
+  - Dark mode now uses the `.dark` class instead of `.dark-mode`, matching the
+    convention consuming apps already use. Apps applying `.dark-mode` must rename
+    it.
+  - `@kavagy/tokens` now declares `tailwindcss-animate` and
+    `tailwindcss-react-aria-components` as dependencies. They were emitted as
+    `@plugin` in `theme.css` but never declared, so importing the stylesheet
+    failed in a consumer that did not happen to have them installed.
+  - `Button`'s primary variant reads `text-primary_on-brand` instead of a
+    hardcoded `text-white`. A client with a light brand colour previously got
+    white text on a light surface with no way to override it.
+  - Added semantic `outline-focus-ring` / `ring-focus-ring` tokens so focus rings
+    can be themed independently of the brand colour.
+
+### Patch Changes
+
+- Updated dependencies [6b877ab]
+- Updated dependencies [413ef2d]
+  - @kavagy/tokens@0.1.0
+  - @kavagy/icons@0.1.0

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,30 @@
+# Third-party notices
+
+Components in this package are derived from the free, open-source Untitled UI
+React components (https://github.com/untitleduico/react). Every derived file
+carries a `@kavagy-source: untitledui/<path>` header naming its origin. Those
+components are distributed under the following license:
+
+```
+MIT License
+
+Copyright (c) 2025 Untitled 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/dist/avatar/avatar.d.ts

@@ -0,0 +1,189 @@
+import { VariantProps } from "../utils/tv.js";
+import { FC, ReactNode } from "react";
+//#region src/avatar/avatar.d.ts
+export declare const avatarStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    sm: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    xl: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    '2xl': {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+  };
+  rounded: {
+    true: {
+      root: string;
+      content: string;
+    };
+  };
+  border: {
+    true: {
+      root: string;
+    };
+  };
+  focusable: {
+    true: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  content: string;
+  initials: string;
+  icon: string;
+}, undefined, {
+  size: {
+    xs: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    sm: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    xl: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    '2xl': {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+  };
+  rounded: {
+    true: {
+      root: string;
+      content: string;
+    };
+  };
+  border: {
+    true: {
+      root: string;
+    };
+  };
+  focusable: {
+    true: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  content: string;
+  initials: string;
+  icon: string;
+}, import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    sm: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    md: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    lg: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    xl: {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+    '2xl': {
+      root: string;
+      initials: string;
+      icon: string;
+    };
+  };
+  rounded: {
+    true: {
+      root: string;
+      content: string;
+    };
+  };
+  border: {
+    true: {
+      root: string;
+    };
+  };
+  focusable: {
+    true: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  content: string;
+  initials: string;
+  icon: string;
+}, undefined, unknown, unknown, undefined>>;
+type AvatarVariants = VariantProps<typeof avatarStyles>;
+export interface AvatarProps {
+  size?: AvatarVariants['size'];
+  className?: string;
+  contentClassName?: string;
+  src?: string | null;
+  alt?: string;
+  rounded?: boolean;
+  border?: boolean;
+  badge?: ReactNode;
+  status?: 'online' | 'offline';
+  verified?: boolean;
+  count?: number;
+  initials?: string;
+  placeholderIcon?: FC<{
+    className?: string;
+  }>;
+  placeholder?: ReactNode;
+  focusable?: boolean;
+}
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=avatar.d.ts.map

package/dist/avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","names":[],"sources":["../../src/avatar/avatar.tsx"],"mappings":";;;qBAWa,0CAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCpB,iBAAiB,oBAAoB;iBAkEzB;EACf,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA,kBAAkB;IAAK;;EACvB,cAAc;EACd;;qBAGW,wBAAM,0BAAA,8BAAA,cAAA"}

package/dist/avatar/avatar.js

@@ -0,0 +1,185 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { tv } from "../utils/tv.js";
+import { User01 } from "@kavagy/icons";
+import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/avatar/avatar.tsx
+const avatarStyles = tv({
+	slots: {
+		root: "relative inline-flex shrink-0 rounded-[7px]",
+		content: "relative inline-flex size-full shrink-0 items-center justify-center overflow-hidden rounded-md bg-tertiary outline-[0.5px] -outline-offset-[0.5px] outline-black/16",
+		initials: "text-quaternary font-semibold",
+		icon: "text-fg-quaternary"
+	},
+	variants: {
+		size: {
+			xs: {
+				root: "size-6",
+				initials: "text-xs",
+				icon: "size-4"
+			},
+			sm: {
+				root: "size-8",
+				initials: "text-sm",
+				icon: "size-5"
+			},
+			md: {
+				root: "size-10",
+				initials: "text-md",
+				icon: "size-6"
+			},
+			lg: {
+				root: "size-12",
+				initials: "text-lg",
+				icon: "size-7"
+			},
+			xl: {
+				root: "size-14",
+				initials: "text-xl",
+				icon: "size-8"
+			},
+			"2xl": {
+				root: "size-16",
+				initials: "text-display-xs",
+				icon: "size-8"
+			}
+		},
+		rounded: { true: {
+			root: "rounded-full",
+			content: "rounded-full"
+		} },
+		border: { true: { root: "ring-1 ring-secondary_alt" } },
+		focusable: { true: { root: "outline-transparent group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-focus-ring" } }
+	},
+	compoundVariants: [
+		{
+			border: true,
+			size: "xs",
+			class: { root: "p-px" }
+		},
+		{
+			border: true,
+			size: "sm",
+			class: { root: "p-px" }
+		},
+		{
+			border: true,
+			size: "md",
+			class: { root: "p-px" }
+		},
+		{
+			border: true,
+			size: "lg",
+			class: { root: "p-[1.5px]" }
+		},
+		{
+			border: true,
+			size: "xl",
+			class: { root: "p-0.5" }
+		},
+		{
+			border: true,
+			size: "2xl",
+			class: { root: "p-0.5" }
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		rounded: true
+	}
+});
+const onlineIndicatorSizes = {
+	xs: "size-1.5",
+	sm: "size-2",
+	md: "size-2.5",
+	lg: "size-3",
+	xl: "size-3.5",
+	"2xl": "size-4"
+};
+const AvatarOnlineIndicator = ({ size, status }) => /* @__PURE__ */ jsx("span", {
+	"data-status": status,
+	className: cx("absolute right-0 bottom-0 rounded-full ring-[1.5px] ring-bg-primary", status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300", onlineIndicatorSizes[size])
+});
+const AvatarCount = ({ count }) => /* @__PURE__ */ jsx("div", {
+	className: "absolute right-0 bottom-0 p-px",
+	children: /* @__PURE__ */ jsx("div", {
+		className: "flex size-3.5 items-center justify-center rounded-full bg-fg-error-primary text-center text-[10px] leading-[13px] font-bold text-white",
+		children: count
+	})
+});
+const verifiedTickSizes = {
+	xs: "size-2.5",
+	sm: "size-3",
+	md: "size-3.5",
+	lg: "size-4",
+	xl: "size-4.5",
+	"2xl": "size-5"
+};
+const VerifiedTick = ({ size, className }) => /* @__PURE__ */ jsxs("svg", {
+	"aria-hidden": "true",
+	viewBox: "0 0 10 10",
+	fill: "none",
+	className: cx("z-10 text-utility-blue-500", verifiedTickSizes[size], className),
+	children: [/* @__PURE__ */ jsx("path", {
+		className: "fill-current",
+		d: "M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z"
+	}), /* @__PURE__ */ jsx("path", {
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		fill: "white",
+		d: "M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z"
+	})]
+});
+const Avatar = forwardRef(function Avatar(props, ref) {
+	const { size = "md", src, alt, initials, placeholder, placeholderIcon: PlaceholderIcon, border, badge, status, verified, count, focusable = false, rounded = true, className, contentClassName } = props;
+	const [isFailed, setIsFailed] = useState(false);
+	const canShowImage = Boolean(src) && !isFailed;
+	const slots = avatarStyles({
+		size,
+		rounded,
+		border,
+		focusable
+	});
+	const renderMainContent = () => {
+		if (canShowImage) return /* @__PURE__ */ jsx("img", {
+			"data-avatar-img": true,
+			className: "size-full object-cover",
+			src: src ?? void 0,
+			alt,
+			onError: () => setIsFailed(true)
+		});
+		if (initials) return /* @__PURE__ */ jsx("span", {
+			className: slots.initials(),
+			children: initials
+		});
+		if (PlaceholderIcon) return /* @__PURE__ */ jsx(PlaceholderIcon, { className: slots.icon() });
+		return placeholder || /* @__PURE__ */ jsx(User01, { className: slots.icon() });
+	};
+	const renderBadgeContent = () => {
+		if (status) return /* @__PURE__ */ jsx(AvatarOnlineIndicator, {
+			status,
+			size: size ?? "md"
+		});
+		if (verified) return /* @__PURE__ */ jsx(VerifiedTick, {
+			size: size ?? "md",
+			className: cx("absolute right-0 bottom-0", size === "xs" && "-right-px -bottom-px")
+		});
+		if (count) return /* @__PURE__ */ jsx(AvatarCount, { count });
+		return badge;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-avatar": true,
+		className: cx(slots.root(), className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cx(slots.content(), canShowImage && size !== "xs" && "before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]", contentClassName),
+			children: renderMainContent()
+		}), renderBadgeContent()]
+	});
+});
+Avatar.displayName = "Avatar";
+//#endregion
+export { Avatar, avatarStyles };
+
+//# sourceMappingURL=avatar.js.map

package/dist/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/avatar/avatar.tsx, base/avatar/base-components/avatar-online-indicator.tsx, base/avatar/base-components/avatar-count.tsx, base/avatar/base-components/verified-tick.tsx */\n\nimport { User01 } from '@kavagy/icons';\nimport type { FC, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\nimport { cx } from '../utils/cx';\nimport type { VariantProps } from '../utils/tv';\nimport { tv } from '../utils/tv';\n\nexport const avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex shrink-0 rounded-[7px]',\n    content:\n      'relative inline-flex size-full shrink-0 items-center justify-center overflow-hidden rounded-md bg-tertiary outline-[0.5px] -outline-offset-[0.5px] outline-black/16',\n    initials: 'text-quaternary font-semibold',\n    icon: 'text-fg-quaternary',\n  },\n  variants: {\n    size: {\n      xs: { root: 'size-6', initials: 'text-xs', icon: 'size-4' },\n      sm: { root: 'size-8', initials: 'text-sm', icon: 'size-5' },\n      md: { root: 'size-10', initials: 'text-md', icon: 'size-6' },\n      lg: { root: 'size-12', initials: 'text-lg', icon: 'size-7' },\n      xl: { root: 'size-14', initials: 'text-xl', icon: 'size-8' },\n      '2xl': { root: 'size-16', initials: 'text-display-xs', icon: 'size-8' },\n    },\n    rounded: { true: { root: 'rounded-full', content: 'rounded-full' } },\n    border: { true: { root: 'ring-1 ring-secondary_alt' } },\n    focusable: {\n      true: {\n        root: 'outline-transparent group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-focus-ring',\n      },\n    },\n  },\n  compoundVariants: [\n    { border: true, size: 'xs', class: { root: 'p-px' } },\n    { border: true, size: 'sm', class: { root: 'p-px' } },\n    { border: true, size: 'md', class: { root: 'p-px' } },\n    { border: true, size: 'lg', class: { root: 'p-[1.5px]' } },\n    { border: true, size: 'xl', class: { root: 'p-0.5' } },\n    { border: true, size: '2xl', class: { root: 'p-0.5' } },\n  ],\n  defaultVariants: { size: 'md', rounded: true },\n});\n\ntype AvatarVariants = VariantProps<typeof avatarStyles>;\ntype AvatarSize = NonNullable<AvatarVariants['size']>;\n\nconst onlineIndicatorSizes: Record<AvatarSize, string> = {\n  xs: 'size-1.5',\n  sm: 'size-2',\n  md: 'size-2.5',\n  lg: 'size-3',\n  xl: 'size-3.5',\n  '2xl': 'size-4',\n};\n\nconst AvatarOnlineIndicator = ({\n  size,\n  status,\n}: {\n  size: AvatarSize;\n  status: 'online' | 'offline';\n}) => (\n  <span\n    data-status={status}\n    className={cx(\n      'absolute right-0 bottom-0 rounded-full ring-[1.5px] ring-bg-primary',\n      status === 'online' ? 'bg-fg-success-secondary' : 'bg-utility-neutral-300',\n      onlineIndicatorSizes[size],\n    )}\n  />\n);\n\nconst AvatarCount = ({ count }: { count: number }) => (\n  <div className=\"absolute right-0 bottom-0 p-px\">\n    <div className=\"flex size-3.5 items-center justify-center rounded-full bg-fg-error-primary text-center text-[10px] leading-[13px] font-bold text-white\">\n      {count}\n    </div>\n  </div>\n);\n\nconst verifiedTickSizes: Record<AvatarSize, string> = {\n  xs: 'size-2.5',\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-4',\n  xl: 'size-4.5',\n  '2xl': 'size-5',\n};\n\nconst VerifiedTick = ({ size, className }: { size: AvatarSize; className?: string }) => (\n  <svg\n    aria-hidden=\"true\"\n    viewBox=\"0 0 10 10\"\n    fill=\"none\"\n    className={cx('z-10 text-utility-blue-500', verifiedTickSizes[size], className)}\n  >\n    <path\n      className=\"fill-current\"\n      d=\"M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      fill=\"white\"\n      d=\"M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z\"\n    />\n  </svg>\n);\n\nexport interface AvatarProps {\n  size?: AvatarVariants['size'];\n  className?: string;\n  contentClassName?: string;\n  src?: string | null;\n  alt?: string;\n  rounded?: boolean;\n  border?: boolean;\n  badge?: ReactNode;\n  status?: 'online' | 'offline';\n  verified?: boolean;\n  count?: number;\n  initials?: string;\n  placeholderIcon?: FC<{ className?: string }>;\n  placeholder?: ReactNode;\n  focusable?: boolean;\n}\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(props, ref) {\n  const {\n    size = 'md',\n    src,\n    alt,\n    initials,\n    placeholder,\n    placeholderIcon: PlaceholderIcon,\n    border,\n    badge,\n    status,\n    verified,\n    count,\n    focusable = false,\n    rounded = true,\n    className,\n    contentClassName,\n  } = props;\n\n  const [isFailed, setIsFailed] = useState(false);\n  const canShowImage = Boolean(src) && !isFailed;\n  const slots = avatarStyles({ size, rounded, border, focusable });\n\n  const renderMainContent = () => {\n    if (canShowImage) {\n      return (\n        <img\n          data-avatar-img\n          className=\"size-full object-cover\"\n          src={src ?? undefined}\n          alt={alt}\n          onError={() => setIsFailed(true)}\n        />\n      );\n    }\n    if (initials) {\n      return <span className={slots.initials()}>{initials}</span>;\n    }\n    if (PlaceholderIcon) {\n      return <PlaceholderIcon className={slots.icon()} />;\n    }\n    return placeholder || <User01 className={slots.icon()} />;\n  };\n\n  const renderBadgeContent = () => {\n    if (status) return <AvatarOnlineIndicator status={status} size={size ?? 'md'} />;\n    if (verified) {\n      return (\n        <VerifiedTick\n          size={size ?? 'md'}\n          className={cx('absolute right-0 bottom-0', size === 'xs' && '-right-px -bottom-px')}\n        />\n      );\n    }\n    if (count) return <AvatarCount count={count} />;\n    return badge;\n  };\n\n  return (\n    <div ref={ref} data-avatar className={cx(slots.root(), className)}>\n      <div\n        className={cx(\n          slots.content(),\n          canShowImage &&\n            size !== 'xs' &&\n            'before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]',\n          contentClassName,\n        )}\n      >\n        {renderMainContent()}\n      </div>\n      {renderBadgeContent()}\n    </div>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n"],"mappings":"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"}

package/dist/avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { Avatar, AvatarProps, avatarStyles } from "./avatar.js";
+export { Avatar, type AvatarProps, avatarStyles };

package/dist/avatar/index.js

@@ -0,0 +1,2 @@
+import { Avatar, avatarStyles } from "./avatar.js";
+export { Avatar, avatarStyles };

package/dist/badges/badges.d.ts

@@ -0,0 +1,149 @@
+import { VariantProps } from "../utils/tv.js";
+import { FC, ReactNode } from "react";
+//#region src/badges/badges.d.ts
+export declare const badgeStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      dismissButton: string;
+    };
+    md: {
+      root: string;
+      dismissButton: string;
+    };
+    lg: {
+      root: string;
+      dismissButton: string;
+    };
+  };
+  type: {
+    'pill-color': {
+      root: string;
+    };
+    color: {
+      root: string;
+    };
+    modern: {
+      root: string;
+    };
+  };
+  color: {
+    gray: {};
+    brand: {};
+    error: {};
+    warning: {};
+    success: {};
+    blue: {};
+    indigo: {};
+    pink: {};
+    orange: {};
+  };
+}, {
+  root: string;
+  addon: string;
+  dismissButton: string;
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+      dismissButton: string;
+    };
+    md: {
+      root: string;
+      dismissButton: string;
+    };
+    lg: {
+      root: string;
+      dismissButton: string;
+    };
+  };
+  type: {
+    'pill-color': {
+      root: string;
+    };
+    color: {
+      root: string;
+    };
+    modern: {
+      root: string;
+    };
+  };
+  color: {
+    gray: {};
+    brand: {};
+    error: {};
+    warning: {};
+    success: {};
+    blue: {};
+    indigo: {};
+    pink: {};
+    orange: {};
+  };
+}, {
+  root: string;
+  addon: string;
+  dismissButton: string;
+}, import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      dismissButton: string;
+    };
+    md: {
+      root: string;
+      dismissButton: string;
+    };
+    lg: {
+      root: string;
+      dismissButton: string;
+    };
+  };
+  type: {
+    'pill-color': {
+      root: string;
+    };
+    color: {
+      root: string;
+    };
+    modern: {
+      root: string;
+    };
+  };
+  color: {
+    gray: {};
+    brand: {};
+    error: {};
+    warning: {};
+    success: {};
+    blue: {};
+    indigo: {};
+    pink: {};
+    orange: {};
+  };
+}, {
+  root: string;
+  addon: string;
+  dismissButton: string;
+}, undefined, unknown, unknown, undefined>>;
+type BadgeVariants = VariantProps<typeof badgeStyles>;
+export interface BadgeProps {
+  size?: BadgeVariants['size'];
+  type?: BadgeVariants['type'];
+  color?: BadgeVariants['color'];
+  /** Renders a status dot before the content. */
+  dot?: boolean;
+  iconLeading?: FC<{
+    className?: string;
+  }> | ReactNode;
+  iconTrailing?: FC<{
+    className?: string;
+  }> | ReactNode;
+  /** Renders a close button; once `onDismiss` is passed, the badge becomes dismissible. */
+  onDismiss?: () => void;
+  dismissLabel?: string;
+  children?: ReactNode;
+  className?: string;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+//# sourceMappingURL=badges.d.ts.map

package/dist/badges/badges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badges.d.ts","names":[],"sources":["../../src/badges/badges.tsx"],"mappings":";;;qBAea,yCAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoLnB,gBAAgB,oBAAoB;iBAExB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;;EAER;EACA,cAAc;IAAK;OAAwB;EAC3C,eAAe;IAAK;OAAwB;;EAE5C;EACA;EACA,WAAW;EACX;;qBAGW,uBAAK,0BAAA,6BAAA,cAAA"}