omnira-ui 0.1.0

package/components/ui/Rating/Rating.module.css

@@ -0,0 +1,99 @@
+/* ══════════════════════════════════════
+   Rating (interactive)
+   ══════════════════════════════════════ */
+
+.rating {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.readOnly {
+    pointer-events: none;
+}
+
+.star {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 2px;
+    cursor: pointer;
+    color: var(--color-border-medium);
+    transition: color 0.15s, transform 0.15s;
+    border-radius: var(--radius-sm);
+}
+
+.star:hover {
+    transform: scale(1.15);
+}
+
+.starFilled {
+    color: #f59e0b;
+}
+
+.starSvg {
+    display: block;
+}
+
+/* ── Sizes ── */
+.rating_sm .starSvg { width: 16px; height: 16px; }
+.rating_md .starSvg { width: 22px; height: 22px; }
+.rating_lg .starSvg { width: 28px; height: 28px; }
+
+/* ══════════════════════════════════════
+   Rating Badge
+   ══════════════════════════════════════ */
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    backdrop-filter: var(--blur-standard);
+}
+
+.badgeStars {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+}
+
+.badgeStar {
+    display: flex;
+    color: var(--color-border-medium);
+}
+
+.badgeStarFilled {
+    color: #f59e0b;
+}
+
+.badgeValue {
+    font-weight: 700;
+    color: var(--color-text-primary);
+    font-family: var(--font-display);
+}
+
+.badgeCount {
+    font-weight: 500;
+    color: var(--color-text-tertiary);
+}
+
+/* ── Badge sizes ── */
+.badge_sm .badgeStar svg { width: 12px; height: 12px; }
+.badge_sm .badgeValue { font-size: 12px; }
+.badge_sm .badgeCount { font-size: 11px; }
+.badge_sm { padding: 4px 10px; gap: 6px; }
+
+.badge_md .badgeStar svg { width: 16px; height: 16px; }
+.badge_md .badgeValue { font-size: 14px; }
+.badge_md .badgeCount { font-size: 13px; }
+
+.badge_lg .badgeStar svg { width: 20px; height: 20px; }
+.badge_lg .badgeValue { font-size: 16px; }
+.badge_lg .badgeCount { font-size: 14px; }
+.badge_lg { padding: 8px 16px; gap: 10px; }

package/components/ui/Rating/Rating.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState, useCallback, forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Rating.module.css";
+
+/* ══════════════════════════════════════
+   Rating (interactive stars)
+   ══════════════════════════════════════ */
+export interface RatingProps {
+    value?: number;
+    defaultValue?: number;
+    max?: number;
+    onChange?: (value: number) => void;
+    size?: "sm" | "md" | "lg";
+    readOnly?: boolean;
+    className?: string;
+}
+
+export const Rating = forwardRef<HTMLDivElement, RatingProps>(
+    (
+        {
+            value: controlledValue,
+            defaultValue = 0,
+            max = 5,
+            onChange,
+            size = "md",
+            readOnly = false,
+            className,
+        },
+        ref,
+    ) => {
+        const isControlled = controlledValue !== undefined;
+        const [internalValue, setInternalValue] = useState(defaultValue);
+        const [hoverValue, setHoverValue] = useState(0);
+        const value = isControlled ? controlledValue : internalValue;
+        const displayValue = hoverValue || value;
+
+        const handleClick = useCallback(
+            (star: number) => {
+                if (readOnly) return;
+                const newVal = star === value ? 0 : star;
+                if (!isControlled) setInternalValue(newVal);
+                onChange?.(newVal);
+            },
+            [readOnly, value, isControlled, onChange],
+        );
+
+        return (
+            <div
+                ref={ref}
+                className={cn(styles.rating, styles[`rating_${size}`], readOnly && styles.readOnly, className)}
+                role="radiogroup"
+                aria-label="Rating"
+            >
+                {Array.from({ length: max }, (_, i) => {
+                    const star = i + 1;
+                    const filled = star <= displayValue;
+                    return (
+                        <button
+                            key={star}
+                            type="button"
+                            className={cn(styles.star, filled && styles.starFilled)}
+                            onClick={() => handleClick(star)}
+                            onMouseEnter={() => !readOnly && setHoverValue(star)}
+                            onMouseLeave={() => !readOnly && setHoverValue(0)}
+                            aria-label={`${star} star${star > 1 ? "s" : ""}`}
+                            tabIndex={readOnly ? -1 : 0}
+                        >
+                            <StarIcon />
+                        </button>
+                    );
+                })}
+            </div>
+        );
+    },
+);
+
+Rating.displayName = "Rating";
+
+/* ══════════════════════════════════════
+   Rating Badge
+   ══════════════════════════════════════ */
+export interface RatingBadgeProps {
+    value: number;
+    max?: number;
+    count?: number;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+
+export function RatingBadge({
+    value,
+    max = 5,
+    count,
+    size = "md",
+    className,
+}: RatingBadgeProps) {
+    return (
+        <div className={cn(styles.badge, styles[`badge_${size}`], className)}>
+            <div className={styles.badgeStars}>
+                {Array.from({ length: max }, (_, i) => (
+                    <span key={i} className={cn(styles.badgeStar, i < Math.round(value) && styles.badgeStarFilled)}>
+                        <StarIcon />
+                    </span>
+                ))}
+            </div>
+            <span className={styles.badgeValue}>{value.toFixed(1)}</span>
+            {count !== undefined && (
+                <span className={styles.badgeCount}>({count})</span>
+            )}
+        </div>
+    );
+}
+
+/* ── Star SVG ── */
+function StarIcon() {
+    return (
+        <svg viewBox="0 0 20 20" fill="currentColor" className={styles.starSvg}>
+            <path d="M10 1.5L12.47 7.03L18.5 7.72L13.97 11.67L15.35 17.5L10 14.27L4.65 17.5L6.03 11.67L1.5 7.72L7.53 7.03L10 1.5Z" />
+        </svg>
+    );
+}

package/components/ui/Rating/index.ts

@@ -0,0 +1,2 @@
+export { Rating, RatingBadge } from "./Rating";
+export type { RatingProps, RatingBadgeProps } from "./Rating";

package/components/ui/Select/Select.module.css

@@ -0,0 +1,371 @@
+/* ── Wrapper ── */
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+    position: relative;
+}
+
+/* ── Label ── */
+.label {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-tertiary);
+}
+
+.required {
+    color: var(--color-error);
+    margin-left: 2px;
+}
+
+/* ── Trigger ── */
+.trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    padding: 0 14px;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-input);
+    border: 1px solid var(--color-border-standard);
+    font-family: inherit;
+    color: var(--color-text-primary);
+    cursor: pointer;
+    transition: all 0.25s;
+    outline: none;
+    text-align: left;
+    position: relative;
+}
+
+.trigger:hover {
+    border-color: var(--color-border-medium);
+}
+
+.triggerOpen {
+    border-color: var(--color-border-lime-strong);
+    background: var(--color-bg-elevated);
+}
+
+.triggerError {
+    border-color: var(--color-error-border);
+}
+
+.triggerError.triggerOpen {
+    border-color: var(--color-error);
+}
+
+.triggerDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ── Trigger Sizes ── */
+.sm {
+    height: 36px;
+    font-size: 13px;
+    padding: 0 12px;
+}
+
+.md {
+    height: 44px;
+    font-size: 14px;
+}
+
+.lg {
+    height: 52px;
+    font-size: 16px;
+    padding: 0 16px;
+}
+
+/* ── Tags trigger ── */
+.triggerTags {
+    height: auto;
+    min-height: 44px;
+    padding: 6px 14px;
+    flex-wrap: wrap;
+}
+
+.triggerTags.sm {
+    min-height: 36px;
+    padding: 4px 12px;
+}
+
+.triggerTags.lg {
+    min-height: 52px;
+    padding: 8px 16px;
+}
+
+/* ── Trigger Value ── */
+.triggerValue {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+
+/* ── Placeholder ── */
+.placeholder {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--color-text-tertiary);
+    opacity: 0.6;
+    font-weight: 400;
+}
+
+.placeholderIcon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+/* ── Chevron ── */
+.chevron {
+    flex-shrink: 0;
+    transition: transform 0.2s;
+}
+
+.chevronOpen {
+    transform: rotate(180deg);
+}
+
+/* ── Listbox ── */
+.listbox {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    margin-top: 6px;
+    padding: 6px;
+    border-radius: var(--radius-xl);
+    background: var(--color-bg-card);
+    border: 1.5px solid var(--color-border-standard);
+    box-shadow: var(--shadow-card);
+    max-height: 280px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    animation: selectIn 0.15s ease-out;
+}
+
+@keyframes selectIn {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ── Search Box ── */
+.searchBox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--color-border-subtle);
+    margin-bottom: 4px;
+}
+
+.searchInput {
+    flex: 1;
+    background: none;
+    border: none;
+    outline: none;
+    font-family: inherit;
+    font-size: 13px;
+    color: var(--color-text-primary);
+}
+
+.searchInput::placeholder {
+    color: var(--color-text-tertiary);
+    opacity: 0.5;
+}
+
+/* ── No Results ── */
+.noResults {
+    padding: 12px;
+    text-align: center;
+    font-size: 13px;
+    color: var(--color-text-tertiary);
+}
+
+/* ── Option ── */
+.option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    width: 100%;
+    padding: 8px 10px;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--color-text-primary);
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 0.15s;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.option:hover {
+    background: var(--color-bg-hover);
+}
+
+.optionSelected {
+    background: var(--color-bg-lime-subtle);
+}
+
+.optionSelected:hover {
+    background: var(--color-bg-lime-medium);
+}
+
+.optionDisabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ── Item Content ── */
+.itemContent {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    flex: 1;
+}
+
+.itemText {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+}
+
+.itemLabel {
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.itemSupporting {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    white-space: nowrap;
+}
+
+.itemIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    color: var(--color-text-tertiary);
+}
+
+/* ── Avatar ── */
+.avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+    border: 1px solid var(--color-border-subtle);
+}
+
+/* ── Dot ── */
+.dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-success);
+    flex-shrink: 0;
+}
+
+/* ── Tags Container ── */
+.tagsContainer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    flex: 1;
+    align-items: center;
+    min-width: 0;
+}
+
+/* ── Tag Chip ── */
+.tagChip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-subtle);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    white-space: nowrap;
+    line-height: 1.4;
+}
+
+.tagChipAvatar {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-left: -2px;
+}
+
+.tagChipRemove {
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--color-text-tertiary);
+    transition: color 0.15s;
+    line-height: 1;
+}
+
+.tagChipRemove:hover {
+    color: var(--color-text-primary);
+}
+
+/* ── Hint / Error ── */
+.hint {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+}
+
+.errorText {
+    font-size: 12px;
+    color: var(--color-error);
+}
+
+/* ── Scrollbar ── */
+.listbox::-webkit-scrollbar {
+    width: 4px;
+}
+
+.listbox::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.listbox::-webkit-scrollbar-thumb {
+    background: var(--color-border-medium);
+    border-radius: 4px;
+}