@exegia/corpora-ui 0.29.0 → 1.0.0

package/src/components/ui/popover.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+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>
+  );
+}
+
+export function PopoverPopup({
+  children,
+  className,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 0,
+  tooltipStyle = false,
+  anchor,
+  portalProps,
+  ...props
+}: 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"];
+  }): React.ReactElement {
+
+  return (
+    <PopoverPrimitive.Portal {...portalProps}>
+      <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] data-instant:transition-none"
+        data-slot="popover-positioner"
+        side={side}
+        sideOffset={sideOffset}
+        
+      >
+        <PopoverPrimitive.Popup
+          className={cn(
+            "relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-xl has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            tooltipStyle &&
+              "w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]",
+            className,
+          )}
+          data-slot="popover-popup"
+          {...props}
+        >
+          <PopoverPrimitive.Viewport
+            className={cn(
+              "relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 [--viewport-inline-padding:--spacing(4)] has-data-[slot=calendar]:p-2 data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity",
+              tooltipStyle
+                ? "py-1 [--viewport-inline-padding:--spacing(2)]"
+                : "not-data-transitioning:overflow-y-auto",
+            )}
+            data-slot="popover-viewport"
+          >
+            {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("font-semibold text-lg leading-none", className)}
+      data-slot="popover-title"
+      {...props}
+    />
+  );
+}
+
+export function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props): React.ReactElement {
+  return (
+    <PopoverPrimitive.Description
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="popover-description"
+      {...props}
+    />
+  );
+}
+
+export { PopoverPrimitive, PopoverPopup as PopoverContent };

package/src/components/ui/preview-card.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+export const PreviewCard: typeof PreviewCardPrimitive.Root =
+  PreviewCardPrimitive.Root;
+
+export function PreviewCardTrigger({
+  ...props
+}: PreviewCardPrimitive.Trigger.Props): React.ReactElement {
+  return (
+    <PreviewCardPrimitive.Trigger data-slot="preview-card-trigger" {...props} />
+  );
+}
+
+export function PreviewCardPopup({
+  className,
+  children,
+  align = "center",
+  sideOffset = 4,
+  anchor,
+  portalProps,
+  ...props
+}: PreviewCardPrimitive.Popup.Props & {
+  align?: PreviewCardPrimitive.Positioner.Props["align"];
+  sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"];
+  anchor?: PreviewCardPrimitive.Positioner.Props["anchor"];
+  portalProps?: PreviewCardPrimitive.Portal.Props;
+}): React.ReactElement {
+  return (
+    <PreviewCardPrimitive.Portal {...portalProps}>
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        anchor={anchor}
+        className="z-50"
+        data-slot="preview-card-positioner"
+        sideOffset={sideOffset}
+      >
+        <PreviewCardPrimitive.Popup
+          className={cn(
+            "relative flex w-64 origin-(--transform-origin) text-balance rounded-lg border bg-popover not-dark:bg-clip-padding p-4 text-popover-foreground text-sm shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="preview-card-content"
+          {...props}
+        >
+          {children}
+        </PreviewCardPrimitive.Popup>
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}
+
+export {
+  PreviewCardPrimitive,
+  PreviewCard as HoverCard,
+  PreviewCardTrigger as HoverCardTrigger,
+  PreviewCardPopup as HoverCardContent,
+};

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

@@ -0,0 +1,33 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Reference } from "@/components/atoms/reference"
+
+type PreviewProps = Pick<ComponentProps<typeof Reference>, "href"> & {
+  children: string
+  preview?: string
+}
+
+function ReferencePreview({ children, ...props }: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="">
+        <Reference {...props}>{children}</Reference>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: ReferencePreview,
+  args: {
+    initial: {
+      href: "#passage",
+      children: "Iliad 1.12",
+      preview: "A passage preview from the manuscript.",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+export function ScrollArea({
+  className,
+  children,
+  scrollFade = false,
+  scrollbarGutter = false,
+  fill = false,
+  clampContentMinWidth = true,
+  overscrollContain = false,
+  ...props
+}: ScrollAreaPrimitive.Root.Props & {
+  scrollFade?: boolean | "top" | "bottom";
+  scrollbarGutter?: boolean;
+  fill?: boolean;
+  clampContentMinWidth?: boolean;
+  overscrollContain?: boolean;
+}): React.ReactElement {
+  return (
+    <ScrollAreaPrimitive.Root
+      className={cn("size-full min-h-0", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        className={cn(
+          "h-full rounded-[inherit] outline-none transition-shadow focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          overscrollContain &&
+          "data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
+            scrollFade === "top" && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))]",
+            scrollFade === "bottom" && "mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))]",
+          scrollFade &&
+            "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
+          scrollbarGutter &&
+            "data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5",
+        )}
+        data-slot="scroll-area-viewport"
+      >
+        <ScrollAreaPrimitive.Content
+          className={cn(fill && "size-full")}
+          data-slot="scroll-area-content"
+          style={clampContentMinWidth ? { minWidth: 0 } : undefined}
+        >
+          {children}
+        </ScrollAreaPrimitive.Content>
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar orientation="vertical" />
+      <ScrollBar orientation="horizontal" />
+      <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+export function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      className={cn(
+        "m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100",
+        className,
+      )}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        className="relative flex-1 rounded-full bg-foreground/0"
+        data-slot="scroll-area-thumb"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+export { ScrollAreaPrimitive };

package/src/components/ui/select.tsx

@@ -15,7 +15,7 @@ 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",
+  "relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-md 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",

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

@@ -0,0 +1,34 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Separator } from "./separator"
+
+type PreviewProps = Pick<ComponentProps<typeof Separator>, "orientation">
+
+function SeparatorPreview(props: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm">
+        <div
+          className={
+            props.orientation === "vertical"
+              ? "flex h-20 items-center gap-4"
+              : "flex flex-col gap-4"
+          }
+        >
+          <span>Manuscript</span>
+          <Separator {...props} />
+          <span>Annotations</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: SeparatorPreview,
+  args: { initial: { orientation: "horizontal" } },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/tabs.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import * as React from "react"
+import {
+  type SegmentedControlSize,
+  segmentedControlItemLayoutClassName,
+  segmentedControlItemSizeClassNames,
+} from "@/lib/segmented-control"
+import { cn } from "@/lib/utils"
+
+type TabsVariant = "default" | "underline"
+type TabsSize = SegmentedControlSize
+
+const TabsListContext: React.Context<TabsSize> =
+  React.createContext<TabsSize>("default")
+
+export function Tabs({
+  className,
+  ...props
+}: TabsPrimitive.Root.Props): React.ReactElement {
+  return (
+    <TabsPrimitive.Root
+      className={cn(
+        "flex flex-col gap-2 data-[orientation=vertical]:flex-row",
+        className
+      )}
+      data-slot="tabs"
+      {...props}
+    />
+  )
+}
+
+export function TabsList({
+  variant = "default",
+  size = "default",
+  className,
+  children,
+  ...props
+}: TabsPrimitive.List.Props & {
+  size?: TabsSize
+  variant?: TabsVariant
+}): React.ReactElement {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        "relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground",
+        "data-[orientation=vertical]:flex-col",
+        variant === "default"
+          ? "rounded-lg bg-muted p-0.5 text-muted-foreground/72"
+          : "data-[orientation=horizontal]:py-1 data-[orientation=vertical]:px-1 *:data-[slot=tabs-tab]:hover:bg-accent",
+            size === "xs" && "text-xs!",
+        className
+      )}
+      data-size={size}
+      data-slot="tabs-list"
+      {...props}
+    >
+      <TabsListContext.Provider value={size}>
+        {children}
+      </TabsListContext.Provider>
+      <TabsPrimitive.Indicator
+        className={cn(
+          "absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out",
+          variant === "underline"
+            ? "z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:translate-y-px data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px"
+            : "-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input"
+        )}
+        data-slot="tab-indicator"
+      />
+    </TabsPrimitive.List>
+  )
+}
+
+export function TabsTab({
+  className,
+  size,
+  ...props
+}: TabsPrimitive.Tab.Props & {
+  size?: TabsSize
+}): React.ReactElement {
+  const contextSize: TabsSize = React.useContext(TabsListContext)
+  const resolvedSize: TabsSize = size ?? contextSize
+
+  return (
+    <TabsPrimitive.Tab
+      className={cn(
+        "relative flex shrink-0 grow cursor-pointer items-center justify-center rounded-md border border-transparent text-base font-medium whitespace-nowrap transition-[color,background-color,box-shadow] outline-none hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start sm:text-sm data-disabled:pointer-events-none data-disabled:opacity-64 data-active:text-foreground",
+        segmentedControlItemLayoutClassName,
+        segmentedControlItemSizeClassNames[resolvedSize],
+        size === "xs" && "text-xs!",
+        className
+      )}
+      data-size={resolvedSize}
+      data-slot="tabs-tab"
+      {...props}
+    />
+  )
+}
+
+export function TabsPanel({
+  className,
+  ...props
+}: TabsPrimitive.Panel.Props): React.ReactElement {
+  return (
+    <TabsPrimitive.Panel
+      className={cn("flex-1 outline-none", className)}
+      data-slot="tabs-content"
+      {...props}
+    />
+  )
+}
+
+export {
+  TabsPrimitive,
+  TabsTab as TabsTrigger,
+  TabsPanel as TabsContent,
+  type TabsSize,
+  type TabsVariant,
+}

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

@@ -0,0 +1,31 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Text } from "@/components/atoms/text/default"
+
+type PreviewProps = Pick<
+  ComponentProps<typeof Text>,
+  "type" | "size" | "selection"
+> & { children: string }
+
+function TextPreview(props: PreviewProps) {
+  return (
+    <div className="p-6">
+      <Text {...props} />
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: TextPreview,
+  args: {
+    initial: {
+      children: "Readable corpus prose belongs here.",
+      type: "paragraph",
+      size: "medium",
+    },
+  },
+})
+
+export const Preview = story.WithControl

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

@@ -0,0 +1,34 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Textarea } from "./textarea"
+
+type PreviewProps = Pick<
+  ComponentProps<typeof Textarea>,
+  "placeholder" | "disabled" | "readOnly" | "rows"
+>
+
+function TextareaPreview(props: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm">
+        <Textarea {...props} aria-label="Annotation" />
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: TextareaPreview,
+  args: {
+    initial: {
+      placeholder: "Add an annotation…",
+      disabled: false,
+      readOnly: false,
+      rows: 3,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/textarea.tsx

@@ -23,7 +23,7 @@ export function Textarea({
       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-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] 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-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-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-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] 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-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
           className,
         ) || undefined
       }