@nr1e/qwik-ui 1.0.1 → 1.0.3

package/lib/components/format-date-time.qwik.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+function formatDateTime(date, timeZone, locale) {
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  return new Intl.DateTimeFormat(locale ?? "en-US", {
+    timeZone,
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZoneName: "short"
+  }).format(dateObj);
+}
+const FormatDateTime = qwik.component$((props) => {
+  const date = qwik.useSignal(null);
+  if (!props.date) return null;
+  qwik.useVisibleTask$(() => {
+    if (props.date) {
+      let timeZone = props.timeZone;
+      if (!props.timeZone) {
+        timeZone = localStorage.getItem("timezone");
+        if (!timeZone || timeZone === "auto") {
+          timeZone = null;
+        }
+      }
+      date.value = formatDateTime(props.date, timeZone ?? void 0, props.locale ?? void 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: date.value
+  });
+});
+exports.FormatDateTime = FormatDateTime;

package/lib/components/format-date-time.qwik.mjs

@@ -0,0 +1,37 @@
+import { jsx, Fragment } from "@builder.io/qwik/jsx-runtime";
+import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+function formatDateTime(date, timeZone, locale) {
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  return new Intl.DateTimeFormat(locale ?? "en-US", {
+    timeZone,
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZoneName: "short"
+  }).format(dateObj);
+}
+const FormatDateTime = component$((props) => {
+  const date = useSignal(null);
+  if (!props.date) return null;
+  useVisibleTask$(() => {
+    if (props.date) {
+      let timeZone = props.timeZone;
+      if (!props.timeZone) {
+        timeZone = localStorage.getItem("timezone");
+        if (!timeZone || timeZone === "auto") {
+          timeZone = null;
+        }
+      }
+      date.value = formatDateTime(props.date, timeZone ?? void 0, props.locale ?? void 0);
+    }
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: date.value
+  });
+});
+export {
+  FormatDateTime
+};

package/lib/components/format-date.qwik.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+function formatDate(date, timeZone, locale) {
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  return new Intl.DateTimeFormat(locale ?? "en-US", {
+    timeZone,
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }).format(dateObj);
+}
+const FormatDate = qwik.component$((props) => {
+  const date = qwik.useSignal(null);
+  if (!props.date) return null;
+  qwik.useVisibleTask$(() => {
+    if (props.date) {
+      let timeZone = props.timeZone;
+      if (!props.timeZone) {
+        timeZone = localStorage.getItem("timezone");
+        if (!timeZone || timeZone === "auto") {
+          timeZone = null;
+        }
+      }
+      date.value = formatDate(props.date, timeZone ?? void 0, props.locale ?? void 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: date.value
+  });
+});
+exports.FormatDate = FormatDate;

package/lib/components/format-date.qwik.mjs

@@ -0,0 +1,33 @@
+import { jsx, Fragment } from "@builder.io/qwik/jsx-runtime";
+import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+function formatDate(date, timeZone, locale) {
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  return new Intl.DateTimeFormat(locale ?? "en-US", {
+    timeZone,
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }).format(dateObj);
+}
+const FormatDate = component$((props) => {
+  const date = useSignal(null);
+  if (!props.date) return null;
+  useVisibleTask$(() => {
+    if (props.date) {
+      let timeZone = props.timeZone;
+      if (!props.timeZone) {
+        timeZone = localStorage.getItem("timezone");
+        if (!timeZone || timeZone === "auto") {
+          timeZone = null;
+        }
+      }
+      date.value = formatDate(props.date, timeZone ?? void 0, props.locale ?? void 0);
+    }
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: date.value
+  });
+});
+export {
+  FormatDate
+};

package/lib/index.qwik.cjs

@@ -10,6 +10,8 @@ const checkboxField = require("./components/checkbox-field.qwik.cjs");
 const dialog = require("./components/dialog.qwik.cjs");
 const dock = require("./components/dock.qwik.cjs");
 const fixedCenterBottom = require("./components/fixed-center-bottom.qwik.cjs");
+const formatDate = require("./components/format-date.qwik.cjs");
+const formatDateTime = require("./components/format-date-time.qwik.cjs");
 const dropUp = require("./components/drop-up.qwik.cjs");
 const googleSignInButton = require("./components/google-sign-in-button.qwik.cjs");
 const gtm = require("./components/gtm.qwik.cjs");
@@ -34,6 +36,8 @@ exports.DockButton = dock.DockButton;
 exports.DockLabel = dock.DockLabel;
 exports.DockLink = dock.DockLink;
 exports.FixedCenterBottom = fixedCenterBottom.FixedCenterBottom;
+exports.FormatDate = formatDate.FormatDate;
+exports.FormatDateTime = formatDateTime.FormatDateTime;
 exports.DropUp = dropUp.DropUp;
 exports.DropUpButton = dropUp.DropUpButton;
 exports.DropUpButtonSelector = dropUp.DropUpButtonSelector;

package/lib/index.qwik.mjs

@@ -8,6 +8,8 @@ import { CheckboxField } from "./components/checkbox-field.qwik.mjs";
 import { Dialog } from "./components/dialog.qwik.mjs";
 import { Dock, DockButton, DockLabel, DockLink } from "./components/dock.qwik.mjs";
 import { FixedCenterBottom } from "./components/fixed-center-bottom.qwik.mjs";
+import { FormatDate } from "./components/format-date.qwik.mjs";
+import { FormatDateTime } from "./components/format-date-time.qwik.mjs";
 import { DropUp, DropUpButton, DropUpButtonSelector, DropUpLink, DropUpSubmenu } from "./components/drop-up.qwik.mjs";
 import { GoogleSignInButton } from "./components/google-sign-in-button.qwik.mjs";
 import { GtmBody, GtmHead } from "./components/gtm.qwik.mjs";
@@ -38,6 +40,8 @@ export {
   DropUpLink,
   DropUpSubmenu,
   FixedCenterBottom,
+  FormatDate,
+  FormatDateTime,
   GoogleSignInButton,
   GtmBody,
   GtmHead,

package/lib-types/components/format-date-time.d.ts

@@ -0,0 +1,6 @@
+export interface FormatDateTimeProps {
+    timeZone?: string | null;
+    locale?: string | null;
+    date: Date | string | null;
+}
+export declare const FormatDateTime: import("@builder.io/qwik").Component<FormatDateTimeProps>;

package/lib-types/components/format-date.d.ts

@@ -0,0 +1,6 @@
+export interface FormatDateProps {
+    timeZone?: string | null;
+    locale?: string | null;
+    date: Date | string | null;
+}
+export declare const FormatDate: import("@builder.io/qwik").Component<FormatDateProps>;

package/lib-types/index.d.ts

@@ -8,6 +8,8 @@ export * from './components/checkbox-field';
 export * from './components/dialog';
 export * from './components/dock';
 export * from './components/fixed-center-bottom';
+export * from './components/format-date';
+export * from './components/format-date-time';
 export * from './components/drop-up';
 export * from './components/google-sign-in-button';
 export * from './components/gtm';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nr1e/qwik-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "NR1E Qwik UI Library",
   "author": "NR1E, Inc.",
   "publishConfig": {
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "@builder.io/qwik-city": "1.19.0",
     "tailwindcss-animated": "2.0.0",
-    "@nr1e/qwik-icons": "0.0.24"
+    "@nr1e/qwik-icons": "0.0.25"
   },
   "devDependencies": {
     "@builder.io/qwik": "1.19.0",