@sia-ui/cli 0.1.0

package/dist/registry/package/components/EntityMeta/styles.css

@@ -0,0 +1,9 @@
+.sia-entity-meta { display:grid; gap:1rem; padding:1rem 1.25rem; border:1px solid var(--sia-border); border-radius:calc(var(--sia-radius) * 1.25); background:var(--sia-surface); }
+.sia-entity-meta__header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
+.sia-entity-meta__status { display:inline-flex; align-items:center; min-height:1.75rem; padding:0 .65rem; border-radius:9999px; color:var(--sia-primary); background:color-mix(in srgb,var(--sia-primary) 10%,transparent); font-size:.75rem; font-weight:700; }
+.sia-entity-meta__identifier { padding:.2rem .5rem; border-radius:9999px; color:var(--sia-foreground); background:var(--sia-background); border:1px solid var(--sia-border); font-size:.78rem; }
+.sia-entity-meta__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
+.sia-entity-meta__item { display:grid; gap:.25rem; }
+.sia-entity-meta__label { color:var(--sia-muted); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
+.sia-entity-meta__value { color:var(--sia-foreground); font-size:.92rem; }
+.sia-entity-meta__value--strong { font-weight:700; }

package/dist/registry/package/components/ErrorState/index.tsx

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { Button } from "../Button";
+import { useSiaLocale } from "@sia-ui/headless";
+import "./styles.css";
+
+export interface ErrorStateProps {
+  title?: ReactNode;
+  description?: ReactNode;
+  error?: unknown;
+  action?: ReactNode;
+  onRetry?: () => void;
+  retryLabel?: string;
+  compact?: boolean;
+  className?: string;
+}
+
+function getErrorMessage(error: unknown): string | undefined {
+  if (error instanceof Error) return error.message;
+  if (typeof error === "string") return error;
+  return undefined;
+}
+
+export function ErrorState({ title: titleProp, description, error, action, onRetry, retryLabel: retryLabelProp, compact, className }: ErrorStateProps) {
+    const locale = useSiaLocale();
+    const retryLabel = retryLabelProp ?? locale.retry;
+    const title = titleProp ?? locale.error;
+  const message = description ?? getErrorMessage(error);
+  return <section className={cn("sia-error-state", compact && "sia-error-state--compact", className)} role="alert"><div className="sia-error-state__icon" aria-hidden="true">!</div><strong className="sia-error-state__title">{title}</strong>{message && <p className="sia-error-state__description">{message}</p>}<div className="sia-error-state__actions">{action}{onRetry && <Button variant="outline" onClick={onRetry}>{retryLabel}</Button>}</div></section>;
+}

package/dist/registry/package/components/ErrorState/styles.css

@@ -0,0 +1,6 @@
+.sia-error-state { display:grid; place-items:center; gap:.75rem; min-height:14rem; padding:2rem; text-align:center; border:1px solid color-mix(in srgb,var(--sia-danger) 35%,var(--sia-border)); border-radius:calc(var(--sia-radius) * 1.25); background:color-mix(in srgb,var(--sia-danger) 5%,var(--sia-background)); }
+.sia-error-state--compact { min-height:8rem; padding:1.25rem; }
+.sia-error-state__icon { display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; color:#fff; background:var(--sia-danger); font-weight:800; }
+.sia-error-state__title { color:var(--sia-foreground); }
+.sia-error-state__description { max-width:32rem; margin:0; color:var(--sia-muted); line-height:1.5; }
+.sia-error-state__actions { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }

package/dist/registry/package/components/EventCalendar/index.tsx

@@ -0,0 +1,8 @@
+import { Calendar, type CalendarDay, type CalendarProps } from "../Calendar";
+import type { ComponentTone } from "@sia-ui/tokens";
+import "./styles.css";
+
+export interface CalendarEvent { id: string; date: string; title: string; tone?: ComponentTone; }
+export interface EventCalendarProps extends Omit<CalendarProps, "renderDay"> { events: CalendarEvent[]; maxEventsPerDay?: number; onEventClick?: (event: CalendarEvent) => void; }
+export function EventCalendar({ events, maxEventsPerDay = 2, onEventClick, ...props }: EventCalendarProps) { const renderDay = (day: CalendarDay) => { const matches = events.filter((event) => event.date === day.date).slice(0, maxEventsPerDay); return <span className="sia-event-calendar__events">{matches.map((event) => <button type="button" key={event.id} className={`sia-event-calendar__event sia-event-calendar__event--${event.tone ?? "primary"}`} onClick={() => onEventClick?.(event)}>{event.title}</button>)}</span>; }; return <Calendar {...props} className={cnEvent(props.className)} renderDay={renderDay} />; }
+function cnEvent(className?: string) { return ["sia-event-calendar", className].filter(Boolean).join(" "); }

package/dist/registry/package/components/EventCalendar/styles.css

@@ -0,0 +1,8 @@
+.sia-event-calendar { width:100%; max-width:none; }
+.sia-event-calendar__events { display:grid; gap:.2rem; }
+.sia-event-calendar__event { width:100%; overflow:hidden; padding:.2rem .3rem; border:0; border-radius:.25rem; color:var(--sia-primary); background:color-mix(in srgb,currentColor 10%,transparent); font-size:.68rem; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
+.sia-event-calendar__event--neutral { color:var(--sia-muted); }
+.sia-event-calendar__event--info { color:var(--sia-info); }
+.sia-event-calendar__event--success { color:var(--sia-success); }
+.sia-event-calendar__event--warning { color:var(--sia-warning); }
+.sia-event-calendar__event--danger { color:var(--sia-danger); }