@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
406 lines (390 loc) • 15.5 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/footer/index.tsx
var footer_exports = {};
__export(footer_exports, {
Footer: () => Footer,
FooterButtonLink: () => FooterButtonLink,
FooterLinkSection: () => FooterLinkSection,
FooterLinkSections: () => FooterLinkSections,
FooterLogo: () => FooterLogo
});
module.exports = __toCommonJS(footer_exports);
// src/footer/footer.tsx
var import_react10 = require("react");
var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot2 = require("@radix-ui/react-slot");
// src/accordion/accordion.tsx
var import_react6 = require("react");
var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
// src/accordion/accordion-item.tsx
var import_react2 = require("react");
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
// src/accordion/context.ts
var import_react = require("react");
var AccordionItemContext = (0, import_react.createContext)(null);
// src/accordion/accordion-item.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var AccordionItem = (0, import_react2.forwardRef)(
(_a, ref) => {
var _b = _a, { children, defaultOpen, open: outerOpen, onOpenChange, className } = _b, rest = __objRest(_b, ["children", "defaultOpen", "open", "onOpenChange", "className"]);
const contentId = (0, import_react2.useId)();
const [innerOpen, setInnerOpen] = (0, import_react2.useState)(defaultOpen != null ? defaultOpen : false);
const open = outerOpen != null ? outerOpen : innerOpen;
const handleOpen = () => {
if (outerOpen !== void 0) {
onOpenChange && onOpenChange(!open);
} else {
setInnerOpen(!open);
}
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
__spreadProps(__spreadValues({}, rest), {
"data-state": open ? "open" : "closed",
className: (0, import_typed_classname.clsx)("hds-accordion-item", className),
ref,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionItemContext.Provider, { value: { contentId, open, setOpen: handleOpen }, children })
})
);
}
);
AccordionItem.displayName = "Accordion.Item";
// src/accordion/accordion-header.tsx
var import_react3 = require("react");
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime2 = require("react/jsx-runtime");
var AccordionHeader = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className, onClick } = _b, rest = __objRest(_b, ["children", "className", "onClick"]);
const context = (0, import_react3.useContext)(AccordionItemContext);
if (context === null) {
return null;
}
const expandOrCollapse = (e) => {
context.setOpen(!context.open);
onClick == null ? void 0 : onClick(e);
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
__spreadProps(__spreadValues({}, rest), {
"aria-expanded": context.open,
"aria-controls": context.contentId,
"data-state": context.open ? "open" : "closed",
className: (0, import_typed_classname2.clsx)("hds-accordion-item-header", className),
onClick: expandOrCollapse,
ref,
type: "button",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children })
})
);
}
);
AccordionHeader.displayName = "Accordion.Header";
// src/accordion/accordion-content.tsx
var import_react5 = require("react");
var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
// src/utils/utils.ts
var React = __toESM(require("react"));
var import_react4 = require("react");
var inertBooleanSupported = Number(import_react4.version.split(".")[0]) >= 19;
var inertPropValue = inertBooleanSupported ? (x) => x : (x) => x ? "" : void 0;
// src/accordion/accordion-content.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var AccordionContent = (0, import_react5.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
const context = (0, import_react5.useContext)(AccordionItemContext);
if (context === null) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
__spreadProps(__spreadValues(__spreadProps(__spreadValues({
id: context.contentId,
"data-state": context.open ? "open" : "closed"
}, { inert: inertPropValue(!context.open) }), {
className: (0, import_typed_classname3.clsx)("hds-accordion-item-content", className),
ref
}), rest), {
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_typed_classname3.clsx)("hds-accordion-item-content-inner"), children })
})
);
}
);
AccordionContent.displayName = "Accordion.Content";
// src/accordion/accordion.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var Accordion = (0, import_react6.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className, indent = true } = _b, rest = __objRest(_b, ["children", "className", "indent"]);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"div",
__spreadProps(__spreadValues({}, rest), {
className: (0, import_typed_classname4.clsx)(
"hds-accordion",
!indent && "hds-accordion--no-indent",
className
),
ref,
children
})
);
}
);
Accordion.displayName = "Accordion";
Accordion.Item = AccordionItem;
Accordion.Header = AccordionHeader;
Accordion.Content = AccordionContent;
// src/list/link-list.tsx
var import_typed_classname6 = require("@postenbring/hedwig-css/typed-classname");
var import_react8 = require("react");
// src/list/list.tsx
var import_react7 = require("react");
var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime5 = require("react/jsx-runtime");
var UnorderedList = (0, import_react7.forwardRef)(
(_a, ref) => {
var _b = _a, { size = "default", className } = _b, rest = __objRest(_b, ["size", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"ul",
__spreadValues({
ref,
className: (0, import_typed_classname5.clsx)(
"hds-list",
size !== "default" && `hds-list--${size}`,
className
)
}, rest)
);
}
);
UnorderedList.displayName = "UnorderedList";
var OrderedList = (0, import_react7.forwardRef)(
(_a, ref) => {
var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"ol",
__spreadValues({
ref,
className: (0, import_typed_classname5.clsx)(
"hds-list",
size !== "default" && `hds-list--${size}`,
className
)
}, rest)
);
}
);
OrderedList.displayName = "OrderedList";
// src/list/link-list.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var LinkList = (0, import_react8.forwardRef)(
(_a, ref) => {
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
UnorderedList,
__spreadValues({
ref,
className: (0, import_typed_classname6.clsx)("hds-list--link-list", className)
}, rest)
);
}
);
LinkList.displayName = "LinkList";
// src/button/button.tsx
var import_react9 = require("react");
var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot = require("@radix-ui/react-slot");
var import_jsx_runtime7 = require("react/jsx-runtime");
var Button = (0, import_react9.forwardRef)(
(_a, ref) => {
var _b = _a, {
asChild,
children,
variant = "primary",
size = "large",
fullWidth = false,
icon = false,
className
} = _b, rest = __objRest(_b, [
"asChild",
"children",
"variant",
"size",
"fullWidth",
"icon",
"className"
]);
const Component = asChild ? import_react_slot.Slot : "button";
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Component,
__spreadProps(__spreadValues({
className: (0, import_typed_classname7.clsx)(
"hds-button",
`hds-button--${size}`,
`hds-button--${variant}`,
{
"hds-button--full": fullWidth === true,
"hds-button--mobile-full": fullWidth === "mobile",
"hds-button--only-icon": icon === true,
"hds-button--leading-icon": icon === "leading",
"hds-button--trailing-icon": icon === "trailing"
},
className
),
ref
}, rest), {
children
})
);
}
);
Button.displayName = "Button";
// src/footer/footer.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var FooterLogo = (0, import_react10.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
const Component = asChild ? import_react_slot2.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname8.clsx)(`hds-footer__logo`, className), ref }, rest), { children }));
}
);
FooterLogo.displayName = "Footer.Logo";
var FooterButtonLink = (0, import_react10.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
const Component = asChild ? import_react_slot2.Slot : "a";
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { asChild: true, variant: "secondary", className: (0, import_typed_classname8.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
}
);
FooterButtonLink.displayName = "FooterButton";
var FooterLinkSections = (0, import_react10.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
Accordion,
__spreadProps(__spreadValues({
className: (0, import_typed_classname8.clsx)("hds-footer__link-sections", className),
ref
}, rest), {
children
})
) });
}
);
FooterLinkSections.displayName = "Footer.LinkSections";
var FooterLinkSection = (0, import_react10.forwardRef)(
(_a, ref) => {
var _b = _a, { heading, children, className } = _b, rest = __objRest(_b, ["heading", "children", "className"]);
const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LinkList, { children });
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
Accordion.Item,
__spreadProps(__spreadValues({
className: (0, import_typed_classname8.clsx)(`hds-footer__link-section`, className),
ref
}, rest), {
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Accordion.Header, { children: heading }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Accordion.Content, { children: linkListChildren })
]
})
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_typed_classname8.clsx)(`hds-footer__link-section`, className), children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { children: heading }),
linkListChildren
] })
] });
}
);
FooterLinkSection.displayName = "Footer.LinkSection";
var Footer = (0, import_react10.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className, variant, asChild } = _b, rest = __objRest(_b, ["children", "className", "variant", "asChild"]);
const Component = asChild ? import_react_slot2.Slot : "footer";
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
Component,
__spreadProps(__spreadValues({
"data-color-scheme": "dark",
className: (0, import_typed_classname8.clsx)(
`hds-footer`,
variant === "slim" && "hds-footer--slim",
className
),
ref
}, rest), {
children
})
);
}
);
Footer.displayName = "Footer";
Footer.Logo = FooterLogo;
Footer.ButtonLink = FooterButtonLink;
Footer.LinkSections = FooterLinkSections;
Footer.LinkSection = FooterLinkSection;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Footer,
FooterButtonLink,
FooterLinkSection,
FooterLinkSections,
FooterLogo
});
//# sourceMappingURL=index.js.map