@djangocfg/ui-tools 2.1.412 → 2.1.413

package/src/tools/input/Combobox/lazy.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+/**
+ * Lazy-loaded Combobox Component
+ */
+
+import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
+import type {
+  ComboboxProps,
+  ComboboxTriggerProps,
+  ComboboxInputProps,
+  ComboboxListProps,
+  ComboboxItemProps,
+  ComboboxEmptyProps,
+} from './types';
+
+export type {
+  ComboboxProps,
+  ComboboxTriggerProps,
+  ComboboxInputProps,
+  ComboboxListProps,
+  ComboboxItemProps,
+  ComboboxEmptyProps,
+} from './types';
+
+export const LazyCombobox = createLazyComponent<ComboboxProps>(
+  () => import('./parts/Combobox').then((m) => ({ default: m.Combobox })),
+  {
+    displayName: 'LazyCombobox',
+    fallback: <LoadingFallback minHeight={100} showText={false} />,
+  }
+);
+
+export const LazyComboboxTrigger = createLazyComponent<ComboboxTriggerProps>(
+  () => import('./parts/Combobox').then((m) => ({ default: m.ComboboxTrigger })),
+  {
+    displayName: 'LazyComboboxTrigger',
+    fallback: null,
+  }
+);
+
+export const LazyComboboxInput = createLazyComponent<ComboboxInputProps>(
+  () => import('./parts/Combobox').then((m) => ({ default: m.ComboboxInput })),
+  {
+    displayName: 'LazyComboboxInput',
+    fallback: null,
+  }
+);
+
+export const LazyComboboxList = createLazyComponent<ComboboxListProps>(
+  () => import('./parts/Combobox').then((m) => ({ default: m.ComboboxList })),
+  {
+    displayName: 'LazyComboboxList',
+    fallback: null,
+  }
+);
+
+export const LazyComboboxItem = createLazyComponent<ComboboxItemProps>(
+  () => import('./parts/Combobox').then((m) => ({ default: m.ComboboxItem })),
+  {
+    displayName: 'LazyComboboxItem',
+    fallback: null,
+  }
+);
+
+export const LazyComboboxEmpty = createLazyComponent<ComboboxEmptyProps>(
+  () => import('./parts/Combobox').then((m) => ({ default: m.ComboboxEmpty })),
+  {
+    displayName: 'LazyComboboxEmpty',
+    fallback: null,
+  }
+);

package/src/tools/input/Combobox/parts/Combobox.tsx

@@ -0,0 +1,392 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { ChevronsUpDown, Check, X } from 'lucide-react';
+import {
+  Popover,
+  PopoverTrigger,
+} from '@djangocfg/ui-core/components';
+import { ComboboxProvider, useComboboxContext } from '../context';
+import type {
+  ComboboxProps,
+  ComboboxTriggerProps,
+  ComboboxInputProps,
+  ComboboxListProps,
+  ComboboxItemProps,
+  ComboboxEmptyProps,
+  ComboboxOption,
+} from '../types';
+
+function defaultFilter(options: ComboboxOption[], search: string): ComboboxOption[] {
+  const q = search.toLowerCase();
+  return options.filter(
+    (o) =>
+      o.label.toLowerCase().includes(q) ||
+      o.value.toLowerCase().includes(q) ||
+      o.description?.toLowerCase().includes(q)
+  );
+}
+
+export function Combobox({
+  children,
+  options,
+  value: valueProp,
+  defaultValue = null,
+  multiple = false,
+  placeholder = 'Select...',
+  onChange,
+  onFilter = defaultFilter,
+  disabled = false,
+  className,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState('');
+  const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+  const [internalValue, setInternalValue] = React.useState<string | string[] | null>(defaultValue);
+
+  const value = valueProp !== undefined ? valueProp : internalValue;
+
+  const filteredOptions = React.useMemo(
+    () => onFilter(options, search),
+    [options, search, onFilter]
+  );
+
+  const selectOption = React.useCallback(
+    (option: ComboboxOption) => {
+      if (multiple) {
+        const current = Array.isArray(value) ? value : [];
+        const exists = current.includes(option.value);
+        const next = exists
+          ? current.filter((v) => v !== option.value)
+          : [...current, option.value];
+        setInternalValue(next);
+        onChange?.(next);
+        if (!exists) {
+          setSearch('');
+        }
+      } else {
+        setInternalValue(option.value);
+        onChange?.(option.value);
+        setOpen(false);
+        setSearch('');
+      }
+    },
+    [multiple, value, onChange]
+  );
+
+  const removeValue = React.useCallback(
+    (val: string) => {
+      if (multiple) {
+        const current = Array.isArray(value) ? value : [];
+        const next = current.filter((v) => v !== val);
+        setInternalValue(next);
+        onChange?.(next);
+      } else {
+        setInternalValue(null);
+        onChange?.(null);
+      }
+    },
+    [multiple, value, onChange]
+  );
+
+  const isSelected = React.useCallback(
+    (val: string) => {
+      if (multiple) {
+        return Array.isArray(value) && value.includes(val);
+      }
+      return value === val;
+    },
+    [multiple, value]
+  );
+
+  const ctxValue = React.useMemo(
+    () => ({
+      open,
+      search,
+      value,
+      multiple,
+      highlightedIndex,
+      options,
+      filteredOptions,
+      setOpen,
+      setSearch,
+      setHighlightedIndex,
+      selectOption,
+      removeValue,
+      isSelected,
+    }),
+    [
+      open,
+      search,
+      value,
+      multiple,
+      highlightedIndex,
+      options,
+      filteredOptions,
+      selectOption,
+      removeValue,
+      isSelected,
+    ]
+  );
+
+  return (
+    <ComboboxProvider value={ctxValue}>
+      <div
+        data-slot="combobox"
+        data-disabled={disabled ? 'true' : undefined}
+        className={cn('relative', className)}
+      >
+        {children ?? (
+          <>
+            <ComboboxTrigger placeholder={placeholder} />
+            <ComboboxList />
+          </>
+        )}
+      </div>
+    </ComboboxProvider>
+  );
+}
+Combobox.displayName = 'Combobox';
+
+export function ComboboxTrigger({
+  children,
+  className,
+  placeholder = 'Select...',
+  ...props
+}: ComboboxTriggerProps & { placeholder?: string }) {
+  const { open, setOpen, value, multiple, options, removeValue } = useComboboxContext();
+
+  const selectedLabels = React.useMemo(() => {
+    if (multiple) {
+      const vals = Array.isArray(value) ? value : [];
+      return vals
+        .map((v) => options.find((o) => o.value === v)?.label ?? v)
+        .filter(Boolean);
+    }
+    if (!value) return [];
+    const opt = options.find((o) => o.value === value);
+    return opt ? [opt.label] : [value];
+  }, [value, multiple, options]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          data-slot="combobox-trigger"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            'flex h-9 w-full items-center justify-between rounded-md border border-input',
+            'bg-background px-3 py-2 text-sm shadow-sm ring-offset-background',
+            'placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          {...props}
+        >
+          {children ?? (
+            <div className="flex flex-1 items-center gap-1 overflow-hidden">
+              {selectedLabels.length === 0 ? (
+                <span className="text-muted-foreground">{placeholder}</span>
+              ) : (
+                selectedLabels.map((label, i) => (
+                  <span
+                    key={i}
+                    className="inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs"
+                  >
+                    {label}
+                    {multiple && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          const vals = Array.isArray(value) ? value : [];
+                          removeValue(vals[i]);
+                        }}
+                        className="rounded-sm hover:bg-muted-foreground/20"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    )}
+                  </span>
+                ))
+              )}
+            </div>
+          )}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </button>
+      </PopoverTrigger>
+    </Popover>
+  );
+}
+ComboboxTrigger.displayName = 'ComboboxTrigger';
+
+export function ComboboxInput({ className, onChange, onKeyDown, ...props }: ComboboxInputProps) {
+  const {
+    search,
+    setSearch,
+    setHighlightedIndex,
+    highlightedIndex,
+    filteredOptions,
+    selectOption,
+    setOpen,
+  } = useComboboxContext();
+
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value);
+      setHighlightedIndex(0);
+      onChange?.(e);
+    },
+    [setSearch, setHighlightedIndex, onChange]
+  );
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setHighlightedIndex((prev: number) =>
+            prev < filteredOptions.length - 1 ? prev + 1 : 0
+          );
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setHighlightedIndex((prev: number) =>
+            prev > 0 ? prev - 1 : filteredOptions.length - 1
+          );
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (filteredOptions[highlightedIndex]) {
+            selectOption(filteredOptions[highlightedIndex]);
+          }
+          break;
+        case 'Escape':
+          setOpen(false);
+          break;
+        default:
+          onKeyDown?.(e);
+      }
+    },
+    [filteredOptions, highlightedIndex, selectOption, setOpen, setHighlightedIndex, onKeyDown]
+  );
+
+  return (
+    <input
+      data-slot="combobox-input"
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm',
+        'placeholder:text-muted-foreground focus-visible:outline-none',
+        className
+      )}
+      value={search}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      {...props}
+    />
+  );
+}
+ComboboxInput.displayName = 'ComboboxInput';
+
+export function ComboboxList({ children, className, ...props }: ComboboxListProps) {
+  const { open, filteredOptions } = useComboboxContext();
+
+  if (!open) return null;
+
+  return (
+    <div
+      data-slot="combobox-list"
+      className={cn(
+        'absolute z-50 mt-1 w-full rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex flex-col gap-0.5 max-h-60 overflow-y-auto">
+        {children ??
+          filteredOptions.map((option, index) => (
+            <ComboboxItem key={option.value} option={option} index={index} />
+          ))}
+      </div>
+    </div>
+  );
+}
+ComboboxList.displayName = 'ComboboxList';
+
+export function ComboboxItem({
+  option,
+  index,
+  className,
+  onClick,
+  ...props
+}: ComboboxItemProps) {
+  const { highlightedIndex, selectOption, setHighlightedIndex, isSelected } =
+    useComboboxContext();
+  const isHighlighted = highlightedIndex === index;
+  const selected = isSelected(option.value);
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      selectOption(option);
+      onClick?.(e);
+    },
+    [option, selectOption, onClick]
+  );
+
+  const handlePointerEnter = React.useCallback(() => {
+    setHighlightedIndex(index);
+  }, [index, setHighlightedIndex]);
+
+  return (
+    <div
+      data-slot="combobox-item"
+      data-value={option.value}
+      data-highlighted={isHighlighted ? 'true' : undefined}
+      data-selected={selected ? 'true' : undefined}
+      data-disabled={option.disabled ? 'true' : undefined}
+      onClick={handleClick}
+      onPointerEnter={handlePointerEnter}
+      className={cn(
+        'relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer',
+        'hover:bg-accent hover:text-accent-foreground',
+        isHighlighted && 'bg-accent text-accent-foreground',
+        option.disabled && 'pointer-events-none opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <span className="flex h-4 w-4 items-center justify-center">
+        {selected && <Check className="h-4 w-4" />}
+      </span>
+      {option.icon && <span className="shrink-0">{option.icon}</span>}
+      <div className="flex flex-col">
+        <span className="truncate">{option.label}</span>
+        {option.description && (
+          <span className="text-xs text-muted-foreground">{option.description}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+ComboboxItem.displayName = 'ComboboxItem';
+
+export function ComboboxEmpty({ children, className, ...props }: ComboboxEmptyProps) {
+  const { filteredOptions } = useComboboxContext();
+
+  if (filteredOptions.length > 0) return null;
+
+  return (
+    <div
+      data-slot="combobox-empty"
+      className={cn('px-2 py-4 text-center text-sm text-muted-foreground', className)}
+      {...props}
+    >
+      {children ?? 'No results found.'}
+    </div>
+  );
+}
+ComboboxEmpty.displayName = 'ComboboxEmpty';

package/src/tools/input/Combobox/parts/index.ts

@@ -0,0 +1,10 @@
+'use client';
+
+export {
+  Combobox,
+  ComboboxTrigger,
+  ComboboxInput,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+} from './Combobox';

package/src/tools/input/Combobox/types.ts

@@ -0,0 +1,67 @@
+'use client';
+
+import type * as React from 'react';
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface ComboboxContextValue {
+  open: boolean;
+  search: string;
+  value: string | string[] | null;
+  multiple: boolean;
+  highlightedIndex: number;
+  options: ComboboxOption[];
+  filteredOptions: ComboboxOption[];
+  setOpen: (open: boolean) => void;
+  setSearch: (search: string) => void;
+  setHighlightedIndex: (index: number | ((prev: number) => number)) => void;
+  selectOption: (option: ComboboxOption) => void;
+  removeValue: (value: string) => void;
+  isSelected: (value: string) => boolean;
+}
+
+export interface ComboboxProps {
+  children: React.ReactNode;
+  /** Available options */
+  options: ComboboxOption[];
+  /** Controlled value */
+  value?: string | string[] | null;
+  /** Default value */
+  defaultValue?: string | string[] | null;
+  /** Allow multiple selection */
+  multiple?: boolean;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Called when value changes */
+  onChange?: (value: string | string[] | null) => void;
+  /** Custom filter function */
+  onFilter?: (options: ComboboxOption[], search: string) => ComboboxOption[];
+  /** Disabled state */
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface ComboboxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: React.ReactNode;
+}
+
+export interface ComboboxInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export interface ComboboxListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export interface ComboboxItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  option: ComboboxOption;
+  index: number;
+}
+
+export interface ComboboxEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}

package/src/tools/{CronScheduler → input/CronScheduler}/index.tsx

@@ -17,7 +17,7 @@
  */
 
 import React, { lazy, Suspense } from 'react';
-import { LoadingFallback } from '../../components';
+import { LoadingFallback } from '../../../components';
 import type { CronSchedulerProps } from './types';
 
 // Lazy load the client component

package/src/tools/{CronScheduler → input/CronScheduler}/lazy.tsx

@@ -15,7 +15,7 @@
  * />
  */
 
-import { createLazyComponent, LoadingFallback } from '../../components';
+import { createLazyComponent, LoadingFallback } from '../../../components';
 import type { CronSchedulerProps } from './types';
 
 // Re-export types

package/src/tools/input/Scroller/context/ScrollerContext.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import type { ScrollerContextValue } from '../types';
+
+const ScrollerContext = React.createContext<ScrollerContextValue | null>(null);
+
+export function ScrollerProvider({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: ScrollerContextValue;
+}) {
+  return (
+    <ScrollerContext.Provider value={value}>
+      {children}
+    </ScrollerContext.Provider>
+  );
+}
+
+export function useScrollerContext() {
+  const context = React.useContext(ScrollerContext);
+  if (!context) {
+    throw new Error(
+      'useScrollerContext must be used within a ScrollerProvider'
+    );
+  }
+  return context;
+}

package/src/tools/input/Scroller/context/index.ts

@@ -0,0 +1,6 @@
+'use client';
+
+export {
+  ScrollerProvider,
+  useScrollerContext,
+} from './ScrollerContext';

package/src/tools/input/Scroller/index.ts

@@ -0,0 +1,34 @@
+'use client';
+
+/**
+ * Scroller
+ *
+ * Smooth scroll container with optional snap points and scroll indicators.
+ * Supports both horizontal and vertical orientations.
+ *
+ * @example
+ * import { Scroller, ScrollerItem } from '@djangocfg/ui-tools/scroller';
+ *
+ * <Scroller orientation="horizontal" snap showIndicators>
+ *   <ScrollerItem>Item 1</ScrollerItem>
+ *   <ScrollerItem>Item 2</ScrollerItem>
+ * </Scroller>
+ */
+
+export {
+  Scroller,
+  ScrollerItem,
+} from './parts';
+
+export {
+  ScrollerProvider,
+  useScrollerContext,
+} from './context';
+
+export type {
+  ScrollerProps,
+  ScrollerItemProps,
+  ScrollerIndicatorProps,
+  ScrollerContextValue,
+  SnapAlign,
+} from './types';

package/src/tools/input/Scroller/lazy.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+/**
+ * Lazy-loaded Scroller Component
+ */
+
+import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
+import type {
+  ScrollerProps,
+  ScrollerItemProps,
+} from './types';
+
+export type {
+  ScrollerProps,
+  ScrollerItemProps,
+} from './types';
+
+export const LazyScroller = createLazyComponent<ScrollerProps>(
+  () => import('./parts/Scroller').then((m) => ({ default: m.Scroller })),
+  {
+    displayName: 'LazyScroller',
+    fallback: <LoadingFallback minHeight={100} showText={false} />,
+  }
+);
+
+export const LazyScrollerItem = createLazyComponent<ScrollerItemProps>(
+  () => import('./parts/Scroller').then((m) => ({ default: m.ScrollerItem })),
+  {
+    displayName: 'LazyScrollerItem',
+    fallback: null,
+  }
+);