@skdx/react 0.27.0 → 0.29.0

package/dist/avatar/AvatarImage.d.ts

@@ -6,12 +6,20 @@ import type { AvatarImageProps } from './types.js';
  * renders nothing while idle, loading, or on error, so a sibling
  * `AvatarFallback` shows through instead. Must be used inside an `Avatar`.
  *
+ * `alt` defaults to the root's `label`, so the avatar announces the same name
+ * loaded as it does while showing its fallback, and is forced to `""` when the
+ * root is `decorative`. It is still worth passing explicitly when the picture
+ * says something the label does not.
+ *
  * @example
  * ```tsx
- * <Avatar>
- *   <AvatarImage src="/user.png" alt="Jane Doe" />
+ * <Avatar label="Jane Doe">
+ *   <AvatarImage src="/user.png" />
  *   <AvatarFallback>JD</AvatarFallback>
  * </Avatar>
  * ```
  */
-export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const AvatarImage: {
+    ({ onLoadingStatusChange, src, srcSet, sizes, alt, asChild, children, ref: forwardedRef, ...props }: AvatarImageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/avatar/index.d.cts

@@ -1,4 +1,2 @@
-export * from './Avatar.cjs';
-export { AvatarImage } from './AvatarImage.cjs';
-export { AvatarFallback } from './AvatarFallback.cjs';
-export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './types.cjs';
+export { Avatar } from './Avatar.cjs';
+export type { AvatarProps } from './types.cjs';

package/dist/avatar/index.d.ts

@@ -1,4 +1,2 @@
-export * from './Avatar.js';
-export { AvatarImage } from './AvatarImage.js';
-export { AvatarFallback } from './AvatarFallback.js';
-export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './types.js';
+export { Avatar } from './Avatar.js';
+export type { AvatarProps } from './types.js';

package/dist/avatar/primitives.d.cts

@@ -0,0 +1,17 @@
+/**
+ * `Avatar`, `AvatarImage`, and `AvatarFallback` primitives.
+ *
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarFallback, AvatarImage } from '@skdx/react/primitives/avatar';
+ *
+ * <Avatar label="Jane Doe">
+ *   <AvatarImage src="/user.png" />
+ *   <AvatarFallback delayMs={300}>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+export { Avatar } from './Avatar.cjs';
+export { AvatarImage } from './AvatarImage.cjs';
+export { AvatarFallback } from './AvatarFallback.cjs';
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './types.cjs';

package/dist/avatar/primitives.d.ts

@@ -0,0 +1,17 @@
+/**
+ * `Avatar`, `AvatarImage`, and `AvatarFallback` primitives.
+ *
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarFallback, AvatarImage } from '@skdx/react/primitives/avatar';
+ *
+ * <Avatar label="Jane Doe">
+ *   <AvatarImage src="/user.png" />
+ *   <AvatarFallback delayMs={300}>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+export { Avatar } from './Avatar.js';
+export { AvatarImage } from './AvatarImage.js';
+export { AvatarFallback } from './AvatarFallback.js';
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './types.js';

package/dist/avatar/types.d.cts

@@ -5,9 +5,48 @@ export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 export interface AvatarContextValue {
     imageLoadingStatus: ImageLoadingStatus;
     onImageLoadingStatusChange: (status: ImageLoadingStatus) => void;
+    /** The root's `label`, used as the image's default `alt` so every state announces the same name. */
+    label: string | undefined;
+    /** Whether the root is marked decorative, which forces `alt=""` on the image. */
+    decorative: boolean;
 }
 /** Props for the {@link Avatar} root. */
 export interface AvatarProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * The avatar's accessible name, applied as `aria-label` on the root and used as the image's default `alt`.
+     * @default undefined — the name is whatever the Image's `alt` or the Fallback's text happens to be.
+     */
+    label?: string | undefined;
+    /**
+     * Marks the avatar decorative: sets `aria-hidden="true"` on the root and forces `alt=""` on the Image part.
+     * @default false
+     */
+    decorative?: boolean | undefined;
+    /**
+     * The image to load. Without it the Fallback renders directly. Ignored when `children` is given.
+     * @default undefined
+     */
+    src?: string | undefined;
+    /**
+     * The person or entity's name, used to derive the Fallback's initials and, when `label` is absent, the root's accessible name. Ignored when `children` is given.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Delay before the derived Fallback appears, to avoid a flash on fast connections. Ignored when `children` is given.
+     * @default 0 — no delay.
+     */
+    fallbackDelayMs?: number | undefined;
+    /**
+     * Corner rung the skin rounds the avatar by, mirrored to `data-shape`.
+     * @default undefined — the skin's own default corner.
+     */
+    shape?: 'circle' | 'rounded' | 'square' | (string & {}) | undefined;
+    /**
+     * Size rung the skin scales the avatar by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
 }
 /** Props for {@link AvatarImage} — renders an `<img>` that reports its own load status so {@link Avatar} can show {@link AvatarFallback} until it loads. */
 export interface AvatarImageProps extends PrimitivePropsWithRef<'img'> {
@@ -15,7 +54,7 @@ export interface AvatarImageProps extends PrimitivePropsWithRef<'img'> {
      * Fires whenever the image's loading status changes.
      * @default undefined — no-op if omitted.
      */
-    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+    onLoadingStatusChange?: ((status: ImageLoadingStatus) => void) | undefined;
 }
 /** Props for {@link AvatarFallback} — rendered in place of {@link AvatarImage} while it loads, fails, or is absent. */
 export interface AvatarFallbackProps extends PrimitivePropsWithRef<'span'> {
@@ -23,5 +62,5 @@ export interface AvatarFallbackProps extends PrimitivePropsWithRef<'span'> {
      * Delay before showing the fallback, to avoid a flash on fast connections.
      * @default undefined — renders immediately, with no delay.
      */
-    delayMs?: number;
+    delayMs?: number | undefined;
 }

package/dist/avatar/types.d.ts

@@ -5,9 +5,48 @@ export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 export interface AvatarContextValue {
     imageLoadingStatus: ImageLoadingStatus;
     onImageLoadingStatusChange: (status: ImageLoadingStatus) => void;
+    /** The root's `label`, used as the image's default `alt` so every state announces the same name. */
+    label: string | undefined;
+    /** Whether the root is marked decorative, which forces `alt=""` on the image. */
+    decorative: boolean;
 }
 /** Props for the {@link Avatar} root. */
 export interface AvatarProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * The avatar's accessible name, applied as `aria-label` on the root and used as the image's default `alt`.
+     * @default undefined — the name is whatever the Image's `alt` or the Fallback's text happens to be.
+     */
+    label?: string | undefined;
+    /**
+     * Marks the avatar decorative: sets `aria-hidden="true"` on the root and forces `alt=""` on the Image part.
+     * @default false
+     */
+    decorative?: boolean | undefined;
+    /**
+     * The image to load. Without it the Fallback renders directly. Ignored when `children` is given.
+     * @default undefined
+     */
+    src?: string | undefined;
+    /**
+     * The person or entity's name, used to derive the Fallback's initials and, when `label` is absent, the root's accessible name. Ignored when `children` is given.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Delay before the derived Fallback appears, to avoid a flash on fast connections. Ignored when `children` is given.
+     * @default 0 — no delay.
+     */
+    fallbackDelayMs?: number | undefined;
+    /**
+     * Corner rung the skin rounds the avatar by, mirrored to `data-shape`.
+     * @default undefined — the skin's own default corner.
+     */
+    shape?: 'circle' | 'rounded' | 'square' | (string & {}) | undefined;
+    /**
+     * Size rung the skin scales the avatar by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
 }
 /** Props for {@link AvatarImage} — renders an `<img>` that reports its own load status so {@link Avatar} can show {@link AvatarFallback} until it loads. */
 export interface AvatarImageProps extends PrimitivePropsWithRef<'img'> {
@@ -15,7 +54,7 @@ export interface AvatarImageProps extends PrimitivePropsWithRef<'img'> {
      * Fires whenever the image's loading status changes.
      * @default undefined — no-op if omitted.
      */
-    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+    onLoadingStatusChange?: ((status: ImageLoadingStatus) => void) | undefined;
 }
 /** Props for {@link AvatarFallback} — rendered in place of {@link AvatarImage} while it loads, fails, or is absent. */
 export interface AvatarFallbackProps extends PrimitivePropsWithRef<'span'> {
@@ -23,5 +62,5 @@ export interface AvatarFallbackProps extends PrimitivePropsWithRef<'span'> {
      * Delay before showing the fallback, to avoid a flash on fast connections.
      * @default undefined — renders immediately, with no delay.
      */
-    delayMs?: number;
+    delayMs?: number | undefined;
 }

package/dist/badge/Badge.cjs

@@ -1 +1,2 @@
-"use strict";var y=Object.create;var t=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var n=(e,o)=>{for(var r in o)t(e,r,{get:o[r],enumerable:!0})},m=(e,o,r,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of P(o))!l.call(e,a)&&a!==r&&t(e,a,{get:()=>o[a],enumerable:!(p=B(o,a))||p.enumerable});return e};var x=(e,o,r)=>(r=e!=null?y(c(e)):{},m(o||!e||!e.__esModule?t(r,"default",{value:e,enumerable:!0}):r,e)),R=e=>m(t({},"__esModule",{value:!0}),e);var N={};n(N,{Badge:()=>i});module.exports=R(N);var s=x(require("react"),1),d=require("../utils/part.cjs"),f=require("../utils/primitive.cjs"),g=require("react/jsx-runtime"),i=s.forwardRef((e,o)=>(0,g.jsx)(f.Primitive.span,{...e,...(0,d.skdxPart)("badge","root",e.className),ref:o}));i.displayName="Badge";0&&(module.exports={Badge});
+'use client';
+"use strict";var fe=Object.create;var y=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var ge=Object.getPrototypeOf,ue=Object.prototype.hasOwnProperty;var be=(t,e)=>{for(var a in e)y(t,a,{get:e[a],enumerable:!0})},S=(t,e,a,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of ce(e))!ue.call(t,o)&&o!==a&&y(t,o,{get:()=>e[o],enumerable:!(l=pe(e,o))||l.enumerable});return t};var Be=(t,e,a)=>(a=t!=null?fe(ge(t)):{},S(e||!t||!t.__esModule?y(a,"default",{value:t,enumerable:!0}):a,t)),Re=t=>S(y({},"__esModule",{value:!0}),t);var Pe={};be(Pe,{Badge:()=>D,BadgeAnatomy:()=>T,BadgeDelete:()=>x,BadgeDeleteIcon:()=>U,BadgeLabel:()=>P,BadgeLeading:()=>b,BadgeProvider:()=>ee,BadgeTrailing:()=>C,useBadgeContext:()=>f});module.exports=Re(Pe);var i=Be(require("react"),1),N=require("../tag-group/TagGroup.cjs"),z=require("../utils/appearance.cjs"),Q=require("../utils/composeRefs.cjs"),W=require("../utils/createContext.cjs"),Z=require("../utils/liveAnnouncer.cjs"),j=require("../utils/part.cjs"),p=require("../utils/primitive.cjs");var O=require("../utils/Glyph.cjs");var V=require("../utils/part.cjs"),v=require("../utils/primitive.cjs");var G=require("react/jsx-runtime"),x=({ref:t,...e})=>{let a=f("BadgeDelete");if(!a.grouped)throw new Error("[skandadx] `BadgeDelete` requires its `Badge` to be inside a `TagGroup` \u2014 a standalone `Badge` has no group to remove it from.");return(0,G.jsx)(v.Primitive.button,{type:"button","aria-label":`${a.deleteLabel} ${a.label}`.trim(),disabled:a.disabled,"data-disabled":a.disabled?"":void 0,tabIndex:-1,...e,...(0,V.skdxPart)("badge","delete",e.className),ref:t,onClick:(0,v.composeEventHandlers)(e.onClick,()=>{a.remove()})})};x.displayName="BadgeDelete";var K=require("../utils/part.cjs"),H=require("../utils/primitive.cjs");var $=require("react/jsx-runtime"),P=({ref:t,...e})=>(f("BadgeLabel"),(0,$.jsx)(H.Primitive.span,{...e,...(0,K.skdxPart)("badge","label",e.className),ref:t}));P.displayName="BadgeLabel";var F=require("../utils/part.cjs"),J=require("../utils/primitive.cjs");var M=require("react/jsx-runtime"),b=({ref:t,...e})=>(f("BadgeLeading"),(0,M.jsx)(J.Primitive.span,{...e,...(0,F.skdxPart)("badge","leading",e.className),ref:t}));b.displayName="BadgeLeading";var n=require("react/jsx-runtime");function U(){return(0,n.jsx)(O.Glyph,{name:"close"})}function T({label:t,leading:e,deletable:a}){return(0,n.jsxs)(n.Fragment,{children:[e?(0,n.jsx)(b,{children:e}):null,(0,n.jsx)(P,{children:t}),a?(0,n.jsx)(x,{children:(0,n.jsx)(U,{})}):null]})}var X=require("../utils/part.cjs"),q=require("../utils/primitive.cjs"),Y=require("react/jsx-runtime"),C=({ref:t,...e})=>(0,Y.jsx)(q.Primitive.span,{...e,...(0,X.skdxPart)("badge","trailing",e.className),ref:t});C.displayName="BadgeTrailing";var d=require("react/jsx-runtime"),_=["Delete","Backspace"];function ye(t,e){if(t)return t.tabStopIndex===e?0:-1}function ve(t,e,a,l){return{role:t?"listitem":void 0,"data-skdx-tag":t?"":void 0,"aria-disabled":a&&t?!0:void 0,"data-disabled":a?"":void 0,"data-selected":l?"":void 0,tabIndex:ye(t,e)}}function xe({asChild:t,children:e,deletable:a,label:l,leading:o,trailing:c}){if(e===void 0&&(l!==""||a))return(0,d.jsx)(T,{label:l,leading:o,deletable:a});if(!o&&!c)return e;let g=t&&i.isValidElement(e)?e:null,B=(0,d.jsxs)(d.Fragment,{children:[o?(0,d.jsx)(b,{children:o}):null,g?g.props.children:e,c?(0,d.jsx)(C,{children:c}):null]});return g?i.cloneElement(g,void 0,B):B}var[ee,f]=(0,W.createSafeContext)("Badge"),D=({as:t="span",leading:e,trailing:a,label:l,index:o,selected:c=!1,disabled:g=!1,deletable:B=!1,deleteLabel:te="Remove",onDelete:L,dot:ae,shape:oe,size:re,status:ne,variant:de,children:ie,ref:le,...m})=>{let r=(0,N.useOptionalTagGroupContext)(),u=l??"",R=g||(r?.disabled??!1),h=i.useRef(null),se=(0,Q.useComposedRefs)(le,h),E=r?.register,k=r?.setActiveIndex,w=r?.onTagRemoved;i.useEffect(()=>{if(!(!E||o===void 0))return E(o)},[E,o]);let A=i.useCallback(()=>{if(R||!L||!r||o===void 0)return;let s=(0,N.resolveTagNeighbor)(h.current,o),I=new CustomEvent("delete",{cancelable:!0,detail:null});L(I),!I.defaultPrevented&&(s.target?.focus(),k?.(s.index),w?.({label:u,index:o}),u&&(0,Z.announce)(`${u} removed`))},[R,L,r,k,w,o,u]),me=p.Primitive[t];return(0,d.jsx)(ee,{label:u,deleteLabel:te,disabled:R,selected:c,grouped:r!==void 0,remove:A,children:(0,d.jsx)(me,{...ve(r,o,R,c),...m,...(0,z.appearanceAttrs)({dot:ae,shape:oe,size:re,status:ne,variant:de},m),...(0,j.skdxPart)("badge","root",m.className),ref:se,onFocus:(0,p.composeEventHandlers)(m.onFocus,()=>{o!==void 0&&k?.(o)}),onKeyDown:(0,p.composeEventHandlers)(m.onKeyDown,s=>{!r||!_.includes(s.key)||s.preventDefault()}),onKeyUp:(0,p.useComposedEventHandlers)(m.onKeyUp,s=>{!r||!_.includes(s.key)||(s.preventDefault(),A())}),children:xe({asChild:m.asChild,children:ie,deletable:B,label:u,leading:e,trailing:a})})})};D.displayName="Badge";0&&(module.exports={Badge,BadgeAnatomy,BadgeDelete,BadgeDeleteIcon,BadgeLabel,BadgeLeading,BadgeProvider,BadgeTrailing,useBadgeContext});

package/dist/badge/Badge.d.cts

@@ -1,14 +1,28 @@
 import * as React from 'react';
-import type { BadgeProps } from './types.cjs';
+import type { BadgeContextValue, BadgeProps } from './types.cjs';
+/** @internal Context for the `Badge` subtree: label, disabled state, remove function. */
+export declare const BadgeProvider: React.FC<BadgeContextValue & {
+    children: React.ReactNode;
+}>, useBadgeContext: (consumerName: string) => BadgeContextValue;
 /**
- * Headless badge. Purely a semantic/structural `<span>` wrapper — color,
- * size, and variant are brand-layer concerns. With the default skin,
- * severity comes from `data-status` and form from `data-variant`
- * (`solid`, `dot`).
+ * Headless badge. Purely a semantic/structural wrapper — color, size, and
+ * variant are brand-layer concerns. With the default skin the axes are
+ * independent and all author-set: severity on `data-status`, visual weight on
+ * `data-variant` (`solid`, `outline`, `subtle`), the text-free circle on
+ * `data-dot`, and the corner on `data-shape`.
+ *
+ * Standalone it renders a plain element with no role. Inside a `TagGroup` it
+ * becomes `role="listitem"`, joins the group's single tab stop, and removes
+ * itself on Delete/Backspace through a cancelable `delete` event.
  *
  * @example
  * ```tsx
- * <Badge data-status="success">Active</Badge>
+ * <Badge status="success" leading={<CheckIcon aria-hidden />}>Active</Badge>
+ *
+ * <Badge index={0} label="react" deletable onDelete={() => remove('react')} />
  * ```
  */
-export declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Badge: {
+    ({ as, leading, trailing, label: labelProp, index, selected, disabled: disabledProp, deletable, deleteLabel, onDelete, dot, shape, size, status, variant, children, ref: forwardedRef, ...props }: BadgeProps): React.ReactNode;
+    displayName: string;
+};

package/dist/badge/Badge.d.ts

@@ -1,14 +1,28 @@
 import * as React from 'react';
-import type { BadgeProps } from './types.js';
+import type { BadgeContextValue, BadgeProps } from './types.js';
+/** @internal Context for the `Badge` subtree: label, disabled state, remove function. */
+export declare const BadgeProvider: React.FC<BadgeContextValue & {
+    children: React.ReactNode;
+}>, useBadgeContext: (consumerName: string) => BadgeContextValue;
 /**
- * Headless badge. Purely a semantic/structural `<span>` wrapper — color,
- * size, and variant are brand-layer concerns. With the default skin,
- * severity comes from `data-status` and form from `data-variant`
- * (`solid`, `dot`).
+ * Headless badge. Purely a semantic/structural wrapper — color, size, and
+ * variant are brand-layer concerns. With the default skin the axes are
+ * independent and all author-set: severity on `data-status`, visual weight on
+ * `data-variant` (`solid`, `outline`, `subtle`), the text-free circle on
+ * `data-dot`, and the corner on `data-shape`.
+ *
+ * Standalone it renders a plain element with no role. Inside a `TagGroup` it
+ * becomes `role="listitem"`, joins the group's single tab stop, and removes
+ * itself on Delete/Backspace through a cancelable `delete` event.
  *
  * @example
  * ```tsx
- * <Badge data-status="success">Active</Badge>
+ * <Badge status="success" leading={<CheckIcon aria-hidden />}>Active</Badge>
+ *
+ * <Badge index={0} label="react" deletable onDelete={() => remove('react')} />
  * ```
  */
-export declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Badge: {
+    ({ as, leading, trailing, label: labelProp, index, selected, disabled: disabledProp, deletable, deleteLabel, onDelete, dot, shape, size, status, variant, children, ref: forwardedRef, ...props }: BadgeProps): React.ReactNode;
+    displayName: string;
+};

package/dist/badge/Badge.js

@@ -1 +1,2 @@
-import*as o from"react";import{skdxPart as a}from"../utils/part.js";import{Primitive as t}from"../utils/primitive.js";import{jsx as m}from"react/jsx-runtime";var p=o.forwardRef((e,r)=>m(t.span,{...e,...a("badge","root",e.className),ref:r}));p.displayName="Badge";export{p as Badge};
+'use client';
+import*as n from"react";import{resolveTagNeighbor as ne,useOptionalTagGroupContext as de}from"../tag-group/TagGroup.js";import{appearanceAttrs as ie}from"../utils/appearance.js";import{useComposedRefs as le}from"../utils/composeRefs.js";import{createSafeContext as se}from"../utils/createContext.js";import{announce as me}from"../utils/liveAnnouncer.js";import{skdxPart as fe}from"../utils/part.js";import{composeEventHandlers as D,Primitive as pe,useComposedEventHandlers as ce}from"../utils/primitive.js";import{Glyph as Z}from"../utils/Glyph.js";import{skdxPart as M}from"../utils/part.js";import{composeEventHandlers as O,Primitive as U}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var x=({ref:t,...e})=>{let a=p("BadgeDelete");if(!a.grouped)throw new Error("[skandadx] `BadgeDelete` requires its `Badge` to be inside a `TagGroup` \u2014 a standalone `Badge` has no group to remove it from.");return X(U.button,{type:"button","aria-label":`${a.deleteLabel} ${a.label}`.trim(),disabled:a.disabled,"data-disabled":a.disabled?"":void 0,tabIndex:-1,...e,...M("badge","delete",e.className),ref:t,onClick:O(e.onClick,()=>{a.remove()})})};x.displayName="BadgeDelete";import{skdxPart as q}from"../utils/part.js";import{Primitive as Y}from"../utils/primitive.js";import{jsx as _}from"react/jsx-runtime";var P=({ref:t,...e})=>(p("BadgeLabel"),_(Y.span,{...e,...q("badge","label",e.className),ref:t}));P.displayName="BadgeLabel";import{skdxPart as z}from"../utils/part.js";import{Primitive as Q}from"../utils/primitive.js";import{jsx as W}from"react/jsx-runtime";var c=({ref:t,...e})=>(p("BadgeLeading"),W(Q.span,{...e,...z("badge","leading",e.className),ref:t}));c.displayName="BadgeLeading";import{Fragment as ee,jsx as g,jsxs as te}from"react/jsx-runtime";function j(){return g(Z,{name:"close"})}function T({label:t,leading:e,deletable:a}){return te(ee,{children:[e?g(c,{children:e}):null,g(P,{children:t}),a?g(x,{children:g(j,{})}):null]})}import{skdxPart as ae}from"../utils/part.js";import{Primitive as oe}from"../utils/primitive.js";import{jsx as re}from"react/jsx-runtime";var C=({ref:t,...e})=>re(oe.span,{...e,...ae("badge","trailing",e.className),ref:t});C.displayName="BadgeTrailing";import{Fragment as Re,jsx as u,jsxs as ye}from"react/jsx-runtime";var h=["Delete","Backspace"];function ge(t,e){if(t)return t.tabStopIndex===e?0:-1}function ue(t,e,a,l){return{role:t?"listitem":void 0,"data-skdx-tag":t?"":void 0,"aria-disabled":a&&t?!0:void 0,"data-disabled":a?"":void 0,"data-selected":l?"":void 0,tabIndex:ge(t,e)}}function be({asChild:t,children:e,deletable:a,label:l,leading:o,trailing:s}){if(e===void 0&&(l!==""||a))return u(T,{label:l,leading:o,deletable:a});if(!o&&!s)return e;let m=t&&n.isValidElement(e)?e:null,b=ye(Re,{children:[o?u(c,{children:o}):null,m?m.props.children:e,s?u(C,{children:s}):null]});return m?n.cloneElement(m,void 0,b):b}var[Be,p]=se("Badge"),w=({as:t="span",leading:e,trailing:a,label:l,index:o,selected:s=!1,disabled:m=!1,deletable:b=!1,deleteLabel:A="Remove",onDelete:R,dot:I,shape:S,size:V,status:G,variant:K,children:H,ref:$,...i})=>{let r=de(),f=l??"",B=m||(r?.disabled??!1),N=n.useRef(null),F=le($,N),y=r?.register,v=r?.setActiveIndex,L=r?.onTagRemoved;n.useEffect(()=>{if(!(!y||o===void 0))return y(o)},[y,o]);let E=n.useCallback(()=>{if(B||!R||!r||o===void 0)return;let d=ne(N.current,o),k=new CustomEvent("delete",{cancelable:!0,detail:null});R(k),!k.defaultPrevented&&(d.target?.focus(),v?.(d.index),L?.({label:f,index:o}),f&&me(`${f} removed`))},[B,R,r,v,L,o,f]),J=pe[t];return u(Be,{label:f,deleteLabel:A,disabled:B,selected:s,grouped:r!==void 0,remove:E,children:u(J,{...ue(r,o,B,s),...i,...ie({dot:I,shape:S,size:V,status:G,variant:K},i),...fe("badge","root",i.className),ref:F,onFocus:D(i.onFocus,()=>{o!==void 0&&v?.(o)}),onKeyDown:D(i.onKeyDown,d=>{!r||!h.includes(d.key)||d.preventDefault()}),onKeyUp:ce(i.onKeyUp,d=>{!r||!h.includes(d.key)||(d.preventDefault(),E())}),children:be({asChild:i.asChild,children:H,deletable:b,label:f,leading:e,trailing:a})})})};w.displayName="Badge";export{w as Badge,T as BadgeAnatomy,x as BadgeDelete,j as BadgeDeleteIcon,P as BadgeLabel,c as BadgeLeading,Be as BadgeProvider,C as BadgeTrailing,p as useBadgeContext};

package/dist/badge/BadgeAnatomy.d.cts

@@ -0,0 +1,9 @@
+import type * as React from 'react';
+/** @internal The x glyph a derived {@link BadgeDelete} draws. */
+export declare function BadgeDeleteIcon(): React.JSX.Element;
+/** @internal The anatomy a {@link Badge} draws from `label`, `leading` and `deletable` when given no children. */
+export declare function BadgeAnatomy({ label, leading, deletable, }: {
+    label: string;
+    leading?: React.ReactNode | undefined;
+    deletable?: boolean | undefined;
+}): React.JSX.Element;

package/dist/badge/BadgeAnatomy.d.ts

@@ -0,0 +1,9 @@
+import type * as React from 'react';
+/** @internal The x glyph a derived {@link BadgeDelete} draws. */
+export declare function BadgeDeleteIcon(): React.JSX.Element;
+/** @internal The anatomy a {@link Badge} draws from `label`, `leading` and `deletable` when given no children. */
+export declare function BadgeAnatomy({ label, leading, deletable, }: {
+    label: string;
+    leading?: React.ReactNode | undefined;
+    deletable?: boolean | undefined;
+}): React.JSX.Element;

package/dist/badge/BadgeDelete.d.cts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { BadgeDeleteProps } from './types.cjs';
+/**
+ * Removes its parent {@link Badge} on click; requires a `TagGroup` and throws without one.
+ *
+ * @example
+ * ```tsx
+ * <Badge index={0} label="react" onDelete={() => remove('react')}>
+ *   react
+ *   <BadgeDelete>x</BadgeDelete>
+ * </Badge>
+ * ```
+ */
+export declare const BadgeDelete: {
+    ({ ref: forwardedRef, ...props }: BadgeDeleteProps): React.ReactNode;
+    displayName: string;
+};

package/dist/badge/BadgeDelete.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { BadgeDeleteProps } from './types.js';
+/**
+ * Removes its parent {@link Badge} on click; requires a `TagGroup` and throws without one.
+ *
+ * @example
+ * ```tsx
+ * <Badge index={0} label="react" onDelete={() => remove('react')}>
+ *   react
+ *   <BadgeDelete>x</BadgeDelete>
+ * </Badge>
+ * ```
+ */
+export declare const BadgeDelete: {
+    ({ ref: forwardedRef, ...props }: BadgeDeleteProps): React.ReactNode;
+    displayName: string;
+};

package/dist/badge/BadgeLabel.d.cts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { BadgeLabelProps } from './types.cjs';
+/**
+ * An optional wrapper around a {@link Badge}'s visible text, so a skin can truncate it without truncating the icon or the delete button.
+ *
+ * @example
+ * ```tsx
+ * <Badge index={0} label="react" onDelete={() => remove('react')}>
+ *   <BadgeLabel>react</BadgeLabel>
+ *   <BadgeDelete>x</BadgeDelete>
+ * </Badge>
+ * ```
+ */
+export declare const BadgeLabel: {
+    ({ ref: forwardedRef, ...props }: BadgeLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/badge/BadgeLabel.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { BadgeLabelProps } from './types.js';
+/**
+ * An optional wrapper around a {@link Badge}'s visible text, so a skin can truncate it without truncating the icon or the delete button.
+ *
+ * @example
+ * ```tsx
+ * <Badge index={0} label="react" onDelete={() => remove('react')}>
+ *   <BadgeLabel>react</BadgeLabel>
+ *   <BadgeDelete>x</BadgeDelete>
+ * </Badge>
+ * ```
+ */
+export declare const BadgeLabel: {
+    ({ ref: forwardedRef, ...props }: BadgeLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/badge/BadgeLeading.d.cts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { BadgeLeadingProps } from './types.cjs';
+/**
+ * An optional slot before a {@link Badge}'s text, for an icon or status indicator.
+ *
+ * Enables independent icon sizing. Without it, skins can only use the root's
+ * `gap` for spacing and have no hook to control flex stretching.
+ *
+ * Decorative by default (a badge's meaning is text). Icons with separate
+ * meaning need `aria-label`; icon-only badges must have an accessible name.
+ *
+ * @example
+ * ```tsx
+ * <Badge data-status="success">
+ *   <BadgeLeading><CheckIcon aria-hidden /></BadgeLeading>
+ *   Active
+ * </Badge>
+ * ```
+ */
+export declare const BadgeLeading: {
+    ({ ref: forwardedRef, ...props }: BadgeLeadingProps): React.ReactNode;
+    displayName: string;
+};

package/dist/badge/BadgeLeading.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { BadgeLeadingProps } from './types.js';
+/**
+ * An optional slot before a {@link Badge}'s text, for an icon or status indicator.
+ *
+ * Enables independent icon sizing. Without it, skins can only use the root's
+ * `gap` for spacing and have no hook to control flex stretching.
+ *
+ * Decorative by default (a badge's meaning is text). Icons with separate
+ * meaning need `aria-label`; icon-only badges must have an accessible name.
+ *
+ * @example
+ * ```tsx
+ * <Badge data-status="success">
+ *   <BadgeLeading><CheckIcon aria-hidden /></BadgeLeading>
+ *   Active
+ * </Badge>
+ * ```
+ */
+export declare const BadgeLeading: {
+    ({ ref: forwardedRef, ...props }: BadgeLeadingProps): React.ReactNode;
+    displayName: string;
+};

package/dist/badge/BadgeTrailing.d.cts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { BadgeTrailingProps } from './types.cjs';
+/**
+ * Optional slot after a {@link Badge}'s text, for a count or icon. Mirror of {@link BadgeLeading}; decorative since a badge's meaning is its text.
+ *
+ * @example
+ * ```tsx
+ * <Badge>
+ *   Errors
+ *   <BadgeTrailing>12</BadgeTrailing>
+ * </Badge>
+ * ```
+ */
+export declare const BadgeTrailing: {
+    ({ ref: forwardedRef, ...props }: BadgeTrailingProps): React.ReactNode;
+    displayName: string;
+};

package/dist/badge/BadgeTrailing.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { BadgeTrailingProps } from './types.js';
+/**
+ * Optional slot after a {@link Badge}'s text, for a count or icon. Mirror of {@link BadgeLeading}; decorative since a badge's meaning is its text.
+ *
+ * @example
+ * ```tsx
+ * <Badge>
+ *   Errors
+ *   <BadgeTrailing>12</BadgeTrailing>
+ * </Badge>
+ * ```
+ */
+export declare const BadgeTrailing: {
+    ({ ref: forwardedRef, ...props }: BadgeTrailingProps): React.ReactNode;
+    displayName: string;
+};

package/dist/badge/index.d.cts

@@ -1,2 +1,2 @@
-export * from './Badge.cjs';
-export type { BadgeProps } from './types.cjs';
+export { Badge } from './Badge.cjs';
+export type { BadgeProps, BadgeDeleteEvent } from './types.cjs';

package/dist/badge/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Badge.js';
-export type { BadgeProps } from './types.js';
+export { Badge } from './Badge.js';
+export type { BadgeProps, BadgeDeleteEvent } from './types.js';

package/dist/badge/primitives.d.cts

@@ -0,0 +1,19 @@
+/**
+ * Advanced primitives for `Badge` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { Badge, BadgeDelete, BadgeLabel, BadgeLeading } from '@skdx/react/primitives/badge';
+ *
+ * <Badge data-status="success">
+ *   <BadgeLeading><CheckIcon aria-hidden /></BadgeLeading>
+ *   Active
+ * </Badge>
+ * ```
+ */
+export { Badge } from './Badge.cjs';
+export { BadgeLeading } from './BadgeLeading.cjs';
+export { BadgeTrailing } from './BadgeTrailing.cjs';
+export { BadgeLabel } from './BadgeLabel.cjs';
+export { BadgeDelete } from './BadgeDelete.cjs';
+export type { BadgeProps, BadgeLeadingProps, BadgeTrailingProps, BadgeLabelProps, BadgeDeleteProps, } from './types.cjs';

package/dist/badge/primitives.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Advanced primitives for `Badge` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { Badge, BadgeDelete, BadgeLabel, BadgeLeading } from '@skdx/react/primitives/badge';
+ *
+ * <Badge data-status="success">
+ *   <BadgeLeading><CheckIcon aria-hidden /></BadgeLeading>
+ *   Active
+ * </Badge>
+ * ```
+ */
+export { Badge } from './Badge.js';
+export { BadgeLeading } from './BadgeLeading.js';
+export { BadgeTrailing } from './BadgeTrailing.js';
+export { BadgeLabel } from './BadgeLabel.js';
+export { BadgeDelete } from './BadgeDelete.js';
+export type { BadgeProps, BadgeLeadingProps, BadgeTrailingProps, BadgeLabelProps, BadgeDeleteProps, } from './types.js';