aplance-ui 1.0.1

package/registry/components/ui/input-fields/time-picker/time-picker.module.css

@@ -0,0 +1,57 @@
+.popover_menu {
+  min-width: 13.25rem;
+}
+
+.columns {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-1);
+  padding: var(--spacing-3);
+}
+
+.column {
+  flex: 1;
+  min-width: 3.75rem;
+  max-height: 13rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.column_separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--spacing-1);
+  font-size: var(--font-size-base);
+  color: var(--color-muted-foreground);
+  font-weight: var(--font-weight-medium);
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.column_separator_sub {
+  opacity: 0.8;
+}
+
+.column_meridiem {
+  min-width: 3rem;
+}
+
+.column_item {
+  width: 100%;
+  justify-content: center !important;
+  flex-shrink: 0;
+}
+
+.column_item_meridiem {
+  letter-spacing: var(--letter-spacing-wide);
+  font-weight: var(--font-weight-medium);
+}
+

package/registry/components/ui/input-fields/time-picker/time-picker.tsx

@@ -0,0 +1,437 @@
+import {
+  type ComponentProps,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import clsx from "clsx";
+import { IconClock } from "@tabler/icons-react";
+import {
+  Popover,
+  PopoverMenu,
+  PopoverTrigger,
+} from "../../../primitives/popover/popover";
+import { Icon } from "../../../primitives/icon/icon";
+import { Button } from "../../button/button";
+import { FieldMessage } from "../common/field-message/field-message";
+import sCommon from "../common/input-field-common.module.css";
+import sPickerCommon from "../common/picker-popover-common.module.css";
+import {
+  SelectButton,
+  type SelectButtonProps,
+} from "../common/select-button/select-button";
+import type { BaseInputFieldProps } from "../common/types";
+import s from "./time-picker.module.css";
+
+export type TimePickerProps = BaseInputFieldProps & {
+  /** Controlled value in "HH:mm" format. */
+  value?: string;
+  /** Initial value in "HH:mm" format for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called with the new "HH:mm" string, or undefined when cleared. */
+  onChange?: (value: string | undefined) => void;
+
+  placeholder?: string;
+
+  /** Display mode for hour selection. Value emitted by onChange remains "HH:mm" (24h). */
+  timeFormat?: "24h" | "12h";
+
+  /** Minute column increment. Common values: 1, 5, 10, 15, 30. Default: 1. */
+  minuteStep?: number;
+
+  showClear?: boolean;
+  /** Show popover footer actions (Clear/Done). Default: true. */
+  showActionFooter?: boolean;
+  onClear?: () => void;
+  onBlur?: () => void;
+
+  popover?: Omit<ComponentProps<typeof Popover>, "children">;
+  popoverTrigger?: ComponentProps<typeof PopoverTrigger>;
+  popoverMenu?: ComponentProps<typeof PopoverMenu>;
+  selectButton?: Omit<SelectButtonProps, "children" | "onClear">;
+};
+
+const pad2 = (n: number) => String(n).padStart(2, "0");
+
+const HOURS_24 = Array.from({ length: 24 }, (_, i) => i);
+const HOURS_12 = Array.from({ length: 12 }, (_, i) => i + 1);
+const MERIDIEMS = ["AM", "PM"] as const;
+
+type Meridiem = (typeof MERIDIEMS)[number];
+
+const parseTimeValue = (
+  value: string | undefined,
+): { hours: number; minutes: number } | undefined => {
+  if (!value) return undefined;
+  const match = /^(\d{1,2}):(\d{2})$/.exec(value.trim());
+  if (!match) return undefined;
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return undefined;
+  return { hours, minutes };
+};
+
+const formatTimeValue = (hours: number, minutes: number): string =>
+  `${pad2(hours)}:${pad2(minutes)}`;
+
+const toMeridiem = (hours24: number): Meridiem =>
+  hours24 >= 12 ? "PM" : "AM";
+
+const toHour12 = (hours24: number): number => {
+  const normalized = hours24 % 12;
+  return normalized === 0 ? 12 : normalized;
+};
+
+const toHour24 = (hours12: number, meridiem: Meridiem): number => {
+  const normalized = hours12 % 12;
+  return meridiem === "PM" ? normalized + 12 : normalized;
+};
+
+const scrollColumnToSelected = (col: HTMLDivElement | null) => {
+  if (!col) return;
+  const item = col.querySelector<HTMLElement>("[data-selected]");
+  if (!item) {
+    col.scrollTop = 0;
+    return;
+  }
+  col.scrollTop = item.offsetTop - col.offsetHeight / 2 + item.offsetHeight / 2;
+};
+
+export const TimePicker = (props: TimePickerProps) => {
+  const {
+    label,
+    className,
+    style,
+    id,
+    info,
+    errors,
+    layout = "default",
+    layoutDirection = "default",
+
+    placeholder = "Select time...",
+    timeFormat = "24h",
+    minuteStep = 1,
+
+    disabled = false,
+    readOnly = false,
+    required = false,
+
+    showClear = true,
+    showActionFooter = true,
+    onClear,
+    onBlur,
+    onChange,
+
+    popover,
+    popoverTrigger,
+    popoverMenu,
+    selectButton,
+  } = props;
+
+  const isControlled = "value" in props;
+
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+
+  const is12Hour = timeFormat === "12h";
+
+  const resolvedMinuteStep = useMemo(() => {
+    const normalized = Math.floor(minuteStep);
+    if (!Number.isFinite(normalized) || normalized < 1) return 1;
+    return Math.min(59, normalized);
+  }, [minuteStep]);
+
+  const minutes = useMemo(
+    () =>
+      Array.from(
+        { length: Math.ceil(60 / resolvedMinuteStep) },
+        (_, i) => i * resolvedMinuteStep,
+      ).filter((m) => m < 60),
+    [resolvedMinuteStep],
+  );
+
+  const [internalValue, setInternalValue] = useState<string | undefined>(() =>
+    "defaultValue" in props ? props.defaultValue : undefined,
+  );
+
+  const currentValue = isControlled ? props.value : internalValue;
+  const parsed = useMemo(() => parseTimeValue(currentValue), [currentValue]);
+  const hasValue = Boolean(currentValue);
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const selectedHour =
+    parsed === undefined
+      ? undefined
+      : is12Hour
+        ? toHour12(parsed.hours)
+        : parsed.hours;
+  const selectedMinute = parsed?.minutes;
+  const selectedMeridiem = parsed ? toMeridiem(parsed.hours) : undefined;
+
+  const hoursColRef = useRef<HTMLDivElement>(null);
+  const minutesColRef = useRef<HTMLDivElement>(null);
+  const meridiemColRef = useRef<HTMLDivElement>(null);
+
+  // Scroll columns to the selected item when the popover opens
+  useEffect(() => {
+    if (!isOpen) return;
+    requestAnimationFrame(() => {
+      scrollColumnToSelected(hoursColRef.current);
+      scrollColumnToSelected(minutesColRef.current);
+      if (is12Hour) {
+        scrollColumnToSelected(meridiemColRef.current);
+      }
+    });
+  }, [isOpen, is12Hour]);
+
+  const commit = useCallback(
+    (h: number, m: number) => {
+      const next = formatTimeValue(h, m);
+      if (!isControlled) setInternalValue(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange],
+  );
+
+  const handleSelectHour = useCallback(
+    (hourOption: number) => {
+      const nextHour = is12Hour
+        ? toHour24(hourOption, selectedMeridiem ?? "AM")
+        : hourOption;
+      commit(nextHour, selectedMinute ?? 0);
+    },
+    [commit, is12Hour, selectedMeridiem, selectedMinute],
+  );
+
+  const handleSelectMinute = useCallback(
+    (m: number) => {
+      commit(parsed?.hours ?? 0, m);
+    },
+    [commit, parsed?.hours],
+  );
+
+  const handleSelectMeridiem = useCallback(
+    (nextMeridiem: Meridiem) => {
+      const hour12 = parsed !== undefined ? toHour12(parsed.hours) : 12;
+      commit(toHour24(hour12, nextMeridiem), parsed?.minutes ?? 0);
+    },
+    [commit, parsed],
+  );
+
+  const handleClear = useCallback(() => {
+    if (!isControlled) setInternalValue(undefined);
+    onChange?.(undefined);
+    onClear?.();
+  }, [isControlled, onChange, onClear]);
+
+  const displayValue = useMemo(() => {
+    if (!hasValue) return placeholder;
+    if (!parsed) return currentValue ?? placeholder;
+    if (!is12Hour) return currentValue ?? placeholder;
+    return `${pad2(toHour12(parsed.hours))}:${pad2(parsed.minutes)} ${toMeridiem(parsed.hours)}`;
+  }, [currentValue, hasValue, is12Hour, parsed, placeholder]);
+
+  const popoverOnClose = popover?.onClose;
+  const handlePopoverClose = useCallback(() => {
+    popoverOnClose?.();
+    onBlur?.();
+  }, [onBlur, popoverOnClose]);
+
+  const {
+    className: popoverClassName,
+    offset: popoverOffset = 4,
+    ...popoverRest
+  } = popover ?? {};
+
+  const {
+    className: popoverTriggerClassName,
+    style: popoverTriggerStyle,
+    ...popoverTriggerRest
+  } = popoverTrigger ?? {};
+
+  const {
+    className: popoverMenuClassName,
+    style: popoverMenuStyle,
+    ...popoverMenuRest
+  } = popoverMenu ?? {};
+
+  return (
+    <div className={clsx(sCommon.container, className)} style={style}>
+      {label && (
+        <div
+          className={clsx(
+            sCommon.field_container,
+            layout !== "default" && sCommon[layout],
+            layout !== "default" &&
+              layoutDirection !== "default" &&
+              sCommon[layoutDirection],
+          )}
+        >
+          <label className={sCommon.label} htmlFor={inputId}>
+            {label}
+          </label>
+        </div>
+      )}
+
+      <Popover
+        closeOnPathChange={popover?.closeOnPathChange ?? true}
+        closeOnClickOutside={popover?.closeOnClickOutside ?? true}
+        animationDuration={popover?.animationDuration ?? 200}
+        position={popover?.position ?? "bottom"}
+        align={popover?.align ?? "start"}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        className={clsx(sPickerCommon.picker_popover, popoverClassName)}
+        offset={popoverOffset}
+        {...popoverRest}
+        onClose={handlePopoverClose}
+      >
+        <PopoverTrigger
+          asChild
+          className={clsx(
+            sPickerCommon.picker_popover_trigger,
+            popoverTriggerClassName,
+          )}
+          style={popoverTriggerStyle}
+          disabled={disabled || readOnly}
+          {...popoverTriggerRest}
+        >
+          <SelectButton
+            id={inputId}
+            disabled={disabled || readOnly}
+            required={required}
+            className={clsx(
+              !hasValue && sPickerCommon.picker_value_placeholder,
+              selectButton?.className,
+            )}
+            style={selectButton?.style}
+            buttonVariant={selectButton?.buttonVariant}
+            buttonSize={selectButton?.buttonSize}
+            tooltip={selectButton?.tooltip}
+            tooltipPosition={selectButton?.tooltipPosition}
+            showClear={hasValue && showClear && !disabled && !readOnly}
+            onClear={(e: React.MouseEvent) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handleClear();
+            }}
+            showChevron={false}
+            iconEnd={
+              <Icon aria-hidden="true" clickable>
+                <IconClock />
+              </Icon>
+            }
+          >
+            {displayValue}
+          </SelectButton>
+        </PopoverTrigger>
+
+        {!disabled && !readOnly && (
+          <PopoverMenu
+            className={clsx(
+              sPickerCommon.picker_popover_menu_base,
+              s.popover_menu,
+              popoverMenuClassName,
+            )}
+            style={popoverMenuStyle}
+            {...popoverMenuRest}
+          >
+            <div className={s.columns}>
+              <div className={s.column} ref={hoursColRef}>
+                {(is12Hour ? HOURS_12 : HOURS_24).map((h) => (
+                  <Button
+                    key={h}
+                    variant="secondary"
+                    size="default"
+                    isActive={h === selectedHour}
+                    // data-selected presence is used by scrollColumnToSelected
+                    {...(h === selectedHour ? { "data-selected": "" } : {})}
+                    className={s.column_item}
+                    onClick={() => handleSelectHour(h)}
+                  >
+                    {pad2(h)}
+                  </Button>
+                ))}
+              </div>
+
+              <div className={s.column_separator}>:</div>
+
+              <div className={s.column} ref={minutesColRef}>
+                {minutes.map((m) => (
+                  <Button
+                    key={m}
+                    variant="secondary"
+                    size="default"
+                    isActive={m === selectedMinute}
+                    {...(m === selectedMinute ? { "data-selected": "" } : {})}
+                    className={s.column_item}
+                    onClick={() => handleSelectMinute(m)}
+                  >
+                    {pad2(m)}
+                  </Button>
+                ))}
+              </div>
+
+              {is12Hour && (
+                <>
+                  <div className={clsx(s.column_separator, s.column_separator_sub)}>
+                    :
+                  </div>
+                  <div className={clsx(s.column, s.column_meridiem)} ref={meridiemColRef}>
+                    {MERIDIEMS.map((meridiem) => (
+                      <Button
+                        key={meridiem}
+                        variant={
+                          meridiem === selectedMeridiem ? "primary" : "secondary"
+                        }
+                        size="default"
+                        {...(meridiem === selectedMeridiem
+                          ? { "data-selected": "" }
+                          : {})}
+                        className={clsx(s.column_item, s.column_item_meridiem)}
+                        onClick={() => handleSelectMeridiem(meridiem)}
+                      >
+                        {meridiem}
+                      </Button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+
+            {showActionFooter && (
+              <div className={sPickerCommon.picker_actions_footer}>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  disabled={!hasValue}
+                  onClick={() => {
+                    if (disabled || readOnly) return;
+                    handleClear();
+                  }}
+                >
+                  Clear
+                </Button>
+                <Button
+                  type="button"
+                  variant="primary"
+                  size="sm"
+                  onClick={() => setIsOpen(false)}
+                >
+                  Done
+                </Button>
+              </div>
+            )}
+          </PopoverMenu>
+        )}
+      </Popover>
+
+      <FieldMessage errors={errors} info={info} />
+    </div>
+  );
+};

package/registry/components/ui/loader/loader.module.css

@@ -0,0 +1,156 @@
+.spinner_loader {
+  display: inline-block;
+  width: var(--loader-size, 1.5rem);
+  height: var(--loader-size, 1.5rem);
+  color: var(--loader-color, var(--color-primary));
+
+  .loading_spinner {
+    width: 100%;
+    height: 100%;
+    animation: rotate 1.2s linear infinite;
+  }
+
+  .loading_path {
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-width: 4.2;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    animation: dash 1.4s ease-in-out infinite;
+  }
+}
+
+.dots_loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--loader-size, 1rem) / 3.5);
+
+  span {
+    width: calc(var(--loader-size, 1rem) / 3);
+    height: calc(var(--loader-size, 1rem) / 3);
+    border-radius: var(--radius-full);
+    background: var(--loader-color, var(--color-muted-foreground));
+    animation: dot_pulse 1.1s ease-in-out infinite;
+
+    &:nth-child(2) {
+      animation-delay: 0.15s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+  }
+}
+
+.skeleton_shape {
+  height: var(--spacing-10);
+  width: 100%;
+  background: linear-gradient(
+      100deg,
+      color-mix(in srgb, var(--color-border) 82%, transparent) 20%,
+      color-mix(in srgb, var(--color-muted) 72%, transparent) 40%,
+      color-mix(in srgb, var(--color-border) 82%, transparent) 60%
+    )
+    var(--color-border);
+  background-size: 200% 100%;
+  border-radius: var(--radius-sm);
+  opacity: 0.5;
+  animation: skeleton_shimmer 0.75s ease-in-out infinite;
+}
+
+.page_loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 12rem;
+  width: 100%;
+}
+
+.overlay_loader {
+  width: fit-content;
+  height: fit-content;
+  padding: var(--spacing-6);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: color-mix(
+    in srgb,
+    var(--color-background) 95%,
+    transparent
+  );
+  box-shadow: var(--shadow-lg);
+  position: fixed;
+  animation: delayed_load 0.1s linear 0.2s 1 forwards;
+  visibility: hidden;
+  opacity: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: var(--z-index-modal);
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes dot_pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes delayed_load {
+  from {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  to {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+@keyframes skeleton_shimmer {
+  0% {
+    background-position-x: 100%;
+  }
+  100% {
+    background-position-x: -100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner_loader .loading_spinner,
+  .spinner_loader .loading_path,
+  .dots_loader span,
+  .skeleton_shape,
+  .overlay_loader {
+    animation: none !important;
+  }
+}