@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
162 lines (161 loc) • 6.04 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/box/box.tsx
var box_exports = {};
__export(box_exports, {
Box: () => Box,
BoxCloseButton: () => BoxCloseButton
});
module.exports = __toCommonJS(box_exports);
var import_react = require("react");
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot = require("@radix-ui/react-slot");
var import_jsx_runtime = require("react/jsx-runtime");
function CloseIcon() {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
d: "M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z",
fill: "currentColor"
}
) });
}
var BoxCloseButton = (0, import_react.forwardRef)(
(_a, ref) => {
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
__spreadProps(__spreadValues({
className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
ref,
type: "button"
}, rest), {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
})
);
}
);
BoxCloseButton.displayName = "Box.CloseButton";
var convertVariantToColor = (variant) => {
switch (variant) {
case "lighter":
return "";
case "white":
return "";
case "warning":
return "warning";
default:
return "neutral";
}
};
var Box = (0, import_react.forwardRef)(
(_a, ref) => {
var _b = _a, {
"data-color": color = "",
asChild,
variant,
closeable = false,
onClose: onCloseProp,
closed: closedProp,
closeButtonProps,
children,
className
} = _b, rest = __objRest(_b, [
"data-color",
"asChild",
"variant",
"closeable",
"onClose",
"closed",
"closeButtonProps",
"children",
"className"
]);
const [closedState, setClosedState] = (0, import_react.useState)(false);
const onClose = (0, import_react.useCallback)(() => {
if (onCloseProp) {
const result = onCloseProp();
if (result === true) {
setClosedState(true);
}
} else {
setClosedState(true);
}
}, []);
const closed = closedProp != null ? closedProp : closedState;
const Component = asChild ? import_react_slot.Slot : "div";
const resolvedColor = color && color !== "" ? color : convertVariantToColor(variant);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
Component,
__spreadProps(__spreadValues({
"data-color": resolvedColor,
className: (0, import_typed_classname.clsx)(
"hds-box",
{ "hds-box--lighter": variant === "lighter" },
{ "hds-box--white": variant === "white" },
{ "hds-box--closed": closed },
className
),
ref
}, rest), {
children: [
closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children })
]
})
);
}
);
Box.displayName = "Box";
Box.CloseButton = BoxCloseButton;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Box,
BoxCloseButton
});
//# sourceMappingURL=box.js.map