@djangocfg/ui-tools 2.1.129 → 2.1.131

package/README.md

@@ -22,7 +22,7 @@ This package contains heavy components that are loaded lazily to keep your initi
 | `@djangocfg/ui-tools` | Heavy tools with lazy loading |
 | `@djangocfg/ui-nextjs` | Next.js apps (extends ui-core) |
 
-## Tools (11)
+## Tools (12)
 
 | Tool | Bundle Size | Description |
 |------|-------------|-------------|
@@ -37,6 +37,7 @@ This package contains heavy components that are loaded lazily to keep your initi
 | `VideoPlayer` | ~150KB | Professional video player with Vidstack |
 | `JsonTree` | ~100KB | JSON visualization with modes (full/compact/inline) |
 | `ImageViewer` | ~50KB | Image viewer with zoom/pan/rotate |
+| `CronScheduler` | ~15KB | Cron expression builder with intuitive UI |
 
 ## Tree-Shakeable Imports
 
@@ -248,6 +249,60 @@ const schema = {
 |-------|-------------|
 | `useMediaCacheStore` | Media caching for video/audio players |
 
+## Cron Scheduler
+
+Compact cron expression builder with intuitive UI. Supports Daily, Weekly, Monthly schedules and custom cron expressions.
+
+```tsx
+import { CronScheduler } from '@djangocfg/ui-tools';
+
+<CronScheduler
+  value="0 9 * * 1-5"
+  onChange={(cron) => console.log(cron)}
+  showPreview
+  allowCopy
+/>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | - | Cron expression (Unix 5-field format) |
+| `onChange` | `(cron: string) => void` | - | Callback when schedule changes |
+| `defaultType` | `'daily' \| 'weekly' \| 'monthly' \| 'custom'` | `'daily'` | Initial schedule type |
+| `showPreview` | `boolean` | `true` | Show human-readable preview |
+| `showCronExpression` | `boolean` | `true` | Show cron expression in preview |
+| `allowCopy` | `boolean` | `false` | Enable copy to clipboard |
+| `timeFormat` | `'12h' \| '24h'` | `'24h'` | Time display format |
+| `disabled` | `boolean` | `false` | Disable all interactions |
+
+### Context Hooks
+
+For custom compositions, use the context hooks:
+
+```tsx
+import {
+  CronSchedulerProvider,
+  useCronType,
+  useCronTime,
+  useCronWeekDays,
+  useCronMonthDays,
+  useCronPreview,
+} from '@djangocfg/ui-tools';
+```
+
+### Utilities
+
+```tsx
+import {
+  buildCron,    // State → Cron expression
+  parseCron,    // Cron → State
+  humanizeCron, // Cron → Human description
+  isValidCron,  // Validate cron syntax
+} from '@djangocfg/ui-tools';
+```
+
 ## JSON Tree
 
 JSON visualization with three display modes:
@@ -287,6 +342,7 @@ import {
   LazyVideoPlayer,       // ~150KB
   LazyJsonTree,          // ~100KB
   LazyImageViewer,       // ~50KB
+  LazyCronScheduler,     // ~15KB
 } from '@djangocfg/ui-tools';
 
 // Just use them - no Suspense wrapper needed!

package/dist/CronScheduler.client-5UEBG4EY.mjs

@@ -0,0 +1,67 @@
+import { useCronType, ScheduleTypeSelector, TimeSelector, DayChips, MonthDayGrid, CustomInput, SchedulePreview, CronSchedulerProvider } from './chunk-MQDWUBVX.mjs';
+import { __name } from './chunk-CGILA3WO.mjs';
+import { cn } from '@djangocfg/ui-core/lib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function CronSchedulerInner({
+  showPreview,
+  showCronExpression,
+  allowCopy,
+  timeFormat,
+  disabled,
+  className
+}) {
+  const { type } = useCronType();
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsx(ScheduleTypeSelector, { disabled }),
+    type !== "custom" && /* @__PURE__ */ jsx(TimeSelector, { format: timeFormat, disabled }),
+    type === "weekly" && /* @__PURE__ */ jsx(DayChips, { disabled, showPresets: true }),
+    type === "monthly" && /* @__PURE__ */ jsx(MonthDayGrid, { disabled, showPresets: true }),
+    type === "custom" && /* @__PURE__ */ jsx(CustomInput, { disabled }),
+    showPreview && /* @__PURE__ */ jsx(
+      SchedulePreview,
+      {
+        showCronExpression: true,
+        allowCopy
+      }
+    )
+  ] });
+}
+__name(CronSchedulerInner, "CronSchedulerInner");
+function CronScheduler({
+  value,
+  onChange,
+  defaultType = "daily",
+  showPreview = true,
+  showCronExpression = false,
+  allowCopy = false,
+  timeFormat = "24h",
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    CronSchedulerProvider,
+    {
+      value,
+      onChange,
+      defaultType,
+      children: /* @__PURE__ */ jsx(
+        CronSchedulerInner,
+        {
+          showPreview,
+          showCronExpression,
+          allowCopy,
+          timeFormat,
+          disabled,
+          className
+        }
+      )
+    }
+  );
+}
+__name(CronScheduler, "CronScheduler");
+var CronScheduler_client_default = CronScheduler;
+
+export { CronScheduler, CronScheduler_client_default as default };
+//# sourceMappingURL=CronScheduler.client-5UEBG4EY.mjs.map
+//# sourceMappingURL=CronScheduler.client-5UEBG4EY.mjs.map

package/dist/CronScheduler.client-5UEBG4EY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tools/CronScheduler/CronScheduler.client.tsx"],"names":[],"mappings":";;;;;AAmCA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,WAAA,EAAY;AAE7B,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,WAAA,EAAa,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,wBAAqB,QAAA,EAAoB,CAAA;AAAA,IAGzC,SAAS,QAAA,oBACR,GAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,YAAY,QAAA,EAAoB,CAAA;AAAA,IAIvD,SAAS,QAAA,oBACR,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI3C,SAAS,SAAA,oBACR,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI/C,IAAA,KAAS,QAAA,oBACR,GAAA,CAAC,WAAA,EAAA,EAAY,QAAA,EAAoB,CAAA;AAAA,IAIlC,WAAA,oBACC,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,IAAA;AAAA,QAClB;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;AA5CS,MAAA,CAAA,kBAAA,EAAA,oBAAA,CAAA;AA2EF,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,OAAA;AAAA,EACd,WAAA,GAAc,IAAA;AAAA,EACd,kBAAA,GAAqB,KAAA;AAAA,EACrB,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,EAAuB;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA;AAAA,UACA,UAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AA3BgB,MAAA,CAAA,aAAA,EAAA,eAAA,CAAA;AA6BhB,IAAO,4BAAA,GAAQ","file":"CronScheduler.client-5UEBG4EY.mjs","sourcesContent":["'use client';\n\n/**\n * CronScheduler Client Component\n *\n * Compact cron expression builder following Apple HIG principles.\n * Uses context-based architecture for state management.\n */\n\nimport { cn } from '@djangocfg/ui-core/lib';\nimport { CronSchedulerProvider } from './context/CronSchedulerContext';\nimport { useCronType } from './context/hooks';\nimport {\n  ScheduleTypeSelector,\n  TimeSelector,\n  DayChips,\n  MonthDayGrid,\n  CustomInput,\n  SchedulePreview,\n} from './components';\nimport type { CronSchedulerProps } from './types';\n\n// ============================================================================\n// Inner Component (uses context)\n// ============================================================================\n\ninterface CronSchedulerInnerProps {\n  showPreview: boolean;\n  showCronExpression: boolean;\n  allowCopy: boolean;\n  timeFormat: '12h' | '24h';\n  disabled: boolean;\n  className?: string;\n}\n\nfunction CronSchedulerInner({\n  showPreview,\n  showCronExpression,\n  allowCopy,\n  timeFormat,\n  disabled,\n  className,\n}: CronSchedulerInnerProps) {\n  const { type } = useCronType();\n\n  return (\n    <div className={cn('space-y-3', className)}>\n      {/* Schedule Type Selector */}\n      <ScheduleTypeSelector disabled={disabled} />\n\n      {/* Time Selector (shown for daily, weekly, monthly) */}\n      {type !== 'custom' && (\n        <TimeSelector format={timeFormat} disabled={disabled} />\n      )}\n\n      {/* Day Chips (weekly only) */}\n      {type === 'weekly' && (\n        <DayChips disabled={disabled} showPresets />\n      )}\n\n      {/* Month Day Grid (monthly only) */}\n      {type === 'monthly' && (\n        <MonthDayGrid disabled={disabled} showPresets />\n      )}\n\n      {/* Custom Input (custom only) */}\n      {type === 'custom' && (\n        <CustomInput disabled={disabled} />\n      )}\n\n      {/* Preview - always show cron expression */}\n      {showPreview && (\n        <SchedulePreview\n          showCronExpression\n          allowCopy={allowCopy}\n        />\n      )}\n    </div>\n  );\n}\n\n// ============================================================================\n// Main Component (with Provider)\n// ============================================================================\n\n/**\n * CronScheduler - Compact cron expression builder\n *\n * A user-friendly interface for creating cron schedules without\n * needing to know cron syntax. Follows Apple HIG design principles.\n *\n * @example\n * // Basic usage\n * <CronScheduler\n *   value={cronExpression}\n *   onChange={setCronExpression}\n * />\n *\n * @example\n * // With all options\n * <CronScheduler\n *   value=\"0 9 * * 1-5\"\n *   onChange={handleChange}\n *   defaultType=\"weekly\"\n *   showPreview\n *   showCronExpression\n *   allowCopy\n *   timeFormat=\"24h\"\n * />\n */\nexport function CronScheduler({\n  value,\n  onChange,\n  defaultType = 'daily',\n  showPreview = true,\n  showCronExpression = false,\n  allowCopy = false,\n  timeFormat = '24h',\n  disabled = false,\n  className,\n}: CronSchedulerProps) {\n  return (\n    <CronSchedulerProvider\n      value={value}\n      onChange={onChange}\n      defaultType={defaultType}\n    >\n      <CronSchedulerInner\n        showPreview={showPreview}\n        showCronExpression={showCronExpression}\n        allowCopy={allowCopy}\n        timeFormat={timeFormat}\n        disabled={disabled}\n        className={className}\n      />\n    </CronSchedulerProvider>\n  );\n}\n\nexport default CronScheduler;\n"]}

package/dist/CronScheduler.client-ZDNFXYWJ.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var chunkJFGLA6DT_cjs = require('./chunk-JFGLA6DT.cjs');
+var chunkWGEGR3DF_cjs = require('./chunk-WGEGR3DF.cjs');
+var lib = require('@djangocfg/ui-core/lib');
+var jsxRuntime = require('react/jsx-runtime');
+
+function CronSchedulerInner({
+  showPreview,
+  showCronExpression,
+  allowCopy,
+  timeFormat,
+  disabled,
+  className
+}) {
+  const { type } = chunkJFGLA6DT_cjs.useCronType();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: lib.cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkJFGLA6DT_cjs.ScheduleTypeSelector, { disabled }),
+    type !== "custom" && /* @__PURE__ */ jsxRuntime.jsx(chunkJFGLA6DT_cjs.TimeSelector, { format: timeFormat, disabled }),
+    type === "weekly" && /* @__PURE__ */ jsxRuntime.jsx(chunkJFGLA6DT_cjs.DayChips, { disabled, showPresets: true }),
+    type === "monthly" && /* @__PURE__ */ jsxRuntime.jsx(chunkJFGLA6DT_cjs.MonthDayGrid, { disabled, showPresets: true }),
+    type === "custom" && /* @__PURE__ */ jsxRuntime.jsx(chunkJFGLA6DT_cjs.CustomInput, { disabled }),
+    showPreview && /* @__PURE__ */ jsxRuntime.jsx(
+      chunkJFGLA6DT_cjs.SchedulePreview,
+      {
+        showCronExpression: true,
+        allowCopy
+      }
+    )
+  ] });
+}
+chunkWGEGR3DF_cjs.__name(CronSchedulerInner, "CronSchedulerInner");
+function CronScheduler({
+  value,
+  onChange,
+  defaultType = "daily",
+  showPreview = true,
+  showCronExpression = false,
+  allowCopy = false,
+  timeFormat = "24h",
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkJFGLA6DT_cjs.CronSchedulerProvider,
+    {
+      value,
+      onChange,
+      defaultType,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        CronSchedulerInner,
+        {
+          showPreview,
+          showCronExpression,
+          allowCopy,
+          timeFormat,
+          disabled,
+          className
+        }
+      )
+    }
+  );
+}
+chunkWGEGR3DF_cjs.__name(CronScheduler, "CronScheduler");
+var CronScheduler_client_default = CronScheduler;
+
+exports.CronScheduler = CronScheduler;
+exports.default = CronScheduler_client_default;
+//# sourceMappingURL=CronScheduler.client-ZDNFXYWJ.cjs.map
+//# sourceMappingURL=CronScheduler.client-ZDNFXYWJ.cjs.map

package/dist/CronScheduler.client-ZDNFXYWJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tools/CronScheduler/CronScheduler.client.tsx"],"names":["useCronType","cn","jsx","ScheduleTypeSelector","TimeSelector","DayChips","MonthDayGrid","CustomInput","SchedulePreview","__name","CronSchedulerProvider"],"mappings":";;;;;;;;;AAmCA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,EAAE,IAAA,EAAK,GAAIA,6BAAA,EAAY;AAE7B,EAAA,uCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,MAAA,CAAG,WAAA,EAAa,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,0CAAqB,QAAA,EAAoB,CAAA;AAAA,IAGzC,SAAS,QAAA,oBACRD,cAAA,CAACE,8BAAA,EAAA,EAAa,MAAA,EAAQ,YAAY,QAAA,EAAoB,CAAA;AAAA,IAIvD,SAAS,QAAA,oBACRF,cAAA,CAACG,0BAAA,EAAA,EAAS,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI3C,SAAS,SAAA,oBACRH,cAAA,CAACI,8BAAA,EAAA,EAAa,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI/C,IAAA,KAAS,QAAA,oBACRJ,cAAA,CAACK,6BAAA,EAAA,EAAY,QAAA,EAAoB,CAAA;AAAA,IAIlC,WAAA,oBACCL,cAAA;AAAA,MAACM,iCAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,IAAA;AAAA,QAClB;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;AA5CSC,wBAAA,CAAA,kBAAA,EAAA,oBAAA,CAAA;AA2EF,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,OAAA;AAAA,EACd,WAAA,GAAc,IAAA;AAAA,EACd,kBAAA,GAAqB,KAAA;AAAA,EACrB,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,EAAuB;AACrB,EAAA,uBACEP,cAAA;AAAA,IAACQ,uCAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MAEA,QAAA,kBAAAR,cAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA;AAAA,UACA,UAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AA3BgBO,wBAAA,CAAA,aAAA,EAAA,eAAA,CAAA;AA6BhB,IAAO,4BAAA,GAAQ","file":"CronScheduler.client-ZDNFXYWJ.cjs","sourcesContent":["'use client';\n\n/**\n * CronScheduler Client Component\n *\n * Compact cron expression builder following Apple HIG principles.\n * Uses context-based architecture for state management.\n */\n\nimport { cn } from '@djangocfg/ui-core/lib';\nimport { CronSchedulerProvider } from './context/CronSchedulerContext';\nimport { useCronType } from './context/hooks';\nimport {\n  ScheduleTypeSelector,\n  TimeSelector,\n  DayChips,\n  MonthDayGrid,\n  CustomInput,\n  SchedulePreview,\n} from './components';\nimport type { CronSchedulerProps } from './types';\n\n// ============================================================================\n// Inner Component (uses context)\n// ============================================================================\n\ninterface CronSchedulerInnerProps {\n  showPreview: boolean;\n  showCronExpression: boolean;\n  allowCopy: boolean;\n  timeFormat: '12h' | '24h';\n  disabled: boolean;\n  className?: string;\n}\n\nfunction CronSchedulerInner({\n  showPreview,\n  showCronExpression,\n  allowCopy,\n  timeFormat,\n  disabled,\n  className,\n}: CronSchedulerInnerProps) {\n  const { type } = useCronType();\n\n  return (\n    <div className={cn('space-y-3', className)}>\n      {/* Schedule Type Selector */}\n      <ScheduleTypeSelector disabled={disabled} />\n\n      {/* Time Selector (shown for daily, weekly, monthly) */}\n      {type !== 'custom' && (\n        <TimeSelector format={timeFormat} disabled={disabled} />\n      )}\n\n      {/* Day Chips (weekly only) */}\n      {type === 'weekly' && (\n        <DayChips disabled={disabled} showPresets />\n      )}\n\n      {/* Month Day Grid (monthly only) */}\n      {type === 'monthly' && (\n        <MonthDayGrid disabled={disabled} showPresets />\n      )}\n\n      {/* Custom Input (custom only) */}\n      {type === 'custom' && (\n        <CustomInput disabled={disabled} />\n      )}\n\n      {/* Preview - always show cron expression */}\n      {showPreview && (\n        <SchedulePreview\n          showCronExpression\n          allowCopy={allowCopy}\n        />\n      )}\n    </div>\n  );\n}\n\n// ============================================================================\n// Main Component (with Provider)\n// ============================================================================\n\n/**\n * CronScheduler - Compact cron expression builder\n *\n * A user-friendly interface for creating cron schedules without\n * needing to know cron syntax. Follows Apple HIG design principles.\n *\n * @example\n * // Basic usage\n * <CronScheduler\n *   value={cronExpression}\n *   onChange={setCronExpression}\n * />\n *\n * @example\n * // With all options\n * <CronScheduler\n *   value=\"0 9 * * 1-5\"\n *   onChange={handleChange}\n *   defaultType=\"weekly\"\n *   showPreview\n *   showCronExpression\n *   allowCopy\n *   timeFormat=\"24h\"\n * />\n */\nexport function CronScheduler({\n  value,\n  onChange,\n  defaultType = 'daily',\n  showPreview = true,\n  showCronExpression = false,\n  allowCopy = false,\n  timeFormat = '24h',\n  disabled = false,\n  className,\n}: CronSchedulerProps) {\n  return (\n    <CronSchedulerProvider\n      value={value}\n      onChange={onChange}\n      defaultType={defaultType}\n    >\n      <CronSchedulerInner\n        showPreview={showPreview}\n        showCronExpression={showCronExpression}\n        allowCopy={allowCopy}\n        timeFormat={timeFormat}\n        disabled={disabled}\n        className={className}\n      />\n    </CronSchedulerProvider>\n  );\n}\n\nexport default CronScheduler;\n"]}