@hanzo/ui 5.7.1 → 8.0.1

package/style/hanzo-default-colors.css

@@ -1,147 +0,0 @@
-/**
- * Hanzo UI - Default Color Theme
- * Tailwind CSS 4 compatible with shadcn/ui color system
- */
-
-@layer base {
-  :root, .hanzo-ui-light-theme {
-    /* Hanzo UI legacy colors */
-    --hz-ui-fg-0: hsl(0 0% 0%);
-    --hz-ui-fg-body: hsl(0 0% 10%);
-    --hz-ui-fg-1: hsl(0 0% 20%);
-    --hz-ui-fg-2: hsl(0 0% 35%);
-    --hz-ui-fg-3: hsl(0 0% 50%);
-    --hz-ui-fg-4: hsl(0 0% 70%);
-    --hz-ui-fg-5: hsl(0 0% 90%);
-
-    --hz-ui-bg-0: hsl(0 0% 100%);
-    --hz-ui-bg-1: hsl(0 0% 90%);
-    --hz-ui-bg-2: hsl(0 0% 75%);
-    --hz-ui-bg-3: hsl(0 0% 55%);
-
-    --hz-ui-bg-overlay: hsla(0 0% 100% / 60%);
-    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
-    --hz-ui-bg-inverted-hover: hsla(0 0% 0% / 85%);
-    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
-
-    --hz-ui-secondary-0: hsl(266 79% 80%);
-    --hz-ui-secondary-1: hsl(266 79% 70%);
-    --hz-ui-secondary-2: hsl(266 79% 60%);
-    --hz-ui-secondary-3: hsl(266 79% 50%);
-
-    --hz-ui-primary: var(--hz-ui-bg-inverted);
-    --hz-ui-primary-hover: var(--hz-ui-bg-inverted-hover);
-    --hz-ui-primary-fg: var(--hz-ui-fg-inverted);
-
-    --hz-ui-secondary: var(--hz-ui-secondary-0);
-    --hz-ui-secondary-hover: var(--hz-ui-secondary-2);
-    --hz-ui-secondary-fg: var(--hz-ui-fg-0);
-
-    --hz-ui-nav: var(--hz-ui-fg-4);
-    --hz-ui-nav-current: var(--hz-ui-fg-0);
-    --hz-ui-nav-hover: var(--hz-ui-fg-0);
-
-    --hz-ui-destructive: hsl(0 62.8% 45%);
-    --hz-ui-destructive-hover: hsl(0 62.8% 25%);
-    --hz-ui-destructive-fg: hsl(0 0% 100%);
-
-    --hz-ui-ring: var(--hz-ui-fg-2);
-    --hz-ui-radius: 0.5rem;
-
-    /* shadcn/ui compatible color system */
-    --radius: 0.5rem;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --destructive-foreground: oklch(0.97 0.01 17);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: var(--color-blue-300);
-    --chart-2: var(--color-blue-500);
-    --chart-3: var(--color-blue-600);
-    --chart-4: var(--color-blue-700);
-    --chart-5: var(--color-blue-800);
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-  }
-
-  .dark, .hanzo-ui-dark-theme {
-    /* Hanzo UI legacy colors */
-    --hz-ui-fg-0: hsl(0 0% 100%);
-    --hz-ui-fg-body: hsl(0 0% 97%);
-    --hz-ui-fg-1: hsl(0 0% 85%);
-    --hz-ui-fg-2: hsl(0 0% 70%);
-    --hz-ui-fg-3: hsl(0 0% 55%);
-    --hz-ui-fg-4: hsl(0 0% 40%);
-    --hz-ui-fg-5: hsl(0 0% 25%);
-
-    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
-    --hz-ui-bg-inverted-hover: hsla(0 0% 100% / 85%);
-
-    --hz-ui-bg-3: hsl(0 0% 25%);
-    --hz-ui-bg-2: hsl(0 0% 18%);
-    --hz-ui-bg-1: hsl(0 0% 12%);
-    --hz-ui-bg-0: hsl(0 0% 0%);
-
-    --hz-ui-bg-overlay: hsla(0 0% 0% / 60%);
-    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
-
-    --hz-ui-secondary-0: hsl(266 79% 40%);
-    --hz-ui-secondary-1: hsl(266 79% 50%);
-    --hz-ui-secondary-2: hsl(266 79% 60%);
-    --hz-ui-secondary-3: hsl(266 79% 70%);
-
-    /* shadcn/ui compatible color system */
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.269 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.371 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --destructive-foreground: oklch(0.58 0.22 27);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: var(--color-blue-300);
-    --chart-2: var(--color-blue-500);
-    --chart-3: var(--color-blue-600);
-    --chart-4: var(--color-blue-700);
-    --chart-5: var(--color-blue-800);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.439 0 0);
-  }
-}

package/style/tailwind.css

@@ -1,200 +0,0 @@
-/**
- * Hanzo UI - Tailwind CSS 4 Config
- * Import this file to get all Hanzo UI styles including:
- * - Theme configuration (colors, radius, fonts)
- * - Animation keyframes
- * - Custom variants for data-* attributes
- * - Utility classes
- *
- * Usage:
- * @import "@hanzo/ui/style/tailwind.css";
- *
- * Or with globals:
- * @import "tailwindcss";
- * @import "@hanzo/ui/style/tailwind.css";
- */
-
-/* Theme configuration */
-@theme inline {
-  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
-  --font-mono: var(--font-mono), ui-monospace, monospace;
-  --radius: 0.5rem;
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-
-  /* Color mappings */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Animation keyframes */
-  @keyframes accordion-down {
-    from { height: 0; }
-    to { height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto)); }
-  }
-
-  @keyframes accordion-up {
-    from { height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto)); }
-    to { height: 0; }
-  }
-
-  @keyframes caret-blink {
-    0%, 70%, 100% { opacity: 1; }
-    20%, 50% { opacity: 0; }
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  @keyframes fade-out {
-    from { opacity: 1; }
-    to { opacity: 0; }
-  }
-
-  @keyframes slide-in-from-top {
-    from { transform: translateY(-100%); }
-    to { transform: translateY(0); }
-  }
-
-  @keyframes slide-out-to-top {
-    from { transform: translateY(0); }
-    to { transform: translateY(-100%); }
-  }
-
-  @keyframes slide-in-from-bottom {
-    from { transform: translateY(100%); }
-    to { transform: translateY(0); }
-  }
-
-  @keyframes slide-out-to-bottom {
-    from { transform: translateY(0); }
-    to { transform: translateY(100%); }
-  }
-
-  @keyframes slide-in-from-left {
-    from { transform: translateX(-100%); }
-    to { transform: translateX(0); }
-  }
-
-  @keyframes slide-out-to-left {
-    from { transform: translateX(0); }
-    to { transform: translateX(-100%); }
-  }
-
-  @keyframes slide-in-from-right {
-    from { transform: translateX(100%); }
-    to { transform: translateX(0); }
-  }
-
-  @keyframes slide-out-to-right {
-    from { transform: translateX(0); }
-    to { transform: translateX(100%); }
-  }
-}
-
-/* Custom variants */
-@custom-variant dark (&:is(.dark *));
-
-@custom-variant data-open {
-  &:where([data-state="open"]),
-  &:where([data-open]:not([data-open="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-closed {
-  &:where([data-state="closed"]),
-  &:where([data-closed]:not([data-closed="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-checked {
-  &:where([data-state="checked"]),
-  &:where([data-checked]:not([data-checked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-unchecked {
-  &:where([data-state="unchecked"]),
-  &:where([data-unchecked]:not([data-unchecked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-selected {
-  &:where([data-selected="true"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-disabled {
-  &:where([data-disabled="true"]),
-  &:where([data-disabled]:not([data-disabled="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-active {
-  &:where([data-state="active"]),
-  &:where([data-active]:not([data-active="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-horizontal {
-  &:where([data-orientation="horizontal"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-vertical {
-  &:where([data-orientation="vertical"]) {
-    @slot;
-  }
-}
-
-/* Utility classes */
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}

package/style/theme-provider.tsx

@@ -1,20 +0,0 @@
-"use client"
-
-import React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import type { ThemeProviderProps } from "next-themes"
-
-const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, ...props }) => (
-  <NextThemesProvider 
-    attribute="class" 
-    {...props}
-    value={{
-      light: 'hanzo-ui-light-theme',
-      dark: 'hanzo-ui-dark-theme'
-    }}
-  >
-    {children}
-  </NextThemesProvider>
-)
-
-export default ThemeProvider