@djangocfg/ui-tools 2.1.411 → 2.1.413

package/src/tools/{CronScheduler → input/CronScheduler}/components/CustomInput.tsx

@@ -10,7 +10,7 @@ import { useState, useEffect } from 'react';
 import { Input } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { AlertCircle, CheckCircle2 } from 'lucide-react';
-import { useCronCustom } from '../context/hooks';
+import { useCronCustom, useCronSize } from '../context/hooks';
 import { isValidCron } from '../utils/cron-parser';
 
 export interface CustomInputProps {
@@ -20,6 +20,7 @@ export interface CustomInputProps {
 
 export function CustomInput({ disabled, className }: CustomInputProps) {
   const { customCron, isValid, setCustomCron } = useCronCustom();
+  const isSm = useCronSize() === 'sm';
   const [localValue, setLocalValue] = useState(customCron);
   const [localValid, setLocalValid] = useState(isValid);
 
@@ -39,8 +40,14 @@ export function CustomInput({ disabled, className }: CustomInputProps) {
   const showError = !localValid && localValue.trim().length > 0;
 
   return (
-    <div className={cn('space-y-2', className)}>
-      <label htmlFor="cron-custom-input" className="text-sm text-muted-foreground">
+    <div className={cn(isSm ? 'space-y-1.5' : 'space-y-2', className)}>
+      <label
+        htmlFor="cron-custom-input"
+        className={cn(
+          'text-muted-foreground',
+          isSm ? 'text-xs' : 'text-sm'
+        )}
+      >
         Cron expression
       </label>
 
@@ -59,16 +66,28 @@ export function CustomInput({ disabled, className }: CustomInputProps) {
           aria-invalid={showError}
           aria-describedby={showError ? 'cron-custom-error' : undefined}
           className={cn(
-            'font-mono text-base pr-10 h-11',
+            'font-mono',
+            isSm ? 'text-xs h-8 pr-8' : 'text-base h-11 pr-10',
             showError && 'border-destructive focus-visible:ring-destructive/50'
           )}
         />
-        <div className="absolute right-3 top-1/2 -translate-y-1/2">
+        <div
+          className={cn(
+            'absolute top-1/2 -translate-y-1/2',
+            isSm ? 'right-2' : 'right-3'
+          )}
+        >
           {localValue.trim() && (
             localValid ? (
-              <CheckCircle2 aria-hidden="true" className="h-5 w-5 text-success" />
+              <CheckCircle2
+                aria-hidden="true"
+                className={cn('text-success', isSm ? 'h-4 w-4' : 'h-5 w-5')}
+              />
             ) : (
-              <AlertCircle aria-hidden="true" className="h-5 w-5 text-destructive" />
+              <AlertCircle
+                aria-hidden="true"
+                className={cn('text-destructive', isSm ? 'h-4 w-4' : 'h-5 w-5')}
+              />
             )
           )}
         </div>

package/src/tools/{CronScheduler → input/CronScheduler}/components/DayChips.tsx

@@ -8,7 +8,7 @@
  */
 
 import { cn } from '@djangocfg/ui-core/lib';
-import { useCronWeekDays } from '../context/hooks';
+import { useCronWeekDays, useCronSize } from '../context/hooks';
 import type { WeekDay } from '../types';
 
 const DAYS: { value: WeekDay; label: string; full: string }[] = [
@@ -33,6 +33,7 @@ export function DayChips({
   className,
 }: DayChipsProps) {
   const { weekDays, toggleWeekDay, setWeekDays } = useCronWeekDays();
+  const isSm = useCronSize() === 'sm';
 
   // Ensure weekDays is always an array
   const safeWeekDays = Array.isArray(weekDays) ? weekDays : [];
@@ -54,7 +55,10 @@ export function DayChips({
       isWeekendDay,
       className: cn(
         'flex flex-col items-center justify-center',
-        'py-2.5 rounded-lg text-xs font-medium',
+        'font-medium',
+        isSm
+          ? 'h-6 rounded-md text-[11px] leading-none'
+          : 'py-2.5 rounded-lg text-xs',
         'transition-all duration-150',
         'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
         'active:scale-[0.97]',
@@ -76,9 +80,13 @@ export function DayChips({
   ];
 
   return (
-    <div className={cn('space-y-3', className)}>
+    <div className={cn(isSm ? 'space-y-1.5' : 'space-y-3', className)}>
       {/* Day Grid - full width */}
-      <div className="grid grid-cols-7 gap-1" role="group" aria-label="Days of week">
+      <div
+        className={cn('grid grid-cols-7', isSm ? 'gap-1' : 'gap-1')}
+        role="group"
+        aria-label="Days of week"
+      >
         {dayButtons.map((day) => (
           <button
             key={day.value}
@@ -96,7 +104,7 @@ export function DayChips({
 
       {/* Quick Presets */}
       {showPresets && (
-        <div className="flex gap-2">
+        <div className={cn('flex', isSm ? 'gap-1' : 'gap-2')}>
           {presets.map((preset) => (
             <PresetButton
               key={preset.label}
@@ -104,6 +112,7 @@ export function DayChips({
               isActive={preset.isActive}
               onClick={() => setWeekDays(preset.days)}
               disabled={disabled}
+              compact={isSm}
             />
           ))}
         </div>
@@ -117,16 +126,20 @@ interface PresetButtonProps {
   isActive: boolean;
   onClick: () => void;
   disabled?: boolean;
+  compact?: boolean;
 }
 
-function PresetButton({ label, isActive, onClick, disabled }: PresetButtonProps) {
+function PresetButton({ label, isActive, onClick, disabled, compact }: PresetButtonProps) {
   return (
     <button
       type="button"
       disabled={disabled}
       onClick={onClick}
       className={cn(
-        'flex-1 px-3 py-1.5 rounded-md text-xs font-medium',
+        'flex-1 rounded-md font-medium',
+        compact
+          ? 'h-6 px-1.5 text-[11px] leading-none'
+          : 'px-3 py-1.5 text-xs',
         'transition-colors duration-150',
         'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
         isActive

package/src/tools/{CronScheduler → input/CronScheduler}/components/MonthDayGrid.tsx

@@ -8,7 +8,7 @@
  */
 
 import { cn } from '@djangocfg/ui-core/lib';
-import { useCronMonthDays } from '../context/hooks';
+import { useCronMonthDays, useCronSize } from '../context/hooks';
 import type { MonthDay } from '../types';
 
 // Generate days 1-31
@@ -29,6 +29,7 @@ export function MonthDayGrid({
   className,
 }: MonthDayGridProps) {
   const { monthDays, toggleMonthDay, setMonthDays } = useCronMonthDays();
+  const isSm = useCronSize() === 'sm';
 
   // Ensure monthDays is always an array
   const safeMonthDays = Array.isArray(monthDays) ? monthDays : [];
@@ -61,8 +62,11 @@ export function MonthDayGrid({
       day: day as MonthDay,
       isSelected,
       className: cn(
-        'aspect-square flex items-center justify-center',
-        'rounded-lg text-sm font-medium',
+        'flex items-center justify-center',
+        'font-medium',
+        isSm
+          ? 'h-7 rounded-[5px] text-[10px] leading-none'
+          : 'aspect-square rounded-lg text-sm',
         'transition-all duration-150',
         'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
         'active:scale-[0.95]',
@@ -82,10 +86,10 @@ export function MonthDayGrid({
   const selectionCount = safeMonthDays.length;
 
   return (
-    <div className={cn('space-y-3', className)}>
+    <div className={cn(isSm ? 'space-y-1.5' : 'space-y-3', className)}>
       {/* Quick Presets */}
       {showPresets && (
-        <div className="flex gap-2">
+        <div className={cn('flex', isSm ? 'gap-1' : 'gap-2')}>
           {presets.map((preset) => (
             <PresetButton
               key={preset.label}
@@ -93,16 +97,27 @@ export function MonthDayGrid({
               isActive={preset.isActive}
               onClick={() => setMonthDays(preset.days)}
               disabled={disabled}
+              compact={isSm}
             />
           ))}
         </div>
       )}
 
       {/* Calendar Grid - full width */}
-      <div className="grid grid-cols-7 gap-1" role="group" aria-label="Days of month">
+      <div
+        className={cn('grid grid-cols-7', isSm ? 'gap-0.5' : 'gap-1')}
+        role="group"
+        aria-label="Days of month"
+      >
         {gridCells.map((cell) => {
           if (cell.type === 'empty') {
-            return <div key={cell.key} aria-hidden="true" className="aspect-square" />;
+            return (
+              <div
+                key={cell.key}
+                aria-hidden="true"
+                className={isSm ? 'h-7' : 'aspect-square'}
+              />
+            );
           }
 
           return (
@@ -123,7 +138,13 @@ export function MonthDayGrid({
 
       {/* Selection hint */}
       {selectionCount > 1 && (
-        <p aria-live="polite" className="text-xs text-muted-foreground text-center">
+        <p
+          aria-live="polite"
+          className={cn(
+            'text-muted-foreground text-center',
+            isSm ? 'text-[10px]' : 'text-xs'
+          )}
+        >
           {selectionCount} days selected
         </p>
       )}
@@ -136,16 +157,20 @@ interface PresetButtonProps {
   isActive: boolean;
   onClick: () => void;
   disabled?: boolean;
+  compact?: boolean;
 }
 
-function PresetButton({ label, isActive, onClick, disabled }: PresetButtonProps) {
+function PresetButton({ label, isActive, onClick, disabled, compact }: PresetButtonProps) {
   return (
     <button
       type="button"
       disabled={disabled}
       onClick={onClick}
       className={cn(
-        'flex-1 px-3 py-1.5 rounded-md text-xs font-medium',
+        'flex-1 rounded-md font-medium',
+        compact
+          ? 'h-6 px-1.5 text-[11px] leading-none'
+          : 'px-3 py-1.5 text-xs',
         'transition-colors duration-150',
         'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
         isActive

package/src/tools/{CronScheduler → input/CronScheduler}/components/SchedulePreview.tsx

@@ -10,7 +10,7 @@
 import { useState, useCallback, useMemo } from 'react';
 import { Calendar, Copy, Check, ArrowRight } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core/lib';
-import { useCronPreview } from '../context/hooks';
+import { useCronPreview, useCronSize } from '../context/hooks';
 import { CronCheatsheet } from './CronCheatsheet';
 
 export interface SchedulePreviewProps {
@@ -31,6 +31,7 @@ export function SchedulePreview({
   className,
 }: SchedulePreviewProps) {
   const { cronExpression, humanDescription, isValid, initialValue } = useCronPreview();
+  const isSm = useCronSize() === 'sm';
 
   // Check if value has changed from initial
   const hasChanged = useMemo(
@@ -54,7 +55,8 @@ export function SchedulePreview({
       role="status"
       aria-live="polite"
       className={cn(
-        'px-3 py-2.5 rounded-lg border',
+        'rounded-lg border',
+        isSm ? 'px-2 py-1.5' : 'px-3 py-2.5',
         'bg-muted/30 border-border/50',
         !isValid && 'border-destructive/30 bg-destructive/5',
         className
@@ -62,17 +64,18 @@ export function SchedulePreview({
     >
       {/* Human description */}
       <div className="flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2 min-w-0">
+        <div className={cn('flex items-center min-w-0', isSm ? 'gap-1.5' : 'gap-2')}>
           <Calendar
             aria-hidden="true"
             className={cn(
-              'h-4 w-4 shrink-0',
+              'shrink-0',
+              isSm ? 'h-3.5 w-3.5' : 'h-4 w-4',
               isValid ? 'text-primary' : 'text-destructive'
             )}
           />
           <span
             className={cn(
-              'text-sm',
+              isSm ? 'text-xs' : 'text-sm',
               isValid ? 'text-foreground' : 'text-destructive'
             )}
           >

package/src/tools/{CronScheduler → input/CronScheduler}/components/ScheduleTypeSelector.tsx

@@ -9,7 +9,7 @@
 
 import { Tabs, TabsList, TabsTrigger } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
-import { useCronType } from '../context/hooks';
+import { useCronType, useCronSize } from '../context/hooks';
 import type { ScheduleType } from '../types';
 
 const SCHEDULE_TYPES: { value: ScheduleType; label: string }[] = [
@@ -29,9 +29,13 @@ export function ScheduleTypeSelector({
   className,
 }: ScheduleTypeSelectorProps) {
   const { type, setType } = useCronType();
+  const isSm = useCronSize() === 'sm';
 
   const triggerClassName = cn(
-    'text-xs font-medium px-2 py-1.5',
+    'font-medium',
+    isSm
+      ? 'text-[11px] leading-none px-1 py-0.5 h-6 rounded-[5px]'
+      : 'text-xs px-2 py-1.5',
     'data-[state=active]:shadow-sm',
     'transition-all duration-150'
   );
@@ -49,7 +53,12 @@ export function ScheduleTypeSelector({
       onValueChange={(v) => setType(v as ScheduleType)}
       className={cn('w-full', className)}
     >
-      <TabsList className="grid w-full grid-cols-4 h-9 p-0.5">
+      <TabsList
+        className={cn(
+          'grid w-full grid-cols-4',
+          isSm ? 'h-7 p-0.5 gap-0.5' : 'h-9 p-0.5'
+        )}
+      >
         {triggers.map((trigger) => (
           <TabsTrigger
             key={trigger.value}

package/src/tools/{CronScheduler → input/CronScheduler}/components/TimeSelector.tsx

@@ -15,7 +15,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { Clock } from 'lucide-react';
-import { useCronTime } from '../context/hooks';
+import { useCronTime, useCronSize } from '../context/hooks';
 
 const HOURS = Array.from({ length: 24 }, (_, i) => i);
 const MINUTES = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
@@ -32,6 +32,7 @@ export function TimeSelector({
   className,
 }: TimeSelectorProps) {
   const { hour, minute, setTime } = useCronTime();
+  const isSm = useCronSize() === 'sm';
 
   const is24h = format === '24h';
   const displayHour = is24h ? hour : (hour % 12) || 12;
@@ -60,28 +61,50 @@ export function TimeSelector({
 
   const hours = is24h ? HOURS : Array.from({ length: 12 }, (_, i) => i + 1);
 
+  // Compact-aware class fragments
+  const triggerClassName = cn(
+    isSm ? 'w-[58px] h-7 px-2 text-xs' : 'w-[70px] h-9'
+  );
+  const itemClassName = isSm ? 'text-xs' : undefined;
+
   return (
-    <div className={cn('flex items-center gap-3', className)}>
-      <div className="flex items-center gap-2 text-muted-foreground">
-        <Clock aria-hidden="true" className="h-4 w-4" />
-        <span className="text-sm">Run at</span>
+    <div
+      className={cn(
+        'flex items-center',
+        isSm ? 'gap-2' : 'gap-3',
+        className
+      )}
+    >
+      <div
+        className={cn(
+          'flex items-center text-muted-foreground',
+          isSm ? 'gap-1.5' : 'gap-2'
+        )}
+      >
+        <Clock
+          aria-hidden="true"
+          className={isSm ? 'h-3.5 w-3.5' : 'h-4 w-4'}
+        />
+        <span className={isSm ? 'text-xs' : 'text-sm'}>Run at</span>
       </div>
 
-      <div className="flex items-center gap-1.5 flex-1">
+      <div
+        className={cn('flex items-center flex-1', isSm ? 'gap-1' : 'gap-1.5')}
+      >
         {/* Hour */}
         <Select
           value={displayHour.toString()}
           onValueChange={handleHourChange}
           disabled={disabled}
         >
-          <SelectTrigger className="w-[70px] h-9">
+          <SelectTrigger className={triggerClassName}>
             <SelectValue>
               {displayHour.toString().padStart(2, '0')}
             </SelectValue>
           </SelectTrigger>
           <SelectContent className="max-h-48">
             {hours.map((h) => (
-              <SelectItem key={h} value={h.toString()}>
+              <SelectItem key={h} value={h.toString()} className={itemClassName}>
                 {h.toString().padStart(2, '0')}
               </SelectItem>
             ))}
@@ -96,14 +119,14 @@ export function TimeSelector({
           onValueChange={handleMinuteChange}
           disabled={disabled}
         >
-          <SelectTrigger className="w-[70px] h-9">
+          <SelectTrigger className={triggerClassName}>
             <SelectValue>
               {minute.toString().padStart(2, '0')}
             </SelectValue>
           </SelectTrigger>
           <SelectContent className="max-h-48">
             {MINUTES.map((m) => (
-              <SelectItem key={m} value={m.toString()}>
+              <SelectItem key={m} value={m.toString()} className={itemClassName}>
                 {m.toString().padStart(2, '0')}
               </SelectItem>
             ))}
@@ -117,12 +140,12 @@ export function TimeSelector({
             onValueChange={handlePeriodChange}
             disabled={disabled}
           >
-            <SelectTrigger className="w-[70px] h-9">
+            <SelectTrigger className={triggerClassName}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="AM">AM</SelectItem>
-              <SelectItem value="PM">PM</SelectItem>
+              <SelectItem value="AM" className={itemClassName}>AM</SelectItem>
+              <SelectItem value="PM" className={itemClassName}>PM</SelectItem>
             </SelectContent>
           </Select>
         )}

package/src/tools/{CronScheduler → input/CronScheduler}/context/CronSchedulerContext.tsx

@@ -57,6 +57,7 @@ export function CronSchedulerProvider({
   value,
   onChange,
   defaultType = 'daily',
+  size = 'default',
 }: CronSchedulerProviderProps) {
   // Track if this is initial mount to avoid calling onChange on mount
   const isInitialMount = useRef(true);
@@ -203,6 +204,8 @@ export function CronSchedulerProvider({
     () => ({
       // State
       ...state,
+      // Config
+      size,
       // Computed
       cronExpression,
       humanDescription,
@@ -219,6 +222,7 @@ export function CronSchedulerProvider({
     }),
     [
       state,
+      size,
       cronExpression,
       humanDescription,
       initialValue,

package/src/tools/{CronScheduler → input/CronScheduler}/context/hooks.ts

@@ -78,6 +78,14 @@ export function useCronPreview() {
   );
 }
 
+/**
+ * Hook for the configured visual density (`default` | `sm`).
+ * Returns a stable value — never causes re-renders by itself.
+ */
+export function useCronSize() {
+  return useCronSchedulerContext().size;
+}
+
 /**
  * Full context access
  * Use sparingly - causes re-render on any state change

package/src/tools/{CronScheduler → input/CronScheduler}/context/index.ts

@@ -14,5 +14,6 @@ export {
   useCronMonthDays,
   useCronCustom,
   useCronPreview,
+  useCronSize,
   useCronScheduler,
 } from './hooks';

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
@@ -50,6 +50,7 @@ function CronSchedulerFallback() {
 // Re-export types
 export type {
   CronSchedulerProps,
+  CronSchedulerSize,
   ScheduleType,
   WeekDay,
   MonthDay,
@@ -67,6 +68,7 @@ export {
   useCronMonthDays,
   useCronCustom,
   useCronPreview,
+  useCronSize,
   useCronScheduler,
 } from './context';
 

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

@@ -15,12 +15,13 @@
  * />
  */
 
-import { createLazyComponent, LoadingFallback } from '../../components';
+import { createLazyComponent, LoadingFallback } from '../../../components';
 import type { CronSchedulerProps } from './types';
 
 // Re-export types
 export type {
   CronSchedulerProps,
+  CronSchedulerSize,
   ScheduleType,
   WeekDay,
   MonthDay,

package/src/tools/{CronScheduler → input/CronScheduler}/types/index.ts

@@ -10,6 +10,13 @@
 
 export type ScheduleType = 'daily' | 'weekly' | 'monthly' | 'custom';
 
+/**
+ * Visual density of the scheduler fields.
+ * - `default` — full-size fields (unchanged).
+ * - `sm` — compact fields for narrow side panels / modals (~360-420px).
+ */
+export type CronSchedulerSize = 'default' | 'sm';
+
 /** Day of week: 0 = Sunday, 1 = Monday, ..., 6 = Saturday */
 export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -79,7 +86,10 @@ export interface CronSchedulerActions {
 export interface CronSchedulerContextValue
   extends CronSchedulerState,
     CronSchedulerComputed,
-    CronSchedulerActions {}
+    CronSchedulerActions {
+  /** Visual density of the fields (`default` | `sm`) */
+  size: CronSchedulerSize;
+}
 
 // ============================================================================
 // Component Props
@@ -107,6 +117,11 @@ export interface CronSchedulerProps {
   inline?: boolean;
   /** Trigger text shown when no schedule is set (compact mode only) */
   placeholder?: string;
+  /**
+   * Visual density of the fields. `sm` renders smaller, tighter fields
+   * suited for narrow side panels / modals. Default: `default`.
+   */
+  size?: CronSchedulerSize;
   /** Additional CSS classes */
   className?: string;
 }
@@ -116,4 +131,6 @@ export interface CronSchedulerProviderProps {
   value?: string;
   onChange?: (cron: string) => void;
   defaultType?: ScheduleType;
+  /** Visual density propagated to all field components. Default: `default`. */
+  size?: CronSchedulerSize;
 }

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';