@snacky/ui 0.4.3 → 0.4.5

package/dist/index.cjs

@@ -284,192 +284,6 @@ function CopyField({ value, onCopy, className }) {
   ] });
 }
 
-// src/components/Input/ChatInput.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function ChatInput({ value, onChange, onSend, sendIcon, className, placeholder = "Write your message here", ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("snacky-chatfield", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      "input",
-      {
-        className: "snacky-chatfield__input",
-        value,
-        placeholder,
-        onChange: (e) => onChange(e.target.value),
-        onKeyDown: (e) => e.key === "Enter" && value && onSend(),
-        ...rest
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      "button",
-      {
-        type: "button",
-        className: cx("snacky-chatfield__send", value && "snacky-chatfield__send--active"),
-        onClick: onSend,
-        disabled: !value,
-        "aria-label": "Send",
-        children: sendIcon ?? "\u27A4"
-      }
-    )
-  ] });
-}
-
-// src/components/Input/AddressResult.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function AddressResult({ icon: icon3, title, subtitle, onClick, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { type: "button", className: cx("snacky-address-result", className), onClick, children: [
-    icon3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "snacky-address-result__icon", children: icon3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "snacky-address-result__title", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "snacky-address-result__subtitle", children: subtitle })
-    ] })
-  ] });
-}
-
-// src/components/Chips/ProductChip.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function ProductChip({ label, selected, thumbnail, onClick, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    "button",
-    {
-      type: "button",
-      className: cx("snacky-chip", selected && "snacky-chip--selected", className),
-      "aria-pressed": selected,
-      onClick,
-      ...rest,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "snacky-chip__thumb", children: thumbnail }),
-        label
-      ]
-    }
-  );
-}
-
-// src/components/Chips/FilterChip.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function FilterChip({ label, selected, onClick, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    "button",
-    {
-      type: "button",
-      className: cx("snacky-chip", selected && "snacky-chip--selected", className),
-      "aria-pressed": selected,
-      onClick,
-      ...rest,
-      children: label
-    }
-  );
-}
-
-// src/components/RadioButton/RadioButton.tsx
-var import_react8 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function RadioOption({ label, selected, onClick, disabled, name, className }) {
-  const id = (0, import_react8.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "label",
-    {
-      htmlFor: id,
-      className: cx("snacky-radio-option", disabled && "snacky-radio-option--disabled", className),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "input",
-          {
-            id,
-            type: "radio",
-            className: "snacky-radio",
-            name,
-            checked: selected,
-            disabled,
-            onChange: onClick
-          }
-        ),
-        label
-      ]
-    }
-  );
-}
-
-// src/components/Checkbox/Checkbox.tsx
-var import_react9 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function Checkbox({ label, checked, onChange, disabled, className }) {
-  const id = (0, import_react9.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { htmlFor: id, className: cx("snacky-checkbox-option", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      "input",
-      {
-        id,
-        type: "checkbox",
-        className: "snacky-checkbox",
-        checked,
-        disabled,
-        onChange: (e) => onChange(e.target.checked)
-      }
-    ),
-    label
-  ] });
-}
-
-// src/components/Toggle/Toggle.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function Toggle({ checked, onChange, disabled, ariaLabel = "Toggle", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    "button",
-    {
-      type: "button",
-      role: "switch",
-      "aria-checked": checked,
-      "aria-label": ariaLabel,
-      disabled,
-      className: cx("snacky-toggle", checked && "snacky-toggle--on", className),
-      onClick: () => onChange(!checked),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "snacky-toggle__track" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "snacky-toggle__thumb" })
-      ]
-    }
-  );
-}
-
-// src/components/Navbar/Navbar.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function NavBar({ items, selected, onSelect, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { className: cx("snacky-navbar", className), children: items.map((item, i) => {
-    const active = i === selected;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      "button",
-      {
-        type: "button",
-        className: cx("snacky-navbar__item", active && "snacky-navbar__item--active"),
-        "aria-current": active ? "page" : void 0,
-        onClick: () => onSelect(i),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "snacky-navbar__icon", children: active && item.activeIcon ? item.activeIcon : item.icon }),
-          item.label
-        ]
-      },
-      item.label
-    );
-  }) });
-}
-
-// src/components/Tab/Tab.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function TabRow({ tabs, selected, onSelect, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cx("snacky-tabrow", className), role: "tablist", children: tabs.map((tab, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    "button",
-    {
-      type: "button",
-      role: "tab",
-      "aria-selected": i === selected,
-      className: cx("snacky-tab", i === selected && "snacky-tab--active"),
-      onClick: () => onSelect(i),
-      children: tab
-    },
-    tab
-  )) });
-}
-
 // src/icons/outline.tsx
 var outline_exports = {};
 __export(outline_exports, {
@@ -516,10 +330,10 @@ __export(outline_exports, {
   truck: () => truck,
   unsent: () => unsent
 });
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function icon(viewBox, paths) {
   return function SnackyIcon({ width = viewBox, height = viewBox, color = "currentColor", ...rest }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width, height, viewBox: `0 0 ${viewBox} ${viewBox}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: paths.map(([d, fillRule], i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width, height, viewBox: `0 0 ${viewBox} ${viewBox}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: paths.map(([d, fillRule], i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "path",
       {
         d,
@@ -693,6 +507,192 @@ var unsent = icon(24, [
   ["M11.9999 7C11.7788 7 11.5669 7.0878 11.4106 7.24408C11.2543 7.40036 11.1665 7.61232 11.1665 7.83333V11.4375L8.35735 13.1975C8.16949 13.3148 8.03594 13.502 7.98609 13.7179C7.93624 13.9337 7.97416 14.1605 8.09152 14.3483C8.20888 14.5362 8.39606 14.6697 8.61188 14.7196C8.8277 14.7694 9.05449 14.7315 9.24235 14.6142L12.4424 12.6142C12.5633 12.5384 12.6627 12.4329 12.7311 12.3077C12.7996 12.1825 12.8347 12.0418 12.8332 11.8992V7.83333C12.8332 7.61232 12.7454 7.40036 12.5891 7.24408C12.4328 7.0878 12.2209 7 11.9999 7Z", "nonzero"]
 ]);
 
+// src/components/Input/ChatInput.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ChatInput({ value, onChange, onSend, sendIcon, className, placeholder = "Write your message here", ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("snacky-chatfield", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "input",
+      {
+        className: "snacky-chatfield__input",
+        value,
+        placeholder,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: (e) => e.key === "Enter" && value && onSend(),
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        type: "button",
+        className: cx("snacky-chatfield__send", value && "snacky-chatfield__send--active"),
+        onClick: onSend,
+        disabled: !value,
+        "aria-label": "Send",
+        children: sendIcon ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(send, { width: 20, height: 20 })
+      }
+    )
+  ] });
+}
+
+// src/components/Input/AddressResult.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function AddressResult({ icon: icon3, title, subtitle, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", className: cx("snacky-address-result", className), onClick, children: [
+    icon3 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "snacky-address-result__icon", children: icon3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "snacky-address-result__title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "snacky-address-result__subtitle", children: subtitle })
+    ] })
+  ] });
+}
+
+// src/components/Chips/ProductChip.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ProductChip({ label, selected, thumbnail, onClick, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: cx("snacky-chip", selected && "snacky-chip--selected", className),
+      "aria-pressed": selected,
+      onClick,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "snacky-chip__thumb", children: thumbnail }),
+        label
+      ]
+    }
+  );
+}
+
+// src/components/Chips/FilterChip.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function FilterChip({ label, selected, onClick, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "button",
+    {
+      type: "button",
+      className: cx("snacky-chip", selected && "snacky-chip--selected", className),
+      "aria-pressed": selected,
+      onClick,
+      ...rest,
+      children: label
+    }
+  );
+}
+
+// src/components/RadioButton/RadioButton.tsx
+var import_react8 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function RadioOption({ label, selected, onClick, disabled, name, className }) {
+  const id = (0, import_react8.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "label",
+    {
+      htmlFor: id,
+      className: cx("snacky-radio-option", disabled && "snacky-radio-option--disabled", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "input",
+          {
+            id,
+            type: "radio",
+            className: "snacky-radio",
+            name,
+            checked: selected,
+            disabled,
+            onChange: onClick
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react9 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Checkbox({ label, checked, onChange, disabled, className }) {
+  const id = (0, import_react9.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { htmlFor: id, className: cx("snacky-checkbox-option", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        className: "snacky-checkbox",
+        checked,
+        disabled,
+        onChange: (e) => onChange(e.target.checked)
+      }
+    ),
+    label
+  ] });
+}
+
+// src/components/Toggle/Toggle.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Toggle({ checked, onChange, disabled, ariaLabel = "Toggle", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": ariaLabel,
+      disabled,
+      className: cx("snacky-toggle", checked && "snacky-toggle--on", className),
+      onClick: () => onChange(!checked),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "snacky-toggle__track" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "snacky-toggle__thumb" })
+      ]
+    }
+  );
+}
+
+// src/components/Navbar/Navbar.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function NavBar({ items, selected, onSelect, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { className: cx("snacky-navbar", className), children: items.map((item, i) => {
+    const active = i === selected;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: cx("snacky-navbar__item", active && "snacky-navbar__item--active"),
+        "aria-current": active ? "page" : void 0,
+        onClick: () => onSelect(i),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "snacky-navbar__icon", children: active && item.activeIcon ? item.activeIcon : item.icon }),
+          item.label
+        ]
+      },
+      item.label
+    );
+  }) });
+}
+
+// src/components/Tab/Tab.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function TabRow({ tabs, selected, onSelect, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cx("snacky-tabrow", className), role: "tablist", children: tabs.map((tab, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": i === selected,
+      className: cx("snacky-tab", i === selected && "snacky-tab--active"),
+      onClick: () => onSelect(i),
+      children: tab
+    },
+    tab
+  )) });
+}
+
 // src/icons/solid.tsx
 var solid_exports = {};
 __export(solid_exports, {
@@ -1076,9 +1076,9 @@ function ProductCard(props) {
           ")"
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { variant: "secondary", icon: favoriteIcon ?? "\u2665", selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { variant: "secondary", icon: shareIcon ?? "\u2934", onClick: onShareClick, ariaLabel: "Share" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { variant: "secondary", icon: chatIcon ?? "\u{1F4AC}", onClick: onChatClick, ariaLabel: "Chat with seller" })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
         ] })
       ] })
     ] });
@@ -1111,7 +1111,7 @@ function ProductCard(props) {
             IconButton,
             {
               variant: "primary",
-              icon: cartIcon ?? "+",
+              icon: cartIcon ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(cartAdd, { width: 16, height: 16 }),
               onClick: (e) => {
                 e.stopPropagation();
                 onAddToCart();