@velocis/timepicker1 0.2.0

package/dist/index.js

@@ -0,0 +1,671 @@
+'use client';
+
+// src/TimePicker1.tsx
+import { cn as cn2, Portal, useDirection, useFloatingPosition } from "@velocis/core";
+import {
+  useCallback,
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState
+} from "react";
+
+// src/TimePicker1.defaults.ts
+var TIMEPICKER1_DEFAULTS = {
+  contentWidth: "w-40",
+  contentZIndex: 9999,
+  closeOnScroll: true,
+  fullWidth: false,
+  disabled: false,
+  defaultOpen: false,
+  closeOnSelect: true,
+  minuteStep: 15,
+  use24Hour: false,
+  slotCount: 48,
+  startFromNow: true,
+  listHeight: 280
+};
+var TIMEPICKER1_DEFAULT_COLORS = {
+  panelBgColor: "#141414",
+  activeItemColor: "#FF6B3D",
+  scrollbarThumbColor: "rgba(255, 255, 255, 0.18)",
+  scrollbarWidth: 2
+};
+
+// src/TimePicker1.variants.ts
+import { cva } from "class-variance-authority";
+var timePicker1TriggerVariants = cva(
+  "flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium shadow-sm ring-1 ring-inset transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-velocis-primary/40 bg-velocis-background text-velocis-foreground ring-velocis-border hover:bg-velocis-border/30",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full justify-between",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-60",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      fullWidth: false,
+      disabled: false
+    }
+  }
+);
+var timePicker1ContentVariants = cva(
+  "fixed rounded-2xl border border-velocis-border p-4 shadow-2xl focus:outline-none"
+);
+var timePicker1ItemVariants = cva(
+  "flex h-9 w-full items-center justify-center rounded-2xl text-sm transition-colors"
+);
+
+// src/components/TimePickerPanel.tsx
+import { cn } from "@velocis/core";
+import { useEffect, useMemo, useRef } from "react";
+
+// src/presets/timepicker1Styles.ts
+var TIMEPICKER1_SCROLLBAR_WIDTH_PX = 2;
+var timepicker1ListScrollbarStyles = "velocis-timepicker1-scroll";
+function resolveListHeight(height) {
+  return typeof height === "number" ? `${height}px` : height;
+}
+function resolveScrollbarStyle(colors) {
+  const width = colors?.scrollbarWidth ?? TIMEPICKER1_DEFAULT_COLORS.scrollbarWidth;
+  const thumb = colors?.scrollbarThumbColor ?? TIMEPICKER1_DEFAULT_COLORS.scrollbarThumbColor;
+  return {
+    scrollbarWidth: "thin",
+    scrollbarColor: `${thumb} transparent`,
+    ["--velocis-timepicker1-scrollbar-thumb"]: thumb,
+    ["--velocis-timepicker1-scrollbar-width"]: `${width}px`
+  };
+}
+
+// src/styles/ensureScrollbarStyles.ts
+var SCROLLBAR_STYLE_ID = "velocis-timepicker1-scrollbar";
+function ensureTimePicker1ScrollbarStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(SCROLLBAR_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = SCROLLBAR_STYLE_ID;
+  style.textContent = `
+    .velocis-timepicker1-scroll {
+      scrollbar-width: thin;
+      scrollbar-color: var(--velocis-timepicker1-scrollbar-thumb, rgba(255, 255, 255, 0.18)) transparent;
+    }
+    .velocis-timepicker1-scroll::-webkit-scrollbar {
+      width: var(--velocis-timepicker1-scrollbar-width, 2px);
+    }
+    .velocis-timepicker1-scroll::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .velocis-timepicker1-scroll::-webkit-scrollbar-thumb {
+      min-height: 28px;
+      border-radius: 9999px;
+      background-color: var(--velocis-timepicker1-scrollbar-thumb, rgba(255, 255, 255, 0.18));
+      transition: background-color 0.2s ease;
+    }
+    .velocis-timepicker1-scroll:hover::-webkit-scrollbar-thumb {
+      background-color: color-mix(
+        in srgb,
+        var(--velocis-timepicker1-scrollbar-thumb, rgba(255, 255, 255, 0.18)) 55%,
+        white
+      );
+    }
+    .velocis-timepicker1-scroll:active::-webkit-scrollbar-thumb {
+      background-color: color-mix(
+        in srgb,
+        var(--velocis-timepicker1-scrollbar-thumb, rgba(255, 255, 255, 0.18)) 40%,
+        white
+      );
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// src/utils/timepicker1DisabledRules.ts
+function timeToMinutes(time) {
+  return time.hours * 60 + time.minutes;
+}
+function isSameTimeValue(a, b) {
+  return a.hours === b.hours && a.minutes === b.minutes;
+}
+function isTimeRuleDisabled(time, rule) {
+  switch (rule.type) {
+    case "time":
+      return isSameTimeValue(time, rule.time);
+    case "times":
+      return rule.times.some((t) => isSameTimeValue(time, t));
+    case "hour":
+      return time.hours === rule.hour;
+    case "minute":
+      return time.minutes === rule.minute;
+    case "hourMinute":
+      return time.hours === rule.hour && time.minutes === rule.minute;
+    case "custom":
+      return rule.match(time);
+    default:
+      return false;
+  }
+}
+function isTimeDisabledByRules(time, rules) {
+  if (!rules?.length) return false;
+  return rules.some((rule) => isTimeRuleDisabled(time, rule));
+}
+function isTimePickerTimeDisabled(time, constraints = {}) {
+  const { minTime, maxTime, disabledRules } = constraints;
+  const total = timeToMinutes(time);
+  if (minTime !== void 0 && total < timeToMinutes(minTime)) return true;
+  if (maxTime !== void 0 && total > timeToMinutes(maxTime)) return true;
+  return isTimeDisabledByRules(time, disabledRules);
+}
+
+// src/utils/timeUtils.ts
+function timeToMinutes2(time) {
+  return time.hours * 60 + time.minutes;
+}
+function minutesToTime(totalMinutes) {
+  const normalized = (totalMinutes % (24 * 60) + 24 * 60) % (24 * 60);
+  return {
+    hours: Math.floor(normalized / 60),
+    minutes: normalized % 60
+  };
+}
+function isSameTime(a, b) {
+  return a.hours === b.hours && a.minutes === b.minutes;
+}
+function isTimeInRange(time, minTime, maxTime) {
+  const total = timeToMinutes2(time);
+  if (minTime !== void 0 && total < timeToMinutes2(minTime)) return false;
+  if (maxTime !== void 0 && total > timeToMinutes2(maxTime)) return false;
+  return true;
+}
+function ceilTimeToStep(time, step) {
+  const total = timeToMinutes2(time);
+  return minutesToTime(Math.ceil(total / step) * step);
+}
+function getNextSlotAfterNow(step = 15) {
+  const now = /* @__PURE__ */ new Date();
+  const totalMinutes = now.getHours() * 60 + now.getMinutes();
+  const nextTotal = Math.ceil((totalMinutes + 1) / step) * step;
+  return minutesToTime(nextTotal);
+}
+function getEffectiveSlotStart(options) {
+  const candidates = [0];
+  if (options.startFromNow) {
+    candidates.push(timeToMinutes2(getNextSlotAfterNow(options.minuteStep)));
+  }
+  if (options.minTime !== void 0) {
+    candidates.push(timeToMinutes2(ceilTimeToStep(options.minTime, options.minuteStep)));
+  }
+  return minutesToTime(Math.max(...candidates));
+}
+function generateBoundedTimeSlots(options) {
+  const start = getEffectiveSlotStart({
+    startFromNow: options.startFromNow,
+    minTime: options.minTime,
+    minuteStep: options.minuteStep
+  });
+  const slots = [];
+  let current = timeToMinutes2(start);
+  const maxMinutes = options.maxTime !== void 0 ? timeToMinutes2(options.maxTime) : 24 * 60 - options.minuteStep;
+  while (slots.length < options.slotCount && current <= maxMinutes) {
+    const slot = minutesToTime(current);
+    if (isTimeInRange(slot, options.minTime, options.maxTime) && !isTimePickerTimeDisabled(slot, {
+      minTime: options.minTime,
+      maxTime: options.maxTime,
+      disabledRules: options.disabledRules
+    })) {
+      slots.push(slot);
+    }
+    current += options.minuteStep;
+    if (current >= 24 * 60) break;
+  }
+  return slots;
+}
+function padTwo(n) {
+  return n.toString().padStart(2, "0");
+}
+function formatTimeSlot(time, locale, use24Hour) {
+  if (!time) return "";
+  if (use24Hour) {
+    return `${padTwo(time.hours)}:${padTwo(time.minutes)}`;
+  }
+  if (locale.startsWith("ar")) {
+    const h12 = time.hours % 12 || 12;
+    const period = time.hours < 12 ? "\u0635" : "\u0645";
+    return `${h12}:${padTwo(time.minutes)} ${period}`;
+  }
+  const date = /* @__PURE__ */ new Date();
+  date.setHours(time.hours, time.minutes, 0, 0);
+  return date.toLocaleTimeString(locale, {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+}
+function clampTimeToRange(time, minTime, maxTime) {
+  let total = timeToMinutes2(time);
+  if (minTime !== void 0) {
+    total = Math.max(total, timeToMinutes2(minTime));
+  }
+  if (maxTime !== void 0) {
+    total = Math.min(total, timeToMinutes2(maxTime));
+  }
+  return minutesToTime(total);
+}
+
+// src/components/TimePickerPanel.tsx
+import { jsx } from "react/jsx-runtime";
+function TimePickerPanel({
+  value,
+  colors,
+  locale,
+  use24Hour,
+  minuteStep,
+  slotCount,
+  startFromNow,
+  isOpen,
+  minTime,
+  maxTime,
+  disabledRules,
+  listHeight,
+  listClassName,
+  onChange,
+  className
+}) {
+  const listRef = useRef(null);
+  const selectedRef = useRef(null);
+  const resolvedColors = {
+    panelBgColor: colors.panelBgColor ?? TIMEPICKER1_DEFAULT_COLORS.panelBgColor,
+    activeItemColor: colors.activeItemColor ?? TIMEPICKER1_DEFAULT_COLORS.activeItemColor
+  };
+  const slots = useMemo(
+    () => generateBoundedTimeSlots({
+      startFromNow,
+      minTime,
+      maxTime,
+      disabledRules,
+      minuteStep,
+      slotCount
+    }),
+    [startFromNow, minTime, maxTime, disabledRules, minuteStep, slotCount, isOpen]
+  );
+  const timeConstraints = useMemo(
+    () => ({ minTime, maxTime, disabledRules }),
+    [minTime, maxTime, disabledRules]
+  );
+  useEffect(() => {
+    ensureTimePicker1ScrollbarStyles();
+  }, []);
+  useEffect(() => {
+    if (value) {
+      selectedRef.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [value, slots]);
+  return /* @__PURE__ */ jsx("div", { className: cn("text-start", className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": locale.startsWith("ar") ? "\u0627\u062E\u062A\u0631 \u0627\u0644\u0648\u0642\u062A" : "Select time",
+      className: cn(
+        "overflow-y-auto rounded-2xl",
+        timepicker1ListScrollbarStyles,
+        listClassName
+      ),
+      style: {
+        height: resolveListHeight(listHeight),
+        ...resolveScrollbarStyle(colors)
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 p-1", children: slots.map((slot) => {
+        const isActive = value ? isSameTime(slot, value) : false;
+        const isDisabled = isTimePickerTimeDisabled(slot, timeConstraints);
+        const label = formatTimeSlot(slot, locale, use24Hour);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: isActive ? selectedRef : void 0,
+            type: "button",
+            role: "option",
+            "aria-selected": isActive,
+            disabled: isDisabled,
+            onClick: () => !isDisabled && onChange(slot),
+            className: cn(
+              timePicker1ItemVariants(),
+              "w-full justify-start px-3",
+              isDisabled && "cursor-not-allowed opacity-40",
+              !isActive && !isDisabled && "text-velocis-foreground hover:bg-velocis-border/30"
+            ),
+            style: isActive ? { backgroundColor: resolvedColors.activeItemColor, color: "#ffffff" } : void 0,
+            children: label
+          },
+          `${slot.hours}-${slot.minutes}`
+        );
+      }) })
+    }
+  ) });
+}
+
+// src/positioning/computePopoverStyle.ts
+import {
+  computeFloatingPosition,
+  floatingPositionToStyle
+} from "@velocis/core";
+function parseContentWidthClass(contentWidth) {
+  const match = contentWidth.match(/^w-(\d+(?:\.\d+)?|\[\d+px\])$/);
+  if (!match?.[1]) return void 0;
+  const value = match[1];
+  if (value.startsWith("[")) {
+    return parseInt(value.slice(1, -2), 10);
+  }
+  const remMap = {
+    "72": 288,
+    "80": 320,
+    "96": 384
+  };
+  return remMap[value];
+}
+
+// src/TimePicker1.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function useControllableOpen(controlledOpen, defaultOpen, onOpenChange) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return { open, setOpen };
+}
+function useControllableValue(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    defaultValue ?? null
+  );
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue ?? null : uncontrolledValue;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledValue(next);
+      }
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  return { value, setValue };
+}
+function ClockIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx2("path", { d: "M8 5v3.5l2.5 1.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function TimePicker1Root({
+  trigger,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  open: controlledOpen,
+  defaultOpen = TIMEPICKER1_DEFAULTS.defaultOpen,
+  onOpenChange,
+  colors,
+  locale: localeProp,
+  use24Hour = TIMEPICKER1_DEFAULTS.use24Hour,
+  minuteStep = TIMEPICKER1_DEFAULTS.minuteStep,
+  slotCount = TIMEPICKER1_DEFAULTS.slotCount,
+  startFromNow = TIMEPICKER1_DEFAULTS.startFromNow,
+  minTime,
+  maxTime,
+  disabledRules,
+  listHeight = TIMEPICKER1_DEFAULTS.listHeight,
+  listClassName,
+  triggerClassName,
+  contentClassName,
+  contentWidth = TIMEPICKER1_DEFAULTS.contentWidth,
+  fullWidth = TIMEPICKER1_DEFAULTS.fullWidth,
+  disabled = TIMEPICKER1_DEFAULTS.disabled,
+  closeOnSelect = TIMEPICKER1_DEFAULTS.closeOnSelect,
+  closeOnScroll = TIMEPICKER1_DEFAULTS.closeOnScroll,
+  contentZIndex = TIMEPICKER1_DEFAULTS.contentZIndex,
+  testId,
+  contentTestId
+}) {
+  const direction = useDirection();
+  const locale = localeProp ?? (direction === "rtl" ? "ar" : "en");
+  const { open, setOpen } = useControllableOpen(controlledOpen, defaultOpen, onOpenChange);
+  const { value, setValue } = useControllableValue(controlledValue, defaultValue, onChange);
+  const contentRef = useRef2(null);
+  const buttonRef = useRef2(null);
+  const getPanelWidth = useCallback(
+    (anchorRect) => {
+      if (fullWidth) return anchorRect.width;
+      const contentWidthPx = parseContentWidthClass(contentWidth);
+      return contentWidthPx ?? Math.min(320, window.innerWidth - 16);
+    },
+    [contentWidth, fullWidth]
+  );
+  const positionStyle = useFloatingPosition({
+    open,
+    anchorRef: buttonRef,
+    contentRef,
+    direction,
+    getWidth: getPanelWidth,
+    offset: 4,
+    preferredPlacement: "bottom",
+    fullWidth
+  });
+  const resolvedColors = {
+    panelBgColor: colors?.panelBgColor ?? TIMEPICKER1_DEFAULT_COLORS.panelBgColor,
+    activeItemColor: colors?.activeItemColor ?? TIMEPICKER1_DEFAULT_COLORS.activeItemColor
+  };
+  useEffect2(() => {
+    if (!open) return;
+    const handleClickOutside = (event) => {
+      if (buttonRef.current && !buttonRef.current.contains(event.target) && !contentRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    const handleScroll = (event) => {
+      if (!closeOnScroll) return;
+      const target = event.target;
+      if (target && !contentRef.current?.contains(target) && !buttonRef.current?.contains(target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [closeOnScroll, open, setOpen]);
+  const handleChange = (time) => {
+    if (!isTimeInRange(time, minTime, maxTime)) return;
+    if (isTimePickerTimeDisabled(time, { minTime, maxTime, disabledRules })) return;
+    setValue(time);
+    if (closeOnSelect) {
+      setOpen(false);
+    }
+  };
+  const displayTrigger = trigger ?? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx2(ClockIcon, { className: "text-velocis-muted" }),
+    value ? formatTimeSlot(value, locale, use24Hour) : locale.startsWith("ar") ? "\u0627\u062E\u062A\u0631 \u0627\u0644\u0648\u0642\u062A" : "Select time"
+  ] });
+  const pickerContent = open ? /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: contentRef,
+      role: "dialog",
+      "aria-modal": "false",
+      "data-testid": contentTestId,
+      dir: direction,
+      className: cn2(timePicker1ContentVariants(), contentClassName),
+      style: {
+        ...positionStyle,
+        zIndex: contentZIndex,
+        backgroundColor: resolvedColors.panelBgColor
+      },
+      children: /* @__PURE__ */ jsx2(
+        TimePickerPanel,
+        {
+          value,
+          colors: resolvedColors,
+          locale,
+          use24Hour,
+          minuteStep,
+          slotCount,
+          startFromNow,
+          isOpen: open,
+          minTime,
+          maxTime,
+          disabledRules,
+          listHeight,
+          listClassName,
+          onChange: handleChange
+        }
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn2(
+          "relative text-start",
+          fullWidth ? "block w-full" : "inline-block"
+        ),
+        children: /* @__PURE__ */ jsx2(
+          "button",
+          {
+            ref: buttonRef,
+            type: "button",
+            disabled,
+            "aria-expanded": open,
+            "aria-haspopup": "dialog",
+            onClick: () => !disabled && setOpen(!open),
+            "data-testid": testId,
+            className: cn2(
+              timePicker1TriggerVariants({ fullWidth, disabled }),
+              triggerClassName
+            ),
+            children: displayTrigger
+          }
+        )
+      }
+    ),
+    open && /* @__PURE__ */ jsx2(Portal, { children: pickerContent })
+  ] });
+}
+
+// src/hooks/useTimePicker1.ts
+import { useCallback as useCallback2, useRef as useRef3, useState as useState2 } from "react";
+function useTimePicker1(options) {
+  const [open, setOpen] = useState2(options?.defaultOpen ?? false);
+  const anchorRef = useRef3(null);
+  const isValueControlled = options?.value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState2(
+    options?.defaultValue ?? null
+  );
+  const value = isValueControlled ? options?.value ?? null : uncontrolledValue;
+  const setValue = useCallback2(
+    (time) => {
+      if (!isValueControlled) {
+        setUncontrolledValue(time);
+      }
+      options?.onChange?.(time);
+    },
+    [isValueControlled, options]
+  );
+  const isOpenControlled = options?.open !== void 0;
+  const resolvedOpen = isOpenControlled ? options?.open ?? false : open;
+  const setOpenState = useCallback2(
+    (next) => {
+      if (!isOpenControlled) {
+        setOpen(next);
+      }
+      options?.onOpenChange?.(next);
+    },
+    [isOpenControlled, options]
+  );
+  const show = useCallback2(() => setOpenState(true), [setOpenState]);
+  const hide = useCallback2(() => setOpenState(false), [setOpenState]);
+  return {
+    value,
+    setValue,
+    open: resolvedOpen,
+    setOpen: setOpenState,
+    show,
+    hide,
+    anchorRef,
+    timePickerProps: {
+      value,
+      onChange: setValue,
+      open: resolvedOpen,
+      onOpenChange: setOpenState,
+      colors: options?.colors,
+      locale: options?.locale,
+      use24Hour: options?.use24Hour,
+      minuteStep: options?.minuteStep,
+      slotCount: options?.slotCount,
+      startFromNow: options?.startFromNow,
+      minTime: options?.minTime,
+      maxTime: options?.maxTime,
+      disabledRules: options?.disabledRules,
+      listHeight: options?.listHeight,
+      listClassName: options?.listClassName,
+      closeOnSelect: options?.closeOnSelect,
+      contentWidth: options?.contentWidth,
+      fullWidth: options?.fullWidth
+    }
+  };
+}
+
+// src/index.ts
+var TimePicker1 = Object.assign(TimePicker1Root, {});
+export {
+  TIMEPICKER1_DEFAULTS,
+  TIMEPICKER1_DEFAULT_COLORS,
+  TIMEPICKER1_SCROLLBAR_WIDTH_PX,
+  TimePicker1,
+  TimePicker1Root,
+  TimePickerPanel,
+  clampTimeToRange,
+  formatTimeSlot,
+  generateBoundedTimeSlots,
+  getNextSlotAfterNow,
+  isTimeDisabledByRules,
+  isTimeInRange,
+  isTimePickerTimeDisabled,
+  isTimeRuleDisabled,
+  resolveListHeight,
+  resolveScrollbarStyle,
+  timePicker1ContentVariants,
+  timePicker1ItemVariants,
+  timePicker1TriggerVariants,
+  timepicker1ListScrollbarStyles,
+  useTimePicker1
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@velocis/timepicker1",
+  "version": "0.2.0",
+  "license": "MIT",
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "@velocis/core": "0.1.1",
+    "@velocis/theme": "0.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.2",
+    "eslint": "^9.17.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@velocis/eslint-config": "0.0.0",
+    "@velocis/tsconfig": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit"
+  }
+}