@djangocfg/ui-tools 2.1.407 → 2.1.409

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

@@ -3,77 +3,246 @@
 /**
  * CronScheduler Client Component
  *
- * Compact cron expression builder following Apple HIG principles.
- * Uses context-based architecture for state management.
+ * Compact cron builder. The default surface is a single popover trigger
+ * that reads like a value input ("Weekdays at 09:00") — the schedule
+ * editor lives inside the popover, following the ui-core combobox
+ * pattern. Pass `inline` to render the editor expanded without a popover.
  */
 
+import { useState } from 'react';
+import { Calendar, ChevronsUpDown, Check, Copy } from 'lucide-react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { CronSchedulerProvider } from './context/CronSchedulerContext';
-import { useCronType } from './context/hooks';
+import { useCronType, useCronPreview } from './context/hooks';
 import {
   ScheduleTypeSelector,
   TimeSelector,
   DayChips,
   MonthDayGrid,
   CustomInput,
-  SchedulePreview,
 } from './components';
 import type { CronSchedulerProps } from './types';
 
 // ============================================================================
-// Inner Component (uses context)
+// Schedule editor (shared by inline + popover modes)
+// ============================================================================
+
+interface ScheduleEditorProps {
+  timeFormat: '12h' | '24h';
+  disabled: boolean;
+}
+
+function ScheduleEditor({ timeFormat, disabled }: ScheduleEditorProps) {
+  const { type } = useCronType();
+
+  return (
+    <div className="space-y-3">
+      <ScheduleTypeSelector disabled={disabled} />
+
+      {type !== 'custom' && (
+        <TimeSelector format={timeFormat} disabled={disabled} />
+      )}
+      {type === 'weekly' && <DayChips disabled={disabled} showPresets />}
+      {type === 'monthly' && <MonthDayGrid disabled={disabled} showPresets />}
+      {type === 'custom' && <CustomInput disabled={disabled} />}
+    </div>
+  );
+}
+
+// ============================================================================
+// Cron expression line (shared)
 // ============================================================================
 
-interface CronSchedulerInnerProps {
-  showPreview: boolean;
+function CronExpressionLine({
+  allowCopy,
+  className,
+}: {
+  allowCopy: boolean;
+  className?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+  const { cronExpression, isValid } = useCronPreview();
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(cronExpression);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <div className={cn('flex items-center gap-1.5', className)}>
+      <code className="font-mono text-xs text-muted-foreground">
+        {cronExpression}
+      </code>
+      {allowCopy && (
+        <button
+          type="button"
+          onClick={handleCopy}
+          disabled={!isValid}
+          className={cn(
+            'rounded p-0.5 transition-colors',
+            'hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+          )}
+          aria-label={copied ? 'Cron expression copied' : 'Copy cron expression'}
+          title={copied ? 'Copied!' : 'Copy cron expression'}
+        >
+          {copied ? (
+            <Check aria-hidden="true" className="h-3 w-3 text-success" />
+          ) : (
+            <Copy aria-hidden="true" className="h-3 w-3 text-muted-foreground" />
+          )}
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Compact popover trigger (default surface)
+// ============================================================================
+
+interface CompactTriggerProps {
   showCronExpression: boolean;
   allowCopy: boolean;
   timeFormat: '12h' | '24h';
   disabled: boolean;
+  placeholder: string;
   className?: string;
 }
 
-function CronSchedulerInner({
-  showPreview,
+function CompactTrigger({
   showCronExpression,
   allowCopy,
   timeFormat,
   disabled,
+  placeholder,
   className,
-}: CronSchedulerInnerProps) {
-  const { type } = useCronType();
+}: CompactTriggerProps) {
+  const [open, setOpen] = useState(false);
+  const { humanDescription, isValid } = useCronPreview();
 
   return (
-    <div className={cn('space-y-3', className)}>
-      {/* Schedule Type Selector */}
-      <ScheduleTypeSelector disabled={disabled} />
+    <div className={cn('space-y-1.5', className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            role="combobox"
+            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',
+              'hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
+              'disabled:cursor-not-allowed disabled:opacity-50',
+              !isValid && 'border-destructive/50'
+            )}
+          >
+            <Calendar
+              aria-hidden="true"
+              className={cn(
+                'h-4 w-4 shrink-0',
+                isValid ? 'text-muted-foreground' : 'text-destructive'
+              )}
+            />
+            <span
+              className={cn(
+                'flex-1 truncate text-left',
+                !isValid && 'text-destructive'
+              )}
+            >
+              {humanDescription || placeholder}
+            </span>
+            <ChevronsUpDown
+              aria-hidden="true"
+              className="h-4 w-4 shrink-0 opacity-50"
+            />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-[var(--radix-popover-trigger-width)] min-w-[320px] p-3"
+          align="start"
+        >
+          <ScheduleEditor timeFormat={timeFormat} disabled={disabled} />
+        </PopoverContent>
+      </Popover>
 
-      {/* Time Selector (shown for daily, weekly, monthly) */}
-      {type !== 'custom' && (
-        <TimeSelector format={timeFormat} disabled={disabled} />
+      {showCronExpression && (
+        <CronExpressionLine allowCopy={allowCopy} className="px-1" />
       )}
+    </div>
+  );
+}
 
-      {/* Day Chips (weekly only) */}
-      {type === 'weekly' && (
-        <DayChips disabled={disabled} showPresets />
-      )}
+// ============================================================================
+// Inline variant (editor expanded, no popover)
+// ============================================================================
 
-      {/* Month Day Grid (monthly only) */}
-      {type === 'monthly' && (
-        <MonthDayGrid disabled={disabled} showPresets />
-      )}
+interface InlineSchedulerProps extends ScheduleEditorProps {
+  showCronExpression: boolean;
+  allowCopy: boolean;
+  className?: string;
+}
 
-      {/* Custom Input (custom only) */}
-      {type === 'custom' && (
-        <CustomInput disabled={disabled} />
-      )}
+function InlineScheduler({
+  timeFormat,
+  disabled,
+  showCronExpression,
+  allowCopy,
+  className,
+}: InlineSchedulerProps) {
+  return (
+    <div className={cn('space-y-3', className)}>
+      <ScheduleEditor timeFormat={timeFormat} disabled={disabled} />
+      <InlinePreview showCronExpression={showCronExpression} allowCopy={allowCopy} />
+    </div>
+  );
+}
 
-      {/* Preview - always show cron expression */}
-      {showPreview && (
-        <SchedulePreview
-          showCronExpression
-          allowCopy={allowCopy}
+function InlinePreview({
+  showCronExpression,
+  allowCopy,
+}: {
+  showCronExpression: boolean;
+  allowCopy: boolean;
+}) {
+  const { humanDescription, isValid } = useCronPreview();
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={cn(
+        'flex items-center justify-between gap-2 rounded-md border px-3 py-2',
+        'bg-muted/30 border-border/50',
+        !isValid && 'border-destructive/30 bg-destructive/5'
+      )}
+    >
+      <div className="flex min-w-0 items-center gap-2">
+        <Calendar
+          aria-hidden="true"
+          className={cn(
+            'h-4 w-4 shrink-0',
+            isValid ? 'text-primary' : 'text-destructive'
+          )}
         />
+        <span className={cn('truncate text-sm', !isValid && 'text-destructive')}>
+          {humanDescription}
+        </span>
+      </div>
+      {showCronExpression && (
+        <CronExpressionLine allowCopy={allowCopy} className="shrink-0" />
       )}
     </div>
   );
@@ -84,39 +253,29 @@ function CronSchedulerInner({
 // ============================================================================
 
 /**
- * CronScheduler - Compact cron expression builder
+ * CronScheduler - compact cron expression builder
  *
- * A user-friendly interface for creating cron schedules without
- * needing to know cron syntax. Follows Apple HIG design principles.
+ * Default surface is a single popover trigger that reads the schedule as
+ * plain text ("Weekdays at 09:00"). Pass `inline` for the legacy expanded
+ * layout.
  *
  * @example
- * // Basic usage
- * <CronScheduler
- *   value={cronExpression}
- *   onChange={setCronExpression}
- * />
+ * <CronScheduler value={cron} onChange={setCron} showCronExpression />
  *
  * @example
- * // With all options
- * <CronScheduler
- *   value="0 9 * * 1-5"
- *   onChange={handleChange}
- *   defaultType="weekly"
- *   showPreview
- *   showCronExpression
- *   allowCopy
- *   timeFormat="24h"
- * />
+ * // Legacy expanded layout
+ * <CronScheduler value="0 9 * * 1-5" onChange={setCron} inline />
  */
 export function CronScheduler({
   value,
   onChange,
   defaultType = 'daily',
-  showPreview = true,
   showCronExpression = false,
   allowCopy = false,
   timeFormat = '24h',
   disabled = false,
+  inline = false,
+  placeholder = 'Set a schedule',
   className,
 }: CronSchedulerProps) {
   return (
@@ -125,14 +284,24 @@ export function CronScheduler({
       onChange={onChange}
       defaultType={defaultType}
     >
-      <CronSchedulerInner
-        showPreview={showPreview}
-        showCronExpression={showCronExpression}
-        allowCopy={allowCopy}
-        timeFormat={timeFormat}
-        disabled={disabled}
-        className={className}
-      />
+      {inline ? (
+        <InlineScheduler
+          timeFormat={timeFormat}
+          disabled={disabled}
+          showCronExpression={showCronExpression}
+          allowCopy={allowCopy}
+          className={className}
+        />
+      ) : (
+        <CompactTrigger
+          showCronExpression={showCronExpression}
+          allowCopy={allowCopy}
+          timeFormat={timeFormat}
+          disabled={disabled}
+          placeholder={placeholder}
+          className={className}
+        />
+      )}
     </CronSchedulerProvider>
   );
 }

package/src/tools/CronScheduler/components/CustomInput.tsx

@@ -36,32 +36,49 @@ export function CustomInput({ disabled, className }: CustomInputProps) {
     setCustomCron(value);
   };
 
+  const showError = !localValid && localValue.trim().length > 0;
+
   return (
     <div className={cn('space-y-2', className)}>
-      <span className="text-sm text-muted-foreground">Cron expression</span>
+      <label htmlFor="cron-custom-input" className="text-sm text-muted-foreground">
+        Cron expression
+      </label>
 
       <div className="relative">
         <Input
+          id="cron-custom-input"
           type="text"
           value={localValue}
           onChange={handleChange}
           disabled={disabled}
           placeholder="* * * * *"
+          autoComplete="off"
+          autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck={false}
+          aria-invalid={showError}
+          aria-describedby={showError ? 'cron-custom-error' : undefined}
           className={cn(
             'font-mono text-base pr-10 h-11',
-            !localValid && localValue.trim() && 'border-destructive focus-visible:ring-destructive/50'
+            showError && 'border-destructive focus-visible:ring-destructive/50'
           )}
         />
         <div className="absolute right-3 top-1/2 -translate-y-1/2">
           {localValue.trim() && (
             localValid ? (
-              <CheckCircle2 className="h-5 w-5 text-green-500" />
+              <CheckCircle2 aria-hidden="true" className="h-5 w-5 text-success" />
             ) : (
-              <AlertCircle className="h-5 w-5 text-destructive" />
+              <AlertCircle aria-hidden="true" className="h-5 w-5 text-destructive" />
             )
           )}
         </div>
       </div>
+
+      {showError && (
+        <p id="cron-custom-error" role="alert" className="text-xs text-destructive">
+          Invalid cron expression — expected 5 fields: minute hour day month weekday.
+        </p>
+      )}
     </div>
   );
 }

package/src/tools/CronScheduler/components/DayChips.tsx

@@ -11,14 +11,14 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { useCronWeekDays } from '../context/hooks';
 import type { WeekDay } from '../types';
 
-const DAYS: { value: WeekDay; label: string }[] = [
-  { value: 1, label: 'Mon' },
-  { value: 2, label: 'Tue' },
-  { value: 3, label: 'Wed' },
-  { value: 4, label: 'Thu' },
-  { value: 5, label: 'Fri' },
-  { value: 6, label: 'Sat' },
-  { value: 0, label: 'Sun' },
+const DAYS: { value: WeekDay; label: string; full: string }[] = [
+  { value: 1, label: 'Mon', full: 'Monday' },
+  { value: 2, label: 'Tue', full: 'Tuesday' },
+  { value: 3, label: 'Wed', full: 'Wednesday' },
+  { value: 4, label: 'Thu', full: 'Thursday' },
+  { value: 5, label: 'Fri', full: 'Friday' },
+  { value: 6, label: 'Sat', full: 'Saturday' },
+  { value: 0, label: 'Sun', full: 'Sunday' },
 ];
 
 export interface DayChipsProps {
@@ -42,13 +42,14 @@ export function DayChips({
   const isWeekendPreset = safeWeekDays.length === 2 && [0,6].every(d => safeWeekDays.includes(d as WeekDay));
   const isEveryday = safeWeekDays.length === 7;
 
-  const dayButtons = DAYS.map(({ value, label }) => {
+  const dayButtons = DAYS.map(({ value, label, full }) => {
     const isSelected = safeWeekDays.includes(value);
     const isWeekendDay = value === 0 || value === 6;
 
     return {
       value,
       label,
+      full,
       isSelected,
       isWeekendDay,
       className: cn(
@@ -77,7 +78,7 @@ export function DayChips({
   return (
     <div className={cn('space-y-3', className)}>
       {/* Day Grid - full width */}
-      <div className="grid grid-cols-7 gap-1">
+      <div className="grid grid-cols-7 gap-1" role="group" aria-label="Days of week">
         {dayButtons.map((day) => (
           <button
             key={day.value}
@@ -85,9 +86,10 @@ export function DayChips({
             disabled={disabled}
             onClick={() => toggleWeekDay(day.value)}
             aria-pressed={day.isSelected}
+            aria-label={day.full}
             className={day.className}
           >
-            <span>{day.label}</span>
+            <span aria-hidden="true">{day.label}</span>
           </button>
         ))}
       </div>

package/src/tools/CronScheduler/components/MonthDayGrid.tsx

@@ -99,10 +99,10 @@ export function MonthDayGrid({
       )}
 
       {/* Calendar Grid - full width */}
-      <div className="grid grid-cols-7 gap-1">
+      <div className="grid grid-cols-7 gap-1" role="group" aria-label="Days of month">
         {gridCells.map((cell) => {
           if (cell.type === 'empty') {
-            return <div key={cell.key} className="aspect-square" />;
+            return <div key={cell.key} aria-hidden="true" className="aspect-square" />;
           }
 
           return (
@@ -112,7 +112,7 @@ export function MonthDayGrid({
               disabled={disabled}
               onClick={() => toggleMonthDay(cell.day)}
               aria-pressed={cell.isSelected}
-              aria-label={`Day ${cell.day}`}
+              aria-label={`Day ${cell.day} of month`}
               className={cell.className}
             >
               {cell.day}
@@ -123,7 +123,7 @@ export function MonthDayGrid({
 
       {/* Selection hint */}
       {selectionCount > 1 && (
-        <p className="text-xs text-muted-foreground text-center">
+        <p aria-live="polite" className="text-xs text-muted-foreground text-center">
           {selectionCount} days selected
         </p>
       )}

package/src/tools/CronScheduler/components/SchedulePreview.tsx

@@ -51,6 +51,8 @@ export function SchedulePreview({
 
   return (
     <div
+      role="status"
+      aria-live="polite"
       className={cn(
         'px-3 py-2.5 rounded-lg border',
         'bg-muted/30 border-border/50',
@@ -62,6 +64,7 @@ export function SchedulePreview({
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2 min-w-0">
           <Calendar
+            aria-hidden="true"
             className={cn(
               'h-4 w-4 shrink-0',
               isValid ? 'text-primary' : 'text-destructive'
@@ -88,12 +91,13 @@ export function SchedulePreview({
               'hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
               'disabled:opacity-50 disabled:cursor-not-allowed'
             )}
+            aria-label={copied ? 'Cron expression copied' : 'Copy cron expression'}
             title={copied ? 'Copied!' : 'Copy cron expression'}
           >
             {copied ? (
-              <Check className="h-3.5 w-3.5 text-green-500" />
+              <Check aria-hidden="true" className="h-3.5 w-3.5 text-success" />
             ) : (
-              <Copy className="h-3.5 w-3.5 text-muted-foreground" />
+              <Copy aria-hidden="true" className="h-3.5 w-3.5 text-muted-foreground" />
             )}
           </button>
         )}
@@ -108,7 +112,7 @@ export function SchedulePreview({
                 <code className="text-xs font-mono text-muted-foreground/60 line-through">
                   {initialValue}
                 </code>
-                <ArrowRight className="h-3 w-3 text-muted-foreground/40 shrink-0" />
+                <ArrowRight aria-hidden="true" className="h-3 w-3 text-muted-foreground/40 shrink-0" />
               </>
             )}
             <code className="text-xs font-mono text-muted-foreground">

package/src/tools/CronScheduler/components/TimeSelector.tsx

@@ -63,7 +63,7 @@ export function TimeSelector({
   return (
     <div className={cn('flex items-center gap-3', className)}>
       <div className="flex items-center gap-2 text-muted-foreground">
-        <Clock className="h-4 w-4" />
+        <Clock aria-hidden="true" className="h-4 w-4" />
         <span className="text-sm">Run at</span>
       </div>
 

package/src/tools/CronScheduler/index.tsx

@@ -12,7 +12,7 @@
  * <CronScheduler
  *   value={cron}
  *   onChange={setCron}
- *   showPreview
+ *   showCronExpression
  * />
  */
 

package/src/tools/CronScheduler/types/index.ts

@@ -92,9 +92,7 @@ export interface CronSchedulerProps {
   onChange?: (cron: string) => void;
   /** Initial schedule type (default: 'daily') */
   defaultType?: ScheduleType;
-  /** Show human-readable preview (default: true) */
-  showPreview?: boolean;
-  /** Show raw cron expression in preview (default: false) */
+  /** Show raw cron expression below the trigger (default: false) */
   showCronExpression?: boolean;
   /** Allow copying cron expression (default: false) */
   allowCopy?: boolean;
@@ -102,6 +100,13 @@ export interface CronSchedulerProps {
   timeFormat?: '12h' | '24h';
   /** Disable all interactions */
   disabled?: boolean;
+  /**
+   * Render the schedule editor expanded instead of behind a popover
+   * trigger (legacy layout). Default: false — compact popover surface.
+   */
+  inline?: boolean;
+  /** Trigger text shown when no schedule is set (compact mode only) */
+  placeholder?: string;
   /** Additional CSS classes */
   className?: string;
 }