@stella-source/stellasource-dsl 3.3.0 → 3.4.0

package/dist/cjs/index.js

@@ -23067,9 +23067,12 @@ const NotificationBubble = styled.span `
 `;
 
 const Tab = ({ id, className, onClick, htmlProps, label, variant = "light", active = false, notifications, }) => {
+    const notificationText = typeof notifications === "number" && notifications <= 0
+        ? undefined
+        : notifications;
     return (a$m.createElement(TabButton, { id: id, "$variant": variant, className: `${className} ${active && "active"}`, onClick: () => onClick?.(label), ...htmlProps },
         label,
-        !!(notifications && notifications > 0) && (a$m.createElement(NotificationBubble, { "$isActive": active }, notifications))));
+        !!notificationText && (a$m.createElement(NotificationBubble, { "$isActive": active }, notificationText))));
 };
 
 const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant = "light", isPill, }) => {
@@ -23081,6 +23084,70 @@ const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, va
     return (a$m.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a$m.createElement(Tab, { key: `${id}-${tab.label}`, id: `${id}-${tab.label}`, label: tab.label, active: tab.label === activeTab, variant: variant, onClick: () => handleClick(tab.label), notifications: tab.notifications })))));
 };
 
+const SelectorChipComponent = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 24px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--grey200);
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 500;
+  font-family: "inter";
+  cursor: pointer;
+  transition: 0.15s ease;
+  background-color: var(--white);
+  color: var(--charcoal);
+
+  ${({ $selected }) => $selected
+    ? styled.css `
+          background-color: var(--grey700);
+          border-color: var(--grey700);
+          color: var(--white);
+        `
+    : styled.css `
+          &:hover {
+            background: var(--grey50);
+          }
+        `}
+
+  &:disabled {
+    background-color: var(--light-grey);
+    border-color: var(--light-grey);
+    color: var(--smoke);
+    cursor: not-allowed;
+  }
+`;
+const SelectorChipLabel = styled.span `
+  display: flex;
+  align-items: center;
+`;
+const SelectorChipClose = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  background: transparent;
+  padding: 0;
+
+  cursor: pointer;
+  color: inherit;
+`;
+
+const SelectorChip = ({ id, className, label, selected = false, disabled = false, onClick, onClose, }) => {
+    return (a$m.createElement(SelectorChipComponent, { id: id, className: className, "$selected": selected, disabled: disabled, onClick: onClick },
+        a$m.createElement(SelectorChipLabel, null, label),
+        selected && (a$m.createElement(SelectorChipClose, { type: "button", "aria-label": "Remove chip", disabled: disabled, onClick: (e) => {
+                e.stopPropagation();
+                onClose?.();
+            } },
+            a$m.createElement(e, { size: 16 })))));
+};
+
 const OrderStatusComponent = styled.div `
   display: flex;
   align-items: center;
@@ -23166,6 +23233,7 @@ exports.OrderStatus = OrderStatus;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.PaymentStatus = PaymentStatus;
+exports.SelectorChip = SelectorChip;
 exports.StellaButton = StellaButton;
 exports.StellaIcon = StellaIcon;
 exports.Styles = Styles;