omnira-ui 0.2.0 → 0.3.1

package/components/ui/CardHeader/index.ts

@@ -0,0 +1,2 @@
+export { CardHeader } from "./CardHeader";
+export type { CardHeaderProps } from "./CardHeader";

package/components/ui/EmptyState/EmptyState.module.css

@@ -0,0 +1,65 @@
+/* ============================================
+   Empty State — Glassmorphism Styles
+   ============================================ */
+
+.emptyState {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 48px 32px;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    box-shadow: var(--shadow-card);
+    backdrop-filter: var(--blur-standard);
+}
+
+/* ── Icon ── */
+
+.iconWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-subtle);
+    color: var(--color-text-tertiary);
+    margin-bottom: 20px;
+}
+
+.iconWrapperLime {
+    background: var(--color-bg-lime-subtle);
+    border-color: var(--color-border-lime-subtle);
+    color: var(--color-lime);
+}
+
+/* ── Text ── */
+
+.title {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    margin-bottom: 8px;
+    line-height: 1.3;
+}
+
+.description {
+    font-size: 14px;
+    color: var(--color-text-tertiary);
+    line-height: 1.5;
+    max-width: 360px;
+    margin-bottom: 24px;
+}
+
+/* ── Actions ── */
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}

package/components/ui/EmptyState/EmptyState.tsx

@@ -0,0 +1,37 @@
+import { cn } from "@/lib/cn";
+import styles from "./EmptyState.module.css";
+
+/* ── Types ── */
+
+export interface EmptyStateProps {
+    icon?: React.ReactNode;
+    iconAccent?: boolean;
+    title: string;
+    description?: string;
+    actions?: React.ReactNode;
+    className?: string;
+}
+
+/* ── Component ── */
+
+export function EmptyState({
+    icon,
+    iconAccent = false,
+    title,
+    description,
+    actions,
+    className,
+}: EmptyStateProps) {
+    return (
+        <div className={cn(styles.emptyState, className)}>
+            {icon && (
+                <div className={cn(styles.iconWrapper, iconAccent && styles.iconWrapperLime)}>
+                    {icon}
+                </div>
+            )}
+            <h3 className={styles.title}>{title}</h3>
+            {description && <p className={styles.description}>{description}</p>}
+            {actions && <div className={styles.actions}>{actions}</div>}
+        </div>
+    );
+}

package/components/ui/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from "./EmptyState";
+export type { EmptyStateProps } from "./EmptyState";

package/components/ui/Metric/Metric.module.css

@@ -0,0 +1,140 @@
+/* ============================================
+   Metric — Glassmorphism Styles
+   ============================================ */
+
+.metricCard {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 24px;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    box-shadow: var(--shadow-card);
+    backdrop-filter: var(--blur-standard);
+}
+
+/* ── Header ── */
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+}
+
+.iconWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-subtle);
+    color: var(--color-text-secondary);
+}
+
+/* ── Value ── */
+
+.valueRow {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+}
+
+.value {
+    font-family: var(--font-display);
+    font-size: 30px;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    line-height: 1;
+    letter-spacing: -0.5px;
+}
+
+/* ── Change indicator ── */
+
+.change {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: var(--radius-full);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+.changeUp {
+    background: var(--color-success-bg);
+    color: var(--color-success);
+    border: 1px solid var(--color-success-border);
+}
+
+.changeDown {
+    background: var(--color-error-bg);
+    color: var(--color-error);
+    border: 1px solid var(--color-error-border);
+}
+
+.changeArrow {
+    display: inline-flex;
+    font-size: 10px;
+}
+
+/* ── Description ── */
+
+.description {
+    font-size: 13px;
+    color: var(--color-text-tertiary);
+    line-height: 1.4;
+}
+
+/* ── Progress bar ── */
+
+.progressWrapper {
+    margin-top: 4px;
+}
+
+.progressTrack {
+    width: 100%;
+    height: 6px;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-elevated);
+    overflow: hidden;
+}
+
+.progressFill {
+    height: 100%;
+    border-radius: var(--radius-full);
+    background: var(--gradient-progress);
+    transition: width 0.4s ease;
+}
+
+.progressLabel {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 6px;
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+}
+
+/* ── Sparkline ── */
+
+.sparkline {
+    margin-top: 4px;
+}
+
+/* ── Grid layout for demos ── */
+
+.metricGrid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+}

package/components/ui/Metric/Metric.tsx

@@ -0,0 +1,78 @@
+import { cn } from "@/lib/cn";
+import styles from "./Metric.module.css";
+
+/* ── Types ── */
+
+export interface MetricProps {
+    label: string;
+    value: string;
+    change?: {
+        value: string;
+        direction: "up" | "down";
+    };
+    description?: string;
+    icon?: React.ReactNode;
+    progress?: {
+        value: number;
+        label?: string;
+        max?: string;
+    };
+    className?: string;
+}
+
+/* ── Component ── */
+
+export function Metric({
+    label,
+    value,
+    change,
+    description,
+    icon,
+    progress,
+    className,
+}: MetricProps) {
+    return (
+        <div className={cn(styles.metricCard, className)}>
+            <div className={styles.header}>
+                <span className={styles.label}>{label}</span>
+                {icon && <div className={styles.iconWrapper}>{icon}</div>}
+            </div>
+
+            <div className={styles.valueRow}>
+                <span className={styles.value}>{value}</span>
+                {change && (
+                    <span
+                        className={cn(
+                            styles.change,
+                            change.direction === "up" ? styles.changeUp : styles.changeDown,
+                        )}
+                    >
+                        <span className={styles.changeArrow}>
+                            {change.direction === "up" ? "↑" : "↓"}
+                        </span>
+                        {change.value}
+                    </span>
+                )}
+            </div>
+
+            {description && <p className={styles.description}>{description}</p>}
+
+            {progress && (
+                <div className={styles.progressWrapper}>
+                    <div className={styles.progressTrack}>
+                        <div
+                            className={styles.progressFill}
+                            style={{ width: `${Math.min(progress.value, 100)}%` }}
+                        />
+                    </div>
+                    {(progress.label || progress.max) && (
+                        <div className={styles.progressLabel}>
+                            <span>{progress.label ?? `${progress.value}%`}</span>
+                            {progress.max && <span>{progress.max}</span>}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/components/ui/Metric/index.ts

@@ -0,0 +1,2 @@
+export { Metric } from "./Metric";
+export type { MetricProps } from "./Metric";

package/components/ui/PageHeader/PageHeader.module.css

@@ -0,0 +1,128 @@
+/* ============================================
+   Page Header — Glassmorphism Styles
+   ============================================ */
+
+.pageHeader {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 24px;
+    padding: 24px;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    box-shadow: var(--shadow-card);
+    backdrop-filter: var(--blur-standard);
+}
+
+/* ── Left content ── */
+
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.breadcrumbs {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    font-size: 13px;
+    color: var(--color-text-tertiary);
+}
+
+.breadcrumbLink {
+    color: var(--color-text-tertiary);
+    text-decoration: none;
+    transition: color 0.15s ease;
+    cursor: pointer;
+}
+
+.breadcrumbLink:hover {
+    color: var(--color-text-primary);
+}
+
+.breadcrumbSeparator {
+    color: var(--color-text-tertiary);
+    opacity: 0.5;
+    font-size: 12px;
+}
+
+.breadcrumbCurrent {
+    color: var(--color-text-secondary);
+    font-weight: 500;
+}
+
+.titleRow {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.title {
+    font-family: var(--font-display);
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    line-height: 1.2;
+}
+
+.description {
+    font-size: 14px;
+    color: var(--color-text-tertiary);
+    line-height: 1.5;
+    max-width: 560px;
+}
+
+/* ── Right actions ── */
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+}
+
+/* ── Tabs variant ── */
+
+.tabsWrapper {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 16px;
+    border-top: 1px solid var(--color-border-subtle);
+    padding-top: 16px;
+}
+
+.tab {
+    padding: 6px 16px;
+    border-radius: var(--radius-full);
+    border: none;
+    background: transparent;
+    color: var(--color-text-tertiary);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: color 0.15s ease, background 0.2s ease;
+    outline: none;
+    font-family: inherit;
+}
+
+.tab:hover {
+    color: var(--color-text-secondary);
+}
+
+.tabActive {
+    background: var(--color-bg-elevated);
+    color: var(--color-text-primary);
+    font-weight: 600;
+}
+
+/* ── With divider ── */
+
+.withDivider {
+    border-bottom: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}

package/components/ui/PageHeader/PageHeader.tsx

@@ -0,0 +1,61 @@
+import { cn } from "@/lib/cn";
+import styles from "./PageHeader.module.css";
+
+/* ── Types ── */
+
+export interface PageHeaderBreadcrumb {
+    label: string;
+    href?: string;
+}
+
+export interface PageHeaderProps {
+    title: string;
+    description?: string;
+    breadcrumbs?: PageHeaderBreadcrumb[];
+    badge?: React.ReactNode;
+    actions?: React.ReactNode;
+    tabs?: React.ReactNode;
+    className?: string;
+}
+
+/* ── Component ── */
+
+export function PageHeader({
+    title,
+    description,
+    breadcrumbs,
+    badge,
+    actions,
+    tabs,
+    className,
+}: PageHeaderProps) {
+    return (
+        <div className={cn(styles.pageHeader, className)}>
+            <div className={styles.content}>
+                {breadcrumbs && breadcrumbs.length > 0 && (
+                    <nav className={styles.breadcrumbs}>
+                        {breadcrumbs.map((crumb, i) => (
+                            <span key={i}>
+                                {i > 0 && <span className={styles.breadcrumbSeparator}> / </span>}
+                                {crumb.href ? (
+                                    <a href={crumb.href} className={styles.breadcrumbLink}>
+                                        {crumb.label}
+                                    </a>
+                                ) : (
+                                    <span className={styles.breadcrumbCurrent}>{crumb.label}</span>
+                                )}
+                            </span>
+                        ))}
+                    </nav>
+                )}
+                <div className={styles.titleRow}>
+                    <h1 className={styles.title}>{title}</h1>
+                    {badge}
+                </div>
+                {description && <p className={styles.description}>{description}</p>}
+                {tabs && <div className={styles.tabsWrapper}>{tabs}</div>}
+            </div>
+            {actions && <div className={styles.actions}>{actions}</div>}
+        </div>
+    );
+}

package/components/ui/PageHeader/index.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from "./PageHeader";
+export type { PageHeaderProps, PageHeaderBreadcrumb } from "./PageHeader";