sheerly 0.0.1

package/src/card.css

@@ -0,0 +1,99 @@
+/* Card — content container */
+.sheerly-card {
+  --sheerly-card-spacing: 16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--sheerly-card-spacing);
+  overflow: hidden;
+  border-radius: var(--sheerly-radius-xl);
+  background-color: var(--sheerly-card);
+  color: var(--sheerly-card-foreground);
+  font-size: 14px;
+  line-height: 20px;
+  box-shadow: inset 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);
+  padding-block: var(--sheerly-card-spacing);
+
+  /* Remove bottom padding when footer is present */
+  &:has(.sheerly-card-footer) {
+    padding-bottom: 0;
+  }
+
+  /* Remove top padding when first child is an image */
+  &:has(> img:first-child) {
+    padding-top: 0;
+  }
+
+  &[data-size="sm"] {
+    --sheerly-card-spacing: 12px;
+  }
+
+  & > img:first-child {
+    border-radius: var(--sheerly-radius-xl) var(--sheerly-radius-xl) 0 0;
+  }
+}
+
+.sheerly-card-header {
+  display: grid;
+  grid-template-rows: auto;
+  auto-rows: min-content;
+  align-items: start;
+  gap: 4px;
+  border-radius: var(--sheerly-radius-xl) var(--sheerly-radius-xl) 0 0;
+  padding-inline: var(--sheerly-card-spacing);
+
+  &:has(.sheerly-card-action) {
+    grid-template-columns: 1fr auto;
+  }
+
+  &:has(.sheerly-card-description) {
+    grid-template-rows: auto auto;
+  }
+}
+
+.sheerly-card-title {
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--sheerly-card-foreground);
+  margin: 0;
+}
+
+.sheerly-card-description {
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--sheerly-muted-foreground);
+  margin: 0;
+}
+
+.sheerly-card-action {
+  grid-column: 2;
+  grid-row: 1 / -1;
+  align-self: start;
+  justify-self: end;
+}
+
+.sheerly-card-content {
+  padding-inline: var(--sheerly-card-spacing);
+}
+
+.sheerly-card-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 0 0 var(--sheerly-radius-xl) var(--sheerly-radius-xl);
+  border-top: 1px solid var(--sheerly-border);
+  background-color: oklch(from var(--sheerly-muted) l c h / 50%);
+  padding: var(--sheerly-card-spacing);
+
+  &[data-direction="column"] {
+    flex-direction: column;
+
+    & > * {
+      width: 100%;
+    }
+  }
+}

package/src/card.tsx

@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  'data-size'?: 'default' | 'sm'
+}
+
+export function Card({ className, ...props }: CardProps) {
+  return <div className={cn('sheerly-card', className)} {...props} />
+}
+
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-card-header', className)} {...props} />
+}
+
+export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn('sheerly-card-title', className)} {...props} />
+}
+
+export function CardDescription({
+  className,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn('sheerly-card-description', className)} {...props} />
+}
+
+export function CardAction({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-card-action', className)} {...props} />
+}
+
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-card-content', className)} {...props} />
+}
+
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+  'data-direction'?: 'column'
+}
+
+export function CardFooter({ className, ...props }: CardFooterProps) {
+  return <div className={cn('sheerly-card-footer', className)} {...props} />
+}

package/src/carousel.css

@@ -0,0 +1,183 @@
+/*
+ * Carousel — pure-CSS, no JS. Built on the CSS Overflow scroll features
+ * (scroll-snap + `::scroll-button()` + `::scroll-marker`/`::scroll-marker-group`)
+ * plus anchor positioning, per the MDN CSS Carousels guide:
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Overflow/Carousels
+ * Latest Chrome only.
+ *
+ * The carousel element IS the scroll container; its direct children ARE the
+ * slides — no per-slide class is required (a `<ul>` of `<li>`s or a `<div>` of
+ * `<div>`s both work; `.sheerly-carousel-item` is optional sugar). The browser
+ * generates the prev/next buttons (Radix chevrons, revealed on hover) and the
+ * dot markers (a pill group pinned to the bottom).
+ *
+ *   <ul class="sheerly-carousel">
+ *     <li data-name="Slide 1" style="width: 100%">…</li>
+ *     <li data-name="Slide 2" style="width: 100%">…</li>
+ *   </ul>
+ *
+ * `data-name` on a slide supplies its marker's accessible name (WCAG).
+ * Slide width: `.sheerly-carousel-item` defaults to `width: 100%` (one per
+ * page); override with your own `width` (e.g. 50% for two). Bare children get
+ * no default. The component sets NO gap and no width on `& > *` (a fixed basis
+ * + gap breaks first/last snapping, so buttons wouldn't disable / dots
+ * wouldn't highlight). Set height/aspect-ratio on the items yourself.
+ */
+
+.sheerly-carousel {
+  anchor-name: --sheerly-carousel;
+  anchor-scope: --sheerly-carousel;
+
+  overflow: auto hidden;
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scroll-marker-group: after;
+
+  /* Reset in case of ul/ol. */
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  display: flex;
+
+  &::scroll-button(*),
+  &::scroll-marker-group {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* A scroller's direct children ARE the slides: non-shrinking snap targets.
+   * The AUTHOR sets each slide's width (e.g. `width: 100%` for one-per-page,
+   * `50%` for two). Don't force a flex-basis here or gap — a fixed basis + gap
+   * makes the first/last snap positions unreachable, so the browser can't
+   * disable the prev/next buttons or mark the first/last dot :target-current. */
+  & > * {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    list-style-type: none;
+    scroll-snap-align: center;
+  }
+
+  /* The opt-in item class defaults to one slide per page. Override with your
+   * own `width` (e.g. 50%) — bare children get no default so authors keep
+   * full control. */
+  & > .sheerly-carousel-item {
+    width: 100%;
+  }
+
+  /* ----- Prev / Next scroll buttons ----- */
+  &::scroll-button(*) {
+    all: unset;
+    position: fixed;
+    position-anchor: --sheerly-carousel;
+
+    box-sizing: border-box;
+    width: 2rem;
+    height: 2rem;
+    line-height: 0;
+    text-align: center;
+    cursor: pointer;
+    color: var(--sheerly-foreground);
+    background-color: var(--sheerly-background);
+    border: 1px solid var(--sheerly-border);
+    border-radius: var(--sheerly-radius-full);
+    box-shadow: 0 1px 2px oklch(0 0 0 / 6%);
+    transition:
+      background-color 0.15s ease,
+      opacity 0.15s ease;
+  }
+
+  &::scroll-button(*):not(:disabled):hover {
+    background-color: var(--sheerly-accent);
+  }
+
+  &::scroll-button(*):not(:disabled):focus-visible {
+    border-color: var(--sheerly-ring);
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  &::scroll-button(*):not(:disabled):active {
+    translate: 0 1px;
+  }
+
+  &::scroll-button(*):disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  /* Radix Icons — MIT LICENSE. Recolored via currentColor. */
+  &::scroll-button(left) {
+    content: url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>') / "Previous slide";
+    left: calc(anchor(left) - 2.5rem);
+    top: anchor(center);
+  }
+
+  &::scroll-button(right) {
+    content: url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>') / "Next slide";
+    right: calc(anchor(right) - 2.5rem);
+    top: anchor(center);
+  }
+
+  /* Reveal on hover / keyboard focus only. */
+  &:not(:hover):not(:focus-within)::scroll-button(*) {
+    opacity: 0;
+  }
+
+  /* ----- Dot markers (pill group pinned to the bottom) ----- */
+  &:empty::scroll-marker-group {
+    display: none;
+  }
+
+  &::scroll-marker-group {
+    position: absolute;
+    position-anchor: --sheerly-carousel;
+    position-area: bottom center;
+    transform: translateY(-0.75rem);
+
+    display: grid;
+    grid-auto-flow: column;
+    gap: 0.4rem;
+    max-inline-size: 80%;
+    padding: 0.3rem 0.5rem;
+
+    background-color: oklch(from var(--sheerly-background) l c h / 70%);
+    border: 1px solid var(--sheerly-border);
+    border-radius: var(--sheerly-radius-full);
+    backdrop-filter: blur(0.5rem);
+
+    /* Scrollable if there are more dots than fit. */
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    overscroll-behavior-x: contain;
+    scroll-padding-inline: 50%;
+  }
+
+  & > *::scroll-marker {
+    content: attr(data-name);
+    box-sizing: border-box;
+    width: 0.5rem;
+    height: 0.5rem;
+    overflow: hidden;
+    text-indent: 1rem;
+    white-space: nowrap;
+    background-color: var(--sheerly-border);
+    border-radius: var(--sheerly-radius-full);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  & > *::scroll-marker:not(:target-current):hover {
+    background-color: var(--sheerly-muted-foreground);
+  }
+
+  & > *::scroll-marker:target-current {
+    background-color: var(--sheerly-primary);
+  }
+}

package/src/carousel.tsx

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export type CarouselProps = HTMLAttributes<HTMLDivElement>
+
+/**
+ * Pure-CSS carousel. The element itself is the scroll container — put
+ * `<CarouselItem>`s (or any children) directly inside. The browser generates
+ * the prev/next buttons and the dot markers via `::scroll-button()` /
+ * `::scroll-marker` — no JS.
+ *
+ * `<CarouselItem>` defaults to `width: 100%` (one slide per page); override
+ * with your own `width` (e.g. `50%` for two) plus a height / aspect-ratio. The
+ * 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).
+ */
+export function Carousel({ className, ...props }: CarouselProps) {
+  return <div 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
+}
+
+/** 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} />
+}

package/src/checkbox.css

@@ -0,0 +1,56 @@
+/* Checkbox — <input type="checkbox">; supports :checked and [data-state="checked"] */
+.sheerly-checkbox {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  border: 1px solid var(--sheerly-input);
+  background-color: var(--sheerly-background);
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  display: grid;
+  place-content: center;
+
+  &::before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    transform: scale(0);
+    transition: transform 0.1s ease;
+    background-color: var(--sheerly-background);
+    clip-path: polygon(14% 44%, 0% 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  &:hover {
+    border-color: var(--sheerly-border);
+  }
+
+  &:checked,
+  &[data-state="checked"] {
+    background-color: var(--sheerly-foreground);
+    border-color: var(--sheerly-foreground);
+
+    &::before {
+      transform: scale(1);
+    }
+  }
+
+  &:focus-visible {
+    border-color: var(--sheerly-ring);
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  &:disabled {
+    background-color: var(--sheerly-muted);
+    border-color: var(--sheerly-border);
+    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/checkbox.tsx

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>
+
+export function Checkbox({ className, ...props }: CheckboxProps) {
+  return (
+    <input type="checkbox" className={cn('sheerly-checkbox', className)} {...props} />
+  )
+}

package/src/cn.ts

@@ -0,0 +1,7 @@
+/**
+ * Join class names, skipping falsy values. No dependency, no hooks.
+ * Lets a consumer's `className` extend (not replace) a component's base class.
+ */
+export function cn(...classes: Array<string | false | null | undefined>): string {
+  return classes.filter(Boolean).join(' ')
+}

package/src/dialog.css

@@ -0,0 +1,175 @@
+/*
+ * Dialog — native <dialog> element.
+ * Open via invoker command (command="show-modal") or `.showModal()`.
+ *
+ * Usage:
+ *   <dialog id="d" class="sheerly-dialog" closedby="any">
+ *     <button class="sheerly-dialog-close" commandfor="d" command="close" aria-label="Close"></button>
+ *     <div class="sheerly-dialog-header">
+ *       <h3 class="sheerly-dialog-title">Title</h3>
+ *       <p class="sheerly-dialog-description">Description.</p>
+ *     </div>
+ *     <div class="sheerly-dialog-body">…</div>
+ *     <div class="sheerly-dialog-footer">…</div>
+ *   </dialog>
+ */
+.sheerly-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  z-index: 50;
+  flex-direction: column;
+  width: calc(100% - 32px);
+  max-width: 384px;
+  max-height: calc(100dvh - 64px);
+  border: none;
+  border-radius: var(--sheerly-radius-xl);
+  background-color: var(--sheerly-popover);
+  color: var(--sheerly-popover-foreground);
+  box-shadow: 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);
+  padding: 0;
+  margin: 0;
+  outline: none;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 20px;
+
+  /* Closed state */
+  display: none;
+  opacity: 0;
+  scale: 0.95;
+
+  transition:
+    opacity 0.1s ease,
+    scale 0.1s ease,
+    display 0.1s allow-discrete,
+    overlay 0.1s allow-discrete;
+
+  &[open] {
+    display: flex;
+    opacity: 1;
+    scale: 1;
+  }
+
+  @starting-style {
+    &[open] {
+      opacity: 0;
+      scale: 0.95;
+    }
+  }
+
+  &::backdrop {
+    background-color: oklch(0 0 0 / 10%);
+    backdrop-filter: blur(1px);
+    opacity: 0;
+    transition: opacity 0.1s ease, overlay 0.1s allow-discrete, display 0.1s allow-discrete;
+  }
+
+  &[open]::backdrop {
+    opacity: 1;
+  }
+
+  @starting-style {
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+}
+
+.sheerly-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 16px 16px 0;
+  flex-shrink: 0;
+}
+
+.sheerly-dialog-title {
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--sheerly-popover-foreground);
+  margin: 0;
+  padding-right: 32px;
+}
+
+.sheerly-dialog-description {
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--sheerly-muted-foreground);
+  margin: 0;
+}
+
+/* Scrollable content area */
+.sheerly-dialog-body {
+  padding: 16px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.sheerly-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--sheerly-border);
+  border-radius: 0 0 var(--sheerly-radius-xl) var(--sheerly-radius-xl);
+  background-color: oklch(from var(--sheerly-muted) l c h / 50%);
+
+  &[data-direction="column"] {
+    flex-direction: column;
+
+    & > * {
+      width: 100%;
+    }
+  }
+}
+
+.sheerly-dialog-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sheerly-radius-md);
+  background-color: transparent;
+  color: var(--sheerly-muted-foreground);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  outline: none;
+  z-index: 1;
+
+  &:hover {
+    background-color: var(--sheerly-muted);
+    color: var(--sheerly-foreground);
+  }
+
+  &:focus-visible {
+    border-color: var(--sheerly-ring);
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  & svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Default close (X) icon when no child is provided */
+  &:empty::before {
+    content: "";
+    width: 16px;
+    height: 16px;
+    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='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+}

package/src/dialog.tsx

@@ -0,0 +1,47 @@
+import type { ButtonHTMLAttributes, DialogHTMLAttributes, HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+/**
+ * Native <dialog>. Open via invoker command (`command="show-modal"`) or
+ * `.showModal()`. Add `closedby="any"` for light-dismiss.
+ */
+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 function DialogTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn('sheerly-dialog-title', className)} {...props} />
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn('sheerly-dialog-description', className)} {...props} />
+}
+
+export function DialogBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-dialog-body', className)} {...props} />
+}
+
+export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
+  'data-direction'?: 'column'
+}
+
+export function DialogFooter({ className, ...props }: DialogFooterProps) {
+  return <div className={cn('sheerly-dialog-footer', className)} {...props} />
+}
+
+export function DialogClose({
+  className,
+  type = 'button',
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button type={type} className={cn('sheerly-dialog-close', className)} {...props} />
+  )
+}