@djangocfg/ui-core 2.1.412 → 2.1.415

package/src/components/forms/time-picker/index.tsx

@@ -0,0 +1,285 @@
+"use client"
+
+import { Clock } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../../lib/utils";
+import { Button } from "../../forms/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../../overlay/popover";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface TimePickerProps {
+  /** Selected time value as HH:mm string */
+  value?: string;
+  /** Default uncontrolled value */
+  defaultValue?: string;
+  /** Callback when time changes (HH:mm) */
+  onChange?: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Disable the picker */
+  disabled?: boolean;
+  /** Use 12-hour format with AM/PM */
+  use12Hour?: boolean;
+  /** Minimum time (HH:mm) */
+  min?: string;
+  /** Maximum time (HH:mm) */
+  max?: string;
+  /** Step in minutes for minute selector @default 1 */
+  minuteStep?: number;
+  /** Additional class for trigger button */
+  className?: string;
+  /** Button variant */
+  variant?: "default" | "outline" | "ghost";
+  /** Align popover */
+  align?: "start" | "center" | "end";
+  /** Form field name */
+  name?: string;
+}
+
+// =============================================================================
+// Utilities
+// =============================================================================
+
+function parseTime(timeStr: string): { hours: number; minutes: number } | null {
+  const match = timeStr.match(/^(\d{1,2}):(\d{2})$/);
+  if (!match) return null;
+  const hours = parseInt(match[1], 10);
+  const minutes = parseInt(match[2], 10);
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null;
+  return { hours, minutes };
+}
+
+function formatTime(hours: number, minutes: number): string {
+  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+
+function format12Hour(hours: number, minutes: number): string {
+  const period = hours >= 12 ? "PM" : "AM";
+  const h = hours % 12 || 12;
+  return `${String(h).padStart(2, "0")}:${String(minutes).padStart(2, "0")} ${period}`;
+}
+
+function isTimeInRange(time: string, min?: string, max?: string): boolean {
+  if (min && time < min) return false;
+  if (max && time > max) return false;
+  return true;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      placeholder = "Select time",
+      disabled = false,
+      use12Hour = false,
+      min,
+      max,
+      minuteStep = 1,
+      className,
+      variant = "outline",
+      align = "start",
+      name,
+    },
+    ref
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+    const resolvedValue = isControlled ? controlledValue : internalValue;
+
+    const [open, setOpen] = React.useState(false);
+    const [tempHours, setTempHours] = React.useState(0);
+    const [tempMinutes, setTempMinutes] = React.useState(0);
+    const [tempPeriod, setTempPeriod] = React.useState<"AM" | "PM">("AM");
+
+    const parsed = React.useMemo(() => parseTime(resolvedValue), [resolvedValue]);
+
+    // Sync temp values when opening popover
+    React.useEffect(() => {
+      if (open && parsed) {
+        setTempHours(parsed.hours);
+        setTempMinutes(parsed.minutes);
+        setTempPeriod(parsed.hours >= 12 ? "PM" : "AM");
+      } else if (open) {
+        setTempHours(12);
+        setTempMinutes(0);
+        setTempPeriod("AM");
+      }
+    }, [open, parsed]);
+
+    const updateValue = React.useCallback(
+      (hours: number, minutes: number) => {
+        const formatted = formatTime(hours, minutes);
+        if (!isControlled) {
+          setInternalValue(formatted);
+        }
+        onChange?.(formatted);
+      },
+      [isControlled, onChange]
+    );
+
+    const handleApply = React.useCallback(() => {
+      let hours = tempHours;
+      if (use12Hour) {
+        if (tempPeriod === "PM" && hours !== 12) hours += 12;
+        if (tempPeriod === "AM" && hours === 12) hours = 0;
+      }
+      const formatted = formatTime(hours, tempMinutes);
+      if (isTimeInRange(formatted, min, max)) {
+        updateValue(hours, tempMinutes);
+        setOpen(false);
+      }
+    }, [tempHours, tempMinutes, tempPeriod, use12Hour, min, max, updateValue]);
+
+    const displayValue = React.useMemo(() => {
+      if (!parsed) return placeholder;
+      if (use12Hour) {
+        return format12Hour(parsed.hours, parsed.minutes);
+      }
+      return formatTime(parsed.hours, parsed.minutes);
+    }, [parsed, use12Hour, placeholder]);
+
+    // Generate hour options
+    const hourOptions = React.useMemo(() => {
+      if (use12Hour) {
+        return Array.from({ length: 12 }, (_, i) => i + 1);
+      }
+      return Array.from({ length: 24 }, (_, i) => i);
+    }, [use12Hour]);
+
+    // Generate minute options
+    const minuteOptions = React.useMemo(() => {
+      const steps = Math.floor(60 / minuteStep);
+      return Array.from({ length: steps }, (_, i) => i * minuteStep);
+    }, [minuteStep]);
+
+    const isFormControl = React.useRef(false);
+    const rootRef = React.useRef<HTMLDivElement>(null);
+    React.useImperativeHandle(ref, () => rootRef.current as unknown as HTMLButtonElement);
+
+    React.useEffect(() => {
+      if (rootRef.current) {
+        isFormControl.current = !!rootRef.current.closest("form");
+      }
+    }, []);
+
+    return (
+      <>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              ref={rootRef as unknown as React.Ref<HTMLButtonElement>}
+              variant={variant}
+              disabled={disabled}
+              className={cn(
+                "w-full justify-start text-left font-normal",
+                !resolvedValue && "text-muted-foreground",
+                className
+              )}
+            >
+              <Clock className="mr-2 h-4 w-4" />
+              {displayValue}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-3" align={align}>
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2">
+                {/* Hours */}
+                <div className="flex flex-col gap-1">
+                  <span className="text-xs text-muted-foreground text-center">Hour</span>
+                  <div className="flex flex-col max-h-48 overflow-y-auto border rounded-[var(--radius)]">
+                    {hourOptions.map((h) => {
+                      const selected = use12Hour
+                        ? (tempHours % 12 || 12) === h
+                        : tempHours === h;
+                      return (
+                        <button
+                          key={h}
+                          type="button"
+                          onClick={() => setTempHours(use12Hour ? h : h)}
+                          className={cn(
+                            "px-3 py-1.5 text-sm text-left hover:bg-accent transition-colors",
+                            selected && "bg-primary text-primary-foreground hover:bg-primary/90"
+                          )}
+                        >
+                          {String(h).padStart(2, "0")}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                <span className="text-lg font-medium text-muted-foreground">:</span>
+
+                {/* Minutes */}
+                <div className="flex flex-col gap-1">
+                  <span className="text-xs text-muted-foreground text-center">Min</span>
+                  <div className="flex flex-col max-h-48 overflow-y-auto border rounded-[var(--radius)]">
+                    {minuteOptions.map((m) => {
+                      const selected = tempMinutes === m;
+                      return (
+                        <button
+                          key={m}
+                          type="button"
+                          onClick={() => setTempMinutes(m)}
+                          className={cn(
+                            "px-3 py-1.5 text-sm text-left hover:bg-accent transition-colors",
+                            selected && "bg-primary text-primary-foreground hover:bg-primary/90"
+                          )}
+                        >
+                          {String(m).padStart(2, "0")}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {/* AM/PM */}
+                {use12Hour && (
+                  <div className="flex flex-col gap-1">
+                    <span className="text-xs text-muted-foreground text-center">&nbsp;</span>
+                    <div className="flex flex-col border rounded-[var(--radius)]">
+                      {(["AM", "PM"] as const).map((p) => (
+                        <button
+                          key={p}
+                          type="button"
+                          onClick={() => setTempPeriod(p)}
+                          className={cn(
+                            "px-3 py-1.5 text-sm text-left hover:bg-accent transition-colors",
+                            tempPeriod === p && "bg-primary text-primary-foreground hover:bg-primary/90"
+                          )}
+                        >
+                          {p}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <Button size="sm" onClick={handleApply} className="w-full">
+                Apply
+              </Button>
+            </div>
+          </PopoverContent>
+        </Popover>
+        {isFormControl.current && name && (
+          <input type="hidden" name={name} value={resolvedValue} disabled={disabled} />
+        )}
+      </>
+    );
+  }
+);
+
+TimePicker.displayName = "TimePicker";
+
+export { TimePicker };

package/src/components/index.ts

@@ -9,6 +9,8 @@ export { Input } from './forms/input';
 export { Textarea } from './forms/textarea';
 export { Label } from './forms/label';
 export { Checkbox } from './forms/checkbox';
+export { CheckboxGroup, CheckboxGroupDescription, CheckboxGroupItem, CheckboxGroupLabel, CheckboxGroupList, CheckboxGroupMessage } from './forms/checkbox-group';
+export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupListProps } from './forms/checkbox-group';
 export { RadioGroup, RadioGroupItem } from './forms/radio-group';
 export { Switch } from './forms/switch';
 export { Slider } from './forms/slider';
@@ -24,6 +26,26 @@ export { ButtonGroup as ButtonGroupComponent } from './forms/button-group';
 export { DownloadButton } from './forms/button-download';
 export type { DownloadButtonProps } from './forms/button-download';
 
+// Mask Input
+export { MaskInput } from './forms/mask-input';
+export type { MaskInputProps, MaskDefinition } from './forms/mask-input';
+
+// Segmented Input
+export { SegmentedInput } from './forms/segmented-input';
+export type { SegmentedInputProps } from './forms/segmented-input';
+
+// Tags Input
+export { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputItemDelete } from './forms/tags-input';
+export type { TagsInputRootProps, TagsInputInputProps, TagsInputItemProps, TagsInputItemTextProps, TagsInputItemDeleteProps } from './forms/tags-input';
+
+// Time Picker
+export { TimePicker } from './forms/time-picker';
+export type { TimePickerProps } from './forms/time-picker';
+
+// Editable
+export { Editable, EditablePreview, EditableInput, EditableTextarea } from './forms/editable';
+export type { EditableRootProps, EditablePreviewProps, EditableInputProps, EditableTextareaProps } from './forms/editable';
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Field (advanced form layout)
 // ─────────────────────────────────────────────────────────────────────────────
@@ -119,6 +141,8 @@ export {
   SidebarTrigger,
   useSidebar,
 } from './navigation/sidebar';
+export { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, StepperSeparator, StepperTitle, StepperTrigger, useStepper } from './navigation/stepper';
+export type { StepperProps } from './navigation/stepper';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Layout
@@ -133,6 +157,10 @@ export { ResizableHandle, ResizablePanel, ResizablePanelGroup, useResizableDragg
 export type { ResizableHandleProps, ImperativePanelHandle } from './layout/resizable';
 export { Sticky } from './layout/sticky';
 export { Section, SectionHeader } from './layout/section';
+export { Stack, StackItem } from './layout/stack';
+export type { StackProps } from './layout/stack';
+export { KeyValue, KeyValueAdd, KeyValueError, KeyValueItem, KeyValueKeyInput, KeyValueList, KeyValueRemove, KeyValueValueInput, useKeyValueStore } from './layout/key-value';
+export type { KeyValueProps, KeyValueItemData } from './layout/key-value';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Data Display
@@ -148,6 +176,18 @@ export { DatePicker, DateRangePicker } from './data/calendar';
 export type { DatePickerProps, DateRangePickerProps, DateRange } from './data/calendar';
 export { Toggle, toggleVariants } from './data/toggle';
 export { ToggleGroup, ToggleGroupItem } from './data/toggle-group';
+export { AvatarGroup } from './data/avatar-group';
+export type { AvatarGroupProps } from './data/avatar-group';
+export { BadgeOverflow } from './data/badge-overflow';
+export type { BadgeOverflowProps } from './data/badge-overflow';
+export { Stat, StatDescription, StatIndicator, StatLabel, StatSeparator, StatTrend, StatValue, statIndicatorVariants } from './data/stat';
+export type { StatIndicatorProps } from './data/stat';
+export { Status, StatusIndicator, StatusLabel, statusVariants } from './data/status';
+export type { StatusProps } from './data/status';
+export { CircularProgress, CircularProgressCombined, CircularProgressIndicator, CircularProgressRange, CircularProgressTrack, CircularProgressValueText } from './data/circular-progress';
+export type { CircularProgressProps } from './data/circular-progress';
+export { RelativeTimeCard, relativeTimeCardVariants } from './data/relative-time-card';
+export type { RelativeTimeCardProps } from './data/relative-time-card';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Chart Components
@@ -163,6 +203,8 @@ export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMe
 export { Preloader, PreloaderSkeleton } from './feedback/preloader';
 export type { PreloaderProps, PreloaderSkeletonProps } from './feedback/preloader';
 export { Toaster } from './feedback/sonner';
+export { Banner, BannerActions, BannerClose, BannerContent, BannerDescription, BannerIcon, Banners, BannerTitle, useBanner, useBanners } from './feedback/banner';
+export type { BannerProps, BannersProps, BannerVariant } from './feedback/banner';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Boundary
@@ -189,6 +231,13 @@ export type { TokenIconProps, TokenSymbol, TokenCategory } from './specialized/t
 export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter } from './specialized/item';
 export { Portal } from './specialized/portal';
 export type { PortalProps } from './specialized/portal';
+export { Presence } from './specialized/presence';
+export type { PresenceProps } from './specialized/presence';
+export { VisuallyHidden } from './specialized/visually-hidden';
+export { VisuallyHiddenInput } from './specialized/visually-hidden-input';
+export type { VisuallyHiddenInputProps, InputValue as VisuallyHiddenInputValue } from './specialized/visually-hidden-input';
+export { Primitive, dispatchDiscreteCustomEvent } from './specialized/primitive';
+export type { PrimitivePropsWithRef } from './specialized/primitive';
 export { ImageWithFallback } from './specialized/image-with-fallback';
 export type { ImageWithFallbackProps } from './specialized/image-with-fallback';
 export { Flag, LanguageFlag, LANGUAGE_TO_COUNTRY, getLanguageCountryCode, FLAG_COMPONENTS } from './specialized/flag';
@@ -199,3 +248,5 @@ export type { FlagProps, LanguageFlagProps, FlagSvgComponent } from './specializ
 // ─────────────────────────────────────────────────────────────────────────────
 export { GlowBackground } from './effects';
 export type { GlowBackgroundProps } from './effects';
+export { Swap, SwapOff, SwapOn, useSwap } from './effects/swap';
+export type { SwapProps } from './effects/swap';