@teamsparta/stack-chip
Version:
stack chip
410 lines (401 loc) • 13.7 kB
JavaScript
;
var __create = Object.create;
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 __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
Chip: () => Chip,
ChipButton: () => ChipButton,
ChipGroup: () => ChipGroup
});
module.exports = __toCommonJS(src_exports);
// src/Chip.tsx
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";
// src/ChipButton.tsx
var RovingFocusGroup = __toESM(require("@radix-ui/react-roving-focus"));
var import_stack_utils3 = require("@teamsparta/stack-utils");
var import_react3 = require("react");
// src/context.ts
var import_stack_utils2 = require("@teamsparta/stack-utils");
var [ChipGroupProvider, useChipGroupContext] = (0, import_stack_utils2.createContext)("ChipGroup");
// src/ChipButton.tsx
var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
var ChipButton = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { value, disabled, onClick, size: sizeFromProps } = _b, restProps = __objRest(_b, ["value", "disabled", "onClick", "size"]);
const {
value: selectedValue,
multiple,
disabled: groupDisabled,
toggleValue,
size: sizeFromContext
} = useChipGroupContext("ChipButton");
const size = sizeFromProps != null ? sizeFromProps : sizeFromContext;
const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.includes(value) : selectedValue === value;
const isDisabled = disabled || groupDisabled;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
RovingFocusGroup.Item,
{
ref,
focusable: !isDisabled,
active: isSelected,
asChild: true,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Chip,
__spreadValues({
selected: isSelected,
disabled: isDisabled,
size,
onClick: (0, import_stack_utils3.composeEventHandlers)(onClick, () => toggleValue(value))
}, restProps)
)
}
);
}
);
ChipButton.displayName = "ChipButton";
// src/ChipGroup.tsx
var RovingFocusGroup2 = __toESM(require("@radix-ui/react-roving-focus"));
var import_stack_flex = require("@teamsparta/stack-flex");
var import_stack_utils4 = require("@teamsparta/stack-utils");
var import_react4 = require("react");
var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
var ChipGroup = (0, import_react4.forwardRef)(
(_a, ref) => {
var _b = _a, {
value: valueFromProps,
defaultValue,
onValueChange,
multiple = false,
disabled = false,
children,
orientation,
dir = "ltr",
loop = true,
direction = "row",
gap = 8,
wrap = "wrap",
align = "start",
justify = "start",
size
} = _b, restProps = __objRest(_b, [
"value",
"defaultValue",
"onValueChange",
"multiple",
"disabled",
"children",
"orientation",
"dir",
"loop",
"direction",
"gap",
"wrap",
"align",
"justify",
"size"
]);
const initialValue = multiple ? [] : "";
const [value, setValue] = (0, import_stack_utils4.useControllableState)({
prop: valueFromProps,
defaultProp: defaultValue != null ? defaultValue : initialValue,
// FIXME: 추후 타입 처리 필요
onChange: onValueChange
});
const toggleValue = (clickedValue) => {
if (multiple) {
const currentValues = Array.isArray(value) ? value : [];
const index = currentValues.indexOf(clickedValue);
if (index > -1) {
const newValue = [...currentValues];
newValue.splice(index, 1);
setValue(newValue);
} else {
setValue([...currentValues, clickedValue]);
}
} else {
const currentValue = value;
setValue(currentValue === clickedValue ? "" : clickedValue);
}
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
ChipGroupProvider,
{
value,
multiple,
disabled,
toggleValue,
size,
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
RovingFocusGroup2.Root,
__spreadProps(__spreadValues({
asChild: true,
ref,
loop,
orientation,
dir,
role: "group"
}, restProps), {
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_stack_flex.Flex,
{
direction,
gap,
wrap,
align,
justify,
children
}
)
})
)
}
);
}
);
ChipGroup.displayName = "ChipGroup";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Chip,
ChipButton,
ChipGroup
});