@wrdagency/blockout 0.1.5 → 0.1.6

package/dist/components/button/button.js

@@ -1,15 +1,22 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cn as o } from "../../utils/css.js";
-import '../../assets/button.css';const c = (t) => {
-  const n = o(
-    t.className,
+import { jsx as o } from "react/jsx-runtime";
+import { cn as p } from "../../utils/css.js";
+import '../../assets/button.css';const l = (e) => {
+  const {
+    className: s,
+    wide: m,
+    size: r,
+    variant: a,
+    as: c,
+    ...t
+  } = e, n = p(
+    s,
     "component-button",
-    `component-button--${t.variant || "primary"}`,
-    `component-button--${t.size || "medium"}`,
-    t.wide && "component-button--wide"
+    `component-button--${a || "primary"}`,
+    `component-button--${r || "medium"}`,
+    m && "component-button--wide"
   );
-  return t.as === "link" ? /* @__PURE__ */ e("a", { ...t, className: n }) : /* @__PURE__ */ e("button", { type: "button", ...t, className: n });
+  return c === "link" ? /* @__PURE__ */ o("a", { ...t, className: n }) : /* @__PURE__ */ o("button", { type: "button", ...t, className: n });
 };
 export {
-  c as Button
+  l as Button
 };

package/dist/components/controls/card-number-control/index.js

@@ -410,7 +410,6 @@ const j = /* @__PURE__ */ x(Z), de = (s) => {
     onChange: d = S,
     ...c
   } = p, t = L(() => j(a), [a]);
-  console.log(t);
   function l(u) {
     if (t.length !== 1)
       return /* @__PURE__ */ v(A, { ...u });

package/dist/components/controls/date-control/component.d.ts

@@ -1,9 +1,9 @@
 import { InputHTMLAttributes } from 'react';
-import { DateComponent, DateString } from './types';
+import { DateComponent, DateFormat, DateString } from './types';
 interface DateComponentInputProps extends InputHTMLAttributes<HTMLInputElement> {
     component: DateComponent;
-    separator: string;
-    components: DateComponent[];
+    dataFormat: DateFormat;
+    viewFormat: DateFormat;
     value: DateString;
     onChangeValue: (value: string) => void;
 }

package/dist/components/controls/date-control/component.js

@@ -1,42 +1,42 @@
 import { jsx as x } from "react/jsx-runtime";
-import { forwardRef as C } from "react";
-import { parseDateString as D, formatDateString as v } from "./types.js";
-const w = C((m, p) => {
+import { forwardRef as V } from "react";
+import { parseDateString as f, getComponentMaxValue as v, getComponentMinValue as D, getComponentMaxLength as M, getComponentPlaceholder as w, formatDateString as F } from "./types.js";
+const j = V((r, m) => {
   const {
     component: e,
-    separator: t,
-    components: n,
-    value: s,
-    onChangeValue: u,
-    autoComplete: c,
-    ...l
-  } = m, o = D(s, n, t), i = o[e], d = e === "day" ? "DD" : e === "month" ? "MM" : "YY", a = e === "day" || e === "month" ? 1 : 0, r = e === "day" ? 31 : e === "month" ? 12 : 99, h = (g) => {
-    const f = {
-      ...o,
-      [e]: g.currentTarget.value
+    dataFormat: t,
+    viewFormat: L,
+    value: p,
+    onChangeValue: l,
+    autoComplete: u,
+    ...c
+  } = r, n = f(p, t), s = n[e], i = w(e), o = D(e), a = v(e), g = M(e), C = (d) => {
+    const h = {
+      ...n,
+      [e]: d.currentTarget.value
     };
-    u(v(f, n, t));
+    l(F(h, t));
   };
   return /* @__PURE__ */ x(
     "input",
     {
-      ref: p,
-      value: i,
+      ref: m,
+      value: s,
       className: "component-date-control__input",
       inputMode: "numeric",
-      autoComplete: c + "-" + e,
-      placeholder: d,
-      maxLength: 2,
+      autoComplete: u + "-" + e,
+      placeholder: i,
       step: 1,
-      "aria-valuemin": a,
-      min: a,
-      max: r,
-      "aria-valuemax": r,
-      onChange: h,
-      ...l
+      maxLength: g,
+      "aria-valuemin": o,
+      min: o,
+      max: a,
+      "aria-valuemax": a,
+      onChange: C,
+      ...c
     }
   );
 });
 export {
-  w as DateComponentInput
+  j as DateComponentInput
 };

package/dist/components/controls/date-control/index.d.ts

@@ -1,12 +1,14 @@
 import { HTMLInputAutoCompleteAttribute } from 'react';
 import { ControlFC } from '../base-control/props';
-import { DateComponent, DateString } from './types';
+import { DateFormat, DateString } from './types';
 interface DateControlProps {
     value?: DateString;
     onChangeValue?: (value: DateString) => void;
     autoComplete?: HTMLInputAutoCompleteAttribute;
-    components?: DateComponent[];
+    dataFormat?: DateFormat;
+    viewFormat?: DateFormat;
     separator?: string;
+    fullYear?: boolean;
 }
 export declare const DateControl: ControlFC<DateControlProps>;
 export {};

package/dist/components/controls/date-control/index.js

@@ -1,36 +1,38 @@
-import { jsx as o, jsxs as d, Fragment as f } from "react/jsx-runtime";
+import { jsx as e, jsxs as d, Fragment as C } from "react/jsx-runtime";
+import { createElement as g } from "react";
 import { useSplitInput as h } from "../../../hooks/input.js";
-import "react";
-import { noop as C } from "../../../utils/noop.js";
-import { BaseControl as g } from "../base-control/index.js";
-import { useBaseControlProps as x } from "../base-control/props.js";
+import { noop as F } from "../../../utils/noop.js";
+import { BaseControl as x } from "../base-control/index.js";
+import { useBaseControlProps as D } from "../base-control/props.js";
 import { DateComponentInput as P } from "./component.js";
-import '../../../assets/index6.css';const b = (n) => {
-  const { baseProps: a, controlProps: p } = x(n, {
+import { getDefaultFormat as a } from "./types.js";
+import '../../../assets/index6.css';const w = (n) => {
+  const { baseProps: m, controlProps: p } = D(n, {
     className: "component-date-control"
   }), { register: s } = h(), {
-    value: m = "",
-    onChangeValue: l = C,
-    autoComplete: c,
-    separator: t = "-",
-    components: r = ["day", "month", "year"]
+    value: l = "",
+    onChangeValue: c = F,
+    autoComplete: i,
+    dataFormat: f = a(),
+    viewFormat: o = a()
   } = p;
-  return /* @__PURE__ */ o(g, { ...a, children: r.map((i, e, u) => /* @__PURE__ */ d(f, { children: [
-    /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(x, { ...m, children: o.components.map((t, r, u) => /* @__PURE__ */ d(C, { children: [
+    /* @__PURE__ */ g(
       P,
       {
-        ...s(e),
-        component: i,
-        separator: t,
-        components: r,
-        value: m,
-        onChangeValue: l,
-        autoComplete: c
+        ...s(r),
+        key: t,
+        component: t,
+        dataFormat: f,
+        viewFormat: o,
+        value: l,
+        onChangeValue: c,
+        autoComplete: i
       }
     ),
-    u.length - 1 !== e && /* @__PURE__ */ o("span", { className: "component-date-control__separator", children: t })
+    u.length - 1 !== r && /* @__PURE__ */ e("span", { className: "component-date-control__separator", children: o.separator })
   ] })) });
 };
 export {
-  b as DateControl
+  w as DateControl
 };

package/dist/components/controls/date-control/types.d.ts

@@ -1,5 +1,14 @@
-export type DateComponent = "day" | "month" | "year";
+export type DateComponent = "day" | "month" | "year" | "fullYear";
 export type DateString = string;
+export type DateFormat = {
+    components: DateComponent[];
+    separator: string;
+};
 export type ParsedDate = Partial<Record<DateComponent, string>>;
-export declare function parseDateString(value: DateString | undefined, components: DateComponent[], separator: string): ParsedDate;
-export declare function formatDateString(value: ParsedDate, components: DateComponent[], separator: string): DateString;
+export declare function getDefaultFormat(): DateFormat;
+export declare function parseDateString(value: DateString | undefined, format: DateFormat): ParsedDate;
+export declare function formatDateString(value: ParsedDate, format: DateFormat): DateString;
+export declare function getComponentMaxLength(component: DateComponent): 4 | 2;
+export declare function getComponentMinValue(component: DateComponent): 1 | 0 | 1900;
+export declare function getComponentMaxValue(component: DateComponent): 12 | 31 | 99 | 3000;
+export declare function getComponentPlaceholder(component: DateComponent): "DD" | "MM" | "YY" | "YYYY";

package/dist/components/controls/date-control/types.js

@@ -1,20 +1,61 @@
-function o(t, n, r) {
-  const e = (t || "").split(r);
-  return n.reduce(
-    (a, i, c) => ({
-      ...a,
-      [i]: e[c]
+function i() {
+  return {
+    components: ["fullYear", "month", "day"],
+    separator: "-"
+  };
+}
+function l(e, r) {
+  const { separator: n, components: a } = r, u = (e || "").split(n);
+  return a.reduce(
+    (t, o, c) => ({
+      ...t,
+      [o]: u[c]
     }),
     {}
   );
 }
-function p(t, n, r) {
-  const e = /\D/g;
-  return n.map(function(a) {
-    return (t[a] || "").replace(e, "").substring(0, 2);
-  }).join(r);
+function f(e, r) {
+  const { separator: n, components: a } = r, u = /\D/g;
+  return a.map(function(t) {
+    return (e[t] || "").replace(u, "").substring(0, s(t));
+  }).join(n);
+}
+function s(e) {
+  return e === "fullYear" ? 4 : 2;
+}
+function p(e) {
+  return e === "year" ? 0 : e === "fullYear" ? 1900 : 1;
+}
+function g(e) {
+  switch (e) {
+    case "day":
+      return 31;
+    case "month":
+      return 12;
+    case "year":
+      return 99;
+    case "fullYear":
+      return 3e3;
+  }
+}
+function m(e) {
+  switch (e) {
+    case "day":
+      return "DD";
+    case "month":
+      return "MM";
+    case "year":
+      return "YY";
+    case "fullYear":
+      return "YYYY";
+  }
 }
 export {
-  p as formatDateString,
-  o as parseDateString
+  f as formatDateString,
+  s as getComponentMaxLength,
+  g as getComponentMaxValue,
+  p as getComponentMinValue,
+  m as getComponentPlaceholder,
+  i as getDefaultFormat,
+  l as parseDateString
 };

package/dist/components/controls/toggle-group-control/index.js

@@ -6,44 +6,51 @@ import '../../../assets/style4.css';import '../../../assets/style3.css';import '
 /* empty css                      */
 import { VisuallyHidden as N } from "../../../primitives/visually-hidden/index.js";
 import { normalizeOption as k } from "../../../types/options.js";
-import { BaseControl as x } from "../base-control/index.js";
-import { useBaseControlProps as P } from "../base-control/props.js";
-function M(p) {
-  const { baseProps: a, controlProps: m } = P(p, {
+import { BaseControl as v } from "../base-control/index.js";
+import { useBaseControlProps as x } from "../base-control/props.js";
+function M(a) {
+  const { baseProps: p, controlProps: m } = x(a, {
     className: "component-toggle-group-control"
   }), {
-    id: g,
+    id: u,
     value: n,
-    options: l,
+    options: t,
     multiple: r = !1,
-    onChange: u = s,
-    onChangeValue: t = s,
+    onChange: g = s,
+    onChangeValue: l = s,
     ...d
   } = m, _ = (o) => {
-    u(o);
+    g(o);
     const i = o.currentTarget.value;
-    r ? o.currentTarget.checked ? t([...n, i]) : t(n.filter((C) => C !== i)) : t(o.target.value);
-  }, h = (o) => r ? n.includes(o) : n === o, f = b(() => l.map(k), [l]);
-  return /* @__PURE__ */ e(x, { ...a, children: /* @__PURE__ */ e("div", { className: "component-toggle-group-control__options", children: f.map((o) => /* @__PURE__ */ c("label", { className: "component-toggle-group-control__option", children: [
-    /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(
-      "input",
-      {
-        className: "component-toggle-group-control__option__input",
-        type: r ? "checkbox" : "radio",
-        value: o.value,
-        name: g,
-        disabled: o.disabled,
-        checked: h(o.value),
-        onChange: _,
-        ...d
-      }
-    ) }),
-    /* @__PURE__ */ c("span", { className: "component-toggle-group-control__option__label", children: [
-      o.icon,
-      o.label
-    ] }),
-    o.description && /* @__PURE__ */ e("p", { className: "component-toggle-group-control__option__description", children: o.description })
-  ] })) }) });
+    r ? o.currentTarget.checked ? l([...n, i]) : l(n.filter((C) => C !== i)) : l(o.target.value);
+  }, h = (o) => r ? n.includes(o) : n === o, f = b(() => t.map(k), [t]);
+  return /* @__PURE__ */ e(v, { ...p, children: /* @__PURE__ */ e("div", { className: "component-toggle-group-control__options", children: f.map((o) => /* @__PURE__ */ c(
+    "label",
+    {
+      className: "component-toggle-group-control__option",
+      children: [
+        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(
+          "input",
+          {
+            className: "component-toggle-group-control__option__input",
+            type: r ? "checkbox" : "radio",
+            value: o.value,
+            name: u,
+            disabled: o.disabled,
+            checked: h(o.value),
+            onChange: _,
+            ...d
+          }
+        ) }),
+        /* @__PURE__ */ c("span", { className: "component-toggle-group-control__option__label", children: [
+          o.icon,
+          o.label
+        ] }),
+        o.description && /* @__PURE__ */ e("p", { className: "component-toggle-group-control__option__description", children: o.description })
+      ]
+    },
+    o.value
+  )) }) });
 }
 export {
   M as ToggleGroupControl

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wrdagency/blockout",
-	"version": "0.1.5",
+	"version": "0.1.6",
 	"description": "A React component library created by WRD.agency",
 	"type": "module",
 	"main": "dist/index.js",