@exegia/corpora-ui 0.28.0 → 1.0.0

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

@@ -0,0 +1,342 @@
+"use client";
+
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+import { ChevronRightIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const ContextMenu: typeof ContextMenuPrimitive.Root =
+  ContextMenuPrimitive.Root;
+
+export const ContextMenuPortal: typeof ContextMenuPrimitive.Portal =
+  ContextMenuPrimitive.Portal;
+
+export function ContextMenuTrigger({
+  className,
+  children,
+  ...props
+}: ContextMenuPrimitive.Trigger.Props): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.Trigger
+      className={className}
+      data-slot="context-menu-trigger"
+      {...props}
+    >
+      {children}
+    </ContextMenuPrimitive.Trigger>
+  );
+}
+
+export function ContextMenuPopup({
+  children,
+  className,
+  sideOffset = 4,
+  align = "center",
+  alignOffset,
+  side = "bottom",
+  anchor,
+  portalProps,
+  ...props
+}: ContextMenuPrimitive.Popup.Props & {
+  align?: ContextMenuPrimitive.Positioner.Props["align"];
+  sideOffset?: ContextMenuPrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: ContextMenuPrimitive.Positioner.Props["alignOffset"];
+  side?: ContextMenuPrimitive.Positioner.Props["side"];
+  anchor?: ContextMenuPrimitive.Positioner.Props["anchor"];
+  portalProps?: ContextMenuPrimitive.Portal.Props;
+}): React.ReactElement {
+  return (
+    <ContextMenuPortal {...portalProps}>
+      <ContextMenuPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="z-50"
+        data-slot="context-menu-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          className={cn(
+            "relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="context-menu-popup"
+          {...props}
+        >
+          <div className="max-h-(--available-height) w-full overflow-y-auto p-1">
+            {children}
+          </div>
+        </ContextMenuPrimitive.Popup>
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPortal>
+  );
+}
+
+export function ContextMenuGroup(
+  props: ContextMenuPrimitive.Group.Props,
+): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+export function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.Item
+      className={cn(
+        "flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>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]:-mx-0.5 [&>svg]:shrink-0",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="context-menu-item"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuLinkItem({
+  className,
+  inset,
+  variant = "default",
+  closeOnClick = true,
+  ...props
+}: ContextMenuPrimitive.LinkItem.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.LinkItem
+      className={cn(
+        "flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>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]:-mx-0.5 [&>svg]:shrink-0",
+        className,
+      )}
+      closeOnClick={closeOnClick}
+      data-inset={inset}
+      data-slot="context-menu-link-item"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  variant = "default",
+  ...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+  variant?: "default" | "switch";
+}): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground 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",
+        variant === "switch"
+          ? "grid-cols-[1fr_auto] gap-4 pe-1.5"
+          : "grid-cols-[.75rem_1fr] pe-4",
+        className,
+      )}
+      data-slot="context-menu-checkbox-item"
+      {...props}
+    >
+      {variant === "switch" ? (
+        <>
+          <span className="col-start-1">{children}</span>
+          <ContextMenuPrimitive.CheckboxItemIndicator
+            className="inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]"
+            keepMounted
+          >
+            <span className="pointer-events-none block aspect-square h-full in-[[data-slot=context-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=context-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=context-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=context-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]" />
+          </ContextMenuPrimitive.CheckboxItemIndicator>
+        </>
+      ) : (
+        <>
+          <ContextMenuPrimitive.CheckboxItemIndicator className="col-start-1 -ms-0.5">
+            <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>
+          </ContextMenuPrimitive.CheckboxItemIndicator>
+          <span className="col-start-2">{children}</span>
+        </>
+      )}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+export function ContextMenuRadioGroup(
+  props: ContextMenuPrimitive.RadioGroup.Props,
+): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      className={cn(
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[.75rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base text-foreground 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="context-menu-radio-item"
+      {...props}
+    >
+      <ContextMenuPrimitive.RadioItemIndicator className="col-start-1 -ms-0.5">
+        <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>
+      </ContextMenuPrimitive.RadioItemIndicator>
+      <span className="col-start-2">{children}</span>
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+export function ContextMenuGroupLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+}): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      className={cn(
+        "px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="context-menu-label"
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenuPrimitive.Separator.Props): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.Separator
+      className={cn("mx-2 my-1 h-px bg-border", className)}
+      data-slot="context-menu-separator"
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"kbd">): React.ReactElement {
+  return (
+    <kbd
+      className={cn(
+        "ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest",
+        className,
+      )}
+      data-slot="context-menu-shortcut"
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuSub(
+  props: ContextMenuPrimitive.SubmenuRoot.Props,
+): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
+  );
+}
+
+export function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean;
+}): React.ReactElement {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      className={cn(
+        "flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="context-menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ms-auto -me-0.5 opacity-80" />
+    </ContextMenuPrimitive.SubmenuTrigger>
+  );
+}
+
+export function ContextMenuSubPopup({
+  className,
+  sideOffset = 0,
+  alignOffset,
+  align = "start",
+  ...props
+}: ContextMenuPrimitive.Popup.Props & {
+  align?: ContextMenuPrimitive.Positioner.Props["align"];
+  sideOffset?: ContextMenuPrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: ContextMenuPrimitive.Positioner.Props["alignOffset"];
+}): React.ReactElement {
+  const defaultAlignOffset = align !== "center" ? -5 : undefined;
+
+  return (
+    <ContextMenuPopup
+      align={align}
+      alignOffset={alignOffset ?? defaultAlignOffset}
+      className={className}
+      data-slot="context-menu-sub-content"
+      side="inline-end"
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+export { ContextMenuPrimitive };

package/src/components/ui/emoji-picker.tsx

@@ -0,0 +1,161 @@
+"use client"
+
+import {
+  type EmojiPickerListCategoryHeaderProps,
+  type EmojiPickerListEmojiProps,
+  type EmojiPickerListRowProps,
+  EmojiPicker as EmojiPickerPrimitive,
+} from "frimousse"
+import { LoaderIcon, SearchIcon } from "lucide-react"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function EmojiPicker({
+  className,
+  ...props
+}: React.ComponentProps<typeof EmojiPickerPrimitive.Root>) {
+  return (
+    <EmojiPickerPrimitive.Root
+      className={cn(
+        "isolate flex h-full w-fit flex-col text-popover-foreground",
+        className
+      )}
+      data-slot="emoji-picker"
+      {...props}
+    />
+  )
+}
+
+function EmojiPickerSearch({
+  className,
+  ...props
+}: React.ComponentProps<typeof EmojiPickerPrimitive.Search>) {
+  return (
+    <div
+      className={cn("flex h-10 items-center gap-2 p-4", className)}
+      data-slot="emoji-picker-search-wrapper"
+    >
+      <EmojiPickerPrimitive.Search
+        className="flex h-10 w-full rounded-md bg-transparent px-1.5 py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+        data-slot="emoji-picker-search"
+        {...props}
+      />
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+    </div>
+  )
+}
+
+function EmojiPickerRow({ children, ...props }: EmojiPickerListRowProps) {
+  return (
+    <div {...props} className="scroll-py-3 px-1" data-slot="emoji-picker-row">
+      {children}
+    </div>
+  )
+}
+
+function EmojiPickerEmoji({
+  emoji,
+  className,
+  ...props
+}: EmojiPickerListEmojiProps) {
+  return (
+    <button
+      {...props}
+      className={cn(
+        "flex size-8 items-center justify-center rounded-full text-xl data-[active]:bg-accent",
+        className
+      )}
+      data-slot="emoji-picker-emoji"
+    >
+      {emoji.emoji}
+    </button>
+  )
+}
+
+function EmojiPickerCategoryHeader({
+  category,
+  ...props
+}: EmojiPickerListCategoryHeaderProps) {
+  return (
+    <div
+      {...props}
+      className="block rounded-md border border-border font-medium bg-background/60 px-2.5 py-1.5 text-xs text-center leading-none text-secondary-foreground shadow-md shadow-black/10 backdrop-blur-md backdrop-brightness-80"
+      data-slot="emoji-picker-category-header"
+    >
+      {category.label}
+    </div>
+  )
+}
+
+function EmojiPickerContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof EmojiPickerPrimitive.Viewport>) {
+  return (
+    <EmojiPickerPrimitive.Viewport
+      className={cn("relative flex-1 outline-hidden", className)}
+      data-slot="emoji-picker-viewport"
+      {...props}
+    >
+      <EmojiPickerPrimitive.Loading
+        className="absolute inset-0 flex items-center justify-center text-muted-foreground"
+        data-slot="emoji-picker-loading"
+      >
+        <LoaderIcon className="size-4 animate-spin" />
+      </EmojiPickerPrimitive.Loading>
+      <EmojiPickerPrimitive.Empty
+        className="absolute inset-0 flex items-center justify-center text-sm text-muted-foreground"
+        data-slot="emoji-picker-empty"
+      >
+        No emoji found.
+      </EmojiPickerPrimitive.Empty>
+      <EmojiPickerPrimitive.List
+        className="px-2 select-none"
+        components={{
+          Row: EmojiPickerRow,
+          Emoji: EmojiPickerEmoji,
+          CategoryHeader: EmojiPickerCategoryHeader,
+        }}
+        data-slot="emoji-picker-list"
+      />
+    </EmojiPickerPrimitive.Viewport>
+  )
+}
+
+function EmojiPickerFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex w-full max-w-(--frimousse-viewport-width) min-w-0 items-center gap-1 border-t p-2",
+        className
+      )}
+      data-slot="emoji-picker-footer"
+      {...props}
+    >
+      <EmojiPickerPrimitive.ActiveEmoji>
+        {({ emoji }) =>
+          emoji ? (
+            <>
+              <div className="flex size-7 flex-none items-center justify-center text-lg">
+                {emoji.emoji}
+              </div>
+              <span className="truncate text-xs text-secondary-foreground">
+                {emoji.label}
+              </span>
+            </>
+          ) : (
+            <span className="ml-1.5 flex h-7 items-center truncate text-xs text-muted-foreground">
+              Select an emoji…
+            </span>
+          )
+        }
+      </EmojiPickerPrimitive.ActiveEmoji>
+    </div>
+  )
+}
+
+export { EmojiPicker, EmojiPickerSearch, EmojiPickerContent, EmojiPickerFooter }

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

@@ -0,0 +1,32 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Field, FieldLabel, FieldDescription, FieldError } from "./field"
+import { Input } from "./input"
+
+type PreviewProps = Pick<ComponentProps<typeof Field>, "disabled" | "invalid">
+
+function FieldPreview(props: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm">
+        <Field {...props}>
+          <FieldLabel>Manuscript title</FieldLabel>
+          <Input placeholder="Enter a title" />
+          <FieldDescription>The title shown in your corpus.</FieldDescription>
+          <FieldError match={Boolean(props.invalid)}>
+            Enter a manuscript title.
+          </FieldError>
+        </Field>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: FieldPreview,
+  args: { initial: { disabled: false, invalid: false } },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/file-icons.story.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { FileBadgeTei } from "@/components/icons/file-badge-tei"
+
+type PreviewProps = Pick<ComponentProps<typeof FileBadgeTei>, "size" | "title">
+
+function FileBadgeTeiPreview(props: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="">
+        <FileBadgeTei {...props} />
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: FileBadgeTeiPreview,
+  args: { initial: { size: 64, title: "TEI file" } },
+})
+
+export const Preview = story.WithControl

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

@@ -0,0 +1,32 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Frame, FrameFooter } from "./frame"
+import { Card, CardPanel } from "./card"
+
+type PreviewProps = Pick<ComponentProps<typeof Frame>, "className"> & {
+  children: string
+}
+
+function FramePreview({ children, ...props }: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm">
+        <Frame {...props}>
+          <Card>
+            <CardPanel>{children}</CardPanel>
+          </Card>
+          <FrameFooter>Updated today</FrameFooter>
+        </Frame>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: FramePreview,
+  args: { initial: { className: "", children: "Manuscript notes" } },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/frame.tsx

@@ -8,7 +8,7 @@ export function Frame({
   return (
     <div
       className={cn(
-        "relative flex flex-col rounded-2xl bg-muted/72 p-1",
+        "relative flex flex-col rounded-md bg-muted/72 p-1",
         "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1",
         className,
       )}
@@ -25,7 +25,7 @@ export function FramePanel({
   return (
     <div
       className={cn(
-        "relative rounded-xl border bg-background bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        "relative rounded-md border bg-background bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
         className,
       )}
       data-slot="frame-panel"

package/src/components/ui/glasscn/glass-container.tsx

@@ -83,7 +83,7 @@ const glassSidebarVariableStyles: Record<FrostGlassVariant, string> = {
 }
 
 type GlassSidebarProps = React.HTMLAttributes<HTMLDivElement> &
-  FrostGlassVariantProp
+  FrostGlassVariantProp & { refraction?: number, bezel?: number, saturation?: number, blur?: number }
 
 function getGlassSidebarStandaloneClasses(glassVariant: FrostGlassVariant) {
   return cn(
@@ -98,13 +98,19 @@ function GlassContainer({
   glassVariant = "liquid-refract",
   className,
   children,
+  refraction,
+  bezel,
+  blur,
+  saturation,
   ...props
 }: GlassSidebarProps) {
   return (
     <LiquidGlass
       className={cn("rounded-[1.75rem]", className)}
-      blur={5}
-      refraction={50}
+      refraction={refraction ?? 50}
+      bezel={bezel}
+      blur={blur}
+      saturation={saturation}
     >
       <div
         className={cn(

package/src/components/ui/glasscn/liquid-glass.tsx

@@ -143,10 +143,10 @@ export const LiquidGlass = forwardRef<HTMLDivElement, LiquidGlassProps>(
   function LiquidGlass(
     {
       blur = 2,
-      refraction = 15,
+      refraction = 10,
       mapSize: _mapSize,
-      bezel = 0.34,
-      saturation = 1.28,
+      bezel = 10.34,
+      saturation = 10.28,
       className,
       style,
       children,
@@ -259,7 +259,7 @@ export const LiquidGlass = forwardRef<HTMLDivElement, LiquidGlassProps>(
             className="pointer-events-none absolute inset-0 rounded-[inherit]"
             style={{
               // Rim thickness, overridable per-consumer via --liquid-glass-rim-width.
-              padding: "var(--liquid-glass-rim-width, 0.5px)",
+              padding: "var(--liquid-glass-rim-width, 2.9px)",
               background:
                 // iOS 27 liquid-glass rim. Each gradient runs ALONG its edges and
                 // fades to nothing at the corners, uniform in between:
@@ -306,7 +306,7 @@ export const LiquidGlass = forwardRef<HTMLDivElement, LiquidGlassProps>(
                 yChannelSelector="G"
                 result="displaced"
               />
-              <feGaussianBlur in="displaced" stdDeviation="0.15" />
+              <feGaussianBlur in="displaced" stdDeviation="0.55" />
             </filter>
           </svg>
         )}

package/src/components/ui/group.tsx

@@ -54,7 +54,7 @@ export function GroupText({
 }: useRender.ComponentProps<"div">): React.ReactElement {
   const defaultProps = {
     className: cn(
-      "relative inline-flex items-center gap-2 rounded-lg border border-input bg-muted px-[calc(--spacing(3)-1px)] text-base whitespace-nowrap text-muted-foreground shadow-xs/5 transition-shadow outline-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] sm:text-sm dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
+      "relative inline-flex items-center gap-2 rounded-md border border-input bg-muted px-[calc(--spacing(3)-1px)] text-base whitespace-nowrap text-muted-foreground shadow-xs/5 transition-shadow outline-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] sm:text-sm dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
       className
     ),
     "data-slot": "group-text",