@djangocfg/ui-tools 2.1.409 → 2.1.412

package/src/tools/CronScheduler/CronScheduler.client.tsx

@@ -18,7 +18,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { CronSchedulerProvider } from './context/CronSchedulerContext';
-import { useCronType, useCronPreview } from './context/hooks';
+import { useCronType, useCronPreview, useCronSize } from './context/hooks';
 import {
   ScheduleTypeSelector,
   TimeSelector,
@@ -39,9 +39,11 @@ interface ScheduleEditorProps {
 
 function ScheduleEditor({ timeFormat, disabled }: ScheduleEditorProps) {
   const { type } = useCronType();
+  const size = useCronSize();
+  const isSm = size === 'sm';
 
   return (
-    <div className="space-y-3">
+    <div className={isSm ? 'space-y-1.5' : 'space-y-3'}>
       <ScheduleTypeSelector disabled={disabled} />
 
       {type !== 'custom' && (
@@ -67,6 +69,7 @@ function CronExpressionLine({
 }) {
   const [copied, setCopied] = useState(false);
   const { cronExpression, isValid } = useCronPreview();
+  const isSm = useCronSize() === 'sm';
 
   const handleCopy = async (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -80,8 +83,13 @@ function CronExpressionLine({
   };
 
   return (
-    <div className={cn('flex items-center gap-1.5', className)}>
-      <code className="font-mono text-xs text-muted-foreground">
+    <div className={cn('flex items-center', isSm ? 'gap-1' : 'gap-1.5', className)}>
+      <code
+        className={cn(
+          'font-mono text-muted-foreground',
+          isSm ? 'text-[11px]' : 'text-xs'
+        )}
+      >
         {cronExpression}
       </code>
       {allowCopy && (
@@ -131,9 +139,10 @@ function CompactTrigger({
 }: CompactTriggerProps) {
   const [open, setOpen] = useState(false);
   const { humanDescription, isValid } = useCronPreview();
+  const isSm = useCronSize() === 'sm';
 
   return (
-    <div className={cn('space-y-1.5', className)}>
+    <div className={cn(isSm ? 'space-y-1' : 'space-y-1.5', className)}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <button
@@ -142,17 +151,19 @@ function CompactTrigger({
             aria-expanded={open}
             disabled={disabled}
             className={cn(
-              'flex h-9 w-full items-center gap-2 rounded-md border px-3',
-              'border-input bg-transparent text-sm shadow-xs transition-colors',
+              'flex w-full items-center rounded-md border',
+              'border-input bg-transparent shadow-xs transition-colors',
               'hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
               'disabled:cursor-not-allowed disabled:opacity-50',
+              isSm ? 'h-8 gap-1.5 px-2 text-xs' : 'h-9 gap-2 px-3 text-sm',
               !isValid && 'border-destructive/50'
             )}
           >
             <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-muted-foreground' : 'text-destructive'
               )}
             />
@@ -166,12 +177,15 @@ function CompactTrigger({
             </span>
             <ChevronsUpDown
               aria-hidden="true"
-              className="h-4 w-4 shrink-0 opacity-50"
+              className={cn('shrink-0 opacity-50', isSm ? 'h-3.5 w-3.5' : 'h-4 w-4')}
             />
           </button>
         </PopoverTrigger>
         <PopoverContent
-          className="w-[var(--radix-popover-trigger-width)] min-w-[320px] p-3"
+          className={cn(
+            'w-[var(--radix-popover-trigger-width)]',
+            isSm ? 'min-w-[280px] p-2' : 'min-w-[320px] p-3'
+          )}
           align="start"
         >
           <ScheduleEditor timeFormat={timeFormat} disabled={disabled} />
@@ -202,8 +216,10 @@ function InlineScheduler({
   allowCopy,
   className,
 }: InlineSchedulerProps) {
+  const isSm = useCronSize() === 'sm';
+
   return (
-    <div className={cn('space-y-3', className)}>
+    <div className={cn(isSm ? 'space-y-1.5' : 'space-y-3', className)}>
       <ScheduleEditor timeFormat={timeFormat} disabled={disabled} />
       <InlinePreview showCronExpression={showCronExpression} allowCopy={allowCopy} />
     </div>
@@ -218,26 +234,35 @@ function InlinePreview({
   allowCopy: boolean;
 }) {
   const { humanDescription, isValid } = useCronPreview();
+  const isSm = useCronSize() === 'sm';
 
   return (
     <div
       role="status"
       aria-live="polite"
       className={cn(
-        'flex items-center justify-between gap-2 rounded-md border px-3 py-2',
+        'flex items-center justify-between gap-2 rounded-md border',
         'bg-muted/30 border-border/50',
+        isSm ? 'px-2 py-1' : 'px-3 py-2',
         !isValid && 'border-destructive/30 bg-destructive/5'
       )}
     >
-      <div className="flex min-w-0 items-center gap-2">
+      <div className={cn('flex min-w-0 items-center', isSm ? 'gap-1.5' : 'gap-2')}>
         <Calendar
           aria-hidden="true"
           className={cn(
-            'h-4 w-4 shrink-0',
+            'shrink-0',
+            isSm ? 'h-3 w-3' : 'h-4 w-4',
             isValid ? 'text-primary' : 'text-destructive'
           )}
         />
-        <span className={cn('truncate text-sm', !isValid && 'text-destructive')}>
+        <span
+          className={cn(
+            'truncate',
+            isSm ? 'text-[11px]' : 'text-sm',
+            !isValid && 'text-destructive'
+          )}
+        >
           {humanDescription}
         </span>
       </div>
@@ -276,6 +301,7 @@ export function CronScheduler({
   disabled = false,
   inline = false,
   placeholder = 'Set a schedule',
+  size = 'default',
   className,
 }: CronSchedulerProps) {
   return (
@@ -283,6 +309,7 @@ export function CronScheduler({
       value={value}
       onChange={onChange}
       defaultType={defaultType}
+      size={size}
     >
       {inline ? (
         <InlineScheduler

package/src/tools/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/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/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/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/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/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/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/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/context/index.ts

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