hazo_ui 2.2.1 → 2.2.3

package/README.md

@@ -8,6 +8,41 @@ A set of UI components for common interaction elements in a SaaS app.
 npm install hazo_ui
 ```
 
+## Quick Setup (Required)
+
+hazo_ui uses Tailwind CSS and CSS variables for styling. Follow these two steps:
+
+### Step 1: Import the CSS variables
+
+Add to your app's entry point (e.g., `layout.tsx`, `_app.tsx`, or `main.tsx`):
+
+```tsx
+import 'hazo_ui/styles.css';
+```
+
+### Step 2: Configure Tailwind
+
+Update your `tailwind.config.ts`:
+
+```ts
+import hazoUiPreset from 'hazo_ui/tailwind-preset';
+
+export default {
+  presets: [hazoUiPreset],
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/hazo_ui/dist/**/*.js',  // Required: scan hazo_ui components
+  ],
+  // ... your other config
+};
+```
+
+That's it! The components will now render correctly with proper styling.
+
+> **Note**: If you already have shadcn/ui configured with CSS variables, you may skip Step 1 as the variables are compatible.
+
+---
+
 ## Components
 
 ### Component Overview
@@ -151,6 +186,8 @@ function DataTable() {
         availableFields={availableFields}
         onFilterChange={handleFilterChange}
         initialFilters={filters}
+        title="Filter Products"           // Optional: customize dialog title (default: "Filter")
+        description="Filter by product attributes"  // Optional: customize description
       />
       {/* Your table/grid component */}
     </div>
@@ -158,6 +195,16 @@ function DataTable() {
 }
 ```
 
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `availableFields` | `FilterField[]` | Yes | - | Array of field definitions for filtering |
+| `onFilterChange` | `(filters: FilterConfig[]) => void` | Yes | - | Callback when filters are applied |
+| `initialFilters` | `FilterConfig[]` | No | `[]` | Initial filter configuration |
+| `title` | `string` | No | `"Filter"` | Dialog title text |
+| `description` | `string` | No | `"Add multiple fields to filter by..."` | Dialog description text |
+
 #### Example Input
 
 ```tsx
@@ -325,6 +372,8 @@ function DataTable() {
         availableFields={availableFields}
         onSortChange={handleSortChange}
         initialSortFields={sorts}
+        title="Sort Products"           // Optional: customize dialog title (default: "Sort")
+        description="Drag to reorder sort priority"  // Optional: customize description
       />
       {/* Your table/grid component */}
     </div>
@@ -332,6 +381,16 @@ function DataTable() {
 }
 ```
 
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `availableFields` | `SortField[]` | Yes | - | Array of field definitions for sorting |
+| `onSortChange` | `(sorts: SortConfig[]) => void` | Yes | - | Callback when sorts are applied |
+| `initialSortFields` | `SortConfig[]` | No | `[]` | Initial sort configuration |
+| `title` | `string` | No | `"Sort"` | Dialog title text |
+| `description` | `string` | No | `"Add multiple fields to sort by..."` | Dialog description text |
+
 #### Example Input
 
 ```tsx

package/dist/index.cjs

@@ -263,7 +263,7 @@ var CommandItem = React6__namespace.forwardRef(({ className, onSelect, value, ..
     {
       ref,
       className: cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       ),
       onClick: handleClick,
@@ -665,7 +665,9 @@ function FilterFieldItem({
 function HazoUiMultiFilterDialog({
   availableFields,
   onFilterChange,
-  initialFilters = []
+  initialFilters = [],
+  title = "Filter",
+  description = "Add multiple fields to filter by. Select a field and set its filter value."
 }) {
   const [isOpen, setIsOpen] = React6.useState(false);
   const [filterFields, setFilterFields] = React6.useState(initialFilters);
@@ -787,8 +789,8 @@ function HazoUiMultiFilterDialog({
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "cls_filter_dialog_content max-w-lg w-full max-h-[90vh] overflow-y-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Filter Images" }),
-        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Add multiple fields to filter by. Select a field and set its filter value." })
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_filter_dialog_body space-y-4 py-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_add_field_section", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isComboboxOpen, onOpenChange: setIsComboboxOpen, children: [
@@ -985,7 +987,9 @@ function SortableSortFieldItem({
 function HazoUiMultiSortDialog({
   availableFields,
   onSortChange,
-  initialSortFields = []
+  initialSortFields = [],
+  title = "Sort",
+  description = "Add multiple fields to sort by and reorder them. Use the switch to toggle between ascending and descending."
 }) {
   const [isOpen, setIsOpen] = React6.useState(false);
   const [sortFields, setSortFields] = React6.useState(initialSortFields);
@@ -1089,8 +1093,8 @@ function HazoUiMultiSortDialog({
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "cls_sort_dialog_content max-w-lg", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Sort Images" }),
-        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Add multiple fields to sort by and reorder them. Use the switch to toggle between ascending and descending." })
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_sort_dialog_body space-y-4 py-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_add_field_section", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isComboboxOpen, onOpenChange: setIsComboboxOpen, children: [