sheerly 0.0.1 → 0.0.3

package/src/carousel.tsx

@@ -1,7 +1,8 @@
-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 CarouselProps = HTMLAttributes<HTMLDivElement>
+export type CarouselProps<T extends ElementType = 'div'> = PolymorphicProps<T>
 
 /**
  * Pure-CSS carousel. The element itself is the scroll container — put
@@ -14,17 +15,33 @@ export type CarouselProps = HTMLAttributes<HTMLDivElement>
  * component sets no gap on purpose (a fixed basis + gap breaks first/last
  * snapping, so the prev/next buttons wouldn't disable and end dots wouldn't
  * highlight).
+ *
+ * @example
+ * <Carousel>
+ *   <CarouselItem data-name="Slide 1">…</CarouselItem>
+ *   <CarouselItem data-name="Slide 2">…</CarouselItem>
+ * </Carousel>
  */
-export function Carousel({ className, ...props }: CarouselProps) {
-  return <div className={cn('sheerly-carousel', className)} {...props} />
+export function Carousel<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: CarouselProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-carousel', className)} {...props} />
 }
 
-export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
-  /** Accessible name for this slide's generated scroll marker (WCAG). */
-  'data-name'?: string
-}
+export type CarouselItemProps<T extends ElementType = 'div'> = PolymorphicProps<
+  T,
+  { /** Accessible name for this slide's generated scroll marker (WCAG). */ 'data-name'?: string }
+>
 
 /** A slide. Defaults to `width: 100%` (one per page); override via `style`/`className`. */
-export function CarouselItem({ className, ...props }: CarouselItemProps) {
-  return <div className={cn('sheerly-carousel-item', className)} {...props} />
+export function CarouselItem<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: CarouselItemProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-carousel-item', className)} {...props} />
 }

package/src/checkbox.tsx

@@ -1,8 +1,14 @@
 import type { InputHTMLAttributes } from 'react'
-import { cn } from './cn'
+import { cn } from './utils/cn'
 
 export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>
 
+/**
+ * A checkbox `<input>`. Pair with a <Label> for a clickable target.
+ *
+ * @example
+ * <Checkbox id="terms" defaultChecked />
+ */
 export function Checkbox({ className, ...props }: CheckboxProps) {
   return (
     <input type="checkbox" className={cn('sheerly-checkbox', className)} {...props} />

package/src/dialog.tsx

@@ -1,39 +1,78 @@
-import type { ButtonHTMLAttributes, DialogHTMLAttributes, HTMLAttributes } from 'react'
-import { cn } from './cn'
+import type { ButtonHTMLAttributes, DialogHTMLAttributes, ElementType } from 'react'
+import { cn } from './utils/cn'
+import type { PolymorphicProps } from './utils/polymorphic'
 
 /**
  * Native <dialog>. Open via invoker command (`command="show-modal"`) or
  * `.showModal()`. Add `closedby="any"` for light-dismiss.
+ *
+ * @example
+ * <button commandfor="d" command="show-modal">Open</button>
+ * <Dialog id="d" closedby="any">
+ *   <DialogHeader><DialogTitle>Confirm</DialogTitle></DialogHeader>
+ *   <DialogFooter><DialogClose command="close" commandfor="d">Cancel</DialogClose></DialogFooter>
+ * </Dialog>
  */
 export function Dialog({ className, ...props }: DialogHTMLAttributes<HTMLDialogElement>) {
   return <dialog className={cn('sheerly-dialog', className)} {...props} />
 }
 
-export function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('sheerly-dialog-header', className)} {...props} />
-}
+export type DialogHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<T>
 
-export function DialogTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
-  return <h3 className={cn('sheerly-dialog-title', className)} {...props} />
+export function DialogHeader<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: DialogHeaderProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-dialog-header', className)} {...props} />
 }
 
-export function DialogDescription({
+export type DialogTitleProps<T extends ElementType = 'h3'> = PolymorphicProps<T>
+
+export function DialogTitle<T extends ElementType = 'h3'>({
+  as,
   className,
   ...props
-}: HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cn('sheerly-dialog-description', className)} {...props} />
+}: DialogTitleProps<T>) {
+  const Tag = as ?? 'h3'
+  return <Tag className={cn('sheerly-dialog-title', className)} {...props} />
 }
 
-export function DialogBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('sheerly-dialog-body', className)} {...props} />
+export type DialogDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<T>
+
+export function DialogDescription<T extends ElementType = 'p'>({
+  as,
+  className,
+  ...props
+}: DialogDescriptionProps<T>) {
+  const Tag = as ?? 'p'
+  return <Tag className={cn('sheerly-dialog-description', className)} {...props} />
 }
 
-export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
-  'data-direction'?: 'column'
+export type DialogBodyProps<T extends ElementType = 'div'> = PolymorphicProps<T>
+
+export function DialogBody<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: DialogBodyProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-dialog-body', className)} {...props} />
 }
 
-export function DialogFooter({ className, ...props }: DialogFooterProps) {
-  return <div className={cn('sheerly-dialog-footer', className)} {...props} />
+export type DialogFooterProps<T extends ElementType = 'div'> = PolymorphicProps<
+  T,
+  { 'data-direction'?: 'column' }
+>
+
+export function DialogFooter<T extends ElementType = 'div'>({
+  as,
+  className,
+  ...props
+}: DialogFooterProps<T>) {
+  const Tag = as ?? 'div'
+  return <Tag className={cn('sheerly-dialog-footer', className)} {...props} />
 }
 
 export function DialogClose({

package/src/dropdown-menu.tsx

@@ -1,9 +1,28 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react'
-import { cn } from './cn'
+import type { 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. */
@@ -41,29 +78,69 @@ export function DropdownMenuItem({ className, type = 'button', ...props }: Dropd
   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} />
+/**
+ * An interactive menu row rendered as a link.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
+ * `as={Link}` for a router link).
+ */
+export type DropdownMenuLinkItemProps<T extends ElementType = 'a'> = PolymorphicProps<
+  T,
+  {
+    'data-variant'?: 'destructive'
+    'data-inset'?: boolean
+  }
+>
+
+export function DropdownMenuLinkItem<T extends ElementType = 'a'>({
+  as,
+  className,
+  ...props
+}: DropdownMenuLinkItemProps<T>) {
+  const Tag = as ?? 'a'
+  return <Tag 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} />
+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 +160,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} />
 }