@teamsparta/stack-chip
Version:
stack chip
247 lines (243 loc) • 8.62 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/Chip.tsx
var Chip_exports = {};
__export(Chip_exports, {
Chip: () => Chip
});
module.exports = __toCommonJS(Chip_exports);
var import_stack_core = require("@teamsparta/stack-core");
var import_react2 = require("react");
// src/style.ts
var import_react = require("@emotion/react");
var import_stack_font = require("@teamsparta/stack-font");
var import_stack_tokens = require("@teamsparta/stack-tokens");
var import_stack_utils = require("@teamsparta/stack-utils");
var chipBorderColorVar = "--stack-chip-border-color";
var chipBackgroundColorVar = "--stack-chip-background-color";
var chipHoverBorderColorVar = "--stack-chip-hover-border-color";
var chipHoverBackgroundColorVar = "--stack-chip-hover-background-color";
var chipSelectedBorderColorVar = "--stack-chip-selected-border-color";
var chipSelectedBackgroundColorVar = "--stack-chip-selected-background-color";
var chipFontColorVar = "--stack-chip-font-color";
var chipSelectedFontColorVar = "--stack-chip-selected-font-color";
var chipColorVariant = {
fill: {
[chipBorderColorVar]: import_stack_tokens.vars.line.clickable,
[chipBackgroundColorVar]: import_stack_tokens.vars.fill.default,
[chipHoverBorderColorVar]: import_stack_tokens.vars.line.clickable,
[chipHoverBackgroundColorVar]: import_stack_tokens.vars.fill.subtle,
[chipSelectedBorderColorVar]: import_stack_tokens.vars.line.selected,
[chipSelectedBackgroundColorVar]: import_stack_tokens.vars.fill.inverse.default,
[chipFontColorVar]: import_stack_tokens.vars.text.primary,
[chipSelectedFontColorVar]: import_stack_tokens.vars.text.inverse
},
line: {
[chipBorderColorVar]: import_stack_tokens.vars.line.clickable,
[chipBackgroundColorVar]: import_stack_tokens.vars.fill.default,
[chipHoverBorderColorVar]: import_stack_tokens.vars.line.selected,
[chipHoverBackgroundColorVar]: import_stack_tokens.vars.fill.default,
[chipSelectedBorderColorVar]: import_stack_tokens.vars.line.selected,
[chipSelectedBackgroundColorVar]: import_stack_tokens.vars.fill.default,
[chipFontColorVar]: import_stack_tokens.vars.text.primary,
[chipSelectedFontColorVar]: import_stack_tokens.vars.text.primary
}
};
var chipContainerCss = (0, import_react.css)({
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "999px",
transition: "all 0.2s",
cursor: "pointer",
whiteSpace: "nowrap",
maxWidth: "200px",
borderWidth: "1px",
borderStyle: "solid",
borderColor: (0, import_stack_utils.getVar)(chipBorderColorVar),
backgroundColor: (0, import_stack_utils.getVar)(chipBackgroundColorVar),
color: (0, import_stack_utils.getVar)(chipFontColorVar),
userSelect: "none",
"@media (hover: hover) and (pointer: fine)": {
"&:hover:not(:disabled)[data-selected=false]": {
backgroundColor: (0, import_stack_utils.getVar)(chipHoverBackgroundColorVar),
borderColor: (0, import_stack_utils.getVar)(chipHoverBorderColorVar)
}
},
"&:active:not(:disabled)[data-selected=false]": {
backgroundColor: (0, import_stack_utils.getVar)(chipHoverBackgroundColorVar),
borderColor: (0, import_stack_utils.getVar)(chipHoverBorderColorVar)
},
"&[data-selected=true]": {
backgroundColor: (0, import_stack_utils.getVar)(chipSelectedBackgroundColorVar),
borderColor: (0, import_stack_utils.getVar)(chipSelectedBorderColorVar),
color: (0, import_stack_utils.getVar)(chipSelectedFontColorVar)
}
});
var chipSizeVariants = {
sm: {
padding: "7px 11px"
},
md: {
padding: "9px 13px"
},
lg: {
padding: "11px 15px"
}
};
var chipSizeFontVariants = {
sm: import_stack_font.captionM,
md: import_stack_font.captionM,
lg: import_stack_font.bodyM
};
var chipSizeCss = (sizes) => sizes.map(
({ breakpoint, size }) => import_react.css`
@media screen and (min-width: ${breakpoint}px) {
${chipSizeVariants[size]}
${chipSizeFontVariants[size]}
}
`
);
var disabledStyle = (0, import_react.css)({
opacity: 0.35,
cursor: "not-allowed"
});
var chipTextCss = (0, import_react.css)({
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
});
var chipSizeTextPaddingVariants = {
sm: {
paddingInline: "2px"
},
md: {
paddingInline: "2px"
},
lg: {
paddingInline: "4px"
}
};
var chipTextSizeCss = (sizes) => sizes.map(
({ breakpoint, size }) => import_react.css`
@media screen and (min-width: ${breakpoint}px) {
${chipSizeTextPaddingVariants[size]}
}
`
);
var chipAddonCss = (0, import_react.css)({
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0
});
var chipLeftAddonCss = (0, import_react.css)({
marginRight: "2px"
});
var chipRightAddonCss = (0, import_react.css)({
marginLeft: "2px"
});
// src/Chip.tsx
var import_jsx_runtime = require("@emotion/react/jsx-runtime");
var Chip = (0, import_react2.forwardRef)(
(_a, ref) => {
var _b = _a, {
leftAddon,
rightAddon,
children,
size = "sm",
variant = "fill",
selected = false,
disabled = false,
onClick,
style: styleProp,
className
} = _b, restProps = __objRest(_b, [
"leftAddon",
"rightAddon",
"children",
"size",
"variant",
"selected",
"disabled",
"onClick",
"style",
"className"
]);
const breakpoints = (0, import_stack_core.useBreakpointContext)("Chip");
const sizes = (0, import_stack_core.mapResponsive)(breakpoints, size, (breakpoint, size2) => ({
breakpoint,
size: size2
}));
const style = __spreadValues(__spreadValues({}, chipColorVariant[variant]), styleProp);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"button",
__spreadProps(__spreadValues({
ref,
style,
onClick,
disabled,
"aria-selected": selected,
className,
"data-selected": selected,
css: [chipContainerCss, chipSizeCss(sizes), disabled && disabledStyle]
}, restProps), {
children: [
leftAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { css: [chipAddonCss, chipLeftAddonCss], children: leftAddon }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { css: [chipTextCss, chipTextSizeCss(sizes)], children }),
rightAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { css: [chipAddonCss, chipRightAddonCss], children: rightAddon })
]
})
);
}
);
Chip.displayName = "Chip";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Chip
});