@stella-source/stellasource-dsl 3.3.0 → 3.4.0

package/dist/cjs/types/components/SelectorChip/SelectorChip.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface SelectorChipProps {
+    id?: string;
+    className?: string;
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    onClose?: () => void;
+}
+declare const SelectorChip: ({ id, className, label, selected, disabled, onClick, onClose, }: SelectorChipProps) => React.JSX.Element;
+export default SelectorChip;

package/dist/cjs/types/components/SelectorChip/SelectorChip.stories.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    title: string;
+    component: ({ id, className, label, selected, disabled, onClick, onClose, }: import("./SelectorChip").SelectorChipProps) => import("react").JSX.Element;
+    tags: string[];
+    args: {
+        label: string;
+        selected: boolean;
+        disabled: boolean;
+        onClick: () => void;
+        onClose: () => void;
+    };
+};
+export default _default;
+export declare const SelectorChip: {};

package/dist/cjs/types/components/SelectorChip/styles.d.ts

@@ -0,0 +1,7 @@
+interface SelectorChipStyleProps {
+    $selected?: boolean;
+}
+export declare const SelectorChipComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$selected"> & SelectorChipStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$selected"> & SelectorChipStyleProps, never>>> & string;
+export declare const SelectorChipLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const SelectorChipClose: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
+export {};

package/dist/cjs/types/components/SelectorChip/types.d.ts

@@ -0,0 +1,9 @@
+export interface SelectorChipProps {
+    id?: string;
+    className?: string;
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    onClose?: () => void;
+}

package/dist/cjs/types/components/Tabs/Tab.d.ts

@@ -7,7 +7,7 @@ interface TabProps {
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
     active?: boolean;
     variant?: `${TabsVariant}`;
-    notifications?: number;
+    notifications?: number | string;
     label: string;
 }
 declare const Tab: ({ id, className, onClick, htmlProps, label, variant, active, notifications, }: TabProps) => React.JSX.Element;

package/dist/cjs/types/index.d.ts

@@ -16,6 +16,7 @@ import Sync from "./components/Sync/Sync";
 import TableUnitsAndTotals from "./components/TableUnitsAndTotals/TableUnitsAndTotals";
 import PaymentStatus from "./components/PaymentStatus/PaymentStatus";
 import Tabs from "./components/Tabs/Tabs";
+import SelectorChip from "./components/SelectorChip/SelectorChip";
 /** Types */
 import { StellaButtonVariant } from "./components/StellaButton/types";
 /** Tokens */
@@ -25,4 +26,4 @@ import OrderStatus from "./components/OrderStatus/OrderStatus";
 /**Exports */
 export type { StellaIconDefinition } from "./components/StellaIcon/types";
 export type { CustomColumnMeta } from "./components/Table/types";
-export { Tabs, Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, Table, Pagination, Sync, TableUnitsAndTotals, StellaButtonVariant, PaymentStatus, OrderStatus, Styles, };
+export { Tabs, Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, Table, Pagination, Sync, TableUnitsAndTotals, StellaButtonVariant, PaymentStatus, OrderStatus, SelectorChip, Styles, };

package/dist/esm/index.esm.js

@@ -23047,9 +23047,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__default.createElement(TabButton, { id: id, "$variant": variant, className: `${className} ${active && "active"}`, onClick: () => onClick?.(label), ...htmlProps },
         label,
-        !!(notifications && notifications > 0) && (a__default.createElement(NotificationBubble, { "$isActive": active }, notifications))));
+        !!notificationText && (a__default.createElement(NotificationBubble, { "$isActive": active }, notificationText))));
 };
 
 const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant = "light", isPill, }) => {
@@ -23061,6 +23064,70 @@ const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, va
     return (a__default.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a__default.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
+    ? css `
+          background-color: var(--grey700);
+          border-color: var(--grey700);
+          color: var(--white);
+        `
+    : 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__default.createElement(SelectorChipComponent, { id: id, className: className, "$selected": selected, disabled: disabled, onClick: onClick },
+        a__default.createElement(SelectorChipLabel, null, label),
+        selected && (a__default.createElement(SelectorChipClose, { type: "button", "aria-label": "Remove chip", disabled: disabled, onClick: (e) => {
+                e.stopPropagation();
+                onClose?.();
+            } },
+            a__default.createElement(e, { size: 16 })))));
+};
+
 const OrderStatusComponent = styled.div `
   display: flex;
   align-items: center;
@@ -23137,5 +23204,5 @@ const OrderStatus = ({ variant, id, className, isPurchaser, }) => {
         a__default.createElement(OrderStatusLabel, null, label)));
 };
 
-export { HelperText, IconButton, Label, Loader, NumberInput, OrderStatus, Pagination, PasswordInput, PaymentStatus, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, Tabs, TextInput, Tooltip };
+export { HelperText, IconButton, Label, Loader, NumberInput, OrderStatus, Pagination, PasswordInput, PaymentStatus, SelectorChip, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, Tabs, TextInput, Tooltip };
 //# sourceMappingURL=index.esm.js.map