@gridui/time-input 0.0.0-stage → 1.0.1
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.
- package/README.md +22 -2
- package/dist/date-time-input/date-time-input.d.ts +16 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +36 -0
- package/dist/index.js.map +7 -0
- package/dist/styles.css +8 -0
- package/dist/time-input/time-input.d.ts +16 -0
- package/docs/catalog.json +42 -0
- package/package.json +48 -3
package/README.md
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @gridui/time-input
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Native civil-time fields with the existing GridUI Input appearance. `TimeInput` renders `input[type="time"]`; `DateTimeInput` renders `input[type="datetime-local"]`.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
import "@gridui/theme/styles.css";
|
|
7
|
+
import "@gridui/overlay/styles.css";
|
|
8
|
+
import "@gridui/input/styles.css";
|
|
9
|
+
import "@gridui/time-input/styles.css";
|
|
10
|
+
import { TimeInput, DateTimeInput } from "@gridui/time-input";
|
|
11
|
+
|
|
12
|
+
<label htmlFor="opening">Opening time</label>;
|
|
13
|
+
<TimeInput id="opening" name="opening" min="09:00" max="17:00" step={900} />;
|
|
14
|
+
<DateTimeInput aria-label="Appointment" name="appointment" defaultValue="2026-11-08T09:30" />;
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Values are native strings, with `""` representing empty. Time values use `HH:mm`, optionally including seconds and fractional seconds. Local date-time values use `YYYY-MM-DDTHH:mm`, with the same optional seconds. These are civil values, not instants: neither component reads the clock, appends a timezone, or converts through `Date`. Applications own timezone interpretation, persistence, and locale policy. The browser and operating-system locale own the displayed 12/24-hour format and editing UI; the submitted value uses the native format.
|
|
18
|
+
|
|
19
|
+
Use `value`/`onValueChange` for controlled inputs or `defaultValue` for native uncontrolled inputs. `onChange`, `ref`, `name`, `form`, `required`, `disabled`, `readOnly`, `min`, `max`, and native validity/reset semantics are retained. `step` is measured in seconds, defaults to the browser's 60 seconds, and also accepts `"any"`. For example, 900 means fifteen-minute steps and 1 exposes seconds. Bounds and step validity follow HTML, including time ranges crossing midnight; there is no duplicate parsing or validation policy. Empty or partially edited input follows browser behavior.
|
|
20
|
+
|
|
21
|
+
Provide a visible `<label htmlFor>` with `id`, or an accessible name using `aria-label`/`aria-labelledby`. `controlSize="small"` selects the existing compact Input density. The component imports no Calendar or DatePicker implementation. For a calendar popup, compose `DatePicker` with `TimeInput` in the application and retain the same civil-value policy.
|
|
22
|
+
|
|
23
|
+
See [release history](https://github.com/sudo-ui/GridUI-React-Monorepo/tree/main/packages-core/time-input/.changeset/history).
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author WMXPY
|
|
3
|
+
* @package Time Input
|
|
4
|
+
* @namespace DateTimeInput
|
|
5
|
+
* @description Date Time Input
|
|
6
|
+
*/
|
|
7
|
+
import { type InputProps } from "@gridui/input";
|
|
8
|
+
import type { FC } from "react";
|
|
9
|
+
export type DateTimeInputProps = Omit<InputProps, "type" | "value" | "defaultValue" | "min" | "max" | "step"> & {
|
|
10
|
+
readonly value?: string;
|
|
11
|
+
readonly defaultValue?: string;
|
|
12
|
+
readonly min?: string;
|
|
13
|
+
readonly max?: string;
|
|
14
|
+
readonly step?: number | "any";
|
|
15
|
+
};
|
|
16
|
+
export declare const DateTimeInput: FC<DateTimeInputProps>;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author WMXPY
|
|
3
|
+
* @package Time Input
|
|
4
|
+
* @namespace Root
|
|
5
|
+
* @description Index
|
|
6
|
+
*/
|
|
7
|
+
export type { DateTimeInputProps } from "./date-time-input/date-time-input";
|
|
8
|
+
export { DateTimeInput } from "./date-time-input/date-time-input";
|
|
9
|
+
export type { TimeInputProps } from "./time-input/time-input";
|
|
10
|
+
export { TimeInput } from "./time-input/time-input";
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// src/date-time-input/date-time-input.tsx
|
|
2
|
+
import { Input } from "@gridui/input";
|
|
3
|
+
import { cn } from "@gridui/style-utils";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var DateTimeInput = (props) => {
|
|
6
|
+
const { className, ...restProps } = props;
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
Input,
|
|
9
|
+
{
|
|
10
|
+
...restProps,
|
|
11
|
+
type: "datetime-local",
|
|
12
|
+
className: cn("gridui-time-control", className)
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
// src/time-input/time-input.tsx
|
|
18
|
+
import { Input as Input2 } from "@gridui/input";
|
|
19
|
+
import { cn as cn2 } from "@gridui/style-utils";
|
|
20
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
21
|
+
var TimeInput = (props) => {
|
|
22
|
+
const { className, ...restProps } = props;
|
|
23
|
+
return /* @__PURE__ */ jsx2(
|
|
24
|
+
Input2,
|
|
25
|
+
{
|
|
26
|
+
...restProps,
|
|
27
|
+
type: "time",
|
|
28
|
+
className: cn2("gridui-time-control", className)
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
};
|
|
32
|
+
export {
|
|
33
|
+
DateTimeInput,
|
|
34
|
+
TimeInput
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/date-time-input/date-time-input.tsx", "../src/time-input/time-input.tsx"],
|
|
4
|
+
"sourcesContent": ["/**\n * @author WMXPY\n * @package Time Input\n * @namespace DateTimeInput\n * @description Date Time Input\n */\n\nimport { Input, type InputProps } from \"@gridui/input\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { FC } from \"react\";\n\nexport type DateTimeInputProps = Omit<InputProps, \"type\" | \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\"> & {\n readonly value?: string;\n readonly defaultValue?: string;\n readonly min?: string;\n readonly max?: string;\n readonly step?: number | \"any\";\n};\n\nexport const DateTimeInput: FC<DateTimeInputProps> = (props: DateTimeInputProps) => {\n const { className, ...restProps } = props;\n return (<Input\n {...restProps}\n type=\"datetime-local\"\n className={cn(\"gridui-time-control\", className)}\n />);\n};\n", "/**\n * @author WMXPY\n * @package Time Input\n * @namespace TimeInput\n * @description Time Input\n */\n\nimport { Input, type InputProps } from \"@gridui/input\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { FC } from \"react\";\n\nexport type TimeInputProps = Omit<InputProps, \"type\" | \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\"> & {\n readonly value?: string;\n readonly defaultValue?: string;\n readonly min?: string;\n readonly max?: string;\n readonly step?: number | \"any\";\n};\n\nexport const TimeInput: FC<TimeInputProps> = (props: TimeInputProps) => {\n const { className, ...restProps } = props;\n return (<Input\n {...restProps}\n type=\"time\"\n className={cn(\"gridui-time-control\", className)}\n />);\n};\n"],
|
|
5
|
+
"mappings": ";AAOA,SAAS,aAA8B;AACvC,SAAS,UAAU;AAaP;AAFL,IAAM,gBAAwC,CAAC,UAA8B;AAChF,QAAM,EAAE,WAAW,GAAG,UAAU,IAAI;AACpC,SAAQ;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,WAAW,GAAG,uBAAuB,SAAS;AAAA;AAAA,EAClD;AACJ;;;ACnBA,SAAS,SAAAA,cAA8B;AACvC,SAAS,MAAAC,WAAU;AAaP,gBAAAC,YAAA;AAFL,IAAM,YAAgC,CAAC,UAA0B;AACpE,QAAM,EAAE,WAAW,GAAG,UAAU,IAAI;AACpC,SAAQ,gBAAAA;AAAA,IAACF;AAAA,IAAA;AAAA,MACJ,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,WAAWC,IAAG,uBAAuB,SAAS;AAAA;AAAA,EAClD;AACJ;",
|
|
6
|
+
"names": ["Input", "cn", "jsx"]
|
|
7
|
+
}
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author WMXPY
|
|
3
|
+
* @package Time Input
|
|
4
|
+
* @namespace TimeInput
|
|
5
|
+
* @description Time Input
|
|
6
|
+
*/
|
|
7
|
+
import { type InputProps } from "@gridui/input";
|
|
8
|
+
import type { FC } from "react";
|
|
9
|
+
export type TimeInputProps = Omit<InputProps, "type" | "value" | "defaultValue" | "min" | "max" | "step"> & {
|
|
10
|
+
readonly value?: string;
|
|
11
|
+
readonly defaultValue?: string;
|
|
12
|
+
readonly min?: string;
|
|
13
|
+
readonly max?: string;
|
|
14
|
+
readonly step?: number | "any";
|
|
15
|
+
};
|
|
16
|
+
export declare const TimeInput: FC<TimeInputProps>;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"name": "@gridui/time-input",
|
|
4
|
+
"version": "1.0.1",
|
|
5
|
+
"category": "core",
|
|
6
|
+
"description": "GridUI React time input",
|
|
7
|
+
"usage": "Native civil-time fields with the existing GridUI Input appearance. `TimeInput` renders `input[type=\"time\"]`; `DateTimeInput` renders `input[type=\"datetime-local\"]`.",
|
|
8
|
+
"documentation": [
|
|
9
|
+
"README.md"
|
|
10
|
+
],
|
|
11
|
+
"exports": [
|
|
12
|
+
{
|
|
13
|
+
"name": "DateTimeInput",
|
|
14
|
+
"kind": "component",
|
|
15
|
+
"importPath": "@gridui/time-input"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"name": "DateTimeInputProps",
|
|
19
|
+
"kind": "type",
|
|
20
|
+
"importPath": "@gridui/time-input"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "TimeInput",
|
|
24
|
+
"kind": "component",
|
|
25
|
+
"importPath": "@gridui/time-input"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "TimeInputProps",
|
|
29
|
+
"kind": "type",
|
|
30
|
+
"importPath": "@gridui/time-input"
|
|
31
|
+
}
|
|
32
|
+
],
|
|
33
|
+
"styles": [
|
|
34
|
+
"@gridui/theme/styles.css",
|
|
35
|
+
"@gridui/overlay/styles.css",
|
|
36
|
+
"@gridui/input/styles.css",
|
|
37
|
+
"@gridui/time-input/styles.css"
|
|
38
|
+
],
|
|
39
|
+
"examples": [
|
|
40
|
+
"https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/time-input/stories/time-input.stories.tsx"
|
|
41
|
+
]
|
|
42
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,51 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gridui/time-input",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "GridUI React time input",
|
|
5
|
+
"license": "UNLICENSED",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist",
|
|
9
|
+
"README.md",
|
|
10
|
+
"docs"
|
|
11
|
+
],
|
|
12
|
+
"sideEffects": [
|
|
13
|
+
"**/*.css"
|
|
14
|
+
],
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"import": "./dist/index.js"
|
|
19
|
+
},
|
|
20
|
+
"./styles.css": "./dist/styles.css"
|
|
21
|
+
},
|
|
22
|
+
"publishConfig": {
|
|
23
|
+
"access": "public"
|
|
24
|
+
},
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"react": "^19.2.0",
|
|
27
|
+
"react-dom": "^19.2.0"
|
|
28
|
+
},
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@gridui/input": "^1.1.6",
|
|
31
|
+
"@gridui/style-utils": "^2.2.2",
|
|
32
|
+
"@gridui/theme": "^2.5.3"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@gridui-internal/configuration": "0.0.0-internal",
|
|
36
|
+
"@jest/globals": "30.5.2",
|
|
37
|
+
"@storybook/react-vite": "10.6.6",
|
|
38
|
+
"@types/jest": "30.0.0",
|
|
39
|
+
"@types/node": "26.6.6",
|
|
40
|
+
"@types/react": "19.3.0",
|
|
41
|
+
"@types/react-dom": "19.3.0",
|
|
42
|
+
"jest": "30.5.2",
|
|
43
|
+
"react": "19.3.1",
|
|
44
|
+
"react-dom": "19.3.1",
|
|
45
|
+
"typescript": "6.0.3"
|
|
46
|
+
},
|
|
47
|
+
"scripts": {
|
|
48
|
+
"build": "node ../../scripts/compilation/package.ts",
|
|
49
|
+
"compile": "tsc --project tsconfig.json"
|
|
50
|
+
}
|
|
6
51
|
}
|