@temp-spotwork/ui 1.4.3

package/dist/components/atoms/form/time-picker/time-picker.stories.js

@@ -0,0 +1,368 @@
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { TimePicker as n } from "./time-picker.js";
+import { m as t } from "../../../../index-CYyrKZeH.js";
+const i = (e) => {
+  const [a, s] = l(e.value || /* @__PURE__ */ new Date());
+  return /* @__PURE__ */ o("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ o("div", { className: "mt-4 p-3 bg-gray-100 rounded-md", children: [
+      /* @__PURE__ */ r("div", { className: "text-sm font-medium text-gray-700", children: "Selected Value:" }),
+      /* @__PURE__ */ o("div", { className: "text-sm text-gray-600", children: [
+        /* @__PURE__ */ o("div", { children: [
+          "Date: ",
+          t(a).format("MMMM Do, YYYY")
+        ] }),
+        /* @__PURE__ */ o("div", { children: [
+          "Time: ",
+          t(a).format("h:mm A")
+        ] }),
+        /* @__PURE__ */ o("div", { children: [
+          "ISO: ",
+          a.toLocaleString()
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r(n, { ...e, value: a, selectValue: s })
+  ] });
+}, h = {
+  title: "@spotwork-ui/atoms/form/TimePicker",
+  component: n,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "A sophisticated time selection component that combines both dropdown and direct input capabilities. Built with accessibility, timezone support, and flexible validation in mind."
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    error: {
+      control: "boolean",
+      description: "Indicates whether the time picker is in an error state"
+    },
+    warning: {
+      control: "boolean",
+      description: "Indicates whether the time picker is in a warning state"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables the time picker when true"
+    },
+    value: {
+      control: "date",
+      description: "The currently selected time value"
+    },
+    timezone: {
+      control: "select",
+      options: ["America/New_York", "America/Los_Angeles", "Europe/London", "Asia/Tokyo", "Australia/Sydney"],
+      description: "The timezone of the time picker"
+    },
+    label: {
+      control: "text",
+      description: "Optional label text displayed above the time picker"
+    },
+    helperText: {
+      control: "text",
+      description: "Optional helper text displayed below the time picker"
+    },
+    step: {
+      control: { type: "number", min: 1, max: 60, step: 1 },
+      description: "The time increment step in minutes"
+    },
+    autoFocus: {
+      control: "boolean",
+      description: "When true, the time picker input will automatically receive focus on mount"
+    },
+    min: {
+      control: "date",
+      description: "The minimum allowed time value"
+    },
+    max: {
+      control: "date",
+      description: "The maximum allowed time value"
+    },
+    daySeparatorFormat: {
+      control: "select",
+      options: ["literal", "date"],
+      description: "Controls the display format of day separators in the time dropdown"
+    },
+    dateToCompare: {
+      control: "date",
+      description: "Optional reference date used for computing relative time differences"
+    },
+    notRenderTimeDifference: {
+      control: "boolean",
+      description: "Optional flag to not render the time difference in the dropdown"
+    },
+    className: {
+      control: "text",
+      description: "Optional className to apply to the time picker container"
+    },
+    selectValue: {
+      action: "time selected",
+      description: "Callback function to update the selected time"
+    },
+    onBlur: {
+      action: "blurred",
+      description: "Callback function triggered when the time picker loses focus"
+    }
+  },
+  args: {
+    value: /* @__PURE__ */ new Date(),
+    step: 5,
+    daySeparatorFormat: "literal",
+    notRenderTimeDifference: !1
+  }
+}, p = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Select Time",
+    helperText: "Choose your preferred time",
+    step: 15
+  }
+}, T = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    value: t().hours(14).minutes(30).toDate()
+    // 2:30 PM
+  }
+}, g = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Meeting Time",
+    value: t().hours(9).minutes(0).toDate()
+    // 9:00 AM
+  }
+}, b = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Appointment Time",
+    helperText: "Please select a time between 9 AM and 5 PM",
+    value: t().hours(10).minutes(15).toDate()
+    // 10:15 AM
+  }
+}, D = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Time Selection",
+    helperText: "Please select a valid time",
+    error: !0,
+    value: t().hours(16).minutes(45).toDate()
+    // 4:45 PM
+  }
+}, v = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Time Selection",
+    helperText: "This time is outside business hours",
+    warning: !0,
+    value: t().hours(20).minutes(30).toDate()
+    // 8:30 PM
+  }
+}, x = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Time Selection",
+    helperText: "This field is currently disabled",
+    disabled: !0,
+    value: t().hours(12).minutes(0).toDate()
+    // 12:00 PM
+  }
+}, f = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Time with 15-minute intervals",
+    helperText: "Select time in 15-minute increments",
+    step: 15,
+    value: t().hours(13).minutes(0).toDate()
+    // 1:00 PM
+  }
+}, y = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Business Hours",
+    helperText: "Select time between 9 AM and 5 PM",
+    min: t().hours(9).minutes(0).toDate(),
+    // 9:00 AM
+    max: t().hours(17).minutes(0).toDate(),
+    // 5:00 PM
+    value: t().hours(14).minutes(30).toDate()
+    // 2:30 PM
+  }
+}, S = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Central (Chicago) Time",
+    helperText: "All times are in Central Time",
+    timezone: "America/Chicago",
+    value: t().hours(15).minutes(0).toDate()
+    // 3:00 PM
+  }
+}, M = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Time Relative to Today",
+    helperText: "Shows time difference from current time",
+    dateToCompare: /* @__PURE__ */ new Date(),
+    value: t().add(1, "days").hours(16).minutes(30).toDate()
+    // Tomorrow 4:30 PM
+  }
+}, w = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Multi-day Time Selection",
+    helperText: "Shows actual dates for day separators",
+    daySeparatorFormat: "date",
+    min: t().startOf("day").toDate(),
+    max: t().add(2, "days").endOf("day").toDate(),
+    value: t().hours(12).minutes(0).toDate()
+    // 12:00 PM
+  }
+}, A = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Simple Time Selection",
+    helperText: "No relative time display",
+    dateToCompare: /* @__PURE__ */ new Date(),
+    notRenderTimeDifference: !0,
+    value: t().add(1, "days").hours(10).minutes(15).toDate()
+    // Tomorrow 10:15 AM
+  }
+}, k = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Auto-focused Time Picker",
+    helperText: "This field will be focused automatically",
+    autoFocus: !0,
+    value: t().hours(11).minutes(0).toDate()
+    // 11:00 AM
+  }
+}, C = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Custom Styled Time Picker",
+    helperText: "This has custom container styling",
+    className: "border-2 border-blue-200 rounded-lg p-4",
+    value: t().hours(13).minutes(45).toDate()
+    // 1:45 PM
+  }
+}, N = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Early Morning Time",
+    helperText: "Select an early morning time",
+    value: t().hours(6).minutes(0).toDate()
+    // 6:00 AM
+  }
+}, P = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Late Evening Time",
+    helperText: "Select a late evening time",
+    value: t().hours(22).minutes(30).toDate()
+    // 10:30 PM
+  }
+}, W = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Early Morning Time",
+    helperText: "Select a early morning time",
+    value: t().hours(4).minutes(15).toDate(),
+    // 4:30 AM
+    dateToCompare: t().subtract(1, "days").hours(22).minutes(0).toDate(),
+    // 10:00 PM
+    min: t().hours(4).minutes(0).toDate(),
+    step: 15
+  }
+}, z = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Midnight Time in Vancouver",
+    helperText: "Select midnight",
+    value: t().tz("America/Vancouver").hours(0).minutes(0).toDate(),
+    // 12:00 AM
+    min: t().tz("America/Vancouver").hours(0).minutes(0).subtract(6, "hours").toDate(),
+    max: t().tz("America/Vancouver").hours(0).minutes(0).add(6, "hours").toDate(),
+    step: 15,
+    timezone: "America/Vancouver"
+  }
+}, V = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Midnight Time + 1 hour",
+    helperText: "Select midnight + 1 hour",
+    value: t().hours(1).minutes(0).toDate(),
+    // 1:00 AM
+    min: t().hours(1).minutes(0).subtract(6, "hours").toDate(),
+    max: t().hours(1).minutes(0).add(6, "hours").toDate(),
+    step: 15
+  }
+}, E = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Midnight Time - 1 hour",
+    helperText: "Select midnight - 1 hour",
+    value: t().hours(23).minutes(0).toDate(),
+    // 11:00 PM
+    min: t().hours(23).minutes(0).subtract(6, "hours").toDate(),
+    max: t().hours(23).minutes(0).add(6, "hours").toDate(),
+    step: 15
+  }
+}, F = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Midnight Time - 1 hour",
+    helperText: "Select midnight - 1 hour",
+    value: t().hours(23).minutes(0).toDate(),
+    // 11:00 PM
+    min: t().hours(23).minutes(0).toDate(),
+    max: t().hours(23).minutes(0).add(18, "hours").toDate(),
+    step: 15
+  }
+}, O = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Noon Time",
+    helperText: "Select noon",
+    value: t().hours(12).minutes(0).toDate()
+    // 12:00 PM
+  }
+}, H = {
+  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  args: {
+    label: "Fifteen Minutes Step",
+    helperText: "Select a time in 15 minute increments",
+    value: t().minutes(15).toDate(),
+    min: t().subtract(3, "hours").toDate(),
+    max: t().add(3, "hours").toDate(),
+    step: 15
+  }
+};
+export {
+  k as AutoFocus,
+  T as Basic,
+  f as CustomStep,
+  C as CustomStyling,
+  p as Default,
+  x as Disabled,
+  N as EarlyMorning,
+  W as EarlyMorningWithDateToCompareAndMin,
+  D as Error,
+  H as FifteenMinutesStep,
+  P as LateEvening,
+  z as Midnight,
+  E as MidnightMinus1Hour,
+  F as MidnightMinus1HourAnd18HoursMaxUpperBound,
+  V as MidnightPlus1Hour,
+  O as Noon,
+  v as Warning,
+  M as WithDateComparison,
+  w as WithDateSeparators,
+  b as WithHelperText,
+  g as WithLabel,
+  y as WithTimeConstraints,
+  S as WithTimezone,
+  A as WithoutTimeDifference,
+  h as default
+};

package/dist/components/atoms/form/timeselect/hours-switch.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { Time } from './timeselect';
+
+export declare const styles: () => {
+    flexColItems: string;
+    divIconSwitch: string;
+    timeFlex: string;
+    hourLabel: string;
+    hourStyle: string;
+};
+export type HoursTimeSwitchProps = {
+    /**
+     * the selected time displayed in hour min and period
+     */
+    selectedTime: Time;
+    /**
+     * action to set the selected time
+     */
+    setSelectedTime: React.Dispatch<React.SetStateAction<Time>> | ((value: Time) => void);
+};
+export declare function HoursTimeSwitch({ setSelectedTime, selectedTime }: HoursTimeSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/form/timeselect/hours-switch.js

@@ -0,0 +1,88 @@
+import { jsxs as y, jsx as n } from "react/jsx-runtime";
+import { useRef as C, useCallback as c, useEffect as b } from "react";
+import { l as g } from "../../../../lodash-BRbpQ7iy.js";
+import { c as p } from "../../../../index-fN7hCOo3.js";
+import { Icons as v } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { Typography as x } from "../../../styles/typography/typography.js";
+const S = () => ({
+  flexColItems: "flex flex-col items-center",
+  divIconSwitch: "w-[5.333rem] h-[18.5rem] gap-xs justify-center",
+  timeFlex: "flex flex-col justify-center gap-xs",
+  hourLabel: "text-center",
+  hourStyle: "w-[4rem] h-[3rem] flex justify-center items-center text-center "
+});
+function O({ setSelectedTime: t, selectedTime: r }) {
+  const u = S(), w = [
+    r.hour === 1 ? 12 : r.hour - 1,
+    r.hour,
+    r.hour === 12 ? 1 : (r == null ? void 0 : r.hour) + 1
+  ], l = C(null), a = (o) => {
+    if (o === "down") {
+      const h = {
+        ...r,
+        hour: (r == null ? void 0 : r.hour) === 12 ? 1 : (r == null ? void 0 : r.hour) + 1
+      };
+      t(h);
+    } else {
+      const h = {
+        ...r,
+        hour: (r == null ? void 0 : r.hour) === 1 ? 12 : (r == null ? void 0 : r.hour) - 1
+      };
+      t(h);
+    }
+  }, i = (o) => {
+    const h = {
+      ...r,
+      hour: o
+    };
+    t(h);
+  }, s = c(
+    g.debounce((o) => {
+      o.deltaY < 0 ? a("up") : a("down");
+    }, 35),
+    // Adjust the throttle delay as needed
+    [a]
+  ), f = c(
+    (o) => {
+      o.preventDefault(), s(o);
+    },
+    [s]
+  );
+  return b(() => {
+    const o = l.current;
+    return o && o.addEventListener("wheel", f), () => {
+      o && o.removeEventListener("wheel", f);
+    };
+  }, [f]), /* @__PURE__ */ y("div", { className: p(u.flexColItems, u.divIconSwitch), ref: l, children: [
+    /* @__PURE__ */ n(v, { disabled: !1, button: !0, handleClick: () => a("up"), icon: "ChevronUp", color: "active" }),
+    /* @__PURE__ */ n("div", { className: u.timeFlex, children: w.map((o) => /* @__PURE__ */ n(
+      "div",
+      {
+        "data-testid": "hourselected",
+        onClick: () => i(o),
+        className: p(
+          "cursor-pointer select-none",
+          `${(r == null ? void 0 : r.hour) === o ? "rounded-[0.5rem] bg-surface-active" : ""}`,
+          u.hourStyle
+        ),
+        children: /* @__PURE__ */ n(
+          x,
+          {
+            swStyle: 5,
+            color: `${(r == null ? void 0 : r.hour) === o ? "active" : "default"}`,
+            children: o.toString().padStart(2)
+          }
+        )
+      },
+      `hour-${o}`
+    )) }, "timeOptionsDiplay"),
+    /* @__PURE__ */ n(v, { disabled: !1, button: !0, handleClick: () => a("down"), icon: "ChevronDown", color: "active" }),
+    /* @__PURE__ */ n("div", { className: u.hourLabel, children: /* @__PURE__ */ n(x, { color: "subdued", type: "smallBody", children: "Hour", weight: "medium" }) })
+  ] });
+}
+export {
+  O as HoursTimeSwitch,
+  S as styles
+};

package/dist/components/atoms/form/timeselect/index.d.ts

@@ -0,0 +1,2 @@
+export { Timeselect } from './timeselect';
+export type { TimeselectProps } from './timeselect';

package/dist/components/atoms/form/timeselect/index.js

@@ -0,0 +1,4 @@
+import { Timeselect as o } from "./timeselect.js";
+export {
+  o as Timeselect
+};

package/dist/components/atoms/form/timeselect/minutes-switch.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { Time } from './timeselect';
+
+export declare const styles: () => {
+    flexColItems: string;
+    divIconSwitch: string;
+    timeFlex: string;
+    hourLabel: string;
+    hourStyle: string;
+};
+export type MinutesTimeSwitchProps = {
+    /**
+     * the selected time displayed in hour min and period
+     */
+    selectedTime: Time;
+    /**
+     * action to set the selected time
+     */
+    setSelectedTime: React.Dispatch<React.SetStateAction<Time>> | ((value: Time) => void);
+    /**
+     * value change step
+     */
+    step?: number;
+};
+export declare function MinutesTimeSwitch({ setSelectedTime, selectedTime, step }: MinutesTimeSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/form/timeselect/minutes-switch.js

@@ -0,0 +1,88 @@
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import { useRef as C, useCallback as s, useEffect as b } from "react";
+import { l as g } from "../../../../lodash-BRbpQ7iy.js";
+import { c as v } from "../../../../index-fN7hCOo3.js";
+import { Icons as x } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { Typography as w } from "../../../styles/typography/typography.js";
+const S = () => ({
+  flexColItems: "flex flex-col items-center",
+  divIconSwitch: "w-[5.333rem] h-[18.5rem] gap-xs justify-center",
+  timeFlex: "flex flex-col justify-center gap-xs",
+  hourLabel: "text-center",
+  hourStyle: "w-[4rem] h-[3rem] flex justify-center items-center text-center "
+});
+function O({ setSelectedTime: h, selectedTime: n, step: o = 5 }) {
+  const t = S(), f = C(null), m = [
+    n.min === 0 ? 60 - o : n.min - o,
+    n.min,
+    n.min === 60 - o ? 0 : n.min + o
+  ], u = (r) => {
+    if (r === "down") {
+      const i = {
+        ...n,
+        min: (n == null ? void 0 : n.min) + o >= 59 ? 0 : (n == null ? void 0 : n.min) + o
+      };
+      h(i);
+    } else {
+      const i = {
+        ...n,
+        min: (n == null ? void 0 : n.min) - o < 0 ? 60 - o : (n == null ? void 0 : n.min) - o
+      };
+      h(i);
+    }
+  }, p = (r) => {
+    const i = {
+      ...n,
+      min: r
+    };
+    h(i);
+  }, c = s(
+    g.debounce((r) => {
+      r.deltaY < 0 ? u("up") : u("down");
+    }, 35),
+    // Adjust the throttle delay as needed
+    [u]
+  ), l = s(
+    (r) => {
+      r.preventDefault(), c(r);
+    },
+    [c]
+  );
+  return b(() => {
+    const r = f.current;
+    return r && r.addEventListener("wheel", l), () => {
+      r && r.removeEventListener("wheel", l);
+    };
+  }, [l]), /* @__PURE__ */ y("div", { className: v(t.flexColItems, t.divIconSwitch), ref: f, children: [
+    /* @__PURE__ */ a(x, { disabled: !1, button: !0, handleClick: () => u("up"), icon: "ChevronUp", color: "active" }),
+    /* @__PURE__ */ a("div", { className: t.timeFlex, children: m.map((r) => /* @__PURE__ */ a(
+      "div",
+      {
+        "data-testid": "hourselected",
+        onClick: () => p(r),
+        className: v(
+          "cursor-pointer select-none",
+          `${(n == null ? void 0 : n.min) === r ? "rounded-[0.5rem] bg-surface-active" : ""}`,
+          t.hourStyle
+        ),
+        children: /* @__PURE__ */ a(
+          w,
+          {
+            swStyle: 5,
+            color: `${(n == null ? void 0 : n.min) === r ? "active" : "default"}`,
+            children: r.toString().padStart(2, "0")
+          }
+        )
+      },
+      `min-${r}`
+    )) }, "timeOptionsDiplay"),
+    /* @__PURE__ */ a(x, { disabled: !1, button: !0, handleClick: () => u("down"), icon: "ChevronDown", color: "active" }),
+    /* @__PURE__ */ a("div", { className: t.hourLabel, children: /* @__PURE__ */ a(w, { color: "subdued", type: "smallBody", children: "Minute", weight: "medium" }) })
+  ] });
+}
+export {
+  O as MinutesTimeSwitch,
+  S as styles
+};

package/dist/components/atoms/form/timeselect/styles.d.ts

@@ -0,0 +1,13 @@
+export declare const getStyles: (disabled?: boolean) => {
+    borderTime: string;
+    flexColItems: string;
+    displayOuter: string;
+    displayInner: string;
+    dropdownContainer: string;
+    timeFlex: string;
+    hourStyle: string;
+    divOuterColon: string;
+    divInnerColon: string;
+    divOuterPeriod: string;
+    divInnerPeriod: string;
+};

package/dist/components/atoms/form/timeselect/styles.js

@@ -0,0 +1,16 @@
+const r = (e) => ({
+  borderTime: "w-[15rem] gap-md bg-surface-default",
+  flexColItems: "flex flex-col items-start",
+  displayOuter: "justify-center self-start gap-xs relative",
+  displayInner: `min-w-[14.5rem] h-[4rem] ${e ? "bg-surface-disabled" : "bg-surface-default"} px-[1rem] flex justify-between items-center self-stretch gap-md`,
+  dropdownContainer: "p-md flex flex-row items-start bg-white",
+  timeFlex: "flex flex-col justify-center gap-xs",
+  hourStyle: "w-[4rem] h-[3rem] flex justify-center items-center",
+  divOuterColon: "pt-[6.7rem] gap-md rounded-[0.5rem]",
+  divInnerColon: "w-[2rem] h-[3rem] flex flex-col text-center",
+  divOuterPeriod: "w-[5.333rem] h-[9.5rem] pt-[3.1rem] gap-xs",
+  divInnerPeriod: "items-center"
+});
+export {
+  r as getStyles
+};

package/dist/components/atoms/form/timeselect/timeselect.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+
+export type Time = {
+    hour: number;
+    min: number;
+    period: 'AM' | 'PM';
+};
+export type TimeselectProps = {
+    /**
+     * variable to determine error state
+     */
+    error?: boolean;
+    /**
+     * variable to determine warning state
+     */
+    warning?: boolean;
+    /**
+     * variable to determine disabled state
+     */
+    disabled?: boolean;
+    /**
+     * the selected time displayed in hour min and period
+     */
+    selectedTime: Time;
+    /**
+     * action to set the selected time
+     */
+    setSelectedTime: React.Dispatch<React.SetStateAction<Time>> | ((value: Time) => void);
+    /**
+     * the varibale for the label string
+     */
+    label?: string;
+    /**
+     * the varible for the hint string
+     */
+    helperText?: string;
+    /**
+     * value change step
+     */
+    step?: number;
+    /**
+     * pass onBlur func
+     */
+    onBlur?: () => void;
+    /**
+     * optional autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare const Timeselect: React.ForwardRefExoticComponent<TimeselectProps & React.RefAttributes<HTMLButtonElement>>;