@hypoth-ui/react 0.1.0

package/dist/chunk-5A7SNEOH.js

@@ -0,0 +1,1991 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/button.tsx
+import {
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef
+} from "react";
+
+// src/primitives/responsive.ts
+var BREAKPOINT_ORDER = [
+  "base",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl"
+];
+function isResponsiveObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && BREAKPOINT_ORDER.some((bp) => bp in value);
+}
+function resolveResponsiveValue(value, defaultValue) {
+  if (!isResponsiveObject(value)) {
+    return value;
+  }
+  for (const bp of BREAKPOINT_ORDER) {
+    if (bp in value && value[bp] !== void 0) {
+      return value[bp];
+    }
+  }
+  return defaultValue;
+}
+function generateResponsiveDataAttr(value) {
+  if (!isResponsiveObject(value)) {
+    return value;
+  }
+  const parts = [];
+  for (const bp of BREAKPOINT_ORDER) {
+    if (bp in value && value[bp] !== void 0) {
+      if (bp === "base") {
+        parts.push(value[bp]);
+      } else {
+        parts.push(`${bp}:${value[bp]}`);
+      }
+    }
+  }
+  return parts.join(" ");
+}
+
+// src/components/button.tsx
+var Button = forwardRef((props, forwardedRef) => {
+  const {
+    variant = "primary",
+    size = "md",
+    disabled = false,
+    loading = false,
+    type = "button",
+    onClick,
+    children,
+    className,
+    ...rest
+  } = props;
+  const internalRef = useRef(null);
+  const onClickRef = useRef(onClick);
+  const loadingRef = useRef(loading);
+  onClickRef.current = onClick;
+  loadingRef.current = loading;
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  const handleClick = useCallback((event) => {
+    if (loadingRef.current) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    onClickRef.current?.(event);
+  }, []);
+  useEffect(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    element.addEventListener("click", handleClick);
+    return () => element.removeEventListener("click", handleClick);
+  }, [handleClick]);
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : void 0;
+  return createElement(
+    "ds-button",
+    {
+      ref: internalRef,
+      variant,
+      size: resolvedSize,
+      disabled: disabled || void 0,
+      loading: loading || void 0,
+      type,
+      class: className,
+      // Add responsive data attribute for CSS targeting
+      "data-size-responsive": responsiveSizeAttr,
+      ...rest
+    },
+    children
+  );
+});
+Button.displayName = "Button";
+
+// src/components/input.tsx
+import {
+  createElement as createElement2,
+  forwardRef as forwardRef2,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useRef as useRef2
+} from "react";
+var Input = forwardRef2((props, forwardedRef) => {
+  const {
+    type = "text",
+    size = "md",
+    name,
+    value,
+    placeholder,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    error = false,
+    minLength,
+    maxLength,
+    pattern,
+    onChange,
+    onValueChange,
+    className,
+    ...rest
+  } = props;
+  const internalRef = useRef2(null);
+  const onChangeRef = useRef2(onChange);
+  const onValueChangeRef = useRef2(onValueChange);
+  onChangeRef.current = onChange;
+  onValueChangeRef.current = onValueChange;
+  useEffect2(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  const handleInputEvent = useCallback2((event) => {
+    const customEvent = event;
+    onValueChangeRef.current?.(customEvent.detail.value, event);
+  }, []);
+  const handleChangeEvent = useCallback2((event) => {
+    const customEvent = event;
+    onChangeRef.current?.(customEvent.detail.value, event);
+  }, []);
+  useEffect2(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    element.addEventListener("input", handleInputEvent);
+    element.addEventListener("change", handleChangeEvent);
+    return () => {
+      element.removeEventListener("input", handleInputEvent);
+      element.removeEventListener("change", handleChangeEvent);
+    };
+  }, [handleInputEvent, handleChangeEvent]);
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : void 0;
+  return createElement2("ds-input", {
+    ref: internalRef,
+    type,
+    size: resolvedSize,
+    name,
+    value,
+    placeholder,
+    disabled: disabled || void 0,
+    readonly: readOnly || void 0,
+    required: required || void 0,
+    error: error || void 0,
+    minlength: minLength,
+    maxlength: maxLength,
+    pattern,
+    class: className,
+    // Add responsive data attribute for CSS targeting
+    "data-size-responsive": responsiveSizeAttr,
+    ...rest
+  });
+});
+Input.displayName = "Input";
+
+// src/utils/merge-props.ts
+function composeEventHandlers(parentHandler, childHandler) {
+  return (event) => {
+    childHandler?.(event);
+    if (!("defaultPrevented" in event) || !event.defaultPrevented) {
+      parentHandler?.(event);
+    }
+  };
+}
+function mergeClassNames(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+function mergeStyles(parentStyle, childStyle) {
+  if (!parentStyle && !childStyle) return void 0;
+  if (!parentStyle) return childStyle;
+  if (!childStyle) return parentStyle;
+  return { ...parentStyle, ...childStyle };
+}
+function isEventHandler(propName) {
+  return /^on[A-Z]/.test(propName);
+}
+function mergeProps(slotProps, childProps) {
+  const result = { ...slotProps };
+  for (const key in childProps) {
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    if (key === "className") {
+      result[key] = mergeClassNames(
+        slotValue,
+        childValue
+      );
+    } else if (key === "style") {
+      result[key] = mergeStyles(
+        slotValue,
+        childValue
+      );
+    } else if (isEventHandler(key) && typeof slotValue === "function" && typeof childValue === "function") {
+      result[key] = composeEventHandlers(
+        slotValue,
+        childValue
+      );
+    } else if (childValue !== void 0) {
+      result[key] = childValue;
+    }
+  }
+  return result;
+}
+
+// src/primitives/slot.tsx
+import {
+  Children,
+  cloneElement,
+  forwardRef as forwardRef3,
+  isValidElement,
+  useEffect as useEffect3,
+  useRef as useRef3
+} from "react";
+function mergeRefs(...refs) {
+  return (instance) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(instance);
+      } else if (ref && typeof ref === "object") {
+        ref.current = instance;
+      }
+    }
+  };
+}
+var Slot = forwardRef3(
+  ({ children, ...slotProps }, forwardedRef) => {
+    const childrenArray = Children.toArray(children);
+    const internalRef = useRef3(null);
+    const validChildren = childrenArray.filter(
+      (child2) => child2 !== null && child2 !== void 0 && typeof child2 !== "boolean"
+    );
+    if (validChildren.length === 0) {
+      throw new Error("Slot expects a single React element child");
+    }
+    if (validChildren.length > 1) {
+      throw new Error("Slot expects a single React element child, received multiple children");
+    }
+    const child = validChildren[0];
+    if (!isValidElement(child)) {
+      throw new Error(`Slot expects a single React element child, received ${typeof child}`);
+    }
+    const isCustomComponent = typeof child.type === "function" || typeof child.type === "object";
+    useEffect3(() => {
+      if (process.env.NODE_ENV !== "production" && isCustomComponent && internalRef.current === null) {
+        const componentName = typeof child.type === "function" ? child.type.displayName || child.type.name || "Component" : "Component";
+        console.warn(
+          `[Slot] The child component "${componentName}" doesn't forward refs. When using asChild, ensure the child component is wrapped with React.forwardRef() and forwards the ref to its underlying DOM element. This is required for proper focus management and accessibility.`
+        );
+      }
+    }, [isCustomComponent, child.type]);
+    const childRef = child.ref;
+    const mergedProps = mergeProps(
+      slotProps,
+      child.props
+    );
+    return cloneElement(child, {
+      ...mergedProps,
+      ref: mergeRefs(forwardedRef, childRef, internalRef)
+    });
+  }
+);
+Slot.displayName = "Slot";
+
+// src/components/link.tsx
+import { createElement as createElement3, forwardRef as forwardRef4, useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4 } from "react";
+var Link = forwardRef4((props, forwardedRef) => {
+  const {
+    href,
+    external = false,
+    variant = "default",
+    onNavigate,
+    asChild = false,
+    children,
+    className,
+    ...rest
+  } = props;
+  const internalRef = useRef4(null);
+  const onNavigateRef = useRef4(onNavigate);
+  onNavigateRef.current = onNavigate;
+  useEffect4(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  const handleNavigate = useCallback3((event) => {
+    onNavigateRef.current?.(event);
+  }, []);
+  useEffect4(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    element.addEventListener("ds:navigate", handleNavigate);
+    return () => element.removeEventListener("ds:navigate", handleNavigate);
+  }, [handleNavigate]);
+  if (asChild) {
+    const linkClasses = mergeClassNames(
+      "ds-link",
+      `ds-link--${variant}`,
+      external && "ds-link--external",
+      className
+    );
+    return createElement3(
+      Slot,
+      {
+        ref: internalRef,
+        className: linkClasses,
+        ...rest
+      },
+      children
+    );
+  }
+  return createElement3(
+    "ds-link",
+    {
+      ref: internalRef,
+      href,
+      external: external || void 0,
+      variant,
+      class: className,
+      ...rest
+    },
+    children
+  );
+});
+Link.displayName = "Link";
+
+// src/components/icon.tsx
+import { createElement as createElement4, forwardRef as forwardRef5, useEffect as useEffect5, useRef as useRef5 } from "react";
+var Icon = forwardRef5((props, forwardedRef) => {
+  const { name, size = "md", label, color, className, ...rest } = props;
+  const internalRef = useRef5(null);
+  useEffect5(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : void 0;
+  return createElement4("ds-icon", {
+    ref: internalRef,
+    name,
+    size: resolvedSize,
+    label: label || void 0,
+    color: color || void 0,
+    class: className,
+    // Add responsive data attribute for CSS targeting
+    "data-size-responsive": responsiveSizeAttr,
+    ...rest
+  });
+});
+Icon.displayName = "Icon";
+
+// src/components/spinner.tsx
+import { createElement as createElement5, forwardRef as forwardRef6, useEffect as useEffect6, useRef as useRef6 } from "react";
+var Spinner = forwardRef6((props, forwardedRef) => {
+  const { size = "md", label = "Loading", className, ...rest } = props;
+  const internalRef = useRef6(null);
+  useEffect6(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : void 0;
+  return createElement5("ds-spinner", {
+    ref: internalRef,
+    size: resolvedSize,
+    label,
+    class: className,
+    // Add responsive data attribute for CSS targeting
+    "data-size-responsive": responsiveSizeAttr,
+    ...rest
+  });
+});
+Spinner.displayName = "Spinner";
+
+// src/components/visually-hidden.tsx
+import { createElement as createElement6, forwardRef as forwardRef7, useEffect as useEffect7, useRef as useRef7 } from "react";
+var VisuallyHidden = forwardRef7(
+  (props, forwardedRef) => {
+    const { focusable = false, children, className, ...rest } = props;
+    const internalRef = useRef7(null);
+    useEffect7(() => {
+      if (typeof forwardedRef === "function") {
+        forwardedRef(internalRef.current);
+      } else if (forwardedRef) {
+        forwardedRef.current = internalRef.current;
+      }
+    }, [forwardedRef]);
+    return createElement6(
+      "ds-visually-hidden",
+      {
+        ref: internalRef,
+        focusable: focusable || void 0,
+        class: className,
+        ...rest
+      },
+      children
+    );
+  }
+);
+VisuallyHidden.displayName = "VisuallyHidden";
+
+// src/components/text.tsx
+import { createElement as createElement7, forwardRef as forwardRef8 } from "react";
+function buildTextClasses(props) {
+  const classes = [];
+  if (props.size) {
+    classes.push(`ds-text-${props.size}`);
+  }
+  if (props.weight) {
+    classes.push(`ds-font-${props.weight}`);
+  }
+  if (props.variant && props.variant !== "default") {
+    classes.push(`ds-text-${props.variant}`);
+  }
+  if (props.truncate) {
+    classes.push("ds-truncate");
+  }
+  return classes;
+}
+var Text = forwardRef8((props, ref) => {
+  const {
+    asChild = false,
+    size = "md",
+    weight = "normal",
+    variant = "default",
+    truncate = false,
+    className,
+    children,
+    ...rest
+  } = props;
+  const textClasses = buildTextClasses({ size, weight, variant, truncate });
+  const allClasses = mergeClassNames(...textClasses, className);
+  const Component = asChild ? Slot : "span";
+  return createElement7(
+    Component,
+    {
+      ref,
+      className: allClasses || void 0,
+      ...rest
+    },
+    children
+  );
+});
+Text.displayName = "Text";
+
+// src/primitives/box.tsx
+import { createElement as createElement8, forwardRef as forwardRef9 } from "react";
+function buildSpacingClasses(props) {
+  const classes = [];
+  if (props.p !== void 0) classes.push(`ds-p-${props.p}`);
+  if (props.px !== void 0) classes.push(`ds-px-${props.px}`);
+  if (props.py !== void 0) classes.push(`ds-py-${props.py}`);
+  if (props.pt !== void 0) classes.push(`ds-pt-${props.pt}`);
+  if (props.pr !== void 0) classes.push(`ds-pr-${props.pr}`);
+  if (props.pb !== void 0) classes.push(`ds-pb-${props.pb}`);
+  if (props.pl !== void 0) classes.push(`ds-pl-${props.pl}`);
+  if (props.m !== void 0) classes.push(`ds-m-${props.m}`);
+  if (props.mx !== void 0) classes.push(`ds-mx-${props.mx}`);
+  if (props.my !== void 0) classes.push(`ds-my-${props.my}`);
+  if (props.mt !== void 0) classes.push(`ds-mt-${props.mt}`);
+  if (props.mr !== void 0) classes.push(`ds-mr-${props.mr}`);
+  if (props.mb !== void 0) classes.push(`ds-mb-${props.mb}`);
+  if (props.ml !== void 0) classes.push(`ds-ml-${props.ml}`);
+  if (props.gap !== void 0) classes.push(`ds-gap-${props.gap}`);
+  return classes;
+}
+function buildLayoutClasses(props) {
+  const classes = [];
+  if (props.display) {
+    classes.push(`ds-d-${props.display}`);
+  }
+  if (props.flexDirection) {
+    const dirMap = {
+      row: "ds-flex-row",
+      "row-reverse": "ds-flex-row-reverse",
+      column: "ds-flex-col",
+      "column-reverse": "ds-flex-col-reverse"
+    };
+    classes.push(dirMap[props.flexDirection]);
+  }
+  if (props.alignItems) {
+    classes.push(`ds-items-${props.alignItems}`);
+  }
+  if (props.justifyContent) {
+    classes.push(`ds-justify-${props.justifyContent}`);
+  }
+  if (props.flexWrap) {
+    const wrapMap = {
+      wrap: "ds-flex-wrap",
+      nowrap: "ds-flex-nowrap",
+      "wrap-reverse": "ds-flex-wrap-reverse"
+    };
+    classes.push(wrapMap[props.flexWrap]);
+  }
+  if (props.flexGrow !== void 0) {
+    classes.push(props.flexGrow === 1 ? "ds-grow" : "ds-grow-0");
+  }
+  if (props.flexShrink !== void 0) {
+    classes.push(props.flexShrink === 0 ? "ds-shrink-0" : "ds-shrink");
+  }
+  return classes;
+}
+var Box = forwardRef9((props, ref) => {
+  const {
+    asChild = false,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    gap,
+    display,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    flexWrap,
+    flexGrow,
+    flexShrink,
+    className,
+    style,
+    children,
+    ...rest
+  } = props;
+  const spacingClasses = buildSpacingClasses(props);
+  const layoutClasses = buildLayoutClasses(props);
+  const allClasses = mergeClassNames(...spacingClasses, ...layoutClasses, className);
+  const Component = asChild ? Slot : "div";
+  return createElement8(
+    Component,
+    {
+      ref,
+      className: allClasses || void 0,
+      style,
+      ...rest
+    },
+    children
+  );
+});
+Box.displayName = "Box";
+
+// src/primitives/portal.tsx
+import { useEffect as useEffect8, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx } from "react/jsx-runtime";
+function getContainer(container, containerSelector) {
+  if (typeof document === "undefined") return null;
+  if (container) return container;
+  if (containerSelector) {
+    return document.querySelector(containerSelector);
+  }
+  return document.body;
+}
+function Portal({
+  children,
+  container,
+  containerSelector,
+  disabled = false
+}) {
+  const [mounted, setMounted] = useState(false);
+  useEffect8(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  if (disabled || !mounted) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const portalContainer = getContainer(container, containerSelector);
+  if (!portalContainer) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return createPortal(children, portalContainer);
+}
+Portal.displayName = "Portal";
+
+// src/primitives/focus-scope.tsx
+import { createFocusScope } from "@hypoth-ui/primitives-dom";
+import {
+  createElement as createElement9,
+  forwardRef as forwardRef10,
+  useEffect as useEffect9,
+  useImperativeHandle,
+  useRef as useRef8
+} from "react";
+var FocusScope = forwardRef10(
+  ({
+    children,
+    trap = true,
+    restoreFocus = true,
+    autoFocus = true,
+    initialFocus,
+    returnFocus,
+    onFocusOutside,
+    active = true,
+    className,
+    as: Component = "div"
+  }, ref) => {
+    const containerRef = useRef8(null);
+    const scopeRef = useRef8(null);
+    useImperativeHandle(ref, () => ({
+      focusFirst: () => scopeRef.current?.focusFirst(),
+      focusLast: () => scopeRef.current?.focusLast(),
+      getFocusableElements: () => scopeRef.current?.getFocusableElements() ?? []
+    }));
+    useEffect9(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const options = {
+        trap,
+        restoreFocus,
+        autoFocus,
+        initialFocus: initialFocus?.current ?? null,
+        returnFocus: returnFocus?.current ?? null,
+        onFocusOutside
+      };
+      scopeRef.current = createFocusScope(container, options);
+      if (active) {
+        scopeRef.current.activate();
+      }
+      return () => {
+        scopeRef.current?.deactivate();
+        scopeRef.current = null;
+      };
+    }, [trap, restoreFocus, autoFocus, initialFocus, returnFocus, onFocusOutside, active]);
+    useEffect9(() => {
+      if (!scopeRef.current) return;
+      if (active) {
+        scopeRef.current.activate();
+      } else {
+        scopeRef.current.deactivate();
+      }
+    }, [active]);
+    return createElement9(Component, { ref: containerRef, className }, children);
+  }
+);
+FocusScope.displayName = "FocusScope";
+
+// src/primitives/client-only.tsx
+import { useEffect as useEffect10, useState as useState2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+function ClientOnly({ children, fallback = null }) {
+  const [mounted, setMounted] = useState2(false);
+  useEffect10(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx2(Fragment2, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx2(Fragment2, { children });
+}
+ClientOnly.displayName = "ClientOnly";
+function useIsClient() {
+  const [isClient, setIsClient] = useState2(false);
+  useEffect10(() => {
+    setIsClient(true);
+  }, []);
+  return isClient;
+}
+
+// src/components/alert/index.tsx
+import { forwardRef as forwardRef11, useCallback as useCallback4 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var VARIANT_ICONS = {
+  info: /* @__PURE__ */ jsx3("svg", { className: "ds-alert__icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  success: /* @__PURE__ */ jsx3("svg", { className: "ds-alert__icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  warning: /* @__PURE__ */ jsx3("svg", { className: "ds-alert__icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  error: /* @__PURE__ */ jsx3("svg", { className: "ds-alert__icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",
+      clipRule: "evenodd"
+    }
+  ) })
+};
+var CLOSE_ICON = /* @__PURE__ */ jsx3("svg", { className: "ds-alert__close-icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) });
+function getRole(variant) {
+  return variant === "error" || variant === "warning" ? "alert" : "status";
+}
+var Alert = forwardRef11(
+  ({
+    variant = "info",
+    title,
+    closable = false,
+    hideIcon = false,
+    icon,
+    action,
+    onClose,
+    children,
+    className,
+    ...restProps
+  }, ref) => {
+    const role = getRole(variant);
+    const handleClose = useCallback4(() => {
+      onClose?.();
+    }, [onClose]);
+    const handleKeyDown = useCallback4(
+      (event) => {
+        if (event.key === "Escape" && closable) {
+          handleClose();
+        }
+      },
+      [closable, handleClose]
+    );
+    const alertClassName = ["ds-alert", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: alertClassName,
+        role,
+        "aria-live": role === "alert" ? "assertive" : "polite",
+        "data-variant": variant,
+        "data-closable": closable || void 0,
+        onKeyDown: handleKeyDown,
+        ...restProps,
+        children: [
+          !hideIcon && (icon || VARIANT_ICONS[variant]),
+          /* @__PURE__ */ jsxs("div", { className: "ds-alert__content", children: [
+            title && /* @__PURE__ */ jsx3("p", { className: "ds-alert__title", children: title }),
+            /* @__PURE__ */ jsx3("div", { className: "ds-alert__description", children }),
+            action && /* @__PURE__ */ jsx3("div", { className: "ds-alert__action", children: action })
+          ] }),
+          closable && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              className: "ds-alert__close",
+              type: "button",
+              "aria-label": "Dismiss alert",
+              onClick: handleClose,
+              children: CLOSE_ICON
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+// src/components/toast/use-toast.ts
+import { useCallback as useCallback7, useContext } from "react";
+
+// src/components/toast/provider.tsx
+import { createContext, useCallback as useCallback6, useMemo, useState as useState4 } from "react";
+
+// src/components/toast/toast.tsx
+import { useCallback as useCallback5, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var VARIANT_ICONS2 = {
+  info: /* @__PURE__ */ jsx4("svg", { className: "ds-toast__icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  success: /* @__PURE__ */ jsx4("svg", { className: "ds-toast__icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  warning: /* @__PURE__ */ jsx4("svg", { className: "ds-toast__icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  error: /* @__PURE__ */ jsx4("svg", { className: "ds-toast__icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",
+      clipRule: "evenodd"
+    }
+  ) })
+};
+var CLOSE_ICON2 = /* @__PURE__ */ jsx4("svg", { className: "ds-toast__close-icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) });
+function ToastItem({ toast, onDismiss, onPause, onResume }) {
+  const [isPaused, setIsPaused] = useState3(false);
+  const handleMouseEnter = useCallback5(() => {
+    setIsPaused(true);
+    onPause();
+  }, [onPause]);
+  const handleMouseLeave = useCallback5(() => {
+    setIsPaused(false);
+    onResume();
+  }, [onResume]);
+  const handleActionClick = useCallback5(() => {
+    toast.action?.onClick();
+    onDismiss();
+  }, [toast.action, onDismiss]);
+  const variant = toast.variant ?? "info";
+  return /* @__PURE__ */ jsxs2(
+    "output",
+    {
+      className: "ds-toast",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "data-variant": variant,
+      "data-state": toast.state,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        VARIANT_ICONS2[variant],
+        /* @__PURE__ */ jsxs2("div", { className: "ds-toast__content", children: [
+          /* @__PURE__ */ jsx4("p", { className: "ds-toast__title", children: toast.title }),
+          toast.description && /* @__PURE__ */ jsx4("p", { className: "ds-toast__description", children: toast.description }),
+          toast.action && /* @__PURE__ */ jsx4("div", { className: "ds-toast__action", children: /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              className: "ds-button ds-button--sm ds-button--ghost",
+              onClick: handleActionClick,
+              children: toast.action.label
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            className: "ds-toast__close",
+            type: "button",
+            "aria-label": "Dismiss notification",
+            onClick: onDismiss,
+            children: CLOSE_ICON2
+          }
+        ),
+        toast.duration && toast.duration > 0 && /* @__PURE__ */ jsx4("div", { className: "ds-toast__progress", children: /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "ds-toast__progress-bar",
+            style: {
+              animation: `ds-toast-progress ${toast.duration}ms linear forwards`,
+              animationPlayState: isPaused ? "paused" : "running"
+            }
+          }
+        ) })
+      ]
+    }
+  );
+}
+ToastItem.displayName = "ToastItem";
+
+// src/components/toast/provider.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ToastContext = createContext(null);
+var toastIdCounter = 0;
+function generateId() {
+  return `toast-${++toastIdCounter}-${Date.now()}`;
+}
+function ToastProvider({
+  position = "top-right",
+  max = 5,
+  duration: defaultDuration = 5e3,
+  children
+}) {
+  const [toasts, setToasts] = useState4([]);
+  const timersRef = useMemo(() => /* @__PURE__ */ new Map(), []);
+  const show = useCallback6(
+    (options) => {
+      const id = generateId();
+      const duration = options.duration ?? defaultDuration;
+      const newToast = {
+        id,
+        title: options.title,
+        description: options.description,
+        variant: options.variant ?? "info",
+        duration,
+        action: options.action,
+        state: "entering",
+        createdAt: Date.now()
+      };
+      setToasts((prev) => {
+        const updated = [newToast, ...prev];
+        if (updated.length > max) {
+          const toRemove = updated.slice(max);
+          for (const t of toRemove) {
+            if (timersRef.has(t.id)) {
+              clearTimeout(timersRef.get(t.id));
+              timersRef.delete(t.id);
+            }
+          }
+          return updated.slice(0, max);
+        }
+        return updated;
+      });
+      setTimeout(() => {
+        setToasts(
+          (prev) => prev.map((t) => t.id === id ? { ...t, state: "visible" } : t)
+        );
+      }, 200);
+      if (duration > 0) {
+        const timerId = setTimeout(() => {
+          dismiss(id);
+        }, duration);
+        timersRef.set(id, timerId);
+      }
+      return id;
+    },
+    [defaultDuration, max, timersRef]
+  );
+  const dismiss = useCallback6(
+    (id) => {
+      if (timersRef.has(id)) {
+        clearTimeout(timersRef.get(id));
+        timersRef.delete(id);
+      }
+      setToasts(
+        (prev) => prev.map(
+          (t) => t.id === id && t.state !== "exiting" && t.state !== "dismissed" ? { ...t, state: "exiting" } : t
+        )
+      );
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, 150);
+    },
+    [timersRef]
+  );
+  const dismissAll = useCallback6(() => {
+    for (const toast of toasts) {
+      dismiss(toast.id);
+    }
+  }, [toasts, dismiss]);
+  const pause = useCallback6(
+    (id) => {
+      if (timersRef.has(id)) {
+        clearTimeout(timersRef.get(id));
+        timersRef.delete(id);
+      }
+    },
+    [timersRef]
+  );
+  const resume = useCallback6(
+    (id) => {
+      const toast = toasts.find((t) => t.id === id);
+      if (toast?.duration && toast.duration > 0 && toast.state === "visible") {
+        const elapsed = Date.now() - toast.createdAt;
+        const remaining = Math.max(toast.duration - elapsed, 1e3);
+        const timerId = setTimeout(() => {
+          dismiss(id);
+        }, remaining);
+        timersRef.set(id, timerId);
+      }
+    },
+    [toasts, dismiss, timersRef]
+  );
+  const contextValue = useMemo(
+    () => ({ show, dismiss, dismissAll, pause, resume }),
+    [show, dismiss, dismissAll, pause, resume]
+  );
+  return /* @__PURE__ */ jsxs3(ToastContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx5(Portal, { children: /* @__PURE__ */ jsx5(
+      "section",
+      {
+        className: "ds-toast-viewport",
+        "data-position": position,
+        "aria-label": "Notifications",
+        "aria-live": "polite",
+        children: toasts.map((toast) => /* @__PURE__ */ jsx5(
+          ToastItem,
+          {
+            toast,
+            onDismiss: () => dismiss(toast.id),
+            onPause: () => pause(toast.id),
+            onResume: () => resume(toast.id)
+          },
+          toast.id
+        ))
+      }
+    ) })
+  ] });
+}
+ToastProvider.displayName = "Toast.Provider";
+
+// src/components/toast/use-toast.ts
+function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a Toast.Provider");
+  }
+  const toast = useCallback7(
+    (options) => {
+      return context.show(options);
+    },
+    [context]
+  );
+  const dismiss = useCallback7(
+    (id) => {
+      context.dismiss(id);
+    },
+    [context]
+  );
+  const dismissAll = useCallback7(() => {
+    context.dismissAll();
+  }, [context]);
+  return { toast, dismiss, dismissAll };
+}
+
+// src/components/toast/index.tsx
+var Toast = {
+  Provider: ToastProvider
+};
+
+// src/components/progress/index.tsx
+import { createElement as createElement10, forwardRef as forwardRef12 } from "react";
+import "@hypoth-ui/wc";
+var Progress = forwardRef12(function Progress2({
+  value,
+  max = 100,
+  variant = "linear",
+  size = "md",
+  label,
+  showValue = false,
+  className,
+  ...props
+}, ref) {
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : void 0;
+  return createElement10("ds-progress", {
+    ref,
+    value,
+    max,
+    variant,
+    size: resolvedSize,
+    label,
+    "show-value": showValue || void 0,
+    class: className,
+    // Add responsive data attribute for CSS targeting
+    "data-size-responsive": responsiveSizeAttr,
+    ...props
+  });
+});
+
+// src/components/avatar/avatar-group.tsx
+import { createElement as createElement11, forwardRef as forwardRef13 } from "react";
+import "@hypoth-ui/wc";
+var AvatarGroup = forwardRef13(function AvatarGroup2({ max = 5, size = "md", children, className, ...props }, ref) {
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : void 0;
+  return createElement11(
+    "ds-avatar-group",
+    {
+      ref,
+      max,
+      size: resolvedSize,
+      class: className,
+      // Add responsive data attribute for CSS targeting
+      "data-size-responsive": responsiveSizeAttr,
+      ...props
+    },
+    children
+  );
+});
+
+// src/components/avatar/avatar.tsx
+import { createElement as createElement12, forwardRef as forwardRef14 } from "react";
+import "@hypoth-ui/wc";
+var Avatar = forwardRef14(function Avatar2({
+  src,
+  alt,
+  name,
+  size = "md",
+  shape = "circle",
+  status,
+  showStatus = false,
+  className,
+  ...props
+}, ref) {
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : void 0;
+  return createElement12("ds-avatar", {
+    ref,
+    src,
+    alt,
+    name,
+    size: resolvedSize,
+    shape,
+    status,
+    "show-status": showStatus || void 0,
+    class: className,
+    // Add responsive data attribute for CSS targeting
+    "data-size-responsive": responsiveSizeAttr,
+    ...props
+  });
+});
+
+// src/components/avatar/index.tsx
+var Avatar3 = Object.assign(Avatar, {
+  Group: AvatarGroup
+});
+
+// src/components/table/body.tsx
+import { createElement as createElement13, forwardRef as forwardRef15 } from "react";
+import "@hypoth-ui/wc";
+var TableBody = forwardRef15(function TableBody2({ children, className, ...props }, ref) {
+  return createElement13("ds-table-body", { ref, class: className, ...props }, children);
+});
+
+// src/components/table/cell.tsx
+import { createElement as createElement14, forwardRef as forwardRef16 } from "react";
+import "@hypoth-ui/wc";
+var TableCell = forwardRef16(function TableCell2({ align = "left", colSpan = 1, rowSpan = 1, children, className, ...props }, ref) {
+  return createElement14(
+    "ds-table-cell",
+    { ref, align, colspan: colSpan, rowspan: rowSpan, class: className, ...props },
+    children
+  );
+});
+
+// src/components/table/head.tsx
+import {
+  createElement as createElement15,
+  forwardRef as forwardRef17,
+  useEffect as useEffect11,
+  useRef as useRef9
+} from "react";
+import "@hypoth-ui/wc";
+var TableHead = forwardRef17(function TableHead2({
+  column,
+  align = "left",
+  sortable = false,
+  sortDirection = "none",
+  width,
+  onSort,
+  children,
+  className,
+  ...props
+}, forwardedRef) {
+  const internalRef = useRef9(null);
+  useEffect11(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  useEffect11(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    const handleSort = (e) => {
+      const event = e;
+      onSort?.(event.detail.column, event.detail.direction);
+    };
+    element.addEventListener("ds:sort", handleSort);
+    return () => element.removeEventListener("ds:sort", handleSort);
+  }, [onSort]);
+  return createElement15(
+    "ds-table-head",
+    {
+      ref: internalRef,
+      column,
+      align,
+      sortable: sortable || void 0,
+      "sort-direction": sortDirection,
+      width,
+      class: className,
+      ...props
+    },
+    children
+  );
+});
+
+// src/components/table/header.tsx
+import { createElement as createElement16, forwardRef as forwardRef18 } from "react";
+import "@hypoth-ui/wc";
+var TableHeader = forwardRef18(function TableHeader2({ children, className, ...props }, ref) {
+  return createElement16("ds-table-header", { ref, class: className, ...props }, children);
+});
+
+// src/components/table/row.tsx
+import { createElement as createElement17, forwardRef as forwardRef19 } from "react";
+import "@hypoth-ui/wc";
+var TableRow = forwardRef19(function TableRow2({ rowId, selected = false, children, className, ...props }, ref) {
+  return createElement17(
+    "ds-table-row",
+    { ref, "row-id": rowId, selected: selected || void 0, class: className, ...props },
+    children
+  );
+});
+
+// src/components/table/root.tsx
+import { createElement as createElement18, forwardRef as forwardRef20 } from "react";
+import "@hypoth-ui/wc";
+var TableRoot = forwardRef20(function TableRoot2({
+  size = "default",
+  striped = false,
+  borderless = false,
+  fixed = false,
+  stickyHeader = false,
+  caption,
+  children,
+  className,
+  ...props
+}, ref) {
+  return createElement18(
+    "ds-table",
+    {
+      ref,
+      size,
+      striped: striped || void 0,
+      borderless: borderless || void 0,
+      fixed: fixed || void 0,
+      "sticky-header": stickyHeader || void 0,
+      caption,
+      class: className,
+      ...props
+    },
+    children
+  );
+});
+
+// src/components/table/index.tsx
+var Table = Object.assign(TableRoot, {
+  Header: TableHeader,
+  Body: TableBody,
+  Row: TableRow,
+  Head: TableHead,
+  Cell: TableCell
+});
+
+// src/components/skeleton/index.tsx
+import { createElement as createElement19, forwardRef as forwardRef21 } from "react";
+import "@hypoth-ui/wc";
+var Skeleton = forwardRef21(function Skeleton2({
+  variant = "text",
+  size,
+  width,
+  customWidth,
+  customHeight,
+  animation = "wave",
+  label = "Loading...",
+  className,
+  ...props
+}, ref) {
+  const resolvedSize = size ? resolveResponsiveValue(size, "md") : void 0;
+  const isResponsive = size ? isResponsiveObject(size) : false;
+  const responsiveSizeAttr = isResponsive && size ? generateResponsiveDataAttr(size) : void 0;
+  return createElement19("ds-skeleton", {
+    ref,
+    variant,
+    size: resolvedSize,
+    width,
+    "custom-width": customWidth,
+    "custom-height": customHeight,
+    animation,
+    label,
+    class: className,
+    // Add responsive data attribute for CSS targeting
+    "data-size-responsive": responsiveSizeAttr,
+    ...props
+  });
+});
+
+// src/components/badge/index.tsx
+import { createElement as createElement20, forwardRef as forwardRef22 } from "react";
+import "@hypoth-ui/wc";
+var Badge = forwardRef22(function Badge2({
+  content,
+  max,
+  variant = "primary",
+  size = "md",
+  outline = false,
+  dot = false,
+  position = "top-right",
+  pulse = false,
+  className,
+  ...props
+}, ref) {
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : void 0;
+  return createElement20("ds-badge", {
+    ref,
+    content: content?.toString() ?? "",
+    max,
+    variant,
+    size: resolvedSize,
+    outline: outline || void 0,
+    dot: dot || void 0,
+    position,
+    pulse: pulse || void 0,
+    class: className,
+    // Add responsive data attribute for CSS targeting
+    "data-size-responsive": responsiveSizeAttr,
+    ...props
+  });
+});
+
+// src/components/tag/index.tsx
+import {
+  createElement as createElement21,
+  forwardRef as forwardRef23,
+  useEffect as useEffect12,
+  useRef as useRef10
+} from "react";
+import "@hypoth-ui/wc";
+var Tag = forwardRef23(function Tag2({
+  variant = "neutral",
+  size = "md",
+  solid = false,
+  removable = false,
+  clickable = false,
+  disabled = false,
+  value,
+  onRemove,
+  children,
+  className,
+  ...props
+}, forwardedRef) {
+  const internalRef = useRef10(null);
+  useEffect12(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  useEffect12(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    const handleRemove = (e) => {
+      const event = e;
+      onRemove?.(event.detail.value);
+    };
+    element.addEventListener("ds:remove", handleRemove);
+    return () => element.removeEventListener("ds:remove", handleRemove);
+  }, [onRemove]);
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : void 0;
+  return createElement21(
+    "ds-tag",
+    {
+      ref: internalRef,
+      variant,
+      size: resolvedSize,
+      solid: solid || void 0,
+      removable: removable || void 0,
+      clickable: clickable || void 0,
+      disabled: disabled || void 0,
+      value,
+      class: className,
+      // Add responsive data attribute for CSS targeting
+      "data-size-responsive": responsiveSizeAttr,
+      ...props
+    },
+    children
+  );
+});
+
+// src/components/tree/tree-item.tsx
+import {
+  createElement as createElement22,
+  forwardRef as forwardRef24,
+  useEffect as useEffect13,
+  useRef as useRef11
+} from "react";
+import "@hypoth-ui/wc";
+var TreeItem = forwardRef24(function TreeItem2({
+  itemId,
+  expanded = false,
+  selected = false,
+  disabled = false,
+  onExpand,
+  onItemSelect,
+  onActivate,
+  children,
+  className,
+  ...props
+}, forwardedRef) {
+  const internalRef = useRef11(null);
+  useEffect13(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  useEffect13(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    const handleExpand = (e) => {
+      const event = e;
+      onExpand?.(event.detail.itemId, event.detail.expanded);
+    };
+    const handleSelect = (e) => {
+      const event = e;
+      onItemSelect?.(event.detail.itemId, event.detail.selected);
+    };
+    const handleActivate = (e) => {
+      const event = e;
+      onActivate?.(event.detail.itemId);
+    };
+    element.addEventListener("ds:expand", handleExpand);
+    element.addEventListener("ds:select", handleSelect);
+    element.addEventListener("ds:activate", handleActivate);
+    return () => {
+      element.removeEventListener("ds:expand", handleExpand);
+      element.removeEventListener("ds:select", handleSelect);
+      element.removeEventListener("ds:activate", handleActivate);
+    };
+  }, [onExpand, onItemSelect, onActivate]);
+  return createElement22(
+    "ds-tree-item",
+    {
+      ref: internalRef,
+      "item-id": itemId,
+      expanded: expanded || void 0,
+      selected: selected || void 0,
+      disabled: disabled || void 0,
+      class: className,
+      ...props
+    },
+    children
+  );
+});
+
+// src/components/tree/tree.tsx
+import {
+  createElement as createElement23,
+  forwardRef as forwardRef25,
+  useEffect as useEffect14,
+  useRef as useRef12
+} from "react";
+import "@hypoth-ui/wc";
+var TreeRoot = forwardRef25(function TreeRoot2({
+  selectionMode = "single",
+  size = "default",
+  lines = false,
+  label = "Tree",
+  loading = false,
+  loadingText = "Loading...",
+  loadingNodes,
+  onSelectionChange,
+  children,
+  className,
+  ...props
+}, forwardedRef) {
+  const internalRef = useRef12(null);
+  useEffect14(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  useEffect14(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    const handleSelectionChange = (e) => {
+      const event = e;
+      onSelectionChange?.(event.detail.selectedItems);
+    };
+    element.addEventListener("ds:selection-change", handleSelectionChange);
+    return () => element.removeEventListener("ds:selection-change", handleSelectionChange);
+  }, [onSelectionChange]);
+  useEffect14(() => {
+    const element = internalRef.current;
+    if (element && loadingNodes !== void 0) {
+      element.loadingNodes = loadingNodes;
+    }
+  }, [loadingNodes]);
+  return createElement23(
+    "ds-tree",
+    {
+      ref: internalRef,
+      "selection-mode": selectionMode,
+      size,
+      lines: lines || void 0,
+      label,
+      loading: loading || void 0,
+      "loading-text": loadingText,
+      class: className,
+      ...props
+    },
+    children
+  );
+});
+
+// src/components/tree/index.tsx
+var Tree = Object.assign(TreeRoot, {
+  Item: TreeItem
+});
+
+// src/components/list/list-item.tsx
+import {
+  createElement as createElement24,
+  forwardRef as forwardRef26,
+  useEffect as useEffect15,
+  useRef as useRef13
+} from "react";
+import "@hypoth-ui/wc";
+var ListItem = forwardRef26(function ListItem2({
+  itemId,
+  selected = false,
+  disabled = false,
+  value,
+  onItemSelect,
+  onActivate,
+  children,
+  className,
+  ...props
+}, forwardedRef) {
+  const internalRef = useRef13(null);
+  useEffect15(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  useEffect15(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    const handleSelect = (e) => {
+      const event = e;
+      onItemSelect?.(event.detail.itemId, event.detail.value, event.detail.selected);
+    };
+    const handleActivate = (e) => {
+      const event = e;
+      onActivate?.(event.detail.itemId, event.detail.value);
+    };
+    element.addEventListener("ds:select", handleSelect);
+    element.addEventListener("ds:activate", handleActivate);
+    return () => {
+      element.removeEventListener("ds:select", handleSelect);
+      element.removeEventListener("ds:activate", handleActivate);
+    };
+  }, [onItemSelect, onActivate]);
+  return createElement24(
+    "ds-list-item",
+    {
+      ref: internalRef,
+      "item-id": itemId,
+      selected: selected || void 0,
+      disabled: disabled || void 0,
+      value,
+      class: className,
+      ...props
+    },
+    children
+  );
+});
+
+// src/components/list/list.tsx
+import {
+  createElement as createElement25,
+  forwardRef as forwardRef27,
+  useEffect as useEffect16,
+  useRef as useRef14
+} from "react";
+import "@hypoth-ui/wc";
+var ListRoot = forwardRef27(function ListRoot2({
+  selectionMode = "single",
+  orientation = "vertical",
+  size = "default",
+  bordered = false,
+  label = "List",
+  onSelectionChange,
+  children,
+  className,
+  ...props
+}, forwardedRef) {
+  const internalRef = useRef14(null);
+  useEffect16(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  useEffect16(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    const handleSelectionChange = (e) => {
+      const event = e;
+      onSelectionChange?.(event.detail.selectedItems);
+    };
+    element.addEventListener("ds:selection-change", handleSelectionChange);
+    return () => element.removeEventListener("ds:selection-change", handleSelectionChange);
+  }, [onSelectionChange]);
+  return createElement25(
+    "ds-list",
+    {
+      ref: internalRef,
+      "selection-mode": selectionMode,
+      orientation,
+      size,
+      bordered: bordered || void 0,
+      label,
+      class: className,
+      ...props
+    },
+    children
+  );
+});
+
+// src/components/list/index.tsx
+var List = Object.assign(ListRoot, {
+  Item: ListItem
+});
+
+// src/components/calendar/index.tsx
+import { createElement as createElement26, forwardRef as forwardRef28, useEffect as useEffect17, useRef as useRef15 } from "react";
+import "@hypoth-ui/wc";
+var Calendar = forwardRef28(function Calendar2({
+  value,
+  min,
+  max,
+  disabledDates = [],
+  locale = "en-US",
+  size = "default",
+  firstDayOfWeek = 0,
+  onChange,
+  onMonthChange,
+  className,
+  ...props
+}, forwardedRef) {
+  const internalRef = useRef15(null);
+  useEffect17(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  useEffect17(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    const handleChange = (e) => {
+      const event = e;
+      onChange?.(event.detail.value, new Date(event.detail.date));
+    };
+    const handleMonthChange = (e) => {
+      const event = e;
+      onMonthChange?.(event.detail.month, event.detail.year);
+    };
+    element.addEventListener("ds:change", handleChange);
+    element.addEventListener("ds:month-change", handleMonthChange);
+    return () => {
+      element.removeEventListener("ds:change", handleChange);
+      element.removeEventListener("ds:month-change", handleMonthChange);
+    };
+  }, [onChange, onMonthChange]);
+  return createElement26("ds-calendar", {
+    ref: internalRef,
+    value,
+    min,
+    max,
+    "disabled-dates": disabledDates.join(","),
+    locale,
+    size,
+    "first-day-of-week": firstDayOfWeek,
+    class: className,
+    ...props
+  });
+});
+
+// src/components/data-table/index.tsx
+import { createElement as createElement27, forwardRef as forwardRef29, useEffect as useEffect18, useRef as useRef16 } from "react";
+var DataTable = forwardRef29(function DataTable2({
+  virtualized = false,
+  rowHeight = 48,
+  overscan = 5,
+  totalRows = 0,
+  page = 1,
+  pageSize = 10,
+  pageSizes = "10,25,50,100",
+  selectable = false,
+  selectionMode = "multiple",
+  loading = false,
+  sortColumn,
+  sortDirection = "none",
+  filter,
+  emptyMessage = "No data available",
+  onSort,
+  onPageChange,
+  onPageSizeChange,
+  onSelectionChange,
+  children,
+  className
+}, forwardedRef) {
+  const internalRef = useRef16(null);
+  useEffect18(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      forwardedRef.current = internalRef.current;
+    }
+  }, [forwardedRef]);
+  useEffect18(() => {
+    const element = internalRef.current;
+    if (!element) return;
+    const handleSort = (e) => {
+      const event = e;
+      onSort?.(event.detail);
+    };
+    const handlePageChange = (e) => {
+      const event = e;
+      onPageChange?.(event.detail);
+    };
+    const handlePageSizeChange = (e) => {
+      const event = e;
+      onPageSizeChange?.(event.detail);
+    };
+    const handleSelectionChange = (e) => {
+      const event = e;
+      onSelectionChange?.(event.detail);
+    };
+    element.addEventListener("ds:sort", handleSort);
+    element.addEventListener("ds:page-change", handlePageChange);
+    element.addEventListener("ds:page-size-change", handlePageSizeChange);
+    element.addEventListener("ds:selection-change", handleSelectionChange);
+    return () => {
+      element.removeEventListener("ds:sort", handleSort);
+      element.removeEventListener("ds:page-change", handlePageChange);
+      element.removeEventListener("ds:page-size-change", handlePageSizeChange);
+      element.removeEventListener("ds:selection-change", handleSelectionChange);
+    };
+  }, [onSort, onPageChange, onPageSizeChange, onSelectionChange]);
+  return createElement27(
+    "ds-data-table",
+    {
+      ref: internalRef,
+      virtualized: virtualized || void 0,
+      "row-height": rowHeight,
+      overscan,
+      "total-rows": totalRows,
+      page,
+      "page-size": pageSize,
+      "page-sizes": pageSizes,
+      selectable: selectable || void 0,
+      "selection-mode": selectionMode,
+      loading: loading || void 0,
+      "sort-column": sortColumn,
+      "sort-direction": sortDirection,
+      filter,
+      "empty-message": emptyMessage,
+      class: className
+    },
+    children
+  );
+});
+DataTable.displayName = "DataTable";
+
+// src/utils/events.ts
+function createEventHandler(handler) {
+  if (!handler) return void 0;
+  return (event) => {
+    const syntheticEvent = {
+      ...event,
+      nativeEvent: event,
+      currentTarget: event.currentTarget,
+      target: event.target,
+      bubbles: event.bubbles,
+      cancelable: event.cancelable,
+      defaultPrevented: event.defaultPrevented,
+      eventPhase: event.eventPhase,
+      isTrusted: event.isTrusted,
+      preventDefault: () => event.preventDefault(),
+      stopPropagation: () => event.stopPropagation(),
+      persist: () => {
+      },
+      isDefaultPrevented: () => event.defaultPrevented,
+      isPropagationStopped: () => false,
+      type: event.type,
+      timeStamp: event.timeStamp
+    };
+    handler(syntheticEvent);
+  };
+}
+function attachEventListeners(element, events) {
+  const cleanup = [];
+  for (const [eventName, handler] of Object.entries(events)) {
+    if (handler) {
+      element.addEventListener(eventName, handler);
+      cleanup.push(() => element.removeEventListener(eventName, handler));
+    }
+  }
+  return () => {
+    for (const fn of cleanup) {
+      fn();
+    }
+  };
+}
+
+// src/utils/create-component.ts
+import {
+  forwardRef as forwardRef30,
+  useEffect as useEffect19,
+  useRef as useRef17
+} from "react";
+function createComponent(config) {
+  const { tagName, properties = [], events = {}, defaults = {} } = config;
+  const Component = forwardRef30((incomingProps, forwardedRef) => {
+    const props = { ...defaults, ...incomingProps };
+    const internalRef = useRef17(null);
+    const mergedRef = (element) => {
+      internalRef.current = element;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    };
+    useEffect19(() => {
+      const element = internalRef.current;
+      if (!element) return;
+      for (const prop of properties) {
+        const value = props[prop];
+        if (value !== void 0) {
+          element[prop] = value;
+        }
+      }
+    }, [props]);
+    useEffect19(() => {
+      const element = internalRef.current;
+      if (!element) return;
+      const listeners = [];
+      for (const [reactProp, domEvent] of Object.entries(events)) {
+        const handler = props[reactProp];
+        if (handler) {
+          element.addEventListener(domEvent, handler);
+          listeners.push(() => element.removeEventListener(domEvent, handler));
+        }
+      }
+      return () => {
+        for (const cleanup of listeners) {
+          cleanup();
+        }
+      };
+    }, [props]);
+    const elementProps = {};
+    const restProps = {};
+    for (const [key, value] of Object.entries(props)) {
+      if (properties.includes(key) || key in events) {
+      } else if (key === "children" || key === "className" || key === "style") {
+        elementProps[key] = value;
+      } else {
+        restProps[key] = value;
+      }
+    }
+    const React = __require("react");
+    return React.createElement(
+      tagName,
+      { ref: mergedRef, ...elementProps, ...restProps },
+      props.children
+    );
+  });
+  Component.displayName = `React(${tagName})`;
+  return Component;
+}
+
+export {
+  isResponsiveObject,
+  resolveResponsiveValue,
+  generateResponsiveDataAttr,
+  Button,
+  Input,
+  composeEventHandlers,
+  mergeClassNames,
+  mergeStyles,
+  mergeProps,
+  Slot,
+  Link,
+  Icon,
+  Spinner,
+  VisuallyHidden,
+  Text,
+  Box,
+  Portal,
+  FocusScope,
+  ClientOnly,
+  useIsClient,
+  Alert,
+  useToast,
+  Toast,
+  Progress,
+  AvatarGroup,
+  Avatar3 as Avatar,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Table,
+  Skeleton,
+  Badge,
+  Tag,
+  TreeItem,
+  Tree,
+  ListItem,
+  List,
+  Calendar,
+  DataTable,
+  createEventHandler,
+  attachEventListeners,
+  createComponent
+};