@kennycorrea/ui 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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

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/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.1",
+  "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",