omnira-ui 0.1.0

package/components/ui/SidebarNavigation/SidebarParts.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { ArrowDown2, SearchNormal1, ExportSquare, ArrowUp2, User, Setting2, Book1, LogoutCurve, AddCircle } from "iconsax-react";
+import { cn } from "@/lib/cn";
+import type { NavItemType, NavItemDividerType, NavSubItem } from "./types";
+import styles from "./SidebarNavigation.module.css";
+
+/* ── Type guard ── */
+export function isDivider(item: NavItemType | NavItemDividerType): item is NavItemDividerType {
+    return "divider" in item && item.divider === true;
+}
+
+/* ── Search Bar ── */
+export function SidebarSearchBar() {
+    return (
+        <div className={styles.searchBar}>
+            <span className={styles.searchIcon}>
+                <SearchNormal1 size={16} variant="Bulk" color="currentColor" />
+            </span>
+            <span className={styles.searchText}>Search</span>
+            <span className={styles.searchShortcut}>⌘K</span>
+        </div>
+    );
+}
+
+/* ── User Card ── */
+export interface UserCardProps {
+    name: string;
+    email: string;
+    initials?: string;
+    online?: boolean;
+}
+
+export interface SwitchAccount {
+    name: string;
+    email: string;
+    initials?: string;
+    online?: boolean;
+}
+
+export function SidebarUserCard({ name, email, initials, online = true }: UserCardProps) {
+    const [open, setOpen] = useState(false);
+    const [activeAccount, setActiveAccount] = useState(0);
+    const wrapRef = useRef<HTMLDivElement>(null);
+
+    const accounts: SwitchAccount[] = [
+        { name, email, initials, online },
+        { name: "Alex Rivera", email: "alex@omnira.space", initials: "AR", online: true },
+    ];
+
+    const close = useCallback(() => setOpen(false), []);
+
+    useEffect(() => {
+        if (!open) return;
+        const handleClick = (e: MouseEvent) => {
+            if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) close();
+        };
+        const handleKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") close();
+        };
+        document.addEventListener("mousedown", handleClick);
+        document.addEventListener("keydown", handleKey);
+        return () => {
+            document.removeEventListener("mousedown", handleClick);
+            document.removeEventListener("keydown", handleKey);
+        };
+    }, [open, close]);
+
+    return (
+        <div className={styles.userCardWrap} ref={wrapRef}>
+            {open && (
+                <div className={styles.userPopup}>
+                    <a href="/profile" className={styles.popupItem} onClick={close}>
+                        <span className={styles.popupItemIcon}><User size={16} variant="Bulk" color="currentColor" /></span>
+                        View profile
+                        <span className={styles.popupItemShortcut}>⌘K→P</span>
+                    </a>
+                    <a href="/settings/account" className={styles.popupItem} onClick={close}>
+                        <span className={styles.popupItemIcon}><Setting2 size={16} variant="Bulk" color="currentColor" /></span>
+                        Account settings
+                        <span className={styles.popupItemShortcut}>⌘S</span>
+                    </a>
+                    <a href="/docs" className={styles.popupItem} onClick={close}>
+                        <span className={styles.popupItemIcon}><Book1 size={16} variant="Bulk" color="currentColor" /></span>
+                        Documentation
+                    </a>
+                    <hr className={styles.popupDivider} />
+                    <div className={styles.popupSectionLabel}>Switch account</div>
+                    {accounts.map((acc, i) => (
+                        <button
+                            key={acc.email}
+                            className={styles.popupAccountRow}
+                            onClick={() => setActiveAccount(i)}
+                            type="button"
+                        >
+                            <div className={styles.popupAccountAvatar}>{acc.initials ?? acc.name.charAt(0)}</div>
+                            <div className={styles.popupAccountInfo}>
+                                <span className={styles.popupAccountName}>{acc.name}</span>
+                                <span className={styles.popupAccountEmail}>
+                                    {acc.online && <span className={styles.userOnlineDot} />}
+                                    {acc.email}
+                                </span>
+                            </div>
+                            <span className={cn(styles.popupRadio, i === activeAccount && styles.popupRadioActive)} />
+                        </button>
+                    ))}
+                    <button className={styles.popupItem} type="button">
+                        <span className={styles.popupItemIcon}><AddCircle size={16} variant="Bulk" color="currentColor" /></span>
+                        Add account
+                    </button>
+                    <hr className={styles.popupDivider} />
+                    <button className={cn(styles.popupItem, styles.popupItemDanger)} type="button" onClick={close}>
+                        <span className={styles.popupItemIcon}><LogoutCurve size={16} color="currentColor" /></span>
+                        Sign out
+                        <span className={styles.popupItemShortcut}>⌥⇧Q</span>
+                    </button>
+                </div>
+            )}
+            <div className={styles.userCard} onClick={() => setOpen((v) => !v)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") setOpen((v) => !v); }}>
+                <div className={styles.userAvatar}>{initials ?? name.charAt(0)}</div>
+                <div className={styles.userInfo}>
+                    <span className={styles.userName}>{name}</span>
+                    <span className={styles.userEmail}>
+                        {online && <span className={styles.userOnlineDot} />}
+                        {email}
+                    </span>
+                </div>
+                <span className={styles.userChevron}>
+                    <ArrowUp2 size={14} color="currentColor" />
+                </span>
+            </div>
+        </div>
+    );
+}
+
+/* ── Sub Item Row ── */
+export function SubItemRow({ item, isActive }: { item: NavSubItem; isActive: boolean }) {
+    return (
+        <a href={item.href} className={cn(styles.subItem, isActive && styles.subItemActive)}>
+            <span>{item.label}</span>
+            {item.badge != null && (
+                <span className={styles.subItemBadge}>
+                    {typeof item.badge === "number" ? item.badge : item.badge}
+                </span>
+            )}
+        </a>
+    );
+}
+
+/* ── Nav Row ── */
+export function NavRow({
+    item,
+    isActive,
+    activeUrl,
+}: {
+    item: NavItemType;
+    isActive: boolean;
+    activeUrl?: string;
+}) {
+    const [open, setOpen] = useState(false);
+    const hasChildren = item.items && item.items.length > 0;
+
+    const handleClick = () => {
+        if (hasChildren) setOpen((prev) => !prev);
+    };
+
+    const content = (
+        <>
+            {item.icon && <span className={styles.navItemIcon}>{item.icon}</span>}
+            <span className={styles.navItemLabel}>{item.label}</span>
+            {item.badge && <span className={styles.navItemBadge}>{item.badge}</span>}
+            {item.external && (
+                <span className={styles.externalIcon}>
+                    <ExportSquare size={14} color="currentColor" />
+                </span>
+            )}
+            {hasChildren && (
+                <span className={cn(styles.navItemChevron, open && styles.navItemChevronOpen)}>
+                    <ArrowDown2 size={14} color="currentColor" />
+                </span>
+            )}
+        </>
+    );
+
+    return (
+        <div>
+            {hasChildren ? (
+                <button
+                    className={cn(styles.navItem, isActive && styles.navItemActive)}
+                    onClick={handleClick}
+                    type="button"
+                >
+                    {content}
+                </button>
+            ) : (
+                <a
+                    href={item.href}
+                    className={cn(styles.navItem, isActive && styles.navItemActive)}
+                    target={item.external ? "_blank" : undefined}
+                    rel={item.external ? "noopener noreferrer" : undefined}
+                >
+                    {content}
+                </a>
+            )}
+            {hasChildren && open && (
+                <div className={styles.subItems}>
+                    {item.items!.map((sub) => (
+                        <SubItemRow key={sub.href} item={sub} isActive={activeUrl === sub.href} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/components/ui/SidebarNavigation/SidebarSectionDividers.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import type { NavItemType, NavItemDividerType } from "./types";
+import { isDivider, NavRow, SidebarSearchBar, SidebarUserCard } from "./SidebarParts";
+import type { UserCardProps } from "./SidebarParts";
+import styles from "./SidebarNavigation.module.css";
+
+interface SidebarSectionDividersProps {
+    items: (NavItemType | NavItemDividerType)[];
+    activeUrl?: string;
+    brand?: { name: string; logo?: string };
+    search?: boolean;
+    user?: UserCardProps;
+    footer?: React.ReactNode;
+    className?: string;
+}
+
+export function SidebarSectionDividers({ items, activeUrl, brand, search, user, footer, className }: SidebarSectionDividersProps) {
+    return (
+        <nav className={cn(styles.sidebar, className)}>
+            {brand && (
+                <div className={styles.brand}>
+                    <div className={styles.brandLogo}>{brand.logo ?? brand.name.charAt(0)}</div>
+                    <span className={styles.brandName}>{brand.name}</span>
+                </div>
+            )}
+            {search && <SidebarSearchBar />}
+            {items.map((item, i) => {
+                if (isDivider(item)) {
+                    return <hr key={`div-${i}`} className={styles.divider} />;
+                }
+                return (
+                    <NavRow
+                        key={item.href + item.label}
+                        item={item}
+                        isActive={activeUrl === item.href}
+                        activeUrl={activeUrl}
+                    />
+                );
+            })}
+            {footer && <div className={styles.sidebarFooter}>{footer}</div>}
+            {user && <SidebarUserCard {...user} />}
+        </nav>
+    );
+}

package/components/ui/SidebarNavigation/SidebarSectionHeadings.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import type { NavSectionType } from "./types";
+import { isDivider, NavRow, SidebarSearchBar, SidebarUserCard } from "./SidebarParts";
+import type { UserCardProps } from "./SidebarParts";
+import styles from "./SidebarNavigation.module.css";
+
+interface SidebarSectionHeadingsProps {
+    sections: NavSectionType[];
+    activeUrl?: string;
+    brand?: { name: string; logo?: string };
+    search?: boolean;
+    user?: UserCardProps;
+    footer?: React.ReactNode;
+    className?: string;
+}
+
+export function SidebarSectionHeadings({ sections, activeUrl, brand, search, user, footer, className }: SidebarSectionHeadingsProps) {
+    return (
+        <nav className={cn(styles.sidebar, className)}>
+            {brand && (
+                <div className={styles.brand}>
+                    <div className={styles.brandLogo}>{brand.logo ?? brand.name.charAt(0)}</div>
+                    <span className={styles.brandName}>{brand.name}</span>
+                </div>
+            )}
+            {search && <SidebarSearchBar />}
+            {sections.map((section, si) => (
+                <div key={section.heading}>
+                    {si > 0 && <hr className={styles.divider} />}
+                    <div className={styles.sectionHeading}>{section.heading}</div>
+                    {section.items.map((item, i) => {
+                        if (isDivider(item)) {
+                            return <hr key={`div-${si}-${i}`} className={styles.divider} />;
+                        }
+                        return (
+                            <NavRow
+                                key={item.href + item.label}
+                                item={item}
+                                isActive={activeUrl === item.href}
+                                activeUrl={activeUrl}
+                            />
+                        );
+                    })}
+                </div>
+            ))}
+            {footer && <div className={styles.sidebarFooter}>{footer}</div>}
+            {user && <SidebarUserCard {...user} />}
+        </nav>
+    );
+}

package/components/ui/SidebarNavigation/SidebarSimple.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import type { NavItemType, NavItemDividerType } from "./types";
+import { isDivider, NavRow, SidebarSearchBar, SidebarUserCard } from "./SidebarParts";
+import type { UserCardProps } from "./SidebarParts";
+import styles from "./SidebarNavigation.module.css";
+
+interface SidebarSimpleProps {
+    items: (NavItemType | NavItemDividerType)[];
+    activeUrl?: string;
+    brand?: { name: string; logo?: string };
+    search?: boolean;
+    user?: UserCardProps;
+    footer?: React.ReactNode;
+    className?: string;
+}
+
+export function SidebarSimple({ items, activeUrl, brand, search, user, footer, className }: SidebarSimpleProps) {
+    return (
+        <nav className={cn(styles.sidebar, className)}>
+            {brand && (
+                <div className={styles.brand}>
+                    <div className={styles.brandLogo}>{brand.logo ?? brand.name.charAt(0)}</div>
+                    <span className={styles.brandName}>{brand.name}</span>
+                </div>
+            )}
+            {search && <SidebarSearchBar />}
+            {items.map((item, i) => {
+                if (isDivider(item)) {
+                    return <hr key={`div-${i}`} className={styles.divider} />;
+                }
+                return (
+                    <NavRow
+                        key={item.href + item.label}
+                        item={item}
+                        isActive={activeUrl === item.href}
+                        activeUrl={activeUrl}
+                    />
+                );
+            })}
+            {footer && <div className={styles.sidebarFooter}>{footer}</div>}
+            {user && <SidebarUserCard {...user} />}
+        </nav>
+    );
+}

package/components/ui/SidebarNavigation/SidebarSlim.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import type { NavItemType, NavItemDividerType } from "./types";
+import styles from "./SidebarNavigation.module.css";
+
+interface SidebarSlimProps {
+    items: (NavItemType | NavItemDividerType)[];
+    activeUrl?: string;
+    brandLogo?: string;
+    footer?: React.ReactNode;
+    className?: string;
+}
+
+function isDivider(item: NavItemType | NavItemDividerType): item is NavItemDividerType {
+    return "divider" in item && item.divider === true;
+}
+
+export function SidebarSlim({ items, activeUrl, brandLogo, footer, className }: SidebarSlimProps) {
+    return (
+        <nav className={cn(styles.sidebar, styles.sidebarSlim, className)}>
+            {brandLogo && (
+                <div className={styles.brandLogo} style={{ marginBottom: 8 }}>
+                    {brandLogo}
+                </div>
+            )}
+            {items.map((item, i) => {
+                if (isDivider(item)) {
+                    return <hr key={`div-${i}`} className={styles.divider} style={{ width: "100%" }} />;
+                }
+                const isActive = activeUrl === item.href;
+                return (
+                    <a
+                        key={item.href + item.label}
+                        href={item.href}
+                        className={cn(styles.navItemSlim, isActive && styles.navItemSlimActive)}
+                        target={item.external ? "_blank" : undefined}
+                        rel={item.external ? "noopener noreferrer" : undefined}
+                    >
+                        {item.icon}
+                        <span className={styles.slimTooltip}>{item.label}</span>
+                    </a>
+                );
+            })}
+            {footer && <div className={styles.sidebarFooter}>{footer}</div>}
+        </nav>
+    );
+}

package/components/ui/SidebarNavigation/index.ts

@@ -0,0 +1,29 @@
+export { SidebarSimple } from "./SidebarSimple";
+export { SidebarSectionDividers } from "./SidebarSectionDividers";
+export { SidebarSectionHeadings } from "./SidebarSectionHeadings";
+export { SidebarSlim } from "./SidebarSlim";
+export { SidebarDual } from "./SidebarDual";
+export { SidebarSearchBar, SidebarUserCard } from "./SidebarParts";
+export type { UserCardProps } from "./SidebarParts";
+export {
+    FeatureCardProgress,
+    FeatureCardProgressCode,
+    FeatureCardImage,
+    FeatureCardCookie,
+    FeatureCardReferral,
+    FeatureCardOnboarding,
+    FeatureCardUpgrade,
+    FeatureCardSupport,
+    FeatureCardEvent,
+    FeatureCardMessage,
+    FeatureCardCurrentProject,
+    FeatureCardFreeTrial,
+    FeatureCardQRCode,
+} from "./SidebarFeatureCard";
+export type {
+    NavItemType,
+    NavItemDividerType,
+    NavSectionType,
+    NavSubItem,
+    SidebarNavItem,
+} from "./types";

package/components/ui/SidebarNavigation/types.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+export interface NavSubItem {
+    label: string;
+    href: string;
+    badge?: ReactNode;
+}
+
+export interface NavItemType {
+    label: string;
+    href: string;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    items?: NavSubItem[];
+    external?: boolean;
+}
+
+export interface NavItemDividerType {
+    divider: true;
+}
+
+export interface NavSectionType {
+    heading: string;
+    items: (NavItemType | NavItemDividerType)[];
+}
+
+export type SidebarNavItem = NavItemType | NavItemDividerType;

package/components/ui/Slider/Slider.module.css

@@ -0,0 +1,93 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+}
+
+.wrapperDisabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+}
+
+.hint {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    margin-top: -4px;
+}
+
+.valueText {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    margin-left: auto;
+}
+
+/* ── Track ── */
+.track {
+    position: relative;
+    width: 100%;
+    border-radius: 999px;
+    background: var(--color-bg-elevated);
+    cursor: pointer;
+    touch-action: none;
+    user-select: none;
+}
+
+.track_sm { height: 4px; }
+.track_md { height: 6px; }
+.track_lg { height: 8px; }
+
+/* ── Fill ── */
+.fill {
+    height: 100%;
+    border-radius: 999px;
+    background: var(--color-lime);
+    pointer-events: none;
+    transition: width 0.05s linear;
+}
+
+/* ── Thumb ── */
+.thumb {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: var(--color-lime);
+    border: 2px solid var(--color-bg-primary);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+    pointer-events: none;
+    transition: width 0.05s linear, height 0.05s linear;
+}
+
+.thumb_sm {
+    width: 14px;
+    height: 14px;
+}
+
+.thumb_md {
+    width: 18px;
+    height: 18px;
+}
+
+.thumb_lg {
+    width: 22px;
+    height: 22px;
+}
+
+.track:hover .thumb {
+    box-shadow: 0 0 0 4px rgba(163, 230, 53, 0.2), 0 1px 4px rgba(0, 0, 0, 0.25);
+}

package/components/ui/Slider/Slider.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useState, useCallback, useRef, useEffect, forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Slider.module.css";
+
+export interface SliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    label?: string;
+    hint?: string;
+    showValue?: boolean;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    className?: string;
+}
+
+export const Slider = forwardRef<HTMLDivElement, SliderProps>(
+    (
+        {
+            min = 0,
+            max = 100,
+            step = 1,
+            value: controlledValue,
+            defaultValue = 0,
+            onChange,
+            label,
+            hint,
+            showValue = true,
+            size = "md",
+            disabled = false,
+            className,
+        },
+        ref,
+    ) => {
+        const isControlled = controlledValue !== undefined;
+        const [internalValue, setInternalValue] = useState(defaultValue);
+        const value = isControlled ? controlledValue : internalValue;
+        const pct = ((value - min) / (max - min)) * 100;
+
+        const trackRef = useRef<HTMLDivElement>(null);
+        const dragging = useRef(false);
+
+        const updateValue = useCallback(
+            (clientX: number) => {
+                const track = trackRef.current;
+                if (!track || disabled) return;
+                const rect = track.getBoundingClientRect();
+                let ratio = (clientX - rect.left) / rect.width;
+                ratio = Math.max(0, Math.min(1, ratio));
+                let newVal = min + ratio * (max - min);
+                newVal = Math.round(newVal / step) * step;
+                newVal = Math.max(min, Math.min(max, newVal));
+                if (!isControlled) setInternalValue(newVal);
+                onChange?.(newVal);
+            },
+            [min, max, step, disabled, isControlled, onChange],
+        );
+
+        const handlePointerDown = useCallback(
+            (e: React.PointerEvent) => {
+                if (disabled) return;
+                dragging.current = true;
+                (e.target as HTMLElement).setPointerCapture(e.pointerId);
+                updateValue(e.clientX);
+            },
+            [disabled, updateValue],
+        );
+
+        const handlePointerMove = useCallback(
+            (e: React.PointerEvent) => {
+                if (!dragging.current) return;
+                updateValue(e.clientX);
+            },
+            [updateValue],
+        );
+
+        const handlePointerUp = useCallback(() => {
+            dragging.current = false;
+        }, []);
+
+        return (
+            <div ref={ref} className={cn(styles.wrapper, disabled && styles.wrapperDisabled, className)}>
+                {(label || (showValue && label)) && (
+                    <div className={styles.header}>
+                        {label && <span className={styles.label}>{label}</span>}
+                        {showValue && <span className={styles.valueText}>{value}</span>}
+                    </div>
+                )}
+                {hint && <span className={styles.hint}>{hint}</span>}
+                <div
+                    ref={trackRef}
+                    className={cn(styles.track, styles[`track_${size}`])}
+                    onPointerDown={handlePointerDown}
+                    onPointerMove={handlePointerMove}
+                    onPointerUp={handlePointerUp}
+                >
+                    <div className={styles.fill} style={{ width: `${pct}%` }} />
+                    <div
+                        className={cn(styles.thumb, styles[`thumb_${size}`])}
+                        style={{ left: `${pct}%` }}
+                    />
+                </div>
+                {!label && showValue && (
+                    <div className={styles.header}>
+                        <span className={styles.valueText}>{value}</span>
+                    </div>
+                )}
+            </div>
+        );
+    },
+);
+
+Slider.displayName = "Slider";

package/components/ui/Slider/index.ts

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