@classytic/fluid 0.4.1 → 0.5.0

package/dist/command.mjs

@@ -1,9 +1,9 @@
 "use client";
 
 import { t as cn } from "./utils-DQ5SCVoW.mjs";
-import { t as useKeyboardShortcut } from "./use-keyboard-shortcut-Bl6YM5Q7.mjs";
+import { t as useKeyboardShortcut } from "./use-keyboard-shortcut-C_Vk-36P.mjs";
+import React, { createContext, useCallback, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useState } from "react";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@/components/ui/command";
 import { Kbd } from "@/components/ui/kbd";
 
@@ -100,7 +100,7 @@ function CommandSearchItemComponent({ children, icon, shortcut: shortcutDisplay,
 		children: [
 			icon && /* @__PURE__ */ jsx("span", {
 				className: "shrink-0",
-				children: icon
+				children: typeof icon === "function" ? React.createElement(icon, { className: "h-4 w-4" }) : icon
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "flex-1",

package/dist/compact.d.mts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ChangeEvent, InputHTMLAttributes, ReactNode, Ref, TextareaHTMLAttributes } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Control, FieldValues, Path } from "react-hook-form";
 
 //#region src/components/compact/compact-input.d.ts
@@ -63,8 +63,8 @@ declare function CompactInput<T extends FieldValues = FieldValues>({
   ref?: Ref<HTMLInputElement>;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/compact/compact-textarea.d.ts
-interface CompactTextareaProps<T extends FieldValues = FieldValues> extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+//#region src/components/compact/compact-number-input.d.ts
+interface CompactNumberInputProps<T extends FieldValues = FieldValues> {
   control?: Control<T>;
   name?: Path<T>;
   description?: string;
@@ -72,26 +72,35 @@ interface CompactTextareaProps<T extends FieldValues = FieldValues> extends Omit
   label?: string;
   placeholder?: string;
   disabled?: boolean;
-  rows?: number;
-  addonLeft?: ReactNode;
-  addonRight?: ReactNode;
+  min?: number;
+  max?: number;
+  step?: number;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  showButtons?: boolean;
+  buttonVariant?: "ghost" | "outline" | "default";
+  className?: string;
   inputClassName?: string;
-  onValueChange?: (value: string) => void;
-  value?: string;
-  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  labelClassName?: string;
+  containerClassName?: string;
+  onValueChange?: (value: number | string) => void;
+  value?: number | string;
+  defaultValue?: number | string;
+  onChange?: (value: number | string) => void;
   error?: string;
 }
 /**
- * CompactTextarea - Enhanced textarea with InputGroup support
+ * CompactNumberInput - A space-efficient number input with optional increment/decrement buttons
  *
  * Features:
  * - Floating label design
- * - InputGroup support with addons
- * - Character counter with maxLength
- * - Controller integration for react-hook-form
+ * - Optional increment/decrement buttons
+ * - Support for min/max/step values
+ * - Prefix/suffix support
+ * - Form integration via control prop
  * - Direct usage without form
  */
-declare function CompactTextarea<T extends FieldValues = FieldValues>({
+declare function CompactNumberInput<T extends FieldValues = FieldValues>({
   control,
   name,
   description,
@@ -99,33 +108,33 @@ declare function CompactTextarea<T extends FieldValues = FieldValues>({
   label,
   placeholder,
   disabled,
-  rows,
-  addonLeft,
-  addonRight,
+  min,
+  max,
+  step,
+  prefix,
+  suffix,
+  showButtons,
+  buttonVariant,
   className,
   inputClassName,
+  labelClassName,
+  containerClassName,
   onValueChange,
   value,
+  defaultValue,
   onChange,
   error,
-  cols,
-  wrap,
-  autoComplete,
-  autoFocus,
-  maxLength,
-  minLength,
-  readOnly,
-  spellCheck,
   ref,
   ...props
-}: CompactTextareaProps<T> & {
-  ref?: Ref<HTMLTextAreaElement>;
+}: CompactNumberInputProps<T> & {
+  ref?: Ref<HTMLInputElement>;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/compact/compact-select.d.ts
 interface SelectOption {
   value: string;
   label: string;
+  disabled?: boolean;
 }
 interface CompactSelectProps<T extends FieldValues = FieldValues> {
   control?: Control<T>;
@@ -136,13 +145,15 @@ interface CompactSelectProps<T extends FieldValues = FieldValues> {
   placeholder?: string;
   disabled?: boolean;
   items?: SelectOption[];
+  /** When true, auto-adds a clear option using the placeholder text as its label */
+  clearable?: boolean;
   className?: string;
   onValueChange?: (value: string) => void;
   value?: string;
   error?: string;
 }
 /**
- * CompactSelect - Simple, clean select dropdown
+ * CompactSelect - Floating-label select dropdown
  *
  * @example
  * <CompactSelect
@@ -151,6 +162,7 @@ interface CompactSelectProps<T extends FieldValues = FieldValues> {
  *     { value: "active", label: "Active" },
  *     { value: "inactive", label: "Inactive" }
  *   ]}
+ *   clearable
  * />
  */
 declare function CompactSelect<T extends FieldValues = FieldValues>({
@@ -162,6 +174,7 @@ declare function CompactSelect<T extends FieldValues = FieldValues>({
   placeholder,
   disabled,
   items,
+  clearable,
   className,
   onValueChange,
   value,
@@ -172,8 +185,12 @@ declare function CompactSelect<T extends FieldValues = FieldValues>({
   ref?: Ref<HTMLButtonElement>;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/compact/compact-number-input.d.ts
-interface CompactNumberInputProps<T extends FieldValues = FieldValues> {
+//#region src/components/compact/compact-slug-field.d.ts
+/**
+ * Generates a URL-friendly slug from a string
+ */
+declare function generateSlug(text: string): string;
+interface CompactSlugFieldProps<T extends FieldValues = FieldValues> {
   control?: Control<T>;
   name?: Path<T>;
   description?: string;
@@ -181,35 +198,31 @@ interface CompactNumberInputProps<T extends FieldValues = FieldValues> {
   label?: string;
   placeholder?: string;
   disabled?: boolean;
-  min?: number;
-  max?: number;
-  step?: number;
-  prefix?: ReactNode;
-  suffix?: ReactNode;
-  showButtons?: boolean;
-  buttonVariant?: "ghost" | "outline" | "default";
+  icon?: ReactNode;
+  sourceValue?: string;
+  onGenerate?: (source: string) => string;
   className?: string;
   inputClassName?: string;
-  labelClassName?: string;
-  containerClassName?: string;
-  onValueChange?: (value: number | string) => void;
-  value?: number | string;
-  defaultValue?: number | string;
-  onChange?: (value: number | string) => void;
+  onValueChange?: (value: string) => void;
+  value?: string;
+  onChange?: (e: ChangeEvent<HTMLInputElement> | {
+    target: {
+      value: string;
+    };
+  }) => void;
   error?: string;
 }
 /**
- * CompactNumberInput - A space-efficient number input with optional increment/decrement buttons
+ * CompactSlugField - Compact slug input with auto-generation
  *
  * Features:
- * - Floating label design
- * - Optional increment/decrement buttons
- * - Support for min/max/step values
- * - Prefix/suffix support
+ * - Compact design with floating label
+ * - Auto-generate slug from source field
+ * - Manual editing support
+ * - InputGroup with generate button
  * - Form integration via control prop
- * - Direct usage without form
  */
-declare function CompactNumberInput<T extends FieldValues = FieldValues>({
+declare function CompactSlugField<T extends FieldValues = FieldValues>({
   control,
   name,
   description,
@@ -217,25 +230,18 @@ declare function CompactNumberInput<T extends FieldValues = FieldValues>({
   label,
   placeholder,
   disabled,
-  min,
-  max,
-  step,
-  prefix,
-  suffix,
-  showButtons,
-  buttonVariant,
+  icon,
+  sourceValue,
+  onGenerate,
   className,
   inputClassName,
-  labelClassName,
-  containerClassName,
   onValueChange,
   value,
-  defaultValue,
   onChange,
   error,
   ref,
   ...props
-}: CompactNumberInputProps<T> & {
+}: CompactSlugFieldProps<T> & {
   ref?: Ref<HTMLInputElement>;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
@@ -264,14 +270,11 @@ interface CompactTagChoiceProps<T extends FieldValues = FieldValues> {
   error?: string;
 }
 /**
- * CompactTagChoice - A compact tag selection input
+ * CompactTagChoice - A compact tag selection input with floating label
  *
- * Features:
- * - Multi-select tag interface
- * - Maximum selection limit
- * - Popover for selecting options
- * - Form integration via control prop
- * - Direct usage without form
+ * Uses a trigger button that shows selected count or placeholder,
+ * with a popover dropdown listing available choices.
+ * Selected items display as inline badges below the trigger.
  */
 declare function CompactTagChoice<T extends FieldValues = FieldValues>({
   control,
@@ -296,12 +299,8 @@ declare function CompactTagChoice<T extends FieldValues = FieldValues>({
   ref?: Ref<HTMLDivElement>;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/compact/compact-slug-field.d.ts
-/**
- * Generates a URL-friendly slug from a string
- */
-declare function generateSlug(text: string): string;
-interface CompactSlugFieldProps<T extends FieldValues = FieldValues> {
+//#region src/components/compact/compact-textarea.d.ts
+interface CompactTextareaProps<T extends FieldValues = FieldValues> extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
   control?: Control<T>;
   name?: Path<T>;
   description?: string;
@@ -309,31 +308,26 @@ interface CompactSlugFieldProps<T extends FieldValues = FieldValues> {
   label?: string;
   placeholder?: string;
   disabled?: boolean;
-  icon?: ReactNode;
-  sourceValue?: string;
-  onGenerate?: (source: string) => string;
-  className?: string;
+  rows?: number;
+  addonLeft?: ReactNode;
+  addonRight?: ReactNode;
   inputClassName?: string;
   onValueChange?: (value: string) => void;
   value?: string;
-  onChange?: (e: ChangeEvent<HTMLInputElement> | {
-    target: {
-      value: string;
-    };
-  }) => void;
+  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   error?: string;
 }
 /**
- * CompactSlugField - Compact slug input with auto-generation
+ * CompactTextarea - Enhanced textarea with InputGroup support
  *
  * Features:
- * - Compact design with floating label
- * - Auto-generate slug from source field
- * - Manual editing support
- * - InputGroup with generate button
- * - Form integration via control prop
+ * - Floating label design
+ * - InputGroup support with addons
+ * - Character counter with maxLength
+ * - Controller integration for react-hook-form
+ * - Direct usage without form
  */
-declare function CompactSlugField<T extends FieldValues = FieldValues>({
+declare function CompactTextarea<T extends FieldValues = FieldValues>({
   control,
   name,
   description,
@@ -341,19 +335,27 @@ declare function CompactSlugField<T extends FieldValues = FieldValues>({
   label,
   placeholder,
   disabled,
-  icon,
-  sourceValue,
-  onGenerate,
+  rows,
+  addonLeft,
+  addonRight,
   className,
   inputClassName,
   onValueChange,
   value,
   onChange,
   error,
+  cols,
+  wrap,
+  autoComplete,
+  autoFocus,
+  maxLength,
+  minLength,
+  readOnly,
+  spellCheck,
   ref,
   ...props
-}: CompactSlugFieldProps<T> & {
-  ref?: Ref<HTMLInputElement>;
+}: CompactTextareaProps<T> & {
+  ref?: Ref<HTMLTextAreaElement>;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { CompactInput, type CompactInputProps, CompactNumberInput, type CompactNumberInputProps, CompactSelect, type CompactSelectProps, CompactSlugField, type CompactSlugFieldProps, CompactTagChoice, type CompactTagChoiceProps, CompactTextarea, type CompactTextareaProps, generateSlug };