@jameskyeong/uix 0.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 JamesKyeong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cli/index.js

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { confirmCreateDir, confirmOverwrite, printHeader, printSuccess, printThemeList, selectOutputPath, selectTheme, } from './prompts.js';
+import { themeNames } from './themes.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+function getThemeCssPath(themeName) {
+    return path.join(__dirname, 'themes', `${themeName}.css`);
+}
+function parseArgs(args) {
+    const result = { command: 'init' };
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if (arg === 'init' || arg === 'theme') {
+            result.command = arg;
+        }
+        else if (arg === '--auto') {
+            result.auto = true;
+        }
+        else if (arg === '--list') {
+            result.list = true;
+        }
+        else if (arg.startsWith('--theme=')) {
+            result.theme = arg.split('=')[1];
+        }
+        else if (arg.startsWith('--output=')) {
+            result.output = arg.split('=')[1];
+        }
+    }
+    return result;
+}
+async function writeThemeFile(themeName, outputPath) {
+    const themeCssPath = getThemeCssPath(themeName);
+    if (!fs.existsSync(themeCssPath)) {
+        console.error(`Theme "${themeName}" not found.`);
+        return false;
+    }
+    const outputDir = path.dirname(outputPath);
+    // Check if directory exists
+    if (!fs.existsSync(outputDir)) {
+        const shouldCreate = await confirmCreateDir(outputDir);
+        if (!shouldCreate) {
+            return false;
+        }
+        fs.mkdirSync(outputDir, { recursive: true });
+    }
+    // Check if file exists
+    if (fs.existsSync(outputPath)) {
+        const action = await confirmOverwrite(outputPath);
+        if (action === 'cancel' || action === null) {
+            console.log('Cancelled.');
+            return false;
+        }
+        if (action !== 'overwrite') {
+            outputPath = action;
+        }
+    }
+    // Copy theme file
+    const themeContent = fs.readFileSync(themeCssPath, 'utf-8');
+    fs.writeFileSync(outputPath, themeContent, 'utf-8');
+    return true;
+}
+async function runInteractive() {
+    printHeader();
+    const themeName = await selectTheme();
+    if (!themeName) {
+        console.log('Cancelled.');
+        return;
+    }
+    const outputPath = await selectOutputPath();
+    if (!outputPath) {
+        console.log('Cancelled.');
+        return;
+    }
+    const success = await writeThemeFile(themeName, outputPath);
+    if (success) {
+        printSuccess(themeName, outputPath);
+    }
+}
+async function runNonInteractive(theme, output) {
+    if (!themeNames.includes(theme)) {
+        console.error(`Invalid theme: ${theme}`);
+        console.error(`Available themes: ${themeNames.join(', ')}`);
+        process.exit(1);
+    }
+    const outputDir = path.dirname(output);
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+    }
+    const themeCssPath = getThemeCssPath(theme);
+    const themeContent = fs.readFileSync(themeCssPath, 'utf-8');
+    fs.writeFileSync(output, themeContent, 'utf-8');
+    printSuccess(theme, output);
+}
+async function main() {
+    const args = parseArgs(process.argv.slice(2));
+    // Handle --list flag
+    if (args.list) {
+        printThemeList();
+        return;
+    }
+    // Handle non-interactive mode
+    if (args.theme && args.output) {
+        await runNonInteractive(args.theme, args.output);
+        return;
+    }
+    // Handle auto mode (postinstall) - skip if not in a TTY
+    if (args.auto && !process.stdin.isTTY) {
+        console.log('@jameskyeong/uix installed.');
+        console.log('Run "npx @jameskyeong/uix init" to set up your theme.');
+        return;
+    }
+    // Run interactive mode
+    await runInteractive();
+}
+main().catch((error) => {
+    console.error('Error:', error.message);
+    process.exit(1);
+});

package/dist/cli/prompts.js

@@ -0,0 +1,122 @@
+import prompts from 'prompts';
+import { themeNames, themes } from './themes.js';
+// ANSI color codes
+const colors = {
+    reset: '\x1b[0m',
+    bold: '\x1b[1m',
+    dim: '\x1b[2m',
+    green: '\x1b[32m',
+    cyan: '\x1b[36m',
+    white: '\x1b[37m',
+};
+function hexToAnsi(hex) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `\x1b[38;2;${r};${g};${b}m`;
+}
+function colorBlock(hex) {
+    return `${hexToAnsi(hex)}\u25A0${colors.reset}`;
+}
+function formatThemeChoice(theme) {
+    const { prime, sub1, sub2 } = theme.colors;
+    return `${theme.displayName.padEnd(10)} ${colorBlock(prime)} ${colorBlock(sub1)} ${colorBlock(sub2)}  ${colors.dim}${theme.description}${colors.reset}`;
+}
+export async function selectTheme() {
+    const choices = themeNames.map((name) => ({
+        title: formatThemeChoice(themes[name]),
+        value: name,
+    }));
+    const response = await prompts({
+        type: 'select',
+        name: 'theme',
+        message: 'Select a theme',
+        choices,
+        initial: 0,
+    });
+    return response.theme ?? null;
+}
+export async function selectOutputPath() {
+    const defaultPaths = ['./src/styles/uix-theme.css', './src/uix-theme.css', './uix-theme.css'];
+    const response = await prompts({
+        type: 'select',
+        name: 'path',
+        message: 'Theme file output path',
+        choices: [
+            ...defaultPaths.map((p) => ({ title: p, value: p })),
+            { title: 'Custom path...', value: '__custom__' },
+        ],
+        initial: 0,
+    });
+    if (response.path === '__custom__') {
+        const customResponse = await prompts({
+            type: 'text',
+            name: 'customPath',
+            message: 'Enter custom path',
+            initial: './uix-theme.css',
+        });
+        return customResponse.customPath ?? null;
+    }
+    return response.path ?? null;
+}
+export async function confirmOverwrite(filePath) {
+    const response = await prompts({
+        type: 'select',
+        name: 'action',
+        message: `${filePath} already exists`,
+        choices: [
+            { title: 'Overwrite', value: 'overwrite' },
+            { title: 'Save with different name', value: 'rename' },
+            { title: 'Cancel', value: 'cancel' },
+        ],
+        initial: 0,
+    });
+    if (response.action === 'rename') {
+        const renameResponse = await prompts({
+            type: 'text',
+            name: 'newPath',
+            message: 'Enter new file path',
+            initial: filePath.replace('.css', '-new.css'),
+        });
+        return renameResponse.newPath ?? null;
+    }
+    return response.action ?? null;
+}
+export async function confirmCreateDir(dirPath) {
+    const response = await prompts({
+        type: 'select',
+        name: 'action',
+        message: `Directory ${dirPath} does not exist`,
+        choices: [
+            { title: 'Create directory and continue', value: 'create' },
+            { title: 'Choose different path', value: 'different' },
+            { title: 'Cancel', value: 'cancel' },
+        ],
+        initial: 0,
+    });
+    return response.action === 'create';
+}
+export function printSuccess(_themeName, outputPath) {
+    console.log();
+    console.log(`${colors.green}\u2713${colors.reset} Theme file created successfully!`);
+    console.log();
+    console.log(`${colors.dim}Add the following imports to your project:${colors.reset}`);
+    console.log();
+    console.log(`  ${colors.cyan}import "@jameskyeong/uix/styles.css";${colors.reset}`);
+    console.log(`  ${colors.cyan}import "${outputPath}";${colors.reset}`);
+    console.log();
+}
+export function printThemeList() {
+    console.log();
+    console.log(`${colors.bold}Available themes:${colors.reset}`);
+    console.log();
+    for (const name of themeNames) {
+        console.log(`  ${formatThemeChoice(themes[name])}`);
+    }
+    console.log();
+}
+export function printHeader() {
+    console.log();
+    console.log(`${colors.bold}@jameskyeong/uix${colors.reset} Theme Setup`);
+    console.log();
+}

package/dist/cli/themes/blacksun.css

@@ -0,0 +1,44 @@
+/* @jameskyeong/uix Theme: BlackSun */
+/* Vibrant and sophisticated with coral pink accent */
+
+:root {
+  /* Prime - Coral Pink */
+  --uix-prime-100: #ffd4d4;
+  --uix-prime-200: #ff9f9f;
+  --uix-prime-300: #ff6b7a;
+  --uix-prime-400: #e85566;
+  --uix-prime-500: #c94455;
+
+  /* Sub1 - Navy */
+  --uix-sub1-100: #4a5a7a;
+  --uix-sub1-200: #344263;
+  --uix-sub1-300: #1e2a4a;
+  --uix-sub1-400: #141d35;
+  --uix-sub1-500: #0a1020;
+
+  /* Sub2 - Mint */
+  --uix-sub2-100: #c8f5eb;
+  --uix-sub2-200: #9eebd8;
+  --uix-sub2-300: #7dd3c0;
+  --uix-sub2-400: #5bbaa8;
+  --uix-sub2-500: #3d9a8a;
+}
+
+.dark {
+  /* Dark mode surface - Dark Navy */
+  --uix-black-100: #3a4a6a;
+  --uix-black-200: #2a3a5a;
+  --uix-black-300: #1e2a4a;
+  --uix-black-400: #141d35;
+  --uix-black-500: #0a1020;
+
+  --uix-surface-100: var(--uix-black-300);
+  --uix-surface-200: var(--uix-black-400);
+  --uix-surface-300: var(--uix-black-400);
+  --uix-surface-400: var(--uix-black-500);
+  --uix-surface-500: var(--uix-black-500);
+
+  --uix-border-100: var(--uix-black-400);
+  --uix-border-200: var(--uix-black-300);
+  --uix-border-300: var(--uix-black-200);
+}

package/dist/cli/themes/emerald.css

@@ -0,0 +1,44 @@
+/* @jameskyeong/uix Theme: Emerald */
+/* Luxurious and natural jewel-like feel */
+
+:root {
+  /* Prime - Emerald */
+  --uix-prime-100: #a8e6cf;
+  --uix-prime-200: #7cd4b8;
+  --uix-prime-300: #50c4a1;
+  --uix-prime-400: #3aa888;
+  --uix-prime-500: #2d8f72;
+
+  /* Sub1 - Gold */
+  --uix-sub1-100: #ffe4a0;
+  --uix-sub1-200: #f5d070;
+  --uix-sub1-300: #e5b84c;
+  --uix-sub1-400: #d4a43a;
+  --uix-sub1-500: #b8922e;
+
+  /* Sub2 - Deep Teal */
+  --uix-sub2-100: #7ab8a8;
+  --uix-sub2-200: #5a9a8a;
+  --uix-sub2-300: #2d6e5e;
+  --uix-sub2-400: #225a4c;
+  --uix-sub2-500: #1a4a3e;
+}
+
+.dark {
+  /* Dark mode surface - Cool Gray */
+  --uix-black-100: #3a3c42;
+  --uix-black-200: #2a2c32;
+  --uix-black-300: #1a1c20;
+  --uix-black-400: #121418;
+  --uix-black-500: #0a0c0e;
+
+  --uix-surface-100: var(--uix-black-300);
+  --uix-surface-200: var(--uix-black-400);
+  --uix-surface-300: var(--uix-black-400);
+  --uix-surface-400: var(--uix-black-500);
+  --uix-surface-500: var(--uix-black-500);
+
+  --uix-border-100: var(--uix-black-400);
+  --uix-border-200: var(--uix-black-300);
+  --uix-border-300: var(--uix-black-200);
+}

package/dist/cli/themes/jsk.css

@@ -0,0 +1,44 @@
+/* @jameskyeong/uix Theme: JSK */
+/* Warm and soft feel with lavender blue accent */
+
+:root {
+  /* Prime - Lavender Blue */
+  --uix-prime-100: #c4c4eb;
+  --uix-prime-200: #a3a3e0;
+  --uix-prime-300: #8383d6;
+  --uix-prime-400: #6363cb;
+  --uix-prime-500: #4a4ab0;
+
+  /* Sub1 - Coral */
+  --uix-sub1-100: #f5c4b8;
+  --uix-sub1-200: #f0a08b;
+  --uix-sub1-300: #e87c5d;
+  --uix-sub1-400: #d9593a;
+  --uix-sub1-500: #b84526;
+
+  /* Sub2 - Beige */
+  --uix-sub2-100: #f5ebe0;
+  --uix-sub2-200: #e6d5c3;
+  --uix-sub2-300: #d4bc9a;
+  --uix-sub2-400: #c4a67a;
+  --uix-sub2-500: #a8895e;
+}
+
+.dark {
+  /* Dark mode surface - Warm Gray */
+  --uix-black-100: #4a4644;
+  --uix-black-200: #393634;
+  --uix-black-300: #282524;
+  --uix-black-400: #1a1817;
+  --uix-black-500: #0d0c0b;
+
+  --uix-surface-100: var(--uix-black-300);
+  --uix-surface-200: var(--uix-black-400);
+  --uix-surface-300: var(--uix-black-400);
+  --uix-surface-400: var(--uix-black-500);
+  --uix-surface-500: var(--uix-black-500);
+
+  --uix-border-100: var(--uix-black-400);
+  --uix-border-200: var(--uix-black-300);
+  --uix-border-300: var(--uix-black-200);
+}

package/dist/cli/themes.js

@@ -0,0 +1,33 @@
+export const themes = {
+    jsk: {
+        name: 'jsk',
+        displayName: 'JSK',
+        description: 'Lavender Blue + Warm Gray',
+        colors: {
+            prime: '#8383d6',
+            sub1: '#e87c5d',
+            sub2: '#d4bc9a',
+        },
+    },
+    blacksun: {
+        name: 'blacksun',
+        displayName: 'BlackSun',
+        description: 'Coral Pink + Dark Navy',
+        colors: {
+            prime: '#ff6b7a',
+            sub1: '#1e2a4a',
+            sub2: '#7dd3c0',
+        },
+    },
+    emerald: {
+        name: 'emerald',
+        displayName: 'Emerald',
+        description: 'Emerald + Cool Gray',
+        colors: {
+            prime: '#50c4a1',
+            sub1: '#e5b84c',
+            sub2: '#2d6e5e',
+        },
+    },
+};
+export const themeNames = Object.keys(themes);

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),m=require("motion/react"),n=require("react"),v=require("clsx"),re=require("tailwind-merge"),y=require("lucide-react"),se=require("shiki"),ie=require("react-dom");function c(...e){return re.twMerge(v.clsx(e))}const w=n.forwardRef(({className:e,variant:t="default",size:r="sm",children:s,...o},a)=>{const l=t==="default"?"uix-convex-colored-sm":"uix-convex-sm",u={default:"bg-uix-prime-300 backdrop-blur-sm text-uix-white-100",secondary:"bg-uix-surface-300/80 backdrop-blur-sm text-uix-text-100",outline:"border border-uix-border-200 bg-uix-surface-100/50 backdrop-blur-sm text-uix-text-300"},x={sm:"px-2 py-0.5 text-xs",md:"px-2.5 py-1 text-sm"},{onDrag:g,onDragStart:d,onDragEnd:p,...b}=o;return i.jsx(m.motion.span,{ref:a,className:c("inline-flex items-center rounded-xl font-medium",l,u[t],x[r],e),whileHover:{scale:1.05},whileTap:{scale:.97},transition:{type:"tween",duration:.1,ease:"linear"},...b,children:s})});w.displayName="Badge";const j=n.forwardRef(({className:e,variant:t,color:r="prime",size:s="md",children:o,...a},l)=>{const x=`inline-flex items-center justify-center rounded-full font-semibold transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-uix-prime-300 disabled:pointer-events-none disabled:opacity-50 cursor-pointer backdrop-blur-sm ${t==="filled"?"uix-convex-colored-sm":"uix-convex-sm"}`,g="bg-uix-surface-200/70 text-uix-text-100 hover:bg-uix-surface-300/80",d={prime:"bg-uix-prime-300 text-uix-white-100 hover:bg-uix-prime-400",sub1:"bg-uix-sub1-300 text-uix-white-100 hover:bg-uix-sub1-400",sub2:"bg-uix-sub2-300 text-uix-black-300 hover:bg-uix-sub2-400"},p={prime:"border border-uix-prime-300/50 text-uix-prime-300 bg-uix-surface-100/20 hover:bg-uix-prime-300 hover:text-uix-white-100 hover:border-transparent",sub1:"border border-uix-sub1-300/50 text-uix-sub1-300 bg-uix-surface-100/20 hover:bg-uix-sub1-300 hover:text-uix-white-100 hover:border-transparent",sub2:"border border-uix-sub2-300/50 text-uix-sub2-400 bg-uix-surface-100/20 hover:bg-uix-sub2-300 hover:text-uix-black-300 hover:border-transparent"},b={prime:"bg-transparent text-uix-prime-300 hover:bg-uix-prime-100/15",sub1:"bg-transparent text-uix-sub1-300 hover:bg-uix-sub1-100/15",sub2:"bg-transparent text-uix-sub2-400 hover:bg-uix-sub2-100/15"},f={filled:d[r],outline:p[r],ghost:b[r]},h={sm:"px-4 py-2 text-sm",md:"px-6 py-3 text-base",lg:"px-8 py-4 text-lg"},te=t?f[t]:g;return i.jsx(m.motion.button,{ref:l,className:c(x,te,h[s],e),whileHover:{scale:1.03,y:-1},whileTap:{scale:.96},transition:{duration:.06,ease:[0,0,1,1]},...a,children:o})});j.displayName="Button";const T=n.forwardRef(({className:e,children:t,hover:r=!0,accentColor:s="none",accentPosition:o="none",...a},l)=>{const u={prime:"bg-uix-prime-300",sub1:"bg-uix-sub1-300",sub2:"bg-uix-sub2-300",none:""};return i.jsxs(m.motion.div,{ref:l,className:c("relative bg-uix-surface-100/80 backdrop-blur-xl backdrop-saturate-150 uix-glass-border rounded-[2rem] overflow-hidden uix-convex",e),initial:!1,whileHover:r?{y:-4,scale:1.01}:void 0,transition:{type:"tween",duration:.15,ease:"linear"},...a,children:[o==="top"&&s!=="none"&&i.jsx("div",{className:c("absolute top-0 left-0 right-0 h-1",u[s])}),o==="left"&&s!=="none"&&i.jsx("div",{className:c("absolute top-0 left-0 bottom-0 w-1",u[s])}),t]})});T.displayName="Card";const C=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("div",{ref:s,className:c("p-6 xl:p-8",e),...r,children:t}));C.displayName="CardContent";const k=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("div",{ref:s,className:c("flex items-center gap-4 mb-4",e),...r,children:t}));k.displayName="CardHeader";const R=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("h3",{ref:s,className:c("text-xl xl:text-2xl font-bold text-uix-text-100",e),...r,children:t}));R.displayName="CardTitle";const E=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("p",{ref:s,className:c("text-uix-gray-200 leading-relaxed",e),...r,children:t}));E.displayName="CardDescription";const D=n.forwardRef(({className:e,code:t,language:r="tsx",showLineNumbers:s=!1,...o},a)=>{const[l,u]=n.useState(!1),[x,g]=n.useState("");n.useEffect(()=>{(async()=>{const b=await se.codeToHtml(t.trim(),{lang:r,theme:"github-dark"});g(b)})()},[t,r]);const d=async()=>{await navigator.clipboard.writeText(t.trim()),u(!0),setTimeout(()=>u(!1),2e3)};return i.jsxs("div",{ref:a,className:c("relative rounded-2xl bg-uix-black-400 overflow-hidden uix-convex",e),...o,children:[i.jsxs("div",{className:"flex items-center justify-between px-4 py-2 border-b border-uix-black-200",children:[i.jsx(w,{variant:"secondary",size:"sm",children:r}),i.jsx("button",{type:"button",onClick:d,className:"p-1.5 rounded-xl hover:bg-uix-black-200 transition-colors","aria-label":"Copy code",children:l?i.jsx(y.Check,{size:14,className:"text-green-400"}):i.jsx(y.Copy,{size:14,className:"text-uix-gray-100"})})]}),i.jsx("div",{className:c("p-4 overflow-x-auto text-sm","[&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0","[&_code]:!bg-transparent",s&&"[&_.line]:before:content-[counter(line)] [&_.line]:before:counter-increment-[line] [&_.line]:before:mr-4 [&_.line]:before:text-uix-gray-300"),dangerouslySetInnerHTML:{__html:x}})]})});D.displayName="CodeBlock";const ne={prime:"var(--uix-prime-300)",sub1:"var(--uix-sub1-300)",sub2:"var(--uix-sub2-300)"},oe={prime:"bg-gradient-to-br from-uix-prime-400 via-uix-prime-300 to-uix-prime-400",sub1:"bg-gradient-to-br from-uix-sub1-400 via-uix-sub1-300 to-uix-sub1-400",sub2:"bg-gradient-to-br from-uix-sub2-400 via-uix-sub2-300 to-uix-sub2-400"};function ae({children:e,className:t="",color:r="prime",gradient:s=!1,delay:o=0,charDelay:a=.04}){const l=n.useRef(null),u=m.useInView(l,{once:!0,margin:"-50px"}),[x,g]=n.useState(!1),d=1,p=e.length,b=d+o+p*a+.25;return n.useEffect(()=>{if(s&&u&&!x){const f=setTimeout(()=>{g(!0)},b*1e3);return()=>clearTimeout(f)}},[s,u,x,b]),s&&x?i.jsx("span",{ref:l,className:`inline-block bg-clip-text text-transparent ${oe[r]} ${t}`,children:e}):i.jsx("span",{ref:l,className:`inline-block ${t}`,children:e.split("").map((f,h)=>i.jsx(m.motion.span,{className:"inline-block",style:{color:"var(--uix-text-100)"},animate:u?{color:ne[r]}:{},transition:{duration:.25,delay:d+o+h*a,ease:[.1,.1,.9,.9]},children:f===" "?" ":f},h))})}const L=n.createContext(null);function S(){const e=n.useContext(L);if(!e)throw new Error("Dropdown components must be used within a Dropdown");return e}function le({children:e,open:t,onOpenChange:r,className:s,...o}){const[a,l]=n.useState(!1),u=n.useRef(null),x=t??a,g=d=>{l(d),r==null||r(d)};return i.jsx(L.Provider,{value:{open:x,setOpen:g,triggerRef:u},children:i.jsx("div",{className:v.clsx("relative inline-block",s),...o,children:e})})}function ue({children:e,className:t,onClick:r,...s}){const{open:o,setOpen:a,triggerRef:l}=S();return i.jsxs("button",{ref:l,type:"button",className:v.clsx("inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-sm font-medium","uix-glass uix-glass-border uix-convex-sm","text-uix-text-200 hover:text-uix-text-100 transition-colors",t),onClick:u=>{a(!o),r==null||r(u)},"aria-expanded":o,"aria-haspopup":"true",...s,children:[e,i.jsx("svg",{className:v.clsx("w-3.5 h-3.5 transition-transform duration-200",o&&"rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:i.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19 9l-7 7-7-7"})})]})}function ce({children:e,className:t,align:r="start"}){const{open:s,setOpen:o,triggerRef:a}=S(),l=n.useRef(null),[u,x]=n.useState({top:0,left:0});n.useLayoutEffect(()=>{if(!s||!a.current)return;const d=()=>{var f;const p=(f=a.current)==null?void 0:f.getBoundingClientRect();if(!p)return;let b=p.left;r==="center"?b=p.left+p.width/2:r==="end"&&(b=p.right),x({top:p.bottom+8,left:b})};return d(),window.addEventListener("scroll",d,!0),window.addEventListener("resize",d),()=>{window.removeEventListener("scroll",d,!0),window.removeEventListener("resize",d)}},[s,a,r]),n.useEffect(()=>{if(!s)return;const d=b=>{l.current&&!l.current.contains(b.target)&&a.current&&!a.current.contains(b.target)&&o(!1)},p=b=>{var f;b.key==="Escape"&&(o(!1),(f=a.current)==null||f.focus())};return document.addEventListener("mousedown",d),document.addEventListener("keydown",p),()=>{document.removeEventListener("mousedown",d),document.removeEventListener("keydown",p)}},[s,o,a]);const g={start:{transform:"translateX(0)"},center:{transform:"translateX(-50%)"},end:{transform:"translateX(-100%)"}};return typeof document>"u"?null:ie.createPortal(i.jsx(m.AnimatePresence,{children:s&&i.jsx(m.motion.div,{ref:l,initial:{opacity:0,y:-8},animate:{opacity:1,y:0},exit:{opacity:0,y:-8},transition:{type:"spring",stiffness:400,damping:25,mass:.8},className:v.clsx("fixed z-50 min-w-[180px]","uix-glass uix-glass-border uix-convex uix-glass-noise rounded-2xl","p-1.5 shadow-xl",t),style:{top:u.top,left:u.left,...g[r]},role:"menu",children:e})}),document.body)}function de({children:e,className:t,disabled:r,onClick:s,...o}){const{setOpen:a}=S();return i.jsx("button",{type:"button",role:"menuitem",disabled:r,className:v.clsx("w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-left","transition-colors duration-100",r?"text-uix-text-300 cursor-not-allowed":"text-uix-text-200 hover:text-uix-text-100 hover:bg-uix-surface-300/60",t),onClick:l=>{r||(s==null||s(l),a(!1))},...o,children:e})}function xe({className:e,...t}){return i.jsx("hr",{className:v.clsx("my-1.5 h-px border-0 bg-uix-border-100",e),...t})}const N=n.forwardRef(({className:e,orientation:t="vertical",children:r,...s},o)=>{const a={vertical:"overflow-y-auto overflow-x-hidden",horizontal:"overflow-x-auto overflow-y-hidden",both:"overflow-auto"};return i.jsx("div",{ref:o,className:c("relative",a[t],"[&::-webkit-scrollbar]:w-2","[&::-webkit-scrollbar-track]:bg-transparent","[&::-webkit-scrollbar-thumb]:bg-uix-gray-300/50","[&::-webkit-scrollbar-thumb]:rounded-full","[&::-webkit-scrollbar-thumb]:hover:bg-uix-gray-300",e),...s,children:r})});N.displayName="ScrollArea";function be({threshold:e=500,className:t}){const[r,s]=n.useState(!1);n.useEffect(()=>{const a=()=>{s(window.scrollY>e)};return window.addEventListener("scroll",a,{passive:!0}),()=>window.removeEventListener("scroll",a)},[e]);const o=()=>{window.scrollTo({top:0,behavior:"smooth"})};return i.jsx(m.AnimatePresence,{children:r&&i.jsx(m.motion.button,{initial:{opacity:0,scale:.5,y:20},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.5,y:20},whileHover:{scale:1.1,y:-2},whileTap:{scale:.9},transition:{default:{type:"spring",stiffness:300,damping:20,mass:.8},scale:{duration:.06,ease:[0,0,1,1]}},onClick:o,className:c("fixed bottom-6 right-6 z-50 p-3 rounded-full bg-uix-prime-300 backdrop-blur-sm text-uix-white-100 hover:bg-uix-prime-400 cursor-pointer uix-convex-colored",t),"aria-label":"Scroll to top",children:i.jsx(y.ChevronUp,{size:24})})})}const H=n.forwardRef(({className:e,children:t,variant:r="default",container:s=!0,animate:o=!0,id:a,...l},u)=>{const x=n.useRef(null),g=m.useInView(x,{once:!0,margin:"-100px"}),d="backdrop-blur-xl backdrop-saturate-150 uix-glass-border uix-convex",p={default:`bg-uix-surface-200/50 ${d}`,secondary:`bg-uix-surface-300/50 ${d}`,accent:`bg-uix-prime-300/60 ${d} text-uix-white-100`},b=s?i.jsx("div",{className:"max-w-4xl mx-auto px-6 xl:px-12",children:t}):t;return i.jsx("section",{ref:f=>{x.current=f,typeof u=="function"?u(f):u&&(u.current=f)},id:a,className:c("relative py-16 xl:py-24 rounded-[2.5rem]",p[r],e),...l,children:o?i.jsx(m.motion.div,{initial:{opacity:0,y:40},animate:g?{opacity:1,y:0}:{opacity:0,y:40},transition:{type:"spring",stiffness:200,damping:25,mass:1},children:b}):b})});H.displayName="Section";const I=n.forwardRef(({className:e,children:t,subtitle:r,...s},o)=>i.jsxs("div",{className:"text-center mb-14 xl:mb-20",children:[i.jsx("h2",{ref:o,className:c("text-4xl xl:text-6xl font-bold text-uix-text-100 mb-6 tracking-tight",e),...s,children:t}),r&&i.jsx("p",{className:"text-xl xl:text-2xl text-uix-gray-200 max-w-3xl mx-auto leading-relaxed",children:r})]}));I.displayName="SectionTitle";const P=n.createContext(null),me=()=>{const e=n.useContext(P);if(!e)throw new Error("Sheet components must be used within a Sheet provider");return e},z=({open:e,onOpenChange:t,children:r})=>(n.useEffect(()=>{const s=o=>{o.key==="Escape"&&e&&t(!1)};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[e,t]),n.useEffect(()=>(e?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[e]),i.jsx(P.Provider,{value:{open:e,onOpenChange:t},children:r}));z.displayName="Sheet";const B=n.forwardRef(({className:e,side:t="left",children:r},s)=>{const{open:o,onOpenChange:a}=me(),l={left:{initial:{x:"-100%"},animate:{x:0},exit:{x:"-100%"}},right:{initial:{x:"100%"},animate:{x:0},exit:{x:"100%"}}},u={left:"left-0",right:"right-0"};return i.jsx(m.AnimatePresence,{children:o&&i.jsxs(i.Fragment,{children:[i.jsx(m.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},className:"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",onClick:()=>a(!1)}),i.jsx(m.motion.div,{ref:s,initial:l[t].initial,animate:l[t].animate,exit:l[t].exit,transition:{type:"spring",damping:25,stiffness:300},className:c("fixed top-0 z-50 h-full w-72 bg-uix-surface-100/90 backdrop-blur-xl backdrop-saturate-150 border-r border-black/[0.3] dark:border-white/[0.03] rounded-r-3xl uix-convex-lg",u[t],e),children:r})]})})});B.displayName="SheetContent";const M=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("div",{ref:s,className:c("flex flex-col gap-2 p-6 border-b border-uix-border-100",e),...r,children:t}));M.displayName="SheetHeader";const A=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("h2",{ref:s,className:c("text-lg font-semibold text-uix-text-100",e),...r,children:t}));A.displayName="SheetTitle";const pe="relative uix-glass uix-glass-border uix-convex uix-glass-noise rounded-3xl",V=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("aside",{ref:s,className:c("hidden xl:flex flex-col w-60 h-full",pe,e),...r,children:t}));V.displayName="Sidebar";const _=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("div",{ref:s,className:c("flex flex-col gap-1 p-6",e),...r,children:t}));_.displayName="SidebarHeader";const $=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx(N,{ref:s,className:c("flex-1 p-4",e),...r,children:t}));$.displayName="SidebarContent";const q=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("div",{ref:s,className:c("mb-6",e),...r,children:t}));q.displayName="SidebarGroup";const G=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("div",{ref:s,className:c("px-3 mb-3 text-xs font-semibold uppercase tracking-widest text-uix-sub1-300/80",e),...r,children:t}));G.displayName="SidebarGroupLabel";const O=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("ul",{ref:s,className:c("space-y-1",e),...r,children:t}));O.displayName="SidebarMenu";const X=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("li",{ref:s,className:c("",e),...r,children:t}));X.displayName="SidebarMenuItem";const F=n.forwardRef(({className:e,isActive:t=!1,children:r,...s},o)=>{const{onDrag:a,onDragStart:l,onDragEnd:u,...x}=s;return i.jsxs(m.motion.button,{ref:o,type:"button",className:c("relative flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-base font-medium","hover:bg-uix-surface-300/50 hover:text-uix-text-100",t?"text-uix-prime-300 bg-uix-prime-100/15":"text-uix-text-300",e),whileHover:{x:4,scale:1.01},whileTap:{scale:.97},transition:{duration:.08,ease:[0,0,1,1]},...x,children:[t&&i.jsx(m.motion.span,{className:"absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-uix-prime-300 rounded-r-full",layoutId:"sidebar-active-indicator",transition:{type:"spring",stiffness:300,damping:20,mass:.8}}),r]})});F.displayName="SidebarMenuButton";const U=n.forwardRef(({className:e,variant:t="default",rounded:r="3xl",children:s,...o},a)=>{const l="relative uix-glass uix-glass-border uix-convex uix-glass-noise",u={default:"",subtle:"uix-convex-subtle",strong:"uix-convex-lg"},x={none:"rounded-none",sm:"rounded-lg",md:"rounded-xl",lg:"rounded-2xl",xl:"rounded-[1.5rem]","2xl":"rounded-[2rem]","3xl":"rounded-3xl",full:"rounded-full"};return i.jsx("div",{ref:a,className:c(l,u[t],x[r],e),...o,children:s})});U.displayName="Surface";const W=n.createContext(null),Y=()=>{const e=n.useContext(W);if(!e)throw new Error("Tabs components must be used within a Tabs provider");return e},J=n.forwardRef(({className:e,defaultValue:t,children:r,...s},o)=>{const[a,l]=n.useState(t),u=n.useId();return i.jsx(W.Provider,{value:{activeTab:a,setActiveTab:l,tabsId:u},children:i.jsx("div",{ref:o,className:c("w-full",e),...s,children:r})})});J.displayName="Tabs";const K=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("div",{ref:s,className:c("inline-flex items-center gap-1 rounded-2xl bg-uix-surface-300/50 backdrop-blur-xl backdrop-saturate-150 uix-glass-border p-1.5 uix-convex",e),...r,children:t}));K.displayName="TabsList";const Q=n.forwardRef(({className:e,value:t,children:r,...s},o)=>{const{activeTab:a,setActiveTab:l,tabsId:u}=Y(),x=a===t,{onDrag:g,onDragStart:d,onDragEnd:p,...b}=s;return i.jsxs(m.motion.button,{ref:o,type:"button",onClick:()=>l(t),className:c("relative inline-flex items-center justify-center px-4 py-2 text-base font-medium rounded-xl","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-uix-prime-300",x?"text-uix-text-100":"text-uix-text-300 hover:text-uix-text-100",e),whileHover:{scale:1.02},whileTap:{scale:.96},transition:{duration:.06,ease:[0,0,1,1]},...b,children:[x&&i.jsx(m.motion.span,{layoutId:`tabs-indicator-${u}`,className:"absolute inset-0 bg-uix-surface-100 rounded-xl uix-convex-sm",transition:{type:"spring",stiffness:300,damping:20,mass:.8}}),i.jsx("span",{className:"relative z-10",children:r})]})});Q.displayName="TabsTrigger";const Z=n.forwardRef(({className:e,children:t,...r},s)=>i.jsx("div",{ref:s,className:c("relative mt-4",e),...r,children:i.jsx("div",{className:"grid [&>*]:col-start-1 [&>*]:row-start-1",children:t})}));Z.displayName="TabsPanels";const ee=n.forwardRef(({className:e,value:t,children:r,...s},o)=>{const{activeTab:a}=Y(),l=a===t;return i.jsx(m.motion.div,{ref:o,className:c(e),initial:!1,animate:{opacity:l?1:0,scale:l?1:.98,y:l?0:8,visibility:l?"visible":"hidden"},transition:{type:"spring",stiffness:400,damping:25,mass:.8},"aria-hidden":!l,children:i.jsx("div",{...s,children:r})})});ee.displayName="TabsContent";exports.Badge=w;exports.Button=j;exports.Card=T;exports.CardContent=C;exports.CardDescription=E;exports.CardHeader=k;exports.CardTitle=R;exports.CodeBlock=D;exports.ColorSwipeText=ae;exports.Dropdown=le;exports.DropdownContent=ce;exports.DropdownItem=de;exports.DropdownSeparator=xe;exports.DropdownTrigger=ue;exports.ScrollArea=N;exports.ScrollToTop=be;exports.Section=H;exports.SectionTitle=I;exports.Sheet=z;exports.SheetContent=B;exports.SheetHeader=M;exports.SheetTitle=A;exports.Sidebar=V;exports.SidebarContent=$;exports.SidebarGroup=q;exports.SidebarGroupLabel=G;exports.SidebarHeader=_;exports.SidebarMenu=O;exports.SidebarMenuButton=F;exports.SidebarMenuItem=X;exports.Surface=U;exports.Tabs=J;exports.TabsContent=ee;exports.TabsList=K;exports.TabsPanels=Z;exports.TabsTrigger=Q;exports.cn=c;