sheerly 0.0.1

package/src/switch.css

@@ -0,0 +1,79 @@
+/* Switch — <input type="checkbox" role="switch"> */
+.sheerly-switch {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: var(--sheerly-radius-full);
+  border: none;
+  transition: background-color 0.15s ease;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  position: relative;
+
+  /* Default size */
+  width: 32px;
+  height: 18px;
+  background-color: var(--sheerly-input);
+
+  &::before {
+    content: "";
+    display: block;
+    border-radius: var(--sheerly-radius-full);
+    background-color: var(--sheerly-background);
+    transition: transform 0.15s ease;
+    pointer-events: none;
+    position: absolute;
+    left: 2px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    /* Default size thumb */
+    width: 14px;
+    height: 14px;
+  }
+
+  &:hover {
+    background-color: var(--sheerly-ring);
+  }
+
+  &:checked,
+  &[data-state="checked"] {
+    background-color: var(--sheerly-foreground);
+
+    &::before {
+      transform: translateX(14px) translateY(-50%);
+      background-color: var(--sheerly-background);
+    }
+  }
+
+  &:focus-visible {
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  &:disabled {
+    background-color: var(--sheerly-muted);
+    cursor: not-allowed;
+
+    &::before {
+      background-color: var(--sheerly-input);
+    }
+  }
+
+  &[data-size="sm"] {
+    width: 24px;
+    height: 14px;
+
+    &::before {
+      width: 10px;
+      height: 10px;
+    }
+
+    &:checked,
+    &[data-state="checked"] {
+      &::before {
+        transform: translateX(10px) translateY(-50%);
+      }
+    }
+  }
+}

package/src/switch.tsx

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface SwitchProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> {
+  'data-size'?: 'default' | 'sm'
+}
+
+export function Switch({ className, ...props }: SwitchProps) {
+  return (
+    <input
+      type="checkbox"
+      role="switch"
+      className={cn('sheerly-switch', className)}
+      {...props}
+    />
+  )
+}

package/src/table.css

@@ -0,0 +1,77 @@
+/* Wrapper enabling horizontal scroll on overflow */
+.sheerly-table-container {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* Table — semantic <table>, styled via element selectors */
+.sheerly-table {
+  width: 100%;
+  caption-side: bottom;
+  border-collapse: collapse;
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--sheerly-foreground);
+}
+
+.sheerly-table caption {
+  margin-top: 16px;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--sheerly-muted-foreground);
+}
+
+.sheerly-table thead tr {
+  border-bottom: 1px solid var(--sheerly-border);
+}
+
+.sheerly-table th {
+  height: 40px;
+  padding: 0 8px;
+  text-align: left;
+  vertical-align: middle;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--sheerly-foreground);
+}
+
+.sheerly-table tbody tr {
+  border-bottom: 1px solid var(--sheerly-border);
+  transition: background-color 0.1s ease;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: var(--sheerly-accent);
+  }
+
+  &[data-state="selected"] {
+    background-color: var(--sheerly-muted);
+  }
+}
+
+.sheerly-table td {
+  padding: 8px;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.sheerly-table tfoot {
+  border-top: 1px solid var(--sheerly-border);
+  background-color: var(--sheerly-accent);
+  font-weight: 500;
+
+  & tr:last-child {
+    border-bottom: none;
+  }
+}
+
+.sheerly-table tfoot td,
+.sheerly-table tfoot th {
+  padding: 8px;
+  vertical-align: middle;
+}

package/src/table.tsx

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, TableHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export type TableContainerProps = HTMLAttributes<HTMLDivElement>
+
+export function TableContainer({ className, ...props }: TableContainerProps) {
+  return <div className={cn('sheerly-table-container', className)} {...props} />
+}
+
+export type TableProps = TableHTMLAttributes<HTMLTableElement>
+
+export function Table({ className, ...props }: TableProps) {
+  return <table className={cn('sheerly-table', className)} {...props} />
+}

package/src/tabs.css

@@ -0,0 +1,110 @@
+/* Tabs — <div> container; list + triggers + content panels */
+.sheerly-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* The trigger bar */
+.sheerly-tabs-list {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  padding: 3px;
+  background-color: var(--sheerly-muted);
+  height: 36px;
+
+  &[data-variant="line"] {
+    background-color: transparent;
+    border-radius: 0;
+    gap: 4px;
+    padding: 0;
+    border-bottom: 1px solid var(--sheerly-border);
+    height: auto;
+    padding-bottom: 0;
+  }
+}
+
+.sheerly-tabs-trigger {
+  position: relative;
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  padding: 4px 8px;
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  white-space: nowrap;
+  color: var(--sheerly-muted-foreground);
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+  transition: color 0.15s ease, background-color 0.15s ease;
+
+  &:hover {
+    color: var(--sheerly-foreground);
+  }
+
+  &:focus-visible {
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  /* Active state */
+  &[aria-selected="true"],
+  &[data-state="active"] {
+    background-color: var(--sheerly-background);
+    color: var(--sheerly-foreground);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+
+  /* Line variant trigger */
+  .sheerly-tabs-list[data-variant="line"] & {
+    border-radius: 0;
+    padding: 8px 12px;
+    box-shadow: none;
+
+    &[aria-selected="true"],
+    &[data-state="active"] {
+      background-color: transparent;
+      box-shadow: none;
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: var(--sheerly-foreground);
+      }
+    }
+  }
+
+  & svg {
+    pointer-events: none;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.sheerly-tabs-content {
+  flex: 1;
+  outline: none;
+
+  &[hidden] {
+    display: none;
+  }
+}

package/src/tabs.tsx

@@ -0,0 +1,38 @@
+import type { ButtonHTMLAttributes, HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export type TabsProps = HTMLAttributes<HTMLDivElement>
+
+export function Tabs({ className, ...props }: TabsProps) {
+  return <div className={cn('sheerly-tabs', className)} {...props} />
+}
+
+export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+  'data-variant'?: 'line'
+}
+
+export function TabsList({ className, role = 'tablist', ...props }: TabsListProps) {
+  return <div role={role} className={cn('sheerly-tabs-list', className)} {...props} />
+}
+
+export interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'data-state'?: 'active'
+}
+
+export function TabsTrigger({ className, role = 'tab', ...props }: TabsTriggerProps) {
+  return (
+    <button role={role} className={cn('sheerly-tabs-trigger', className)} {...props} />
+  )
+}
+
+export type TabsContentProps = HTMLAttributes<HTMLDivElement>
+
+export function TabsContent({
+  className,
+  role = 'tabpanel',
+  ...props
+}: TabsContentProps) {
+  return (
+    <div role={role} className={cn('sheerly-tabs-content', className)} {...props} />
+  )
+}

package/src/textarea.css

@@ -0,0 +1,38 @@
+/* Textarea — <textarea> that auto-grows via field-sizing: content */
+.sheerly-textarea {
+  display: block;
+  width: 100%;
+  min-height: 64px;
+  border-radius: var(--sheerly-radius-lg);
+  border: 1px solid var(--sheerly-input);
+  background-color: transparent;
+  padding: 6px 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;
+  resize: vertical;
+  field-sizing: content;
+
+  &::placeholder {
+    color: var(--sheerly-muted-foreground);
+  }
+
+  &:focus-visible {
+    border-color: var(--sheerly-ring);
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[aria-invalid="true"] {
+    border-color: var(--sheerly-destructive);
+    box-shadow: 0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%);
+  }
+}

package/src/textarea.tsx

@@ -0,0 +1,8 @@
+import type { TextareaHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export function Textarea({ className, ...props }: TextareaProps) {
+  return <textarea className={cn('sheerly-textarea', className)} {...props} />
+}

package/src/toggle.css

@@ -0,0 +1,148 @@
+/*
+ * Toggle — a two-state (on / off) button. Mirrors shadcn base-nova.
+ *
+ * State is driven by a nested checkbox, so no JS is needed:
+ *   <label class="sheerly-toggle">
+ *     <input type="checkbox" />
+ *     <svg data-icon="inline-start">…</svg>
+ *     Italic
+ *   </label>
+ *
+ * The checkbox is visually hidden; the label reflects `:checked` via
+ * `:has(:checked)`. A plain <button> with aria-pressed="true" /
+ * data-state="on" is still supported for command-driven / controlled use.
+ */
+.sheerly-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border-radius: var(--sheerly-radius-lg);
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  white-space: nowrap;
+  background-color: transparent;
+  color: var(--sheerly-foreground);
+  border: 1px solid transparent;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.15s ease;
+  user-select: none;
+
+  /* Default size (32px) */
+  height: 32px;
+  min-width: 32px;
+  padding: 0 10px;
+
+  /* Visually hide the state-bearing checkbox; keep it focusable/accessible. */
+  & > input[type="checkbox"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  &:hover {
+    background-color: var(--sheerly-muted);
+    color: var(--sheerly-foreground);
+  }
+
+  /* Keyboard focus — on the label (via the nested input) or a plain button. */
+  &:has(> input:focus-visible),
+  &:focus-visible {
+    border-color: var(--sheerly-ring);
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  /* Disabled — either a disabled checkbox inside or a disabled button. */
+  &:has(> input:disabled),
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[aria-invalid="true"] {
+    border-color: var(--sheerly-destructive);
+    box-shadow: 0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%);
+  }
+
+  /* Active / pressed state */
+  &:has(> input:checked),
+  &[aria-pressed="true"],
+  &[data-state="on"] {
+    background-color: var(--sheerly-muted);
+  }
+
+  /* ========== Variants ========== */
+
+  &[data-variant="default"] {
+    background-color: transparent;
+  }
+
+  &[data-variant="outline"] {
+    border-color: var(--sheerly-input);
+    background-color: transparent;
+
+    &:hover {
+      background-color: var(--sheerly-muted);
+    }
+  }
+
+  /* ========== Sizes ========== */
+
+  &[data-size="default"] {
+    height: 32px;
+    min-width: 32px;
+    padding: 0 10px;
+  }
+
+  &[data-size="sm"] {
+    height: 28px;
+    min-width: 28px;
+    padding: 0 10px;
+    font-size: 12.8px;
+    border-radius: min(var(--sheerly-radius-md), 12px);
+
+    & svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &[data-size="lg"] {
+    height: 36px;
+    min-width: 36px;
+    padding: 0 10px;
+  }
+
+  /* Icon spacing (matches shadcn has-data-[icon=…] paddings) */
+  &:has([data-icon="inline-start"]) {
+    padding-inline-start: 8px;
+  }
+
+  &:has([data-icon="inline-end"]) {
+    padding-inline-end: 8px;
+  }
+
+  &[data-size="sm"]:has([data-icon="inline-start"]) {
+    padding-inline-start: 6px;
+  }
+
+  &[data-size="sm"]:has([data-icon="inline-end"]) {
+    padding-inline-end: 6px;
+  }
+
+  & svg {
+    pointer-events: none;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+}

package/src/toggle.tsx

@@ -0,0 +1,47 @@
+import type { ChangeEventHandler, LabelHTMLAttributes, ReactNode } from 'react'
+import { cn } from './cn'
+
+export interface ToggleProps
+  extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'onChange'> {
+  'data-variant'?: 'default' | 'outline'
+  'data-size'?: 'sm' | 'default' | 'lg'
+  /** Controlled pressed state (drives the nested checkbox). */
+  pressed?: boolean
+  /** Uncontrolled initial pressed state. */
+  defaultPressed?: boolean
+  /** Fires with the next pressed state when toggled. */
+  onPressedChange?: (pressed: boolean) => void
+  disabled?: boolean
+  name?: string
+  value?: string
+  children?: ReactNode
+}
+
+export function Toggle({
+  className,
+  pressed,
+  defaultPressed,
+  onPressedChange,
+  disabled,
+  name,
+  value,
+  children,
+  ...props
+}: ToggleProps) {
+  const onChange: ChangeEventHandler<HTMLInputElement> = (e) =>
+    onPressedChange?.(e.target.checked)
+  return (
+    <label className={cn('sheerly-toggle', className)} {...props}>
+      <input
+        type="checkbox"
+        checked={pressed}
+        defaultChecked={defaultPressed}
+        onChange={onChange}
+        disabled={disabled}
+        name={name}
+        value={value}
+      />
+      {children}
+    </label>
+  )
+}

package/src/tooltip.css

@@ -0,0 +1,60 @@
+/*
+ * Tooltip — uses popover="hint" + anchor positioning + interestfor
+ *
+ * Usage:
+ *   <span class="sheerly-tooltip">
+ *     <button interestfor="my-tip">Hover me</button>
+ *     <span class="sheerly-tooltip-content" id="my-tip" popover="hint">Tooltip text</span>
+ *   </span>
+ *
+ * Position via --sheerly-tooltip-position: block-start | block-end | inline-start | inline-end
+ */
+
+.sheerly-tooltip {
+  anchor-name: --sheerly-tip;
+  anchor-scope: --sheerly-tip;
+  display: inline-block;
+  width: fit-content;
+}
+
+.sheerly-tooltip-content {
+  position: fixed;
+  position-anchor: --sheerly-tip;
+  position-area: var(--sheerly-tooltip-position, block-start);
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  position-visibility: anchors-visible;
+  inset: unset;
+  margin: 6px;
+
+  /* Visual style */
+  background-color: var(--sheerly-foreground);
+  color: var(--sheerly-background);
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  text-align: center;
+  white-space: normal;
+  text-wrap: pretty;
+  max-width: 200px;
+  padding: 4px 8px;
+  border-radius: var(--sheerly-radius-sm);
+  border: none;
+  overflow: visible;
+  pointer-events: none;
+
+  /* Popover animation */
+  opacity: 0;
+  transition:
+    opacity 0.15s ease,
+    display 0.15s allow-discrete,
+    overlay 0.15s allow-discrete;
+
+  &:popover-open {
+    opacity: 1;
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+}

package/src/tooltip.tsx

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

package/src/types.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="vite/client" />
+
+import 'react'
+
+// Sheerly leans on cutting-edge HTML that React's types don't cover yet:
+//   - <selectedcontent> (customizable <select> API)
+//   - interestfor (invoker for tooltips/popovers)
+//   - popover="hint" (React types allow the popover attr but not "hint")
+//   - command/commandfor (Invoker Commands API) on buttons
+//   - <dialog closedby> (light-dismiss)
+//   - focusgroup (arrow-key roving focus)
+// This single declaration file is shared by both the library wrappers (src/)
+// and the docs explorer (docs/) — both are compiled by tsconfig.app.json.
+declare module 'react' {
+  interface HTMLAttributes<T> {
+    interestfor?: string
+    popover?: '' | 'auto' | 'manual' | 'hint'
+    // Focusgroup API (arrow-key roving focus) — not yet in React's types.
+    focusgroup?: string
+  }
+  // Invoker Commands API (command/commandfor) used by dialog, sheet, popover.
+  interface ButtonHTMLAttributes<T> {
+    command?: string
+    commandfor?: string
+  }
+  // <dialog closedby> (light-dismiss) — not yet in React's types.
+  interface DialogHTMLAttributes<T> {
+    closedby?: 'any' | 'closerequest' | 'none'
+  }
+}
+
+declare module 'react/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      // <selectedcontent> from the customizable <select> API.
+      selectedcontent: React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
+    }
+  }
+}