@exegia/corpora-ui 0.10.0 → 0.11.0

package/src/components/motion/popover-morph.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { usePopoverPortalPosition } from "@/components/motion/popover-position";
+import { EASE_OUT, SPRING_PANEL } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+type Side = "top" | "bottom";
+type Align = "start" | "end";
+
+type MorphContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  toggle: () => void;
+  triggerId: string;
+  contentId: string;
+  triggerRef: React.MutableRefObject<HTMLElement | null>;
+  setContentRef: (node: HTMLDivElement | null) => void;
+  contentRef: React.MutableRefObject<HTMLDivElement | null>;
+};
+
+const MorphContext = createContext<MorphContextValue | null>(null);
+
+function useMorphContext(component: string) {
+  const ctx = useContext(MorphContext);
+  if (!ctx) throw new Error(`${component} must be used within <MorphPopover>`);
+  return ctx;
+}
+
+export interface MorphPopoverProps {
+  children: ReactNode;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Uncontrolled initial open state. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+
+/**
+ * A popover whose panel morphs open from the trigger corner: it's laid out at
+ * full size but clipped to the corner nearest the trigger, then unclips as one
+ * piece. Closes on outside pointer / Escape. Controlled or uncontrolled.
+ */
+export function MorphPopover({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+}: MorphPopoverProps) {
+  const baseId = useId();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const controlled = controlledOpen !== undefined;
+  const open = controlled ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!controlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlled, onOpenChange],
+  );
+  const toggle = useCallback(() => setOpen(!open), [setOpen, open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    const onPointer = (e: PointerEvent) => {
+      const target = e.target as Node;
+      if (
+        rootRef.current &&
+        !rootRef.current.contains(target) &&
+        !contentRef.current?.contains(target)
+      )
+        setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("pointerdown", onPointer);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("pointerdown", onPointer);
+    };
+  }, [open, setOpen]);
+
+  const ctx = useMemo<MorphContextValue>(
+    () => ({
+      open,
+      setOpen,
+      toggle,
+      triggerId: `${baseId}-trigger`,
+      contentId: `${baseId}-content`,
+      triggerRef,
+      setContentRef: (node) => {
+        contentRef.current = node;
+      },
+      contentRef,
+    }),
+    [open, setOpen, toggle, baseId],
+  );
+
+  return (
+    <MorphContext.Provider value={ctx}>
+      <div ref={rootRef} className={cn("relative inline-flex", className)}>
+        {children}
+      </div>
+    </MorphContext.Provider>
+  );
+}
+
+export interface MorphPopoverTriggerProps {
+  children: ReactElement;
+}
+
+function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {
+  return (node: T | null) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref && typeof ref === "object")
+        (ref as React.MutableRefObject<T | null>).current = node;
+    }
+  };
+}
+
+/** Wraps a single element, toggling the popover on click. */
+export function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps) {
+  const ctx = useMorphContext("MorphPopoverTrigger");
+  if (!isValidElement(children)) return children;
+
+  const child = children as ReactElement<Record<string, unknown>>;
+  const childOnClick = child.props.onClick as
+    | ((e: unknown) => void)
+    | undefined;
+  const childRef = (child.props as { ref?: Ref<HTMLElement> }).ref;
+
+  return cloneElement(child, {
+    id: ctx.triggerId,
+    ref: mergeRefs(childRef, (node: HTMLElement | null) => {
+      ctx.triggerRef.current = node;
+    }),
+    onClick: (e: unknown) => {
+      childOnClick?.(e);
+      ctx.toggle();
+    },
+    "aria-haspopup": "dialog",
+    "aria-expanded": ctx.open,
+    "aria-controls": ctx.open ? ctx.contentId : undefined,
+  });
+}
+
+const originFor = (side: Side, align: Align) =>
+  `${side === "bottom" ? "top" : "bottom"} ${align === "end" ? "right" : "left"}`;
+
+// A clip that hides everything but the corner nearest the trigger, so the
+// panel appears to grow out of it. inset(top right bottom left).
+function clipHidden(side: Side, align: Align, radius: number) {
+  const top = side === "bottom" ? "0%" : "92%";
+  const bottom = side === "bottom" ? "92%" : "0%";
+  const right = align === "end" ? "0%" : "92%";
+  const left = align === "end" ? "92%" : "0%";
+  return `inset(${top} ${right} ${bottom} ${left} round ${radius}px)`;
+}
+const clipShown = (radius: number) => `inset(0% 0% 0% 0% round ${radius}px)`;
+
+// Preserve the original spring character on the wrapper, but tween the complex
+// clip-path so it cannot snap when the spring resolves its final distance.
+const MORPH_CLIP_TRANSITION = { duration: 0.32, ease: EASE_OUT } as const;
+
+export interface MorphPopoverContentProps {
+  children: ReactNode;
+  side?: Side;
+  align?: Align;
+  /** Gap between trigger and panel, in px. Default 8. */
+  sideOffset?: number;
+  /** Panel corner radius, in px. Default 16. */
+  radius?: number;
+  className?: string;
+}
+
+export function MorphPopoverContent({
+  children,
+  side = "bottom",
+  align = "end",
+  sideOffset = 8,
+  radius = 16,
+  className,
+}: MorphPopoverContentProps) {
+  const ctx = useMorphContext("MorphPopoverContent");
+  const { contentId, setContentRef, triggerId } = ctx;
+  const reduce = useReducedMotion() ?? false;
+  const [portalReady, setPortalReady] = useState(false);
+  const layout = usePopoverPortalPosition(
+    ctx.triggerRef,
+    ctx.contentRef,
+    portalReady && ctx.open,
+  );
+
+  useEffect(() => setPortalReady(true), []);
+  const left = layout
+    ? align === "end"
+      ? layout.trigger.left + layout.trigger.width - layout.content.width
+      : layout.trigger.left
+    : 0;
+  const top = layout
+    ? side === "bottom"
+      ? layout.trigger.top + layout.trigger.height + sideOffset
+      : layout.trigger.top - layout.content.height - sideOffset
+    : 0;
+
+  // Both directions travel between the exact same hidden/show states. Exit
+  // targets "hidden" directly instead of introducing separate choreography.
+  const wrap = reduce
+    ? undefined
+    : {
+        hidden: { opacity: 0, scale: 0.96, transition: SPRING_PANEL },
+        show: { opacity: 1, scale: 1, transition: SPRING_PANEL },
+      };
+  const clip = reduce
+    ? undefined
+    : {
+        hidden: {
+          clipPath: clipHidden(side, align, radius),
+          transition: MORPH_CLIP_TRANSITION,
+        },
+        show: {
+          clipPath: clipShown(radius),
+          transition: MORPH_CLIP_TRANSITION,
+        },
+      };
+
+  // Keep the server and first client render identical, then mount the portal.
+  if (!portalReady) return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {ctx.open ? (
+        <motion.div
+          data-morph-popover-portal=""
+          // Wrapper carries the shadow as a drop-shadow filter, which hugs the
+          // clipped shape below (box-shadow would just get clipped away).
+          variants={wrap}
+          initial={reduce ? { opacity: 0 } : "hidden"}
+          animate={reduce ? { opacity: 1 } : "show"}
+          exit={reduce ? { opacity: 0 } : "hidden"}
+          transition={reduce ? { duration: 0.12 } : undefined}
+          style={{
+            left,
+            top,
+            visibility: layout ? "visible" : "hidden",
+            transformOrigin: originFor(side, align),
+          }}
+          className="fixed z-[9999] [filter:drop-shadow(0_10px_18px_rgba(0,0,0,0.14))]"
+        >
+          <motion.div
+            ref={setContentRef}
+            id={contentId}
+            role="dialog"
+            aria-labelledby={triggerId}
+            variants={clip}
+            style={{ borderRadius: radius }}
+            className={cn(
+              "overflow-hidden border border-border bg-background",
+              className,
+            )}
+          >
+            {children}
+          </motion.div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>,
+    document.body,
+  );
+}

package/src/components/motion/popover-position.ts

@@ -0,0 +1,86 @@
+"use client";
+
+import {
+  type MutableRefObject,
+  useCallback,
+  useLayoutEffect,
+  useState,
+} from "react";
+
+export type PortalLayout = {
+  trigger: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  };
+  content: {
+    width: number;
+    height: number;
+  };
+};
+
+function sameLayout(a: PortalLayout | null, b: PortalLayout) {
+  return (
+    a?.trigger.left === b.trigger.left &&
+    a.trigger.top === b.trigger.top &&
+    a.trigger.width === b.trigger.width &&
+    a.trigger.height === b.trigger.height &&
+    a.content.width === b.content.width &&
+    a.content.height === b.content.height
+  );
+}
+
+/** Measures a trigger and portalled panel in viewport coordinates. */
+export function usePopoverPortalPosition<
+  TriggerElement extends HTMLElement,
+  ContentElement extends HTMLElement,
+>(
+  triggerRef: MutableRefObject<TriggerElement | null>,
+  contentRef: MutableRefObject<ContentElement | null>,
+  active: boolean,
+) {
+  const [layout, setLayout] = useState<PortalLayout | null>(null);
+
+  const update = useCallback(() => {
+    const trigger = triggerRef.current;
+    const content = contentRef.current;
+    if (!trigger || !content) return;
+
+    const rect = trigger.getBoundingClientRect();
+    const next: PortalLayout = {
+      trigger: {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+      },
+      content: {
+        width: content.offsetWidth,
+        height: content.offsetHeight,
+      },
+    };
+    setLayout((current) => (sameLayout(current, next) ? current : next));
+  }, [contentRef, triggerRef]);
+
+  useLayoutEffect(() => {
+    update();
+    if (!active) return;
+
+    const trigger = triggerRef.current;
+    const content = contentRef.current;
+    const observer = new ResizeObserver(update);
+    if (trigger) observer.observe(trigger);
+    if (content) observer.observe(content);
+
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [active, contentRef, triggerRef, update]);
+
+  return layout;
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-2.5!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border bg-input/20 text-foreground dark:bg-input/30 [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/select.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  ChevronDownIcon,
+  ChevronsUpDownIcon,
+  ChevronUpIcon,
+} from "lucide-react";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Select: typeof SelectPrimitive.Root = SelectPrimitive.Root;
+
+export const selectTriggerVariants = cva(
+  "relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none",
+  {
+    defaultVariants: {
+      size: "default",
+    },
+    variants: {
+      size: {
+        default: "",
+        lg: "min-h-10 sm:min-h-9",
+        sm: "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7",
+      },
+    },
+  },
+);
+
+export const selectTriggerIconClassName = "-me-1 size-4.5 opacity-80 sm:size-4";
+
+export interface SelectButtonProps extends useRender.ComponentProps<"button"> {
+  size?: VariantProps<typeof selectTriggerVariants>["size"];
+}
+
+export function SelectButton({
+  className,
+  size,
+  render,
+  children,
+  ...props
+}: SelectButtonProps): React.ReactElement {
+  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
+    render ? undefined : "button";
+
+  const defaultProps = {
+    children: (
+      <>
+        <span className="flex-1 truncate in-data-placeholder:text-muted-foreground/72">
+          {children}
+        </span>
+        <ChevronsUpDownIcon className={selectTriggerIconClassName} />
+      </>
+    ),
+    className: cn(selectTriggerVariants({ size }), "min-w-0", className),
+    "data-slot": "select-button",
+    type: typeValue,
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+export function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props &
+  VariantProps<typeof selectTriggerVariants>): React.ReactElement {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(selectTriggerVariants({ size }), className)}
+      data-slot="select-trigger"
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon data-slot="select-icon">
+        <ChevronsUpDownIcon className={selectTriggerIconClassName} />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+export function SelectValue({
+  className,
+  ...props
+}: SelectPrimitive.Value.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Value
+      className={cn(
+        "flex-1 truncate data-placeholder:text-muted-foreground",
+        className,
+      )}
+      data-slot="select-value"
+      {...props}
+    />
+  );
+}
+
+export function SelectPopup({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  anchor,
+  portalProps,
+  ...props
+}: SelectPrimitive.Popup.Props & {
+  portalProps?: SelectPrimitive.Portal.Props;
+  side?: SelectPrimitive.Positioner.Props["side"];
+  sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"];
+  align?: SelectPrimitive.Positioner.Props["align"];
+  alignOffset?: SelectPrimitive.Positioner.Props["alignOffset"];
+  alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"];
+  anchor?: SelectPrimitive.Positioner.Props["anchor"];
+}): React.ReactElement {
+  return (
+    <SelectPrimitive.Portal {...portalProps}>
+      <SelectPrimitive.Positioner
+        align={align}
+        alignItemWithTrigger={alignItemWithTrigger}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="z-50 select-none"
+        data-slot="select-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <SelectPrimitive.Popup
+          className="origin-(--transform-origin) text-foreground outline-none"
+          data-slot="select-popup"
+          {...props}
+        >
+          <SelectPrimitive.ScrollUpArrow
+            className="top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover"
+            data-slot="select-scroll-up-arrow"
+          >
+            <ChevronUpIcon className="relative size-4.5 sm:size-4" />
+          </SelectPrimitive.ScrollUpArrow>
+          <div className="relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]">
+            <SelectPrimitive.List
+              className={cn(
+                "max-h-(--available-height) overflow-y-auto p-1",
+                className,
+              )}
+              data-slot="select-list"
+            >
+              {children}
+            </SelectPrimitive.List>
+          </div>
+          <SelectPrimitive.ScrollDownArrow
+            className="bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover"
+            data-slot="select-scroll-down-arrow"
+          >
+            <ChevronDownIcon className="relative size-4.5 sm:size-4" />
+          </SelectPrimitive.ScrollDownArrow>
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+export function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="select-item"
+      {...props}
+    >
+      <SelectPrimitive.ItemIndicator className="col-start-1">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText className="col-start-2 min-w-0">
+        {children}
+      </SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+export function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Separator
+      className={cn("mx-2 my-1 h-px bg-border", className)}
+      data-slot="select-separator"
+      {...props}
+    />
+  );
+}
+
+export function SelectGroup(
+  props: SelectPrimitive.Group.Props,
+): React.ReactElement {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+export function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.Label.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Label
+      className={cn(
+        "not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4",
+        className,
+      )}
+      data-slot="select-label"
+      {...props}
+    />
+  );
+}
+
+export function SelectGroupLabel(
+  props: SelectPrimitive.GroupLabel.Props,
+): React.ReactElement {
+  return (
+    <SelectPrimitive.GroupLabel
+      className="px-2 py-1.5 font-medium text-muted-foreground text-xs"
+      data-slot="select-group-label"
+      {...props}
+    />
+  );
+}
+
+export { SelectPrimitive, SelectPopup as SelectContent };