@exegia/corpora-ui 0.17.0 → 0.18.0

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

@@ -1,40 +1,40 @@
-"use client";
+"use client"
 
 import {
   type CSSProperties,
-  type HTMLAttributes,
   forwardRef,
+  type HTMLAttributes,
   useCallback,
   useEffect,
   useId,
   useMemo,
   useRef,
   useState,
-} from "react";
+} from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 type MapGeometry = {
-  width: number; // element width, CSS px, integer
-  height: number; // element height, CSS px, integer
-  radius: number; // corner radius, CSS px, already clamped to min(width, height) / 2
-  bezel: number; // fraction (0..1] of the half-min-dimension used as the refractive band
-};
+  width: number // element width, CSS px, integer
+  height: number // element height, CSS px, integer
+  radius: number // corner radius, CSS px, already clamped to min(width, height) / 2
+  bezel: number // fraction (0..1] of the half-min-dimension used as the refractive band
+}
 
-const MAX_TEXTURE_SIZE = 480;
-const EDGE_TAPER_PX = 1.25;
+const MAX_TEXTURE_SIZE = 480
+const EDGE_TAPER_PX = 1.25
 
-const displacementMapCache = new Map<string, string>();
+const displacementMapCache = new Map<string, string>()
 
 // CSS.supports("backdrop-filter", "url(#f)") returns true in Safari and
 // Firefox (they parse the value) but neither browser actually renders SVG
 // filters through backdrop-filter. UA sniffing is the only reliable approach.
 // When WebKit ships support (track WebKit bug 245510), loosen this function.
 function supportsSvgBackdropFilter() {
-  if (typeof navigator === "undefined") return false;
-  const ua = navigator.userAgent;
-  const isChromium = /Chrom(e|ium)/.test(ua) || /Edg\//.test(ua);
-  return isChromium && !/Firefox/.test(ua);
+  if (typeof navigator === "undefined") return false
+  const ua = navigator.userAgent
+  const isChromium = /Chrom(e|ium)/.test(ua) || /Edg\//.test(ua)
+  return isChromium && !/Firefox/.test(ua)
 }
 
 // NOTE: Per-corner radii and percentage radii are NOT supported. The map
@@ -45,232 +45,272 @@ function supportsSvgBackdropFilter() {
 // each unique (width, height, radius, bezel). Continuously animating the
 // element's SIZE will thrash the cache; animate transform: scale instead.
 function createDisplacementMap({ width, height, radius, bezel }: MapGeometry) {
-  const cacheKey = `${width}:${height}:${radius}:${bezel}`;
-  const cached = displacementMapCache.get(cacheKey);
-  if (cached !== undefined) return cached;
-
-  const downscale = Math.min(1, MAX_TEXTURE_SIZE / Math.max(width, height));
-  const texWidth = Math.max(2, Math.round(width * downscale));
-  const texHeight = Math.max(2, Math.round(height * downscale));
-
-  const canvas = document.createElement("canvas");
-  canvas.width = texWidth;
-  canvas.height = texHeight;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return "";
-
-  const image = ctx.createImageData(texWidth, texHeight);
-  const data = image.data;
-  const halfWidth = width / 2;
-  const halfHeight = height / 2;
-  const r = Math.min(radius, halfWidth, halfHeight);
-  const bezelPx = Math.max(1, bezel * Math.min(halfWidth, halfHeight));
+  const cacheKey = `${width}:${height}:${radius}:${bezel}`
+  const cached = displacementMapCache.get(cacheKey)
+  if (cached !== undefined) return cached
+
+  const downscale = Math.min(1, MAX_TEXTURE_SIZE / Math.max(width, height))
+  const texWidth = Math.max(2, Math.round(width * downscale))
+  const texHeight = Math.max(2, Math.round(height * downscale))
+
+  const canvas = document.createElement("canvas")
+  canvas.width = texWidth
+  canvas.height = texHeight
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return ""
+
+  const image = ctx.createImageData(texWidth, texHeight)
+  const data = image.data
+  const halfWidth = width / 2
+  const halfHeight = height / 2
+  const r = Math.min(radius, halfWidth, halfHeight)
+  const bezelPx = Math.max(1, bezel * Math.min(halfWidth, halfHeight))
 
   for (let ty = 0; ty < texHeight; ty += 1) {
     for (let tx = 0; tx < texWidth; tx += 1) {
       // Texel center in element coordinates, origin at element center.
-      const px = ((tx + 0.5) / texWidth) * width - halfWidth;
-      const py = ((ty + 0.5) / texHeight) * height - halfHeight;
+      const px = ((tx + 0.5) / texWidth) * width - halfWidth
+      const py = ((ty + 0.5) / texHeight) * height - halfHeight
 
       // Signed distance + outward normal of the rounded-rectangle contour.
-      const qx = Math.abs(px) - (halfWidth - r);
-      const qy = Math.abs(py) - (halfHeight - r);
-      let signedDistance: number;
-      let dirX = 0;
-      let dirY = 0;
+      const qx = Math.abs(px) - (halfWidth - r)
+      const qy = Math.abs(py) - (halfHeight - r)
+      let signedDistance: number
+      let dirX = 0
+      let dirY = 0
       if (qx > 0 && qy > 0) {
-        const len = Math.hypot(qx, qy);
-        signedDistance = len - r;
-        dirX = (Math.sign(px) * qx) / len;
-        dirY = (Math.sign(py) * qy) / len;
+        const len = Math.hypot(qx, qy)
+        signedDistance = len - r
+        dirX = (Math.sign(px) * qx) / len
+        dirY = (Math.sign(py) * qy) / len
       } else if (qx > qy) {
-        signedDistance = qx - r;
-        dirX = Math.sign(px);
+        signedDistance = qx - r
+        dirX = Math.sign(px)
       } else {
-        signedDistance = qy - r;
-        dirY = Math.sign(py);
+        signedDistance = qy - r
+        dirY = Math.sign(py)
       }
 
-      const index = (ty * texWidth + tx) * 4;
-      const inside = -signedDistance; // px from the contour, positive inside
+      const index = (ty * texWidth + tx) * 4
+      const inside = -signedDistance // px from the contour, positive inside
 
       if (inside <= 0) {
-        data[index] = 128;
-        data[index + 1] = 128;
-        data[index + 2] = 128;
-        data[index + 3] = 255;
-        continue;
+        data[index] = 128
+        data[index + 1] = 128
+        data[index + 2] = 128
+        data[index + 3] = 255
+        continue
       }
 
-      const t = Math.min(1, inside / bezelPx); // 0 at the edge → 1 at the bezel's inner end
-      let magnitude = 1 - convexSquircle(t); // max refraction at the edge, optically flat interior
-      magnitude *= Math.min(1, inside / EDGE_TAPER_PX); // avoid sampling artifacts on the outermost pixels
+      const t = Math.min(1, inside / bezelPx) // 0 at the edge → 1 at the bezel's inner end
+      let magnitude = 1 - convexSquircle(t) // max refraction at the edge, optically flat interior
+      magnitude *= Math.min(1, inside / EDGE_TAPER_PX) // avoid sampling artifacts on the outermost pixels
 
-      data[index] = Math.round(128 + dirX * magnitude * 127);
-      data[index + 1] = Math.round(128 + dirY * magnitude * 127);
-      data[index + 2] = 128;
-      data[index + 3] = 255;
+      data[index] = Math.round(128 + dirX * magnitude * 127)
+      data[index + 1] = Math.round(128 + dirY * magnitude * 127)
+      data[index + 2] = 128
+      data[index + 3] = 255
     }
   }
 
-  ctx.putImageData(image, 0, 0);
-  const mapUrl = canvas.toDataURL("image/png");
-  displacementMapCache.set(cacheKey, mapUrl);
-  return mapUrl;
+  ctx.putImageData(image, 0, 0)
+  const mapUrl = canvas.toDataURL("image/png")
+  displacementMapCache.set(cacheKey, mapUrl)
+  return mapUrl
 }
 
 function convexSquircle(x: number) {
-  return Math.pow(1 - Math.pow(1 - x, 4), 0.25);
+  return Math.pow(1 - Math.pow(1 - x, 4), 0.25)
 }
 
 export type LiquidGlassProps = HTMLAttributes<HTMLDivElement> & {
   /** Extra blur mixed into the backdrop-filter after the SVG refraction. */
-  blur?: number;
+  blur?: number
   /** SVG displacement strength. Higher values bend the sampled backdrop more. */
-  refraction?: number;
+  refraction?: number
   /**
    * @deprecated Texture size now derives from element size. Accepted for
    * backwards-compatibility but has no effect.
    */
-  mapSize?: number;
+  mapSize?: number
   /** Fraction of the radius used as the curved edge where most refraction happens. */
-  bezel?: number;
+  bezel?: number
   /** Backdrop saturation. */
-  saturation?: number;
-};
-
-export const LiquidGlass = forwardRef<HTMLDivElement, LiquidGlassProps>(function LiquidGlass(
-  {
-    blur = 2,
-    refraction = 15,
-    mapSize: _mapSize,
-    bezel = 0.34,
-    saturation = 1.28,
-    className,
-    style,
-    children,
-    ...props
-  },
-  ref,
-) {
-  const rawId = useId();
-  const filterId = useMemo(() => `liquid-glass-${rawId.replace(/:/g, "")}`, [rawId]);
-  console.log(_mapSize)
-  // -------------------------------------------------------------------------
-  // Ref merge — we need the DOM node to measure geometry while still
-  // forwarding the ref to the consumer.
-  // -------------------------------------------------------------------------
-
-  const localRef = useRef<HTMLDivElement | null>(null);
-  const setRefs = useCallback(
-    (node: HTMLDivElement | null) => {
-      localRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
+  saturation?: number
+}
+
+export const LiquidGlass = forwardRef<HTMLDivElement, LiquidGlassProps>(
+  function LiquidGlass(
+    {
+      blur = 2,
+      refraction = 15,
+      mapSize: _mapSize,
+      bezel = 0.34,
+      saturation = 1.28,
+      className,
+      style,
+      children,
+      ...props
     },
-    [ref],
-  );
-
-  // -------------------------------------------------------------------------
-  // Geometry measurement via ResizeObserver
-  // -------------------------------------------------------------------------
-
-  const [geometry, setGeometry] = useState<MapGeometry | null>(null);
-
-  useEffect(() => {
-    const el = localRef.current;
-    if (!el) return;
-    const measure = () => {
-      const rect = el.getBoundingClientRect();
-      const width = Math.round(rect.width);
-      const height = Math.round(rect.height);
-      if (!width || !height) return;
-      const parsed = Number.parseFloat(getComputedStyle(el).borderTopLeftRadius);
-      const radius = Math.min(Number.isFinite(parsed) ? parsed : Math.min(width, height) / 2, width / 2, height / 2);
-      setGeometry((prev) =>
-        prev && prev.width === width && prev.height === height && prev.radius === radius && prev.bezel === bezel
-          ? prev
-          : { width, height, radius, bezel },
-      );
-    };
-    measure();
-    const observer = new ResizeObserver(measure);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [bezel]);
-
-  const mapUrl = useMemo(() => (geometry ? createDisplacementMap(geometry) : ""), [geometry]);
-
-  // -------------------------------------------------------------------------
-  // Browser capability gate
-  //
-  // Both SSR and the first client render take the fallback branch so hydration
-  // never mismatches. The state is set in an effect (client-only).
-  // -------------------------------------------------------------------------
-
-  const [supported, setSupported] = useState(false);
-
-  useEffect(() => {
-    setSupported(supportsSvgBackdropFilter());
-  }, []);
-
-  const refractionActive = supported && mapUrl !== "";
-  const backdropFilter = refractionActive
-    ? `url(#${filterId}) blur(${blur}px) saturate(${saturation})`
-    : `blur(${blur + 2}px) saturate(${saturation})`;
-
-  return (
-    <>
-      <div
-        ref={setRefs}
-        className={cn(
-          "relative overflow-hidden rounded-full bg-white/[0.08]",
-          className,
+    ref
+  ) {
+    const rawId = useId()
+    const filterId = useMemo(
+      () => `liquid-glass-${rawId.replace(/:/g, "")}`,
+      [rawId]
+    )
+
+    // -------------------------------------------------------------------------
+    // Ref merge — we need the DOM node to measure geometry while still
+    // forwarding the ref to the consumer.
+    // -------------------------------------------------------------------------
+
+    const localRef = useRef<HTMLDivElement | null>(null)
+    const setRefs = useCallback(
+      (node: HTMLDivElement | null) => {
+        localRef.current = node
+        if (typeof ref === "function") ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref]
+    )
+
+    // -------------------------------------------------------------------------
+    // Geometry measurement via ResizeObserver
+    // -------------------------------------------------------------------------
+
+    const [geometry, setGeometry] = useState<MapGeometry | null>(null)
+
+    useEffect(() => {
+      const el = localRef.current
+      if (!el) return
+      const measure = () => {
+        const rect = el.getBoundingClientRect()
+        const width = Math.round(rect.width)
+        const height = Math.round(rect.height)
+        if (!width || !height) return
+        const parsed = Number.parseFloat(
+          getComputedStyle(el).borderTopLeftRadius
+        )
+        const radius = Math.min(
+          Number.isFinite(parsed) ? parsed : Math.min(width, height) / 2,
+          width / 2,
+          height / 2
+        )
+        setGeometry((prev) =>
+          prev &&
+          prev.width === width &&
+          prev.height === height &&
+          prev.radius === radius &&
+          prev.bezel === bezel
+            ? prev
+            : { width, height, radius, bezel }
+        )
+      }
+      measure()
+      const observer = new ResizeObserver(measure)
+      observer.observe(el)
+      return () => observer.disconnect()
+    }, [bezel])
+
+    const mapUrl = useMemo(
+      () => (geometry ? createDisplacementMap(geometry) : ""),
+      [geometry]
+    )
+
+    // -------------------------------------------------------------------------
+    // Browser capability gate
+    //
+    // Both SSR and the first client render take the fallback branch so hydration
+    // never mismatches. The state is set in an effect (client-only).
+    // -------------------------------------------------------------------------
+
+    const [supported, setSupported] = useState(false)
+
+    useEffect(() => {
+      setSupported(supportsSvgBackdropFilter())
+    }, [])
+
+    const refractionActive = supported && mapUrl !== ""
+    const backdropFilter = refractionActive
+      ? `url(#${filterId}) blur(${blur}px) saturate(${saturation})`
+      : `blur(${blur + 2}px) saturate(${saturation})`
+
+    return (
+      <>
+        <div
+          ref={setRefs}
+          className={cn(
+            "relative overflow-hidden rounded-full bg-white/[0.08]",
+            className
+          )}
+          style={
+            {
+              ...style,
+              backdropFilter,
+              WebkitBackdropFilter: backdropFilter,
+            } as CSSProperties
+          }
+          {...props}
+        >
+          {children}
+          <span
+            aria-hidden
+            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)",
+              background:
+                // iOS 27 liquid-glass rim. Each gradient runs ALONG its edges and
+                // fades to nothing at the corners, uniform in between:
+                //   - to right  → white streak on the top + bottom runs
+                //   - to bottom → dark streak on the left + right runs
+                // Streak colors are overridable per-consumer via the
+                // --liquid-glass-rim-light / --liquid-glass-rim-dark variables;
+                // --liquid-glass-rim-fade sets how far from each corner the
+                // streak takes to reach full strength (smaller = longer streak).
+                "linear-gradient(to right, rgba(255,255,255,0), var(--liquid-glass-rim-light, rgba(255,255,255,0.25)) var(--liquid-glass-rim-fade, 18%), var(--liquid-glass-rim-light, rgba(255,255,255,0.25)) calc(100% - var(--liquid-glass-rim-fade, 18%)), rgba(255,255,255,0)), " +
+                "linear-gradient(to bottom, rgba(0,0,0,0), var(--liquid-glass-rim-dark, rgba(0,0,0,0.2)) var(--liquid-glass-rim-fade, 18%), var(--liquid-glass-rim-dark, rgba(0,0,0,0.2)) calc(100% - var(--liquid-glass-rim-fade, 18%)), rgba(0,0,0,0))",
+              WebkitMask:
+                "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+              WebkitMaskComposite: "xor",
+              mask: "linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)",
+            }}
+          />
+        </div>
+
+        {refractionActive && (
+          <svg className="absolute size-0 overflow-hidden" aria-hidden>
+            <filter
+              id={filterId}
+              x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              colorInterpolationFilters="sRGB"
+            >
+              <feImage
+                href={mapUrl}
+                x="0"
+                y="0"
+                width="100%"
+                height="100%"
+                preserveAspectRatio="none"
+                result="map"
+              />
+              <feDisplacementMap
+                in="SourceGraphic"
+                in2="map"
+                scale={refraction}
+                xChannelSelector="R"
+                yChannelSelector="G"
+                result="displaced"
+              />
+              <feGaussianBlur in="displaced" stdDeviation="0.15" />
+            </filter>
+          </svg>
         )}
-        style={{ ...style, backdropFilter, WebkitBackdropFilter: backdropFilter } as CSSProperties}
-        {...props}
-      >
-        {children}
-        <span
-          aria-hidden
-          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)",
-            background:
-              // iOS 27 liquid-glass rim. Each gradient runs ALONG its edges and
-              // fades to nothing at the corners, uniform in between:
-              //   - to right  → white streak on the top + bottom runs
-              //   - to bottom → dark streak on the left + right runs
-              // Streak colors are overridable per-consumer via the
-              // --liquid-glass-rim-light / --liquid-glass-rim-dark variables;
-              // --liquid-glass-rim-fade sets how far from each corner the
-              // streak takes to reach full strength (smaller = longer streak).
-              "linear-gradient(to right, rgba(255,255,255,0), var(--liquid-glass-rim-light, rgba(255,255,255,0.25)) var(--liquid-glass-rim-fade, 18%), var(--liquid-glass-rim-light, rgba(255,255,255,0.25)) calc(100% - var(--liquid-glass-rim-fade, 18%)), rgba(255,255,255,0)), " +
-              "linear-gradient(to bottom, rgba(0,0,0,0), var(--liquid-glass-rim-dark, rgba(0,0,0,0.2)) var(--liquid-glass-rim-fade, 18%), var(--liquid-glass-rim-dark, rgba(0,0,0,0.2)) calc(100% - var(--liquid-glass-rim-fade, 18%)), rgba(0,0,0,0))",
-            WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-            WebkitMaskComposite: "xor",
-            mask: "linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)",
-          }}
-        />
-      </div>
-
-      {refractionActive && (
-        <svg className="absolute size-0 overflow-hidden" aria-hidden>
-          <filter id={filterId} x="0" y="0" width="100%" height="100%" colorInterpolationFilters="sRGB">
-            <feImage href={mapUrl} x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="map" />
-            <feDisplacementMap
-              in="SourceGraphic"
-              in2="map"
-              scale={refraction}
-              xChannelSelector="R"
-              yChannelSelector="G"
-              result="displaced"
-            />
-            <feGaussianBlur in="displaced" stdDeviation="0.15" />
-          </filter>
-        </svg>
-      )}
-    </>
-  );
-});
+      </>
+    )
+  }
+)

package/src/components/ui/group.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+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 type * as React from "react"
+import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
+
+export const groupVariants = cva(
+  "flex w-fit *:focus-visible:z-1 *:has-focus-visible:z-1 has-[>[data-slot=group]]:gap-2 dark:*:[[data-slot=separator]:has(~button:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64 dark:*:[button:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64",
+  {
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:pointer-coarse:after:min-w-auto *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px]",
+        vertical:
+          "flex-col *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:has-[~[data-slot]]:before:rounded-b-none *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden dark:*:first:before:block dark:*:last:before:hidden *:pointer-coarse:after:min-h-auto *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px]",
+      },
+    },
+  }
+)
+
+export function Group({
+  className,
+  orientation,
+  children,
+  ...props
+}: {
+  className?: string
+  orientation?: VariantProps<typeof groupVariants>["orientation"]
+  children: React.ReactNode
+} & React.ComponentProps<"div">): React.ReactElement {
+  return (
+    <div
+      className={cn(groupVariants({ orientation }), className)}
+      data-orientation={orientation}
+      data-slot="group"
+      role="group"
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function GroupText({
+  className,
+  render,
+  ...props
+}: 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",
+      className
+    ),
+    "data-slot": "group-text",
+  }
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(defaultProps, props),
+    render,
+  })
+}
+
+export function GroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: {
+  className?: string
+} & React.ComponentProps<typeof Separator>): React.ReactElement {
+  return (
+    <Separator
+      className={cn(
+        "pointer-events-none relative z-2 bg-input before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px",
+        className
+      )}
+      orientation={orientation}
+      {...props}
+    />
+  )
+}
+
+export {
+  Group as ButtonGroup,
+  GroupText as ButtonGroupText,
+  GroupSeparator as ButtonGroupSeparator,
+}

package/src/components/ui/separator.tsx

@@ -1,23 +1,23 @@
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
-import type React from "react";
-import { cn } from "@/lib/utils";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
 
-export function Separator({
+import { cn } from "@/lib/utils"
+
+function Separator({
   className,
   orientation = "horizontal",
   ...props
-}: SeparatorPrimitive.Props): React.ReactElement {
+}: SeparatorPrimitive.Props) {
   return (
     <SeparatorPrimitive
-      className={cn(
-        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
-        className,
-      )}
       data-slot="separator"
       orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
       {...props}
     />
-  );
+  )
 }
 
-export { SeparatorPrimitive };
+export { Separator }