@gridui/time-input 0.0.0-stage → 0.0.0

package/README.md

@@ -1,3 +1,23 @@
-# Temporary Holding Version
+# @gridui/time-input
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Native civil-time fields with the existing GridUI Input appearance. `TimeInput` renders `input[type="time"]`; `DateTimeInput` renders `input[type="datetime-local"]`.
+
+```tsx
+import "@gridui/theme/styles.css";
+import "@gridui/overlay/styles.css";
+import "@gridui/input/styles.css";
+import "@gridui/time-input/styles.css";
+import { TimeInput, DateTimeInput } from "@gridui/time-input";
+
+<label htmlFor="opening">Opening time</label>;
+<TimeInput id="opening" name="opening" min="09:00" max="17:00" step={900} />;
+<DateTimeInput aria-label="Appointment" name="appointment" defaultValue="2026-11-08T09:30" />;
+```
+
+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.
+
+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.
+
+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.
+
+See [release history](https://github.com/sudo-ui/GridUI-React-Monorepo/tree/main/packages-core/time-input/.changeset/history).

package/dist/date-time-input/date-time-input.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @author WMXPY
+ * @package Time Input
+ * @namespace DateTimeInput
+ * @description Date Time Input
+ */
+import { type InputProps } from "@gridui/input";
+import type { FC } from "react";
+export type DateTimeInputProps = Omit<InputProps, "type" | "value" | "defaultValue" | "min" | "max" | "step"> & {
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly min?: string;
+    readonly max?: string;
+    readonly step?: number | "any";
+};
+export declare const DateTimeInput: FC<DateTimeInputProps>;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author WMXPY
+ * @package Time Input
+ * @namespace Root
+ * @description Index
+ */
+export type { DateTimeInputProps } from "./date-time-input/date-time-input";
+export { DateTimeInput } from "./date-time-input/date-time-input";
+export type { TimeInputProps } from "./time-input/time-input";
+export { TimeInput } from "./time-input/time-input";

package/dist/index.js

@@ -0,0 +1,36 @@
+// src/date-time-input/date-time-input.tsx
+import { Input } from "@gridui/input";
+import { cn } from "@gridui/style-utils";
+import { jsx } from "react/jsx-runtime";
+var DateTimeInput = (props) => {
+  const { className, ...restProps } = props;
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...restProps,
+      type: "datetime-local",
+      className: cn("gridui-time-control", className)
+    }
+  );
+};
+
+// src/time-input/time-input.tsx
+import { Input as Input2 } from "@gridui/input";
+import { cn as cn2 } from "@gridui/style-utils";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TimeInput = (props) => {
+  const { className, ...restProps } = props;
+  return /* @__PURE__ */ jsx2(
+    Input2,
+    {
+      ...restProps,
+      type: "time",
+      className: cn2("gridui-time-control", className)
+    }
+  );
+};
+export {
+  DateTimeInput,
+  TimeInput
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/date-time-input/date-time-input.tsx", "../src/time-input/time-input.tsx"],
+  "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"],
+  "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;",
+  "names": ["Input", "cn", "jsx"]
+}

package/dist/styles.css

@@ -0,0 +1,8 @@
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
+@layer theme, base, components, utilities;
+@layer utilities;
+@layer components {
+  .gridui-time-control {
+    font-variant-numeric: tabular-nums;
+  }
+}

package/dist/time-input/time-input.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @author WMXPY
+ * @package Time Input
+ * @namespace TimeInput
+ * @description Time Input
+ */
+import { type InputProps } from "@gridui/input";
+import type { FC } from "react";
+export type TimeInputProps = Omit<InputProps, "type" | "value" | "defaultValue" | "min" | "max" | "step"> & {
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly min?: string;
+    readonly max?: string;
+    readonly step?: number | "any";
+};
+export declare const TimeInput: FC<TimeInputProps>;

package/docs/catalog.json

@@ -0,0 +1,42 @@
+{
+  "schemaVersion": 1,
+  "name": "@gridui/time-input",
+  "version": "0.0.0",
+  "category": "core",
+  "description": "GridUI React time input",
+  "usage": "Native civil-time fields with the existing GridUI Input appearance. `TimeInput` renders `input[type=\"time\"]`; `DateTimeInput` renders `input[type=\"datetime-local\"]`.",
+  "documentation": [
+    "README.md"
+  ],
+  "exports": [
+    {
+      "name": "DateTimeInput",
+      "kind": "component",
+      "importPath": "@gridui/time-input"
+    },
+    {
+      "name": "DateTimeInputProps",
+      "kind": "type",
+      "importPath": "@gridui/time-input"
+    },
+    {
+      "name": "TimeInput",
+      "kind": "component",
+      "importPath": "@gridui/time-input"
+    },
+    {
+      "name": "TimeInputProps",
+      "kind": "type",
+      "importPath": "@gridui/time-input"
+    }
+  ],
+  "styles": [
+    "@gridui/theme/styles.css",
+    "@gridui/overlay/styles.css",
+    "@gridui/input/styles.css",
+    "@gridui/time-input/styles.css"
+  ],
+  "examples": [
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/time-input/stories/time-input.stories.tsx"
+  ]
+}

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@gridui/time-input",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.0",
+  "description": "GridUI React time input",
+  "license": "UNLICENSED",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md",
+    "docs"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@gridui/input": "^1.1.4",
+    "@gridui/style-utils": "^2.2.0",
+    "@gridui/theme": "^2.5.1"
+  },
+  "devDependencies": {
+    "@gridui-internal/configuration": "0.0.0-internal",
+    "@jest/globals": "30.5.2",
+    "@storybook/react-vite": "10.6.5",
+    "@types/jest": "30.0.0",
+    "@types/node": "26.6.6",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jest": "30.5.2",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "build": "node ../../scripts/compilation/package.ts",
+    "compile": "tsc --project tsconfig.json"
+  }
 }