sheerly 0.0.1 → 0.0.2

package/src/dropdown-menu.tsx

@@ -1,9 +1,28 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react'
-import { cn } from './cn'
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType } from 'react'
+import { cn } from './utils/cn'
+import type { PolymorphicProps } from './utils/polymorphic'
 
-/** 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} />
+/**
+ * Wrapper carrying the anchor. Nest the trigger button + content inside.
+ *
+ * @example
+ * <DropdownMenu>
+ *   <Button commandfor="m" command="toggle-popover">Open</Button>
+ *   <DropdownMenuContent id="m" popover role="menu">
+ *     <DropdownMenuItem>Profile</DropdownMenuItem>
+ *     <DropdownMenuItem data-variant="destructive">Sign out</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ */
+export type DropdownMenuProps<T extends ElementType = 'span'> = PolymorphicProps<T>
+
+export function DropdownMenu<T extends ElementType = 'span'>({
+  as,
+  className,
+  ...props
+}: DropdownMenuProps<T>) {
+  const Tag = as ?? 'span'
+  return <Tag className={cn('sheerly-dropdown-menu', className)} {...props} />
 }
 
 /**
@@ -11,24 +30,42 @@ export function DropdownMenu({ className, ...props }: HTMLAttributes<HTMLSpanEle
  * `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} />
+export type DropdownMenuContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>
+
+export function DropdownMenuContent<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: DropdownMenuContentProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag 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} />
+export type DropdownMenuGroupProps<T extends ElementType = 'div'> = PolymorphicProps<T>
+
+export function DropdownMenuGroup<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: DropdownMenuGroupProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag 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} />
+export type DropdownMenuLabelProps<T extends ElementType = 'div'> = PolymorphicProps<
+  T,
+  { 'data-inset'?: boolean }
+>
+
+export function DropdownMenuLabel<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: DropdownMenuLabelProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-dropdown-menu-label', className)} {...props} />
 }
 
 /** An interactive menu row. Renders a <button> by default. */
@@ -52,18 +89,45 @@ export function DropdownMenuLinkItem({ className, ...props }: DropdownMenuLinkIt
 }
 
 /** 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} />
+export type DropdownMenuShortcutProps<T extends ElementType = 'span'> = PolymorphicProps<T>
+
+export function DropdownMenuShortcut<T extends ElementType = 'span'>({
+  as,
+  className,
+  ...props
+}: DropdownMenuShortcutProps<T>) {
+  const Tag = as ?? 'span'
+  return <Tag 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} />
+export type DropdownMenuSeparatorProps<T extends ElementType = 'div'> = PolymorphicProps<T>
+
+export function DropdownMenuSeparator<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: DropdownMenuSeparatorProps<T>) {
+  const Tag = as ?? 'div'
+  return (
+    <Tag
+      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} />
+export type DropdownMenuSubProps<T extends ElementType = 'div'> = PolymorphicProps<T>
+
+export function DropdownMenuSub<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: DropdownMenuSubProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-dropdown-menu-sub', className)} {...props} />
 }
 
 /**
@@ -83,6 +147,11 @@ export function DropdownMenuSubTrigger({ className, type = 'button', ...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} />
+export function DropdownMenuSubContent<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: DropdownMenuContentProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-dropdown-menu-content', className)} {...props} />
 }

package/src/hover-card.tsx

@@ -1,16 +1,35 @@
-import type { HTMLAttributes } from 'react'
-import { cn } from './cn'
+import type { ElementType } from 'react'
+import { cn } from './utils/cn'
+import type { PolymorphicProps } from './utils/polymorphic'
 
-export type HoverCardProps = HTMLAttributes<HTMLSpanElement>
+export type HoverCardProps<T extends ElementType = 'span'> = PolymorphicProps<T>
 
-/** Wrapper carrying the anchor. Nest the trigger + content inside. */
-export function HoverCard({ className, ...props }: HoverCardProps) {
-  return <span className={cn('sheerly-hover-card', className)} {...props} />
+/**
+ * Wrapper carrying the anchor. Nest the trigger + content inside.
+ *
+ * @example
+ * <HoverCard>
+ *   <a href="/user/ada" interestfor="hc">@ada</a>
+ *   <HoverCardContent id="hc" popover="hint">Ada Lovelace — 1815</HoverCardContent>
+ * </HoverCard>
+ */
+export function HoverCard<T extends ElementType = 'span'>({
+  as,
+  className,
+  ...props
+}: HoverCardProps<T>) {
+  const Tag = as ?? 'span'
+  return <Tag className={cn('sheerly-hover-card', className)} {...props} />
 }
 
-export type HoverCardContentProps = HTMLAttributes<HTMLDivElement>
+export type HoverCardContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>
 
 /** 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} />
+export function HoverCardContent<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: HoverCardContentProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-hover-card-content', className)} {...props} />
 }

package/src/index.css

@@ -19,6 +19,7 @@
 @import "./badge.css";
 @import "./alert.css";
 @import "./separator.css";
+@import "./scrollbar.css";
 @import "./skeleton.css";
 @import "./spinner.css";
 @import "./avatar.css";

package/src/index.ts

@@ -2,7 +2,6 @@
 // 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'
@@ -22,6 +21,7 @@ export * from './pagination'
 export * from './popover'
 export * from './progress'
 export * from './radio'
+export * from './scrollbar'
 export * from './select'
 export * from './separator'
 export * from './sheet'

package/src/input.css

@@ -4,6 +4,7 @@
   min-width: 0;
   border-radius: var(--sheerly-radius-lg);
   border: 1px solid var(--sheerly-input);
+  box-sizing: border-box;
   background-color: transparent;
   padding: 0 10px;
   font-family: "Geist Sans", system-ui, -apple-system, sans-serif;

package/src/input.tsx

@@ -1,10 +1,16 @@
 import type { InputHTMLAttributes } from 'react'
-import { cn } from './cn'
+import { cn } from './utils/cn'
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   'data-size'?: 'xs' | 'sm' | 'default' | 'lg'
 }
 
+/**
+ * A text input. Set `aria-invalid` for the error ring; `data-size` for height.
+ *
+ * @example
+ * <Input type="email" placeholder="you@example.com" />
+ */
 export function Input({ className, ...props }: InputProps) {
   return <input className={cn('sheerly-input', className)} {...props} />
 }

package/src/kbd.tsx

@@ -1,14 +1,26 @@
-import type { HTMLAttributes } from 'react'
-import { cn } from './cn'
+import type { ElementType, HTMLAttributes } from 'react'
+import { cn } from './utils/cn'
+import type { PolymorphicProps } from './utils/polymorphic'
 
 export type KbdProps = HTMLAttributes<HTMLElement>
 
+/**
+ * A keyboard key hint. Wrap several in a <KbdGroup> for combos.
+ *
+ * @example
+ * <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>
+ */
 export function Kbd({ className, ...props }: KbdProps) {
   return <kbd className={cn('sheerly-kbd', className)} {...props} />
 }
 
-export type KbdGroupProps = HTMLAttributes<HTMLElement>
+export type KbdGroupProps<T extends ElementType = 'span'> = PolymorphicProps<T>
 
-export function KbdGroup({ className, ...props }: KbdGroupProps) {
-  return <span className={cn('sheerly-kbd-group', className)} {...props} />
+export function KbdGroup<T extends ElementType = 'span'>({
+  as,
+  className,
+  ...props
+}: KbdGroupProps<T>) {
+  const Tag = as ?? 'span'
+  return <Tag className={cn('sheerly-kbd-group', className)} {...props} />
 }

package/src/label.css

@@ -9,6 +9,7 @@
   line-height: 20px;
   color: var(--sheerly-foreground);
   user-select: none;
+  cursor: pointer;
 
   &[data-disabled="true"] {
     color: var(--sheerly-muted-foreground);

package/src/label.tsx

@@ -1,10 +1,16 @@
 import type { LabelHTMLAttributes } from 'react'
-import { cn } from './cn'
+import { cn } from './utils/cn'
 
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   'data-disabled'?: 'true'
 }
 
+/**
+ * A form label. Set `data-disabled="true"` to mute it.
+ *
+ * @example
+ * <Label htmlFor="email">Email</Label>
+ */
 export function Label({ className, ...props }: LabelProps) {
   return <label className={cn('sheerly-label', className)} {...props} />
 }

package/src/pagination.tsx

@@ -1,6 +1,19 @@
-import type { AnchorHTMLAttributes, HTMLAttributes } from 'react'
-import { cn } from './cn'
+import type { AnchorHTMLAttributes, ElementType, HTMLAttributes } from 'react'
+import { cn } from './utils/cn'
+import type { PolymorphicProps } from './utils/polymorphic'
 
+/**
+ * Page navigation. Mark the current page's link with `isActive`.
+ *
+ * @example
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
+ *     <PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationNext href="#" /></PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ */
 export function Pagination({ className, ...props }: HTMLAttributes<HTMLElement>) {
   return (
     <nav
@@ -79,17 +92,17 @@ export function PaginationNext({
   )
 }
 
-export function PaginationEllipsis({
+export type PaginationEllipsisProps<T extends ElementType = 'span'> = PolymorphicProps<T>
+
+export function PaginationEllipsis<T extends ElementType = 'span'>({
+  as,
   className,
   ...props
-}: HTMLAttributes<HTMLSpanElement>) {
+}: PaginationEllipsisProps<T>) {
+  const Tag = as ?? 'span'
   return (
-    <span
-      aria-hidden
-      className={cn('sheerly-pagination-ellipsis', className)}
-      {...props}
-    >
+    <Tag aria-hidden className={cn('sheerly-pagination-ellipsis', className)} {...props}>
       &hellip;
-    </span>
+    </Tag>
   )
 }

package/src/popover.tsx

@@ -1,16 +1,35 @@
-import type { HTMLAttributes } from 'react'
-import { cn } from './cn'
+import type { ElementType } from 'react'
+import { cn } from './utils/cn'
+import type { PolymorphicProps } from './utils/polymorphic'
 
-export type PopoverProps = HTMLAttributes<HTMLSpanElement>
+export type PopoverProps<T extends ElementType = 'span'> = PolymorphicProps<T>
 
-/** Wrapper carrying the anchor. Nest the trigger button + content inside. */
-export function Popover({ className, ...props }: PopoverProps) {
-  return <span className={cn('sheerly-popover', className)} {...props} />
+/**
+ * Wrapper carrying the anchor. Nest the trigger button + content inside.
+ *
+ * @example
+ * <Popover>
+ *   <Button commandfor="p" command="toggle-popover">Open</Button>
+ *   <PopoverContent id="p" popover>Place content here.</PopoverContent>
+ * </Popover>
+ */
+export function Popover<T extends ElementType = 'span'>({
+  as,
+  className,
+  ...props
+}: PopoverProps<T>) {
+  const Tag = as ?? 'span'
+  return <Tag className={cn('sheerly-popover', className)} {...props} />
 }
 
-export type PopoverContentProps = HTMLAttributes<HTMLDivElement>
+export type PopoverContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>
 
 /** The floating panel. Give it `popover` and an `id` matched by the trigger's `commandfor`. */
-export function PopoverContent({ className, ...props }: PopoverContentProps) {
-  return <div className={cn('sheerly-popover-content', className)} {...props} />
+export function PopoverContent<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: PopoverContentProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-popover-content', className)} {...props} />
 }

package/src/progress.tsx

@@ -1,5 +1,5 @@
 import type { ProgressHTMLAttributes } from 'react'
-import { cn } from './cn'
+import { cn } from './utils/cn'
 
 export interface ProgressProps extends ProgressHTMLAttributes<HTMLProgressElement> {
   'data-variant'?:
@@ -14,6 +14,12 @@ export interface ProgressProps extends ProgressHTMLAttributes<HTMLProgressElemen
   'data-size'?: 'sm' | 'default' | 'lg'
 }
 
+/**
+ * A determinate progress bar. Set `value` (and `max`, default 1).
+ *
+ * @example
+ * <Progress value={60} max={100} data-variant="success" />
+ */
 export function Progress({ className, ...props }: ProgressProps) {
   return <progress className={cn('sheerly-progress', className)} {...props} />
 }

package/src/radio.tsx

@@ -1,14 +1,29 @@
-import type { HTMLAttributes, InputHTMLAttributes } from 'react'
-import { cn } from './cn'
+import type { ElementType, InputHTMLAttributes } from 'react'
+import { cn } from './utils/cn'
+import type { PolymorphicProps } from './utils/polymorphic'
 
-export type RadioGroupProps = HTMLAttributes<HTMLDivElement>
+export type RadioGroupProps<T extends ElementType = 'div'> = PolymorphicProps<T>
 
-export function RadioGroup({ className, ...props }: RadioGroupProps) {
-  return <div className={cn('sheerly-radio-group', className)} {...props} />
+export function RadioGroup<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: RadioGroupProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-radio-group', className)} {...props} />
 }
 
 export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>
 
+/**
+ * A radio `<input>`. Share a `name` and wrap options in a <RadioGroup>.
+ *
+ * @example
+ * <RadioGroup>
+ *   <Label><Radio name="plan" value="free" defaultChecked /> Free</Label>
+ *   <Label><Radio name="plan" value="pro" /> Pro</Label>
+ * </RadioGroup>
+ */
 export function Radio({ className, ...props }: RadioProps) {
   return <input type="radio" className={cn('sheerly-radio', className)} {...props} />
 }

package/src/scrollbar.css

@@ -0,0 +1,56 @@
+/*
+ * Scrollbar — a sheerly-styled scrollbar for any overflow container.
+ * Apply `.sheerly-scrollbar` to a scrollable element to replace the native
+ * scrollbar with a thin, theme-tinted one (matching the select picker).
+ * You still set the element's own size + overflow (e.g. `max-height` +
+ * `overflow-y: auto`), or use a `data-orientation` helper below.
+ *
+ * Usage:
+ *   <div class="sheerly-scrollbar" style="max-height: 200px; overflow-y: auto">…</div>
+ *   <div class="sheerly-scrollbar" data-orientation="vertical" style="max-height: 200px">…</div>
+ *   <div class="sheerly-scrollbar" data-orientation="horizontal">…</div>
+ *
+ * Latest Chrome only — uses standard `scrollbar-width`/`scrollbar-color` plus
+ * `::-webkit-scrollbar-*` for the fuller styled look.
+ */
+.sheerly-scrollbar {
+  /* Standard properties (thin thumb tinted from the foreground). */
+  scrollbar-width: thin;
+  scrollbar-color: oklch(from var(--sheerly-foreground) l c h / 20%) transparent;
+
+  /* WebKit/Blink styled scrollbar. */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: var(--sheerly-radius-full);
+    background-clip: padding-box;
+    background-color: oklch(from var(--sheerly-foreground) l c h / 20%);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: oklch(from var(--sheerly-foreground) l c h / 35%);
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* Orientation helpers set the matching overflow so the class is enough. */
+  &[data-orientation="vertical"] {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &[data-orientation="horizontal"] {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}

package/src/scrollbar.tsx

@@ -0,0 +1,28 @@
+import type { ElementType } from 'react'
+import { cn } from './utils/cn'
+import type { PolymorphicProps } from './utils/polymorphic'
+
+export type ScrollbarProps<T extends ElementType = 'div'> = PolymorphicProps<
+  T,
+  { 'data-orientation'?: 'vertical' | 'horizontal' }
+>
+
+/**
+ * A scroll container with a thin, theme-tinted scrollbar (matching the select
+ * picker). Set the element's own size + overflow inline, or use
+ * `data-orientation` to have the matching overflow applied for you.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
+ *
+ * @example
+ * <Scrollbar data-orientation="vertical" style={{ maxHeight: 200 }}>…</Scrollbar>
+ * <Scrollbar style={{ maxHeight: 200, overflowY: 'auto' }}>…</Scrollbar>
+ */
+export function Scrollbar<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: ScrollbarProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-scrollbar', className)} {...props} />
+}

package/src/select.css

@@ -12,6 +12,7 @@
   gap: 8px;
   border-radius: var(--sheerly-radius-lg);
   border: 1px solid var(--sheerly-input);
+  box-sizing: border-box;
   background-color: transparent;
   padding: 0 12px;
   font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
@@ -97,6 +98,29 @@
   overflow-y: auto;
   opacity: 0;
   transition: all 0.2s allow-discrete;
+
+  /* Sheerly-styled scrollbar (replaces the native one) */
+  scrollbar-width: thin;
+  scrollbar-color: oklch(from var(--sheerly-foreground) l c h / 20%) transparent;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: var(--sheerly-radius-full);
+    background-clip: padding-box;
+    background-color: oklch(from var(--sheerly-foreground) l c h / 20%);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: oklch(from var(--sheerly-foreground) l c h / 35%);
+  }
 }
 
 .sheerly-select:open::picker(select) {

package/src/select.tsx

@@ -1,5 +1,5 @@
 import type { SelectHTMLAttributes } from 'react'
-import { cn } from './cn'
+import { cn } from './utils/cn'
 
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   'data-size'?: 'sm' | 'default' | 'lg'
@@ -9,6 +9,12 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
  * Uses the customizable-select API. Requires
  * `<button><selectedcontent></selectedcontent></button>` as the first child,
  * which this wrapper injects before the consumer's <option>s.
+ *
+ * @example
+ * <Select defaultValue="apple">
+ *   <option value="apple">Apple</option>
+ *   <option value="banana">Banana</option>
+ * </Select>
  */
 export function Select({ className, children, ...props }: SelectProps) {
   return (

package/src/separator.tsx

@@ -1,10 +1,26 @@
-import type { HTMLAttributes } from 'react'
-import { cn } from './cn'
+import type { ElementType } from 'react'
+import { cn } from './utils/cn'
+import type { PolymorphicProps } from './utils/polymorphic'
 
-export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
-  'data-orientation'?: 'horizontal' | 'vertical'
-}
+export type SeparatorProps<T extends ElementType = 'div'> = PolymorphicProps<
+  T,
+  { 'data-orientation'?: 'horizontal' | 'vertical' }
+>
 
-export function Separator({ className, ...props }: SeparatorProps) {
-  return <div className={cn('sheerly-separator', className)} {...props} />
+/**
+ * A divider line. Set `data-orientation="vertical"` for a vertical rule.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `div`, e.g.
+ * `as="hr"`).
+ *
+ * @example
+ * <Separator />
+ */
+export function Separator<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: SeparatorProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-separator', className)} {...props} />
 }