@medalsocial/meda 1.6.0 → 1.7.0

package/README.md

@@ -109,6 +109,24 @@ Workspace shells also expose chrome-level composition slots:
 
 `workspace.menuItems`, `workspace.menuFooter`, and the theme toggle are available from the mobile Menu drawer. Use `mainLayout`/`mainClassName` when a workspace shell needs the same mobile chrome but a custom main scroll region, such as a full-bleed marketing page. `useCommands()` works from workspace descendants without manually mounting `CommandPalette`; lower-level primitive compositions can still mount `CommandPalette` directly.
 
+## Foundation primitives
+
+Meda includes small foundation primitives for repeated loading, empty, and filtering surfaces:
+
+```tsx
+import { EmptyState, FilterRail, Skeleton } from '@medalsocial/meda';
+```
+
+`Skeleton` mirrors shadcn's simple loading placeholder shape. `EmptyState` standardizes zero/error states across panels and content areas. `FilterRail` provides a dense filter surface while leaving selected values, URL syncing, and query logic in the consuming app.
+
+The same primitives are available from the shadcn-compatible registry when an app wants local source ownership:
+
+```bash
+npx shadcn add https://meda.medalsocial.com/r/meda-skeleton.json
+npx shadcn add https://meda.medalsocial.com/r/meda-empty-state.json
+npx shadcn add https://meda.medalsocial.com/r/meda-filter-rail.json
+```
+
 For app-scoped brand tokens:
 
 ```ts

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './brand/public.js';
 export * from './chat/public.js';
 export * from './marketing/public.js';
 export * from './panel/public.js';
+export * from './primitives/index.js';
 export * from './shell/index.js';
 export * from './theme/index.js';
 export * from './timeline/public.js';

package/dist/index.js

@@ -3,6 +3,7 @@ export * from './brand/public.js';
 export * from './chat/public.js';
 export * from './marketing/public.js';
 export * from './panel/public.js';
+export * from './primitives/index.js';
 export * from './shell/index.js'; // v2 surface
 export * from './theme/index.js';
 export * from './timeline/public.js';

package/dist/primitives/empty-state.d.ts

@@ -0,0 +1,11 @@
+import type { LucideIcon } from 'lucide-react';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type EmptyStateVariant = 'default' | 'panel' | 'inline';
+export interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    icon?: LucideIcon | ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    variant?: EmptyStateVariant;
+}
+export declare function EmptyState({ icon, title, description, action, variant, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/empty-state.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { cn } from '../lib/utils.js';
+function isIconComponent(icon) {
+    if (typeof icon === 'function')
+        return true;
+    if (typeof icon !== 'object')
+        return false;
+    return '$$typeof' in icon && !isValidElement(icon);
+}
+function renderIcon(icon) {
+    if (!icon)
+        return null;
+    if (isIconComponent(icon)) {
+        const Icon = icon;
+        return _jsx(Icon, { "data-testid": "empty-state-icon", className: "size-10", "aria-hidden": "true" });
+    }
+    return (_jsx("span", { "data-testid": "empty-state-icon", "aria-hidden": "true", className: "inline-flex", children: icon }));
+}
+export function EmptyState({ icon, title, description, action, variant = 'default', className, ...props }) {
+    return (_jsxs("div", { "data-slot": "empty-state", "data-variant": variant, className: cn('flex flex-col items-center justify-center text-center', variant === 'default' && 'px-6 py-16', variant === 'panel' && 'px-4 py-10', variant === 'inline' && 'px-3 py-6', className), ...props, children: [icon ? (_jsx("div", { "data-slot": "empty-state-icon", className: cn('mb-4 inline-flex items-center justify-center rounded-md text-muted-foreground', variant === 'inline' ? 'size-9' : 'size-12'), children: renderIcon(icon) })) : null, _jsx("h3", { "data-slot": "empty-state-title", className: cn('font-semibold text-foreground', variant === 'default' && 'text-lg', variant === 'panel' && 'text-base', variant === 'inline' && 'text-sm'), children: title }), description ? (_jsx("p", { "data-slot": "empty-state-description", className: cn('mt-1 max-w-sm text-muted-foreground', variant === 'inline' ? 'text-xs' : 'text-sm'), children: description })) : null, action ? (_jsx("div", { "data-slot": "empty-state-action", className: "mt-5", children: action })) : null] }));
+}

package/dist/primitives/filter-rail.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface FilterRailProps extends Omit<ComponentPropsWithoutRef<'aside'>, 'title'> {
+    title?: ReactNode;
+    description?: ReactNode;
+    search?: ReactNode;
+    actions?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+}
+export interface FilterRailGroupProps extends Omit<ComponentPropsWithoutRef<'fieldset'>, 'title'> {
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+}
+declare function FilterRailGroup({ title, description, children, className, ...props }: FilterRailGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterRailRoot({ title, description, search, actions, footer, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: FilterRailProps): import("react/jsx-runtime").JSX.Element;
+export declare const FilterRail: typeof FilterRailRoot & {
+    Group: typeof FilterRailGroup;
+};
+export {};

package/dist/primitives/filter-rail.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cn } from '../lib/utils.js';
+function FilterRailGroup({ title, description, children, className, ...props }) {
+    return (_jsxs("fieldset", { "data-slot": "filter-rail-group", className: cn('space-y-2 border-0 p-0', className), ...props, children: [title ? (_jsx("legend", { "data-slot": "filter-rail-group-title", className: "text-xs font-semibold text-foreground", children: title })) : null, description ? (_jsx("p", { "data-slot": "filter-rail-group-description", className: "text-xs text-muted-foreground", children: description })) : null, _jsx("div", { "data-slot": "filter-rail-group-content", className: "space-y-1.5", children: children })] }));
+}
+function FilterRailRoot({ title, description, search, actions, footer, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }) {
+    const titleId = useId();
+    const label = ariaLabel ?? (ariaLabelledBy ? undefined : typeof title === 'string' ? title : undefined);
+    const labelledBy = ariaLabelledBy ?? (label ? undefined : title ? titleId : undefined);
+    return (_jsxs("aside", { "data-slot": "filter-rail", "aria-label": label, "aria-labelledby": labelledBy, className: cn('flex min-h-0 w-full flex-col border-border bg-card text-card-foreground', className), ...props, children: [title || description || actions ? (_jsxs("div", { "data-slot": "filter-rail-header", className: "flex shrink-0 items-start justify-between gap-3 border-b border-border px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [title ? (_jsx("h2", { id: titleId, "data-slot": "filter-rail-title", className: "text-sm font-semibold text-foreground", children: title })) : null, description ? (_jsx("p", { "data-slot": "filter-rail-description", className: "mt-0.5 text-xs text-muted-foreground", children: description })) : null] }), actions ? (_jsx("div", { "data-slot": "filter-rail-actions", className: "shrink-0", children: actions })) : null] })) : null, search ? (_jsx("div", { "data-slot": "filter-rail-search", className: "shrink-0 border-b border-border p-3", children: search })) : null, _jsx("div", { "data-slot": "filter-rail-content", className: "min-h-0 flex-1 space-y-5 overflow-y-auto p-4", children: children }), footer ? (_jsx("div", { "data-slot": "filter-rail-footer", className: "shrink-0 border-t border-border p-3", children: footer })) : null] }));
+}
+export const FilterRail = Object.assign(FilterRailRoot, {
+    Group: FilterRailGroup,
+});

package/dist/primitives/index.d.ts

@@ -0,0 +1,6 @@
+export type { EmptyStateProps, EmptyStateVariant } from './empty-state.js';
+export { EmptyState } from './empty-state.js';
+export type { FilterRailGroupProps, FilterRailProps } from './filter-rail.js';
+export { FilterRail } from './filter-rail.js';
+export type { SkeletonProps } from './skeleton.js';
+export { Skeleton } from './skeleton.js';

package/dist/primitives/index.js

@@ -0,0 +1,3 @@
+export { EmptyState } from './empty-state.js';
+export { FilterRail } from './filter-rail.js';
+export { Skeleton } from './skeleton.js';

package/dist/primitives/skeleton.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from 'react';
+export type SkeletonProps = ComponentProps<'div'>;
+export declare function Skeleton({ className, 'aria-hidden': ariaHidden, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/skeleton.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+export function Skeleton({ className, 'aria-hidden': ariaHidden = true, ...props }) {
+    return (_jsx("div", { "data-slot": "skeleton", "aria-hidden": ariaHidden, className: cn('animate-pulse rounded-md bg-muted', className), ...props }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {