luaniverse 4.0.40

package/dist/styles.css

@@ -0,0 +1,363 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Onest:wght@400;500;600;700&display=swap') layer(base);
+
+@import 'tailwindcss' prefix(lua);
+
+@theme {
+  --font-sans: Inter, sans-serif;
+  --font-heading: Onest, sans-serif;
+  --font-onest: Onest, sans-serif;
+
+  --spacing: 4px;
+
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+
+  --tracking-1: 0px;
+  --tracking-2: 0.025em;
+  --tracking-3: 0.05em;
+  --tracking-4: 0.1em;
+
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-primary-hover: hsl(var(--primary-hover));
+  --color-primary-active: hsl(var(--primary-active));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-secondary-hover: hsl(var(--secondary-hover));
+  --color-secondary-active: hsl(var(--secondary-active));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-destructive-hover: hsl(var(--destructive-hover));
+  --color-destructive-active: hsl(var(--destructive-active));
+  --color-black: #000000;
+  --color-black-hover: #333333;
+  --color-neutral-50: #F9FAFB;
+  --color-neutral-100: #F4F4F4;
+  --color-neutral-200: #EBEBEB;
+  --color-neutral-300: #E6E6E6;
+  --color-neutral-400: #E0E0E0;
+  --color-neutral-500: #D1D5DB;
+  --color-neutral-600: #E5E7EB;
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+
+
+
+
+@utility link-primary {
+  /* Responsive breakpoints */
+
+  /* Link variants */
+  @apply lua:text-primary lua:hover:text-primary/80 lua:underline-offset-4 lua:hover:underline lua:focus-visible:outline-2 lua:focus-visible:outline-ring lua:focus-visible:outline-offset-2 lua:focus-visible:rounded-sm;
+  text-decoration-thickness: 1px;
+}
+
+@utility link-secondary {
+  @apply lua:text-muted-foreground lua:hover:text-foreground lua:underline-offset-4 lua:hover:underline lua:focus-visible:outline-2 lua:focus-visible:outline-ring lua:focus-visible:outline-offset-2 lua:focus-visible:rounded-sm;
+  text-decoration-thickness: 1px;
+}
+
+@utility link-destructive {
+  @apply lua:text-destructive lua:hover:text-destructive/80 lua:underline-offset-4 lua:hover:underline lua:focus-visible:outline-2 lua:focus-visible:outline-ring lua:focus-visible:outline-offset-2 lua:focus-visible:rounded-sm;
+  text-decoration-thickness: 1px;
+}
+
+@utility link-subtle {
+  @apply lua:text-foreground lua:hover:text-primary lua:no-underline lua:hover:underline lua:underline-offset-4 lua:focus-visible:outline-2 lua:focus-visible:outline-ring lua:focus-visible:outline-offset-2 lua:focus-visible:rounded-sm;
+  text-decoration-thickness: 1px;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 218 100% 59%;
+    --primary-foreground: 0 0% 100%;
+    --primary-hover: 218 91% 56%;
+    --primary-active: 218 85% 52%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --secondary-hover: 240 4.8% 90%;
+    --secondary-active: 240 4.8% 85%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 351 100% 45%;
+    --destructive-foreground: 0 0% 100%;
+    --destructive-hover: 351 100% 40%;
+    --destructive-active: 351 100% 37%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 218 100% 59%;
+    --primary-foreground: 0 0% 100%;
+    --primary-hover: 218 91% 56%;
+    --primary-active: 218 85% 52%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --secondary-hover: 240 3.7% 20%;
+    --secondary-active: 240 3.7% 25%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 351 100% 45%;
+    --destructive-foreground: 0 0% 100%;
+    --destructive-hover: 351 100% 40%;
+    --destructive-active: 351 100% 37%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply lua:border-border;
+  }
+  body {
+    @apply lua:bg-background lua:text-foreground lua:font-sans;
+  }
+  
+  /* Typography base styles */
+  h1, h2, h3, h4, h5, h6 {
+    @apply lua:font-heading lua:text-foreground;
+  }
+  
+  p {
+    @apply lua:text-sm lua:leading-relaxed lua:font-sans lua:text-foreground;
+  }
+  
+  /* Link base styles */
+  a {
+    @apply lua:text-primary lua:underline-offset-4 lua:hover:underline lua:focus-visible:outline-2 lua:focus-visible:outline-ring lua:focus-visible:outline-offset-2 lua:focus-visible:rounded-sm;
+    text-decoration-thickness: 1px;
+  }
+}
+
+/* Sheet Animation Keyframes */
+@keyframes slide-in-from-top {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(0); }
+}
+
+@keyframes slide-in-from-bottom {
+  0% { transform: translateY(100%); }
+  100% { transform: translateY(0); }
+}
+
+@keyframes slide-in-from-left {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(0); }
+}
+
+@keyframes slide-in-from-right {
+  0% { transform: translateX(100%); }
+  100% { transform: translateX(0); }
+}
+
+@keyframes slide-out-to-top {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(-100%); }
+}
+
+@keyframes slide-out-to-bottom {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(100%); }
+}
+
+@keyframes slide-out-to-left {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+
+@keyframes slide-out-to-right {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(100%); }
+}
+
+@keyframes fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes fade-out {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/* Sheet Animation Classes */
+.lua\:animate-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+.lua\:animate-out {
+  animation: fade-out 0.2s ease-out;
+}
+
+.lua\:fade-in-0 {
+  animation: fade-in 0.2s ease-out;
+}
+
+.lua\:fade-out-0 {
+  animation: fade-out 0.2s ease-out;
+}
+
+.lua\:slide-in-from-top {
+  animation: slide-in-from-top 0.3s ease-out;
+}
+
+.lua\:slide-in-from-bottom {
+  animation: slide-in-from-bottom 0.3s ease-out;
+}
+
+.lua\:slide-in-from-left {
+  animation: slide-in-from-left 0.3s ease-out;
+}
+
+.lua\:slide-in-from-right {
+  animation: slide-in-from-right 0.3s ease-out;
+}
+
+.lua\:slide-out-to-top {
+  animation: slide-out-to-top 0.3s ease-out;
+}
+
+.lua\:slide-out-to-bottom {
+  animation: slide-out-to-bottom 0.3s ease-out;
+}
+
+.lua\:slide-out-to-left {
+  animation: slide-out-to-left 0.3s ease-out;
+}
+
+.lua\:slide-out-to-right {
+  animation: slide-out-to-right 0.3s ease-out;
+}
+
+/* Data attribute variants for Sheet animations */
+.lua\:data-\[state\=open\]\:animate-in[data-state="open"] {
+  animation: fade-in 0.2s ease-out;
+}
+
+.lua\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
+  animation: fade-out 0.2s ease-out;
+}
+
+.lua\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
+  animation: fade-in 0.2s ease-out;
+}
+
+.lua\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+  animation: fade-out 0.2s ease-out;
+}
+
+.lua\:data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
+  animation: slide-in-from-top 0.3s ease-out;
+}
+
+.lua\:data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
+  animation: slide-out-to-top 0.3s ease-out;
+}
+
+.lua\:data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
+  animation: slide-in-from-bottom 0.3s ease-out;
+}
+
+.lua\:data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
+  animation: slide-out-to-bottom 0.3s ease-out;
+}
+
+.lua\:data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
+  animation: slide-in-from-left 0.3s ease-out;
+}
+
+.lua\:data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
+  animation: slide-out-to-left 0.3s ease-out;
+}
+
+.lua\:data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
+  animation: slide-in-from-right 0.3s ease-out;
+}
+
+.lua\:data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
+  animation: slide-out-to-right 0.3s ease-out;
+}
+
+.lua\:data-\[state\=open\]\:duration-500[data-state="open"] {
+  animation-duration: 500ms;
+}
+
+.lua\:data-\[state\=closed\]\:duration-300[data-state="closed"] {
+  animation-duration: 300ms;
+} 

package/dist/tailwind.preset.js

@@ -0,0 +1,90 @@
+import { luaniverseSafelist } from './safelist.js';
+
+/** @type {import('tailwindcss').Config} */
+export const luaniversePreset = {
+  // Dark mode disabled globally
+  darkMode: false,
+  // Safelist story-specific arbitrary values that are hard to standardize
+  safelist: luaniverseSafelist,
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border, 214 32% 91%))', // Fallback to #E5E7EB
+        input: 'hsl(var(--input, 214 32% 91%))', // Fallback to #E5E7EB
+        ring: 'hsl(var(--ring, 220 100% 59%))', // Fallback to primary #2C7BFF
+        background: 'hsl(var(--background, 0 0% 100%))', // Fallback to white
+        foreground: 'hsl(var(--foreground, 222 84% 5%))', // Fallback to dark gray
+        primary: {
+          DEFAULT: 'hsl(var(--primary, 220 100% 59%))', // Fallback to #2C7BFF
+          foreground: 'hsl(var(--primary-foreground, 0 0% 100%))', // Fallback to white
+          hover: 'hsl(var(--primary-hover, 220 81% 54%))', // Fallback to #2F70E0
+          active: 'hsl(var(--primary-active, 220 67% 48%))', // Fallback to #2A66CC
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary, 210 40% 95%))', // Fallback to light gray
+          foreground: 'hsl(var(--secondary-foreground, 222 84% 5%))', // Fallback to dark gray
+          hover: 'hsl(var(--secondary-hover, 210 40% 90%))', // Fallback to darker gray
+          active: 'hsl(var(--secondary-active, 210 40% 85%))', // Fallback to even darker gray
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive, 352 100% 45%))', // Fallback to #E60022
+          foreground: 'hsl(var(--destructive-foreground, 0 0% 100%))', // Fallback to white
+          hover: 'hsl(var(--destructive-hover, 351 100% 40%))', // Fallback to #CC001E
+          active: 'hsl(var(--destructive-active, 351 100% 37%))', // Fallback to #BF001C
+        },
+        // Brand neutral colors
+        black: {
+          DEFAULT: '#000000',
+          hover: '#333333',
+        },
+        neutral: {
+          50: '#F9FAFB',
+          100: '#F4F4F4',
+          200: '#EBEBEB',
+          300: '#E6E6E6',
+          400: '#E0E0E0',
+          500: '#D1D5DB',
+          600: '#E5E7EB',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted, 210 40% 98%))', // Fallback to very light gray
+          foreground: 'hsl(var(--muted-foreground, 215 16% 47%))', // Fallback to medium gray
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent, 210 40% 95%))', // Fallback to light gray
+          foreground: 'hsl(var(--accent-foreground, 222 84% 5%))', // Fallback to dark gray
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover, 0 0% 100%))', // Fallback to white
+          foreground: 'hsl(var(--popover-foreground, 222 84% 5%))', // Fallback to dark gray
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card, 0 0% 100%))', // Fallback to white
+          foreground: 'hsl(var(--card-foreground, 222 84% 5%))', // Fallback to dark gray
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius, 0.5rem)', // Fallback to 8px
+        md: 'calc(var(--radius, 0.5rem) - 2px)', // Fallback to 6px
+        sm: 'calc(var(--radius, 0.5rem) - 4px)', // Fallback to 4px
+      },
+      // Custom spacing for component consistency
+      spacing: {
+        0: '0px', // 0 spacing
+        1: '1px',
+        1.5: '6px', // IconButton small padding, Button gap
+      },
+      gap: {
+        1.5: '6px', // Button icon-text gap
+      },
+      // Custom sizes for IconButton components
+      size: {
+        7: '28px', // IconButton small
+        10: '40px', // IconButton default
+        12: '48px', // IconButton large
+      },
+    },
+  },
+};
+
+export default luaniversePreset;

package/package.json

@@ -0,0 +1,118 @@
+{
+  "name": "luaniverse",
+  "version": "4.0.40",
+  "description": "Lua Design System - A React component library for Lua applications",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./dist/styles.css",
+    "./tailwind": "./dist/tailwind.preset.js",
+    "./safelist": "./dist/safelist.js",
+    "./safelist.txt": "./dist/safelist.txt"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "build:storybook": "storybook build",
+    "storybook": "storybook dev -p 6006",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write .",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "design-system",
+    "tailwindcss",
+    "lua",
+    "typescript"
+  ],
+  "author": "Lua Global",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lua-ai-global/luaniverse.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "tailwind-merge": "^2.5.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.28.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.0",
+    "@semantic-release/npm": "^12.0.1",
+    "@semantic-release/release-notes-generator": "^14.0.1",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-onboarding": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/node": "^22.15.29",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "eslint": "^9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^0.10.2",
+    "postcss": "^8.4.49",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "semantic-release": "^24.2.0",
+    "storybook": "^8.3.6",
+    "tailwindcss": "^4.1.11",
+    "tailwindcss-animate": "^1.0.7",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  }
+}