@helpwave/hightide 0.0.19 → 0.1.0

package/dist/components/date/DatePicker.js

@@ -1,53 +1,33 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
 // src/components/date/DatePicker.tsx
-var DatePicker_exports = {};
-__export(DatePicker_exports, {
-  ControlledDatePicker: () => ControlledDatePicker,
-  DatePicker: () => DatePicker
-});
-module.exports = __toCommonJS(DatePicker_exports);
-var import_react6 = require("react");
-var import_lucide_react2 = require("lucide-react");
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";
 
-// src/hooks/useLanguage.tsx
-var import_react2 = require("react");
+// src/localization/LanguageProvider.tsx
+import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
 
-// src/hooks/useLocalStorage.tsx
-var import_react = require("react");
+// src/hooks/useLocalStorage.ts
+import { useCallback, useEffect, useState } from "react";
 
-// src/hooks/useLanguage.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+// src/localization/util.ts
+var languages = ["en", "de"];
+var languagesLocalNames = {
+  en: "English",
+  de: "Deutsch"
+};
 var DEFAULT_LANGUAGE = "en";
-var LanguageContext = (0, import_react2.createContext)({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
-var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
+var LanguageUtil = {
+  languages,
+  DEFAULT_LANGUAGE,
+  languagesLocalNames
+};
+
+// src/localization/LanguageProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var LanguageContext = createContext({
+  language: LanguageUtil.DEFAULT_LANGUAGE,
+  setLanguage: (v) => v
+});
+var useLanguage = () => useContext(LanguageContext);
 var useLocale = (overWriteLanguage) => {
   const { language } = useLanguage();
   const mapping = {
@@ -57,7 +37,7 @@ var useLocale = (overWriteLanguage) => {
   return mapping[overWriteLanguage ?? language];
 };
 
-// src/hooks/useTranslation.ts
+// src/localization/useTranslation.ts
 var useTranslation = (defaults, translationOverwrite = {}) => {
   const { language: languageProp, translation: overwrite } = translationOverwrite;
   const { language: inferredLanguage } = useLanguage();
@@ -186,16 +166,25 @@ var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
 };
 
 // src/components/date/DatePicker.tsx
-var import_clsx5 = __toESM(require("clsx"));
+import clsx5 from "clsx";
 
-// src/components/Button.tsx
-var import_clsx = __toESM(require("clsx"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ButtonSizePaddings = {
+// src/components/user-action/Button.tsx
+import clsx from "clsx";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var paddingMapping = {
   small: "btn-sm",
   medium: "btn-md",
   large: "btn-lg"
 };
+var iconPaddingMapping = {
+  small: "icon-btn-sm",
+  medium: "icon-btn-md",
+  large: "icon-btn-lg"
+};
+var ButtonUtil = {
+  paddingMapping,
+  iconPaddingMapping
+};
 var SolidButton = ({
   children,
   disabled = false,
@@ -213,7 +202,8 @@ var SolidButton = ({
     tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
     positive: "bg-button-solid-positive-background text-button-solid-positive-text",
     warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text"
+    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
+    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
   }[color];
   const iconColorClasses = {
     primary: "text-button-solid-primary-icon",
@@ -221,27 +211,28 @@ var SolidButton = ({
     tertiary: "text-button-solid-tertiary-icon",
     positive: "text-button-solid-positive-icon",
     warning: "text-button-solid-warning-icon",
-    negative: "text-button-solid-negative-icon"
+    negative: "text-button-solid-negative-icon",
+    neutral: "text-button-solid-neutral-icon"
   }[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
-      className: (0, import_clsx.default)(
+      className: clsx(
         className,
         {
           "text-disabled-text bg-disabled-background": disabled,
-          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
+          [clsx(colorClasses, "hover:brightness-90")]: !disabled
         },
-        ButtonSizePaddings[size]
+        ButtonUtil.paddingMapping[size]
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        startIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: (0, import_clsx.default)({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -249,10 +240,10 @@ var SolidButton = ({
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        endIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: (0, import_clsx.default)({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -275,32 +266,34 @@ var TextButton = ({
   ...restProps
 }) => {
   const colorClasses = {
+    primary: "bg-transparent text-button-text-primary-text",
     negative: "bg-transparent text-button-text-negative-text",
     neutral: "bg-transparent text-button-text-neutral-text"
   }[color];
   const iconColorClasses = {
+    primary: "text-button-text-primary-icon",
     negative: "text-button-text-negative-icon",
     neutral: "text-button-text-neutral-icon"
   }[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
-      className: (0, import_clsx.default)(
+      className: clsx(
         className,
         {
           "text-disabled-text": disabled,
-          [(0, import_clsx.default)(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
+          [clsx(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
         },
-        ButtonSizePaddings[size]
+        ButtonUtil.paddingMapping[size]
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        startIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: (0, import_clsx.default)({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -308,10 +301,10 @@ var TextButton = ({
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        endIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: (0, import_clsx.default)({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -324,17 +317,17 @@ var TextButton = ({
 };
 
 // src/components/date/YearMonthPicker.tsx
-var import_react4 = require("react");
-var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
-var import_clsx3 = __toESM(require("clsx"));
+import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import { Scrollbars } from "react-custom-scrollbars-2";
+import clsx3 from "clsx";
 
-// src/components/Expandable.tsx
-var import_react3 = require("react");
-var import_lucide_react = require("lucide-react");
-var import_clsx2 = __toESM(require("clsx"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronDown, { size: 16, className: "min-w-[16px]" });
-var Expandable = (0, import_react3.forwardRef)(({
+// src/components/layout-and-navigation/Expandable.tsx
+import { forwardRef, useState as useState3 } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import clsx2 from "clsx";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx3(ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ jsx3(ChevronDown, { size: 16, className: "min-w-[16px]" });
+var Expandable = forwardRef(({
   children,
   label,
   icon,
@@ -343,19 +336,19 @@ var Expandable = (0, import_react3.forwardRef)(({
   className = "",
   headerClassName = ""
 }, ref) => {
-  const [isExpanded, setIsExpanded] = (0, import_react3.useState)(initialExpansion);
+  const [isExpanded, setIsExpanded] = useState3(initialExpansion);
   icon ??= DefaultIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ref,
-      className: (0, import_clsx2.default)("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
+      className: clsx2("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
       onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ jsxs2(
           "button",
           {
-            className: (0, import_clsx2.default)("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
+            className: clsx2("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
             onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded),
             children: [
               label,
@@ -363,7 +356,7 @@ var Expandable = (0, import_react3.forwardRef)(({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col", children })
+        isExpanded && /* @__PURE__ */ jsx3("div", { className: "col", children })
       ]
     }
   );
@@ -371,7 +364,7 @@ var Expandable = (0, import_react3.forwardRef)(({
 Expandable.displayName = "Expandable";
 
 // src/components/date/YearMonthPicker.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+import { jsx as jsx4 } from "react/jsx-runtime";
 var YearMonthPicker = ({
   displayedYearMonth = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
@@ -382,8 +375,8 @@ var YearMonthPicker = ({
   showValueOpen = true
 }) => {
   const locale = useLocale();
-  const ref = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const ref = useRef(null);
+  useEffect3(() => {
     const scrollToItem = () => {
       if (ref.current) {
         ref.current.scrollIntoView({
@@ -399,15 +392,15 @@ var YearMonthPicker = ({
     return null;
   }
   const years = range(start.getFullYear(), end.getFullYear());
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx3.default)("col select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
+  return /* @__PURE__ */ jsx4("div", { className: clsx3("col select-none", className), children: /* @__PURE__ */ jsx4(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx4("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ jsx4(
       Expandable,
       {
         ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
-        label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_clsx3.default)({ "text-primary font-bold": selectedYear }), children: year }),
+        label: /* @__PURE__ */ jsx4("span", { className: clsx3({ "text-primary font-bold": selectedYear }), children: year }),
         initialExpansion: showValueOpen && selectedYear,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "row", children: monthList.map((month) => {
+        children: /* @__PURE__ */ jsx4("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx4("div", { className: "row", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
@@ -416,11 +409,11 @@ var YearMonthPicker = ({
           const isAfterStart = start === void 0 || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
           const isBeforeEnd = end === void 0 || firstOfMonth <= end;
           const isValid = isAfterStart && isBeforeEnd;
-          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          return /* @__PURE__ */ jsx4(
             "button",
             {
               disabled: !isValid,
-              className: (0, import_clsx3.default)(
+              className: clsx3(
                 "chip hover:brightness-95 flex-1",
                 {
                   "bg-gray-50 text-black": !selectedMonth && isValid,
@@ -443,9 +436,9 @@ var YearMonthPicker = ({
 };
 
 // src/components/date/DayPicker.tsx
-var import_clsx4 = __toESM(require("clsx"));
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+import clsx4 from "clsx";
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth,
   selected,
@@ -459,18 +452,18 @@ var DayPicker = ({
   const locale = useLocale();
   const month = displayedMonth.getMonth();
   const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx4.default)("col gap-y-1 min-w-[220px] select-none", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row text-center", children: week.map((date) => {
+  return /* @__PURE__ */ jsxs3("div", { className: clsx4("col gap-y-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ jsx5("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx5("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ jsx5("div", { className: "row text-center", children: week.map((date) => {
       const isSelected = !!selected && equalDate(selected, date);
       const isToday = equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      return /* @__PURE__ */ jsx5(
         "button",
         {
           disabled: !isDayValid,
-          className: (0, import_clsx4.default)(
+          className: clsx4(
             "flex-1 rounded-full border-2 border-transparent shadow-sm",
             {
               "text-gray-700 bg-gray-100": !isSameMonth && isDayValid,
@@ -491,7 +484,7 @@ var DayPicker = ({
 };
 
 // src/components/date/DatePicker.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultDatePickerTranslation = {
   en: {
     today: "Today"
@@ -513,28 +506,28 @@ var DatePicker = ({
 }) => {
   const locale = useLocale();
   const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
-  const [displayedMonth, setDisplayedMonth] = (0, import_react6.useState)(value);
-  const [displayMode, setDisplayMode] = (0, import_react6.useState)(initialDisplay);
-  (0, import_react6.useEffect)(() => {
+  const [displayedMonth, setDisplayedMonth] = useState6(value);
+  const [displayMode, setDisplayMode] = useState6(initialDisplay);
+  useEffect5(() => {
     setDisplayedMonth(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx5.default)("col gap-y-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "row items-center justify-between h-7", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ jsxs4("div", { className: clsx5("col gap-y-4", className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "row items-center justify-between h-7", children: [
+      /* @__PURE__ */ jsxs4(
         TextButton,
         {
-          className: (0, import_clsx5.default)("row gap-x-1 items-center cursor-pointer select-none", {
+          className: clsx5("row gap-x-1 items-center cursor-pointer select-none", {
             "text-disabled-text": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
           children: [
             `${new Intl.DateTimeFormat(locale, { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ChevronDown, { size: 16 })
+            /* @__PURE__ */ jsx6(ChevronDown2, { size: 16 })
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "row justify-end", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      displayMode === "day" && /* @__PURE__ */ jsxs4("div", { className: "row justify-end", children: [
+        /* @__PURE__ */ jsx6(
           SolidButton,
           {
             size: "small",
@@ -543,10 +536,10 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ArrowUp, { size: 20 })
+            children: /* @__PURE__ */ jsx6(ArrowUp, { size: 20 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ jsx6(
           SolidButton,
           {
             size: "small",
@@ -555,12 +548,12 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ArrowDown, { size: 20 })
+            children: /* @__PURE__ */ jsx6(ArrowDown, { size: 20 })
           }
         )
       ] })
     ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    displayMode === "yearMonth" ? /* @__PURE__ */ jsx6(
       YearMonthPicker,
       {
         ...yearMonthPickerProps,
@@ -572,8 +565,8 @@ var DatePicker = ({
           setDisplayMode("day");
         }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ) : /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsx6(
         DayPicker,
         {
           ...dayPickerProps,
@@ -586,7 +579,7 @@ var DatePicker = ({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ jsx6("div", { className: "mt-2", children: /* @__PURE__ */ jsx6(
         TextButton,
         {
           onClick: () => {
@@ -600,14 +593,14 @@ var DatePicker = ({
     ] })
   ] });
 };
-var ControlledDatePicker = ({
+var DatePickerUncontrolled = ({
   value = /* @__PURE__ */ new Date(),
   onChange = noop,
   ...props
 }) => {
-  const [date, setDate] = (0, import_react6.useState)(value);
-  (0, import_react6.useEffect)(() => setDate(value), [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const [date, setDate] = useState6(value);
+  useEffect5(() => setDate(value), [value]);
+  return /* @__PURE__ */ jsx6(
     DatePicker,
     {
       ...props,
@@ -619,9 +612,8 @@ var ControlledDatePicker = ({
     }
   );
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ControlledDatePicker,
-  DatePicker
-});
+export {
+  DatePicker,
+  DatePickerUncontrolled
+};
 //# sourceMappingURL=DatePicker.js.map