@classytic/fluid 0.2.4 → 0.3.2

package/dist/command.mjs

@@ -0,0 +1,132 @@
+"use client";
+
+import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import { t as useKeyboardShortcut } from "./use-keyboard-shortcut-Bl6YM5Q7.mjs";
+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";
+
+//#region src/components/command/command-search.tsx
+const CommandSearchContext = createContext(null);
+/**
+* useCommandSearch — Access command search open/close state.
+*
+* @example
+* ```tsx
+* const { open, setOpen } = useCommandSearch();
+* ```
+*/
+function useCommandSearch() {
+	const ctx = useContext(CommandSearchContext);
+	if (!ctx) throw new Error("useCommandSearch must be used within <CommandSearch>");
+	return ctx;
+}
+/**
+* CommandSearch — Command palette dialog with keyboard shortcut.
+* Wraps consumer's @/components/ui/command (Base UI shadcn).
+*
+* @example
+* ```tsx
+* <CommandSearch shortcut="mod+k">
+*   <CommandSearch.Input placeholder="Type a command or search..." />
+*   <CommandSearch.List>
+*     <CommandSearch.Empty>No results found.</CommandSearch.Empty>
+*     <CommandSearch.Group heading="Navigation">
+*       <CommandSearch.Item icon={<Home />} shortcut="⌘H" onSelect={() => navigate("/")}>
+*         Home
+*       </CommandSearch.Item>
+*     </CommandSearch.Group>
+*   </CommandSearch.List>
+* </CommandSearch>
+* ```
+*/
+function CommandSearchRoot({ children, open: controlledOpen, onOpenChange: controlledOnOpenChange, shortcut = "mod+k", enableShortcut = true, title = "Command Palette", description, className }) {
+	const [internalOpen, setInternalOpen] = useState(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : internalOpen;
+	const setOpen = useCallback((value) => {
+		if (isControlled) controlledOnOpenChange?.(value);
+		else setInternalOpen(value);
+	}, [isControlled, controlledOnOpenChange]);
+	useKeyboardShortcut(shortcut, () => setOpen(!open), {
+		enabled: enableShortcut,
+		disableInInputs: false
+	});
+	return /* @__PURE__ */ jsx(CommandSearchContext.Provider, {
+		value: {
+			open,
+			setOpen
+		},
+		children: /* @__PURE__ */ jsx(CommandDialog, {
+			open,
+			onOpenChange: setOpen,
+			title,
+			description,
+			className,
+			children: /* @__PURE__ */ jsx(Command, { children })
+		})
+	});
+}
+function CommandSearchInput({ placeholder = "Type a command or search...", className }) {
+	return /* @__PURE__ */ jsx(CommandInput, {
+		placeholder,
+		className
+	});
+}
+function CommandSearchList({ children, className }) {
+	return /* @__PURE__ */ jsx(CommandList, {
+		className,
+		children
+	});
+}
+function CommandSearchGroup({ heading, children, className }) {
+	return /* @__PURE__ */ jsx(CommandGroup, {
+		heading,
+		className,
+		children
+	});
+}
+function CommandSearchItemComponent({ children, icon, shortcut: shortcutDisplay, onSelect, value, disabled, className }) {
+	const { setOpen } = useCommandSearch();
+	return /* @__PURE__ */ jsxs(CommandItem, {
+		onSelect: useCallback((val) => {
+			onSelect?.(val);
+			setOpen(false);
+		}, [onSelect, setOpen]),
+		value,
+		disabled,
+		className: cn("gap-2", className),
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1",
+				children
+			}),
+			shortcutDisplay && /* @__PURE__ */ jsx(Kbd, { children: shortcutDisplay })
+		]
+	});
+}
+function CommandSearchEmpty({ children = "No results found.", className }) {
+	return /* @__PURE__ */ jsx(CommandEmpty, {
+		className,
+		children
+	});
+}
+function CommandSearchSeparator({ className }) {
+	return /* @__PURE__ */ jsx(CommandSeparator, { className });
+}
+const CommandSearch = Object.assign(CommandSearchRoot, {
+	Input: CommandSearchInput,
+	List: CommandSearchList,
+	Group: CommandSearchGroup,
+	Item: CommandSearchItemComponent,
+	Empty: CommandSearchEmpty,
+	Separator: CommandSearchSeparator
+});
+
+//#endregion
+export { CommandSearch, useCommandSearch, useKeyboardShortcut };

package/dist/compact.d.mts

@@ -0,0 +1,359 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ChangeEvent, InputHTMLAttributes, ReactNode, Ref, TextareaHTMLAttributes } from "react";
+import { Control, FieldValues, Path } from "react-hook-form";
+
+//#region src/components/compact/compact-input.d.ts
+interface CompactInputProps<T extends FieldValues = FieldValues> extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  control?: Control<T>;
+  name?: Path<T>;
+  description?: string;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  type?: string;
+  addonLeft?: ReactNode;
+  addonRight?: ReactNode;
+  inputClassName?: string;
+  onValueChange?: (value: string) => void;
+  value?: string;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  error?: string;
+}
+/**
+ * CompactInput - Enhanced form input with InputGroup support
+ *
+ * Features:
+ * - Floating label design
+ * - InputGroup support with icons, buttons, and text addons
+ * - Controller integration for react-hook-form
+ * - Direct usage without form
+ */
+declare function CompactInput<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  description,
+  required,
+  label,
+  placeholder,
+  disabled,
+  type,
+  addonLeft,
+  addonRight,
+  className,
+  inputClassName,
+  onValueChange,
+  value,
+  onChange,
+  error,
+  autoComplete,
+  autoFocus,
+  maxLength,
+  minLength,
+  max,
+  min,
+  pattern,
+  readOnly,
+  step,
+  inputMode,
+  enterKeyHint,
+  ref,
+  ...props
+}: CompactInputProps<T> & {
+  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"> {
+  control?: Control<T>;
+  name?: Path<T>;
+  description?: string;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  rows?: number;
+  addonLeft?: ReactNode;
+  addonRight?: ReactNode;
+  inputClassName?: string;
+  onValueChange?: (value: string) => void;
+  value?: string;
+  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  error?: string;
+}
+/**
+ * CompactTextarea - Enhanced textarea with InputGroup support
+ *
+ * Features:
+ * - Floating label design
+ * - InputGroup support with addons
+ * - Character counter with maxLength
+ * - Controller integration for react-hook-form
+ * - Direct usage without form
+ */
+declare function CompactTextarea<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  description,
+  required,
+  label,
+  placeholder,
+  disabled,
+  rows,
+  addonLeft,
+  addonRight,
+  className,
+  inputClassName,
+  onValueChange,
+  value,
+  onChange,
+  error,
+  cols,
+  wrap,
+  autoComplete,
+  autoFocus,
+  maxLength,
+  minLength,
+  readOnly,
+  spellCheck,
+  ref,
+  ...props
+}: CompactTextareaProps<T> & {
+  ref?: Ref<HTMLTextAreaElement>;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/compact/compact-select.d.ts
+interface SelectOption {
+  value: string;
+  label: string;
+}
+interface CompactSelectProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name?: Path<T>;
+  description?: string;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  items?: SelectOption[];
+  className?: string;
+  onValueChange?: (value: string) => void;
+  value?: string;
+  error?: string;
+}
+/**
+ * CompactSelect - Simple, clean select dropdown
+ *
+ * @example
+ * <CompactSelect
+ *   label="Status"
+ *   items={[
+ *     { value: "active", label: "Active" },
+ *     { value: "inactive", label: "Inactive" }
+ *   ]}
+ * />
+ */
+declare function CompactSelect<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  description,
+  required,
+  label,
+  placeholder,
+  disabled,
+  items,
+  className,
+  onValueChange,
+  value,
+  error,
+  ref,
+  ...props
+}: CompactSelectProps<T> & {
+  ref?: Ref<HTMLButtonElement>;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/compact/compact-number-input.d.ts
+interface CompactNumberInputProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name?: Path<T>;
+  description?: string;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  showButtons?: boolean;
+  buttonVariant?: "ghost" | "outline" | "default";
+  className?: string;
+  inputClassName?: string;
+  labelClassName?: string;
+  containerClassName?: string;
+  onValueChange?: (value: number | string) => void;
+  value?: number | string;
+  defaultValue?: number | string;
+  onChange?: (value: number | string) => void;
+  error?: string;
+}
+/**
+ * CompactNumberInput - A space-efficient number input with optional increment/decrement buttons
+ *
+ * Features:
+ * - Floating label design
+ * - Optional increment/decrement buttons
+ * - Support for min/max/step values
+ * - Prefix/suffix support
+ * - Form integration via control prop
+ * - Direct usage without form
+ */
+declare function CompactNumberInput<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  description,
+  required,
+  label,
+  placeholder,
+  disabled,
+  min,
+  max,
+  step,
+  prefix,
+  suffix,
+  showButtons,
+  buttonVariant,
+  className,
+  inputClassName,
+  labelClassName,
+  containerClassName,
+  onValueChange,
+  value,
+  defaultValue,
+  onChange,
+  error,
+  ref,
+  ...props
+}: CompactNumberInputProps<T> & {
+  ref?: Ref<HTMLInputElement>;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/compact/compact-tag-choice.d.ts
+interface Choice {
+  value: string;
+  label: string;
+}
+interface CompactTagChoiceProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name?: Path<T>;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  choices?: Choice[];
+  maxSelections?: number;
+  className?: string;
+  containerClassName?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  onValueChange?: (value: string[]) => void;
+  error?: string;
+}
+/**
+ * CompactTagChoice - A compact tag selection input
+ *
+ * Features:
+ * - Multi-select tag interface
+ * - Maximum selection limit
+ * - Popover for selecting options
+ * - Form integration via control prop
+ * - Direct usage without form
+ */
+declare function CompactTagChoice<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  placeholder,
+  required,
+  disabled,
+  choices,
+  maxSelections,
+  className,
+  containerClassName,
+  labelClassName,
+  inputClassName,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange,
+  error,
+  ref
+}: CompactTagChoiceProps<T> & {
+  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> {
+  control?: Control<T>;
+  name?: Path<T>;
+  description?: string;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  icon?: ReactNode;
+  sourceValue?: string;
+  onGenerate?: (source: string) => string;
+  className?: string;
+  inputClassName?: string;
+  onValueChange?: (value: string) => void;
+  value?: string;
+  onChange?: (e: ChangeEvent<HTMLInputElement> | {
+    target: {
+      value: string;
+    };
+  }) => void;
+  error?: string;
+}
+/**
+ * CompactSlugField - Compact slug input with auto-generation
+ *
+ * Features:
+ * - Compact design with floating label
+ * - Auto-generate slug from source field
+ * - Manual editing support
+ * - InputGroup with generate button
+ * - Form integration via control prop
+ */
+declare function CompactSlugField<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  description,
+  required,
+  label,
+  placeholder,
+  disabled,
+  icon,
+  sourceValue,
+  onGenerate,
+  className,
+  inputClassName,
+  onValueChange,
+  value,
+  onChange,
+  error,
+  ref,
+  ...props
+}: CompactSlugFieldProps<T> & {
+  ref?: Ref<HTMLInputElement>;
+}): 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 };