@locus-ui/components 0.0.1

package/dist/index.mjs

@@ -0,0 +1,3027 @@
+"use client";
+
+// src/components/accordion/content/accordion-content.tsx
+import clsx2 from "clsx";
+
+// src/utils/get-component-props.ts
+import clsx from "clsx";
+function getComponentProps(props, ...propDefs) {
+  let style = props.style ?? {};
+  const classNames = props.className ? [props.className] : [];
+  const dataAttrs = {};
+  const extractedProps = {};
+  const allProps = Object.assign({}, ...propDefs);
+  const propKeys = Object.keys(allProps);
+  const restProps = { ...props };
+  delete restProps.className;
+  delete restProps.style;
+  for (const key of propKeys) {
+    const prop = allProps[key];
+    const value = props?.[key];
+    delete restProps[key];
+    if (prop.type === "boolean" || prop.type === "string" || prop.type === "value | array" || prop.type === "reactNode" || prop.type === "function") {
+      extractedProps[key] = value;
+      if (prop.cssProperty && value !== void 0 && value !== null) {
+        style = {
+          ...style,
+          [prop.cssProperty]: prop.type === "boolean" ? value ? "1" : "0" : value
+        };
+      }
+      if (prop.dataAttr) {
+        if (value) dataAttrs[`data-${prop.dataAttr}`] = value;
+        else if (prop.default !== void 0) {
+          dataAttrs[`data-${prop.dataAttr}`] = prop.default;
+        }
+      }
+      continue;
+    }
+    const applyValue = (propValue, breakpoint) => {
+      const usedBreakpoint = breakpoint ? `-${breakpoint}` : "";
+      if (prop.type === "enum" || prop.type === "enum | string") {
+        if (propValue !== null && propValue !== void 0) {
+          if (!breakpoint) extractedProps[key] = propValue;
+          if (!prop.values.includes(propValue)) {
+            if (prop.className) {
+              classNames.push(
+                breakpoint ? `${prop.className}-${breakpoint}` : prop.className
+              );
+              style = {
+                ...style,
+                [`--custom-${key}${usedBreakpoint}`]: propValue
+              };
+            }
+            if (prop.dataAttr) {
+              dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;
+            }
+          } else if (prop.dataAttr) {
+            if (propValue === "inherit" && prop.className) {
+              classNames.push(prop.className);
+            }
+            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;
+          }
+        } else if (prop.dataAttr && prop.default) {
+          if (!breakpoint) extractedProps[key] = prop.default;
+          if (prop.dataAttr) {
+            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = prop.default;
+          }
+        }
+      }
+    };
+    if ("responsive" in prop && prop.responsive && value && typeof value === "object" && !Array.isArray(value)) {
+      for (const [bp, bpValue] of Object.entries(value)) {
+        applyValue(bpValue, bp);
+      }
+      if ("dataAttr" in prop && prop.dataAttr) {
+        dataAttrs[`data-${prop.dataAttr}`] = "";
+      }
+    } else applyValue(value);
+  }
+  return {
+    ...restProps,
+    ...extractedProps,
+    style,
+    dataAttrs,
+    className: clsx(classNames)
+  };
+}
+
+// src/components/accordion/accordion-context.ts
+import React from "react";
+var AccordionContext = React.createContext(null);
+function useAccordionContext() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error(
+      "Accordion components must be used within an Accordion.Root"
+    );
+  }
+  return context;
+}
+
+// src/components/accordion/content/accordion-content.props.ts
+var AccordionContentPropDefs = {
+  //
+};
+
+// src/components/accordion/content/accordion-content.tsx
+import { jsx } from "react/jsx-runtime";
+var AccordionContent = (props) => {
+  const context = useAccordionContext();
+  const { className, children, dataAttrs, ...rest } = getComponentProps(
+    props,
+    AccordionContentPropDefs
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-variant": context.variant,
+      className: clsx2("accordion-content", className),
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: "accordion-content-inner", children: /* @__PURE__ */ jsx("div", { children }) })
+    }
+  );
+};
+AccordionContent.displayName = "Accordion.Content";
+
+// src/components/accordion/header/accordion-header.tsx
+import clsx3 from "clsx";
+
+// src/icons/icon-colors.ts
+var colorMap = {
+  currentColor: "currentColor",
+  primary: "rgb(var(--primary))",
+  white: "white",
+  black: "black"
+};
+
+// src/icons/chevron-down.icon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ChevronDown = ({
+  color = "currentColor"
+}) => {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx2(
+        "path",
+        {
+          fill: colorMap[color],
+          d: "M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+};
+
+// src/components/accordion/header/accordion-header.props.ts
+var AccordionHeaderPropDefs = {
+  /** The value of the parent AccordionItem — injected automatically */
+  value: {
+    type: "string"
+  }
+};
+
+// src/components/accordion/header/accordion-header.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var AccordionHeader = (props) => {
+  const context = useAccordionContext();
+  const { className, children, value, dataAttrs, ...rest } = getComponentProps(
+    props,
+    AccordionHeaderPropDefs
+  );
+  const itemOpen = context.multiple ? context.value?.includes(value ?? "") : context.value === value;
+  const handleClick = () => {
+    if (!value) return;
+    if (context.multiple) {
+      const current = context.value ?? [];
+      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+      context.setValue(next.length ? next : null);
+    } else {
+      context.setValue(context.value === value ? null : value);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-open": itemOpen,
+      "data-variant": context.variant,
+      className: clsx3("accordion-header", className),
+      role: "button",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx3("span", { children }),
+        /* @__PURE__ */ jsx3("span", { className: "accordion-header-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(ChevronDown, {}) })
+      ]
+    }
+  );
+};
+AccordionHeader.displayName = "Accordion.Header";
+
+// src/components/accordion/item/accordion-item.tsx
+import clsx4 from "clsx";
+import React3, { useEffect, useMemo } from "react";
+
+// src/utils/filter-children.ts
+import * as React2 from "react";
+function filterChildren(children, allowedDisplayNames, options = {}) {
+  const { parentDisplayName, strict = false } = options;
+  return React2.Children.toArray(children).filter((child) => {
+    if (!React2.isValidElement(child)) return false;
+    const childType = child.type;
+    const displayName = childType?.displayName;
+    if (!displayName || !allowedDisplayNames.includes(displayName)) {
+      const parent = parentDisplayName ?? "Component";
+      const childName = displayName || "Unknown";
+      const allowed = allowedDisplayNames.join(", ");
+      const message = `${parent}: Invalid child "${childName}"${strict ? "" : " was filtered out"}. Only ${allowed} are allowed as direct children.`;
+      if (strict) throw new Error(message);
+      console.warn(message);
+      return false;
+    }
+    return true;
+  });
+}
+
+// src/components/accordion/item/accordion-item.props.ts
+var AccordionItemPropDefs = {
+  /**
+   * Sets the accordion item to be open by default.
+   */
+  open: {
+    type: "boolean"
+  },
+  /**
+   * The value of the accordion item. Automatically generated if not provided.
+   */
+  value: {
+    type: "string"
+  }
+};
+
+// src/components/accordion/item/accordion-item.tsx
+import { jsxs as jsxs2 } from "react/jsx-runtime";
+var ALLOWED_CHILDREN = [
+  AccordionHeader.displayName,
+  AccordionContent.displayName
+];
+var AccordionItem = (props) => {
+  const context = useAccordionContext();
+  const { open, value, className, dataAttrs, ...rest } = getComponentProps(
+    props,
+    AccordionItemPropDefs
+  );
+  const itemOpen = open ?? (context.multiple ? context.value?.includes(value ?? "") : context.value === value);
+  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN, {
+    parentDisplayName: AccordionItem.displayName
+  });
+  const { header, content } = useMemo(() => {
+    const header2 = validChildren.find(
+      (child) => child.type.displayName === AccordionHeader.displayName
+    );
+    const content2 = validChildren.find(
+      (child) => child.type.displayName === AccordionContent.displayName
+    );
+    return { header: header2, content: content2 };
+  }, [validChildren]);
+  useEffect(() => {
+    if (!value) return;
+    return () => {
+      const values = context.itemValues.current;
+      const index = values.indexOf(value);
+      if (index > -1) values.splice(index, 1);
+    };
+  }, [value]);
+  const headerWithValue = header ? React3.cloneElement(header, {
+    value
+  }) : null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-variant": context.variant,
+      className: clsx4("accordion-item", className),
+      ...rest,
+      "data-open": itemOpen,
+      children: [
+        headerWithValue,
+        content
+      ]
+    }
+  );
+};
+AccordionItem.displayName = "Accordion.Item";
+
+// src/components/accordion/root/accordion-root.tsx
+import clsx5 from "clsx";
+import { useMemo as useMemo2, useRef } from "react";
+
+// src/props/align.prop.ts
+var Alignments = ["start", "center", "end"];
+var AlignPropDef = {
+  /**
+   * The alignment of the component.
+   */
+  align: {
+    type: "enum",
+    values: Alignments,
+    dataAttr: "align"
+  }
+};
+
+// src/props/margin.prop.ts
+var marginValues = [
+  "auto",
+  "inherit",
+  "-8",
+  "-6",
+  "-5",
+  "-4",
+  "-3",
+  "-2",
+  "-1",
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "8"
+];
+var MarginPropDefs = {
+  /**
+   * Sets margin on all sides of the element.
+   * Supports scale, auto, inherit, custom, and responsive values.
+   *
+   * @example m="4" // 16px margin on all sides
+   * @example m="-26px" // -26px negative margin custom value
+   * @example m={{ initial: "2", md: "4", lg: "8" }} // responsive margins
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin
+   */
+  m: {
+    type: "enum | string",
+    values: marginValues,
+    dataAttr: "m",
+    className: "lcs-m",
+    responsive: true
+  },
+  /**
+   * Sets margin on the top of the element.
+   * Supports scale, auto, inherit, custom, and responsive values.
+   *
+   * @example mt="4" // 16px margin on all sides
+   * @example mt="-26px" // -26px negative margin custom value
+   * @example mt={{ initial: "2", md: "4", lg: "8" }} // responsive margins
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
+   */
+  mt: {
+    type: "enum | string",
+    values: marginValues,
+    dataAttr: "mt",
+    className: "lcs-mt",
+    responsive: true
+  },
+  /**
+   * Sets margin on the bottom of the element.
+   * Supports scale, auto, inherit, custom, and responsive values.
+   *
+   * @example mb="4" // 16px margin on all sides
+   * @example mb="-26px" // -26px negative margin custom value
+   * @example mb={{ initial: "2", md: "4", lg: "8" }} // responsive margins
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
+   */
+  mb: {
+    type: "enum | string",
+    values: marginValues,
+    dataAttr: "mb",
+    className: "lcs-mb",
+    responsive: true
+  },
+  /**
+   * Sets margin on the left of the element.
+   * Supports scale, auto, inherit, custom, and responsive values.
+   *
+   * @example ml="4" // 16px margin on all sides
+   * @example ml="-26px" // -26px negative margin custom value
+   * @example ml={{ initial: "2", md: "4", lg: "8" }} // responsive margins
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
+   */
+  ml: {
+    type: "enum | string",
+    values: marginValues,
+    dataAttr: "ml",
+    className: "lcs-ml",
+    responsive: true
+  },
+  /**
+   * Sets margin on the right of the element.
+   * Supports scale, auto, inherit, custom, and responsive values.
+   *
+   * @example mr="4" // 16px margin on all sides
+   * @example mr="-26px" // -26px negative margin custom value
+   * @example mr={{ initial: "2", md: "4", lg: "8" }} // responsive margins
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
+   */
+  mr: {
+    type: "enum | string",
+    values: marginValues,
+    dataAttr: "mr",
+    className: "lcs-mr",
+    responsive: true
+  },
+  /**
+   * Sets margin on the left and right (horizontal) sides of the element.
+   * Supports scale, auto, inherit, custom, and responsive values.
+   *
+   * @example mx="4" // 16px horizontal margin
+   * @example mx="-26px" // -26px negative horizontal margin custom value
+   * @example mx={{ initial: "2", md: "4", lg: "8" }} // responsive horizontal margins
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
+   */
+  mx: {
+    type: "enum | string",
+    values: marginValues,
+    dataAttr: "mx",
+    className: "lcs-mx",
+    responsive: true
+  },
+  /**
+   * Sets margin on the top and bottom (vertical) sides of the element.
+   * Supports scale, auto, inherit, custom, and responsive values.
+   *
+   * @example my="4" // 16px vertical margin
+   * @example my="-26px" // -26px negative vertical margin custom value
+   * @example my={{ initial: "2", md: "4", lg: "8" }} // responsive vertical margins
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
+   */
+  my: {
+    type: "enum | string",
+    values: marginValues,
+    dataAttr: "my",
+    className: "lcs-my",
+    responsive: true
+  }
+};
+
+// src/props/padding.prop.ts
+var paddingValues = [
+  "inherit",
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "8"
+];
+var PaddingPropDefs = {
+  /**
+   * Sets padding on all sides of the element.
+   * Supports scale, inherit, custom, and responsive values.
+   *
+   * @example p="4" // 16px padding on all sides
+   * @example p="26px" // 26px padding custom value
+   * @example p={{ initial: "2", md: "4", lg: "8" }} // responsive padding
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding
+   */
+  p: {
+    type: "enum | string",
+    values: paddingValues,
+    dataAttr: "p",
+    className: "lcs-p",
+    responsive: true
+  },
+  /**
+   * Sets padding on the top of the element.
+   * Supports scale, inherit, custom, and responsive values.
+   *
+   * @example pt="4" // 16px top padding
+   * @example pt="26px" // 26px top padding custom value
+   * @example pt={{ initial: "2", md: "4", lg: "8" }} // responsive top padding
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
+   */
+  pt: {
+    type: "enum | string",
+    values: paddingValues,
+    dataAttr: "pt",
+    className: "lcs-pt",
+    responsive: true
+  },
+  /**
+   * Sets padding on the bottom of the element.
+   * Supports scale, inherit, custom, and responsive values.
+   *
+   * @example pb="4" // 16px bottom padding
+   * @example pb="26px" // 26px bottom padding custom value
+   * @example pb={{ initial: "2", md: "4", lg: "8" }} // responsive bottom padding
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
+   */
+  pb: {
+    type: "enum | string",
+    values: paddingValues,
+    dataAttr: "pb",
+    className: "lcs-pb",
+    responsive: true
+  },
+  /**
+   * Sets padding on the left of the element.
+   * Supports scale, inherit, custom, and responsive values.
+   *
+   * @example pl="4" // 16px left padding
+   * @example pl="26px" // 26px left padding custom value
+   * @example pl={{ initial: "2", md: "4", lg: "8" }} // responsive left padding
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
+   */
+  pl: {
+    type: "enum | string",
+    values: paddingValues,
+    dataAttr: "pl",
+    className: "lcs-pl",
+    responsive: true
+  },
+  /**
+   * Sets padding on the right of the element.
+   * Supports scale, inherit, custom, and responsive values.
+   *
+   * @example pr="4" // 16px right padding
+   * @example pr="26px" // 26px right padding custom value
+   * @example pr={{ initial: "2", md: "4", lg: "8" }} // responsive right padding
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
+   */
+  pr: {
+    type: "enum | string",
+    values: paddingValues,
+    dataAttr: "pr",
+    className: "lcs-pr",
+    responsive: true
+  },
+  /**
+   * Sets padding on the left and right (horizontal) sides of the element.
+   * Supports scale, inherit, custom, and responsive values.
+   *
+   * @example px="4" // 16px horizontal padding
+   * @example px="26px" // 26px horizontal padding custom value
+   * @example px={{ initial: "2", md: "4", lg: "8" }} // responsive horizontal padding
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
+   */
+  px: {
+    type: "enum | string",
+    values: paddingValues,
+    dataAttr: "px",
+    className: "lcs-px",
+    responsive: true
+  },
+  /**
+   * Sets padding on the top and bottom (vertical) sides of the element.
+   * Supports scale, inherit, custom, and responsive values.
+   *
+   * @example py="4" // 16px vertical padding
+   * @example py="26px" // 26px vertical padding custom value
+   * @example py={{ initial: "2", md: "4", lg: "8" }} // responsive vertical padding
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
+   */
+  py: {
+    type: "enum | string",
+    values: paddingValues,
+    dataAttr: "py",
+    className: "lcs-py",
+    responsive: true
+  }
+};
+
+// src/props/radius.prop.ts
+var radii = [
+  "none",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "full",
+  "inherit"
+];
+var RadiusPropDefs = {
+  /**
+   * Sets the border-radius of the element.
+   * Supports scaled, inherit, custom, and responsive values.
+   *
+   * @example radius="md" // medium border-radius
+   * @example radius="26px" // 26px border-radius custom value
+   * @example radius={{ initial: "none", lg: "full" }} // responsive border-radius
+   *
+   * @default "theme" // uses the theme's default border-radius value or none if not set
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
+   */
+  radius: {
+    type: "enum | string",
+    values: radii,
+    default: "theme",
+    dataAttr: "radius",
+    className: "lcs-radius",
+    responsive: true
+  },
+  /**
+   * Sets the top border-radius of the element.
+   * Supports scaled, inherit, custom, and responsive values.
+   *
+   * @example radius-t="md" // medium border-radius
+   * @example radius-t="26px" // 26px border-radius custom value
+   * @example radius-t={{ initial: "none", lg: "full" }} // responsive border-radius
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius
+   */
+  "radius-t": {
+    type: "enum | string",
+    values: radii,
+    dataAttr: "radius-t",
+    className: "lcs-radius-t",
+    responsive: true
+  },
+  /**
+   * Sets the right border-radius of the element.
+   * Supports scaled, inherit, custom, and responsive values.
+   *
+   * @example radius-r="md" // medium border-radius
+   * @example radius-r="26px" // 26px border-radius custom value
+   * @example radius-r={{ initial: "none", lg: "full" }} // responsive border-radius
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius
+   */
+  "radius-r": {
+    type: "enum | string",
+    values: radii,
+    dataAttr: "radius-r",
+    className: "lcs-radius-r",
+    responsive: true
+  },
+  /**
+   * Sets the bottom border-radius of the element.
+   * Supports scaled, inherit, custom, and responsive values.
+   *
+   * @example radius-b="md" // medium border-radius
+   * @example radius-b="26px" // 26px border-radius custom value
+   * @example radius-b={{ initial: "none", lg: "full" }} // responsive border-radius
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius
+   */
+  "radius-b": {
+    type: "enum | string",
+    values: radii,
+    dataAttr: "radius-b",
+    className: "lcs-radius-b",
+    responsive: true
+  },
+  /**
+   * Sets the left border-radius of the element.
+   * Supports scaled, inherit, custom, and responsive values.
+   *
+   * @example radius-l="md" // medium border-radius
+   * @example radius-l="26px" // 26px border-radius custom value
+   * @example radius-l={{ initial: "none", lg: "full" }} // responsive border-radius
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-top-radius
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-bottom-radius
+   */
+  "radius-l": {
+    type: "enum | string",
+    values: radii,
+    dataAttr: "radius-l",
+    className: "lcs-radius-l",
+    responsive: true
+  },
+  /**
+   * Sets the top-left border-radius of the element.
+   * Supports scaled, inherit, custom, and responsive values.
+   *
+   * @example radius-tl="md" // medium border-radius
+   * @example radius-tl="26px" // 26px border-radius custom value
+   * @example radius-tl={{ initial: "none", lg: "full" }} // responsive border-radius
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius
+   */
+  "radius-tl": {
+    type: "enum | string",
+    values: radii,
+    dataAttr: "radius-tl",
+    className: "lcs-radius-tl",
+    responsive: true
+  },
+  /**
+   * Sets the top-right border-radius of the element.
+   * Supports scaled, inherit, custom, and responsive values.
+   *
+   * @example "radius-tr"="md" // medium border-radius
+   * @example "radius-tr"="26px" // 26px border-radius custom value
+   * @example "radius-tr"={{ initial: "none", lg: "full" }} // responsive border-radius
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius
+   */
+  "radius-tr": {
+    type: "enum | string",
+    values: radii,
+    dataAttr: "radius-tr",
+    className: "lcs-radius-tr",
+    responsive: true
+  },
+  /**
+   * Sets the bottom-right border-radius of the element.
+   * Supports scaled, inherit, custom, and responsive values.
+   *
+   * @example "radius-br"="md" // medium border-radius
+   * @example "radius-br"="26px" // 26px border-radius custom value
+   * @example "radius-br"={{ initial: "none", lg: "full" }} // responsive border-radius
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius
+   */
+  "radius-br": {
+    type: "enum | string",
+    values: radii,
+    dataAttr: "radius-br",
+    className: "lcs-radius-br",
+    responsive: true
+  },
+  /**
+   * Sets the bottom-left border-radius of the element.
+   * Supports scaled, inherit, custom, and responsive values.
+   *
+   * @example "radius-bl"="md" // medium border-radius
+   * @example "radius-bl"="26px" // 26px border-radius custom value
+   * @example "radius-bl"={{ initial: "none", lg: "full" }} // responsive border-radius
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius
+   */
+  "radius-bl": {
+    type: "enum | string",
+    values: radii,
+    dataAttr: "radius-bl",
+    className: "lcs-radius-bl",
+    responsive: true
+  }
+};
+
+// src/props/roundness.prop.ts
+var roundness = ["1", "2", "3", "4", "5", "6", "inherit"];
+var RoundnessPropDef = {
+  /**
+   * Sets the roundness multiplier for the element's radius.
+   * Supports scaled and inherit values.
+   *
+   * @example roundness="4" // 8px base roundness
+   * @example roundness="inherit" // inherits roundness from parent
+   *
+   * @default "theme" // uses the theme's default roundness value or none if not set
+   */
+  roundness: {
+    type: "enum",
+    values: roundness,
+    default: "theme",
+    dataAttr: "roundness"
+  }
+};
+
+// src/props/size.prop.ts
+var Sizes = ["xs", "sm", "md", "lg", "xl"];
+var SizePropDef = {
+  /**
+   * Sets the size of the component.
+   *
+   * @example size="md" // medium sized component
+   */
+  size: {
+    type: "enum | string",
+    values: Sizes,
+    dataAttr: "size",
+    className: "size"
+  }
+};
+
+// src/props/spacing.prop.ts
+var spacingValues = ["xs", "sm", "md", "lg", "xl", "inherit"];
+var SpacingPropDef = {
+  /**
+   * Sets the spacing scale for the component.
+   * This multiplier affects various layout properties such as margin, padding, and gap values.
+   *
+   * @example spacing="md" // medium spacing scale (1)
+   * @example spacing={{ initial: "sm", lg: "xl" }} // responsive spacing
+   *
+   * @default "theme" // uses the theme's default spacing value or none if not set
+   */
+  spacing: {
+    type: "enum",
+    values: spacingValues,
+    dataAttr: "spacing",
+    default: "theme",
+    responsive: true
+  }
+};
+
+// src/utils/use-controllable-state.ts
+import * as React4 from "react";
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [state, setState] = React4.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : state;
+  const set = React4.useCallback(
+    (value2) => {
+      if (!isControlled) setState(value2);
+      onChange?.(value2);
+    },
+    [isControlled, onChange]
+  );
+  return [current, set];
+}
+
+// src/components/accordion/root/accordion-root.props.ts
+var AccordionVariants = ["solid", "outlined", "muted"];
+var AccordionRootPropsDefs = {
+  /**
+   * Sets the variant style of the accordion ("solid", "outlined", or "muted").
+   */
+  variant: {
+    type: "enum",
+    values: AccordionVariants,
+    dataAttr: "variant"
+  },
+  /**
+   * Allows multiple accordion items to be expanded simultaneously when set to true.
+   */
+  multiple: {
+    type: "boolean"
+  },
+  /**
+   * The value of the accordion.
+   */
+  value: {
+    type: "value | array"
+  },
+  /**
+   * Callback fired when the value of the accordion changes.
+   */
+  onValueChange: {
+    type: "function"
+  }
+};
+
+// src/components/accordion/root/accordion-root.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ALLOWED_CHILDREN2 = [AccordionItem.displayName];
+var AccordionRoot = (props) => {
+  const {
+    variant,
+    multiple,
+    size,
+    value: propValue,
+    onValueChange,
+    className,
+    dataAttrs,
+    ...rest
+  } = getComponentProps(props, AccordionRootPropsDefs, SizePropDef);
+  const [value, setValue] = useControllableState({
+    value: propValue,
+    defaultValue: propValue ?? null,
+    onChange: onValueChange
+  });
+  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN2, {
+    parentDisplayName: AccordionRoot.displayName
+  });
+  const itemsRef = useRef(/* @__PURE__ */ new Map());
+  const itemValues = useRef([]);
+  const contextValue = useMemo2(
+    () => ({
+      variant,
+      multiple,
+      value,
+      setValue,
+      onValueChange,
+      itemsRef,
+      itemValues
+    }),
+    [variant, multiple, value, setValue, onValueChange]
+  );
+  return /* @__PURE__ */ jsx4(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: clsx5("accordion-root", className),
+      ...dataAttrs,
+      ...rest,
+      children: validChildren.map((child, index) => /* @__PURE__ */ jsx4(
+        AccordionItem,
+        {
+          value: child.props.value ?? String(index),
+          ...child.props,
+          children: child.props.children
+        },
+        index
+      ))
+    }
+  ) });
+};
+AccordionRoot.displayName = "Accordion";
+
+// src/components/accordion/accordion.tsx
+var Accordion = Object.assign(AccordionRoot, {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Content: AccordionContent
+});
+
+// src/components/box/box.tsx
+import clsx6 from "clsx";
+import * as React5 from "react";
+
+// src/components/box/box.props.ts
+var BoxPropsDefs = {
+  /**
+   * Defines wether the Box is rendered as a **div** or **span**.
+   *
+   * @example
+   * as="div"
+   * as="span"
+   */
+  // as: {
+  //   type: "enum",
+  //   values: boxAs,
+  //   default: "div",
+  // } satisfies PropDef<(typeof boxAs)[number]>,
+};
+
+// src/components/box/box.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Box = React5.forwardRef((props, ref) => {
+  const { className, dataAttrs, children, ...rest } = getComponentProps(
+    props,
+    BoxPropsDefs,
+    MarginPropDefs,
+    PaddingPropDefs,
+    SpacingPropDef,
+    RadiusPropDefs,
+    RoundnessPropDef
+  );
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref,
+      ...dataAttrs,
+      className: clsx6("lcs-box", className),
+      ...rest,
+      children
+    }
+  );
+});
+Box.displayName = "Box";
+
+// src/components/button/button.tsx
+import clsx7 from "clsx";
+import { useState as useState2 } from "react";
+
+// src/components/button/button.props.ts
+var ButtonVariants = ["solid", "outlined", "muted", "clear"];
+var ButtonRootPropsDefs = {
+  /**
+   * Sets the variant style of the button ("solid", "outlined", "muted", or "clear").
+   */
+  variant: {
+    type: "enum",
+    values: ButtonVariants,
+    dataAttr: "variant"
+  },
+  /**
+   * Enables high contrast mode for better visibility.
+   * @default undefined
+   */
+  highContrast: {
+    type: "boolean",
+    dataAttr: "high-contrast"
+  },
+  /**
+   * Disables the button component.
+   * @default undefined
+   */
+  disabled: {
+    type: "boolean",
+    dataAttr: "disabled"
+  },
+  /**
+   * Makes the button read-only.
+   * @default undefined
+   */
+  readonly: {
+    type: "boolean",
+    dataAttr: "readonly"
+  }
+};
+
+// src/components/button/button.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Button = (props) => {
+  const {
+    color,
+    variant,
+    className,
+    dataAttrs,
+    disabled,
+    highContrast,
+    readonly,
+    ...rest
+  } = getComponentProps(
+    props,
+    ButtonRootPropsDefs,
+    MarginPropDefs,
+    PaddingPropDefs,
+    RadiusPropDefs,
+    SizePropDef
+  );
+  const [hovered, setHovered] = useState2(false);
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      className: clsx7("button", className),
+      "data-color": color ?? true,
+      "data-variant": variant,
+      "data-disabled": disabled ? true : void 0,
+      "data-high-contrast": highContrast ? true : void 0,
+      "data-readonly": readonly ? true : void 0,
+      "data-hovered": hovered ? true : void 0,
+      ...dataAttrs,
+      disabled: disabled || readonly,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ...rest,
+      children: /* @__PURE__ */ jsx6("span", { children: props.children })
+    }
+  );
+};
+
+// src/components/checkbox/indicator/checkbox-indicator.tsx
+import clsx8 from "clsx";
+import React7 from "react";
+
+// src/icons/check-mark.icon.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CheckMark = ({ color = "currentColor" }) => {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      width: "64",
+      height: "64",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx7(
+        "path",
+        {
+          d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+          fill: colorMap[color],
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+};
+
+// src/icons/minus.icon.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Minus = ({ color = "currentColor" }) => {
+  return /* @__PURE__ */ jsx8(
+    "svg",
+    {
+      width: "64",
+      height: "64",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx8(
+        "path",
+        {
+          d: "M3.5 7.5C3.5 7.08579 3.83579 6.75 4.25 6.75H10.75C11.1642 6.75 11.5 7.08579 11.5 7.5C11.5 7.91421 11.1642 8.25 10.75 8.25H4.25C3.83579 8.25 3.5 7.91421 3.5 7.5Z",
+          fill: colorMap[color],
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+};
+
+// src/components/checkbox/checkbox-context.ts
+import React6 from "react";
+var CheckboxContext = React6.createContext(
+  null
+);
+function useCheckboxContext() {
+  const context = React6.useContext(CheckboxContext);
+  if (!context) {
+    throw new Error("Checkbox components must be used within a Checkbox.Root");
+  }
+  return context;
+}
+
+// src/components/checkbox/root/checkbox-root.props.ts
+var CheckboxVariants = ["solid", "outlined", "muted"];
+var CheckboxRootPropsDefs = {
+  /**
+   * Sets the variant style of the checkbox ("solid" or "outlined").
+   */
+  variant: {
+    type: "enum",
+    values: CheckboxVariants,
+    dataAttr: "variant"
+  },
+  /**
+   * Sets the checked state of the checkbox.
+   *
+   * When using an uncontrolled checkbox, use `defaultChecked` instead.
+   * @default undefined
+   */
+  checked: {
+    type: "boolean",
+    dataAttr: "checked"
+  },
+  /**
+   * Sets the indeterminate state of the checkbox.
+   * @default undefined
+   */
+  indeterminate: {
+    type: "boolean",
+    dataAttr: "indeterminate"
+  },
+  /**
+   * Enables high contrast mode for better visibility.
+   * @default undefined
+   */
+  highContrast: {
+    type: "boolean",
+    dataAttr: "high-contrast"
+  },
+  /**
+   * The value of the checkbox (checked state).
+   */
+  value: {
+    type: "boolean"
+  },
+  /**
+   * Sets the default checked state of the checkbox.
+   * @default undefined
+   */
+  defaultChecked: {
+    type: "boolean"
+  },
+  /**
+   * Disables the checkbox component.
+   * @default undefined
+   */
+  disabled: {
+    type: "boolean",
+    dataAttr: "disabled"
+  },
+  /**
+   * Makes the checkbox read-only.
+   * @default undefined
+   */
+  readonly: {
+    type: "boolean",
+    dataAttr: "readonly"
+  },
+  /**
+   * Marks the checkbox as required.
+   * @default undefined
+   */
+  required: {
+    type: "boolean",
+    dataAttr: "required"
+  },
+  /**
+   * Sets the name attribute of the checkbox input for form control.
+   * @default undefined
+   */
+  name: {
+    type: "string"
+  },
+  /**
+   * Callback fired when the checked state changes.
+   *
+   * @param value - The new checked state.
+   */
+  onCheckedChange: {
+    type: "function"
+  }
+};
+
+// src/components/checkbox/indicator/checkbox-indicator.props.ts
+var CheckboxIndicatorPropDefs = {
+  /**
+   * Sets the variant style of the checkbox ("solid" or "outlined").
+   */
+  variant: {
+    type: "enum",
+    values: CheckboxVariants,
+    dataAttr: "variant"
+  }
+};
+
+// src/components/checkbox/indicator/checkbox-indicator.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var CheckboxIndicator = React7.forwardRef((props, ref) => {
+  const {
+    value,
+    setValue,
+    hovered,
+    color,
+    disabled,
+    readonly,
+    highContrast,
+    indeterminate,
+    variant: contextVariant
+  } = useCheckboxContext();
+  const { size, variant, className, style, dataAttrs } = getComponentProps(
+    props,
+    CheckboxIndicatorPropDefs,
+    SizePropDef
+  );
+  const indicatorVariant = variant || contextVariant;
+  const handleKeyDown = (event) => {
+    if (disabled || readonly) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      setValue(!value);
+    }
+  };
+  const indicatorProps = {
+    ...value && { "data-checked": true },
+    ...disabled && { "data-disabled": true },
+    ...readonly && { "data-readonly": true },
+    ...highContrast && { "data-high-contrast": true },
+    ...indeterminate && { "data-indeterminate": true },
+    ...(variant || contextVariant) && { "data-variant": indicatorVariant }
+  };
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      ref,
+      style,
+      role: "checkbox",
+      "data-color": color,
+      "data-hovered": hovered,
+      "aria-disabled": disabled,
+      "aria-readonly": readonly,
+      "aria-checked": indeterminate ? "mixed" : value,
+      onKeyDown: handleKeyDown,
+      tabIndex: disabled || readonly ? -1 : 0,
+      className: clsx8("checkbox-indicator", className),
+      ...indicatorProps,
+      ...dataAttrs,
+      children: [
+        indeterminate && !value && /* @__PURE__ */ jsx9(
+          Minus,
+          {
+            color: highContrast && indicatorVariant === "solid" ? "black" : "white"
+          }
+        ),
+        value && /* @__PURE__ */ jsx9(
+          CheckMark,
+          {
+            color: highContrast && indicatorVariant === "solid" ? "black" : "white"
+          }
+        )
+      ]
+    }
+  );
+});
+CheckboxIndicator.displayName = "Checkbox.Indicator";
+
+// src/components/checkbox/label/checkbox-label.tsx
+import clsx10 from "clsx";
+import React9 from "react";
+
+// src/components/text/text.tsx
+import clsx9 from "clsx";
+import React8 from "react";
+
+// src/components/text/text.props.ts
+var TextPropsDefs = {
+  disabled: {
+    type: "boolean",
+    default: false,
+    dataAttr: "disabled"
+  }
+  /**
+   * Defines wether the Text is rendered as a **p**, **span** or **div**.
+   *
+   * @example
+   * as="p"
+   * as="span"
+   * as="div"
+   */
+  // as: {
+  //   type: "enum",
+  //   values: textAs,
+  //   default: "p",
+  // } satisfies PropDef<(typeof textAs)[number]>,
+};
+
+// src/components/text/text.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Text = React8.forwardRef(
+  (props, ref) => {
+    const { className, dataAttrs, children, ...rest } = getComponentProps(
+      props,
+      TextPropsDefs,
+      MarginPropDefs,
+      PaddingPropDefs
+    );
+    return /* @__PURE__ */ jsx10(
+      "p",
+      {
+        ref,
+        ...dataAttrs,
+        className: clsx9("lcs-text", className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/components/checkbox/label/checkbox-label.props.ts
+var labelPositions = ["top", "left", "right", "bottom"];
+var CheckboxLabelPropDefs = {
+  /**
+   * Sets the position of the label relative to the checkbox.
+   *
+   * @example position="left" // positions the label to the left of the checkbox
+   * @example position="top" // positions the label above the checkbox
+   */
+  position: {
+    type: "enum",
+    values: labelPositions,
+    dataAttr: "position"
+  }
+};
+
+// src/components/checkbox/label/checkbox-label.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var CheckboxLabel = React9.forwardRef(
+  (props, ref) => {
+    const context = useCheckboxContext();
+    const { className, children, position } = getComponentProps(
+      props,
+      CheckboxLabelPropDefs
+    );
+    React9.useLayoutEffect(() => {
+      context.setLabelPosition?.(position ?? "right");
+    }, [position, context.setLabelPosition]);
+    return /* @__PURE__ */ jsx11(
+      "label",
+      {
+        ref,
+        htmlFor: context.labelId,
+        className: clsx10("checkbox-label", className),
+        ...position && { [`data-position`]: position },
+        children: /* @__PURE__ */ jsx11(Text, { children })
+      }
+    );
+  }
+);
+CheckboxLabel.displayName = "Checkbox.Label";
+
+// src/components/checkbox/root/checkbox-root.tsx
+import clsx11 from "clsx";
+import {
+  isValidElement as isValidElement2,
+  useId,
+  useMemo as useMemo3,
+  useState as useState3
+} from "react";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var ALLOWED_CHILDREN3 = [
+  CheckboxLabel.displayName,
+  CheckboxIndicator.displayName
+];
+var CheckboxRoot = (props) => {
+  const {
+    name,
+    size,
+    color,
+    variant,
+    checked,
+    dataAttrs,
+    onCheckedChange,
+    value: valueProp,
+    disabled = false,
+    required = false,
+    readonly = false,
+    highContrast = false,
+    indeterminate = false,
+    defaultChecked = false
+  } = getComponentProps(
+    props,
+    CheckboxRootPropsDefs,
+    AlignPropDef,
+    MarginPropDefs,
+    SizePropDef
+  );
+  const [value, setValue] = useControllableState({
+    value: valueProp || checked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange
+  });
+  const labelId = useId();
+  const [labelPosition, setLabelPosition] = useState3("right");
+  const [hovered, setHovered] = useState3(false);
+  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN3, {
+    parentDisplayName: CheckboxRoot.displayName
+  });
+  const { indicator, otherChildren } = useMemo3(() => {
+    const indicatorIndex = validChildren.findIndex(
+      (child) => isValidElement2(child) && child.type.displayName === CheckboxIndicator.displayName
+    );
+    if (indicatorIndex > -1) {
+      return {
+        indicator: validChildren[indicatorIndex],
+        otherChildren: validChildren.filter((_, i) => i !== indicatorIndex)
+      };
+    }
+    return {
+      indicator: /* @__PURE__ */ jsx12(CheckboxIndicator, { size }),
+      otherChildren: validChildren
+    };
+  }, [validChildren, size]);
+  const contextValue = useMemo3(
+    () => ({
+      name,
+      value,
+      color,
+      setValue,
+      onCheckedChange,
+      labelId,
+      labelPosition,
+      setLabelPosition,
+      variant,
+      hovered,
+      setHovered,
+      disabled,
+      readonly,
+      required,
+      indeterminate,
+      highContrast
+    }),
+    [
+      name,
+      value,
+      color,
+      onCheckedChange,
+      setValue,
+      labelId,
+      labelPosition,
+      hovered,
+      disabled,
+      readonly,
+      required,
+      indeterminate,
+      highContrast
+    ]
+  );
+  const handleClick = () => {
+    if (disabled || readonly) return;
+    setValue(!value);
+  };
+  return /* @__PURE__ */ jsx12(CheckboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: clsx11("checkbox-root", props.className),
+      onClick: () => handleClick(),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ...dataAttrs,
+      children: [
+        indicator,
+        otherChildren,
+        name && /* @__PURE__ */ jsx12("input", { type: "hidden", name, value: String(value) })
+      ]
+    }
+  ) });
+};
+CheckboxRoot.displayName = "Checkbox";
+
+// src/components/checkbox/checkbox.tsx
+var Checkbox = Object.assign(CheckboxRoot, {
+  Root: CheckboxRoot,
+  Label: CheckboxLabel,
+  Indicator: CheckboxIndicator
+});
+
+// src/components/container/container.tsx
+import clsx12 from "clsx";
+import * as React11 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Container = React11.forwardRef((props, ref) => {
+  const { className, children, direction, ...rest } = props;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      ref,
+      "data-direction": direction,
+      className: clsx12(className, "lcs-container"),
+      ...rest,
+      children
+    }
+  );
+});
+Container.displayName = "Container";
+
+// src/components/portal/backdrop/portal-backdrop.tsx
+import clsx13 from "clsx";
+import * as React13 from "react";
+
+// src/components/portal/portal-context.tsx
+import * as React12 from "react";
+var PortalContext = React12.createContext(
+  void 0
+);
+function usePortalContext() {
+  const context = React12.useContext(PortalContext);
+  if (!context) {
+    throw new Error("`usePortalContext` must be used within a `Portal.Root`");
+  }
+  return context;
+}
+
+// src/components/portal/backdrop/portal-backdrop.props.ts
+var variants = ["clear", "shadow", "blurred"];
+var PortalBackdropPropsDefs = {
+  /**
+   * The visual style variant of the backdrop.
+   *
+   * @example variant="blurred" // Applies a blurred effect to the backdrop
+   * @default "clear"
+   */
+  variant: {
+    type: "enum",
+    values: variants,
+    default: "clear",
+    dataAttr: "variant"
+  },
+  /**
+   * The opacity level of the backdrop.
+   *
+   * @example opacity="0.5" // Sets the backdrop opacity to 50%
+   * @default "0.3"
+   */
+  opacity: {
+    type: "string",
+    default: "0.3",
+    cssProperty: "--backdrop-opacity"
+  },
+  /**
+   * The blur amount applied to the backdrop when the "blurred" variant is used.
+   *
+   * @example blur="4px" // Sets the backdrop blur to 4 pixels
+   * @default "2px"
+   */
+  blur: {
+    type: "string",
+    default: "2px",
+    cssProperty: "--backdrop-blur"
+  }
+};
+
+// src/components/portal/backdrop/portal-backdrop.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var PortalBackdrop = React13.forwardRef(
+  (props, ref) => {
+    const context = usePortalContext();
+    const { className, dataAttrs, ...rest } = getComponentProps(
+      props,
+      PortalBackdropPropsDefs
+    );
+    if (!context.open) return null;
+    return /* @__PURE__ */ jsx14(
+      "div",
+      {
+        ref,
+        className: clsx13("portal-backdrop", className),
+        ...dataAttrs,
+        ...rest
+      }
+    );
+  }
+);
+PortalBackdrop.displayName = "Portal.Backdrop";
+
+// src/components/portal/content/portal-content.tsx
+import clsx14 from "clsx";
+import * as React16 from "react";
+import ReactDOM from "react-dom";
+
+// src/components/theme/theme-context.tsx
+import * as React14 from "react";
+var ThemeContext = React14.createContext(
+  void 0
+);
+function useTheme() {
+  const context = React14.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("`useTheme` must be used within a `Theme`");
+  }
+  return context;
+}
+
+// src/components/portal/utils/use-anchor-position.ts
+import * as React15 from "react";
+function useAnchorPosition({
+  anchorRef,
+  contentRef,
+  side = "bottom",
+  align = "center",
+  sideOffset = 0,
+  alignOffset = 0,
+  enabled = true
+}) {
+  const [position, setPosition] = React15.useState(null);
+  const [, _forceUpdate] = React15.useReducer((x) => x + 1, 0);
+  const updatePosition = React15.useCallback(() => {
+    const anchor = anchorRef.current;
+    const content = contentRef.current;
+    if (!anchor || !content || !enabled) {
+      setPosition(null);
+      return;
+    }
+    const anchorRect = anchor.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    let top = 0;
+    let left = 0;
+    switch (side) {
+      case "top":
+        top = anchorRect.top - contentRect.height - sideOffset;
+        break;
+      case "bottom":
+        top = anchorRect.bottom + sideOffset;
+        break;
+      case "left":
+        left = anchorRect.left - contentRect.width - sideOffset;
+        break;
+      case "right":
+        left = anchorRect.right + sideOffset;
+        break;
+    }
+    if (side === "top" || side === "bottom") {
+      switch (align) {
+        case "start":
+          left = anchorRect.left + alignOffset;
+          break;
+        case "center":
+          left = anchorRect.left + (anchorRect.width - contentRect.width) / 2 + alignOffset;
+          break;
+        case "end":
+          left = anchorRect.right - contentRect.width + alignOffset;
+          break;
+      }
+    } else {
+      switch (align) {
+        case "start":
+          top = anchorRect.top + alignOffset;
+          break;
+        case "center":
+          top = anchorRect.top + (anchorRect.height - contentRect.height) / 2 + alignOffset;
+          break;
+        case "end":
+          top = anchorRect.bottom - contentRect.height + alignOffset;
+          break;
+      }
+    }
+    top += window.scrollY;
+    left += window.scrollX;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    left = Math.max(0, Math.min(left, viewportWidth - contentRect.width));
+    top = Math.max(
+      0,
+      Math.min(top, viewportHeight - contentRect.height + window.scrollY)
+    );
+    setPosition({ top, left });
+  }, [anchorRef, contentRef, side, align, sideOffset, alignOffset, enabled]);
+  React15.useEffect(() => {
+    if (!enabled) {
+      setPosition(null);
+      return;
+    }
+    let attempts = 0;
+    const maxAttempts = 10;
+    const tryUpdate = () => {
+      attempts++;
+      if (anchorRef.current && contentRef.current) {
+        updatePosition();
+      } else if (attempts < maxAttempts) {
+        requestAnimationFrame(tryUpdate);
+      }
+    };
+    requestAnimationFrame(tryUpdate);
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [enabled, updatePosition, anchorRef, contentRef]);
+  return position;
+}
+
+// src/components/portal/content/portal-content.props.ts
+var positions = [
+  "tl",
+  "top",
+  "tr",
+  "left",
+  "center",
+  "right",
+  "bl",
+  "bottom",
+  "br"
+];
+var anchorSides = ["top", "right", "bottom", "left"];
+var PortalContentPropsDefs = {
+  /**
+   * The position of the portal content relative to the screen if no anchor is used.
+   *
+   * @example position="bl" // Portal renders at bottom-left of the screen
+   */
+  position: {
+    type: "enum",
+    values: positions,
+    default: "center",
+    dataAttr: "position"
+  },
+  /**
+   * Whether the portal content is anchored to an element.
+   *
+   * When anchored, the portal content is positioned relative to the trigger element unless a custom anchorRef is provided.
+   */
+  anchored: {
+    type: "boolean",
+    dataAttr: "anchored"
+  },
+  /**
+   * The side of the anchor element to position the portal content on.
+   *
+   * @default "bottom"
+   */
+  side: {
+    type: "enum",
+    values: anchorSides,
+    default: "bottom"
+  },
+  /** Offset in pixels from the anchor element along the side axis. */
+  sideOffset: {
+    type: "string"
+  },
+  /** Offset in pixels along the alignment axis. */
+  alignOffset: {
+    type: "string"
+  }
+};
+
+// src/components/portal/content/portal-content.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var PortalContent = React16.forwardRef(
+  (props, ref) => {
+    const portalContext = usePortalContext();
+    const themeContext = React16.useContext(ThemeContext);
+    const contentRef = React16.useRef(null);
+    const {
+      side = "bottom",
+      align = "center",
+      sideOffset = "0",
+      alignOffset = "0",
+      anchored = false,
+      children,
+      className,
+      dataAttrs,
+      style
+    } = getComponentProps(props, PortalContentPropsDefs, AlignPropDef);
+    const anchorRef = portalContext.anchorRef ?? portalContext.triggerRef;
+    const anchorPosition = useAnchorPosition({
+      anchorRef,
+      contentRef,
+      side,
+      align,
+      sideOffset: parseInt(sideOffset, 10) || 0,
+      alignOffset: parseInt(alignOffset, 10) || 0,
+      enabled: anchored && portalContext.open
+    });
+    const setRefs = React16.useCallback(
+      (node) => {
+        contentRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    React16.useEffect(() => {
+      if (!portalContext.open) return;
+      function onKeyDown(e) {
+        if (e.key === "Escape") {
+          portalContext.onOpenChange?.(false);
+        }
+      }
+      document.addEventListener("keydown", onKeyDown);
+      return () => {
+        document.removeEventListener("keydown", onKeyDown);
+      };
+    }, [portalContext.open, portalContext.onOpenChange]);
+    React16.useEffect(() => {
+      if (!portalContext.open || !anchored) return;
+      function onClickOutside(e) {
+        const target = e.target;
+        const content2 = contentRef.current;
+        const trigger = (portalContext.anchorRef ?? portalContext.triggerRef)?.current;
+        if (content2?.contains(target) || trigger?.contains(target)) {
+          return;
+        }
+        portalContext.onOpenChange?.(false);
+      }
+      const timeoutId = setTimeout(() => {
+        document.addEventListener("click", onClickOutside);
+      }, 0);
+      return () => {
+        clearTimeout(timeoutId);
+        document.removeEventListener("click", onClickOutside);
+      };
+    }, [
+      portalContext.open,
+      portalContext.onOpenChange,
+      portalContext.anchorRef,
+      portalContext.triggerRef,
+      anchored
+    ]);
+    const container = portalContext.open && globalThis?.document?.body;
+    if (!container) return null;
+    const combinedStyle = {
+      ...style,
+      ...anchored && anchorPosition ? {
+        position: "absolute",
+        top: anchorPosition.top,
+        left: anchorPosition.left
+      } : {}
+    };
+    const portalContent = /* @__PURE__ */ jsx15(
+      "div",
+      {
+        ref: setRefs,
+        className: clsx14("portal", className),
+        "data-appearance": themeContext?.appearance,
+        "data-radius": themeContext?.radius,
+        "data-roundness": themeContext?.roundness ?? "theme",
+        "data-spacing": themeContext?.spacing ?? "theme",
+        "data-theme-radius": themeContext?.radius,
+        "data-theme-roundness": themeContext?.roundness,
+        "data-theme-spacing": themeContext?.spacing,
+        onClick: anchored ? void 0 : () => portalContext.onOpenChange?.(false),
+        style: combinedStyle,
+        ...dataAttrs,
+        children: /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: "portal-content",
+            onClick: (e) => e.stopPropagation(),
+            children
+          }
+        )
+      }
+    );
+    const content = themeContext ? /* @__PURE__ */ jsx15(ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
+    return ReactDOM.createPortal(content, container);
+  }
+);
+PortalContent.displayName = "Portal.Content";
+
+// src/components/portal/root/portal-root.tsx
+import * as React18 from "react";
+
+// src/components/portal/trigger/portal-trigger.tsx
+import * as React17 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var PortalTrigger = React17.forwardRef(
+  ({ children, asChild, onClick, ...props }, ref) => {
+    const context = usePortalContext();
+    const internalRef = React17.useRef(null);
+    React17.useEffect(() => {
+      if (internalRef.current) {
+        context.triggerRef.current = internalRef.current;
+      }
+    }, [context.triggerRef]);
+    const handleClick = (event) => {
+      context.onOpenChange?.(!context.open);
+      onClick?.(event);
+    };
+    const setRefs = React17.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        context.triggerRef.current = node;
+      },
+      [ref, context.triggerRef]
+    );
+    if (asChild && React17.isValidElement(children)) {
+      return React17.cloneElement(children, {
+        ref: setRefs,
+        onClick: handleClick,
+        ...props
+      });
+    }
+    return /* @__PURE__ */ jsx16(
+      "button",
+      {
+        ref: setRefs,
+        type: "button",
+        onClick: handleClick,
+        "aria-expanded": context.open,
+        "aria-haspopup": "dialog",
+        ...props,
+        children
+      }
+    );
+  }
+);
+PortalTrigger.displayName = "Portal.Trigger";
+
+// src/components/portal/root/portal-root.props.ts
+var PortalRootPropsDefs = {
+  /** Whether the portal is open. */
+  open: {
+    type: "boolean",
+    default: false
+  },
+  /** Callback fired when the open state changes. */
+  onOpenChange: {
+    type: "function"
+  },
+  /** Whether the portal is open by default (uncontrolled). */
+  defaultOpen: {
+    type: "boolean",
+    default: false
+  },
+  /** Custom anchor element ref. If not provided, the trigger is used as anchor. */
+  anchorRef: {
+    type: "reactNode"
+  }
+};
+
+// src/components/portal/root/portal-root.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ALLOWED_CHILDREN4 = [
+  PortalTrigger.displayName,
+  PortalBackdrop.displayName,
+  PortalContent.displayName
+];
+var PortalRoot = (props) => {
+  const {
+    defaultOpen = false,
+    open: portalOpen,
+    onOpenChange,
+    anchorRef,
+    children
+  } = getComponentProps(props, PortalRootPropsDefs);
+  const [open, setOpen] = useControllableState({
+    value: portalOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = React18.useRef(null);
+  const value = React18.useMemo(
+    () => ({
+      open,
+      onOpenChange: setOpen,
+      triggerRef,
+      anchorRef
+    }),
+    [open, setOpen, anchorRef]
+  );
+  const validChildren = filterChildren(children, ALLOWED_CHILDREN4, {
+    parentDisplayName: PortalRoot.displayName
+  });
+  return /* @__PURE__ */ jsx17(PortalContext.Provider, { value, children: validChildren });
+};
+PortalRoot.displayName = "Portal.Root";
+
+// src/components/portal/portal.tsx
+var Portal = {
+  /** The root component that provides context for the portal. */
+  Root: PortalRoot,
+  /** The trigger element that opens the portal when interacted with. */
+  Trigger: PortalTrigger,
+  /** The content displayed inside the portal when open. */
+  Content: PortalContent,
+  /** A backdrop optionally displayed behind portal content when open. */
+  Backdrop: PortalBackdrop
+};
+
+// src/components/select/content/select-content.tsx
+import clsx16 from "clsx";
+import * as React22 from "react";
+
+// src/components/select/select-context.tsx
+import * as React19 from "react";
+var SelectContext = React19.createContext(
+  null
+);
+function useSelectContext() {
+  const context = React19.useContext(SelectContext);
+  if (!context) {
+    throw new Error("Select components must be used within a Select.Root");
+  }
+  return context;
+}
+
+// src/components/select/utils/user-composed-refs.ts
+import * as React20 from "react";
+function useComposedRefs(...refs) {
+  return React20.useCallback(
+    (node) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref != null) {
+          ref.current = node;
+        }
+      });
+    },
+    [refs]
+  );
+}
+
+// src/components/select/viewport/select-viewport.tsx
+import clsx15 from "clsx";
+import * as React21 from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var SelectViewport = React21.forwardRef(
+  (props, ref) => {
+    const { className, children, ...rest } = props;
+    return /* @__PURE__ */ jsx18("div", { ref, className: clsx15("select-viewport", className), ...rest, children });
+  }
+);
+SelectViewport.displayName = "Select.Viewport";
+
+// src/components/select/content/select-content.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var SelectContent = React22.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      className,
+      children,
+      position = "popper",
+      side = "bottom",
+      offset,
+      align = "center",
+      ...rest
+    } = props;
+    const context = useSelectContext();
+    const composedRef = useComposedRefs(forwardedRef, context.contentRef);
+    React22.useEffect(() => {
+      context.itemValues.current = [];
+    }, [context.open]);
+    React22.useEffect(() => {
+      if (!context.open) return;
+      const handleClickOutside = (event) => {
+        const target = event.target;
+        if (context.contentRef.current && !context.contentRef.current.contains(target) && context.triggerRef.current && !context.triggerRef.current.contains(target)) {
+          context.onOpenChange(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [context.open]);
+    React22.useEffect(() => {
+      if (!context.open) return;
+      const handleKeyDown = (event) => {
+        const items = context.itemValues.current;
+        const itemCount = items.length;
+        switch (event.key) {
+          case "ArrowDown":
+            event.preventDefault();
+            context.setHighlightedIndex(
+              (prev) => prev < itemCount - 1 ? prev + 1 : 0
+            );
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            context.setHighlightedIndex(
+              (prev) => prev > 0 ? prev - 1 : itemCount - 1
+            );
+            break;
+          case "Tab":
+            event.preventDefault();
+            if (event.shiftKey) {
+              context.setHighlightedIndex(
+                (prev) => prev > 0 ? prev - 1 : itemCount - 1
+              );
+            } else {
+              context.setHighlightedIndex(
+                (prev) => prev < itemCount - 1 ? prev + 1 : 0
+              );
+            }
+            break;
+          case "Enter":
+          case " ":
+            event.preventDefault();
+            if (context.highlightedIndex >= 0) {
+              const selectedValue = items[context.highlightedIndex];
+              if (selectedValue) {
+                context.onValueChange(selectedValue);
+                const displayText = children;
+                if (displayText) context.setDisplayValue(displayText);
+                context.onOpenChange(false);
+              }
+            }
+            break;
+          case "Escape":
+            event.preventDefault();
+            context.onOpenChange(false);
+            context.triggerRef.current?.focus();
+            break;
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [context.open, context.highlightedIndex]);
+    const [contentWidth, setContentWidth] = React22.useState();
+    const labelInside = context.labelPosition === "inside";
+    const anchorRef = labelInside ? context.rootRef : context.triggerRef;
+    React22.useLayoutEffect(() => {
+      if (context.open && anchorRef.current) {
+        setContentWidth(anchorRef.current.getBoundingClientRect().width);
+      }
+    }, [context.open, context.labelPosition, anchorRef]);
+    if (!context.open) {
+      return /* @__PURE__ */ jsx19("div", { style: { display: "none" }, "aria-hidden": "true", children });
+    }
+    return /* @__PURE__ */ jsx19(
+      Portal.Root,
+      {
+        open: context.open,
+        onOpenChange: context.onOpenChange,
+        anchorRef,
+        children: /* @__PURE__ */ jsx19(Portal.Content, { anchored: true, side, align, sideOffset: offset, children: /* @__PURE__ */ jsx19(
+          "div",
+          {
+            ref: composedRef,
+            role: "listbox",
+            "data-state": context.open ? "open" : "closed",
+            "data-side": side,
+            "data-align": align,
+            "data-trigger-variant": context.triggerVariant,
+            className: clsx16("select-content", className),
+            style: { width: contentWidth },
+            ...rest,
+            children: /* @__PURE__ */ jsx19(SelectViewport, { children })
+          }
+        ) })
+      }
+    );
+  }
+);
+SelectContent.displayName = "Select.Content";
+
+// src/components/select/group/select-group.tsx
+import clsx17 from "clsx";
+import * as React23 from "react";
+
+// src/components/select/group/select-group.props.ts
+var SelectGroupsPropDefs = {
+  title: {
+    type: "string"
+  }
+};
+
+// src/components/select/group/select-group.tsx
+import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+var SelectGroup = React23.forwardRef(
+  (props, ref) => {
+    const { className, children, dataAttrs, ...rest } = getComponentProps(
+      props,
+      SelectGroupsPropDefs
+    );
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: clsx17("select-group", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx20(Text, { className: "select-group-label", disabled: true, children: props.title }),
+          children
+        ]
+      }
+    );
+  }
+);
+SelectGroup.displayName = "Select.Group";
+
+// src/components/select/item/select-item.tsx
+import clsx18 from "clsx";
+import * as React24 from "react";
+
+// src/components/select/item/select-item-indicator.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var SelectItemIndicator = () => {
+  return /* @__PURE__ */ jsx21("span", { className: "select-item-indicator", children: /* @__PURE__ */ jsx21(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx21(
+        "path",
+        {
+          d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  ) });
+};
+
+// src/components/select/item/select-item.props.ts
+var SelectItemPropDefs = {
+  value: {
+    type: "string"
+  },
+  disabled: {
+    type: "boolean",
+    default: false
+  }
+};
+
+// src/components/select/item/select-item.tsx
+import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
+var SelectItem = React24.forwardRef(
+  (props, ref) => {
+    const context = useSelectContext();
+    const { value, disabled, children, className, ...rest } = getComponentProps(
+      props,
+      SelectItemPropDefs
+    );
+    const selected = context.value === value;
+    React24.useEffect(() => {
+      if (selected && children) {
+        context.setDisplayValue(children);
+      }
+    }, [selected]);
+    React24.useEffect(() => {
+      if (!value) return;
+      if (!disabled) {
+        const values = context.itemValues.current;
+        if (!values.includes(value)) values.push(value);
+      }
+      return () => {
+        const values = context.itemValues.current;
+        const index = values.indexOf(value);
+        if (index > -1) values.splice(index, 1);
+      };
+    }, [value, disabled]);
+    const itemIndex = value ? context.itemValues.current.indexOf(value) : -1;
+    const isHighlighted = context.highlightedIndex >= 0 && context.highlightedIndex === itemIndex;
+    const handleClick = () => {
+      if (!disabled) {
+        if (value) {
+          context.onValueChange(value);
+          context.setDisplayValue(children);
+        }
+        context.onOpenChange(false);
+        context.triggerRef.current?.focus();
+      }
+    };
+    const handleMouseEnter = () => {
+      if (!disabled) context.setHighlightedIndex(itemIndex);
+    };
+    return /* @__PURE__ */ jsxs6(
+      Box,
+      {
+        ref,
+        role: "option",
+        radius: "none",
+        "aria-selected": selected,
+        "aria-disabled": disabled,
+        "data-variant": context.triggerVariant,
+        "data-state": selected ? "checked" : "unchecked",
+        "data-highlighted": isHighlighted ? "" : void 0,
+        "data-disabled": disabled ? "" : void 0,
+        className: clsx18("select-item", className),
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx22(
+            Box,
+            {
+              style: { width: 24, height: 24, justifyContent: "center" },
+              className: "flex items-center",
+              children: selected && /* @__PURE__ */ jsx22(SelectItemIndicator, {})
+            }
+          ),
+          /* @__PURE__ */ jsx22(Text, { disabled, children })
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "Select.Item";
+
+// src/components/select/label/select-label.tsx
+import clsx19 from "clsx";
+import * as React25 from "react";
+
+// src/components/select/label/select-label.props.ts
+var labelPositions2 = ["top", "left", "inside"];
+var SelectLabelPropDefs = {
+  position: {
+    type: "enum",
+    values: labelPositions2,
+    default: "top",
+    dataAttr: "position"
+  }
+};
+
+// src/components/select/label/select-label.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var SelectLabel = React25.forwardRef(
+  (props, ref) => {
+    const context = useSelectContext();
+    const { className, children, position, dataAttrs } = getComponentProps(
+      props,
+      SelectLabelPropDefs
+    );
+    React25.useLayoutEffect(() => {
+      context.setLabelPosition?.(position ?? "top");
+    }, [position, context.setLabelPosition]);
+    return /* @__PURE__ */ jsx23(
+      "label",
+      {
+        ref,
+        htmlFor: context.labelId,
+        className: clsx19("select-label", className),
+        ...dataAttrs,
+        children: /* @__PURE__ */ jsx23(Text, { disabled: context.disabled, children })
+      }
+    );
+  }
+);
+SelectLabel.displayName = "Select.Label";
+
+// src/components/select/root/select-root.tsx
+import clsx23 from "clsx";
+import {
+  useId as useId2,
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo5,
+  useRef as useRef5,
+  useState as useState6
+} from "react";
+
+// src/components/select/trigger/select-trigger.tsx
+import clsx22 from "clsx";
+import * as React27 from "react";
+
+// src/components/select/value/select-value.tsx
+import clsx20 from "clsx";
+import * as React26 from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var SelectValue = React26.forwardRef(
+  (props, ref) => {
+    const { className, placeholder: placeholderProp, ...rest } = props;
+    const context = useSelectContext();
+    const placeholder = placeholderProp ?? context.placeholder;
+    return /* @__PURE__ */ jsx24(
+      "span",
+      {
+        ref,
+        className: clsx20("select-value", className),
+        "data-placeholder": !context.value ? "" : void 0,
+        ...rest,
+        children: /* @__PURE__ */ jsx24(Text, { disabled: context.disabled, children: context.displayValue || placeholder })
+      }
+    );
+  }
+);
+SelectValue.displayName = "Select.Value";
+
+// src/components/select/trigger/select-trigger-icon.tsx
+import clsx21 from "clsx";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var SelectTriggerIcon = (props) => {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx25(
+    "svg",
+    {
+      className: clsx21("select-trigger-icon", className),
+      width: "20",
+      height: "20",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsx25(
+        "path",
+        {
+          d: "M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+};
+
+// src/components/select/trigger/select-trigger.props.ts
+var SelectTriggerPropsDefs = {};
+
+// src/components/select/trigger/select-trigger.tsx
+import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
+var SelectTrigger = React27.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      className,
+      disabled: disabledProp,
+      dataAttrs
+    } = getComponentProps(props, SelectTriggerPropsDefs);
+    const context = useSelectContext();
+    const disabled = disabledProp ?? context.disabled;
+    const isInsideLabel = context.labelPosition === "inside";
+    const composedRef = useComposedRefs(forwardedRef, context.triggerRef);
+    const handleClick = () => {
+      if (!disabled) {
+        context.onOpenChange(!context.open);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      switch (event.key) {
+        case "Enter":
+        case " ":
+        case "ArrowDown":
+        case "ArrowUp":
+          event.preventDefault();
+          context.onOpenChange(true);
+          break;
+      }
+    };
+    if (isInsideLabel) {
+      return /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          ref: composedRef,
+          "data-state": context.open ? "open" : "closed",
+          "data-disabled": disabled ? "" : void 0,
+          "data-variant": context.triggerVariant,
+          className: clsx22("select-trigger", className),
+          ...dataAttrs,
+          children: [
+            /* @__PURE__ */ jsx26(SelectValue, {}),
+            /* @__PURE__ */ jsx26(SelectTriggerIcon, {})
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        ref: composedRef,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": context.open,
+        "aria-haspopup": "listbox",
+        "aria-disabled": disabled,
+        disabled,
+        "data-state": context.open ? "open" : "closed",
+        "data-disabled": disabled ? "" : void 0,
+        className: clsx22("select-trigger", className),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        "data-variant": context.triggerVariant,
+        ...dataAttrs,
+        children: [
+          /* @__PURE__ */ jsx26(SelectValue, {}),
+          /* @__PURE__ */ jsx26(SelectTriggerIcon, {})
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "Select.Trigger";
+
+// src/components/select/root/select-root.props.ts
+var selectVariants = ["outlined", "solid", "clear"];
+var SelectRootPropsDefs = {
+  variant: {
+    type: "enum",
+    values: selectVariants,
+    dataAttr: "variant"
+  },
+  value: {
+    type: "string"
+  },
+  defaultValue: {
+    type: "string"
+  },
+  disabled: {
+    type: "boolean"
+  },
+  required: {
+    type: "boolean"
+  },
+  placeholder: {
+    type: "string"
+  },
+  name: {
+    type: "string"
+  },
+  onValueChange: {
+    type: "function"
+  }
+};
+
+// src/components/select/root/select-root.tsx
+import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
+var ALLOWED_CHILDREN5 = [
+  SelectLabel.displayName,
+  SelectTrigger.displayName,
+  SelectContent.displayName
+];
+var SelectRoot = (props) => {
+  const {
+    children,
+    className,
+    dataAttrs,
+    value: valueProp,
+    defaultValue = "",
+    onValueChange,
+    disabled = false,
+    required = false,
+    placeholder,
+    variant,
+    name
+  } = getComponentProps(
+    props,
+    SelectRootPropsDefs,
+    MarginPropDefs,
+    RadiusPropDefs,
+    RoundnessPropDef
+  );
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [open, setOpen] = useState6(false);
+  const [highlightedIndex, setHighlightedIndex] = useState6(-1);
+  const [labelPosition, setLabelPosition] = useState6("top");
+  const [triggerVariant, setTriggerVariant] = useState6("outlined");
+  const [displayValue, setDisplayValue] = useState6(null);
+  const labelId = useId2();
+  const rootRef = useRef5(null);
+  const triggerRef = useRef5(null);
+  const contentRef = useRef5(null);
+  const itemsRef = useRef5(/* @__PURE__ */ new Map());
+  const itemValues = useRef5([]);
+  const contextValue = useMemo5(
+    () => ({
+      open,
+      value,
+      displayValue,
+      onOpenChange: setOpen,
+      onValueChange: setValue,
+      setDisplayValue,
+      rootRef,
+      triggerRef,
+      contentRef,
+      labelPosition,
+      setLabelPosition,
+      triggerVariant,
+      setTriggerVariant,
+      disabled,
+      required,
+      placeholder,
+      name,
+      labelId,
+      highlightedIndex,
+      setHighlightedIndex,
+      itemsRef,
+      itemValues
+    }),
+    [
+      open,
+      value,
+      displayValue,
+      disabled,
+      required,
+      name,
+      placeholder,
+      labelId,
+      highlightedIndex,
+      labelPosition,
+      triggerVariant
+    ]
+  );
+  useLayoutEffect3(() => {
+    setTriggerVariant?.(variant ?? "outlined");
+  }, [variant, setTriggerVariant]);
+  const validChildren = filterChildren(children, ALLOWED_CHILDREN5, {
+    parentDisplayName: SelectRoot.displayName
+  });
+  const labelInside = labelPosition === "inside";
+  const handleClick = () => {
+    if (!disabled) {
+      setOpen(!open);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    switch (event.key) {
+      case "Enter":
+      case " ":
+      case "ArrowDown":
+      case "ArrowUp":
+        event.preventDefault();
+        setOpen(true);
+        break;
+    }
+  };
+  if (labelInside) {
+    return /* @__PURE__ */ jsx27(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-disabled": disabled,
+        disabled,
+        ref: rootRef,
+        "data-state": open ? "open" : "closed",
+        "data-disabled": disabled ? "" : void 0,
+        className: clsx23("select-root", className),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...dataAttrs,
+        children: [
+          validChildren,
+          name && /* @__PURE__ */ jsx27("input", { type: "hidden", name, value })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx27(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
+    Box,
+    {
+      ref: rootRef,
+      className: clsx23("select-root", className),
+      ...dataAttrs,
+      children: [
+        validChildren,
+        name && /* @__PURE__ */ jsx27("input", { type: "hidden", name, value })
+      ]
+    }
+  ) });
+};
+SelectRoot.displayName = "Select.Root";
+
+// src/components/select/separator/select-separator.tsx
+import clsx24 from "clsx";
+import * as React28 from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var SelectSeparator = React28.forwardRef(
+  (props, ref) => {
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ jsx28(
+      "div",
+      {
+        ref,
+        className: clsx24("select-separator", className),
+        ...rest
+      }
+    );
+  }
+);
+SelectSeparator.displayName = "Select.Separator";
+
+// src/components/select/select.tsx
+var Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Content: SelectContent,
+  Viewport: SelectViewport,
+  Group: SelectGroup,
+  Label: SelectLabel,
+  Item: SelectItem,
+  Separator: SelectSeparator
+};
+
+// src/components/separator/separator.tsx
+import clsx25 from "clsx";
+
+// src/components/separator/separator.props.ts
+var directions = ["horizontal", "vertical"];
+var variants2 = ["solid", "dashed", "dotted"];
+var SeparatorPropsDefs = {
+  /**
+   * The direction of the separator.
+   *
+   * @example direction="vertical" // positions the separator vertically
+   */
+  direction: {
+    type: "enum",
+    values: directions,
+    default: "horizontal",
+    dataAttr: "direction"
+  },
+  /**
+   * The variant of the separator.
+   *
+   * @example variant="dashed" // makes the separator dashed
+   */
+  variant: {
+    type: "enum",
+    values: variants2,
+    default: "solid",
+    dataAttr: "variant"
+  }
+};
+
+// src/components/separator/separator.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var Separator = (props) => {
+  const { className, dataAttrs, style } = getComponentProps(
+    props,
+    SeparatorPropsDefs
+  );
+  return /* @__PURE__ */ jsx29(
+    "div",
+    {
+      className: clsx25("separator", className),
+      style,
+      ...dataAttrs
+    }
+  );
+};
+Separator.displayName = "Separator";
+
+// src/components/theme/theme.tsx
+import * as React29 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var Theme = React29.forwardRef((props, ref) => {
+  const context = React29.useContext(ThemeContext);
+  const isRoot = context === void 0;
+  if (isRoot) return /* @__PURE__ */ jsx30(ThemeRoot, { ...props, ref });
+  return /* @__PURE__ */ jsx30(ThemeSub, { ...props, ref });
+});
+Theme.displayName = "Theme";
+var ThemeRoot = React29.forwardRef((props, ref) => {
+  const {
+    appearance: themeAppearance,
+    radius: themeRadius,
+    roundness: themeRoundness,
+    spacing: themeSpacing,
+    children,
+    ...rest
+  } = props;
+  const [appearance, setAppearance] = React29.useState(
+    themeAppearance ?? "light"
+  );
+  const [radius, setRadius] = React29.useState(themeRadius ?? "md");
+  const [roundness2, setRoundness] = React29.useState(
+    themeRoundness ?? "3"
+  );
+  const [spacing, setSpacing] = React29.useState(themeSpacing ?? "md");
+  const value = React29.useMemo(
+    () => ({
+      appearance,
+      radius,
+      roundness: roundness2,
+      spacing,
+      onAppearanceChange: setAppearance,
+      onRadiusChange: setRadius,
+      onRoundnessChange: setRoundness,
+      onSpacingChange: setSpacing
+    }),
+    [appearance, radius, roundness2, spacing]
+  );
+  return /* @__PURE__ */ jsx30(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx30(
+    "div",
+    {
+      ref,
+      "data-appearance": appearance,
+      "data-theme-radius": radius,
+      "data-theme-roundness": roundness2,
+      "data-theme-spacing": spacing,
+      ...rest,
+      children
+    }
+  ) });
+});
+ThemeRoot.displayName = "ThemeRoot";
+var ThemeSub = React29.forwardRef((props, ref) => {
+  const context = React29.useContext(ThemeContext);
+  const {
+    appearance,
+    radius,
+    roundness: roundness2,
+    spacing,
+    onAppearanceChange,
+    onRadiusChange,
+    onRoundnessChange,
+    onSpacingChange,
+    children,
+    ...rest
+  } = props;
+  const contextProps = {
+    appearance: appearance ?? context.appearance,
+    radius: radius ?? context.radius,
+    roundness: roundness2 ?? context.roundness,
+    spacing: spacing ?? context.spacing,
+    onAppearanceChange: context.onAppearanceChange,
+    onRadiusChange: context.onRadiusChange,
+    onRoundnessChange: context.onRoundnessChange,
+    onSpacingChange: context.onSpacingChange
+  };
+  return /* @__PURE__ */ jsx30(ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ jsx30(
+    "div",
+    {
+      ref,
+      "data-appearance": appearance,
+      "data-theme-radius": radius,
+      "data-theme-roundness": roundness2,
+      "data-theme-spacing": spacing,
+      ...rest,
+      className: "flex",
+      children
+    }
+  ) });
+});
+ThemeSub.displayName = "ThemeSub";
+
+// src/components/theme/theme-control.tsx
+import { jsx as jsx31, jsxs as jsxs9 } from "react/jsx-runtime";
+function ThemeControl() {
+  const {
+    appearance,
+    onAppearanceChange,
+    radius,
+    onRadiusChange,
+    roundness: roundness2,
+    onRoundnessChange,
+    spacing,
+    onSpacingChange
+  } = useTheme();
+  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs9(
+      Select.Root,
+      {
+        variant: "solid",
+        value: appearance,
+        onValueChange: (change) => onAppearanceChange?.(change),
+        children: [
+          /* @__PURE__ */ jsx31(Select.Label, { position: "inside", children: "Theme Settings" }),
+          /* @__PURE__ */ jsx31(Select.Trigger, {}),
+          /* @__PURE__ */ jsxs9(Select.Content, { children: [
+            /* @__PURE__ */ jsx31(Select.Item, { value: "light", children: "Light" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "dark", children: "Dark" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs9(
+      Select.Root,
+      {
+        variant: "solid",
+        value: radius,
+        onValueChange: (change) => onRadiusChange?.(change),
+        children: [
+          /* @__PURE__ */ jsx31(Select.Label, { position: "inside", children: "Radius" }),
+          /* @__PURE__ */ jsx31(Select.Trigger, {}),
+          /* @__PURE__ */ jsxs9(Select.Content, { children: [
+            /* @__PURE__ */ jsx31(Select.Item, { value: "none", children: "None" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "xs", children: "XS" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "sm", children: "SM" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "md", children: "MD" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "lg", children: "LG" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "xl", children: "XL" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "full", children: "FULL" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs9(
+      Select.Root,
+      {
+        variant: "solid",
+        value: roundness2,
+        onValueChange: (change) => onRoundnessChange?.(change),
+        children: [
+          /* @__PURE__ */ jsx31(Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
+          /* @__PURE__ */ jsx31(Select.Trigger, {}),
+          /* @__PURE__ */ jsxs9(Select.Content, { children: [
+            /* @__PURE__ */ jsx31(Select.Item, { value: "1", children: "1" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "2", children: "2" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "3", children: "3" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "4", children: "4" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "5", children: "5" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "6", children: "6" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs9(
+      Select.Root,
+      {
+        variant: "solid",
+        value: spacing,
+        onValueChange: (change) => onSpacingChange?.(change),
+        children: [
+          /* @__PURE__ */ jsx31(Select.Label, { position: "inside", children: "Spacing" }),
+          /* @__PURE__ */ jsx31(Select.Trigger, {}),
+          /* @__PURE__ */ jsxs9(Select.Content, { children: [
+            /* @__PURE__ */ jsx31(Select.Item, { value: "xs", children: "XS" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "sm", children: "SM" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "md", children: "MD" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "lg", children: "LG" }),
+            /* @__PURE__ */ jsx31(Select.Item, { value: "xl", children: "XL" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Accordion,
+  Box,
+  Button,
+  Checkbox,
+  Container,
+  Portal,
+  Select,
+  Separator,
+  Text,
+  Theme,
+  ThemeControl,
+  useTheme
+};
+//# sourceMappingURL=index.mjs.map