@plexui/ui 0.7.96 → 0.7.97

package/README.md

@@ -107,7 +107,7 @@ import { Select, Option } from "@plexui/ui/components/Select";
 <details>
 <summary>Full component list</summary>
 
-Alert, Avatar, AvatarGroup, Badge, Button, ButtonLink, Checkbox, CodeBlock, CopyTooltip, DatePicker, DateRangePicker, EmptyMessage, FieldError, FloatingLabelInput, Icon, Image, Indicators (LoadingIndicator, LoadingDots, CircularProgress), Input, Markdown, Menu, PlexUIProvider, Popover, ProgressSteps, RadioGroup, SegmentedControl, Select, SelectControl, ShimmerText, Sidebar, Skeleton, Slider, Switch, TagInput, TextLink, Textarea, Tooltip, Transition (Animate, AnimateLayout, AnimateLayoutGroup, TransitionGroup)
+Alert, Avatar, AvatarGroup, Badge, Button, ButtonLink, Checkbox, CodeBlock, CopyTooltip, DateInput, DatePicker, DateRangePicker, EmptyMessage, FieldError, FloatingLabelInput, Icon, Image, Indicators (LoadingIndicator, LoadingDots, CircularProgress), Input, Markdown, Menu, PlexUIProvider, Popover, ProgressSteps, RadioGroup, SegmentedControl, Select, SelectControl, ShimmerText, Sidebar, Skeleton, Slider, Switch, TagInput, TextLink, Textarea, Tooltip, Transition (Animate, AnimateLayout, AnimateLayoutGroup, TransitionGroup)
 
 </details>
 

package/dist/es/components/DateInput/DateInput.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { maskitoDateOptionsGenerator, maskitoDateTimeOptionsGenerator, maskitoParseDate, maskitoParseDateTime, maskitoStringifyDate, maskitoStringifyDateTime, } from "@maskito/kit";
+import { useMaskito } from "@maskito/react";
+import { DateTime } from "luxon";
+import { useEffect, useMemo, useState } from "react";
+import { mergeRefs } from "react-merge-refs";
+import { Input } from "../Input";
+export const DateInput = (props) => {
+    const { value, onChange, mode = "dd/mm/yyyy", separator = ".", timeMode, dateTimeSeparator = ", ", timeStep = 0, min, max, clearable = false, placeholder, ref, ...inputProps } = props;
+    const hasTime = !!timeMode;
+    const dateParams = useMemo(() => ({
+        mode,
+        separator,
+        ...(min ? { min: min.toJSDate() } : undefined),
+        ...(max ? { max: max.toJSDate() } : undefined),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mode, separator, min?.toMillis(), max?.toMillis()]);
+    const dateTimeParams = useMemo(() => ({
+        dateMode: mode,
+        dateSeparator: separator,
+        timeMode: timeMode ?? "HH:MM",
+        dateTimeSeparator,
+        ...(timeStep ? { timeStep } : undefined),
+        ...(min ? { min: min.toJSDate() } : undefined),
+        ...(max ? { max: max.toJSDate() } : undefined),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mode, separator, timeMode, dateTimeSeparator, timeStep, min?.toMillis(), max?.toMillis()]);
+    const maskOptions = useMemo(() => hasTime
+        ? maskitoDateTimeOptionsGenerator(dateTimeParams)
+        : maskitoDateOptionsGenerator(dateParams), [hasTime, dateParams, dateTimeParams]);
+    const maskRef = useMaskito({ options: maskOptions });
+    const [inputValue, setInputValue] = useState("");
+    const valueMsKey = value?.toMillis() ?? null;
+    useEffect(() => {
+        if (!value) {
+            setInputValue("");
+            return;
+        }
+        setInputValue(hasTime
+            ? maskitoStringifyDateTime(value.toJSDate(), dateTimeParams)
+            : maskitoStringifyDate(value.toJSDate(), dateParams));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueMsKey, hasTime, dateParams, dateTimeParams]);
+    const handleInput = (evt) => {
+        const str = evt.currentTarget.value;
+        setInputValue(str);
+        if (!str) {
+            onChange(null);
+            return;
+        }
+        const parsed = hasTime
+            ? maskitoParseDateTime(str, dateTimeParams)
+            : maskitoParseDate(str, dateParams);
+        if (parsed) {
+            onChange(DateTime.fromJSDate(parsed));
+        }
+    };
+    const handleClear = () => {
+        setInputValue("");
+        onChange(null);
+    };
+    const defaultPlaceholder = useMemo(() => {
+        const datePart = mode.replace(/\//g, separator).toUpperCase();
+        if (!hasTime)
+            return datePart;
+        return `${datePart}${dateTimeSeparator}${timeMode}`;
+    }, [mode, separator, hasTime, timeMode, dateTimeSeparator]);
+    return (_jsx(Input, { ...inputProps, ref: mergeRefs([maskRef, ref]), value: inputValue, onInput: handleInput, placeholder: placeholder ?? defaultPlaceholder, onClear: clearable ? handleClear : undefined }));
+};
+//# sourceMappingURL=DateInput.js.map

package/dist/es/components/DateInput/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport {\n  maskitoDateOptionsGenerator,\n  maskitoDateTimeOptionsGenerator,\n  maskitoParseDate,\n  maskitoParseDateTime,\n  maskitoStringifyDate,\n  maskitoStringifyDateTime,\n  type MaskitoDateMode,\n  type MaskitoDateParams,\n  type MaskitoDateTimeParams,\n  type MaskitoTimeMode,\n} from \"@maskito/kit\"\nimport { useMaskito } from \"@maskito/react\"\nimport { DateTime } from \"luxon\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { Input, type InputProps } from \"../Input\"\n\nexport type DateInputProps = {\n  value: DateTime | null\n  onChange: (value: DateTime | null) => void\n  mode?: MaskitoDateMode\n  separator?: string\n  timeMode?: MaskitoTimeMode\n  dateTimeSeparator?: string\n  timeStep?: number\n  min?: DateTime\n  max?: DateTime\n  clearable?: boolean\n  ref?: React.Ref<HTMLInputElement | null>\n} & Omit<\n  InputProps,\n  \"value\" | \"defaultValue\" | \"onChange\" | \"onInput\" | \"onClear\" | \"ref\" | \"type\" | \"min\" | \"max\"\n>\n\nexport const DateInput = (props: DateInputProps) => {\n  const {\n    value,\n    onChange,\n    mode = \"dd/mm/yyyy\",\n    separator = \".\",\n    timeMode,\n    dateTimeSeparator = \", \",\n    timeStep = 0,\n    min,\n    max,\n    clearable = false,\n    placeholder,\n    ref,\n    ...inputProps\n  } = props\n\n  const hasTime = !!timeMode\n\n  const dateParams = useMemo<MaskitoDateParams>(\n    () => ({\n      mode,\n      separator,\n      ...(min ? { min: min.toJSDate() } : undefined),\n      ...(max ? { max: max.toJSDate() } : undefined),\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [mode, separator, min?.toMillis(), max?.toMillis()],\n  )\n\n  const dateTimeParams = useMemo<MaskitoDateTimeParams>(\n    () => ({\n      dateMode: mode,\n      dateSeparator: separator,\n      timeMode: timeMode ?? \"HH:MM\",\n      dateTimeSeparator,\n      ...(timeStep ? { timeStep } : undefined),\n      ...(min ? { min: min.toJSDate() } : undefined),\n      ...(max ? { max: max.toJSDate() } : undefined),\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [mode, separator, timeMode, dateTimeSeparator, timeStep, min?.toMillis(), max?.toMillis()],\n  )\n\n  const maskOptions = useMemo(\n    () =>\n      hasTime\n        ? maskitoDateTimeOptionsGenerator(dateTimeParams)\n        : maskitoDateOptionsGenerator(dateParams),\n    [hasTime, dateParams, dateTimeParams],\n  )\n\n  const maskRef = useMaskito({ options: maskOptions })\n\n  const [inputValue, setInputValue] = useState(\"\")\n\n  const valueMsKey = value?.toMillis() ?? null\n  useEffect(() => {\n    if (!value) {\n      setInputValue(\"\")\n      return\n    }\n    setInputValue(\n      hasTime\n        ? maskitoStringifyDateTime(value.toJSDate(), dateTimeParams)\n        : maskitoStringifyDate(value.toJSDate(), dateParams),\n    )\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueMsKey, hasTime, dateParams, dateTimeParams])\n\n  const handleInput = (evt: React.FormEvent<HTMLInputElement>) => {\n    const str = evt.currentTarget.value\n    setInputValue(str)\n\n    if (!str) {\n      onChange(null)\n      return\n    }\n\n    const parsed = hasTime\n      ? maskitoParseDateTime(str, dateTimeParams)\n      : maskitoParseDate(str, dateParams)\n\n    if (parsed) {\n      onChange(DateTime.fromJSDate(parsed))\n    }\n  }\n\n  const handleClear = () => {\n    setInputValue(\"\")\n    onChange(null)\n  }\n\n  const defaultPlaceholder = useMemo(() => {\n    const datePart = mode.replace(/\\//g, separator).toUpperCase()\n    if (!hasTime) return datePart\n    return `${datePart}${dateTimeSeparator}${timeMode}`\n  }, [mode, separator, hasTime, timeMode, dateTimeSeparator])\n\n  return (\n    <Input\n      {...inputProps}\n      ref={mergeRefs([maskRef as unknown as React.Ref<HTMLInputElement>, ref])}\n      value={inputValue}\n      onInput={handleInput}\n      placeholder={placeholder ?? defaultPlaceholder}\n      onClear={clearable ? handleClear : undefined}\n    />\n  )\n}\n"]}

package/dist/es/components/DateInput/index.js

@@ -0,0 +1,2 @@
+export { DateInput } from "./DateInput";
+//# sourceMappingURL=index.js.map

package/dist/es/components/DateInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DateInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAA","sourcesContent":["export { DateInput, type DateInputProps } from \"./DateInput\"\n"]}

package/dist/types/components/DateInput/DateInput.d.ts

@@ -0,0 +1,17 @@
+import { type MaskitoDateMode, type MaskitoTimeMode } from "@maskito/kit";
+import { DateTime } from "luxon";
+import { type InputProps } from "../Input";
+export type DateInputProps = {
+    value: DateTime | null;
+    onChange: (value: DateTime | null) => void;
+    mode?: MaskitoDateMode;
+    separator?: string;
+    timeMode?: MaskitoTimeMode;
+    dateTimeSeparator?: string;
+    timeStep?: number;
+    min?: DateTime;
+    max?: DateTime;
+    clearable?: boolean;
+    ref?: React.Ref<HTMLInputElement | null>;
+} & Omit<InputProps, "value" | "defaultValue" | "onChange" | "onInput" | "onClear" | "ref" | "type" | "min" | "max">;
+export declare const DateInput: (props: DateInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DateInput/index.d.ts

@@ -0,0 +1 @@
+export { DateInput, type DateInputProps } from "./DateInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.7.96",
+  "version": "0.7.97",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",
@@ -81,6 +81,9 @@
     "tailwindcss": "^4.0.10"
   },
   "dependencies": {
+    "@maskito/core": "^5.2.2",
+    "@maskito/kit": "^5.2.2",
+    "@maskito/react": "^5.2.2",
     "@tanstack/react-table": "^8.21.3",
     "@tiptap/core": "^3.21.0",
     "@tiptap/extension-bold": "^3.21.0",
@@ -116,7 +119,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "4.0.17",
     "@types/lodash": "4.17.16",
-    "@types/luxon": "3.6.2",
+    "@types/luxon": "^3.7.1",
     "@types/mdast": "^4.0.4",
     "@types/postcss-functions": "4.0.4",
     "@types/postcss-mixins": "9.0.6",