@janbox/storefront-ui 1.0.0

package/dist/lib/textarea/textarea.cjs

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const react$1 = require("@floating-ui/react");
+const lodashEs = require("lodash-es");
+const helpers = require("./helpers.cjs");
+const textarea_module = require("./textarea.module.scss.cjs");
+const utils_index = require("../../utils/index.cjs");
+const theme_screens = require("../../theme/screens.cjs");
+require("../../theme/palette.cjs");
+const theme_typography = require("../../theme/typography.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const formHelperText = require("../form-helper-text/form-helper-text.cjs");
+const Textarea = ({ ref, ..._props }) => {
+  const {
+    xs,
+    sm,
+    md,
+    lg,
+    containerProps,
+    className,
+    helperText,
+    error,
+    onChange: onChangeProp,
+    debounce = 0,
+    mode = "onChange",
+    value,
+    ...rest
+  } = helpers.getTextareaProps(_props);
+  const textareaRef = react.useRef(null);
+  const [typingValue, setTypingValue] = react.useState();
+  const timeoutFn = react.useRef(null);
+  const beforeChangeValue = react.useRef("");
+  const mergedRefs = react$1.useMergeRefs([ref, textareaRef]);
+  const onChange = (e, force = false) => {
+    if (timeoutFn.current) {
+      clearTimeout(timeoutFn.current);
+    }
+    if (force) {
+      onChangeProp == null ? void 0 : onChangeProp(e);
+      return;
+    }
+    if (mode === "onBlur") {
+      if (lodashEs.isString(value)) {
+        setTypingValue(e.target.value);
+      }
+      return;
+    }
+    if (debounce > 0) {
+      if (lodashEs.isString(value)) {
+        setTypingValue(e.target.value);
+      }
+      timeoutFn.current = setTimeout(() => {
+        onChangeProp == null ? void 0 : onChangeProp(e);
+      }, debounce);
+      return;
+    }
+    onChangeProp == null ? void 0 : onChangeProp(e);
+  };
+  const onFocus = (e) => {
+    var _a;
+    beforeChangeValue.current = e.target.value;
+    (_a = rest.onFocus) == null ? void 0 : _a.call(rest, e);
+  };
+  const onBlur = (e) => {
+    var _a;
+    if (beforeChangeValue.current !== e.target.value) {
+      if (mode === "onBlur" || debounce > 0) {
+        onChange(e, true);
+      }
+    }
+    (_a = rest.onBlur) == null ? void 0 : _a.call(rest, e);
+    setTimeout(() => {
+      setTypingValue(void 0);
+    }, debounce);
+  };
+  const css = [
+    {
+      paddingTop: 8,
+      paddingBottom: 8
+    },
+    createStyle(xs),
+    {
+      [theme_screens.mediaQuery("sm")]: createStyle(sm),
+      [theme_screens.mediaQuery("md")]: createStyle(md),
+      [theme_screens.mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...containerProps, className: stylesheet.cn(textarea_module.default.textarea__container, containerProps == null ? void 0 : containerProps.className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { css, className: textarea_module.default.textarea__main, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        "aria-invalid": error,
+        className: stylesheet.cn(
+          textarea_module.default.textarea__control,
+          className
+        ),
+        ...rest,
+        value: typingValue ?? value,
+        ref: mergedRefs,
+        onChange,
+        onBlur,
+        onFocus
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { error, children: helperText })
+  ] });
+};
+const createStyle = ({ css, size } = {}) => {
+  const { inputPaddingX, textVariant } = utils_index.getSizeVariantState(size);
+  return [
+    {
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX,
+      fontSize: textVariant ? theme_typography.getTypographyVar(textVariant).fontSize : void 0,
+      lineHeight: textVariant ? theme_typography.getTypographyVar(textVariant).lineHeight : void 0
+    },
+    css
+  ];
+};
+exports.Textarea = Textarea;

package/dist/lib/textarea/textarea.d.ts

@@ -0,0 +1,3 @@
+import { TextareaProps } from './types';
+export declare const Textarea: ({ ref, ..._props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/lib/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAA2B,MAAM,SAAS,CAAC;AAQjE,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDA2GzD,CAAC"}

package/dist/lib/textarea/textarea.js

@@ -0,0 +1,122 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import { isString } from "lodash-es";
+import { getTextareaProps } from "./helpers.js";
+import classes from "./textarea.module.scss.js";
+import { getSizeVariantState } from "../../utils/index.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { cn } from "../../utils/stylesheet.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+const Textarea = ({ ref, ..._props }) => {
+  const {
+    xs,
+    sm,
+    md,
+    lg,
+    containerProps,
+    className,
+    helperText,
+    error,
+    onChange: onChangeProp,
+    debounce = 0,
+    mode = "onChange",
+    value,
+    ...rest
+  } = getTextareaProps(_props);
+  const textareaRef = useRef(null);
+  const [typingValue, setTypingValue] = useState();
+  const timeoutFn = useRef(null);
+  const beforeChangeValue = useRef("");
+  const mergedRefs = useMergeRefs([ref, textareaRef]);
+  const onChange = (e, force = false) => {
+    if (timeoutFn.current) {
+      clearTimeout(timeoutFn.current);
+    }
+    if (force) {
+      onChangeProp == null ? void 0 : onChangeProp(e);
+      return;
+    }
+    if (mode === "onBlur") {
+      if (isString(value)) {
+        setTypingValue(e.target.value);
+      }
+      return;
+    }
+    if (debounce > 0) {
+      if (isString(value)) {
+        setTypingValue(e.target.value);
+      }
+      timeoutFn.current = setTimeout(() => {
+        onChangeProp == null ? void 0 : onChangeProp(e);
+      }, debounce);
+      return;
+    }
+    onChangeProp == null ? void 0 : onChangeProp(e);
+  };
+  const onFocus = (e) => {
+    var _a;
+    beforeChangeValue.current = e.target.value;
+    (_a = rest.onFocus) == null ? void 0 : _a.call(rest, e);
+  };
+  const onBlur = (e) => {
+    var _a;
+    if (beforeChangeValue.current !== e.target.value) {
+      if (mode === "onBlur" || debounce > 0) {
+        onChange(e, true);
+      }
+    }
+    (_a = rest.onBlur) == null ? void 0 : _a.call(rest, e);
+    setTimeout(() => {
+      setTypingValue(void 0);
+    }, debounce);
+  };
+  const css = [
+    {
+      paddingTop: 8,
+      paddingBottom: 8
+    },
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { ...containerProps, className: cn(classes.textarea__container, containerProps == null ? void 0 : containerProps.className), children: [
+    /* @__PURE__ */ jsx("div", { css, className: classes.textarea__main, children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        "aria-invalid": error,
+        className: cn(
+          classes.textarea__control,
+          className
+        ),
+        ...rest,
+        value: typingValue ?? value,
+        ref: mergedRefs,
+        onChange,
+        onBlur,
+        onFocus
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+  ] });
+};
+const createStyle = ({ css, size } = {}) => {
+  const { inputPaddingX, textVariant } = getSizeVariantState(size);
+  return [
+    {
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX,
+      fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
+      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
+    },
+    css
+  ];
+};
+export {
+  Textarea
+};

package/dist/lib/textarea/textarea.module.scss.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const textarea__container = "_textarea__container_bs49u_1";
+const textarea__main = "_textarea__main_bs49u_6";
+const textarea__control = "_textarea__control_bs49u_34";
+const classes = {
+  textarea__container,
+  textarea__main,
+  textarea__control
+};
+exports.default = classes;
+exports.textarea__container = textarea__container;
+exports.textarea__control = textarea__control;
+exports.textarea__main = textarea__main;

package/dist/lib/textarea/textarea.module.scss.js

@@ -0,0 +1,14 @@
+const textarea__container = "_textarea__container_bs49u_1";
+const textarea__main = "_textarea__main_bs49u_6";
+const textarea__control = "_textarea__control_bs49u_34";
+const classes = {
+  textarea__container,
+  textarea__main,
+  textarea__control
+};
+export {
+  classes as default,
+  textarea__container,
+  textarea__control,
+  textarea__main
+};

package/dist/lib/textarea/types.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, JSX } from 'react';
+import { PropsWithCSS, SizeVariant, ResponsiveDesign, ShallowMerge } from '../../types';
+export interface TextareaResponsiveProps extends PropsWithCSS {
+    size?: SizeVariant;
+}
+export type TextareaWrapperProps = HTMLAttributes<HTMLDivElement>;
+interface TextareaExtendedProps extends ResponsiveDesign<TextareaResponsiveProps> {
+    containerProps?: JSX.IntrinsicElements['div'];
+    mainProps?: JSX.IntrinsicElements['div'];
+    helperText?: string;
+    error?: boolean;
+    value?: string;
+    defaultValue?: string;
+    mode?: 'onChange' | 'onBlur';
+    debounce?: number;
+}
+export type TextareaProps = ShallowMerge<JSX.IntrinsicElements['textarea'], TextareaExtendedProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/textarea/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAEtF,MAAM,WAAW,uBAAwB,SAAQ,YAAY;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,UAAU,qBAAsB,SAAQ,gBAAgB,CAAC,uBAAuB,CAAC;IAC/E,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,CAAC"}

package/dist/lib/time-picker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './time-picker';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/time-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/lib/time-picker/time-picker.cjs

@@ -0,0 +1,305 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const dayjs = require("dayjs");
+const lodashEs = require("lodash-es");
+const index = require("../../hooks/use-window-screen/index.cjs");
+const useControllableState = require("../../hooks/use-controllable-state.cjs");
+const utils_index = require("../../utils/index.cjs");
+const virtualizedList = require("../../components/virtualized-list.cjs");
+const timesCloseDelete = require("../../assets/svg/times-close-delete.svg.cjs");
+const clockTime = require("../../assets/svg/clock-time.svg.cjs");
+const theme_screens = require("../../theme/screens.cjs");
+require("../../theme/palette.cjs");
+const theme_typography = require("../../theme/typography.cjs");
+const floating = require("../floating/floating/floating.cjs");
+const floatingTrigger = require("../floating/floating-trigger/floating-trigger.cjs");
+const floatingContent = require("../floating/floating-content/floating-content.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const icon = require("../icon/icon.cjs");
+const TIME_FORMAT = "HH:mm";
+const TimePicker = ({
+  placeholder = "--:--",
+  onChange,
+  defaultValue,
+  value,
+  clearable,
+  onClear,
+  containerProps,
+  placement = "bottom-start",
+  open,
+  onOpenChange,
+  disabled,
+  ...rest
+}) => {
+  const floatingRef = react.useRef(null);
+  const windowScreen = index.useWindowScreen();
+  const responsiveSize = lodashEs.isNil(windowScreen.name) ? void 0 : utils_index.getResponsiveProp(rest, "size", windowScreen.name);
+  const rowMinHeight = utils_index.getSizeVariantState(responsiveSize).inputSize ?? 0;
+  const [isOpen, setIsOpen] = useControllableState.useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const [selectedDate, setSelectedDate] = useControllableState.useControllableState({
+    defaultValue,
+    value
+  });
+  const [hours] = react.useState(
+    Array.from({ length: 24 }, (_, index2) => ({
+      value: index2,
+      label: index2.toString().padStart(2, "0")
+    }))
+  );
+  const [minutes] = react.useState(
+    Array.from({ length: 60 }, (_, index2) => ({
+      value: index2,
+      label: index2.toString().padStart(2, "0")
+    }))
+  );
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const estimateSize = react.useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKeyHour = react.useCallback(
+    (index2) => {
+      const option = hours.at(index2);
+      return option ? option.value.toString() : `${lodashEs.uniqueId}-${index2}`;
+    },
+    [hours, lodashEs.uniqueId]
+  );
+  const getItemKeyMinute = react.useCallback(
+    (index2) => {
+      const option = minutes.at(index2);
+      return option ? option.value.toString() : `${lodashEs.uniqueId}-${index2}`;
+    },
+    [hours, lodashEs.uniqueId]
+  );
+  const sizeOptions = {
+    apply({ elements }) {
+      const { width } = elements.reference.getBoundingClientRect();
+      Object.assign(elements.floating.style, {
+        minWidth: `${width}px`
+      });
+    }
+  };
+  const RowComponentHour = ({ row }) => {
+    const rowData = hours.at(row.index);
+    const onClick = (e) => {
+      e.preventDefault();
+      const preset = dayjs(selectedDate ?? /* @__PURE__ */ new Date()).set("hour", rowData == null ? void 0 : rowData.value).toDate();
+      setSelectedDate(preset);
+      onChange == null ? void 0 : onChange(preset);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick,
+        css: {
+          paddingLeft: "0.5rem",
+          paddingRight: "0.5rem",
+          paddingTop: "0.25rem",
+          paddingBottom: "0.25rem",
+          borderRadius: "0.25rem",
+          width: "100%",
+          height: "100%",
+          "&:hover": { backgroundColor: "var(--ic-light)" },
+          ...dayjs(selectedDate).hour() === (rowData == null ? void 0 : rowData.value) ? {
+            backgroundColor: "var(--ic-blue-1s)",
+            fontWeight: 500,
+            color: "var(--ic-blue-6s)",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "var(--ic-blue-2s)"
+          } : {}
+        },
+        children: rowData == null ? void 0 : rowData.label
+      }
+    );
+  };
+  const RowComponentMinute = ({ row }) => {
+    const rowData = minutes.at(row.index);
+    const onClick = (e) => {
+      e.preventDefault();
+      const preset = dayjs(selectedDate ?? /* @__PURE__ */ new Date()).set("minute", rowData == null ? void 0 : rowData.value).toDate();
+      setSelectedDate(preset);
+      onChange == null ? void 0 : onChange(preset);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick,
+        css: {
+          paddingLeft: "0.5rem",
+          paddingRight: "0.5rem",
+          paddingTop: "0.25rem",
+          paddingBottom: "0.25rem",
+          borderRadius: "0.25rem",
+          width: "100%",
+          height: "100%",
+          "&:hover": { backgroundColor: "var(--ic-light)" },
+          ...dayjs(selectedDate).minute() === (rowData == null ? void 0 : rowData.value) ? {
+            backgroundColor: "var(--ic-blue-1s)",
+            fontWeight: 500,
+            color: "var(--ic-blue-6s)",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "var(--ic-blue-2s)"
+          } : {}
+        },
+        children: rowData == null ? void 0 : rowData.label
+      }
+    );
+  };
+  const portalContentRenderer = () => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      css: {
+        display: "flex",
+        borderRadius: "0.5rem",
+        padding: "0.5rem",
+        backgroundColor: "var(--ic-white-6s)",
+        fontSize: theme_typography.getTypographyVar("sm").fontSize,
+        lineHeight: theme_typography.getTypographyVar("sm").lineHeight,
+        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "var(--ic-ink-1s)",
+        gap: "0.5rem"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            css: { display: "flex", flexDirection: "column", flex: "1 1 0%" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              virtualizedList.VirtualizedList,
+              {
+                RowComponent: RowComponentHour,
+                options: {
+                  count: hours.length,
+                  estimateSize,
+                  getItemKey: getItemKeyHour
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            css: { display: "flex", flexDirection: "column", flex: "1 1 0%" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              virtualizedList.VirtualizedList,
+              {
+                RowComponent: RowComponentMinute,
+                options: {
+                  count: hours.length,
+                  estimateSize,
+                  getItemKey: getItemKeyMinute
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onClear == null ? void 0 : onClear();
+  };
+  const getCss = (sizeVariant) => {
+    if (lodashEs.isNil(sizeVariant)) return {};
+    return utils_index.getSizeVariantState(sizeVariant);
+  };
+  const createStyle = (screen) => {
+    const { css } = rest[screen] ?? {};
+    return {
+      ...css
+    };
+  };
+  const getIcon = () => {
+    var _a, _b;
+    if (selectedDate && clearable) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        icon.Icon,
+        {
+          xs: { size: getCss((_a = rest.xs) == null ? void 0 : _a.size).iconSize },
+          source: timesCloseDelete,
+          css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
+          onClick: handleClear
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      icon.Icon,
+      {
+        source: clockTime,
+        xs: { size: getCss((_b = rest.xs) == null ? void 0 : _b.size).iconSize },
+        css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...containerProps, css: { display: "flex", flexDirection: "column", width: "100%" }, className: stylesheet.cn(containerProps == null ? void 0 : containerProps.className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    floating.Floating,
+    {
+      clickProps: {
+        enabled: true
+      },
+      dismissProps: {
+        enabled: true
+      },
+      sizeOptions,
+      placement,
+      open: isOpen,
+      onOpenChange: prehandleOpenChange,
+      ref: floatingRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(floatingTrigger.FloatingTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            css: [
+              createStyle("sm"),
+              {
+                [theme_screens.mediaQuery("xs")]: createStyle("xs"),
+                [theme_screens.mediaQuery("sm")]: createStyle("sm"),
+                [theme_screens.mediaQuery("md")]: createStyle("md"),
+                [theme_screens.mediaQuery("lg")]: createStyle("lg")
+              }
+            ],
+            children: [
+              !selectedDate && !!placeholder && /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: "var(--ic-ink-4s)" }, children: placeholder }),
+              !!selectedDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: dayjs(selectedDate).format(TIME_FORMAT) }),
+              getIcon()
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(floatingContent.FloatingContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            css: {
+              paddingTop: "0.5rem",
+              paddingBottom: "0.5rem",
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderRadius: "0.5rem",
+              boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+              fontSize: theme_typography.getTypographyVar("sm").fontSize,
+              lineHeight: theme_typography.getTypographyVar("sm").lineHeight,
+              backgroundColor: "var(--color-surface-default)"
+            },
+            children: portalContentRenderer()
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+exports.TimePicker = TimePicker;

package/dist/lib/time-picker/time-picker.d.ts

@@ -0,0 +1,3 @@
+import { TimePickerProps } from './types';
+export declare const TimePicker: ({ placeholder, onChange, defaultValue, value, clearable, onClear, containerProps, placement, open, onOpenChange, disabled, ...rest }: TimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/lib/time-picker/time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/time-picker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoB1C,eAAO,MAAM,UAAU,yIAapB,eAAe,qDA+RjB,CAAC"}