@rimelight/ui 0.0.36 → 0.0.38

package/src/components/astro/RLADocsKeyboard.astro

@@ -1,319 +0,0 @@
----
-interface HighlightGroup {
-  keys: string[]
-  color?: string
-  label?: string
-}
-
-interface Props {
-  highlightedKeys?: string[]
-  groups?: HighlightGroup[]
-  keyGap?: number
-  sectionGap?: number
-  keySize?: number
-  variant?: 'full' | '60'
-  os?: 'windows' | 'mac'
-  highlightColor?: string
-  backgroundColor?: string
-}
-
-const {
-  highlightedKeys = [],
-  groups = [],
-  keyGap = 8,
-  sectionGap = 40,
-  keySize = 40,
-  variant = 'full',
-  os = 'windows',
-  highlightColor = 'var(--color-primary-500, #00c16a)',
-  backgroundColor = 'transparent'
-} = Astro.props
-
-interface Key {
-  label?: string
-  width: number
-  height?: number
-  code?: string
-  type?: 'spacer' | 'key'
-}
-
-const mainRows: Key[][] = [
-  [
-    { label: 'Esc', width: 1, code: 'Escape' },
-    { type: 'spacer', width: 1 },
-    { label: 'F1', width: 1 }, { label: 'F2', width: 1 }, { label: 'F3', width: 1 }, { label: 'F4', width: 1 },
-    { type: 'spacer', width: 0.5 },
-    { label: 'F5', width: 1 }, { label: 'F6', width: 1 }, { label: 'F7', width: 1 }, { label: 'F8', width: 1 },
-    { type: 'spacer', width: 0.5 },
-    { label: 'F9', width: 1 }, { label: 'F10', width: 1 }, { label: 'F11', width: 1 }, { label: 'F12', width: 1 },
-  ],
-  [
-    { label: '`', width: 1 }, { label: '1', width: 1, code: 'Digit1' }, { label: '2', width: 1, code: 'Digit2' }, { label: '3', width: 1, code: 'Digit3' },
-    { label: '4', width: 1, code: 'Digit4' }, { label: '5', width: 1, code: 'Digit5' }, { label: '6', width: 1, code: 'Digit6' }, { label: '7', width: 1, code: 'Digit7' },
-    { label: '8', width: 1, code: 'Digit8' }, { label: '9', width: 1, code: 'Digit9' }, { label: '0', width: 1, code: 'Digit0' }, { label: '-', width: 1, code: 'Minus' },
-    { label: '=', width: 1, code: 'Equal' }, { label: 'Bkspc', width: 2, code: 'Backspace' },
-  ],
-  [
-    { label: 'Tab', width: 1.5 }, { label: 'Q', width: 1 }, { label: 'W', width: 1 }, { label: 'E', width: 1 },
-    { label: 'R', width: 1 }, { label: 'T', width: 1 }, { label: 'Y', width: 1 }, { label: 'U', width: 1 },
-    { label: 'I', width: 1 }, { label: 'O', width: 1 }, { label: 'P', width: 1 }, { label: '[', width: 1 },
-    { label: ']', width: 1 }, { label: '\\', width: 1.5 },
-  ],
-  [
-    { label: 'Caps', width: 1.75, code: 'CapsLock' }, { label: 'A', width: 1 }, { label: 'S', width: 1 }, { label: 'D', width: 1 },
-    { label: 'F', width: 1 }, { label: 'G', width: 1 }, { label: 'H', width: 1 }, { label: 'J', width: 1 },
-    { label: 'K', width: 1 }, { label: 'L', width: 1 }, { label: ';', width: 1 }, { label: "'", width: 1 },
-    { label: 'Enter', width: 2.25, code: 'Enter' },
-  ],
-  [
-    { label: 'Shift', width: 2.5, code: 'ShiftLeft' }, { label: 'Z', width: 1 }, { label: 'X', width: 1 }, { label: 'C', width: 1 },
-    { label: 'V', width: 1 }, { label: 'B', width: 1 }, { label: 'N', width: 1 }, { label: 'M', width: 1 },
-    { label: ',', width: 1 }, { label: '.', width: 1, code: 'Period' }, { label: '/', width: 1, code: 'Slash' }, { label: 'Shift', width: 2.5, code: 'ShiftRight' },
-  ],
-  [
-    { label: 'Ctrl', width: 1.25, code: 'ControlLeft' }, { label: 'Win', width: 1.25, code: 'MetaLeft' }, { label: 'Alt', width: 1.25, code: 'AltLeft' },
-    { label: 'Space', width: 6.25, code: 'Space' },
-    { label: 'Alt', width: 1.25, code: 'AltRight' }, { label: 'Fn', width: 1.25 }, { label: 'Menu', width: 1.25, code: 'ContextMenu' }, { label: 'Ctrl', width: 1.25, code: 'ControlRight' },
-  ]
-]
-
-const functionRows: Key[][] = [
-  [{ label: 'PrtSc', width: 1, code: 'PrintScreen' }, { label: 'ScrLk', width: 1, code: 'ScrollLock' }, { label: 'Pause', width: 1, code: 'Pause' }],
-  [{ label: 'Ins', width: 1 }, { label: 'Home', width: 1 }, { label: 'PgUp', width: 1 }],
-  [{ label: 'Del', width: 1 }, { label: 'End', width: 1 }, { label: 'PgDn', width: 1 }],
-  [{ type: 'spacer', width: 3 }],
-  [{ type: 'spacer', width: 1 }, { label: '↑', width: 1, code: 'ArrowUp' }, { type: 'spacer', width: 1 }],
-  [{ label: '←', width: 1, code: 'ArrowLeft' }, { label: '↓', width: 1, code: 'ArrowDown' }, { label: '→', width: 1, code: 'ArrowRight' }],
-]
-
-const numpadKeys: Key[] = [
-  { label: 'Num', width: 1, code: 'NumLock' }, { label: '/', width: 1, code: 'NumpadDivide' }, { label: '*', width: 1, code: 'NumpadMultiply' }, { label: '-', width: 1, code: 'NumpadSubtract' },
-  { label: '7', width: 1, code: 'Numpad7' }, { label: '8', width: 1, code: 'Numpad8' }, { label: '9', width: 1, code: 'Numpad9' }, { label: '+', width: 1, height: 2, code: 'NumpadAdd' },
-  { label: '4', width: 1, code: 'Numpad4' }, { label: '5', width: 1, code: 'Numpad5' }, { label: '6', width: 1, code: 'Numpad6' },
-  { label: '1', width: 1, code: 'Numpad1' }, { label: '2', width: 1, code: 'Numpad2' }, { label: '3', width: 1, code: 'Numpad3' }, { label: 'Enter', width: 1, height: 2, code: 'NumpadEnter' },
-  { label: '0', width: 2, code: 'Numpad0' }, { label: '.', width: 1, code: 'NumpadDecimal' },
-]
-
-function getKeyLabel(key: Key) {
-  if (os !== 'mac') return key.label;
-
-  const macMap: Record<string, string> = {
-    'Ctrl': 'control',
-    'Win': 'option',
-    'Alt': 'command',
-    'Bkspc': 'delete',
-    'Enter': 'return',
-    'Caps': 'caps lock',
-    'Shift': 'shift',
-    'Menu': 'option',
-    'Tab': 'tab',
-    'Esc': 'esc',
-  };
-
-  const label = (key.label && macMap[key.label]) || key.label;
-
-  if (label === 'command') return 'cmd ⌘';
-  if (label === 'option') return 'opt ⌥';
-  if (label === 'control') return 'ctrl ⌃';
-  if (label === 'shift') return 'shift ⇧';
-  if (label === 'return') return 'return ↩';
-  if (label === 'delete') return 'delete ⌫';
-
-  return label;
-}
-
-function getKeyHighlight(key: Key) {
-  if (!key) return { active: false };
-
-  const code = key.code || key.label || '';
-  const label = key.label || '';
-  const macLabel = getKeyLabel(key) || '';
-
-  const isMatch = (list: string[]) => {
-    if (!list || !Array.isArray(list)) return false;
-    if (list.includes(code)) return true;
-    if (list.includes(label)) {
-      if (code.startsWith('Numpad') && /^\d$/.test(label)) return false;
-      return true;
-    }
-    return os === 'mac' && list.includes(macLabel);
-  };
-
-  if (isMatch(highlightedKeys)) {
-    return { active: true, color: highlightColor };
-  }
-
-  for (const group of groups) {
-    if (isMatch(group.keys)) {
-      return { active: true, color: group.color };
-    }
-  }
-
-  return { active: false };
-}
-
-const displayMainRows = variant === '60'
-    ? [
-      [{ label: 'Esc', width: 1, code: 'Escape' }, ...(mainRows[1] || []).slice(1)],
-      ...mainRows.slice(2)
-    ]
-    : mainRows;
-
-interface RenderKey extends Key {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
-
-function processRows(rows: Key[][], startX: number, startY: number): RenderKey[] {
-  const result: RenderKey[] = [];
-  let currentY = startY;
-
-  for (const row of rows) {
-    let currentX = startX;
-    for (const key of row) {
-      const w = key.width || 1;
-      const h = key.height || 1;
-      const widthPx = w * keySize + (w - 1) * keyGap;
-      const heightPx = h * keySize + (h - 1) * keyGap;
-
-      if (key.type !== 'spacer') {
-        result.push({
-          ...key,
-          x: currentX,
-          y: currentY,
-          w: widthPx,
-          h: heightPx
-        });
-      }
-      currentX += widthPx + keyGap;
-    }
-    currentY += keySize + keyGap;
-  }
-  return result;
-}
-
-const mainRenderKeys = processRows(displayMainRows, 0, 0);
-const mainHeight = displayMainRows.length * (keySize + keyGap);
-
-let secondaryKeys: RenderKey[] = [];
-let numpadRenderKeys: RenderKey[] = [];
-let totalWidth = (15 * keySize) + (14 * keyGap);
-let finalHeight = mainHeight;
-
-if (variant === 'full') {
-  const secondaryY = mainHeight + sectionGap;
-  secondaryKeys = processRows(functionRows, 0, secondaryY);
-
-  const numpadX = (3 * keySize) + (3 * keyGap) + sectionGap;
-
-  numpadKeys.forEach((key, i) => {
-    const k = key as Key;
-    const w = k.width || 1;
-    const h = k.height || 1;
-
-    const positions = [
-      [0,0], [1,0], [2,0], [3,0],
-      [0,1], [1,1], [2,1], [3,1],
-      [0,2], [1,2], [2,2],
-      [0,3], [1,3], [2,3], [3,3],
-      [0,4], [2,4]
-    ];
-
-    const pxOffset = positions[i]?.[0] ?? 0;
-    const pyOffset = positions[i]?.[1] ?? 0;
-
-    const px = numpadX + pxOffset * (keySize + keyGap);
-    const py = secondaryY + (pyOffset + 1) * (keySize + keyGap);
-
-    numpadRenderKeys.push({
-      ...k,
-      x: px,
-      y: py,
-      w: w * keySize + (w - 1) * keyGap,
-      h: h * keySize + (h - 1) * keyGap
-    });
-  });
-
-  totalWidth = Math.max(totalWidth, numpadX + (4 * keySize) + (3 * keyGap));
-  finalHeight = secondaryY + (6 * keySize) + (5 * keyGap);
-}
----
-
-<div class="keyboard-wrapper">
-  <div class="keyboard-container">
-    <svg
-        viewBox={`-16 -16 ${totalWidth + 32} ${finalHeight + 64}`}
-        class="keyboard-svg"
-        preserveAspectRatio="xMidYMid meet"
-    >
-      {backgroundColor && backgroundColor !== 'transparent' && (
-          <rect
-              x="-16" y="-16"
-              width={totalWidth + 32}
-              height={finalHeight + 64}
-              fill={backgroundColor}
-              rx="12"
-          />
-      )}
-
-      {[...mainRenderKeys, ...secondaryKeys, ...numpadRenderKeys].map((key) => {
-        const highlight = getKeyHighlight(key);
-        const color = highlight.active ? (highlight.color || highlightColor) : '#2a2a3e';
-        const label = getKeyLabel(key);
-
-        return (
-            <g class={`kb-key-group ${highlight.active ? 'highlighted' : ''}`}>
-              {/* Key Base / Shadow */}
-              <rect
-                  x={key.x}
-                  y={key.y + 1}
-                  width={key.w}
-                  height={key.h}
-                  rx="4"
-                  fill="#1a1a2e"
-              />
-              {/* Key Face */}
-              <rect
-                  x={key.x}
-                  y={key.y}
-                  width={key.w}
-                  height={key.h}
-                  rx="4"
-                  fill={color}
-                  stroke={highlight.active ? "#ffffff66" : "#3a3a4e"}
-                  stroke-width="1"
-              />
-              {label && (
-                  <text
-                      x={key.x + key.w / 2}
-                      y={key.y + key.h / 2}
-                      text-anchor="middle"
-                      dominant-baseline="central"
-                      class="kb-key-label"
-                      fill={highlight.active ? "#fff" : "#e0e0e0"}
-                  >
-                    {label}
-                  </text>
-              )}
-            </g>
-        );
-      })}
-
-    </svg>
-  </div>
-
-  {groups.some(g => g.label) && (
-      <div class="flex flex-wrap justify-center gap-x-6 gap-y-3 mt-6 w-full">
-        {groups.filter(g => g.label).map(group => (
-            <div class="flex items-center gap-2 m-0 p-0 text-[10px] text-[#a0a0b0] uppercase tracking-[0.05em] font-medium whitespace-nowrap leading-none">
-              <svg width="8" height="8" class="flex-shrink-0 block">
-                <rect width="8" height="8" rx="2" fill={group.color || '#6366f1'} />
-              </svg>
-              <span class="m-0 p-0 leading-none inline-block">{group.label}</span>
-            </div>
-        ))}
-      </div>
-  )}
-</div>

package/src/components/astro/RLADrawer.astro

@@ -1,125 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DrawerProps } from "../../types"
-import drawerThemeDefault, { createDrawerTheme } from "../../themes/drawer.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const drawerTheme = uiConfig.colors ? createDrawerTheme() : drawerThemeDefault
-
-const drawer = scv(drawerTheme)
-
-const {
-  direction = "bottom",
-  title,
-  description,
-  triggerLabel,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DrawerProps
-
-const classes = resolveClasses(drawer, {
-  direction
-}, useUi("drawer", uiProp), className)
-
-const dialogId = `rla-drawer-${Math.random().toString(36).substring(2, 9)}`
----
-<div class={classes.root} data-slot="drawer-container">
-  {triggerLabel ? (
-    <button
-      class={classes.trigger}
-      data-slot="trigger"
-      type="button"
-      data-dialog-show={dialogId}
-    >
-      {triggerLabel}
-    </button>
-  ) : (
-    <span data-dialog-show={dialogId}>
-      <slot name="trigger" />
-    </span>
-  )}
-
-  <dialog
-    id={dialogId}
-    class={classes.content}
-    data-slot="content"
-    data-close-on-click-outside="true"
-    {...rest}
-  >
-    <div class={classes.handle} data-slot="handle" />
-
-    <button
-      class={classes.closeButton}
-      data-slot="close-button"
-      type="button"
-      data-dialog-close={dialogId}
-      aria-label="Close drawer"
-    >
-      <span class="i-lucide-x size-4" aria-hidden="true" />
-    </button>
-
-    <div class={classes.header} data-slot="header">
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-      <slot name="title" />
-      
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-      <slot name="description" />
-    </div>
-
-    <slot />
-
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer" />
-    </div>
-  </dialog>
-</div>
-
-<script>
-  if (!(window as any).rlaDialogListenerActive) {
-    (window as any).rlaDialogListenerActive = true;
-    document.addEventListener('click', (e) => {
-      const target = e.target as HTMLElement | null;
-      if (!target) return;
-
-      const showTrigger = target.closest('[data-dialog-show]');
-      if (showTrigger) {
-        const dialogId = showTrigger.getAttribute('data-dialog-show');
-        if (dialogId) {
-          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
-          if (dialog) {
-            if (typeof dialog.showModal === 'function') {
-              dialog.showModal();
-            } else if (typeof (dialog as any).showmodal === 'function') {
-              (dialog as any).showmodal();
-            }
-          }
-        }
-      }
-
-      const closeTrigger = target.closest('[data-dialog-close]');
-      if (closeTrigger) {
-        const dialogId = closeTrigger.getAttribute('data-dialog-close');
-        if (dialogId) {
-          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
-          dialog?.close();
-        }
-      }
-
-      if (target.tagName === 'DIALOG' && target.getAttribute('data-close-on-click-outside') === 'true') {
-        const rect = target.getBoundingClientRect();
-        const isInModal = (
-          rect.top <= e.clientY &&
-          e.clientY <= rect.top + rect.height &&
-          rect.left <= e.clientX &&
-          e.clientX <= rect.left + rect.width
-        );
-        if (!isInModal) {
-          (target as HTMLDialogElement).close();
-        }
-      }
-    });
-  }
-</script>

package/src/components/astro/RLADropdownMenu.astro

@@ -1,109 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DropdownMenuProps } from "../../types"
-import dropdownMenuThemeDefault, { createDropdownMenuTheme } from "../../themes/dropdown-menu.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const dropdownMenuTheme = uiConfig.colors ? createDropdownMenuTheme() : dropdownMenuThemeDefault
-const dropdownMenu = scv(dropdownMenuTheme)
-
-const {
-  items = [],
-  label = "Options",
-  icon,
-  size = "md",
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DropdownMenuProps
-
-const classes = resolveClasses(dropdownMenu, {
-  size
-}, useUi("dropdownMenu", uiProp), className);
----
-<rla-dropdown-menu {...rest}>
-  <div class={classes.root} data-slot="root" data-dropdown-menu>
-    <button
-      type="button"
-      class={classes.trigger}
-      data-slot="trigger"
-      data-dropdown-trigger
-    >
-      <slot name="trigger">
-        {icon && <span class={icon} />}
-        {label}
-        <span class="ml-2 i-lucide-chevron-down opacity-50" />
-      </slot>
-    </button>
-
-    <div class={classes.content + " hidden"} data-slot="content" data-dropdown-content>
-      <slot>
-        {items.map(item => {
-          if (item.type === "separator") {
-            return <div class={classes.separator} />
-          }
-          if (item.type === "label") {
-            return <div class={classes.label}>{item.label}</div>
-          }
-          return (
-            <button
-              type="button"
-              class={classes.item}
-              data-slot="item"
-              disabled={item.disabled}
-            >
-              {item.icon && <span class={item.icon + " mr-2 size-4 text-muted-foreground"} />}
-              <span>{item.label}</span>
-              {item.shortcut && <span class={classes.shortcut}>{item.shortcut}</span>}
-            </button>
-          )
-        })}
-      </slot>
-    </div>
-  </div>
-</rla-dropdown-menu>
-
-<script>
-  class RLADropdownMenu extends HTMLElement {
-    private dropdownCleanup: (() => void) | null = null;
-
-    connectedCallback() {
-      this.style.display = 'contents';
-      const trigger = this.querySelector("[data-dropdown-trigger]") as HTMLElement | null;
-      const content = this.querySelector("[data-dropdown-content]") as HTMLElement | null;
-
-      if (!trigger || !content) return;
-
-      const onTriggerClick = (e: MouseEvent) => {
-        e.stopPropagation();
-        content.classList.toggle("hidden");
-      };
-      trigger.addEventListener("click", onTriggerClick);
-
-      const onDocumentClick = () => {
-        content.classList.add("hidden");
-      };
-      document.addEventListener("click", onDocumentClick);
-
-      this.dropdownCleanup = () => {
-        trigger.removeEventListener("click", onTriggerClick);
-        document.removeEventListener("click", onDocumentClick);
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.dropdownCleanup) {
-        this.dropdownCleanup();
-        this.dropdownCleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-dropdown-menu')) {
-    customElements.define('rla-dropdown-menu', RLADropdownMenu);
-  }
-</script>

package/src/components/astro/RLAEditor.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { EditorProps } from "../../types"
-import editorThemeDefault, { createEditorTheme } from "../../themes/editor.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const editorTheme = uiConfig.colors ? createEditorTheme() : editorThemeDefault
-
-const editor = scv(editorTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as EditorProps
-
-const classes = resolveClasses(editor, {}, useUi("editor", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAEmpty.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { EmptyProps } from "../../types"
-import emptyThemeDefault, { createEmptyTheme } from "../../themes/empty.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const emptyTheme = uiConfig.colors ? createEmptyTheme() : emptyThemeDefault
-
-const empty = scv(emptyTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as EmptyProps
-
-const classes = resolveClasses(empty, {}, useUi("empty", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAError.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ErrorProps } from "../../types"
-import errorThemeDefault, { createErrorTheme } from "../../themes/error.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const errorTheme = uiConfig.colors ? createErrorTheme() : errorThemeDefault
-
-const error = scv(errorTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ErrorProps
-
-const classes = resolveClasses(error, {}, useUi("error", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAFieldGroup.astro

@@ -1,38 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FieldGroupProps } from "../../types"
-import fieldGroupThemeDefault, { createFieldGroupTheme } from "../../themes/field-group.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const fieldGroupTheme = uiConfig.colors ? createFieldGroupTheme() : fieldGroupThemeDefault
-const fieldGroup = scv(fieldGroupTheme)
-
-const {
-  prepend,
-  append,
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as FieldGroupProps
-
-const classes = resolveClasses(fieldGroup, {
-  size
-}, useUi("fieldGroup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  {prepend && (
-    <div class={classes.prepend} data-slot="prepend">
-      {prepend}
-    </div>
-  )}
-  <slot />
-  {append && (
-    <div class={classes.append} data-slot="append">
-      {append}
-    </div>
-  )}
-</div>

package/src/components/astro/RLAFieldset.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FieldsetProps } from "../../types"
-import fieldsetThemeDefault, { createFieldsetTheme } from "../../themes/fieldset.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const fieldsetTheme = uiConfig.colors ? createFieldsetTheme() : fieldsetThemeDefault
-
-const fieldset = scv(fieldsetTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as FieldsetProps
-
-const classes = resolveClasses(fieldset, {}, useUi("fieldset", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>