@oprt/react 0.0.0-stage → 0.1.0

package/dist/RadioGroup/RadioGroup.js

@@ -0,0 +1,143 @@
+"use client";
+
+// src/RadioGroup/RadioGroup.tsx
+import { RadioGroup as AriaRadioGroup, Radio as AriaRadio } from "react-aria-components";
+import { cva } from "class-variance-authority";
+import { createContext, forwardRef, useContext } from "react";
+import clsx from "clsx";
+import { Check } from "@oprt/icons";
+import { useFieldWiring } from "../_internal/fieldIds.js";
+import { RadioGroupManifest } from "./RadioGroup.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { definedOnly, useAriaInvalidRef } from "../_internal/aria.js";
+import { keyForIds } from "../_internal/hydration.js";
+import { useMergedRefs, useInputRefObject } from "../_internal/mergeRefs.js";
+import { FORCED_RADIO } from "../_internal/controlStyles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SizeContext = createContext("md");
+var groupStyles = cva("flex font-sans", {
+  variants: {
+    orientation: {
+      vertical: "flex-col gap-2u",
+      // A row that does not fit wraps onto more rows (design call DC-8); arrow keys follow the
+      // reading order (RadioGroup-B2M-1).
+      horizontal: "flex-row flex-wrap gap-x-3u gap-y-2u"
+    }
+  },
+  defaultVariants: { orientation: "vertical" }
+});
+var radioWrapperStyles = "inline-flex items-center min-h-3u min-w-3u gap-2u text-oprt-base font-medium text-oprt-text font-sans cursor-pointer data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[focus-visible]:[&_.oprt-radio-box]:border-oprt-border-focus data-[focus-visible]:[&_.oprt-radio-box]:shadow-oprt-focus data-[selected]:[&_.oprt-radio-box]:border-oprt-accent [&&]:data-[invalid]:[&_.oprt-radio-box]:border-oprt-error data-[selected]:[&_.oprt-radio-inner]:block";
+var radioBoxStyles = cva(
+  "oprt-radio-box inline-flex shrink-0 items-center justify-center border bg-oprt-surface-2 transition-colors duration-oprt-fast border-oprt-border-control",
+  {
+    variants: {
+      size: {
+        sm: "h-2u w-2u",
+        md: "h-2.5u w-2.5u",
+        lg: "h-3u w-3u"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var RadioGroup = forwardRef(
+  ({
+    className,
+    orientation,
+    size = "md",
+    id,
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled,
+    required,
+    name,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid
+  }, ref) => {
+    const {
+      id: finalId,
+      labelledBy,
+      describedBy,
+      invalid: isInvalid,
+      required: isRequired
+    } = useFieldWiring(
+      {
+        id,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": ariaInvalid,
+        required
+      },
+      { label: "labelledby" }
+    );
+    if (process.env.NODE_ENV !== "production") {
+      devValidate("RadioGroup", RadioGroupManifest.RadioGroup.props, { orientation, size });
+    }
+    const groupRef = useAriaInvalidRef(ref, isInvalid);
+    const rootProps = {
+      isDisabled: disabled ?? false,
+      isRequired,
+      isInvalid,
+      orientation: orientation ?? "vertical",
+      ...definedOnly({
+        id: finalId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": labelledBy,
+        "aria-describedby": describedBy,
+        name
+      })
+    };
+    if (value !== void 0) rootProps["value"] = value;
+    if (defaultValue !== void 0) rootProps["defaultValue"] = defaultValue;
+    if (onValueChange) rootProps["onChange"] = onValueChange;
+    return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+      AriaRadioGroup,
+      {
+        ref: groupRef,
+        ...rootProps,
+        className: clsx(groupStyles({ orientation }), className),
+        children
+      },
+      keyForIds(finalId, labelledBy)
+    ) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var Radio = forwardRef(
+  ({ className, children, value, disabled, id, "aria-label": ariaLabel }, ref) => {
+    const size = useContext(SizeContext);
+    const setNode = useMergedRefs(ref);
+    const inputRef = useInputRefObject(setNode);
+    const itemProps = definedOnly({ id, "aria-label": ariaLabel });
+    return /* @__PURE__ */ jsxs(
+      AriaRadio,
+      {
+        value,
+        isDisabled: disabled ?? false,
+        inputRef,
+        ...itemProps,
+        className: clsx(radioWrapperStyles, FORCED_RADIO, className),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: radioBoxStyles({ size }), children: /* @__PURE__ */ jsx(
+            Check,
+            {
+              size: size === "sm" ? 12 : size === "lg" ? 20 : 16,
+              className: "oprt-radio-inner hidden shrink-0 text-oprt-accent"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere normal-case", children })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+export {
+  Radio,
+  RadioGroup
+};

package/dist/RadioGroup/RadioGroup.manifest.js

@@ -0,0 +1,44 @@
+// src/RadioGroup/RadioGroup.manifest.ts
+var RadioGroupManifest = {
+  RadioGroup: {
+    description: "Group of mutually exclusive options. Square outline with the shared OPERATOR Check icon when selected.",
+    props: {
+      value: { type: "string" },
+      defaultValue: { type: "string" },
+      onValueChange: {
+        type: "function",
+        description: "(value: string) => void. Called when the operator chooses an option."
+      },
+      disabled: { type: "boolean", default: false },
+      required: { type: "boolean", default: false },
+      orientation: { type: "enum", values: ["horizontal", "vertical"], default: "vertical" },
+      size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
+      name: { type: "string" }
+    },
+    slots: {
+      children: { type: "Radio", required: true }
+    },
+    composable_with: ["Field"],
+    never_inside: ["Button", "Badge"],
+    example: '<Field label="CHANNEL">\n  <RadioGroup defaultValue="alpha">\n    <Radio value="alpha">ALPHA</Radio>\n    <Radio value="bravo">BRAVO</Radio>\n  </RadioGroup>\n</Field>'
+  },
+  Radio: {
+    description: "Single radio option. Must be a child of <RadioGroup>.",
+    props: {
+      value: { type: "string", required: true },
+      disabled: { type: "boolean", default: false }
+    },
+    composable_with: ["RadioGroup"],
+    never_inside: ["Button", "Badge"],
+    example: '<Radio value="alpha">ALPHA</Radio>'
+  }
+};
+var RadioGroupCompositionRules = {
+  RadioGroup: {
+    allowed_children: ["Radio"]
+  }
+};
+export {
+  RadioGroupCompositionRules,
+  RadioGroupManifest
+};

package/dist/RadioGroup/index.js

@@ -0,0 +1,9 @@
+// src/RadioGroup/index.ts
+import { RadioGroup, Radio } from "./RadioGroup.js";
+import { RadioGroupManifest, RadioGroupCompositionRules } from "./RadioGroup.manifest.js";
+export {
+  Radio,
+  RadioGroup,
+  RadioGroupCompositionRules,
+  RadioGroupManifest
+};

package/dist/Select/Select.js

@@ -0,0 +1,219 @@
+"use client";
+
+// src/Select/Select.tsx
+import {
+  Select as AriaSelect,
+  SelectValue,
+  Button as AriaButton,
+  ListBox,
+  ListBoxItem
+} from "react-aria-components";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { joinIds, useFieldWiring, usePartIds } from "../_internal/fieldIds.js";
+import { Check, ChevronDown } from "@oprt/icons";
+import { SelectManifest } from "./Select.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { definedOnly, renderInvalidButton, useAriaInvalidRef } from "../_internal/aria.js";
+import { useHydrationRoot } from "../_internal/hydration.js";
+import { MotionContext, useMotion } from "../_internal/motion.js";
+import { MotionPopover } from "../_internal/MotionPopover.js";
+import { MENU_ITEM_TEXT, SCREEN_MARGIN } from "../_internal/overlay.js";
+import {
+  FORCED_FOCUS_OUTLINE,
+  FORCED_NO_RESTING_OUTLINE,
+  LISTBOX_EMPTY,
+  LISTBOX_ROW,
+  LISTBOX_SURFACE
+} from "../_internal/controlStyles.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var triggerStyles = cva(
+  // A value or placeholder that does not fit wraps and the trigger grows taller, as Button does
+  // (the DC-8 ruling): the height is a minimum, and the vertical padding is what is left of it
+  // around one line and the 2 px of border, so a one-line trigger keeps exactly its token height.
+  "group/select inline-flex max-w-full items-center justify-between gap-1u border bg-oprt-surface-2 transition-colors duration-oprt-fast data-[focus-visible]:shadow-oprt-focus disabled:cursor-not-allowed disabled:bg-oprt-surface-3 disabled:border-oprt-border-control disabled:text-oprt-text-dim font-sans font-medium normal-case text-oprt-text outline-hidden",
+  {
+    variants: {
+      invalid: {
+        true: "border-oprt-error data-[focus-visible]:border-oprt-error",
+        // The control outline (design call DC-3); focus in the focus token, as the siblings do.
+        false: "border-oprt-border-control data-[focus-visible]:border-oprt-border-focus"
+      },
+      size: {
+        sm: "min-h-oprt-sm px-2u py-[calc((var(--oprt-height-sm)-2px-var(--oprt-line-base))/2)] text-oprt-base",
+        md: "min-h-oprt-md px-2u py-[calc((var(--oprt-height-md)-2px-var(--oprt-line-md))/2)] text-oprt-md",
+        lg: "min-h-oprt-lg px-3u py-[calc((var(--oprt-height-lg)-2px-var(--oprt-line-md))/2)] text-oprt-md"
+      }
+    },
+    defaultVariants: { invalid: false, size: "md" }
+  }
+);
+var contentStyles = LISTBOX_SURFACE;
+var itemStyles = LISTBOX_ROW;
+var Select = forwardRef(
+  ({
+    motion = "auto",
+    placeholder,
+    emptyMessage = "No options available.",
+    className,
+    size,
+    invalid,
+    children,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    value,
+    defaultValue,
+    onValueChange,
+    open,
+    defaultOpen,
+    onOpenChange,
+    disabled,
+    required,
+    name
+  }, ref) => {
+    const motionState = useMotion(motion);
+    const {
+      id: finalId,
+      labelledBy,
+      describedBy,
+      invalid: isInvalid,
+      required: isRequired,
+      field
+    } = useFieldWiring(
+      {
+        id,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        invalid,
+        required
+      },
+      { label: "labelledby" }
+    );
+    const hydration = useHydrationRoot(finalId, labelledBy);
+    if (process.env.NODE_ENV !== "production") {
+      devValidate("Select", SelectManifest.Select.props, { size });
+    }
+    const rootProps = {
+      isDisabled: disabled ?? false,
+      isRequired,
+      isInvalid,
+      placeholder,
+      // An empty Select opens a list that says so (Select-R3), as an empty menu does (DC-6).
+      allowsEmptyCollection: true,
+      ...definedOnly({
+        "aria-label": ariaLabel,
+        "aria-labelledby": labelledBy
+      })
+    };
+    if (value !== void 0) rootProps["selectedKey"] = value;
+    if (defaultValue !== void 0) rootProps["defaultSelectedKey"] = defaultValue;
+    if (onValueChange) rootProps["onSelectionChange"] = (k) => onValueChange(String(k));
+    if (open !== void 0) rootProps["isOpen"] = open;
+    if (defaultOpen !== void 0) rootProps["defaultOpen"] = defaultOpen;
+    if (onOpenChange) rootProps["onOpenChange"] = onOpenChange;
+    if (name !== void 0) rootProps["name"] = name;
+    const requiredId = usePartIds(["required"], { id: finalId }).required;
+    const triggerProps = definedOnly({
+      id: finalId,
+      "aria-label": ariaLabel,
+      "aria-describedby": joinIds(isRequired && requiredId, describedBy)
+    });
+    const triggerRef = useAriaInvalidRef(ref, isInvalid);
+    return /* @__PURE__ */ jsx(MotionContext.Provider, { value: motionState.mode, children: /* @__PURE__ */ jsxs(
+      AriaSelect,
+      {
+        ...hydration.probeProps,
+        ...rootProps,
+        className: "oprt-motion",
+        render: (domProps) => /* @__PURE__ */ jsx("div", { ...domProps, ...motionState.props }),
+        children: [
+          isRequired && /* @__PURE__ */ jsx("span", { id: requiredId, className: "sr-only", children: "Required" }),
+          /* @__PURE__ */ jsxs(
+            AriaButton,
+            {
+              ref: triggerRef,
+              render: renderInvalidButton(isInvalid),
+              ...triggerProps,
+              className: clsx(
+                triggerStyles({ size, invalid: isInvalid }),
+                FORCED_NO_RESTING_OUTLINE,
+                FORCED_FOCUS_OUTLINE,
+                // Inside a Field the trigger fills its width like the other text controls; outside,
+                // it keeps its content width (ruling on DC-B04-4, Select-R5). `:where` gives the rule
+                // no specificity, so a width class on the Select still wins.
+                field && "[:where(&)]:w-full",
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsx(SelectValue, { className: "min-w-0 oprt-wrap-anywhere text-left data-[placeholder]:text-oprt-text-placeholder group-disabled/select:data-[placeholder]:text-oprt-text-dim" }),
+                /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    size: 12,
+                    className: "oprt-motion-popover-chevron shrink-0",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MotionPopover,
+            {
+              motionState,
+              className: contentStyles,
+              offset: 2,
+              containerPadding: SCREEN_MARGIN,
+              children: /* @__PURE__ */ jsx(
+                ListBox,
+                {
+                  className: "outline-hidden",
+                  renderEmptyState: () => /* @__PURE__ */ jsx("p", { className: LISTBOX_EMPTY, children: emptyMessage }),
+                  children
+                }
+              )
+            }
+          )
+        ]
+      },
+      hydration.key
+    ) });
+  }
+);
+Select.displayName = "Select";
+var SelectOption = forwardRef(
+  ({ className, children, value, disabled, ...props }, ref) => {
+    const itemProps = {};
+    if (typeof children === "string") itemProps["textValue"] = children;
+    return /* @__PURE__ */ jsx(
+      ListBoxItem,
+      {
+        ref,
+        id: value,
+        isDisabled: disabled ?? false,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+            event.preventDefault();
+          }
+          event.continuePropagation();
+        },
+        className: clsx(itemStyles, className),
+        ...itemProps,
+        ...props,
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: MENU_ITEM_TEXT, children }),
+          isSelected && /* @__PURE__ */ jsx(Check, { size: 12, className: "shrink-0" })
+        ] })
+      }
+    );
+  }
+);
+SelectOption.displayName = "SelectOption";
+export {
+  Select,
+  SelectOption
+};

package/dist/Select/Select.manifest.js

@@ -0,0 +1,77 @@
+// src/Select/Select.manifest.ts
+var SelectManifest = {
+  Select: {
+    description: "Single-select dropdown. Trigger matches Input geometry for one line and grows when its text wraps; inside a Field it fills the Field's width. Portal'd list with an accent border and the shared OPERATOR Check icon on the selected option; an empty Select opens a list that says so.",
+    props: {
+      motion: {
+        type: "enum",
+        values: ["auto", "none"],
+        default: "auto",
+        description: "Tactile pointer arrival, exit, and open-state chevron rotation; keyboard, assistive activation, and system reduced motion remain immediate."
+      },
+      value: {
+        type: "string",
+        description: "Controlled selected option value. Keep the selected option among the children; a value with no matching option shows the placeholder and submits nothing."
+      },
+      defaultValue: { type: "string", description: "Initial selected option value." },
+      onValueChange: {
+        type: "function",
+        description: "(value: string) => void. Called when the operator chooses an option."
+      },
+      open: { type: "boolean", description: "Controlled open state of the list." },
+      defaultOpen: { type: "boolean", default: false, description: "Initial open state." },
+      onOpenChange: {
+        type: "function",
+        description: "(open: boolean) => void. Called when the list opens or closes."
+      },
+      placeholder: { type: "string" },
+      emptyMessage: {
+        type: "string",
+        default: "No options available.",
+        description: "What the list says when there are no options to choose from."
+      },
+      "aria-label": {
+        type: "string",
+        description: "Accessible name when there is no surrounding Field or visible heading."
+      },
+      "aria-labelledby": {
+        type: "string",
+        description: "IDs of visible elements that name the Select; wins over a Field's label."
+      },
+      "aria-describedby": {
+        type: "string",
+        description: "Description IDs; replaces a surrounding Field's help or error."
+      },
+      disabled: { type: "boolean", default: false },
+      required: { type: "boolean", default: false },
+      name: { type: "string" },
+      size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
+      invalid: { type: "boolean", default: false }
+    },
+    slots: {
+      children: { type: "SelectOption", required: true }
+    },
+    composable_with: ["Field"],
+    never_inside: ["Button", "Badge"],
+    example: '<Field label="THEATER">\n  <Select placeholder="CHOOSE...">\n    <SelectOption value="indo-pacific">INDO-PACIFIC</SelectOption>\n    <SelectOption value="european">EUROPEAN</SelectOption>\n  </Select>\n</Field>'
+  },
+  SelectOption: {
+    description: "Single option inside a Select. Must be a child of <Select>.",
+    props: {
+      value: { type: "string", required: true },
+      disabled: { type: "boolean", default: false }
+    },
+    composable_with: ["Select"],
+    never_inside: ["Button", "Badge"],
+    example: '<SelectOption value="alpha">ALPHA</SelectOption>'
+  }
+};
+var SelectCompositionRules = {
+  Select: {
+    allowed_children: ["SelectOption"]
+  }
+};
+export {
+  SelectCompositionRules,
+  SelectManifest
+};

package/dist/Select/index.js

@@ -0,0 +1,9 @@
+// src/Select/index.ts
+import { Select, SelectOption } from "./Select.js";
+import { SelectManifest, SelectCompositionRules } from "./Select.manifest.js";
+export {
+  Select,
+  SelectCompositionRules,
+  SelectManifest,
+  SelectOption
+};

package/dist/Sidebar/Sidebar.js

@@ -0,0 +1,146 @@
+"use client";
+
+// src/Sidebar/Sidebar.tsx
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useId
+} from "react";
+import clsx from "clsx";
+import { useInsideNavigationLandmark } from "../_internal/navigationLandmark.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Sidebar = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const insideLandmark = useInsideNavigationLandmark();
+    const Root = insideLandmark ? "div" : "nav";
+    const parts = Children.toArray(children);
+    let start = 0;
+    while (start < parts.length && isPart(parts[start], SidebarLogo)) start += 1;
+    let end = parts.length;
+    while (end > start && isPart(parts[end - 1], SidebarFooter)) end -= 1;
+    const list = parts.slice(start, end);
+    return /* @__PURE__ */ jsxs(
+      Root,
+      {
+        ref,
+        "aria-label": insideLandmark ? void 0 : "Sidebar",
+        className: clsx(
+          "flex flex-col w-60 max-w-full h-full bg-oprt-surface-1 border-r border-oprt-border font-sans",
+          className
+        ),
+        ...props,
+        children: [
+          parts.slice(0, start),
+          list.length > 0 && // 1 px of inline padding keeps the items' focus rings inside the scrolling box.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-oprt-sidebar-list": "",
+              className: "flex min-h-0 flex-1 flex-col overflow-y-auto px-px",
+              children: list
+            }
+          ),
+          parts.slice(end)
+        ]
+      }
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
+function isPart(node, part) {
+  return isValidElement(node) && node.type === part;
+}
+var SidebarLogo = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        // A long name wraps and the row grows (the DC-8 rule): the height is a minimum, and the
+        // padding is what is left of it around one line and the 1 px border, so a one-line logo is
+        // exactly 40 px.
+        "flex shrink-0 items-center px-3u min-h-oprt-lg py-[calc((var(--oprt-height-lg)-1px-var(--oprt-line-lg))/2)] border-b border-oprt-border text-oprt-lg uppercase tracking-oprt-lg text-oprt-text oprt-wrap-anywhere [&_code]:normal-case [&_code]:tracking-normal [&_kbd]:normal-case [&_kbd]:tracking-normal",
+        className
+      ),
+      ...props
+    }
+  )
+);
+SidebarLogo.displayName = "SidebarLogo";
+var SidebarSection = forwardRef(
+  ({ className, label, children, ...props }, ref) => {
+    const labelId = useId();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx("flex flex-col py-1u", className),
+        ...label ? { role: "group", "aria-labelledby": labelId } : {},
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: labelId,
+              className: "m-0 px-3u py-1u text-oprt-sm uppercase tracking-oprt-sm text-oprt-text-dim oprt-wrap-anywhere",
+              children: label
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+SidebarSection.displayName = "SidebarSection";
+var SidebarItem = forwardRef(
+  ({ className, icon, active = false, href, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : href ? "a" : "button";
+    const sharedProps = {
+      ref,
+      className: clsx(
+        // A long label wraps, a token breaks anywhere, and the row grows (the DC-8 rule): the
+        // height is a minimum and the padding is what is left of it around one line and the 2 px
+        // of border, so a one-line item is exactly 32 px.
+        "flex items-center gap-2u px-3u min-h-oprt-md py-[calc((var(--oprt-height-md)-2px-var(--oprt-line-base))/2)] text-left text-oprt-base font-medium uppercase tracking-oprt-caps oprt-wrap-anywhere [&_code]:normal-case [&_code]:tracking-normal [&_kbd]:normal-case [&_kbd]:tracking-normal text-oprt-text-dim hover:text-oprt-text hover:bg-oprt-surface-2 border border-transparent focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus focus-visible:outline-hidden",
+        active && "text-oprt-accent bg-oprt-accent-ghost",
+        className
+      ),
+      ...props
+    };
+    if (active) sharedProps["aria-current"] = "page";
+    if (!asChild && href) sharedProps["href"] = href;
+    if (!asChild && !href) sharedProps["type"] = "button";
+    if (asChild) {
+      return /* @__PURE__ */ jsx(Comp, { ...sharedProps, children });
+    }
+    return /* @__PURE__ */ jsxs(Comp, { ...sharedProps, children: [
+      icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center", children: icon }),
+      children
+    ] });
+  }
+);
+SidebarItem.displayName = "SidebarItem";
+var SidebarFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        "mt-auto shrink-0 min-w-0 break-words px-3u py-2u border-t border-oprt-border",
+        className
+      ),
+      ...props
+    }
+  )
+);
+SidebarFooter.displayName = "SidebarFooter";
+export {
+  Sidebar,
+  SidebarFooter,
+  SidebarItem,
+  SidebarLogo,
+  SidebarSection
+};