@dinofront/design_system 1.0.0 → 1.1.0

package/dist/FormField-CwRAOtTN.js

@@ -0,0 +1,170 @@
+import { createContext as e, forwardRef as t, useContext as n } from "react";
+import { Loader2 as r } from "lucide-react";
+import { clsx as i } from "clsx";
+import { extendTailwindMerge as a } from "tailwind-merge";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Controller as l, useForm as u } from "react-hook-form";
+import { yupResolver as d } from "@hookform/resolvers/yup";
+//#region src/lib/cn.ts
+var f = a({ extend: { theme: { text: [
+	"h-xl",
+	"h-lg",
+	"h-md",
+	"h-std",
+	"h-sm",
+	"h-xs",
+	"p-lg",
+	"p-md",
+	"p-std",
+	"p-sm",
+	"p-xs",
+	"label-lg",
+	"label-md",
+	"label-std",
+	"label-sm",
+	"label-xs",
+	"label-xxs"
+] } } });
+function p(...e) {
+	return f(i(e));
+}
+//#endregion
+//#region src/components/Button/Button.tsx
+var m = {
+	lg: "h-12 px-5 text-p-md gap-2 rounded-lg",
+	md: "h-10 px-4 text-p-std gap-2 rounded-lg",
+	sm: "h-8 px-3 text-p-sm gap-1.5 rounded-md"
+}, h = {
+	lg: "h-12 w-12 rounded-lg",
+	md: "h-10 w-10 rounded-lg",
+	sm: "h-8 w-8 rounded-md"
+}, g = {
+	primary: [
+		"bg-brand-500 text-white border border-transparent",
+		"hover:bg-brand-600 active:bg-brand-700",
+		"disabled:bg-bg-subtle disabled:text-fg-disabled disabled:cursor-not-allowed",
+		"focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2"
+	].join(" "),
+	secondary: [
+		"bg-bg-default text-fg-default border border-border-default",
+		"hover:bg-bg-container active:bg-bg-subtle",
+		"disabled:bg-bg-container disabled:text-fg-disabled disabled:cursor-not-allowed",
+		"focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2"
+	].join(" "),
+	tertiary: [
+		"bg-transparent text-fg-default border border-transparent",
+		"hover:bg-bg-subtle active:bg-bg-subtle",
+		"disabled:text-fg-disabled disabled:cursor-not-allowed",
+		"focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2"
+	].join(" "),
+	danger: [
+		"bg-red-700 text-white border border-transparent",
+		"hover:bg-red-800 active:bg-red-900",
+		"disabled:bg-bg-subtle disabled:text-fg-disabled disabled:cursor-not-allowed",
+		"focus-visible:ring-2 focus-visible:ring-red-300 focus-visible:ring-offset-2"
+	].join(" ")
+}, _ = {
+	primary: "bg-brand-700",
+	secondary: "bg-bg-subtle",
+	tertiary: "bg-bg-subtle",
+	danger: "bg-red-900"
+}, v = t(function({ variant: e = "primary", size: t = "md", leftIcon: n, rightIcon: i, loading: a = !1, iconOnly: l = !1, fullWidth: u = !1, pressed: d = !1, disabled: f, className: v, children: y, onClick: b, dataTestId: x, ...S }, C) {
+	return /* @__PURE__ */ s("button", {
+		ref: C,
+		disabled: f || a,
+		"aria-pressed": d,
+		"data-test-id": x,
+		onClick: (e) => {
+			if (d || f || a) {
+				e.preventDefault();
+				return;
+			}
+			b?.(e);
+		},
+		className: p("inline-flex items-center justify-center font-medium transition-colors outline-none", l ? h[t] : m[t], g[e], d && _[e], u && "w-full", v),
+		...S,
+		children: a ? /* @__PURE__ */ s(r, {
+			className: "h-4 w-4 animate-spin",
+			"aria-hidden": !0
+		}) : /* @__PURE__ */ c(o, { children: [
+			n && /* @__PURE__ */ s("span", {
+				className: "inline-flex shrink-0",
+				children: n
+			}),
+			y,
+			i && /* @__PURE__ */ s("span", {
+				className: "inline-flex shrink-0",
+				children: i
+			})
+		] })
+	});
+}), y = e(null), b = t(function({ children: e, className: t, validationSchema: n, defaultValues: r, buttons: i, mode: a = "onBlur", shouldUnregister: o, shouldFocusError: l = !0, formId: f, onSubmit: m, dataTestId: h, ...g }, _) {
+	let { handleSubmit: b, register: x, setValue: S, control: C, formState: w, getValues: T, watch: E, reset: D, clearErrors: O, setError: k, trigger: A, getFieldState: j, unregister: M } = u({
+		mode: a,
+		resolver: d(n),
+		defaultValues: r,
+		shouldFocusError: l,
+		shouldUnregister: o
+	}), { errors: N, isDirty: P, isSubmitted: F, isSubmitting: I, dirtyFields: L, isValid: R } = w, z = b((e) => {
+		m?.(e, w);
+	}), B = {
+		control: C,
+		register: x,
+		errors: N,
+		setValue: S,
+		getValues: T,
+		watch: E,
+		reset: D,
+		trigger: A,
+		clearErrors: O,
+		setError: k,
+		getFieldState: j,
+		unregister: M,
+		isDirty: P,
+		isSubmitted: F,
+		isSubmitting: I,
+		isValid: R,
+		dirtyFields: L,
+		submit: z
+	};
+	return /* @__PURE__ */ s("form", {
+		ref: _,
+		id: f,
+		onSubmit: z,
+		"data-test-id": h,
+		className: p("flex flex-col gap-4", t),
+		...g,
+		children: /* @__PURE__ */ c(y.Provider, {
+			value: B,
+			children: [e, i && i.length > 0 && /* @__PURE__ */ s("div", {
+				className: "flex items-center gap-3",
+				"data-test-id": h ? `${h}-buttons` : void 0,
+				children: i.map((e, t) => /* @__PURE__ */ s(v, { ...e }, t))
+			})]
+		})
+	});
+}), x = t(function({ name: e, defaultValue: t, render: r, className: i, dataTestId: a, ...o }, c) {
+	let u = n(y);
+	if (!u) throw Error("FormField must be rendered inside a FormContainer.");
+	return /* @__PURE__ */ s("div", {
+		ref: c,
+		className: p(i),
+		"data-test-id": a,
+		...o,
+		children: /* @__PURE__ */ s(l, {
+			control: u.control,
+			name: e,
+			defaultValue: t,
+			render: ({ field: e, fieldState: t }) => r({
+				...e,
+				error: !!t.error,
+				errorText: t.error?.message,
+				dataTestId: a
+			})
+		})
+	});
+});
+//#endregion
+export { p as i, b as n, v as r, x as t };
+
+//# sourceMappingURL=FormField-CwRAOtTN.js.map

package/dist/FormField-CwRAOtTN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField-CwRAOtTN.js","names":[],"sources":["../src/lib/cn.ts","../src/components/Button/Button.tsx","../src/lib/FormContext.ts","../src/components/FormContainer/FormContainer.tsx","../src/components/FormField/FormField.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * The custom font-size scale declared in `src/styles/tokens.css`'s `@theme`\n * block (`--text-h-xl`, `--text-p-sm`, `--text-label-md`, ...). Mirrored\n * here by hand — same two-parallel-representations discipline as the token\n * pipeline itself — because tailwind-merge ships its own hardcoded default\n * theme and has no way to read this project's actual `@theme` CSS.\n *\n * Without this, tailwind-merge's default config only recognizes Tailwind's\n * built-in font-size keywords (`xs`, `sm`, `lg`, ...) as font sizes; any\n * `text-*` suffix it doesn't recognize as a font size instead falls through\n * to the *color* class group, whose theme scale is deliberately `isAny`\n * (Tailwind v4 allows arbitrary custom theme colors). That misclassifies\n * every `text-p-*`/`text-h-*`/`text-label-*` utility as a text color, so it\n * gets silently dropped as a \"conflict\" whenever it appears alongside an\n * actual `text-{color}` class in the same `cn()` call — which is nearly\n * every real usage, since components pair a typography variant with a\n * semantic text color.\n */\nconst FONT_SIZE_TOKENS = [\n  'h-xl',\n  'h-lg',\n  'h-md',\n  'h-std',\n  'h-sm',\n  'h-xs',\n  'p-lg',\n  'p-md',\n  'p-std',\n  'p-sm',\n  'p-xs',\n  'label-lg',\n  'label-md',\n  'label-std',\n  'label-sm',\n  'label-xs',\n  'label-xxs',\n];\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      text: FONT_SIZE_TOKENS,\n    },\n  },\n});\n\n/**\n * Merges class names, resolving conflicting Tailwind utilities in favor of\n * the last one specified (e.g. `cn('px-2', 'px-4')` -> `'px-4'`). This is\n * what lets consumers pass a `className` prop that overrides a component's\n * defaults instead of just appending to them.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef } from 'react';\nimport { Loader2 } from 'lucide-react';\nimport { cn } from '../../lib/cn';\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './Button.types';\n\nconst sizeStyles: Record<ButtonSize, string> = {\n  lg: 'h-12 px-5 text-p-md gap-2 rounded-lg',\n  md: 'h-10 px-4 text-p-std gap-2 rounded-lg',\n  sm: 'h-8 px-3 text-p-sm gap-1.5 rounded-md',\n};\n\nconst iconOnlySize: Record<ButtonSize, string> = {\n  lg: 'h-12 w-12 rounded-lg',\n  md: 'h-10 w-10 rounded-lg',\n  sm: 'h-8 w-8 rounded-md',\n};\n\nconst variantStyles: Record<ButtonVariant, string> = {\n  primary: [\n    'bg-brand-500 text-white border border-transparent',\n    'hover:bg-brand-600 active:bg-brand-700',\n    'disabled:bg-bg-subtle disabled:text-fg-disabled disabled:cursor-not-allowed',\n    'focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2',\n  ].join(' '),\n  secondary: [\n    'bg-bg-default text-fg-default border border-border-default',\n    'hover:bg-bg-container active:bg-bg-subtle',\n    'disabled:bg-bg-container disabled:text-fg-disabled disabled:cursor-not-allowed',\n    'focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2',\n  ].join(' '),\n  tertiary: [\n    'bg-transparent text-fg-default border border-transparent',\n    'hover:bg-bg-subtle active:bg-bg-subtle',\n    'disabled:text-fg-disabled disabled:cursor-not-allowed',\n    'focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2',\n  ].join(' '),\n  danger: [\n    'bg-red-700 text-white border border-transparent',\n    'hover:bg-red-800 active:bg-red-900',\n    'disabled:bg-bg-subtle disabled:text-fg-disabled disabled:cursor-not-allowed',\n    'focus-visible:ring-2 focus-visible:ring-red-300 focus-visible:ring-offset-2',\n  ].join(' '),\n};\n\n// Same shade each variant already uses for `active:`, applied persistently\n// while `pressed` is true instead of only during the mousedown instant.\nconst pressedStyles: Record<ButtonVariant, string> = {\n  primary: 'bg-brand-700',\n  secondary: 'bg-bg-subtle',\n  tertiary: 'bg-bg-subtle',\n  danger: 'bg-red-900',\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'primary',\n    size = 'md',\n    leftIcon,\n    rightIcon,\n    loading = false,\n    iconOnly = false,\n    fullWidth = false,\n    pressed = false,\n    disabled,\n    className,\n    children,\n    onClick,\n    dataTestId,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      disabled={disabled || loading}\n      aria-pressed={pressed}\n      data-test-id={dataTestId}\n      onClick={(event) => {\n        if (pressed || disabled || loading) {\n          event.preventDefault();\n          return;\n        }\n        onClick?.(event);\n      }}\n      className={cn(\n        'inline-flex items-center justify-center font-medium transition-colors outline-none',\n        iconOnly ? iconOnlySize[size] : sizeStyles[size],\n        variantStyles[variant],\n        pressed && pressedStyles[variant],\n        fullWidth && 'w-full',\n        className,\n      )}\n      {...rest}\n    >\n      {loading ? (\n        <Loader2 className=\"h-4 w-4 animate-spin\" aria-hidden />\n      ) : (\n        <>\n          {leftIcon && <span className=\"inline-flex shrink-0\">{leftIcon}</span>}\n          {children}\n          {rightIcon && <span className=\"inline-flex shrink-0\">{rightIcon}</span>}\n        </>\n      )}\n    </button>\n  );\n});\n","import { createContext } from 'react';\nimport type {\n  Control,\n  FieldErrors,\n  FieldValues,\n  UseFormClearErrors,\n  UseFormGetFieldState,\n  UseFormGetValues,\n  UseFormRegister,\n  UseFormReset,\n  UseFormSetError,\n  UseFormSetValue,\n  UseFormTrigger,\n  UseFormUnregister,\n  UseFormWatch,\n} from 'react-hook-form';\n\nexport interface FormContextValue {\n  control: Control<FieldValues>;\n  register: UseFormRegister<FieldValues>;\n  errors: FieldErrors<FieldValues>;\n  setValue: UseFormSetValue<FieldValues>;\n  getValues: UseFormGetValues<FieldValues>;\n  watch: UseFormWatch<FieldValues>;\n  reset: UseFormReset<FieldValues>;\n  trigger: UseFormTrigger<FieldValues>;\n  clearErrors: UseFormClearErrors<FieldValues>;\n  setError: UseFormSetError<FieldValues>;\n  getFieldState: UseFormGetFieldState<FieldValues>;\n  unregister: UseFormUnregister<FieldValues>;\n  isDirty: boolean;\n  isSubmitted: boolean;\n  isSubmitting: boolean;\n  isValid: boolean;\n  dirtyFields: Partial<Readonly<Record<string, boolean>>>;\n  submit: () => void;\n}\n\nexport const FormContext = createContext<FormContextValue | null>(null);\n","import { forwardRef } from 'react';\nimport { useForm, type FieldValues } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport { cn } from '../../lib/cn';\nimport { FormContext, type FormContextValue } from '../../lib/FormContext';\nimport { Button } from '../Button';\nimport type { FormContainerProps } from './FormContainer.types';\n\nexport const FormContainer = forwardRef<HTMLFormElement, FormContainerProps>(function FormContainer(\n  {\n    children,\n    className,\n    validationSchema,\n    defaultValues,\n    buttons,\n    mode = 'onBlur',\n    shouldUnregister,\n    shouldFocusError = true,\n    formId,\n    onSubmit,\n    dataTestId,\n    ...rest\n  },\n  ref,\n) {\n  const {\n    handleSubmit,\n    register,\n    setValue,\n    control,\n    formState,\n    getValues,\n    watch,\n    reset,\n    clearErrors,\n    setError,\n    trigger,\n    getFieldState,\n    unregister,\n  } = useForm<FieldValues>({\n    mode,\n    resolver: yupResolver(validationSchema),\n    defaultValues,\n    shouldFocusError,\n    shouldUnregister,\n  });\n\n  const { errors, isDirty, isSubmitted, isSubmitting, dirtyFields, isValid } = formState;\n\n  const submit = handleSubmit((data) => {\n    onSubmit?.(data, formState);\n  });\n\n  const contextValue: FormContextValue = {\n    control,\n    register,\n    errors,\n    setValue,\n    getValues,\n    watch,\n    reset,\n    trigger,\n    clearErrors,\n    setError,\n    getFieldState,\n    unregister,\n    isDirty,\n    isSubmitted,\n    isSubmitting,\n    isValid,\n    dirtyFields,\n    submit,\n  };\n\n  return (\n    <form\n      ref={ref}\n      id={formId}\n      onSubmit={submit}\n      data-test-id={dataTestId}\n      className={cn('flex flex-col gap-4', className)}\n      {...rest}\n    >\n      <FormContext.Provider value={contextValue}>\n        {children}\n        {buttons && buttons.length > 0 && (\n          <div className=\"flex items-center gap-3\" data-test-id={dataTestId ? `${dataTestId}-buttons` : undefined}>\n            {buttons.map((buttonProps, index) => (\n              <Button key={index} {...buttonProps} />\n            ))}\n          </div>\n        )}\n      </FormContext.Provider>\n    </form>\n  );\n});\n","import { forwardRef, useContext } from 'react';\nimport { Controller } from 'react-hook-form';\nimport { cn } from '../../lib/cn';\nimport { FormContext } from '../../lib/FormContext';\nimport type { FormFieldProps } from './FormField.types';\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  { name, defaultValue, render, className, dataTestId, ...rest },\n  ref,\n) {\n  const context = useContext(FormContext);\n\n  if (!context) {\n    throw new Error('FormField must be rendered inside a FormContainer.');\n  }\n\n  return (\n    <div ref={ref} className={cn(className)} data-test-id={dataTestId} {...rest}>\n      <Controller\n        control={context.control}\n        name={name}\n        defaultValue={defaultValue}\n        render={({ field, fieldState }) =>\n          render({\n            ...field,\n            error: !!fieldState.error,\n            errorText: fieldState.error?.message,\n            dataTestId,\n          })\n        }\n      />\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/Accordion/Accordion.types.d.ts

@@ -9,6 +9,10 @@ export interface AccordionProps extends HTMLAttributes<HTMLDivElement>, BaseProp
     /** Controlled open value(s). Pass alongside `onValueChange` to fully control which item(s) are open. */
     value?: string | string[];
     onValueChange?: (value: string | string[]) => void;
+    /** Animates each panel open/closed. Set `false` for the pre-1.x instant toggle (also restores the plain `hidden` attribute instead of the animated grid wrapper). */
+    animated?: boolean;
+    /** Renders a Divider between each item's header and its panel content. */
+    showDivider?: boolean;
     children: ReactNode;
 }
 export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, BaseProps {

package/dist/components/Badge/Badge.types.d.ts

@@ -3,12 +3,23 @@ import { BaseProps } from '../../types';
 export type BadgeVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'privacy';
 export type BadgeStyle = 'filled' | 'outline' | 'accent';
 export type BadgeSize = 'lg' | 'md' | 'sm' | 'xs';
+export type BadgeShape = 'rounded' | 'pill';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, BaseProps {
     variant?: BadgeVariant;
     appearance?: BadgeStyle;
     size?: BadgeSize;
+    /** `'pill'` is fully rounded; `'rounded'` (default) uses the size's own corner radius. */
+    shape?: BadgeShape;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     /** Renders a trailing dismiss button (replacing `rightIcon`) that calls this on click. */
     onDismiss?: () => void;
+    /** Renders as a standalone status dot instead of a labeled badge. Ignores `children`, icons, and `onDismiss`. */
+    dot?: boolean;
+    /** Renders a leading status dot before `children`, in place of `leftIcon`. */
+    withDot?: boolean;
+    /** Dims the badge and blocks pointer/keyboard interaction, including `onDismiss`. */
+    disabled?: boolean;
+    /** Adds hover/active states, a focus ring, `role="button"`, and Enter/Space activation for `onClick`. */
+    interactive?: boolean;
 }

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,2 @@
+import { BreadcrumbProps } from './Breadcrumb.types';
+export declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type BreadcrumbSize = 'md' | 'sm';
+export interface BreadcrumbItem {
+    value: string | number;
+    label: ReactNode;
+    /** Renders the crumb as an `<a>` instead of a `<button>`. */
+    href?: string;
+    disabled?: boolean;
+}
+export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'>, BaseProps {
+    items: BreadcrumbItem[];
+    /** Value of the current-page crumb, rendered as plain text with `aria-current="page"`. Defaults to the last item. */
+    currentValue?: string | number;
+    onSelect?: (value: string | number) => void;
+    /** Rendered between crumbs, hidden from assistive tech. Default `'/'`. */
+    separator?: ReactNode;
+    size?: BreadcrumbSize;
+}

package/dist/components/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbItem, BreadcrumbProps, BreadcrumbSize } from './Breadcrumb.types';

package/dist/components/CardGroup/CardGroup.d.ts

@@ -0,0 +1,2 @@
+import { CardGroupProps } from './CardGroup.types';
+export declare const CardGroup: import('react').ForwardRefExoticComponent<CardGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/CardGroup/CardGroup.types.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type CardGroupTitleColor = 'brand' | 'blue' | 'purple' | 'pink' | 'yellow' | 'gray';
+export type CardGroupTitlePlacement = 'top' | 'left' | 'right';
+export interface CardGroupTitle {
+    text: ReactNode;
+    /** Default `'gray'`. */
+    color?: CardGroupTitleColor;
+    /** Default `'left'`. `'left'`/`'right'` render a vertical rail along that edge; `'top'` renders a horizontal bar. */
+    placement?: CardGroupTitlePlacement;
+}
+export interface CardGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, BaseProps {
+    title?: CardGroupTitle;
+    /** Extra content beside the title, rendered as the first divided section. */
+    header?: ReactNode;
+    children?: ReactNode;
+    /** Disables the automatic divider between the header and each child. */
+    noDivider?: boolean;
+}

package/dist/components/CardGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { CardGroup } from './CardGroup';
+export type { CardGroupProps, CardGroupTitle, CardGroupTitleColor, CardGroupTitlePlacement, } from './CardGroup.types';

package/dist/components/Copy/Copy.d.ts

@@ -0,0 +1,2 @@
+import { CopyProps } from './Copy.types';
+export declare const Copy: import('react').ForwardRefExoticComponent<CopyProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Copy/Copy.types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../../types';
+import { ButtonProps } from '../Button';
+export interface CopyProps extends Omit<ButtonProps, 'children' | 'onClick' | 'leftIcon' | 'rightIcon' | 'onCopy'>, BaseProps {
+    /** Text copied to the clipboard on click. */
+    text: string;
+    /** Feedback shown in the popover after copying. Default `'Copied'`. */
+    copiedLabel?: string;
+    /** Accessible name for the button (it has no visible text). Default `'Copy to clipboard'`. */
+    label?: string;
+    /** Milliseconds before the feedback clears. Default `1500`. */
+    timeout?: number;
+    /** Overrides the default copy icon. */
+    icon?: ReactNode;
+    onCopy?: (text: string) => void;
+    onError?: (error: unknown) => void;
+}

package/dist/components/Copy/index.d.ts

@@ -0,0 +1,2 @@
+export { Copy } from './Copy';
+export type { CopyProps } from './Copy.types';

package/dist/components/Counter/Counter.d.ts

@@ -0,0 +1,2 @@
+import { CounterProps } from './Counter.types';
+export declare const Counter: import('react').ForwardRefExoticComponent<CounterProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Counter/Counter.types.d.ts

@@ -0,0 +1,20 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+import { InputSize } from '../Input';
+export interface CounterProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'>, BaseProps {
+    /** Controlled value. */
+    value?: number;
+    /** Uncontrolled initial value. Default `0`. */
+    defaultValue?: number;
+    /** Fires on every committed change — button press, or blur after typing. Not native `onChange`, since a button press isn't a `ChangeEvent`. */
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: InputSize;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    errorText?: ReactNode;
+    error?: boolean;
+    wrapperClassName?: string;
+}

package/dist/components/Counter/index.d.ts

@@ -0,0 +1,2 @@
+export { Counter } from './Counter';
+export type { CounterProps } from './Counter.types';

package/dist/components/DistributionBar/DistributionBar.d.ts

@@ -0,0 +1,2 @@
+import { DistributionBarProps } from './DistributionBar.types';
+export declare const DistributionBar: import('react').ForwardRefExoticComponent<DistributionBarProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/DistributionBar/DistributionBar.types.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type DistributionColor = 'brand' | 'blue' | 'purple' | 'pink' | 'yellow' | 'red' | 'gray';
+export type DistributionBarSize = 'sm' | 'lg';
+export interface DistributionSegment {
+    label: ReactNode;
+    value: number;
+    color: DistributionColor;
+    /** Suffix appended after the formatted value in the legend, e.g. `'AMD'`. */
+    unit?: string;
+    /** Still counted in the bar's proportions, just omitted from the legend list. */
+    hideFromLegend?: boolean;
+}
+export interface DistributionBarProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    segments: DistributionSegment[];
+    hideLegend?: boolean;
+    /** Default: `Intl.NumberFormat().format`. */
+    formatValue?: (value: number) => string;
+    size?: DistributionBarSize;
+}

package/dist/components/DistributionBar/index.d.ts

@@ -0,0 +1,2 @@
+export { DistributionBar } from './DistributionBar';
+export type { DistributionBarProps, DistributionBarSize, DistributionColor, DistributionSegment, } from './DistributionBar.types';

package/dist/components/Drawer/Drawer.types.d.ts

@@ -19,5 +19,9 @@ export interface DrawerProps extends BaseProps {
     closeOnOverlayClick?: boolean;
     /** Whether the built-in close (X) button is rendered. */
     showClose?: boolean;
+    /** Slides/fades the drawer in and out. Set `false` for the pre-1.x instant mount/unmount. */
+    animated?: boolean;
+    /** Extra controls in the header, left of the close button — e.g. a pin or back button. */
+    headerActions?: ReactNode;
     className?: string;
 }

package/dist/components/DropdownMenu/DropdownMenu.types.d.ts

@@ -1,6 +1,9 @@
-import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
 import { BaseProps } from '../../types';
-export type DropdownContentAlign = 'start' | 'end';
+import { AnchoredAlign, AnchoredSide } from '../../lib/useAnchoredPosition';
+export type DropdownContentAlign = AnchoredAlign;
+export type DropdownContentSide = AnchoredSide;
+export type DropdownContentStrategy = 'fixed' | 'absolute';
 export interface DropdownMenuProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
     children: ReactNode;
     /** Uncontrolled initial open state. */
@@ -8,6 +11,8 @@ export interface DropdownMenuProps extends HTMLAttributes<HTMLDivElement>, BaseP
     /** Controlled open state. Pass alongside `onOpenChange` to fully control the menu. */
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /** Anchor the panel to an element the consumer owns instead of `<DropdownTrigger>`'s child. */
+    anchorRef?: RefObject<HTMLElement | null>;
 }
 export interface DropdownTriggerProps {
     /** A single element cloned with the click handler and `aria-haspopup`/`aria-expanded` that open the menu. */
@@ -17,6 +22,19 @@ export interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, Ba
     children: ReactNode;
     /** Horizontal alignment of the panel relative to the trigger. */
     align?: DropdownContentAlign;
+    /** `'fixed'` portals the panel to `document.body` so it can never be clipped by an
+     *  `overflow: hidden` ancestor. `'absolute'` is the pre-1.x behaviour, kept as an escape
+     *  hatch for consumers who positioned the panel themselves via `className`. */
+    strategy?: DropdownContentStrategy;
+    /** Preferred vertical side. Auto-flips when there isn't room, unless `flip` is false. Only applies when `strategy="fixed"`. */
+    side?: DropdownContentSide;
+    sideOffset?: number;
+    flip?: boolean;
+    shift?: boolean;
+    /** Sets the panel's min-width to the trigger's/anchor's width. */
+    matchTriggerWidth?: boolean;
+    /** Closes the menu when any ancestor scrolls. */
+    closeOnScroll?: boolean;
 }
 export interface DropdownItemProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
     children: ReactNode;
@@ -29,6 +47,8 @@ export interface DropdownItemProps extends ButtonHTMLAttributes<HTMLButtonElemen
     destructive?: boolean;
     /** Renders a leading check mark when `true`; reserves the space (unchecked) when `false`. Omit entirely for items with no check state. */
     checked?: boolean;
+    /** Secondary line rendered under the label. */
+    meta?: ReactNode;
 }
 export interface DropdownSeparatorProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
 }

package/dist/components/Empty/Empty.d.ts

@@ -0,0 +1,2 @@
+import { EmptyProps } from './Empty.types';
+export declare const Empty: import('react').ForwardRefExoticComponent<EmptyProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Empty/Empty.types.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type EmptySize = 'lg' | 'sm';
+export interface EmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, BaseProps {
+    size?: EmptySize;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Defaults to a `SearchX` icon in an `IconTile` circle — pass your own illustration node to override. */
+    illustration?: ReactNode;
+    /** Slot for a call-to-action, e.g. a `<Button>`. */
+    action?: ReactNode;
+}

package/dist/components/Empty/index.d.ts

@@ -0,0 +1,2 @@
+export { Empty } from './Empty';
+export type { EmptyProps, EmptySize } from './Empty.types';

package/dist/components/FormContainer/FormContainer.d.ts

@@ -0,0 +1,2 @@
+import { FormContainerProps } from './FormContainer.types';
+export declare const FormContainer: import('react').ForwardRefExoticComponent<FormContainerProps & import('react').RefAttributes<HTMLFormElement>>;

package/dist/components/FormContainer/FormContainer.types.d.ts

@@ -0,0 +1,18 @@
+import { FormHTMLAttributes, ReactNode } from 'react';
+import { FieldValues, FormState, Mode } from 'react-hook-form';
+import { ObjectSchema } from 'yup';
+import { BaseProps } from '../../types';
+import { ButtonProps } from '../Button';
+export interface FormContainerProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'>, BaseProps {
+    children?: ReactNode;
+    /** A yup object schema — resolved via `@hookform/resolvers/yup`. */
+    validationSchema: ObjectSchema<FieldValues>;
+    defaultValues: FieldValues;
+    /** Rendered as a row of `Button`s below `children` — omit and render your own footer instead. */
+    buttons?: ButtonProps[];
+    mode?: Mode;
+    shouldUnregister?: boolean;
+    shouldFocusError?: boolean;
+    formId?: string;
+    onSubmit?: (data: FieldValues, formState: FormState<FieldValues>) => void;
+}

package/dist/components/FormContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { FormContainer } from './FormContainer';
+export type { FormContainerProps } from './FormContainer.types';

package/dist/components/FormField/FormField.d.ts

@@ -0,0 +1,2 @@
+import { FormFieldProps } from './FormField.types';
+export declare const FormField: import('react').ForwardRefExoticComponent<FormFieldProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/FormField/FormField.types.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactElement } from 'react';
+import { RefCallBack } from 'react-hook-form';
+import { BaseProps } from '../../types';
+/** Deliberately untyped `value`/`onChange`: this render prop feeds whichever
+ *  input the consumer wires up (native `value`, Select's `string`, Checkbox's
+ *  `boolean`, ...). */
+export interface FormFieldRenderProps {
+    name: string;
+    value: any;
+    onChange: (...event: any[]) => void;
+    onBlur: () => void;
+    ref: RefCallBack;
+    error: boolean;
+    errorText?: string;
+    dataTestId?: string;
+}
+export interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'>, BaseProps {
+    name: string;
+    defaultValue?: unknown;
+    /** Render prop — receives field bindings plus `error`/`errorText`, e.g. `(p) => <Input {...p} label="Email" />`. */
+    render: (props: FormFieldRenderProps) => ReactElement;
+}

package/dist/components/FormField/index.d.ts

@@ -0,0 +1,2 @@
+export { FormField } from './FormField';
+export type { FormFieldProps, FormFieldRenderProps } from './FormField.types';

package/dist/components/Input/Input.types.d.ts

@@ -3,6 +3,8 @@ import { BaseProps } from '../../types';
 export type InputSize = 'lg' | 'md' | 'sm';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseProps {
     label?: ReactNode;
+    /** Content rendered on the label row, right of the label text and required marker — e.g. an info tooltip trigger. Rendered as a sibling of the `<label>`, not a child, so an interactive addon never steals focus into the field. */
+    labelAddons?: ReactNode;
     helperText?: ReactNode;
     errorText?: ReactNode;
     size?: InputSize;

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,2 @@
+import { LinkProps } from './Link.types';
+export declare const Link: import('react').ForwardRefExoticComponent<LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/dist/components/Link/Link.types.d.ts

@@ -0,0 +1,15 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+import { TextColor, TextVariant, TextWeight } from '../Text';
+export type LinkUnderline = 'hover' | 'always' | 'none';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, BaseProps {
+    /** Typography variant, same scale as `Text`. Default `'p-std'`. */
+    variant?: TextVariant;
+    weight?: TextWeight;
+    /** Semantic text color, same scale as `Text`. Default `'brand'`. */
+    color?: TextColor;
+    underline?: LinkUnderline;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    truncate?: boolean;
+}

package/dist/components/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './Link';
+export type { LinkProps, LinkUnderline } from './Link.types';

package/dist/components/MultiSelect/MultiSelect.types.d.ts

@@ -18,6 +18,10 @@ export interface MultiSelectProps extends BaseProps {
     /** Selected option values (controlled). */
     value: string[];
     onChange: (values: string[]) => void;
+    /** Called with the option that was just added, alongside `onChange` (never instead of it). */
+    onAdd?: (option: MultiSelectOption) => void;
+    /** Called with the value that was just removed, alongside `onChange` (never instead of it). */
+    onRemove?: (value: string) => void;
     size?: MultiSelectSize;
     placeholder?: string;
     /** Placeholder once at least one chip exists. Defaults to "Add another…". */
@@ -25,6 +29,8 @@ export interface MultiSelectProps extends BaseProps {
     disabled?: boolean;
     error?: boolean;
     label?: ReactNode;
+    /** Content rendered on the label row, right of the label text and required marker — e.g. an info tooltip trigger. Rendered as a sibling of the `<label>`, not a child, so an interactive addon never steals focus into the field. */
+    labelAddons?: ReactNode;
     helperText?: ReactNode;
     errorText?: ReactNode;
     required?: boolean;
@@ -32,6 +38,8 @@ export interface MultiSelectProps extends BaseProps {
     lockedValues?: string[];
     /** Cap on how many can be selected (default: unlimited). */
     max?: number;
+    /** Renders an Avatar on every chip and dropdown row, falling back to initials derived from the option's `label` when it has no `avatarSrc`. Default `false` — avatars still render for options that already set `avatarSrc` regardless. */
+    showAvatars?: boolean;
     /** Set false for a click-to-open picker with no text filter. */
     searchable?: boolean;
     /** Dropdown header shown when the query is empty. */

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,2 @@
+import { PopoverProps } from './Popover.types';
+export declare function Popover({ content, children, side, align, offset, open, defaultOpen, onOpenChange, flip, showArrow, closeOnScroll, autoFocus, container, className, dataTestId, }: PopoverProps): import("react").JSX.Element;

package/dist/components/Popover/Popover.types.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+import { FloatingAlign, FloatingSide } from '../../lib/useFloatingPosition';
+export type PopoverSide = FloatingSide;
+export type PopoverAlign = FloatingAlign;
+export interface PopoverProps extends BaseProps {
+    /** Bubble content. May contain interactive elements — unlike `Tooltip`, the bubble is not `pointer-events-none`. */
+    content: ReactNode;
+    /** Single trigger element; `Popover` attaches an `onClick` (composed with any the child already has) plus `aria-expanded`/`aria-haspopup`. */
+    children: ReactElement;
+    side?: PopoverSide;
+    align?: PopoverAlign;
+    /** Gap between the trigger and the bubble, in px. Default `8`. */
+    offset?: number;
+    /** Controlled open state. Pass alongside `onOpenChange` to fully control the popover. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Flips to the opposite side on the same axis when there isn't room. Default `true`. */
+    flip?: boolean;
+    showArrow?: boolean;
+    /** Closes the popover when any ancestor scrolls. Default `true`. */
+    closeOnScroll?: boolean;
+    /** Moves focus into the bubble on open, restoring it to the trigger on close. Default `false` — there is no focus trap in v1, so use sparingly for content that's genuinely keyboard-operable. */
+    autoFocus?: boolean;
+    className?: string;
+    /** Portal target. Defaults to `document.body`. */
+    container?: HTMLElement | null;
+}

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover } from './Popover';
+export type { PopoverAlign, PopoverProps, PopoverSide } from './Popover.types';

package/dist/components/ReadMore/ReadMore.d.ts

@@ -0,0 +1,2 @@
+import { ReadMoreProps } from './ReadMore.types';
+export declare const ReadMore: import('react').ForwardRefExoticComponent<ReadMoreProps & import('react').RefAttributes<HTMLDivElement>>;