@fusion.dev/helix-core 0.0.0-dev

package/dist/utils/value-as/value-as.js

@@ -0,0 +1,105 @@
+/**
+ * A date or time control's string value, read as the platform reads it.
+ *
+ * **Six families needed this and none of them could have it alone.** `Date
+ * Input` and `Date Picker` both hold `YYYY-MM-DD`, `Time Input` and `Time
+ * Picker` both hold `HH:mm`, and `Number Input` and `Rating` both hold a
+ * number, so `valueAsDate` and `valueAsNumber` would have been four
+ * implementations of two conversions with four chances to disagree about what
+ * an invalid value returns. Here rather than in a shared folder under
+ * `helix/headless`, because there is no such folder and this is a pure function
+ * of a string: it sits beside `formatNumbers` and `relativeTime`, which are the
+ * same kind of thing.
+ *
+ * **UTC throughout, which is the platform's own choice and looks wrong until it
+ * is explained.** `<input type="date">.valueAsDate` returns midnight UTC rather
+ * than midnight local, so a date that is the same date everywhere does not
+ * become a different one by crossing a timezone. Constructing through
+ * `new Date('2026-08-26')` happens to do this and `new Date(2026, 7, 26)` does
+ * not, and the difference is a whole day for anybody west of Greenwich: the
+ * local constructor gives a `Date` whose UTC date is the 25th. `Date.UTC` says
+ * which one is meant rather than relying on a parse rule.
+ *
+ * **Invalid is `null` and `NaN`, never a thrown error and never a guess.** That
+ * is what the platform answers for a half-typed date, which is most of the
+ * keystrokes a reader makes in one: a control that threw on the way to a valid
+ * value would be unusable, and one that guessed would submit a date nobody
+ * chose.
+ */
+/** `YYYY-MM-DD`, and nothing that merely starts like it. */
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** `HH:mm`, optionally with seconds, which is what a step under a minute produces. */
+const ISO_TIME = /^(\d{2}):(\d{2})(?::(\d{2}(?:\.\d{1,3})?))?$/;
+/** Milliseconds in one day, for a time value, which is an offset rather than an instant. */
+const DAY = 86_400_000;
+/**
+ * The date a `YYYY-MM-DD` value names, at midnight UTC, or `null`.
+ *
+ * The range check is not decoration. `2026-02-31` matches the pattern and
+ * `Date.UTC` rolls it forward to 3 March, so without reading the parts back a
+ * control would report a date the reader never typed and never saw.
+ */
+export const valueAsDate = (value) => {
+    const parts = ISO_DATE.exec(value);
+    if (!parts) {
+        return null;
+    }
+    const [year, month, day] = [Number(parts[1]), Number(parts[2]), Number(parts[3])];
+    const date = new Date(Date.UTC(year, month - 1, day));
+    const rolled = date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day;
+    return rolled ? null : date;
+};
+/** The `YYYY-MM-DD` value for a date, or the empty string, which is how a control says nothing. */
+export const dateAsValue = (date) => {
+    if (!date || Number.isNaN(date.getTime())) {
+        return '';
+    }
+    return date.toISOString().slice(0, 10);
+};
+/**
+ * The time an `HH:mm` value names, on 1 January 1970 UTC, or `null`.
+ *
+ * The platform's own answer for `<input type="time">`, and the epoch day is
+ * what makes `valueAsNumber` come out as milliseconds since midnight rather
+ * than as an instant nobody meant.
+ */
+export const valueAsTime = (value) => {
+    const parts = ISO_TIME.exec(value);
+    if (!parts) {
+        return null;
+    }
+    const [hours, minutes] = [Number(parts[1]), Number(parts[2])];
+    const seconds = parts[3] === undefined ? 0 : Number(parts[3]);
+    if (hours > 23 || minutes > 59 || seconds >= 60) {
+        return null;
+    }
+    return new Date(Date.UTC(1970, 0, 1, hours, minutes, Math.floor(seconds), (seconds % 1) * 1000));
+};
+/**
+ * The `HH:mm` value for a time, or the empty string.
+ *
+ * Seconds are written only where there are any, because `HH:mm` is what this
+ * library's time controls hold and a trailing `:00` on every value would be a
+ * format change dressed as a conversion.
+ */
+export const timeAsValue = (date) => {
+    if (!date || Number.isNaN(date.getTime())) {
+        return '';
+    }
+    const within = ((date.getTime() % DAY) + DAY) % DAY;
+    const clock = new Date(within);
+    const pad = (part) => String(part).padStart(2, '0');
+    const seconds = clock.getUTCSeconds() + clock.getUTCMilliseconds() / 1000;
+    const hm = `${pad(clock.getUTCHours())}:${pad(clock.getUTCMinutes())}`;
+    return seconds === 0 ? hm : `${hm}:${pad(clock.getUTCSeconds())}`;
+};
+/**
+ * The number a value holds, or `NaN`.
+ *
+ * `Number('')` is zero, which is the trap: an empty control would report a
+ * number it does not hold and a form would submit it. The platform answers
+ * `NaN` for an empty `<input type="number">` and so does this.
+ */
+export const valueAsNumber = (value) => value.trim() === '' ? Number.NaN : Number(value);
+/** The value for a number, or the empty string, which is how a control says nothing. */
+export const numberAsValue = (count) => (Number.isNaN(count) ? '' : String(count));

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@fusion.dev/helix-core",
+  "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
+  "version": "0.0.0-dev",
+  "license": "MIT",
+  "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
+  "repository": {
+    "directory": "helix/core",
+    "type": "git",
+    "url": "git+https://github.com/project-fusion/fusion.git"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "custom-elements.json",
+    "dist"
+  ],
+  "customElements": "custom-elements.json",
+  "sideEffects": false,
+  "scripts": {
+    "analyze": "cem analyze --config custom-elements-manifest.config.ts",
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "bun test src"
+  },
+  "bugs": "https://github.com/project-fusion/fusion/issues",
+  "dependencies": {
+    "@floating-ui/dom": "^1.8.0",
+    "@fusion.dev/helix-icons": "0.0.0-dev"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@fusion.dev/helix-cem": "0.0.0-dev",
+    "@fusion.dev/helix-testing": "0.0.0-dev",
+    "lit": "^3.2.1"
+  },
+  "homepage": "https://fusion.dev",
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "lit",
+    "design-system",
+    "helix"
+  ],
+  "peerDependencies": {
+    "lit": "^3.2.1"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  }
+}