@usefragments/ui 1.0.0

package/dist/components/Header/index.js

@@ -0,0 +1,361 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Menu } from "@base-ui/react/menu";
+import { X, List, CaretDown } from "@phosphor-icons/react";
+import { useFocusTrap } from "../../utils/a11y.js";
+import { ScrollArea } from "../ScrollArea/index.js";
+import styles from "./Header.module.scss.js";
+import { useSidebar } from "../Sidebar/index.js";
+const HeaderContext = React.createContext(null);
+function useHeaderContext() {
+  const ctx = React.useContext(HeaderContext);
+  if (!ctx) {
+    throw new Error("Header compound components must be used within a Header");
+  }
+  return ctx;
+}
+const HeaderIconContext = React.createContext(void 0);
+function useHeaderIcons() {
+  return React.useContext(HeaderIconContext);
+}
+function renderHeaderIcon(slot, state) {
+  if (slot === void 0) return void 0;
+  return typeof slot === "function" ? slot(state) : slot;
+}
+function composeEventHandlers(userHandler, internalHandler) {
+  return (event) => {
+    userHandler == null ? void 0 : userHandler(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event);
+  };
+}
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(max-width: 767px)");
+    setIsMobile(mq.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+function HeaderRoot({
+  children,
+  height = "56px",
+  position = "static",
+  icons,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const classes = [
+    styles.header,
+    position === "fixed" && styles.fixed,
+    position === "sticky" && styles.sticky,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    "--header-height": height,
+    ...styleProp
+  };
+  const contextValue = React.useMemo(
+    () => ({ mobileOpen, setMobileOpen, icons }),
+    [mobileOpen, icons]
+  );
+  return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(HeaderIconContext.Provider, { value: icons, children: /* @__PURE__ */ jsx("header", { ...htmlProps, className: classes, style, "data-position": position, children: /* @__PURE__ */ jsx("div", { className: styles.container, children }) }) }) });
+}
+function HeaderBrand({ children, href, className, ...htmlProps }) {
+  const classes = [styles.brand, className].filter(Boolean).join(" ");
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { ...htmlProps, href, className: classes, children });
+  }
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
+function HeaderNav({
+  children,
+  "aria-label": ariaLabel = "Main navigation",
+  className,
+  ...htmlProps
+}) {
+  const classes = [styles.nav, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("nav", { ...htmlProps, className: classes, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ul", { className: styles.navList, children }) });
+}
+function HeaderNavItem({
+  children,
+  active = false,
+  href,
+  asChild = false,
+  onClick,
+  className,
+  ...htmlProps
+}) {
+  const classes = [
+    styles.navItem,
+    active && styles.navItemActive,
+    className
+  ].filter(Boolean).join(" ");
+  const itemProps = {
+    className: classes,
+    onClick,
+    "aria-current": active ? "page" : void 0
+  };
+  if (asChild && React.isValidElement(children)) {
+    const childProps = children.props;
+    return /* @__PURE__ */ jsx("li", { children: React.cloneElement(children, {
+      ...htmlProps,
+      ...itemProps,
+      onClick: composeEventHandlers(childProps.onClick, onClick ?? (() => {
+      })),
+      className: [classes, childProps.className].filter(Boolean).join(" ")
+    }) });
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { ...htmlProps, ...itemProps, href, children }) });
+  }
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", { ...htmlProps, ...itemProps, type: "button", children }) });
+}
+function HeaderSearch({
+  children,
+  expandable = false,
+  className,
+  ...htmlProps
+}) {
+  const classes = [
+    styles.search,
+    expandable && styles.searchExpandable,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
+function HeaderActions({ children, className, ...htmlProps }) {
+  const classes = [styles.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
+function HeaderTrigger({
+  children,
+  "aria-label": ariaLabel = "Toggle navigation",
+  className,
+  onClick,
+  ...htmlProps
+}) {
+  const isMobile = useIsMobile();
+  const sidebar = useSidebar();
+  const headerCtx = React.useContext(HeaderContext);
+  const icons = useHeaderIcons();
+  if (!isMobile) {
+    return null;
+  }
+  const hasSidebarProvider = sidebar.open !== void 0 && sidebar.setOpen !== void 0 && typeof sidebar.setOpen === "function";
+  const isUsingSidebar = hasSidebarProvider && sidebar.isMobile;
+  const open = isUsingSidebar ? sidebar.open : (headerCtx == null ? void 0 : headerCtx.mobileOpen) ?? false;
+  const setOpen = isUsingSidebar ? sidebar.setOpen : (headerCtx == null ? void 0 : headerCtx.setMobileOpen) ?? (() => {
+  });
+  const classes = [styles.trigger, className].filter(Boolean).join(" ");
+  const iconSlot = open ? icons == null ? void 0 : icons.close : icons == null ? void 0 : icons.menu;
+  const iconState = { slot: open ? "close" : "menu", open };
+  const iconOverride = renderHeaderIcon(iconSlot, iconState);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...htmlProps,
+      type: "button",
+      className: classes,
+      onClick: composeEventHandlers(onClick, () => setOpen(!open)),
+      "aria-label": ariaLabel,
+      "aria-expanded": open,
+      children: children || iconOverride || (open ? /* @__PURE__ */ jsx(X, { size: 24, "aria-hidden": true }) : /* @__PURE__ */ jsx(List, { size: 24, "aria-hidden": true }))
+    }
+  );
+}
+function HeaderSpacer({ className }) {
+  const classes = [styles.spacer, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes });
+}
+function HeaderNavMenu({
+  label,
+  active = false,
+  className,
+  children,
+  ...htmlProps
+}) {
+  const icons = useHeaderIcons();
+  const triggerClasses = [
+    styles.navItem,
+    styles.navMenuTrigger,
+    active && styles.navItemActive,
+    className
+  ].filter(Boolean).join(" ");
+  const chevronIcon = renderHeaderIcon(icons == null ? void 0 : icons.navMenuChevron, {
+    slot: "navMenuChevron",
+    active
+  });
+  return /* @__PURE__ */ jsx("li", { ...htmlProps, children: /* @__PURE__ */ jsxs(Menu.Root, { modal: false, children: [
+    /* @__PURE__ */ jsxs(Menu.Trigger, { className: triggerClasses, children: [
+      label,
+      chevronIcon ? /* @__PURE__ */ jsx("span", { className: styles.navMenuChevron, "aria-hidden": true, children: chevronIcon }) : /* @__PURE__ */ jsx(CaretDown, { size: 12, className: styles.navMenuChevron, "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: styles.navMenuPositioner, children: /* @__PURE__ */ jsx(Menu.Popup, { className: styles.navMenuPopup, children }) }) })
+  ] }) });
+}
+function HeaderNavMenuItem({
+  children,
+  href,
+  active = false,
+  asChild = false,
+  className,
+  ...htmlProps
+}) {
+  const classes = [
+    styles.navMenuItem,
+    active && styles.navMenuItemActive,
+    className
+  ].filter(Boolean).join(" ");
+  if (asChild && React.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(
+      Menu.Item,
+      {
+        ...htmlProps,
+        className: classes,
+        render: children
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx(Menu.Item, { ...htmlProps, className: classes, render: /* @__PURE__ */ jsx("a", { href }), children });
+  }
+  return /* @__PURE__ */ jsx(Menu.Item, { ...htmlProps, className: classes, children });
+}
+function HeaderMobileNav({ children, className }) {
+  const { mobileOpen, setMobileOpen, icons } = useHeaderContext();
+  const drawerRef = React.useRef(null);
+  useFocusTrap(drawerRef, mobileOpen);
+  React.useEffect(() => {
+    if (!mobileOpen) return;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [mobileOpen]);
+  React.useEffect(() => {
+    if (!mobileOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setMobileOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [mobileOpen, setMobileOpen]);
+  if (!mobileOpen) return null;
+  if (typeof document === "undefined") return null;
+  const closeIcon = renderHeaderIcon(icons == null ? void 0 : icons.mobileClose, {
+    slot: "mobileClose",
+    open: true
+  });
+  const drawerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.mobileNavBackdrop,
+        onClick: () => setMobileOpen(false),
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: drawerRef,
+        className: [styles.mobileNavDrawer, className].filter(Boolean).join(" "),
+        role: "dialog",
+        "aria-modal": true,
+        "aria-label": "Navigation",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles.mobileNavHeader, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.mobileNavClose,
+              onClick: () => setMobileOpen(false),
+              "aria-label": "Close navigation",
+              children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 20, "aria-hidden": true })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ScrollArea, { orientation: "vertical", className: styles.mobileNavBody, children })
+        ]
+      }
+    )
+  ] });
+  return createPortal(drawerContent, document.body);
+}
+function HeaderMobileNavLink({
+  children,
+  href,
+  active = false,
+  asChild = false,
+  onClick,
+  className,
+  ...htmlProps
+}) {
+  const { setMobileOpen } = useHeaderContext();
+  const classes = [
+    styles.mobileNavLink,
+    active && styles.mobileNavLinkActive,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(e);
+    if (!e.defaultPrevented) setMobileOpen(false);
+  };
+  if (asChild && React.isValidElement(children)) {
+    const childProps = children.props;
+    return React.cloneElement(children, {
+      ...htmlProps,
+      className: [classes, childProps.className].filter(Boolean).join(" "),
+      onClick: composeEventHandlers(childProps.onClick, handleClick)
+    });
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { ...htmlProps, href, className: classes, onClick: handleClick, children });
+  }
+  return /* @__PURE__ */ jsx("button", { ...htmlProps, type: "button", className: classes, onClick: handleClick, children });
+}
+function HeaderSkipLink({
+  children = "Skip to main content",
+  href = "#main-content",
+  className
+}) {
+  const classes = [styles.skipLink, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("a", { href, className: classes, children });
+}
+const Header = Object.assign(HeaderRoot, {
+  Brand: HeaderBrand,
+  Nav: HeaderNav,
+  NavItem: HeaderNavItem,
+  NavMenu: HeaderNavMenu,
+  NavMenuItem: HeaderNavMenuItem,
+  Search: HeaderSearch,
+  Actions: HeaderActions,
+  Trigger: HeaderTrigger,
+  Spacer: HeaderSpacer,
+  SkipLink: HeaderSkipLink,
+  MobileNav: HeaderMobileNav,
+  MobileNavLink: HeaderMobileNavLink
+});
+export {
+  Header,
+  HeaderActions,
+  HeaderBrand,
+  HeaderMobileNav,
+  HeaderMobileNavLink,
+  HeaderNav,
+  HeaderNavItem,
+  HeaderNavMenu,
+  HeaderNavMenuItem,
+  HeaderRoot,
+  HeaderSearch,
+  HeaderSkipLink,
+  HeaderSpacer,
+  HeaderTrigger
+};

package/dist/components/Icon/Icon.module.scss.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const icon = "_icon_p4ine_1";
+const primary = "_primary_p4ine_9";
+const secondary = "_secondary_p4ine_13";
+const tertiary = "_tertiary_p4ine_17";
+const accent = "_accent_p4ine_21";
+const success = "_success_p4ine_25";
+const warning = "_warning_p4ine_29";
+const error = "_error_p4ine_33";
+const styles = {
+  icon,
+  primary,
+  secondary,
+  tertiary,
+  accent,
+  success,
+  warning,
+  error
+};
+exports.accent = accent;
+exports.default = styles;
+exports.error = error;
+exports.icon = icon;
+exports.primary = primary;
+exports.secondary = secondary;
+exports.success = success;
+exports.tertiary = tertiary;
+exports.warning = warning;

package/dist/components/Icon/Icon.module.scss.js

@@ -0,0 +1,29 @@
+const icon = "_icon_p4ine_1";
+const primary = "_primary_p4ine_9";
+const secondary = "_secondary_p4ine_13";
+const tertiary = "_tertiary_p4ine_17";
+const accent = "_accent_p4ine_21";
+const success = "_success_p4ine_25";
+const warning = "_warning_p4ine_29";
+const error = "_error_p4ine_33";
+const styles = {
+  icon,
+  primary,
+  secondary,
+  tertiary,
+  accent,
+  success,
+  warning,
+  error
+};
+export {
+  accent,
+  styles as default,
+  error,
+  icon,
+  primary,
+  secondary,
+  success,
+  tertiary,
+  warning
+};

package/dist/components/Icon/index.cjs

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Icon_module = require("./Icon.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const FUI_ICON_PX = {
+  xs: 12,
+  md: 16,
+  lg: 20,
+  xl: 24,
+  "2xl": 32
+};
+const sizeMap = {
+  xs: FUI_ICON_PX["xs"],
+  // 12
+  sm: FUI_ICON_PX["md"],
+  // 16
+  md: FUI_ICON_PX["lg"],
+  // 20
+  lg: FUI_ICON_PX["xl"],
+  // 24
+  xl: FUI_ICON_PX["2xl"]
+  // 32
+};
+const IconRoot = React__namespace.forwardRef(
+  function Icon2({
+    icon: IconComponent,
+    size = "md",
+    weight = "regular",
+    variant,
+    color,
+    iconProps,
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    const colorVariant = variant || color;
+    const classes = [
+      Icon_module.default.icon,
+      colorVariant && colorVariant !== "default" && Icon_module.default[colorVariant],
+      className
+    ].filter(Boolean).join(" ");
+    const resolvedIconProps = {
+      ...iconProps
+    };
+    if (!("size" in resolvedIconProps)) {
+      resolvedIconProps.size = sizeMap[size];
+    }
+    if (weight && !("weight" in resolvedIconProps)) {
+      resolvedIconProps.weight = weight;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...htmlProps, className: classes, style, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { ...resolvedIconProps }) });
+  }
+);
+const Icon = Object.assign(IconRoot, {
+  Root: IconRoot
+});
+exports.Icon = Icon;

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+type AnyIconComponent = React.ComponentType<any>;
+type IconComponentProps<TIcon extends AnyIconComponent> = React.ComponentPropsWithoutRef<TIcon>;
+export type IconProps<TIcon extends AnyIconComponent = AnyIconComponent> = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & {
+    /** The icon component to render */
+    icon: TIcon;
+    /** Size of the icon */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Optional style/weight hint forwarded when the icon component supports a `weight` prop */
+    weight?: string;
+    /** Semantic color variant */
+    variant?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error';
+    /** @deprecated Use variant instead */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error';
+    /** Additional props forwarded to the underlying icon component (typed from `icon`) */
+    iconProps?: Partial<IconComponentProps<TIcon>>;
+};
+declare const IconRoot: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> & {
+    /** The icon component to render */
+    icon: AnyIconComponent;
+    /** Size of the icon */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /** Optional style/weight hint forwarded when the icon component supports a `weight` prop */
+    weight?: string;
+    /** Semantic color variant */
+    variant?: "default" | "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "error";
+    /** @deprecated Use variant instead */
+    color?: "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "error";
+    /** Additional props forwarded to the underlying icon component (typed from `icon`) */
+    iconProps?: Partial<Omit<any, "ref">> | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+type IconComponentSignature = <TIcon extends AnyIconComponent = AnyIconComponent>(props: IconProps<TIcon> & React.RefAttributes<HTMLSpanElement>) => React.ReactElement | null;
+export declare const Icon: typeof IconRoot & IconComponentSignature & {
+    Root: typeof IconRoot;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,KAAK,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AACjD,KAAK,kBAAkB,CAAC,KAAK,SAAS,gBAAgB,IAAI,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEhG,MAAM,MAAM,SAAS,CAAC,KAAK,SAAS,gBAAgB,GAAG,gBAAgB,IACrE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,GAAG;IACrD,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC;IACZ,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,4FAA4F;IAC5F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACxG,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1F,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC;CAChD,CAAC;AAeJ,QAAA,MAAM,QAAQ;IA3BV,mCAAmC;;IAEnC,uBAAuB;WAChB,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IACvC,4FAA4F;aACnF,MAAM;IACf,6BAA6B;cACnB,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO;IACvG,sCAAsC;YAC9B,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO;IACzF,sFAAsF;;yCA6DzF,CAAC;AAEF,KAAK,sBAAsB,GAAG,CAAC,KAAK,SAAS,gBAAgB,GAAG,gBAAgB,EAC9E,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,KAC3D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,IAAI,EAEX,OAAO,QAAQ,GAAG,sBAAsB,GAAG;IAC/C,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC"}

package/dist/components/Icon/index.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Icon.module.scss.js";
+const FUI_ICON_PX = {
+  xs: 12,
+  md: 16,
+  lg: 20,
+  xl: 24,
+  "2xl": 32
+};
+const sizeMap = {
+  xs: FUI_ICON_PX["xs"],
+  // 12
+  sm: FUI_ICON_PX["md"],
+  // 16
+  md: FUI_ICON_PX["lg"],
+  // 20
+  lg: FUI_ICON_PX["xl"],
+  // 24
+  xl: FUI_ICON_PX["2xl"]
+  // 32
+};
+const IconRoot = React.forwardRef(
+  function Icon2({
+    icon: IconComponent,
+    size = "md",
+    weight = "regular",
+    variant,
+    color,
+    iconProps,
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    const colorVariant = variant || color;
+    const classes = [
+      styles.icon,
+      colorVariant && colorVariant !== "default" && styles[colorVariant],
+      className
+    ].filter(Boolean).join(" ");
+    const resolvedIconProps = {
+      ...iconProps
+    };
+    if (!("size" in resolvedIconProps)) {
+      resolvedIconProps.size = sizeMap[size];
+    }
+    if (weight && !("weight" in resolvedIconProps)) {
+      resolvedIconProps.weight = weight;
+    }
+    return /* @__PURE__ */ jsx("span", { ref, ...htmlProps, className: classes, style, children: /* @__PURE__ */ jsx(IconComponent, { ...resolvedIconProps }) });
+  }
+);
+const Icon = Object.assign(IconRoot, {
+  Root: IconRoot
+});
+export {
+  Icon
+};

package/dist/components/IconButton/IconButton.module.scss.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const iconButton = "_iconButton_6xdyn_1";
+const sm = "_sm_6xdyn_43";
+const md = "_md_6xdyn_52";
+const lg = "_lg_6xdyn_61";
+const ghost = "_ghost_6xdyn_70";
+const subtle = "_subtle_6xdyn_77";
+const outlined = "_outlined_6xdyn_87";
+const pressed = "_pressed_6xdyn_98";
+const styles = {
+  iconButton,
+  sm,
+  md,
+  lg,
+  ghost,
+  subtle,
+  outlined,
+  pressed
+};
+exports.default = styles;
+exports.ghost = ghost;
+exports.iconButton = iconButton;
+exports.lg = lg;
+exports.md = md;
+exports.outlined = outlined;
+exports.pressed = pressed;
+exports.sm = sm;
+exports.subtle = subtle;

package/dist/components/IconButton/IconButton.module.scss.js

@@ -0,0 +1,29 @@
+const iconButton = "_iconButton_6xdyn_1";
+const sm = "_sm_6xdyn_43";
+const md = "_md_6xdyn_52";
+const lg = "_lg_6xdyn_61";
+const ghost = "_ghost_6xdyn_70";
+const subtle = "_subtle_6xdyn_77";
+const outlined = "_outlined_6xdyn_87";
+const pressed = "_pressed_6xdyn_98";
+const styles = {
+  iconButton,
+  sm,
+  md,
+  lg,
+  ghost,
+  subtle,
+  outlined,
+  pressed
+};
+export {
+  styles as default,
+  ghost,
+  iconButton,
+  lg,
+  md,
+  outlined,
+  pressed,
+  sm,
+  subtle
+};