@kennycorrea/ui 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.7.0 — 2026-10-09
+
+### Added
+- **`Alert`**: an inline message with `type` (`info` default, `warning`, `success`, `error`,
+  `brand`), `head`, `body`, and optional `actionButton` / `secondaryActionButton`
+  (`{ label, onPress }`). Same colours and icons as `Toast`; `brand` uses the info icon in the
+  theme's own accent. Errors and warnings are `role="alert"`, the rest `role="status"`.
+- **`Skeleton`** (Themes' skeleton) and **`SkeletonText`** (a `lines`-long paragraph placeholder).
+
+## 0.6.1 — 2026-10-08
+
+### Fixed
+- **`Slider` thumbs always have an accessible name.** Without `fillFrom`, `label` landed on the
+  Themes root, which has no role, and the `role="slider"` thumb had none (axe:
+  aria-input-field-name). The thumb is now named `label`; a range's thumbs are
+  `"<label>, minimum"` / `"<label>, maximum"` (`"<label>, n of m"` beyond two) instead of
+  Radix's bare "Minimum"/"Maximum". Consumers using `fillFrom={min}` only to get a name can
+  drop it.
+
 ## 0.6.0 — 2026-10-07
 
 ### Added

package/dist/atoms/Alert/Alert.d.ts

@@ -0,0 +1,19 @@
+export type AlertType = 'info' | 'warning' | 'success' | 'error' | 'brand';
+export interface AlertAction {
+    label: string;
+    onPress?: () => void;
+}
+export interface AlertProps {
+    type?: AlertType;
+    head?: string;
+    body?: string;
+    actionButton?: AlertAction;
+    secondaryActionButton?: AlertAction;
+    className?: string;
+}
+/**
+ * An inline message that stays on the page, unlike a toast. Errors and warnings are
+ * `role="alert"` so they are announced when they appear; the rest are `status`, which waits
+ * its turn rather than interrupting.
+ */
+export declare function Alert({ type, head, body, actionButton, secondaryActionButton, className, }: AlertProps): import("react").JSX.Element;

package/dist/atoms/Alert/Alert.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+/**
+ * The same colour and icon vocabulary as `Toast`. `brand` borrows info's glyph but sets no
+ * `data-accent-color`, so `--accent-*` is whatever the theme — and the accent picker — say.
+ */
+const TYPES = {
+    info: { color: 'blue', icon: 'info' },
+    warning: { color: 'amber', icon: 'warning' },
+    success: { color: 'jade', icon: 'check-circle' },
+    error: { color: 'red', icon: 'error' },
+    brand: { icon: 'info' },
+};
+/**
+ * An inline message that stays on the page, unlike a toast. Errors and warnings are
+ * `role="alert"` so they are announced when they appear; the rest are `status`, which waits
+ * its turn rather than interrupting.
+ */
+export function Alert({ type = 'info', head, body, actionButton, secondaryActionButton, className, }) {
+    const { color, icon } = TYPES[type];
+    const urgent = type === 'error' || type === 'warning';
+    return (_jsxs("div", { role: urgent ? 'alert' : 'status', "data-accent-color": color, "data-alert-type": type, className: cn('flex gap-3 rounded-[var(--radius-3)] border border-[var(--accent-6)] bg-[var(--accent-3)] p-4 text-[var(--gray-12)]', className), children: [_jsx(Icon, { name: icon, className: "mt-0.5 text-[var(--accent-11)]" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [head && _jsx("p", { className: "font-medium", children: head }), body && _jsx("p", { className: "text-sm text-[var(--gray-11)]", children: body }), (actionButton || secondaryActionButton) && (_jsxs("div", { className: "mt-2 flex flex-wrap gap-2", children: [actionButton && (_jsx(Button, { size: "sm", variant: "primary", onClick: actionButton.onPress, children: actionButton.label })), secondaryActionButton && (_jsx(Button, { size: "sm", variant: "ghost", onClick: secondaryActionButton.onPress, children: secondaryActionButton.label }))] }))] })] }));
+}

package/dist/atoms/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from './Alert.js';

package/dist/atoms/Alert/index.js

@@ -0,0 +1 @@
+export * from './Alert.js';

package/dist/atoms/Skeleton/Skeleton.d.ts

@@ -0,0 +1,19 @@
+import { Skeleton as ThemedSkeleton } from '@radix-ui/themes';
+import type { ComponentPropsWithoutRef } from 'react';
+export interface SkeletonProps extends ComponentPropsWithoutRef<typeof ThemedSkeleton> {
+}
+/**
+ * Themes' skeleton, re-exported under the house name.
+ *
+ * Two ways to use it, both Themes': wrap real content with `loading` and it takes that
+ * content's shape, or give it a `width`/`height` and it stands alone. Wrapping is the better
+ * one — the placeholder is then exactly the size of what replaces it, so nothing jumps.
+ */
+export declare function Skeleton({ className, ...props }: SkeletonProps): import("react").JSX.Element;
+export interface SkeletonTextProps {
+    /** How many lines to draw. The last one is shorter, as a paragraph's is. */
+    lines?: number;
+    className?: string;
+}
+/** A paragraph-shaped placeholder, for where the text's length is not known yet. */
+export declare function SkeletonText({ lines, className }: SkeletonTextProps): import("react").JSX.Element;

package/dist/atoms/Skeleton/Skeleton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton as ThemedSkeleton } from '@radix-ui/themes';
+import { cn } from '../../utils/cn.js';
+/**
+ * Themes' skeleton, re-exported under the house name.
+ *
+ * Two ways to use it, both Themes': wrap real content with `loading` and it takes that
+ * content's shape, or give it a `width`/`height` and it stands alone. Wrapping is the better
+ * one — the placeholder is then exactly the size of what replaces it, so nothing jumps.
+ */
+export function Skeleton({ className, ...props }) {
+    return _jsx(ThemedSkeleton, { className: cn(className), ...props });
+}
+/** A paragraph-shaped placeholder, for where the text's length is not known yet. */
+export function SkeletonText({ lines = 3, className }) {
+    return (_jsx("div", { className: cn('flex flex-col gap-2', className), "aria-hidden": true, children: Array.from({ length: lines }, (_, i) => i).map((i) => (_jsx(ThemedSkeleton, { height: "0.875rem", width: i === lines - 1 && lines > 1 ? '60%' : '100%' }, i))) }));
+}

package/dist/atoms/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './Skeleton.js';

package/dist/atoms/Skeleton/index.js

@@ -0,0 +1 @@
+export * from './Skeleton.js';

package/dist/atoms/Slider/Slider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { Slider as ThemedSlider } from '@radix-ui/themes';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useRef, useState, } from 'react';
 import { cn } from '../../utils/cn.js';
 import { fillEdges, fillStyle, percentOf, thumbCentre } from './geometry.js';
 const MARGIN_KEYS = ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml'];
@@ -30,14 +30,54 @@ export const Slider = forwardRef(function Slider(props, ref) {
         setInner(next);
         onValueChange?.(next);
     };
+    // Themes spreads every prop onto the Root, which has no role, and gives its Thumbs no way in —
+    // so the role="slider" elements are named here, after Radix has rendered them.
+    const themedRoot = useRef(null);
+    const setThemedRoot = useCallback((node) => {
+        themedRoot.current = node;
+        assignRef(ref, node);
+    }, [ref]);
+    // Radix labels a range's thumbs "Minimum"/"Maximum" in a later render of its own, so a
+    // one-off write is overwritten; the observer puts ours back whenever anything touches them.
+    useLayoutEffect(() => {
+        const root = themedRoot.current;
+        if (!root)
+            return;
+        const name = () => {
+            const thumbs = root.querySelectorAll('[role="slider"]');
+            thumbs.forEach((thumb, i) => {
+                const wanted = thumbLabel(label, i, thumbs.length);
+                if (thumb.getAttribute('aria-label') !== wanted)
+                    thumb.setAttribute('aria-label', wanted);
+            });
+        };
+        name();
+        const observer = new MutationObserver(name);
+        observer.observe(root, { subtree: true, childList: true, attributeFilter: ['aria-label'] });
+        return () => observer.disconnect();
+    }, [label]);
     const unsupported = fillFrom === undefined ? null : fillFromUnsupported(props, values.length);
     if (unsupported && isDev)
         console.warn(`Slider: fillFrom is ignored — ${unsupported}.`);
-    const slider = fillFrom !== undefined && !unsupported ? (_jsx(FillFromSlider, { ref: ref, ...rest, label: label, className: className, values: values, fillFrom: fillFrom, min: min, max: max, onValueChange: handleChange })) : (_jsx(ThemedSlider, { ref: ref, size: "2", "aria-label": label, className: cn(className), ...rest, onValueChange: handleChange }));
+    const slider = fillFrom !== undefined && !unsupported ? (_jsx(FillFromSlider, { ref: ref, ...rest, label: label, className: className, values: values, fillFrom: fillFrom, min: min, max: max, onValueChange: handleChange })) : (_jsx(ThemedSlider, { ref: setThemedRoot, size: "2", "aria-label": label, className: cn(className), ...rest, onValueChange: handleChange }));
     if (!marks?.length)
         return slider;
     return (_jsxs("div", { className: "ui-slider-field", children: [_jsx(SliderMarks, { marks: marks, min: min, max: max }), slider] }));
 });
+/** One thumb takes the label; a range says which end each thumb is. */
+function thumbLabel(label, index, count) {
+    if (count === 1)
+        return label;
+    if (count === 2)
+        return `${label}, ${index === 0 ? 'minimum' : 'maximum'}`;
+    return `${label}, ${index + 1} of ${count}`;
+}
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
 /**
  * Radix Themes draws its range itself and offers no way to place it, so this path is built on the
  * primitives and styled in `tokens.css` (`.ui-slider*`) from Themes' public tokens — never by

package/dist/atoms/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Alert/index.js';
 export * from './Avatar/index.js';
 export * from './Badge/index.js';
 export * from './Button/index.js';
@@ -13,6 +14,7 @@ export * from './Progress/index.js';
 export * from './RichText/index.js';
 export * from './Select/index.js';
 export * from './Separator/index.js';
+export * from './Skeleton/index.js';
 export * from './Slider/index.js';
 export * from './Spinner/index.js';
 export * from './Switch/index.js';

package/dist/atoms/index.js

@@ -1,3 +1,4 @@
+export * from './Alert/index.js';
 export * from './Avatar/index.js';
 export * from './Badge/index.js';
 export * from './Button/index.js';
@@ -13,6 +14,7 @@ export * from './Progress/index.js';
 export * from './RichText/index.js';
 export * from './Select/index.js';
 export * from './Separator/index.js';
+export * from './Skeleton/index.js';
 export * from './Slider/index.js';
 export * from './Spinner/index.js';
 export * from './Switch/index.js';

package/dist/utils/theme.d.ts

@@ -97,5 +97,5 @@ export interface Theming<A extends readonly string[]> {
 export declare function createTheming<const A extends readonly [string, ...string[]]>(config: ThemingConfig<A>): Theming<A>;
 export declare const readTheme: () => Theme;
 export declare const storeTheme: (theme: Theme) => void;
-export declare const readAccent: () => "jade" | "red" | "yellow" | "orange" | "purple" | "blue";
-export declare const storeAccent: (accent: "jade" | "red" | "yellow" | "orange" | "purple" | "blue") => void;
+export declare const readAccent: () => "red" | "yellow" | "orange" | "purple" | "blue" | "jade";
+export declare const storeAccent: (accent: "red" | "yellow" | "orange" | "purple" | "blue" | "jade") => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
   "private": false,
   "type": "module",