@kbgarcia8/react-dynamic-form 1.0.0

package/dist/react-dynamic-form.es.js

@@ -0,0 +1,654 @@
+import { jsx as e, jsxs as u, Fragment as Q } from "react/jsx-runtime";
+import W, { forwardRef as V, createContext as X, useState as Y, useContext as Z } from "react";
+import c, { ThemeProvider as _ } from "styled-components";
+const t = {
+  fonts: {
+    secondary: "Raleway",
+    tertiary: "Lato",
+    fallback: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
+  },
+  fontWeight: {
+    light: 300,
+    medium: 500,
+    bold: 700,
+    bolder: 900
+  },
+  fontSize: {
+    xsmall: "0.75rem"
+  },
+  spacing: {
+    xxxsmall: "0.25rem",
+    xxsmall: "0.375rem",
+    xsmall: "0.5rem",
+    small: "0.75rem",
+    medium: "1.25rem"
+  },
+  borderRadius: {
+    xsmall: "0.125rem",
+    small: "0.25rem",
+    xlarge: "2rem"
+  },
+  borderThickness: {
+    thin: "0.0625rem",
+    light: "0.125rem"
+  }
+}, ee = c.button`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${({ theme: n }) => n.colors.blue || "blue"};
+    color: ${({ theme: n }) => n.colors.bg || "white"};
+    border: ${t.borderThickness.light} solid ${({ theme: n }) => n.colors.text || "black"};
+    border-radius: ${t.borderRadius.xlarge};
+    padding: ${t.spacing.xxxsmall} ${t.spacing.small};
+    margin: 0.125rem;
+    width: auto;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+
+    &:hover {
+        background-color: lightblue;
+        border: ${t.borderThickness.light} solid gray;
+    }
+
+    & .button-icon-text-space {
+        max-width: 100%;
+    }
+    
+    & .button-icon-text-space svg {
+        max-width: 100%;
+    }
+`, te = c.div`
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+`, ne = c.img`
+    maxwidth: 100%;
+`, ae = c.span`
+    font-size: ${t.fontSize.xsmall};
+    font-weight: ${t.fontWeight.medium};
+    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`, x = ({
+  onClick: n,
+  id: o,
+  buttonType: i,
+  source: l,
+  svg: r,
+  alt: f = "alt-button-icon",
+  text: d = "",
+  className: s = "",
+  dataAttributes: b = {}
+}) => /* @__PURE__ */ e(
+  ee,
+  {
+    onClick: n,
+    id: o,
+    type: i,
+    className: s,
+    ...b,
+    children: /* @__PURE__ */ u(te, { className: "button-icon-text-space", children: [
+      l ? /* @__PURE__ */ e(ne, { src: l, alt: f }) : r || "",
+      d && /* @__PURE__ */ e(ae, { id: o, children: d })
+    ] })
+  }
+), oe = c.div`
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    width: 100%;
+    margin-bottom: ${t.spacing.small};
+`, le = c.div`
+    display: flex;
+    gap: ${t.spacing.xsmall};
+    width: auto;
+    height: auto;
+`, ie = c.label`
+    display: flex;
+    align-items: center;
+    justify-content:center;
+    height: auto;
+    flex-direction:  ${(n) => n.$labelFlexDirection || "column"};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
+    font-weight: ${t.fontWeight.bold};
+    gap: ${t.spacing.xxsmall};
+    
+    & .label-icon-container img,
+    & .label-icon-container svg {
+        max-width: 100%;
+        height: auto;
+        object-fit: contain;
+    }
+`, se = c.span`
+    font-weight: ${t.fontWeight.bolder};
+`, ce = c.div`
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+`, re = c.span`
+    font-weight: ${t.fontWeight.light};
+`, P = ({
+  htmlFor: n,
+  textLabel: o,
+  additionalInfo: i,
+  $labelFlexDirection: l,
+  source: r,
+  svg: f,
+  className: d,
+  children: s
+}) => /* @__PURE__ */ u(ie, { htmlFor: n, className: d, $labelFlexDirection: l, children: [
+  (r || f) && /* @__PURE__ */ e(ce, { className: "label-icon-container", children: r ? /* @__PURE__ */ e("img", { src: r, alt: `${n}-label-icon` }) : f || "" }),
+  /* @__PURE__ */ e(se, { className: "main-label", children: o }),
+  i && /* @__PURE__ */ e(re, { className: "additional-info", children: i }),
+  s
+] }), q = c.input`
+    display: flex;
+    place-content: center;
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
+    line-height: 1.75;
+    padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
+    max-width: 100%;
+    height: auto;
+    background-color: #FFFFFF;
+    outline: none;
+    border: ${t.borderThickness.thin} solid #000000;
+    border-radius: ${t.borderRadius.xsmall};
+
+    &:focus{
+        border: ${t.borderThickness.thin} solid ${({ theme: n }) => n.colors.teal};
+    }
+`, de = c.textarea`
+    display: flex;
+    place-content: center;
+    border: ${t.borderThickness.light} solid ${({ theme: n }) => n.colors.text};
+    border-radius: ${t.borderRadius.small};
+    outline: none;
+    line-height: ${t.spacing.small};
+    padding: ${t.spacing.xxxsmall};
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
+    max-width: 100%;
+    resize: none;
+    overflow-y: auto;
+`, j = V((n, o) => {
+  const { type: i, id: l, onChange: r, isRequired: f, dataAttributes: d, disabled: s, className: b } = n;
+  if (i === "textarea") {
+    const { rows: C = 5, cols: N = 30, value: T, ...S } = n;
+    return /* @__PURE__ */ e(
+      de,
+      {
+        id: l,
+        onChange: r,
+        value: T,
+        rows: C,
+        cols: N,
+        ...d,
+        className: b,
+        ref: o,
+        disabled: s,
+        required: f
+      }
+    );
+  }
+  if (i === "radio" || i === "checkbox") {
+    const { checked: C, ...N } = n;
+    return /* @__PURE__ */ e(
+      q,
+      {
+        ref: o,
+        type: "checkbox",
+        id: l,
+        checked: C,
+        onChange: r,
+        disabled: s,
+        className: b,
+        ...d
+      }
+    );
+  }
+  const $ = n, { value: p, pattern: g, placeholderText: k, ...F } = $;
+  return /* @__PURE__ */ e(
+    q,
+    {
+      id: l,
+      name: l,
+      placeholder: k,
+      onChange: r,
+      value: p,
+      type: i,
+      required: f,
+      ...d,
+      className: b,
+      ref: o,
+      disabled: s,
+      pattern: g
+    }
+  );
+}), A = (n) => {
+  const {
+    className: o,
+    type: i,
+    id: l,
+    textLabel: r,
+    additionalInfo: f,
+    $labelFlexDirection: d,
+    svg: s,
+    labelClass: b,
+    onChange: $,
+    isRequired: p,
+    dataAttributes: g,
+    inputClass: k,
+    ref: F,
+    disabled: C,
+    isEditable: N,
+    editIcon: T,
+    onClickEdit: S,
+    deleteIcon: L,
+    onClickDelete: R,
+    idx: z,
+    children: B
+  } = n;
+  return /* @__PURE__ */ u(oe, { className: `${o} ${l.replace("#", "")}-label-input-container`, children: [
+    i !== "radio" && i !== "checkbox" && /* @__PURE__ */ e(P, { htmlFor: l, textLabel: r, additionalInfo: f, $labelFlexDirection: d, svg: s, className: b }),
+    i !== "radio" && i !== "checkbox" && i === "textarea" && (() => {
+      const { rows: w = 5, cols: E = 30, value: D, ...a } = n;
+      return /* @__PURE__ */ e(
+        j,
+        {
+          id: l,
+          name: l,
+          type: "textarea",
+          isRequired: p,
+          onChange: $,
+          value: D,
+          rows: w,
+          cols: E,
+          ...g,
+          className: k,
+          ref: F,
+          disabled: C
+        }
+      );
+    })(),
+    i !== "radio" && i !== "checkbox" && i !== "textarea" && (() => {
+      const w = n, { value: E, pattern: D, placeholderText: a, ...y } = w;
+      return /* @__PURE__ */ e(
+        j,
+        {
+          id: l,
+          name: l,
+          placeholderText: a,
+          onChange: $,
+          value: E,
+          type: i,
+          isRequired: p,
+          ...g,
+          className: k,
+          ref: F,
+          disabled: C,
+          pattern: D
+        }
+      );
+    })(),
+    (i === "radio" || i === "checkbox") && (() => {
+      const { checked: w, ...E } = n;
+      return /* @__PURE__ */ u(Q, { children: [
+        /* @__PURE__ */ e(
+          j,
+          {
+            ref: F,
+            type: "checkbox",
+            name: l,
+            id: l,
+            isRequired: p,
+            checked: w,
+            onChange: $,
+            disabled: C,
+            className: k,
+            ...g
+          }
+        ),
+        /* @__PURE__ */ e(P, { htmlFor: l, textLabel: r, additionalInfo: f, $labelFlexDirection: d, svg: s, className: b })
+      ] });
+    })(),
+    "// * Radio inputs usually have labels next to them",
+    N && /* @__PURE__ */ u(le, { className: "input-edit-buttons", children: [
+      /* @__PURE__ */ e(x, { id: `editable-${l}-edit-btn`, svg: T, buttonType: "button", onClick: S, className: `edit-radio-${z}`, dataAttributes: g }),
+      /* @__PURE__ */ e(x, { id: `editable-${l}-delete-btn`, svg: L, buttonType: "button", onClick: R, className: `delete-radio-${z}`, dataAttributes: g })
+    ] }),
+    B
+  ] });
+}, me = c.fieldset`
+    padding: 0;
+    height: auto;
+    width: 100%;
+`, be = c.legend`
+    font-size: ${t.spacing.medium};
+    font-weight: 500;
+    margin: 0 auto ${t.spacing.small} auto;
+    text-align: center;
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+`, he = c.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    margin-bottom: ${t.spacing.small};
+`, fe = c.div`
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+`, I = ({
+  legend: n,
+  idx: o,
+  editableInformation: i,
+  onChangeOfEditableOption: l,
+  onClickSaveEdit: r,
+  onClickCancelEdit: f,
+  onClickDeleteEntry: d
+}) => /* @__PURE__ */ u(me, { className: "editable-selection-fieldset", children: [
+  /* @__PURE__ */ e(be, { children: `${n} ${o + 1}` }),
+  i.map((s, b) => /* @__PURE__ */ e(he, { className: "editable-selection-container", children: /* @__PURE__ */ e(
+    j,
+    {
+      id: `editable-selection-${b}`,
+      name: `editable-selection-${b}`,
+      placeholderText: s.name.charAt(0).toUpperCase() + s.name.slice(1),
+      onChange: l,
+      value: s.info,
+      type: s.type,
+      isRequired: !0,
+      className: "editable-selection",
+      dataAttributes: {
+        "data-index": b,
+        //* should be idx to correspond to radio button index and not with input increment
+        "data-key": s.info
+      }
+    }
+  ) }, `${s.name}-${b}`)),
+  /* @__PURE__ */ u(fe, { className: "editable-selection-button-space", children: [
+    /* @__PURE__ */ e(x, { id: `editable-selection-${o}-submit`, buttonType: "submit", text: "Save", onClick: r, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
+    /* @__PURE__ */ e(x, { id: `editable-selection-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: f, className: "editable-selection-btn", dataAttributes: { "data-index": o } }),
+    /* @__PURE__ */ e(x, { id: `editable-selection-${o}-delete`, buttonType: "button", text: "Delete", onClick: d, className: "editable-selection-btn", dataAttributes: { "data-index": o } })
+  ] })
+] }), ue = c.div`
+    display: flex;
+    justify-content: space-between;
+    max-width: 100%;
+`, ge = ({
+  id: n,
+  hasSubmit: o,
+  submitText: i,
+  handleSubmit: l,
+  hasEdit: r,
+  editText: f,
+  handleEdit: d,
+  hasCancel: s,
+  cancelText: b,
+  handleCancel: $,
+  hasDelete: p,
+  deleteText: g,
+  handleDelete: k
+}) => /* @__PURE__ */ u(ue, { className: "form-main-button-container", children: [
+  o && /* @__PURE__ */ e(x, { id: `form-${n}-submit`, buttonType: "submit", text: i ?? "Submit", onClick: l, className: "submit-form-btn" }),
+  r && /* @__PURE__ */ e(x, { id: `form-${n}-edit`, buttonType: "button", text: f ?? "Edit", onClick: d, className: "edit-form-btn" }),
+  s && /* @__PURE__ */ e(x, { id: `form-${n}-cancel`, buttonType: "button", text: b ?? "Cancel", onClick: $, className: "cancel-form-btn" }),
+  p && /* @__PURE__ */ e(x, { id: `form-${n}-delete`, buttonType: "button", text: g ?? "Delete", onClick: k, className: "delete-form-btn" })
+] }), M = c.legend`
+    font-size: ${t.spacing.medium};
+    font-weight: 500;
+    margin-bottom: ${t.spacing.small};
+    width: auto;
+    text-align: center;
+    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
+`, U = c.fieldset`
+    padding: 0;
+    height: auto;
+    width: 100%;
+`, H = c.div`
+    padding: ${t.spacing.small};
+    height: auto;
+    width: 100%;
+`, G = c.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: auto;
+    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
+    font-size: ${t.fontSize.xsmall};
+    font-weight: ${t.fontWeight.bold};
+`, xe = c.form`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+`, J = c.div`
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+`, $e = c.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+`, Fe = ({
+  fieldsets: n = null,
+  //* if a form has differrent fieldsets
+  legendText: o,
+  //* if form has no fieldsets, depends if you have fieldset for solo form
+  isExpandable: i = !1,
+  //* if form has no fieldsets this is default to false - to add inputs
+  id: l,
+  formInputs: r,
+  //* object that contains the input fields information to make it reusable
+  labelAndInputContainerClass: f,
+  labelClass: d,
+  inputClass: s,
+  handleEditableInputEntryChange: b,
+  //* handles change on editable inputs
+  handleAddingInputEntry: $,
+  hasSubmit: p = !1,
+  hasCancel: g = !1,
+  hasDelete: k = !1,
+  hasEdit: F = !1,
+  submitText: C,
+  handleSubmitForm: N,
+  handleSubmit: T,
+  cancelText: S,
+  handleCancel: L,
+  deleteText: R,
+  handleDelete: z,
+  editText: B,
+  handleEdit: w,
+  className: E,
+  children: D
+  //* if there are nodes to be inserted after submit/edit/cancel buttons usually in login or signup forms
+}) => /* @__PURE__ */ u(xe, { id: `${l}-form`, className: E, onSubmit: N, children: [
+  n ? n.map((a, y) => /* @__PURE__ */ u(H, { children: [
+    /* @__PURE__ */ u(U, { id: `${l}-form-fieldset-${y}`, className: "form-fieldset", children: [
+      a.legend && /* @__PURE__ */ e(M, { children: a.legend }),
+      a.inputs.length !== 0 ? a.inputs.map((h, v) => /* @__PURE__ */ u(W.Fragment, { children: [
+        h.type === "textarea" && /* @__PURE__ */ e(
+          A,
+          {
+            ...h,
+            id: h.id ?? `${a.legend}-input`,
+            labelClass: d,
+            inputClass: s,
+            idx: v
+          }
+        ),
+        (h.type === "radio" || h.type === "checkbox") && /* @__PURE__ */ e(
+          A,
+          {
+            ...h,
+            id: h.id ?? `${a.legend}-input`,
+            labelClass: d,
+            inputClass: s,
+            idx: v
+          }
+        ),
+        h.type !== "textarea" && h.type !== "radio" && h.type !== "checkbox" && /* @__PURE__ */ e(
+          A,
+          {
+            ...h,
+            id: h.id ?? `${a.legend}-input`,
+            labelClass: d,
+            inputClass: s,
+            idx: v
+          }
+        ),
+        "//* For editable data e.g. address entry, education entry",
+        h.editable && h.editing && /* @__PURE__ */ e(
+          I,
+          {
+            legend: `${a.legend} ${v + 1}`,
+            idx: v,
+            editableInformation: h?.editableInformation,
+            onChangeOfEditableOption: b,
+            onClickSaveEdit: h?.onClickSave,
+            onClickCancelEdit: h?.onClickCancel,
+            onClickDeleteEntry: h?.onClickDelete
+          }
+        )
+      ] }, `form-${l}-${v}`)) : a.expandable ? /* @__PURE__ */ e(G, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
+    ] }),
+    a.expandable && /* @__PURE__ */ e(J, { className: "add-input-button-space", children: /* @__PURE__ */ e(x, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
+  ] }, `${a.legend}-${y}`)) : /* @__PURE__ */ u(H, { children: [
+    /* @__PURE__ */ u(U, { id: `${l}-form-fieldset`, className: "form-fieldset", children: [
+      o && /* @__PURE__ */ e(M, { children: o }),
+      r.length !== 0 ? r.map((a, y) => /* @__PURE__ */ u(W.Fragment, { children: [
+        a.type === "textarea" && /* @__PURE__ */ e(
+          A,
+          {
+            ...a,
+            id: a.id ?? `${o}-input`,
+            labelClass: d,
+            inputClass: s,
+            idx: y
+          }
+        ),
+        (a.type === "radio" || a.type === "checkbox") && /* @__PURE__ */ e(
+          A,
+          {
+            ...a,
+            id: a.id ?? `${o}-input`,
+            labelClass: d,
+            inputClass: s,
+            idx: y
+          }
+        ),
+        a.type !== "textarea" && a.type !== "radio" && a.type !== "checkbox" && /* @__PURE__ */ e(
+          A,
+          {
+            ...a,
+            id: a.id ?? `${o}-input`,
+            labelClass: d,
+            inputClass: s,
+            idx: y
+          }
+        ),
+        "//*For editable data e.g. address entry, education entry",
+        a.editable && a.editing && /* @__PURE__ */ e(
+          I,
+          {
+            legend: `${o} ${y + 1}`,
+            idx: y,
+            editableInformation: a?.editableInformation,
+            onChangeOfEditableOption: b,
+            onClickSaveEdit: a?.onClickSave,
+            onClickCancelEdit: a?.onClickEdit,
+            onClickDeleteEntry: a?.onClickDelete
+          }
+        )
+      ] }, `form-${l}-${y}`)) : i ? /* @__PURE__ */ e(G, { children: `No entry yet on ${o}. Please click "+" button to add` }) : ""
+    ] }),
+    i && /* @__PURE__ */ e(J, { className: "add-input-button-space", children: /* @__PURE__ */ e(x, { id: `expand-${o}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
+  ] }),
+  /* @__PURE__ */ e(
+    ge,
+    {
+      id: l,
+      hasSubmit: p,
+      submitText: C,
+      handleSubmit: T,
+      hasEdit: F,
+      editText: B,
+      handleEdit: w,
+      hasCancel: g,
+      cancelText: S,
+      handleCancel: L,
+      hasDelete: k,
+      deleteText: R,
+      handleDelete: z
+    }
+  ),
+  /* @__PURE__ */ e($e, { className: "children-container", children: D })
+] }), ye = (n) => {
+  const o = /^#([0-9A-Fa-f]{3}){1,2}$/, i = /^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;
+  return o.test(n) || i.test(n) || CSS.supports("color", n);
+}, m = (n) => {
+  if (!ye(n)) throw new Error(`Invalid color: ${n}`);
+  return n;
+}, Ne = {
+  mobile: "320px",
+  //Small iPhone SE & Medium: iPhone 12-15
+  tablet: "768px",
+  //iPad 
+  desktop: "992px",
+  //Macbook 13" (1280x800)
+  largeDesktop: "1200px",
+  largerDesktop: "1400px"
+}, O = {
+  name: "light",
+  colors: {
+    text: m("#333446"),
+    bg: m("#EEEEEE"),
+    blue: m("#7F8CAA"),
+    blue2: m("#80A6FF"),
+    teal: m("#5b8280ff"),
+    teal2: m("#AEEAE7"),
+    gray: m("#AEAEAE"),
+    information: m("#202234"),
+    success: m("#123524"),
+    warning: m("#F2C265"),
+    error: m("#990000")
+  }
+}, pe = {
+  name: "dark",
+  colors: {
+    bg: m("#333446"),
+    text: m("#EEEEEE"),
+    blue: m("#80A6FF"),
+    blue2: m("#7F8CAA"),
+    teal: m("#AEEAE7"),
+    teal2: m("#5b8280ff"),
+    gray: m("#D0D0DD"),
+    information: m("#C9E6F0"),
+    success: m("#9EDF9C"),
+    warning: m("#FCFFC1"),
+    error: m("#FAD4D4")
+  }
+}, K = X(void 0), Ee = ({ children: n }) => {
+  const [o, i] = Y(O), l = () => {
+    i((r) => r === O ? pe : O);
+  };
+  return /* @__PURE__ */ e(K.Provider, { value: { currentTheme: o, toggleTheme: l }, children: /* @__PURE__ */ e(_, { theme: o, children: n }) });
+}, ve = () => Z(K);
+export {
+  Fe as DynamicForm,
+  K as ThemeContext,
+  Ee as ThemeContextProvider,
+  Ne as breakpoints,
+  pe as darkTheme,
+  O as lightTheme,
+  ve as useTheme
+};

package/dist/styles/theme.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from "../type/constantTypes";
+export declare const breakpoints: Record<string, string>;
+export declare const lightTheme: Theme;
+export declare const darkTheme: Theme;
+//# sourceMappingURL=theme.d.ts.map

package/dist/styles/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/styles/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAGlD,eAAO,MAAM,WAAW,EAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAM7C,CAAA;AAED,eAAO,MAAM,UAAU,EAAC,KAevB,CAAA;AAED,eAAO,MAAM,SAAS,EAAC,KAetB,CAAA"}

package/dist/styles/variables.d.ts

@@ -0,0 +1,3 @@
+import type { constants } from '../type/constantTypes';
+export declare const v: constants;
+//# sourceMappingURL=variables.d.ts.map

package/dist/styles/variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../../src/styles/variables.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD,eAAO,MAAM,CAAC,EAAC,SA6Dd,CAAC"}

package/dist/type/constantTypes.d.ts

@@ -0,0 +1,30 @@
+import type { ColorString } from "../utils/utils";
+export interface constants {
+    fonts: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        additional: string;
+        fallback: string;
+    };
+    fontWeight: {
+        light: number;
+        regular: number;
+        medium: number;
+        bold: number;
+        bolder: number;
+    };
+    fontSize: Record<string, string>;
+    spacing: Record<string, string>;
+    borderRadius: Record<string, string>;
+    borderThickness: Record<string, string>;
+    width: Record<string, string>;
+}
+export interface ThemeColors {
+    [key: string]: ColorString;
+}
+export interface Theme {
+    name: 'light' | 'dark' | string;
+    colors: ThemeColors;
+}
+//# sourceMappingURL=constantTypes.d.ts.map

package/dist/type/constantTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constantTypes.d.ts","sourceRoot":"","sources":["../../src/type/constantTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE;QACL,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAAC;CAC5B;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,WAAW,CAAC;CACrB"}