@exegia/corpora-ui 0.29.0 → 1.0.0

package/src/components/ui/input-group.story.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group"
+
+type PreviewProps = Pick<ComponentProps<typeof InputGroup>, "className">
+
+function InputGroupPreview(props: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm">
+        <InputGroup {...props}>
+          <InputGroupAddon>Corpus</InputGroupAddon>
+          <InputGroupInput aria-label="Search corpus" placeholder="Search…" />
+        </InputGroup>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: InputGroupPreview,
+  args: { initial: { className: "" } },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/input-group.tsx

@@ -34,7 +34,7 @@ export function InputGroup({
   return (
     <div
       className={cn(
-        "relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]",
+        "relative inline-flex w-full min-w-0 items-center rounded-md border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]",
         className,
       )}
       data-slot="input-group"

package/src/components/ui/input.story.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Input } from "./input"
+
+type PreviewProps = Pick<
+  ComponentProps<typeof Input>,
+  "placeholder" | "size" | "disabled" | "type" | "readOnly"
+> & {
+  variant: "default" | "unstyled"
+}
+
+function InputPreview({ variant, ...props }: PreviewProps) {
+  return (
+    <div className="flex justify-center p-6">
+      <div className="w-full max-w-sm">
+        <Input
+          {...props}
+          aria-label="Search the corpus"
+          unstyled={variant === "unstyled"}
+        />
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: InputPreview,
+  args: {
+    initial: {
+      placeholder: "Search the corpus",
+      size: "default",
+      disabled: false,
+      variant: "default",
+      type: "text",
+      readOnly: false,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/input.tsx

@@ -39,7 +39,7 @@ export function Input({
       className={
         cn(
           !unstyled &&
-            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-[box-shadow,border-color] duration-150 ease-smooth-out has-aria-invalid:animate-input-shake motion-reduce:animate-none motion-reduce:transition-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative inline-flex w-full rounded-md border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-[box-shadow,border-color] duration-150 ease-smooth-out has-aria-invalid:animate-input-shake motion-reduce:animate-none motion-reduce:transition-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
           className,
         ) || undefined
       }

package/src/components/ui/kbd.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Kbd({
+  className,
+  ...props
+}: React.ComponentProps<"kbd">): React.ReactElement {
+  return (
+    <kbd
+      className={cn(
+        "pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded-[.35rem] font-medium font-sans text-muted-foreground text-xs [&_svg:not([class*='size-'])]:size-3 border border-border bg-black/5 px-1",
+        "shadow-[inset_0_-1px_0_rgb(0_0_0/0.08)] dark:border-white/10 dark:bg-white/6 dark:shadow-[inset_0_-1px_0_rgb(0_0_0/0.4)]",
+        className,
+      )}
+      data-slot="kbd"
+      {...props}
+    />
+  );
+}
+
+export function KbdGroup({
+  className,
+  ...props
+}: React.ComponentProps<"kbd">): React.ReactElement {
+  return (
+    <kbd
+      className={cn("inline-flex items-center gap-1", className)}
+      data-slot="kbd-group"
+      {...props}
+    />
+  );
+}

package/src/components/ui/label.story.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Label } from "./label"
+import { Input } from "./input"
+
+type PreviewProps = Pick<ComponentProps<typeof Label>, "sound"> & {
+  children: string
+}
+
+function LabelPreview({ children, ...props }: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm space-y-2">
+        <>
+          <Label {...props} htmlFor="story-manuscript">
+            {children}
+          </Label>
+          <Input id="story-manuscript" placeholder="Enter a title" />
+        </>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: LabelPreview,
+  args: { initial: { sound: false, children: "Manuscript title" } },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/menu-command.story.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { MenuCommand } from "./menu-command"
+import { Button } from "./button"
+
+type PreviewProps = Pick<ComponentProps<typeof MenuCommand>, "side" | "align">
+
+function MenuCommandPreview(props: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="">
+        <MenuCommand
+          {...props}
+          items={[
+            {
+              id: "search",
+              label: "Search corpus",
+              description: "Find a passage",
+              trailing: "Connected",
+            },
+          ]}
+        >
+          <Button variant="outline">Corpus actions</Button>
+        </MenuCommand>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: MenuCommandPreview,
+  args: { initial: { side: "top", align: "start" } },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/menu-command.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import type * as React from "react"
+import {
+  Menu,
+  MenuGroup,
+  MenuItem,
+  MenuLinkItem,
+  MenuPopup,
+  MenuTrigger,
+} from "@/components/ui/menu"
+import { cn } from "@/lib/utils"
+
+export interface MenuCommandItem {
+  id: string
+  label: React.ReactNode
+  /** Muted copy after the label ("Upload from your computer"). */
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  /** Right-aligned status ("Connected"). */
+  trailing?: React.ReactNode
+  /** Renders the row as a link instead of a button. */
+  href?: string
+  disabled?: boolean
+  onSelect?: () => void
+}
+
+export interface MenuCommandListProps {
+  items: MenuCommandItem[]
+  onSelect?: (item: MenuCommandItem) => void
+  className?: string
+}
+
+/**
+ * Command rows for a menu popup: icon · label · description · trailing
+ * status. Use inside any `MenuPopup`, or via `MenuCommand` for the wired
+ * trigger + popup pair.
+ *
+ * @sketch "Atom / Menu Command"
+ */
+export function MenuCommandList({
+  items,
+  onSelect,
+  className,
+}: MenuCommandListProps): React.ReactElement {
+  return (
+    <MenuGroup className={cn("flex flex-col", className)} data-slot="menu-command-list">
+      {items.map((item) => {
+        const body = (
+          <>
+            {item.icon ? (
+              <span className="flex size-4 shrink-0 items-center justify-center text-text-secondary [&>svg]:size-4">
+                {item.icon}
+              </span>
+            ) : null}
+            <span className="shrink-0 font-medium text-text-primary">{item.label}</span>
+            {item.description ? (
+              <span className="truncate text-text-secondary">{item.description}</span>
+            ) : null}
+            {item.trailing ? (
+              <span className="ml-auto shrink-0 pl-3 text-semantic-success">{item.trailing}</span>
+            ) : null}
+          </>
+        )
+        const rowClass = "h-9 gap-2.5 rounded-md px-2 text-[13px]"
+        const select = () => {
+          item.onSelect?.()
+          onSelect?.(item)
+        }
+        return item.href ? (
+          <MenuLinkItem
+            aria-disabled={item.disabled || undefined}
+            className={cn(rowClass, item.disabled && "pointer-events-none opacity-64")}
+            data-command={item.id}
+            href={item.href}
+            key={item.id}
+            onClick={select}
+          >
+            {body}
+          </MenuLinkItem>
+        ) : (
+          <MenuItem
+            className={rowClass}
+            data-command={item.id}
+            disabled={item.disabled}
+            key={item.id}
+            onClick={select}
+          >
+            {body}
+          </MenuItem>
+        )
+      })}
+    </MenuGroup>
+  )
+}
+
+export interface MenuCommandProps extends MenuCommandListProps {
+  /** The trigger element; receives the menu's trigger props. */
+  children: React.ReactElement
+  side?: React.ComponentProps<typeof MenuPopup>["side"]
+  align?: React.ComponentProps<typeof MenuPopup>["align"]
+  popupClassName?: string
+}
+
+/** A trigger and a popup of command rows, wired together. */
+export function MenuCommand({
+  children,
+  items,
+  onSelect,
+  side = "top",
+  align = "start",
+  className,
+  popupClassName,
+}: MenuCommandProps): React.ReactElement {
+  return (
+    <Menu>
+      <MenuTrigger render={children} />
+      <MenuPopup
+        align={align}
+        className={cn("w-[28rem] max-w-[calc(100vw-2rem)]", popupClassName)}
+        side={side}
+        sideOffset={8}
+      >
+        <MenuCommandList className={className} items={items} onSelect={onSelect} />
+      </MenuPopup>
+    </Menu>
+  )
+}

package/src/components/ui/otp-field.story.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Label } from "./label"
+import { OTPField, OTPFieldInput } from "./otp-field"
+
+type PreviewProps = Pick<
+  ComponentProps<typeof OTPField>,
+  "size" | "disabled" | "sound"
+> & { length: 4 | 6 | 8 }
+
+function OTPFieldPreview({ length, ...props }: PreviewProps) {
+  return (
+    <div className="overflow-x-auto p-6">
+      <Label className="sr-only" htmlFor="otp-story">
+        One-time passcode
+      </Label>
+      <OTPField {...props} id="otp-story" key={length} length={length}>
+        {Array.from({ length }, (_, i) => (
+          <OTPFieldInput key={i} aria-label={`Digit ${i + 1}`} />
+        ))}
+      </OTPField>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: OTPFieldPreview,
+  args: {
+    initial: { length: 6, size: "default", disabled: false, sound: true },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/otp-field.tsx

@@ -55,7 +55,7 @@ export function OTPFieldInput({
   return (
     <OTPFieldPrimitive.Input
       className={cn(
-        "relative in-[[data-slot=otp-field][data-size=lg]]:size-10 size-9 min-w-0 rounded-lg border border-input bg-background not-dark:bg-clip-padding text-center in-[[data-slot=otp-field][data-size=lg]]:text-lg text-base text-foreground in-[[data-slot=otp-field][data-size=lg]]:leading-10 leading-9 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-focus-visible:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:z-10 focus-visible:border-ring focus-visible:shadow-none focus-visible:ring-[3px] focus-visible:ring-ring/24 aria-invalid:border-destructive/36 aria-invalid:shadow-none aria-invalid:focus-visible:border-destructive/64 aria-invalid:focus-visible:ring-destructive/16 sm:in-[[data-slot=otp-field][data-size=lg]]:size-9 sm:size-8 sm:in-[[data-slot=otp-field][data-size=lg]]:text-base sm:text-sm sm:in-[[data-slot=otp-field][data-size=lg]]:leading-9 sm:leading-8 dark:bg-input/32 dark:aria-invalid:focus-visible:ring-destructive/24 dark:not-focus-visible:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        "relative in-[[data-slot=otp-field][data-size=lg]]:size-10 size-9 min-w-0 rounded-md border border-input bg-background not-dark:bg-clip-padding text-center in-[[data-slot=otp-field][data-size=lg]]:text-lg text-base text-foreground in-[[data-slot=otp-field][data-size=lg]]:leading-10 leading-9 shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] not-focus-visible:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:z-10 focus-visible:border-ring focus-visible:shadow-none focus-visible:ring-[3px] focus-visible:ring-ring/24 aria-invalid:border-destructive/36 aria-invalid:shadow-none aria-invalid:focus-visible:border-destructive/64 aria-invalid:focus-visible:ring-destructive/16 sm:in-[[data-slot=otp-field][data-size=lg]]:size-9 sm:size-8 sm:in-[[data-slot=otp-field][data-size=lg]]:text-base sm:text-sm sm:in-[[data-slot=otp-field][data-size=lg]]:leading-9 sm:leading-8 dark:bg-input/32 dark:aria-invalid:focus-visible:ring-destructive/24 dark:not-focus-visible:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
         className,
       )}
       data-slot="otp-field-input"

package/src/components/ui/password-input.story.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { PasswordInput } from "@/components/composed/password-input"
+
+export const story = defineStory({
+  Component: PasswordInput,
+  args: {
+    initial: {
+      visibilityToggle: true,
+      showStrength: false,
+      autoComplete: "new-password",
+      placeholder: "Enter password",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/popover-glass.tsx

@@ -0,0 +1,161 @@
+"use client"
+
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import type React from "react"
+import { type FrostGlassVariant } from "@/lib/glass-variants"
+import { cn } from "@/lib/utils"
+import { GlassContainer } from "@/components/ui/glasscn/glass-container"
+
+/** Layout, sizing and transition — shared by every popup variant. */
+const popupStructuralClasses =
+  "relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) outline-none transition-[width,height,scale,opacity] has-data-[slot=calendar]:rounded-xl data-starting-style:scale-98 data-starting-style:opacity-0"
+
+/**
+ * Neutral base for the glass treatment — the finish itself (blur, tint,
+ * bevel) comes from `glassVariantStyles` keyed by `glassVariant`, which is
+ * only accepted when `variant` is "glass".
+ */
+const popupGlassBaseClasses =
+  "border-transparent! text-foreground bg-transparent!"
+
+/**
+ * Every finish except "liquid-refract". That one delegates its look to the
+ * `LiquidGlass` wrapper, whose `overflow-hidden` box measures 0px tall around
+ * an absolutely-sized popup and clips it away entirely — so a popup offers the
+ * four pure-class finishes only, and defaults to "frosted" rather than to
+ * Button's "liquid-refract".
+ */
+type PopoverGlassVariant = Exclude<FrostGlassVariant, "liquid-refract">
+
+export const PopoverCreateHandle: typeof PopoverPrimitive.createHandle =
+  PopoverPrimitive.createHandle
+
+export const Popover: typeof PopoverPrimitive.Root = PopoverPrimitive.Root
+
+export function PopoverTrigger({
+  className,
+  children,
+  ...props
+}: PopoverPrimitive.Trigger.Props): React.ReactElement {
+  return (
+    <PopoverPrimitive.Trigger
+      className={className}
+      data-slot="popover-trigger"
+      {...props}
+    >
+      {children}
+    </PopoverPrimitive.Trigger>
+  )
+}
+
+type PopoverPopupBaseProps = PopoverPrimitive.Popup.Props & {
+  portalProps?: PopoverPrimitive.Portal.Props
+  side?: PopoverPrimitive.Positioner.Props["side"]
+  align?: PopoverPrimitive.Positioner.Props["align"]
+  sideOffset?: PopoverPrimitive.Positioner.Props["sideOffset"]
+  alignOffset?: PopoverPrimitive.Positioner.Props["alignOffset"]
+  tooltipStyle?: boolean
+  anchor?: PopoverPrimitive.Positioner.Props["anchor"]
+}
+
+export type PopoverGlassProps = PopoverPopupBaseProps & {
+  /** Glass finish. Either "frosted" or "glass". Defaults to "frosted". */
+  glassVariant?: PopoverGlassVariant
+}
+
+export function PopoverGlass({
+  children,
+  className,
+  side = "bottom",
+  align = "center",
+  sideOffset = 0,
+  alignOffset = 0,
+  anchor,
+  portalProps,
+  glassVariant,
+  ...props
+}: PopoverGlassProps): React.ReactElement {
+  const resolvedGlassVariant: PopoverGlassVariant = glassVariant ?? "frosted"
+
+  return (
+    <PopoverPrimitive.Portal {...portalProps} keepMounted>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] animate-bezier-sine-in-out animate-duration-fast data-instant:transition-none"
+        data-slot="popover-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <PopoverPrimitive.Popup
+          className={cn(
+            popupStructuralClasses,
+            popupGlassBaseClasses,
+            className
+          )}
+
+          data-glass-variant={resolvedGlassVariant}
+          data-slot="popover-popup"
+          {...props}
+        >
+          <PopoverPrimitive.Arrow  className="relative block w-2.5 h-2 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-background/80 before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+          
+          <PopoverPrimitive.Viewport
+            className={cn(
+              "relative size-full max-h-(--available-height) px-(--viewport-inline-padding) [--viewport-inline-padding:--spacing(4)] has-data-[slot=calendar]:p-2 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-current:transition-opacity **:data-current:data-ending-style:opacity-0 data-instant:transition-none **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:opacity-100 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-starting-style:opacity-0",
+              "bg-background/40 px-0 backdrop-blur-md"
+            )}
+            data-slot="popover-viewport"
+            render={
+              <GlassContainer
+                refraction={8}
+                bezel={50}
+                blur={10}
+                saturation={-4}
+                className={cn("shadow-md shadow-black/10 rounded-lg")}
+                glassVariant="liquid-refract"
+              />
+            }
+          >
+            {children}
+          </PopoverPrimitive.Viewport>
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export function PopoverClose({
+  ...props
+}: PopoverPrimitive.Close.Props): React.ReactElement {
+  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />
+}
+
+export function PopoverTitle({
+  className,
+  ...props
+}: PopoverPrimitive.Title.Props): React.ReactElement {
+  return (
+    <PopoverPrimitive.Title
+      className={cn("text-lg leading-none font-semibold", className)}
+      data-slot="popover-title"
+      {...props}
+    />
+  )
+}
+
+export function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props): React.ReactElement {
+  return (
+    <PopoverPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="popover-description"
+      {...props}
+    />
+  )
+}
+
+export { PopoverPrimitive, PopoverGlass as PopoverContent }