sheerly 0.0.1

package/src/dropdown-menu.css

@@ -0,0 +1,257 @@
+/*
+ * Dropdown Menu — a click-triggered menu built on the native popover API
+ * (command/commandfor invoker) + CSS anchor positioning. Pure CSS, no JS.
+ *
+ * Open/close via an invoker button (command="toggle-popover"); light-dismiss
+ * (click-outside / Esc) comes free from popover="auto". Items are plain
+ * <button>/<a> rows — selecting one closes the menu (auto-popover behaviour).
+ *
+ * Submenus are nested popovers: a -sub-trigger opens its own -content[popover]
+ * (DOM-nested inside the parent -content, so Chrome keeps the ancestor chain
+ * open). The sub-trigger MUST use `popovertarget` (+ popovertargetaction) —
+ * NOT command/commandfor: the invoker-command API light-dismisses the parent
+ * when the submenu opens, whereas popovertarget preserves the nested chain.
+ * Anchored to the sub-trigger, opening inline-end.
+ *
+ * Usage:
+ *   <span class="sheerly-dropdown-menu">
+ *     <button class="sheerly-button" data-variant="outline"
+ *             commandfor="menu" command="toggle-popover" aria-haspopup="menu">Open</button>
+ *     <div class="sheerly-dropdown-menu-content" id="menu" popover role="menu">
+ *       <div class="sheerly-dropdown-menu-group" role="group">
+ *         <div class="sheerly-dropdown-menu-label">My Account</div>
+ *         <button class="sheerly-dropdown-menu-item" role="menuitem">
+ *           Profile <span class="sheerly-dropdown-menu-shortcut">⇧⌘P</span>
+ *         </button>
+ *       </div>
+ *       <div class="sheerly-dropdown-menu-separator" role="separator"></div>
+ *
+ *       <!-- Submenu: a -sub wrapping a -sub-trigger + a nested -content.
+ *            The sub-trigger uses popovertarget (NOT command/commandfor). -->
+ *       <div class="sheerly-dropdown-menu-sub">
+ *         <button class="sheerly-dropdown-menu-sub-trigger" role="menuitem"
+ *                 popovertarget="sub" popovertargetaction="toggle" aria-haspopup="menu">Invite users</button>
+ *         <div class="sheerly-dropdown-menu-content" id="sub" popover role="menu">
+ *           <button class="sheerly-dropdown-menu-item" role="menuitem">Email</button>
+ *           <button class="sheerly-dropdown-menu-item" role="menuitem">Message</button>
+ *         </div>
+ *       </div>
+ *
+ *       <div class="sheerly-dropdown-menu-separator" role="separator"></div>
+ *       <button class="sheerly-dropdown-menu-item" data-variant="destructive" role="menuitem">Delete</button>
+ *     </div>
+ *   </span>
+ *
+ * Position via --sheerly-dropdown-menu-position:
+ *   block-start | block-end | inline-start | inline-end
+ */
+
+.sheerly-dropdown-menu {
+  anchor-name: --sheerly-dropdown-menu;
+  display: inline-block;
+  width: fit-content;
+}
+
+.sheerly-dropdown-menu-content {
+  position: fixed;
+  position-anchor: --sheerly-dropdown-menu;
+  position-area: var(--sheerly-dropdown-menu-position, block-end);
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  position-visibility: anchors-visible;
+  inset: unset;
+  margin: 4px 0;
+
+  /* Popover surface (shadcn: min-w-32 rounded-lg bg-popover p-1 shadow-md ring-1).
+     Layout is `flex` only while open; the UA keeps it `display: none` when
+     closed, so a closed (esp. sub-)menu can't float over and block clicks. */
+  flex-direction: column;
+  min-width: 128px;
+  max-height: var(--sheerly-dropdown-menu-max-height, auto);
+  padding: 4px;
+  border: none;
+  border-radius: var(--sheerly-radius-lg);
+  background-color: var(--sheerly-popover);
+  color: var(--sheerly-popover-foreground);
+  box-shadow:
+    inset 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%),
+    0 4px 16px -4px oklch(0 0 0 / 8%),
+    0 1px 2px oklch(0 0 0 / 4%);
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  /* Enter/exit animation (shadcn: fade-in-0 zoom-in-95) */
+  opacity: 0;
+  scale: 0.95;
+  transition:
+    opacity 0.1s ease,
+    scale 0.1s ease,
+    display 0.1s allow-discrete,
+    overlay 0.1s allow-discrete;
+
+  &:popover-open {
+    display: flex;
+    opacity: 1;
+    scale: 1;
+
+    @starting-style {
+      opacity: 0;
+      scale: 0.95;
+    }
+  }
+}
+
+/* Group — a semantic wrapper for a set of related items/labels. */
+.sheerly-dropdown-menu-group {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Label — non-interactive section heading (shadcn: px-1.5 py-1 text-xs font-medium text-muted). */
+.sheerly-dropdown-menu-label {
+  padding: 4px 6px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--sheerly-muted-foreground);
+
+  &[data-inset] {
+    padding-left: 28px;
+  }
+}
+
+/* Item — an interactive row (shadcn: gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent). */
+.sheerly-dropdown-menu-item,
+.sheerly-dropdown-menu-sub-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 4px 6px;
+  border: none;
+  border-radius: var(--sheerly-radius-md);
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: start;
+  text-decoration: none;
+  cursor: default;
+  user-select: none;
+  outline: none;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--sheerly-accent);
+    color: var(--sheerly-accent-foreground);
+  }
+
+  &[disabled],
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[data-inset] {
+    padding-left: 28px;
+  }
+
+  & svg {
+    pointer-events: none;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+/* Destructive item (shadcn: text-destructive focus:bg-destructive/10). */
+.sheerly-dropdown-menu-item[data-variant="destructive"] {
+  color: var(--sheerly-destructive);
+
+  & svg {
+    color: var(--sheerly-destructive);
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: oklch(from var(--sheerly-destructive) l c h / 10%);
+    color: var(--sheerly-destructive);
+  }
+}
+
+.dark .sheerly-dropdown-menu-item[data-variant="destructive"] {
+  &:hover,
+  &:focus-visible {
+    background-color: oklch(from var(--sheerly-destructive) l c h / 20%);
+  }
+}
+
+/* Shortcut — trailing keyboard hint (shadcn: ml-auto text-xs tracking-widest text-muted). */
+.sheerly-dropdown-menu-shortcut {
+  margin-inline-start: auto;
+  padding-inline-start: 12px;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.1em;
+  color: var(--sheerly-muted-foreground);
+}
+
+.sheerly-dropdown-menu-item:hover .sheerly-dropdown-menu-shortcut,
+.sheerly-dropdown-menu-item:focus-visible .sheerly-dropdown-menu-shortcut {
+  color: var(--sheerly-accent-foreground);
+}
+
+/* Separator (shadcn: -mx-1 my-1 h-px bg-border). */
+.sheerly-dropdown-menu-separator {
+  height: 1px;
+  margin: 4px -4px;
+  background-color: var(--sheerly-border);
+}
+
+/* Submenu — the sub-trigger opens a nested -content anchored to itself. */
+.sheerly-dropdown-menu-sub {
+  display: contents;
+}
+
+.sheerly-dropdown-menu-sub-trigger {
+  anchor-name: --sheerly-dropdown-menu-sub;
+
+  /* Trailing chevron (embedded in CSS via masked ::after — no <svg> needed). */
+  &::after {
+    content: "";
+    margin-inline-start: auto;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    background-color: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+}
+
+/* Highlight the sub-trigger while its submenu is open (shadcn: data-popup-open:bg-accent).
+   No JS: the -sub wrapper reflects the nested popover's :popover-open via :has(). */
+.sheerly-dropdown-menu-sub:has(> .sheerly-dropdown-menu-content:popover-open)
+  > .sheerly-dropdown-menu-sub-trigger,
+.sheerly-dropdown-menu-sub-trigger[aria-expanded="true"] {
+  background-color: var(--sheerly-accent);
+  color: var(--sheerly-accent-foreground);
+}
+
+/* Sub-content: a narrower panel anchored to the sub-trigger, opening inline-end
+   (shadcn: side="right" align="start", min-w-[96px], shadow-lg). A submenu panel
+   is simply a -content nested directly inside a -sub wrapper — no data-* needed. */
+.sheerly-dropdown-menu-sub > .sheerly-dropdown-menu-content {
+  position-anchor: --sheerly-dropdown-menu-sub;
+  position-area: inline-end span-block-end;
+  position-try-fallbacks: flip-inline;
+  margin: 0 4px;
+  min-width: 96px;
+  box-shadow:
+    inset 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%),
+    0 8px 24px -6px oklch(0 0 0 / 12%),
+    0 2px 4px oklch(0 0 0 / 6%);
+}

package/src/dropdown-menu.tsx

@@ -0,0 +1,88 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+/** Wrapper carrying the anchor. Nest the trigger button + content inside. */
+export function DropdownMenu({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn('sheerly-dropdown-menu', className)} {...props} />
+}
+
+/**
+ * The floating menu panel. Give it `popover`, an `id` matched by the trigger's
+ * `commandfor`, and `role="menu"`. When nested inside a <DropdownMenuSub> it is
+ * automatically styled as a submenu panel (no extra attribute needed).
+ */
+export type DropdownMenuContentProps = HTMLAttributes<HTMLDivElement>
+
+export function DropdownMenuContent({ className, ...props }: DropdownMenuContentProps) {
+  return <div className={cn('sheerly-dropdown-menu-content', className)} {...props} />
+}
+
+/** A semantic wrapper for a set of related items/labels. */
+export function DropdownMenuGroup({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-dropdown-menu-group', className)} {...props} />
+}
+
+/** A non-interactive section heading. */
+export interface DropdownMenuLabelProps extends HTMLAttributes<HTMLDivElement> {
+  'data-inset'?: boolean
+}
+
+export function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps) {
+  return <div className={cn('sheerly-dropdown-menu-label', className)} {...props} />
+}
+
+/** An interactive menu row. Renders a <button> by default. */
+export interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'data-variant'?: 'destructive'
+  'data-inset'?: boolean
+}
+
+export function DropdownMenuItem({ className, type = 'button', ...props }: DropdownMenuItemProps) {
+  return <button type={type} className={cn('sheerly-dropdown-menu-item', className)} {...props} />
+}
+
+/** An interactive menu row rendered as a link (<a>). */
+export interface DropdownMenuLinkItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  'data-variant'?: 'destructive'
+  'data-inset'?: boolean
+}
+
+export function DropdownMenuLinkItem({ className, ...props }: DropdownMenuLinkItemProps) {
+  return <a className={cn('sheerly-dropdown-menu-item', className)} {...props} />
+}
+
+/** A trailing keyboard-shortcut hint inside an item. */
+export function DropdownMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn('sheerly-dropdown-menu-shortcut', className)} {...props} />
+}
+
+/** A horizontal divider between item groups. */
+export function DropdownMenuSeparator({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div role="separator" className={cn('sheerly-dropdown-menu-separator', className)} {...props} />
+}
+
+/** Submenu wrapper (display: contents). Nest a sub-trigger + a sub-content. */
+export function DropdownMenuSub({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-dropdown-menu-sub', className)} {...props} />
+}
+
+/**
+ * Opens a submenu. Use `popoverTarget` (+ `popoverTargetAction="toggle"`)
+ * pointing at the sub-content id — NOT command/commandfor, which would
+ * light-dismiss the parent menu when the submenu opens.
+ */
+export interface DropdownMenuSubTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'data-inset'?: boolean
+}
+
+export function DropdownMenuSubTrigger({ className, type = 'button', ...props }: DropdownMenuSubTriggerProps) {
+  return <button type={type} className={cn('sheerly-dropdown-menu-sub-trigger', className)} {...props} />
+}
+
+/**
+ * The submenu panel. It's a DropdownMenuContent nested inside a DropdownMenuSub;
+ * the child-combinator CSS picks it up as a submenu — no extra attribute needed.
+ */
+export function DropdownMenuSubContent({ className, ...props }: DropdownMenuContentProps) {
+  return <div className={cn('sheerly-dropdown-menu-content', className)} {...props} />
+}

package/src/hover-card.css

@@ -0,0 +1,75 @@
+/*
+ * Hover Card — a hover/focus-triggered floating panel using
+ * popover="hint" + interestfor + anchor positioning.
+ *
+ * Like the tooltip it opens on hover (no JS, no click), but like the
+ * popover its content is a neutral card-like surface you fill with rich
+ * content (avatars, headings, links) — not a dark label.
+ *
+ * Usage:
+ *   <span class="sheerly-hover-card">
+ *     <a href="#" interestfor="hc">@nextjs</a>
+ *     <div class="sheerly-hover-card-content" id="hc" popover="hint">
+ *       The React Framework – created and maintained by @vercel.
+ *     </div>
+ *   </span>
+ *
+ * Position via --sheerly-hover-card-position:
+ *   block-start | block-end | inline-start | inline-end
+ *
+ * Open/close delay via --sheerly-hover-card-delay (default 0.2s), applied to
+ * the trigger's `interest-delay`. Override per-instance for shadcn-style
+ * `delay`/`closeDelay` behaviour, e.g.
+ *   style="--sheerly-hover-card-delay: 0.1s 0.3s"
+ */
+
+.sheerly-hover-card {
+  anchor-name: --sheerly-hover-card;
+  anchor-scope: --sheerly-hover-card;
+  display: inline-block;
+  width: fit-content;
+
+  /* Small hover delay so the card doesn't flash on incidental pointer travel. */
+  & [interestfor] {
+    interest-delay: var(--sheerly-hover-card-delay, 0.2s);
+  }
+}
+
+.sheerly-hover-card-content {
+  position: fixed;
+  position-anchor: --sheerly-hover-card;
+  position-area: var(--sheerly-hover-card-position, block-end);
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  position-visibility: anchors-visible;
+  inset: unset;
+  margin: 6px;
+
+  /* Neutral card-like surface */
+  background-color: var(--sheerly-popover);
+  color: var(--sheerly-popover-foreground);
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  width: max-content;
+  max-width: 288px;
+  padding: 16px;
+  border: 1px solid var(--sheerly-border);
+  border-radius: var(--sheerly-radius-md);
+  box-shadow: 0 4px 16px -4px oklch(0 0 0 / 8%), 0 1px 2px oklch(0 0 0 / 4%);
+  overflow: auto;
+
+  /* Popover animation — quick fade */
+  opacity: 0;
+  transition:
+    opacity 0.1s ease,
+    display 0.1s allow-discrete,
+    overlay 0.1s allow-discrete;
+
+  &:popover-open {
+    opacity: 1;
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+}

package/src/hover-card.tsx

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export type HoverCardProps = HTMLAttributes<HTMLSpanElement>
+
+/** Wrapper carrying the anchor. Nest the trigger + content inside. */
+export function HoverCard({ className, ...props }: HoverCardProps) {
+  return <span className={cn('sheerly-hover-card', className)} {...props} />
+}
+
+export type HoverCardContentProps = HTMLAttributes<HTMLDivElement>
+
+/** The floating card. Give it `popover="hint"` and an `id` matched by the trigger's `interestfor`. */
+export function HoverCardContent({ className, ...props }: HoverCardContentProps) {
+  return <div className={cn('sheerly-hover-card-content', className)} {...props} />
+}

package/src/index.css

@@ -0,0 +1,33 @@
+@import "./root.css";
+@import "./button.css";
+@import "./input.css";
+@import "./textarea.css";
+@import "./label.css";
+@import "./checkbox.css";
+@import "./radio.css";
+@import "./switch.css";
+@import "./select.css";
+@import "./dialog.css";
+@import "./dropdown-menu.css";
+@import "./sheet.css";
+@import "./accordion.css";
+@import "./slider.css";
+@import "./progress.css";
+@import "./kbd.css";
+@import "./card.css";
+@import "./table.css";
+@import "./badge.css";
+@import "./alert.css";
+@import "./separator.css";
+@import "./skeleton.css";
+@import "./spinner.css";
+@import "./avatar.css";
+@import "./tooltip.css";
+@import "./popover.css";
+@import "./hover-card.css";
+@import "./carousel.css";
+@import "./tabs.css";
+@import "./toggle.css";
+@import "./pagination.css";
+@import "./breadcrumb.css";
+@import "./typography.css";

package/src/index.ts

@@ -0,0 +1,37 @@
+// Sheerly React — optional, hookless typed wrappers around the CSS components.
+// The core library is CSS-only; import this entry only if you want typed JSX.
+// You still need to import the stylesheet: `import 'sheerly/index.css'`.
+
+export * from './cn'
+export * from './accordion'
+export * from './alert'
+export * from './avatar'
+export * from './badge'
+export * from './breadcrumb'
+export * from './button'
+export * from './card'
+export * from './carousel'
+export * from './checkbox'
+export * from './dialog'
+export * from './dropdown-menu'
+export * from './hover-card'
+export * from './input'
+export * from './kbd'
+export * from './label'
+export * from './pagination'
+export * from './popover'
+export * from './progress'
+export * from './radio'
+export * from './select'
+export * from './separator'
+export * from './sheet'
+export * from './skeleton'
+export * from './slider'
+export * from './spinner'
+export * from './switch'
+export * from './table'
+export * from './tabs'
+export * from './textarea'
+export * from './toggle'
+export * from './tooltip'
+export * from './typography'

package/src/input.css

@@ -0,0 +1,62 @@
+/* Input — <input> text field */
+.sheerly-input {
+  width: 100%;
+  min-width: 0;
+  border-radius: var(--sheerly-radius-lg);
+  border: 1px solid var(--sheerly-input);
+  background-color: transparent;
+  padding: 0 10px;
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--sheerly-foreground);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  outline: none;
+
+  /* Default size (32px) */
+  height: 32px;
+
+  &::placeholder {
+    color: var(--sheerly-muted-foreground);
+  }
+
+  &:focus-visible {
+    border-color: var(--sheerly-ring);
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  &:disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: oklch(from var(--sheerly-input) l c h / 50%);
+  }
+
+  &[aria-invalid="true"] {
+    border-color: var(--sheerly-destructive);
+    box-shadow: 0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%);
+  }
+
+  &::file-selector-button {
+    display: inline-flex;
+    height: 24px;
+    border: 0;
+    background-color: transparent;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--sheerly-foreground);
+    margin-right: 8px;
+  }
+
+  /* SM (28px) */
+  &[data-size="sm"] {
+    height: 28px;
+    font-size: 13px;
+  }
+
+  /* LG (36px) */
+  &[data-size="lg"] {
+    height: 36px;
+  }
+}

package/src/input.tsx

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  'data-size'?: 'xs' | 'sm' | 'default' | 'lg'
+}
+
+export function Input({ className, ...props }: InputProps) {
+  return <input className={cn('sheerly-input', className)} {...props} />
+}

package/src/kbd.css

@@ -0,0 +1,32 @@
+/* Kbd — <kbd> key hint */
+.sheerly-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 20px;
+  min-width: 20px;
+  width: fit-content;
+  padding: 0 4px;
+  border-radius: 4px;
+  background-color: var(--sheerly-muted);
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--sheerly-muted-foreground);
+  user-select: none;
+  pointer-events: none;
+
+  & svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+/* Groups several keys into one combo (e.g. Ctrl+K) */
+.sheerly-kbd-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}

package/src/kbd.tsx

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export type KbdProps = HTMLAttributes<HTMLElement>
+
+export function Kbd({ className, ...props }: KbdProps) {
+  return <kbd className={cn('sheerly-kbd', className)} {...props} />
+}
+
+export type KbdGroupProps = HTMLAttributes<HTMLElement>
+
+export function KbdGroup({ className, ...props }: KbdGroupProps) {
+  return <span className={cn('sheerly-kbd-group', className)} {...props} />
+}

package/src/label.css

@@ -0,0 +1,17 @@
+/* Label — <label>; data-disabled="true" mutes it */
+.sheerly-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--sheerly-foreground);
+  user-select: none;
+
+  &[data-disabled="true"] {
+    color: var(--sheerly-muted-foreground);
+    pointer-events: none;
+  }
+}

package/src/label.tsx

@@ -0,0 +1,10 @@
+import type { LabelHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  'data-disabled'?: 'true'
+}
+
+export function Label({ className, ...props }: LabelProps) {
+  return <label className={cn('sheerly-label', className)} {...props} />
+}