@fayz-ai/ui 0.9.0 → 0.10.0

package/src/theme/preset.ts

@@ -1,209 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-/**
- * Tailwind CSS preset for @fayz-ai/ui.
- * Include this in your tailwind.config.ts:
- *
- *   import { fayzUiPreset } from '@fayz-ai/ui/theme'
- *   export default { presets: [fayzUiPreset], ... }
- */
-const fayzUiPreset: Partial<Config> = {
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        success: {
-          DEFAULT: 'hsl(var(--success))',
-          foreground: 'hsl(var(--success-foreground))',
-        },
-        warning: {
-          DEFAULT: 'hsl(var(--warning))',
-          foreground: 'hsl(var(--warning-foreground))',
-        },
-        info: {
-          DEFAULT: 'hsl(var(--info))',
-          foreground: 'hsl(var(--info-foreground))',
-        },
-        magic: {
-          DEFAULT: 'hsl(var(--magic))',
-          foreground: 'hsl(var(--magic-foreground))',
-        },
-        'info-soft': {
-          DEFAULT: 'hsl(var(--info-soft))',
-          foreground: 'hsl(var(--info-soft-foreground))',
-        },
-        'success-soft': {
-          DEFAULT: 'hsl(var(--success-soft))',
-          foreground: 'hsl(var(--success-soft-foreground))',
-        },
-        'warning-soft': {
-          DEFAULT: 'hsl(var(--warning-soft))',
-          foreground: 'hsl(var(--warning-soft-foreground))',
-        },
-        'destructive-soft': {
-          DEFAULT: 'hsl(var(--destructive-soft))',
-          foreground: 'hsl(var(--destructive-soft-foreground))',
-        },
-        'magic-soft': {
-          DEFAULT: 'hsl(var(--magic-soft))',
-          foreground: 'hsl(var(--magic-soft-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        // Layout surface tokens
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          muted: 'hsl(var(--sidebar-muted))',
-        },
-        content: 'hsl(var(--content))',
-      },
-      borderRadius: {
-        button: 'var(--button-radius)',
-        card: 'var(--card-radius)',
-        input: 'var(--input-radius)',
-        modal: 'var(--modal-radius)',
-      },
-      fontFamily: {
-        sans: ['var(--font-family)'],
-        mono: ['var(--font-family-mono)'],
-      },
-      boxShadow: {
-        sm: 'var(--shadow-sm)',
-        md: 'var(--shadow-md)',
-        lg: 'var(--shadow-lg)',
-        button: 'var(--shadow-button)',
-        'button-primary': 'var(--shadow-button-primary)',
-        'button-inset': 'var(--shadow-button-inset)',
-      },
-      keyframes: {
-        'fade-in': {
-          from: { opacity: '0' },
-          to: { opacity: '1' },
-        },
-        'fade-out': {
-          from: { opacity: '1' },
-          to: { opacity: '0' },
-        },
-        'zoom-in': {
-          from: { transform: 'scale(0.95)', opacity: '0' },
-          to: { transform: 'scale(1)', opacity: '1' },
-        },
-        'zoom-out': {
-          from: { transform: 'scale(1)', opacity: '1' },
-          to: { transform: 'scale(0.95)', opacity: '0' },
-        },
-        'slide-in-from-top': {
-          from: { transform: 'translateY(-4px)', opacity: '0' },
-          to: { transform: 'translateY(0)', opacity: '1' },
-        },
-        'slide-in-from-bottom': {
-          from: { transform: 'translateY(4px)', opacity: '0' },
-          to: { transform: 'translateY(0)', opacity: '1' },
-        },
-        'slide-out-to-top': {
-          from: { transform: 'translateY(0)', opacity: '1' },
-          to: { transform: 'translateY(-4px)', opacity: '0' },
-        },
-        'page-in': {
-          from: { opacity: '0', transform: 'translateY(6px)' },
-          to: { opacity: '1', transform: 'translateY(0)' },
-        },
-        'slide-in-from-right': {
-          from: { transform: 'translateX(100%)' },
-          to: { transform: 'translateX(0)' },
-        },
-        'slide-out-to-right': {
-          from: { transform: 'translateX(0)' },
-          to: { transform: 'translateX(100%)' },
-        },
-        'fade-up': {
-          from: { opacity: '0', transform: 'translateY(18px)' },
-          to: { opacity: '1', transform: 'translateY(0)' },
-        },
-        kenburns: {
-          from: { transform: 'scale(1)' },
-          to: { transform: 'scale(1.07)' },
-        },
-        'badge-pop': {
-          '0%': { transform: 'scale(0.6)' },
-          '60%': { transform: 'scale(1.25)' },
-          '100%': { transform: 'scale(1)' },
-        },
-        'draw-check': {
-          from: { 'stroke-dashoffset': '48' },
-          to: { 'stroke-dashoffset': '0' },
-        },
-        'pop-in': {
-          '0%': { transform: 'scale(0)', opacity: '0' },
-          '70%': { transform: 'scale(1.15)', opacity: '1' },
-          '100%': { transform: 'scale(1)', opacity: '1' },
-        },
-        'confetti-fall': {
-          '0%': { transform: 'translateY(-10px) rotate(0deg)', opacity: '1' },
-          '100%': { transform: 'translateY(140px) rotate(540deg)', opacity: '0' },
-        },
-        'pulse-soft': {
-          '0%, 100%': { opacity: '1' },
-          '50%': { opacity: '0.55' },
-        },
-      },
-      animation: {
-        'fade-in': 'fade-in 200ms ease-out',
-        'fade-out': 'fade-out 150ms ease-in',
-        'zoom-in': 'zoom-in 200ms ease-out',
-        'zoom-out': 'zoom-out 150ms ease-in',
-        'slide-in-from-top': 'slide-in-from-top 200ms ease-out',
-        'slide-in-from-bottom': 'slide-in-from-bottom 200ms ease-out',
-        'slide-out-to-top': 'slide-out-to-top 150ms ease-in',
-        'slide-in-from-right': 'slide-in-from-right 250ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-out-to-right': 'slide-out-to-right 200ms ease-in',
-        'page-in': 'page-in 250ms ease-out',
-        'fade-up': 'fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) both',
-        kenburns: 'kenburns 9s ease-out both',
-        'badge-pop': 'badge-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1)',
-        'draw-check': 'draw-check 600ms ease-out 250ms both',
-        'pop-in': 'pop-in 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both',
-        'confetti-fall': 'confetti-fall 1100ms ease-in both',
-        'pulse-soft': 'pulse-soft 1.6s ease-in-out infinite',
-      },
-    },
-  },
-}
-
-export default fayzUiPreset
-export { fayzUiPreset }

package/src/theme/presets.ts

@@ -1,106 +0,0 @@
-import { darkTheme, lightTheme, type CreateThemeOptions } from '../stores/theme.store'
-
-export type FayzThemePresetId = 'classic_admin' | 'liquid_glass'
-
-function mergeThemeOptions(base: CreateThemeOptions, overrides: CreateThemeOptions = {}): CreateThemeOptions {
-  return {
-    ...base,
-    ...overrides,
-    colors: {
-      ...(base.colors ?? {}),
-      ...(overrides.colors ?? {}),
-    },
-    darkColors: {
-      ...(base.darkColors ?? {}),
-      ...(overrides.darkColors ?? {}),
-    },
-    perception: {
-      ...(base.perception ?? {}),
-      ...(overrides.perception ?? {}),
-    },
-  }
-}
-
-export const fayzThemePresets: Record<FayzThemePresetId, CreateThemeOptions> = {
-  classic_admin: {
-    name: 'classic_admin',
-    colors: lightTheme.colors,
-    darkColors: darkTheme.colors,
-    perception: lightTheme.perception,
-  },
-  liquid_glass: {
-    name: 'liquid_glass',
-    colors: {
-      background: '260 38% 96%',
-      content: '260 36% 96.5%',
-      card: '0 0% 100% / 0.84',
-      popover: '0 0% 100% / 0.96',
-      secondary: '260 34% 93% / 0.82',
-      muted: '260 30% 91% / 0.78',
-      border: '260 26% 76% / 0.58',
-      input: '260 24% 68% / 0.62',
-    },
-    darkColors: {
-      background: '260 28% 9%',
-      content: '260 28% 10%',
-      card: '260 24% 16% / 0.72',
-      popover: '260 24% 14% / 0.9',
-      secondary: '260 20% 22% / 0.72',
-      muted: '260 18% 20% / 0.68',
-      border: '260 20% 35% / 0.58',
-      input: '260 20% 38% / 0.68',
-    },
-    perception: {
-      buttonRadius: '9999px',
-      cardRadius: '1.25rem',
-      inputRadius: '1rem',
-      modalRadius: '1.5rem',
-      surfaceBackdropFilter: 'blur(16px) saturate(1.24) brightness(1.03)',
-      modalBackground:
-        'linear-gradient(145deg, rgb(255 255 255 / 0.82), rgb(249 247 255 / 0.72) 48%, rgb(255 255 255 / 0.64))',
-      modalBorder: 'rgb(255 255 255 / 0.74)',
-      modalOverlayBackground: 'rgb(26 20 38 / 0.22)',
-      modalOverlayBackdropFilter: 'blur(5px) saturate(1.08)',
-      modalShadow:
-        '0 32px 82px -46px rgb(31 18 61 / 0.38), 0 1px 4px rgb(31 18 61 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.78), inset 0 0 0 1px rgb(255 255 255 / 0.28)',
-      glassEdgeGradient:
-        'linear-gradient(145deg, rgb(255 255 255 / 0.96) 0%, rgb(255 255 255 / 0.44) 24%, rgb(171 151 211 / 0.34) 48%, rgb(45 35 76 / 0.22) 62%, rgb(255 255 255 / 0.7) 100%)',
-      glassPrimaryEdgeGradient:
-        'linear-gradient(145deg, rgb(255 255 255 / 0.74) 0%, rgb(255 255 255 / 0.2) 28%, rgb(45 35 76 / 0.34) 58%, rgb(255 255 255 / 0.5) 100%)',
-      glassInnerHighlight:
-        'inset 0 1px 0 rgb(255 255 255 / 0.72), inset 1px 0 0 rgb(255 255 255 / 0.28), inset 0 -1px 0 rgb(45 35 76 / 0.1)',
-      fieldBackground:
-        'linear-gradient(135deg, rgb(255 255 255 / 0.9) 0%, rgb(250 248 255 / 0.82) 46%, rgb(242 238 252 / 0.74) 100%)',
-      fieldBorder: 'rgb(174 158 205 / 0.58)',
-      fieldShadow:
-        'inset 0 1px 0 rgb(255 255 255 / 0.8), inset 0 -1px 0 rgb(45 35 76 / 0.08), 0 12px 28px -24px rgb(31 18 61 / 0.28)',
-      shadowSm: '0 10px 28px -20px rgb(31 18 61 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.54)',
-      shadowMd: '0 22px 54px -32px rgb(31 18 61 / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.58)',
-      shadowLg: '0 34px 88px -42px rgb(31 18 61 / 0.48), inset 0 1px 0 rgb(255 255 255 / 0.62)',
-      shadowButton:
-        'inset 0 1px 0 rgb(255 255 255 / 0.82), inset 0 -1px 0 rgb(31 18 61 / 0.08), 0 14px 30px -18px rgb(31 18 61 / 0.56)',
-      shadowButtonPrimary:
-        'inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -1px 0 rgb(31 18 61 / 0.26), 0 18px 36px -18px rgb(31 18 61 / 0.86)',
-      shadowButtonInset:
-        'inset 0 2px 4px rgb(31 18 61 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.24)',
-      buttonBackground:
-        'linear-gradient(135deg, rgb(255 255 255 / 0.92) 0%, rgb(247 242 255 / 0.74) 48%, rgb(229 220 248 / 0.64) 100%)',
-      buttonBackgroundHover:
-        'linear-gradient(135deg, rgb(255 255 255 / 0.98) 0%, rgb(249 244 255 / 0.86) 46%, rgb(231 222 250 / 0.78) 100%)',
-      buttonBorder: 'rgb(194 178 221 / 0.86)',
-      buttonPrimaryBackground:
-        'linear-gradient(135deg, rgb(255 255 255 / 0.28) 0%, hsl(var(--primary) / 0.94) 36%, hsl(278 42% 58% / 0.88) 100%)',
-      buttonPrimaryBackgroundHover:
-        'linear-gradient(135deg, rgb(255 255 255 / 0.36) 0%, hsl(var(--primary) / 1) 34%, hsl(278 52% 62% / 0.94) 100%)',
-      buttonPrimaryBorder: 'rgb(255 255 255 / 0.38)',
-      buttonBackdropFilter: 'blur(18px) saturate(1.45)',
-    },
-  },
-}
-
-export function createFayzTheme(
-  preset: FayzThemePresetId = 'classic_admin',
-  overrides: CreateThemeOptions = {},
-): CreateThemeOptions {
-  return mergeThemeOptions(fayzThemePresets[preset] ?? fayzThemePresets.classic_admin, overrides)
-}

package/src/utils/cn.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}