omnira-ui 0.1.0

package/components/ui/SocialButton/SocialButton.module.css

@@ -0,0 +1,223 @@
+.socialButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    font-family: inherit;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    outline: none;
+    white-space: nowrap;
+    border: 1.5px solid transparent;
+    width: 100%;
+}
+
+.socialButton:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* --- Sizes --- */
+.sm {
+    height: 40px;
+    padding: 0 16px;
+    font-size: 13px;
+    border-radius: 10px;
+}
+
+.md {
+    height: 48px;
+    padding: 0 20px;
+    font-size: 14px;
+    border-radius: 12px;
+}
+
+.lg {
+    height: 56px;
+    padding: 0 24px;
+    font-size: 16px;
+    border-radius: 14px;
+}
+
+/* --- Icon --- */
+.icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.label {
+    display: inline-flex;
+    align-items: center;
+}
+
+/* --- Icon only --- */
+.iconOnly {
+    width: auto;
+    padding: 0;
+}
+
+.iconOnly.sm {
+    width: 40px;
+}
+
+.iconOnly.md {
+    width: 48px;
+}
+
+.iconOnly.lg {
+    width: 56px;
+}
+
+/* --- Theme: Brand --- */
+.theme-brand.social-google {
+    background: #ffffff;
+    color: #3c4043;
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.theme-brand.social-google:hover:not(:disabled) {
+    background: #f8f9fa;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.theme-brand.social-facebook {
+    background: #1877F2;
+    color: #ffffff;
+}
+
+.theme-brand.social-facebook:hover:not(:disabled) {
+    background: #166fe5;
+    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.4);
+}
+
+.theme-brand.social-apple {
+    background: #000000;
+    color: #ffffff;
+}
+
+.theme-brand.social-apple:hover:not(:disabled) {
+    background: #1a1a1a;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.theme-brand.social-github {
+    background: #24292f;
+    color: #ffffff;
+}
+
+.theme-brand.social-github:hover:not(:disabled) {
+    background: #32383f;
+    box-shadow: 0 2px 8px rgba(36, 41, 47, 0.4);
+}
+
+.theme-brand.social-x {
+    background: #000000;
+    color: #ffffff;
+}
+
+.theme-brand.social-x:hover:not(:disabled) {
+    background: #1a1a1a;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.theme-brand.social-linkedin {
+    background: #0A66C2;
+    color: #ffffff;
+}
+
+.theme-brand.social-linkedin:hover:not(:disabled) {
+    background: #095baf;
+    box-shadow: 0 2px 8px rgba(10, 102, 194, 0.4);
+}
+
+.theme-brand.social-microsoft {
+    background: #ffffff;
+    color: #3c4043;
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.theme-brand.social-microsoft:hover:not(:disabled) {
+    background: #f8f9fa;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.theme-brand.social-discord {
+    background: #5865F2;
+    color: #ffffff;
+}
+
+.theme-brand.social-discord:hover:not(:disabled) {
+    background: #4752c4;
+    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.4);
+}
+
+.theme-brand.social-slack {
+    background: #4A154B;
+    color: #ffffff;
+}
+
+.theme-brand.social-slack:hover:not(:disabled) {
+    background: #3b1139;
+    box-shadow: 0 2px 8px rgba(74, 21, 75, 0.4);
+}
+
+.theme-brand.social-figma {
+    background: #ffffff;
+    color: #3c4043;
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.theme-brand.social-figma:hover:not(:disabled) {
+    background: #f8f9fa;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.theme-brand.social-dribbble {
+    background: #EA4C89;
+    color: #ffffff;
+}
+
+.theme-brand.social-dribbble:hover:not(:disabled) {
+    background: #d63d7a;
+    box-shadow: 0 2px 8px rgba(234, 76, 137, 0.4);
+}
+
+.theme-brand.social-spotify {
+    background: #1DB954;
+    color: #ffffff;
+}
+
+.theme-brand.social-spotify:hover:not(:disabled) {
+    background: #1aa34a;
+    box-shadow: 0 2px 8px rgba(29, 185, 84, 0.4);
+}
+
+/* --- Theme: Color --- */
+.theme-color {
+    background: var(--color-bg-card);
+    border-color: var(--color-border-standard);
+    color: var(--color-text-primary);
+    backdrop-filter: var(--blur-standard);
+}
+
+.theme-color:hover:not(:disabled) {
+    background: var(--color-bg-elevated);
+    border-color: var(--color-border-medium);
+    box-shadow: var(--shadow-card-light);
+}
+
+/* --- Theme: Gray --- */
+.theme-gray {
+    background: var(--color-bg-secondary);
+    border-color: var(--color-border-subtle);
+    color: var(--color-text-secondary);
+}
+
+.theme-gray:hover:not(:disabled) {
+    background: var(--color-bg-hover);
+    border-color: var(--color-border-standard);
+    color: var(--color-text-primary);
+}

package/components/ui/SocialButton/SocialButton.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./SocialButton.module.css";
+
+export type SocialProvider =
+    | "google"
+    | "facebook"
+    | "apple"
+    | "github"
+    | "x"
+    | "linkedin"
+    | "microsoft"
+    | "discord"
+    | "slack"
+    | "figma"
+    | "dribbble"
+    | "spotify";
+
+export type SocialTheme = "brand" | "color" | "gray";
+
+export interface SocialButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    social: SocialProvider;
+    theme?: SocialTheme;
+    size?: "sm" | "md" | "lg";
+}
+
+export const SocialButton = forwardRef<HTMLButtonElement, SocialButtonProps>(
+    ({ social, theme = "brand", size = "md", className, children, ...props }, ref) => {
+        const iconOnly = !children;
+
+        return (
+            <button
+                ref={ref}
+                className={cn(
+                    styles.socialButton,
+                    styles[`theme-${theme}`],
+                    styles[`social-${social}`],
+                    styles[size],
+                    iconOnly ? styles.iconOnly : undefined,
+                    className
+                )}
+                {...props}
+            >
+                <span className={styles.icon}>
+                    <SocialIcon social={social} theme={theme} />
+                </span>
+                {children && <span className={styles.label}>{children}</span>}
+            </button>
+        );
+    }
+);
+
+SocialButton.displayName = "SocialButton";
+
+function SocialIcon({ social, theme }: { social: SocialProvider; theme: SocialTheme }) {
+    const size = 20;
+
+    switch (social) {
+        case "google":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    {theme === "gray" ? (
+                        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="currentColor" />
+                    ) : (
+                        <>
+                            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+                            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+                            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+                            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+                        </>
+                    )}
+                </svg>
+            );
+
+        case "facebook":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <path d="M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.875V12h3.328l-.532 3.47h-2.796v8.385C19.612 22.954 24 17.99 24 12z" fill={theme === "gray" ? "currentColor" : "#1877F2"} />
+                </svg>
+            );
+
+        case "apple":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" fill={theme === "gray" ? "currentColor" : theme === "brand" ? "#000000" : "#555555"} />
+                </svg>
+            );
+
+        case "github":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <path fillRule="evenodd" clipRule="evenodd" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" fill={theme === "gray" ? "currentColor" : theme === "brand" ? "#181717" : "#333333"} />
+                </svg>
+            );
+
+        case "x":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill={theme === "gray" ? "currentColor" : theme === "brand" ? "#000000" : "#1D9BF0"} />
+                </svg>
+            );
+
+        case "linkedin":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" fill={theme === "gray" ? "currentColor" : "#0A66C2"} />
+                </svg>
+            );
+
+        case "microsoft":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    {theme === "gray" ? (
+                        <>
+                            <rect x="1" y="1" width="10" height="10" fill="currentColor" opacity="0.9" />
+                            <rect x="13" y="1" width="10" height="10" fill="currentColor" opacity="0.7" />
+                            <rect x="1" y="13" width="10" height="10" fill="currentColor" opacity="0.6" />
+                            <rect x="13" y="13" width="10" height="10" fill="currentColor" opacity="0.5" />
+                        </>
+                    ) : (
+                        <>
+                            <rect x="1" y="1" width="10" height="10" fill="#F25022" />
+                            <rect x="13" y="1" width="10" height="10" fill="#7FBA00" />
+                            <rect x="1" y="13" width="10" height="10" fill="#00A4EF" />
+                            <rect x="13" y="13" width="10" height="10" fill="#FFB900" />
+                        </>
+                    )}
+                </svg>
+            );
+
+        case "discord":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" fill={theme === "gray" ? "currentColor" : "#5865F2"} />
+                </svg>
+            );
+
+        case "slack":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    {theme === "gray" ? (
+                        <path d="M5.042 15.165a2.528 2.528 0 01-2.52 2.523A2.528 2.528 0 010 15.165a2.527 2.527 0 012.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 012.521-2.52 2.527 2.527 0 012.521 2.52v6.313A2.528 2.528 0 018.834 24a2.528 2.528 0 01-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 01-2.521-2.52A2.528 2.528 0 018.834 0a2.528 2.528 0 012.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 012.521 2.521 2.528 2.528 0 01-2.521 2.521H2.522A2.528 2.528 0 010 8.834a2.528 2.528 0 012.522-2.521h6.312zm6.313 2.521a2.528 2.528 0 012.521-2.521A2.528 2.528 0 0124 8.834a2.528 2.528 0 01-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 01-2.521 2.521 2.528 2.528 0 01-2.522-2.521V2.522A2.528 2.528 0 0111.355 0a2.528 2.528 0 012.521 2.522v6.312zm-2.521 6.313a2.528 2.528 0 012.521 2.521 2.528 2.528 0 01-2.521 2.522 2.528 2.528 0 01-2.522-2.522v-2.521h2.522zm0-1.271a2.528 2.528 0 01-2.522-2.521 2.528 2.528 0 012.522-2.522h6.313A2.528 2.528 0 0124 15.165a2.528 2.528 0 01-2.522 2.521h-6.313z" fill="currentColor" />
+                    ) : (
+                        <path d="M5.042 15.165a2.528 2.528 0 01-2.52 2.523A2.528 2.528 0 010 15.165a2.527 2.527 0 012.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 012.521-2.52 2.527 2.527 0 012.521 2.52v6.313A2.528 2.528 0 018.834 24a2.528 2.528 0 01-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 01-2.521-2.52A2.528 2.528 0 018.834 0a2.528 2.528 0 012.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 012.521 2.521 2.528 2.528 0 01-2.521 2.521H2.522A2.528 2.528 0 010 8.834a2.528 2.528 0 012.522-2.521h6.312zm6.313 2.521a2.528 2.528 0 012.521-2.521A2.528 2.528 0 0124 8.834a2.528 2.528 0 01-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 01-2.521 2.521 2.528 2.528 0 01-2.522-2.521V2.522A2.528 2.528 0 0111.355 0a2.528 2.528 0 012.521 2.522v6.312zm-2.521 6.313a2.528 2.528 0 012.521 2.521 2.528 2.528 0 01-2.521 2.522 2.528 2.528 0 01-2.522-2.522v-2.521h2.522zm0-1.271a2.528 2.528 0 01-2.522-2.521 2.528 2.528 0 012.522-2.522h6.313A2.528 2.528 0 0124 15.165a2.528 2.528 0 01-2.522 2.521h-6.313z" fill="#E01E5A" />
+                    )}
+                </svg>
+            );
+
+        case "figma":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    {theme === "gray" ? (
+                        <path d="M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 8.943h-4.588c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.981zm-4.588-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.943H8.148zm4.588 15.057h-4.588c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.981zm-4.588-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V16.49H8.148zm11.704-3.527c0 2.476-2.014 4.49-4.49 4.49s-4.49-2.014-4.49-4.49 2.014-4.49 4.49-4.49 4.49 2.014 4.49 4.49zm-1.471 0c0-1.665-1.355-3.019-3.019-3.019s-3.019 1.355-3.019 3.019 1.355 3.019 3.019 3.019 3.019-1.355 3.019-3.019z" fill="currentColor" />
+                    ) : (
+                        <>
+                            <path d="M8.148 24c2.476 0 4.49-2.014 4.49-4.49v-4.49H8.148c-2.476 0-4.49 2.013-4.49 4.49 0 2.476 2.014 4.49 4.49 4.49z" fill="#0ACF83" />
+                            <path d="M3.657 10.962c0-2.476 2.014-4.49 4.49-4.49h4.49v8.981h-4.49c-2.476 0-4.49-2.014-4.49-4.49z" fill="#A259FF" />
+                            <path d="M3.657 1.49C3.657.014 5.671 0 8.148 0h4.49v8.981h-4.49c-2.476 0-4.49-2.014-4.49-4.49z" fill="#F24E1E" />
+                            <path d="M12.735 0h4.49c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49h-4.49V0z" fill="#FF7262" />
+                            <path d="M21.716 10.962c0 2.476-2.014 4.49-4.49 4.49s-4.49-2.014-4.49-4.49 2.014-4.49 4.49-4.49 4.49 2.014 4.49 4.49z" fill="#1ABCFE" />
+                        </>
+                    )}
+                </svg>
+            );
+
+        case "dribbble":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308a10.174 10.174 0 004.392-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.15 10.15 0 006.29 2.166c1.42 0 2.77-.29 4.006-.816zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702A10.15 10.15 0 0012 1.822c-.83 0-1.632.08-2.4.23zm10.335 3.483c-.218.29-1.91 2.493-5.724 4.04.24.49.47.985.68 1.486.075.18.15.36.22.53 3.41-.428 6.8.26 7.14.33-.02-2.42-.88-4.64-2.316-6.386z" fill={theme === "gray" ? "currentColor" : "#EA4C89"} />
+                </svg>
+            );
+
+        case "spotify":
+            return (
+                <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z" fill={theme === "gray" ? "currentColor" : "#1DB954"} />
+                </svg>
+            );
+
+        default:
+            return null;
+    }
+}

package/components/ui/SocialButton/index.ts

@@ -0,0 +1,2 @@
+export { SocialButton } from "./SocialButton";
+export type { SocialButtonProps, SocialProvider, SocialTheme } from "./SocialButton";

package/components/ui/Tag/Tag.module.css

@@ -0,0 +1,203 @@
+/* ── Tag Base ── */
+.tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-card);
+    border: 1.5px solid var(--color-border-standard);
+    color: var(--color-text-primary);
+    font-family: inherit;
+    white-space: nowrap;
+    transition: all 0.2s;
+    cursor: default;
+    user-select: none;
+}
+
+/* ── Sizes ── */
+.sm {
+    padding: 4px 10px;
+    font-size: 12px;
+    gap: 4px;
+}
+
+.md {
+    padding: 6px 12px;
+    font-size: 13px;
+    gap: 6px;
+}
+
+.lg {
+    padding: 8px 16px;
+    font-size: 14px;
+    gap: 8px;
+}
+
+/* ── Label ── */
+.label {
+    font-weight: 500;
+    line-height: 1;
+}
+
+/* ── Dot ── */
+.dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--color-lime);
+    flex-shrink: 0;
+}
+
+.sm .dot {
+    width: 5px;
+    height: 5px;
+}
+
+.lg .dot {
+    width: 7px;
+    height: 7px;
+}
+
+/* ── Avatar ── */
+.avatar {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+    border: 1px solid var(--color-border-subtle);
+}
+
+.sm .avatar {
+    width: 14px;
+    height: 14px;
+}
+
+.lg .avatar {
+    width: 22px;
+    height: 22px;
+}
+
+/* ── Count Badge ── */
+.count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-subtle);
+    font-size: 10px;
+    font-weight: 700;
+    color: var(--color-text-secondary);
+    line-height: 1;
+}
+
+.sm .count {
+    min-width: 14px;
+    height: 14px;
+    padding: 0 3px;
+    font-size: 9px;
+}
+
+.lg .count {
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    font-size: 11px;
+}
+
+/* ── Remove Button (X) ── */
+.removeBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0 -2px 0 0;
+    cursor: pointer;
+    color: var(--color-text-tertiary);
+    transition: color 0.2s;
+    flex-shrink: 0;
+    line-height: 1;
+}
+
+.removeBtn:hover {
+    color: var(--color-text-primary);
+}
+
+.removeBtn:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+}
+
+/* ── Checkbox ── */
+.checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    line-height: 1;
+}
+
+.checkable {
+    cursor: pointer;
+}
+
+.checkable:hover {
+    border-color: var(--color-border-medium);
+    background: var(--color-bg-hover);
+}
+
+.checked {
+    border-color: var(--color-border-lime-medium);
+    background: var(--color-bg-lime-subtle);
+}
+
+.checked:hover {
+    border-color: var(--color-border-lime-strong);
+    background: var(--color-bg-lime-medium);
+}
+
+/* ── Disabled ── */
+.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ── Tag Group ── */
+.tagGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.tagGroupLabel {
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    letter-spacing: 0.01em;
+}
+
+.labelsm {
+    font-size: 12px;
+}
+
+.labelmd {
+    font-size: 13px;
+}
+
+.labellg {
+    font-size: 14px;
+}
+
+/* ── Tag List ── */
+.tagList {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+}