@neoptocom/neopto-ui 1.6.1 → 1.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +3 -1
  2. package/dist/index.d.cts +8 -0
  3. package/dist/index.d.ts +8 -0
  4. package/dist/index.js +3 -1
  5. package/package.json +1 -1
  6. package/src/components/DateInput.tsx +8 -1
  7. package/src/stories/DateInput.stories.tsx +9 -9
package/dist/index.cjs CHANGED
@@ -1733,6 +1733,8 @@ var DateInput = React11__namespace.forwardRef(
1733
1733
  maxDate,
1734
1734
  placeholder = "00/00/0000",
1735
1735
  className = "",
1736
+ lightBackgroundImage,
1737
+ darkBackgroundImage,
1736
1738
  ...props
1737
1739
  }, ref) => {
1738
1740
  const [inputValue, setInputValue] = React11__namespace.useState(
@@ -1822,7 +1824,7 @@ var DateInput = React11__namespace.forwardRef(
1822
1824
  ...props
1823
1825
  }
1824
1826
  ),
1825
- showCalendar && !disabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-20 mt-2 w-full max-w-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", showDecorations: false, children: /* @__PURE__ */ jsxRuntime.jsx(
1827
+ showCalendar && !disabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-20 mt-2 w-full max-w-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", showDecorations: false, lightImage: lightBackgroundImage, darkImage: darkBackgroundImage, children: /* @__PURE__ */ jsxRuntime.jsx(
1826
1828
  Calendar,
1827
1829
  {
1828
1830
  selectedDate: inputValue !== placeholder && parseDate(inputValue) && isValidDate(parseDate(inputValue)) ? parseDate(inputValue) : /* @__PURE__ */ new Date(),
package/dist/index.d.cts CHANGED
@@ -407,6 +407,10 @@ type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"
407
407
  maxDate?: Date;
408
408
  /** Placeholder text (default: "00/00/0000") */
409
409
  placeholder?: string;
410
+ /** Background image URL for light mode */
411
+ lightBackgroundImage?: string;
412
+ /** Background image URL for dark mode */
413
+ darkBackgroundImage?: string;
410
414
  };
411
415
  declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
412
416
  /** Label text displayed above the input */
@@ -423,6 +427,10 @@ declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
423
427
  maxDate?: Date;
424
428
  /** Placeholder text (default: "00/00/0000") */
425
429
  placeholder?: string;
430
+ /** Background image URL for light mode */
431
+ lightBackgroundImage?: string;
432
+ /** Background image URL for dark mode */
433
+ darkBackgroundImage?: string;
426
434
  } & React.RefAttributes<HTMLInputElement>>;
427
435
 
428
436
  type CalendarProps = {
package/dist/index.d.ts CHANGED
@@ -407,6 +407,10 @@ type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"
407
407
  maxDate?: Date;
408
408
  /** Placeholder text (default: "00/00/0000") */
409
409
  placeholder?: string;
410
+ /** Background image URL for light mode */
411
+ lightBackgroundImage?: string;
412
+ /** Background image URL for dark mode */
413
+ darkBackgroundImage?: string;
410
414
  };
411
415
  declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
412
416
  /** Label text displayed above the input */
@@ -423,6 +427,10 @@ declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
423
427
  maxDate?: Date;
424
428
  /** Placeholder text (default: "00/00/0000") */
425
429
  placeholder?: string;
430
+ /** Background image URL for light mode */
431
+ lightBackgroundImage?: string;
432
+ /** Background image URL for dark mode */
433
+ darkBackgroundImage?: string;
426
434
  } & React.RefAttributes<HTMLInputElement>>;
427
435
 
428
436
  type CalendarProps = {
package/dist/index.js CHANGED
@@ -1712,6 +1712,8 @@ var DateInput = React11.forwardRef(
1712
1712
  maxDate,
1713
1713
  placeholder = "00/00/0000",
1714
1714
  className = "",
1715
+ lightBackgroundImage,
1716
+ darkBackgroundImage,
1715
1717
  ...props
1716
1718
  }, ref) => {
1717
1719
  const [inputValue, setInputValue] = React11.useState(
@@ -1801,7 +1803,7 @@ var DateInput = React11.forwardRef(
1801
1803
  ...props
1802
1804
  }
1803
1805
  ),
1804
- showCalendar && !disabled && /* @__PURE__ */ jsx("div", { className: "absolute z-20 mt-2 w-full max-w-sm", children: /* @__PURE__ */ jsx(Card, { className: "p-4", showDecorations: false, children: /* @__PURE__ */ jsx(
1806
+ showCalendar && !disabled && /* @__PURE__ */ jsx("div", { className: "absolute z-20 mt-2 w-full max-w-sm", children: /* @__PURE__ */ jsx(Card, { className: "p-4", showDecorations: false, lightImage: lightBackgroundImage, darkImage: darkBackgroundImage, children: /* @__PURE__ */ jsx(
1805
1807
  Calendar,
1806
1808
  {
1807
1809
  selectedDate: inputValue !== placeholder && parseDate(inputValue) && isValidDate(parseDate(inputValue)) ? parseDate(inputValue) : /* @__PURE__ */ new Date(),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neoptocom/neopto-ui",
3
- "version": "1.6.1",
3
+ "version": "1.6.3",
4
4
  "private": false,
5
5
  "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
6
6
  "keywords": [
package/src/components/DateInput.tsx CHANGED
@@ -2,6 +2,7 @@ import * as React from "react";
2
2
  import { Input } from "./Input";
3
3
  import Calendar from "./Calendar";
4
4
  import { Card } from "./Card";
5
+ import { assets } from "..";
5
6
 
6
7
  export type DateInputProps = Omit<
7
8
  React.InputHTMLAttributes<HTMLInputElement>,
@@ -21,6 +22,10 @@ export type DateInputProps = Omit<
21
22
  maxDate?: Date;
22
23
  /** Placeholder text (default: "00/00/0000") */
23
24
  placeholder?: string;
25
+ /** Background image URL for light mode */
26
+ lightBackgroundImage?: string;
27
+ /** Background image URL for dark mode */
28
+ darkBackgroundImage?: string;
24
29
  };
25
30
 
26
31
  function formatDate(date: Date): string {
@@ -75,6 +80,8 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
75
80
  maxDate,
76
81
  placeholder = "00/00/0000",
77
82
  className = "",
83
+ lightBackgroundImage,
84
+ darkBackgroundImage,
78
85
  ...props
79
86
  },
80
87
  ref
@@ -199,7 +206,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
199
206
 
200
207
  {showCalendar && !disabled && (
201
208
  <div className="absolute z-20 mt-2 w-full max-w-sm">
202
- <Card className="p-4" showDecorations={false}>
209
+ <Card className="p-4" showDecorations={false} lightImage={lightBackgroundImage} darkImage={darkBackgroundImage}>
203
210
  <Calendar
204
211
  selectedDate={
205
212
  inputValue !== placeholder &&
package/src/stories/DateInput.stories.tsx CHANGED
@@ -1,6 +1,6 @@
1
+ import * as React from "react";
1
2
  import type { Meta, StoryObj } from "@storybook/react";
2
3
  import { DateInput } from "../components/DateInput";
3
- import { useState } from "react";
4
4
 
5
5
  const meta: Meta<typeof DateInput> = {
6
6
  title: "Components/DateInput",
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof DateInput>;
11
11
 
12
12
  export const Default: Story = {
13
13
  render: () => {
14
- const [date, setDate] = useState<Date | null>(null);
14
+ const [date, setDate] = React.useState<Date | null>(null);
15
15
  return (
16
16
  <div className="flex flex-col gap-4 w-96">
17
17
  <DateInput
@@ -26,7 +26,7 @@ export const Default: Story = {
26
26
 
27
27
  export const WithInitialValue: Story = {
28
28
  render: () => {
29
- const [date, setDate] = useState<Date | null>(new Date());
29
+ const [date, setDate] = React.useState<Date | null>(new Date());
30
30
  return (
31
31
  <div className="flex flex-col gap-4 w-96">
32
32
  <DateInput
@@ -41,7 +41,7 @@ export const WithInitialValue: Story = {
41
41
 
42
42
  export const WithoutLabel: Story = {
43
43
  render: () => {
44
- const [date, setDate] = useState<Date | null>(null);
44
+ const [date, setDate] = React.useState<Date | null>(null);
45
45
  return (
46
46
  <div className="flex flex-col gap-4 w-96">
47
47
  <DateInput
@@ -55,7 +55,7 @@ export const WithoutLabel: Story = {
55
55
 
56
56
  export const Disabled: Story = {
57
57
  render: () => {
58
- const [date, setDate] = useState<Date | null>(new Date());
58
+ const [date, setDate] = React.useState<Date | null>(new Date());
59
59
  return (
60
60
  <div className="flex flex-col gap-4 w-96">
61
61
  <DateInput
@@ -71,7 +71,7 @@ export const Disabled: Story = {
71
71
 
72
72
  export const WithError: Story = {
73
73
  render: () => {
74
- const [date, setDate] = useState<Date | null>(null);
74
+ const [date, setDate] = React.useState<Date | null>(null);
75
75
  return (
76
76
  <div className="flex flex-col gap-4 w-96">
77
77
  <DateInput
@@ -87,7 +87,7 @@ export const WithError: Story = {
87
87
 
88
88
  export const WithMinMax: Story = {
89
89
  render: () => {
90
- const [date, setDate] = useState<Date | null>(null);
90
+ const [date, setDate] = React.useState<Date | null>(null);
91
91
  const today = new Date();
92
92
  const minDate = new Date(today);
93
93
  minDate.setDate(today.getDate() - 7); // 7 days ago
@@ -113,8 +113,8 @@ export const WithMinMax: Story = {
113
113
 
114
114
  export const Multiple: Story = {
115
115
  render: () => {
116
- const [startDate, setStartDate] = useState<Date | null>(null);
117
- const [endDate, setEndDate] = useState<Date | null>(null);
116
+ const [startDate, setStartDate] = React.useState<Date | null>(null);
117
+ const [endDate, setEndDate] = React.useState<Date | null>(null);
118
118
 
119
119
  return (
120
120
  <div className="flex flex-col gap-4 w-96">