hazo_ui 4.10.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_ui",
-  "version": "4.10.0",
+  "version": "6.0.0",
   "description": "Set of UI components for common interaction elements in a SaaS app",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,12 +12,6 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./styles.css": "./dist/styles.css",
-    "./tailwind-preset": {
-      "types": "./tailwind.preset.d.ts",
-      "import": "./tailwind.preset.js",
-      "require": "./tailwind.preset.js"
-    },
     "./test-harness": {
       "types": "./dist/test-harness/index.d.ts",
       "import": "./dist/test-harness/index.js",
@@ -32,8 +26,6 @@
   },
   "files": [
     "dist",
-    "tailwind.preset.js",
-    "tailwind.preset.d.ts",
     "README.md",
     "CHANGE_LOG.md",
     "SETUP_CHECKLIST.md"
@@ -53,12 +45,7 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "hazo_core": "^1.2.1",
     "hazo_state": "^0.1.2",
-    "hazo_theme": "^0.2.0"
-  },
-  "peerDependenciesMeta": {
-    "hazo_theme": {
-      "optional": true
-    }
+    "hazo_theme": "^1.0.0"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -128,7 +115,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "hazo_core": "^1.2.1",
-    "hazo_theme": "^0.2.0",
+    "hazo_theme": "^1.0.0",
     "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/dist/styles.css

@@ -1,156 +0,0 @@
-/**
- * hazo_ui CSS Variables and Base Styles
- *
- * Import this file in your app to get all required CSS variables:
- * import 'hazo_ui/styles.css';
- */
-
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
-  --radius: 0.5rem;
-  /* HazoUiKanban primitives (v2.13.0) */
-  --hazo-kanban-priority-p0: 0 84% 60%;     /* red */
-  --hazo-kanban-priority-p1: 45 93% 55%;    /* yellow */
-  --hazo-kanban-priority-p2: 217 91% 60%;   /* blue */
-  --hazo-kanban-priority-p3: 220 9% 64%;    /* grey */
-  --hazo-kanban-card-bg: var(--card);
-  --hazo-kanban-card-border: var(--border);
-  --hazo-kanban-column-gap: 0.75rem;
-}
-
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
-}
-
-/* Command Dropdown/Popover Styles */
-/* These styles ensure proper backgrounds in command dropdowns regardless of CSS variable format */
-.cls_command_popover,
-.cls_command_dropdown,
-.cls_textarea_command_dropdown,
-.cls_edit_popover {
-  background-color: #ffffff;
-  background-color: var(--popover, #ffffff);
-  color: var(--popover-foreground, #0f172a);
-  border: 1px solid var(--border, #e2e8f0);
-  border-radius: var(--radius, 0.5rem);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-}
-
-.dark .cls_command_popover,
-.dark .cls_command_dropdown,
-.dark .cls_textarea_command_dropdown,
-.dark .cls_edit_popover {
-  background-color: #1e293b;
-  background-color: var(--popover, #1e293b);
-  color: var(--popover-foreground, #f8fafc);
-}
-
-/* Command items inherit background from parent */
-.cls_command_popover .cls_command_item,
-.cls_command_dropdown .cls_command_item {
-  background-color: inherit;
-}
-
-/* Command item selected and hover states */
-.cls_command_popover .cls_command_item:hover,
-.cls_command_dropdown .cls_command_item:hover,
-.cls_command_popover .cls_command_item.bg-accent,
-.cls_command_dropdown .cls_command_item.bg-accent {
-  background-color: var(--accent, #f1f5f9) !important;
-  color: var(--accent-foreground, #0f172a) !important;
-}
-
-/* Ensure nested text elements are visible when parent is selected */
-.cls_command_popover .cls_command_item.bg-accent *,
-.cls_command_dropdown .cls_command_item.bg-accent * {
-  color: inherit;
-}
-
-/* Description text in selected items - slightly muted but still visible */
-.cls_command_popover .cls_command_item.bg-accent .text-muted-foreground,
-.cls_command_dropdown .cls_command_item.bg-accent .text-muted-foreground {
-  color: var(--accent-foreground, #0f172a);
-  opacity: 0.7;
-}
-
-.dark .cls_command_popover .cls_command_item:hover,
-.dark .cls_command_dropdown .cls_command_item:hover,
-.dark .cls_command_popover .cls_command_item.bg-accent,
-.dark .cls_command_dropdown .cls_command_item.bg-accent {
-  background-color: var(--accent, #334155) !important;
-  color: var(--accent-foreground, #f8fafc) !important;
-}
-
-.dark .cls_command_popover .cls_command_item.bg-accent .text-muted-foreground,
-.dark .cls_command_dropdown .cls_command_item.bg-accent .text-muted-foreground {
-  color: var(--accent-foreground, #f8fafc);
-  opacity: 0.7;
-}
-
-/* ============================================================
- * State primitives: shimmer animation for Skeleton components
- * Used by .hazo-shimmer class. Falls back to static under
- * prefers-reduced-motion (handled in the JSX, not here).
- * ============================================================ */
-@keyframes hazo-shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-.hazo-shimmer {
-  background: linear-gradient(
-    90deg,
-    hsl(var(--muted, 210 40% 96.1%)) 0%,
-    hsl(var(--muted, 210 40% 96.1%) / 0.5) 50%,
-    hsl(var(--muted, 210 40% 96.1%)) 100%
-  );
-  background-size: 200% 100%;
-  animation: hazo-shimmer 1.2s ease-in-out infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hazo-shimmer {
-    animation: none;
-    background: hsl(var(--muted, 210 40% 96.1%));
-  }
-}

package/tailwind.preset.d.ts

@@ -1,8 +0,0 @@
-/**
- * hazo_ui Tailwind CSS Preset Type Declaration
- */
-
-import type { Config } from "tailwindcss";
-
-declare const hazoUiPreset: Partial<Config>;
-export default hazoUiPreset;

package/tailwind.preset.js

@@ -1,91 +0,0 @@
-/**
- * hazo_ui Tailwind CSS Preset (v4-compatible)
- *
- * Use this preset in your tailwind.config.js/ts:
- *
- * import hazoUiPreset from 'hazo_ui/tailwind-preset';
- *
- * export default {
- *   presets: [hazoUiPreset],
- *   content: [
- *     './src/**\/*.{js,ts,jsx,tsx}',
- *     './node_modules/hazo_ui/dist/**\/*.js',
- *   ],
- * };
- *
- * NOTE: For accordion / collapse animations, add `@plugin "tw-animate-css";`
- * to your globals.css and install `tw-animate-css` as a dependency.
- */
-
-/** @type {import('tailwindcss').Config} */
-const hazoUiPreset = {
-  darkMode: ['class'],
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    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))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [],
-};
-
-export default hazoUiPreset;