@fangzsx/component-library 0.0.24 → 0.0.26

package/dist/colors-DvNGPCDl.js

@@ -0,0 +1,19 @@
+const c = "#1D252D", n = "#566376", s = "#E6EAED", o = "#F4F7F9", r = "#053E72", t = "#27A4E8", E = "#C8EDFE", F = "#E6F6FF", e = "#055C56", y = "#E6FEEE", a = "#8E3007", i = "#FFF9F0", g = "#800711", p = "#FFECEB", d = {
+  grey800: c,
+  grey600: n,
+  grey100: s,
+  grey50: o,
+  primary800: r,
+  primary500: t,
+  primary100: E,
+  primary50: F,
+  secondary800: e,
+  secondary50: y,
+  warning800: a,
+  warning50: i,
+  destructive800: g,
+  destructive50: p
+};
+export {
+  d as c
+};

package/dist/components/AppBarPublic/index.js

@@ -3,7 +3,7 @@ import { c as E } from "../../createSvgIcon-C0YrvByi.js";
 import { Stack as w, Popper as $, ClickAwayListener as D, Paper as U } from "@mui/material";
 import * as C from "react";
 import { useState as Z } from "react";
-import { C as G, B as b } from "../../index-BPIwhwks.js";
+import { C as G, B as b } from "../../index-CS-LWC7Z.js";
 import { g as V, a as A, c as l, P as r } from "../../generateUtilityClasses-BCID9NF1.js";
 import { u as H, s as B, c as T, a as h, m as v } from "../../DefaultPropsProvider-DVX_ssOt.js";
 import { c as I, a as F } from "../../useTimeout-DmOXPFt0.js";

package/dist/components/Banner/index.js

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
 import { ErrorOutline as d, CheckCircle as a, InfoOutlined as m, WarningAmber as h } from "@mui/icons-material";
 import { Card as g, Box as c, Typography as e } from "@mui/material";
-import { c as n } from "../../colors-BYtTt7gN.js";
+import { c as n } from "../../colors-DvNGPCDl.js";
 const y = {
   warning: { icon: h, color: "#f59e0b" },
   info: { icon: m, color: n.primary500 },

package/dist/components/Button/index.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
-import "../../colors-BYtTt7gN.js";
-import { B as p } from "../../index-BPIwhwks.js";
+import "../../colors-DvNGPCDl.js";
+import { B as p } from "../../index-CS-LWC7Z.js";
 export {
   p as Button
 };

package/dist/components/Dropdown/index.js

@@ -2,7 +2,7 @@ import { jsxs as d, jsx as r, Fragment as y } from "react/jsx-runtime";
 import { ExpandMoreOutlined as C } from "@mui/icons-material";
 import { Box as I, IconButton as v, Menu as M, MenuItem as k, ListItemIcon as w, ListItemText as j } from "@mui/material";
 import { useState as B } from "react";
-import { c as t } from "../../colors-BYtTt7gN.js";
+import { c as t } from "../../colors-DvNGPCDl.js";
 function L({
   items: h,
   activeItemId: e,

package/dist/components/FlatBanner/index.js

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as i } from "react/jsx-runtime";
 import { ErrorOutline as C, CheckCircle as f, InfoOutlineRounded as g, WarningAmberRounded as x } from "@mui/icons-material";
 import { Card as m, Box as e, Typography as t } from "@mui/material";
-import { c as o } from "../../colors-BYtTt7gN.js";
+import { c as o } from "../../colors-DvNGPCDl.js";
 const b = {
   warning: { titleColor: o.warning800, bgColor: o.warning50, icon: x, iconColor: "#f59e0b" },
   info: { titleColor: o.primary800, bgColor: o.primary50, icon: g, iconColor: "#f59e0b" },

package/dist/components/MediaCardWithAction/index.js

@@ -1,5 +1,5 @@
 import { jsx as d, jsxs as x } from "react/jsx-runtime";
-import { B as A } from "../../index-BPIwhwks.js";
+import { B as A } from "../../index-CS-LWC7Z.js";
 import * as u from "react";
 import { g as m, a as f, P as e } from "../../generateUtilityClasses-BCID9NF1.js";
 import { u as C, s as g, c as y, a as b } from "../../DefaultPropsProvider-DVX_ssOt.js";

package/dist/components/PromoCode/index.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+
+interface PromoCodeProps {
+    /** Current promo code value */
+    value: string;
+    /** Called when promo code input changes */
+    onChange: (value: string) => void;
+    /** Called when user submits the code */
+    onApply: () => void;
+    /** Called when user removes applied code */
+    onRemove: () => void;
+    /** Shows loader while validating */
+    isLoading?: boolean;
+    /** Whether a valid code is currently applied */
+    isApplied?: boolean;
+    /** e.g. "20% off" */
+    discountLabel?: string;
+    /** Error message to display (falsy = no error) */
+    errorMessage?: string;
+    /** Input placeholder text */
+    placeholder?: string;
+}
+declare const PromoCode: React.FC<PromoCodeProps>;
+export default PromoCode;

package/dist/components/PromoCode/index.js

@@ -0,0 +1,138 @@
+import { jsxs as B, jsx as o } from "react/jsx-runtime";
+import { Close as D, LocalOffer as I } from "@mui/icons-material";
+import { Box as c, Chip as S, IconButton as A, Typography as h, TextField as R, InputAdornment as T, CircularProgress as W, Button as k } from "@mui/material";
+import { useState as w, useRef as O, useEffect as P, useCallback as i } from "react";
+import { c as r } from "../../colors-DvNGPCDl.js";
+const M = ({
+  value: e,
+  onChange: m,
+  onApply: d,
+  onRemove: a,
+  isLoading: x = !1,
+  isApplied: y = !1,
+  discountLabel: f = "",
+  errorMessage: l = "",
+  placeholder: C = "Add promotional code"
+}) => {
+  const [s, p] = w(!1), u = O(null);
+  P(() => {
+    s && u.current?.focus();
+  }, [s]);
+  const t = i(() => {
+    e?.trim() && d?.();
+  }, [e, d]), b = i(
+    (n) => {
+      n.key === "Enter" && t();
+    },
+    [t]
+  ), g = i(() => {
+    if (!e?.trim()) {
+      p(!1);
+      return;
+    }
+    t();
+  }, [e, t]), z = i(() => {
+    a?.(), p(!1);
+  }, [a]);
+  return y ? /* @__PURE__ */ B(c, { mt: 0.5, children: [
+    /* @__PURE__ */ o(
+      S,
+      {
+        icon: /* @__PURE__ */ o(I, { sx: { fontSize: 16 } }),
+        label: e,
+        onDelete: z,
+        deleteIcon: /* @__PURE__ */ o(A, { size: "small", sx: { p: 0.25 }, children: /* @__PURE__ */ o(D, { sx: { fontSize: 16 } }) }),
+        sx: {
+          bgcolor: r.primary50,
+          color: r.primary500,
+          fontWeight: 600,
+          fontSize: "0.875rem",
+          px: 1,
+          py: 2.5,
+          borderRadius: "5px",
+          "& .MuiChip-icon": { color: r.primary500 },
+          "& .MuiChip-deleteIcon": { color: r.primary500, ml: 1.5 },
+          "&:hover": { bgcolor: r.primary100 }
+        }
+      }
+    ),
+    f && /* @__PURE__ */ o(
+      h,
+      {
+        variant: "caption",
+        fontWeight: 500,
+        color: "text.secondary",
+        display: "block",
+        mt: 0.5,
+        children: f
+      }
+    )
+  ] }) : s ? /* @__PURE__ */ o(c, { mt: 2, children: /* @__PURE__ */ o(
+    R,
+    {
+      inputRef: u,
+      value: e ?? "",
+      placeholder: C,
+      onChange: (n) => m?.(n.target.value),
+      onBlur: g,
+      onKeyDown: b,
+      error: !!l,
+      helperText: l || void 0,
+      size: "small",
+      fullWidth: !0,
+      FormHelperTextProps: { sx: { fontSize: "0.625rem", ml: 0 } },
+      InputProps: {
+        endAdornment: /* @__PURE__ */ o(T, { position: "end", children: x ? /* @__PURE__ */ o(W, { size: 20 }) : e?.trim() && !l && /* @__PURE__ */ o(
+          h,
+          {
+            component: "span",
+            fontWeight: 700,
+            color: "primary",
+            sx: { cursor: "pointer", fontSize: "0.875rem", color: r.primary500 },
+            onMouseDown: (n) => {
+              n.preventDefault(), t();
+            },
+            children: "Apply"
+          }
+        ) }),
+        sx: {
+          borderRadius: "5px",
+          height: 40,
+          bgcolor: "white",
+          borderColor: "#C4CBD4"
+        }
+      },
+      sx: {
+        "& .MuiOutlinedInput-root": {
+          "& fieldset": { borderColor: "#C4CBD4" }
+        }
+      }
+    }
+  ) }) : /* @__PURE__ */ o(c, { mt: 2, mb: 2, children: /* @__PURE__ */ o(
+    k,
+    {
+      variant: "text",
+      onClick: () => {
+        m?.(""), p(!0);
+      },
+      sx: {
+        bgcolor: r.grey50,
+        color: r.grey600,
+        fontWeight: 600,
+        fontSize: "14px",
+        textTransform: "none",
+        borderRadius: "5px",
+        px: 1.5,
+        py: 1.25,
+        "&:hover": {
+          bgcolor: r.primary50,
+          color: r.primary500
+        }
+      },
+      children: "Add promo code"
+    }
+  ) });
+};
+export {
+  M as default
+};

package/dist/{index-BPIwhwks.js → index-CS-LWC7Z.js}

@@ -1,5 +1,5 @@
 import { jsx as c, jsxs as U } from "react/jsx-runtime";
-import { c as P } from "./colors-BYtTt7gN.js";
+import { c as P } from "./colors-DvNGPCDl.js";
 import * as k from "react";
 import { g as G, a as _, c as i, P as t } from "./generateUtilityClasses-BCID9NF1.js";
 import { u as A, s as f, c as R, a as H, m as O, b as so, r as lo } from "./DefaultPropsProvider-DVX_ssOt.js";

package/dist/main.js

@@ -1,6 +1,6 @@
 import { AppBarPublic as e } from "./components/AppBarPublic/index.js";
 import { Banner as p } from "./components/Banner/index.js";
-import { B as f } from "./index-BPIwhwks.js";
+import { B as f } from "./index-CS-LWC7Z.js";
 import { CheckBox as a } from "./components/Checkbox/index.js";
 import { ScrollableDialog as i } from "./components/Dialog/index.js";
 import { CheckboxGroup as B } from "./components/CheckboxGroup/index.js";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fangzsx/component-library",
   "author": "Jay Gilbert Garzon",
   "private": false,
-  "version": "0.0.24",
+  "version": "0.0.26",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/colors-BYtTt7gN.js

@@ -1,18 +0,0 @@
-const c = "#1D252D", n = "#566376", s = "#E6EAED", o = "#F4F7F9", t = "#053E72", r = "#27A4E8", E = "#E6F6FF", F = "#055C56", e = "#E6FEEE", y = "#8E3007", a = "#FFF9F0", i = "#800711", g = "#FFECEB", d = {
-  grey800: c,
-  grey600: n,
-  grey100: s,
-  grey50: o,
-  primary800: t,
-  primary500: r,
-  primary50: E,
-  secondary800: F,
-  secondary50: e,
-  warning800: y,
-  warning50: a,
-  destructive800: i,
-  destructive50: g
-};
-export {
-  d as c
-};