omnira-ui 0.1.0

package/components/ui/Textarea/Textarea.module.css

@@ -0,0 +1,75 @@
+/* ── Wrapper ── */
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+}
+
+/* ── 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;
+}
+
+/* ── Textarea ── */
+.textarea {
+    width: 100%;
+    padding: 12px 14px;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-input);
+    border: 1px solid var(--color-border-standard);
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--color-text-primary);
+    transition: all 0.25s;
+    outline: none;
+    resize: vertical;
+    min-height: 80px;
+}
+
+.textarea:focus {
+    border-color: var(--color-border-lime-strong);
+    background: var(--color-bg-elevated);
+}
+
+.textarea::placeholder {
+    color: var(--color-text-tertiary);
+    opacity: 0.5;
+}
+
+/* ── Disabled ── */
+.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    resize: none;
+}
+
+/* ── Error ── */
+.error {
+    border-color: var(--color-error-border);
+}
+
+.error:focus {
+    border-color: var(--color-error);
+}
+
+.errorText {
+    font-size: 12px;
+    color: var(--color-error);
+}
+
+/* ── Helper / Hint ── */
+.helperText {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+}

package/components/ui/Textarea/Textarea.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Textarea.module.css";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    hint?: string;
+    isRequired?: boolean;
+    wrapperClassName?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+    (
+        {
+            label,
+            error,
+            helperText,
+            hint,
+            isRequired = false,
+            wrapperClassName,
+            className,
+            disabled,
+            ...props
+        },
+        ref,
+    ) => {
+        return (
+            <div className={cn(styles.wrapper, wrapperClassName)}>
+                {label && (
+                    <label className={styles.label}>
+                        {label}
+                        {isRequired && <span className={styles.required}>*</span>}
+                    </label>
+                )}
+                <textarea
+                    ref={ref}
+                    className={cn(
+                        styles.textarea,
+                        error ? styles.error : undefined,
+                        disabled ? styles.disabled : undefined,
+                        className,
+                    )}
+                    disabled={disabled}
+                    {...props}
+                />
+                {error && <span className={styles.errorText}>{error}</span>}
+                {(hint || helperText) && !error && (
+                    <span className={styles.helperText}>{hint || helperText}</span>
+                )}
+            </div>
+        );
+    },
+);
+
+Textarea.displayName = "Textarea";

package/components/ui/Textarea/index.ts

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

package/components/ui/Toggle/Toggle.module.css

@@ -0,0 +1,118 @@
+/* ── Wrapper ── */
+.wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    cursor: pointer;
+}
+
+.wrapperDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ── Track ── */
+.track {
+    position: relative;
+    flex-shrink: 0;
+    border: none;
+    border-radius: 999px;
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-standard);
+    cursor: pointer;
+    transition: all 0.25s;
+    padding: 0;
+}
+
+.track:hover {
+    border-color: var(--color-border-lime-strong);
+}
+
+.trackChecked {
+    background: var(--color-lime);
+    border-color: var(--color-lime);
+}
+
+/* Track sizes */
+.track_sm {
+    width: 36px;
+    height: 20px;
+}
+
+.track_md {
+    width: 44px;
+    height: 24px;
+}
+
+.track_lg {
+    width: 52px;
+    height: 28px;
+}
+
+/* ── Thumb ── */
+.thumb {
+    position: absolute;
+    top: 50%;
+    border-radius: 50%;
+    background: var(--color-text-tertiary);
+    transition: all 0.25s;
+    transform: translateY(-50%);
+}
+
+.trackChecked .thumb {
+    background: var(--color-bg-primary);
+}
+
+/* Thumb sizes */
+.thumb_sm {
+    width: 14px;
+    height: 14px;
+    left: 2px;
+}
+
+.thumb_md {
+    width: 18px;
+    height: 18px;
+    left: 2px;
+}
+
+.thumb_lg {
+    width: 22px;
+    height: 22px;
+    left: 2px;
+}
+
+/* Thumb checked positions */
+.thumbChecked.thumb_sm {
+    left: 18px;
+}
+
+.thumbChecked.thumb_md {
+    left: 22px;
+}
+
+.thumbChecked.thumb_lg {
+    left: 26px;
+}
+
+/* ── Text ── */
+.textWrap {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-top: 1px;
+}
+
+.label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    line-height: 1.3;
+}
+
+.hint {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    line-height: 1.4;
+}

package/components/ui/Toggle/Toggle.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { forwardRef, useState, useCallback } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Toggle.module.css";
+
+export interface ToggleProps {
+    label?: string;
+    hint?: string;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+}
+
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+    (
+        {
+            label,
+            hint,
+            size = "sm",
+            disabled = false,
+            checked: controlledChecked,
+            defaultChecked = false,
+            onChange,
+            className,
+        },
+        ref,
+    ) => {
+        const [internalChecked, setInternalChecked] = useState(defaultChecked);
+        const isControlled = controlledChecked !== undefined;
+        const checked = isControlled ? controlledChecked : internalChecked;
+
+        const handleToggle = useCallback(() => {
+            if (disabled) return;
+            const next = !checked;
+            if (!isControlled) setInternalChecked(next);
+            onChange?.(next);
+        }, [checked, disabled, isControlled, onChange]);
+
+        return (
+            <div className={cn(styles.wrapper, disabled && styles.wrapperDisabled, className)}>
+                <button
+                    ref={ref}
+                    type="button"
+                    role="switch"
+                    aria-checked={checked}
+                    disabled={disabled}
+                    onClick={handleToggle}
+                    className={cn(
+                        styles.track,
+                        styles[`track_${size}`],
+                        checked && styles.trackChecked,
+                    )}
+                >
+                    <span
+                        className={cn(
+                            styles.thumb,
+                            styles[`thumb_${size}`],
+                            checked && styles.thumbChecked,
+                        )}
+                    />
+                </button>
+                {(label || hint) && (
+                    <div className={styles.textWrap}>
+                        {label && <span className={styles.label}>{label}</span>}
+                        {hint && <span className={styles.hint}>{hint}</span>}
+                    </div>
+                )}
+            </div>
+        );
+    },
+);
+
+Toggle.displayName = "Toggle";

package/components/ui/Toggle/index.ts

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

package/components/ui/Tooltip/Tooltip.module.css

@@ -0,0 +1,95 @@
+.wrapper {
+    position: relative;
+    display: inline-flex;
+}
+
+.tooltip {
+    position: absolute;
+    z-index: 50;
+    pointer-events: none;
+    animation: fadeIn 0.15s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: scale(0.96); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+.content {
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    border-radius: var(--radius-md);
+    padding: 6px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    white-space: nowrap;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(12px);
+}
+
+/* ── Positions ── */
+.tooltip_top {
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.tooltip_bottom {
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.tooltip_left {
+    right: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.tooltip_right {
+    left: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+/* ── Arrow ── */
+.arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+}
+
+.arrow_top {
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    border-top: none;
+    border-left: none;
+}
+
+.arrow_bottom {
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    border-bottom: none;
+    border-right: none;
+}
+
+.arrow_left {
+    right: -5px;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+    border-bottom: none;
+    border-left: none;
+}
+
+.arrow_right {
+    left: -5px;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+    border-top: none;
+    border-right: none;
+}

package/components/ui/Tooltip/Tooltip.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Tooltip.module.css";
+
+export interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    position?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+    className?: string;
+}
+
+export function Tooltip({
+    content,
+    children,
+    position = "top",
+    delay = 200,
+    className,
+}: TooltipProps) {
+    const [visible, setVisible] = useState(false);
+    const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    const show = useCallback(() => {
+        timeoutRef.current = setTimeout(() => setVisible(true), delay);
+    }, [delay]);
+
+    const hide = useCallback(() => {
+        clearTimeout(timeoutRef.current);
+        setVisible(false);
+    }, []);
+
+    useEffect(() => {
+        return () => clearTimeout(timeoutRef.current);
+    }, []);
+
+    return (
+        <div
+            className={cn(styles.wrapper, className)}
+            onMouseEnter={show}
+            onMouseLeave={hide}
+            onFocus={show}
+            onBlur={hide}
+        >
+            {children}
+            {visible && (
+                <div className={cn(styles.tooltip, styles[`tooltip_${position}`])}>
+                    <div className={styles.content}>{content}</div>
+                    <div className={cn(styles.arrow, styles[`arrow_${position}`])} />
+                </div>
+            )}
+        </div>
+    );
+}

package/components/ui/Tooltip/index.ts

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

package/components/ui/VideoPlayer/VideoPlayer.module.css

@@ -0,0 +1,120 @@
+.player {
+    position: relative;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    background: #000;
+    aspect-ratio: 16 / 9;
+    cursor: pointer;
+}
+
+.player_sm { max-width: 400px; }
+.player_md { max-width: 640px; }
+.player_lg { max-width: 960px; }
+
+.video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+/* ── Thumbnail ── */
+.thumbnail {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.thumbnailImg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.playBtnLarge {
+    position: absolute;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.playBtnLarge:hover {
+    transform: scale(1.1);
+}
+
+/* ── Controls ── */
+.controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+    opacity: 0;
+    transition: opacity 0.25s;
+    z-index: 3;
+}
+
+.controlsVisible {
+    opacity: 1;
+}
+
+.controlBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: none;
+    color: #fff;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: background 0.15s;
+    flex-shrink: 0;
+}
+
+.controlBtn:hover {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.time {
+    font-size: 11px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    white-space: nowrap;
+    min-width: 32px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+}
+
+/* ── Progress ── */
+.progressTrack {
+    flex: 1;
+    height: 4px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.25);
+    cursor: pointer;
+    position: relative;
+    transition: height 0.15s;
+}
+
+.progressTrack:hover {
+    height: 6px;
+}
+
+.progressFill {
+    height: 100%;
+    border-radius: 999px;
+    background: var(--color-lime);
+    transition: width 0.1s linear;
+    pointer-events: none;
+}