sheerly 0.0.1

package/src/select.css

@@ -0,0 +1,164 @@
+/* Select — native <select> with the customizable-select API (appearance: base-select) */
+.sheerly-select,
+.sheerly-select::picker(select) {
+  appearance: base-select;
+}
+
+/* .sheerly-select is the trigger button */
+.sheerly-select {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--sheerly-radius-lg);
+  border: 1px solid var(--sheerly-input);
+  background-color: transparent;
+  padding: 0 12px;
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  white-space: nowrap;
+  color: var(--sheerly-foreground);
+  
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  outline: none;
+  cursor: pointer;
+
+  /* Default size (32px) */
+  height: 32px;
+
+  &:focus-visible {
+    border-color: var(--sheerly-ring);
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  &: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%);
+  }
+
+  &:invalid,
+  &[data-placeholder] {
+    color: var(--sheerly-muted-foreground);
+  }
+
+  &[data-size="sm"] {
+    height: 32px;
+  }
+
+  &[data-size="lg"] {
+    height: 40px;
+    font-size: 16px;
+  }
+}
+
+/* Picker icon (thin chevron, replacing the default triangle glyph) */
+.sheerly-select::picker-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--sheerly-muted-foreground);
+  content: "";
+  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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+  transition: rotate 0.2s ease;
+}
+
+.sheerly-select:open::picker-icon {
+  rotate: 180deg;
+}
+
+/* Displays the current value in the trigger */
+.sheerly-select selectedcontent {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* An empty-value option acts as the placeholder */
+.sheerly-select option[value=""] {
+  color: var(--sheerly-muted-foreground);
+}
+
+/* The drop-down panel (::picker) */
+.sheerly-select::picker(select) {
+  border: 1px solid var(--sheerly-border);
+  border-radius: var(--sheerly-radius-xl);
+  background-color: var(--sheerly-popover);
+  color: var(--sheerly-popover-foreground);
+  box-shadow: 0 4px 16px -4px oklch(0 0 0 / 8%), 0 1px 2px oklch(0 0 0 / 4%);
+  padding: 4px;
+  max-height: 256px;
+  overflow-y: auto;
+  opacity: 0;
+  transition: all 0.2s allow-discrete;
+}
+
+.sheerly-select:open::picker(select) {
+  opacity: 1;
+}
+
+@starting-style {
+  .sheerly-select:open::picker(select) {
+    opacity: 0;
+  }
+}
+
+/* Rows inside the drop-down picker */
+.sheerly-select option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--sheerly-radius-md);
+  padding: 6px 8px;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: default;
+  user-select: none;
+  transition: background-color 0.1s ease;
+
+  &:hover,
+  &:focus {
+    background-color: var(--sheerly-accent);
+  }
+
+  &:checked {
+    font-weight: 500;
+  }
+
+  &:disabled {
+    color: var(--sheerly-muted-foreground);
+    pointer-events: none;
+  }
+}
+
+/* Checkmark on selected option */
+.sheerly-select option::checkmark {
+  color: var(--sheerly-foreground);
+  order: 1;
+  margin-left: auto;
+}
+
+.sheerly-select optgroup {
+  padding: 4px 0;
+}
+
+.sheerly-select optgroup legend {
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--sheerly-muted-foreground);
+}
+
+/* Separator between groups */
+.sheerly-select optgroup + optgroup {
+  border-top: 1px solid var(--sheerly-border);
+  margin-top: 4px;
+  padding-top: 4px;
+}

package/src/select.tsx

@@ -0,0 +1,22 @@
+import type { SelectHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  'data-size'?: 'sm' | 'default' | 'lg'
+}
+
+/**
+ * Uses the customizable-select API. Requires
+ * `<button><selectedcontent></selectedcontent></button>` as the first child,
+ * which this wrapper injects before the consumer's <option>s.
+ */
+export function Select({ className, children, ...props }: SelectProps) {
+  return (
+    <select className={cn('sheerly-select', className)} {...props}>
+      <button>
+        <selectedcontent />
+      </button>
+      {children}
+    </select>
+  )
+}

package/src/separator.css

@@ -0,0 +1,14 @@
+/* Separator — thin dividing line */
+.sheerly-separator {
+  flex-shrink: 0;
+  background-color: var(--sheerly-border);
+
+  /* Horizontal (default) */
+  height: 1px;
+  width: 100%;
+
+  &[data-orientation="vertical"] {
+    height: 100%;
+    width: 1px;
+  }
+}

package/src/separator.tsx

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  'data-orientation'?: 'horizontal' | 'vertical'
+}
+
+export function Separator({ className, ...props }: SeparatorProps) {
+  return <div className={cn('sheerly-separator', className)} {...props} />
+}

package/src/sheet.css

@@ -0,0 +1,225 @@
+/*
+ * Sheet — a native <dialog> that slides in from an edge of the screen.
+ * Extends the Dialog pattern; open via invoker command (command="show-modal")
+ * or `.showModal()`.
+ *
+ * Side via data-side: right (default) | left | top | bottom.
+ *
+ * Usage:
+ *   <dialog id="s" class="sheerly-sheet" data-side="right" closedby="any">
+ *     <button class="sheerly-sheet-close" commandfor="s" command="close" aria-label="Close"></button>
+ *     <div class="sheerly-sheet-header">
+ *       <h3 class="sheerly-sheet-title">Edit profile</h3>
+ *       <p class="sheerly-sheet-description">Make changes here.</p>
+ *     </div>
+ *     <div class="sheerly-sheet-body">…</div>
+ *     <div class="sheerly-sheet-footer">…</div>
+ *   </dialog>
+ */
+
+.sheerly-sheet {
+  position: fixed;
+  z-index: 50;
+  flex-direction: column;
+  gap: 16px;
+  border: none;
+  background-color: var(--sheerly-background);
+  color: var(--sheerly-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;
+  max-height: 100dvh;
+  max-width: 100vw;
+
+  transition:
+    translate 0.3s cubic-bezier(0.32, 0.72, 0, 1),
+    opacity 0.3s ease,
+    display 0.3s allow-discrete,
+    overlay 0.3s allow-discrete;
+
+  &[open] {
+    display: flex;
+    opacity: 1;
+  }
+
+  &::backdrop {
+    background-color: oklch(0 0 0 / 10%);
+    backdrop-filter: blur(1px);
+    opacity: 0;
+    transition: opacity 0.3s ease, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
+  }
+
+  &[open]::backdrop {
+    opacity: 1;
+  }
+
+  @starting-style {
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  /* --- Sides ------------------------------------------------------------ */
+
+  /* Right (default) */
+  inset: 0 0 0 auto;
+  height: 100dvh;
+  width: 100%;
+  max-width: 384px;
+  translate: 100% 0;
+
+  &[open] {
+    translate: 0 0;
+
+    @starting-style {
+      translate: 100% 0;
+    }
+  }
+
+  &[data-side="left"] {
+    inset: 0 auto 0 0;
+    height: 100dvh;
+    width: 100%;
+    max-width: 384px;
+    translate: -100% 0;
+
+    &[open] {
+      translate: 0 0;
+
+      @starting-style {
+        translate: -100% 0;
+      }
+    }
+  }
+
+  &[data-side="top"] {
+    inset: 0 0 auto 0;
+    width: 100%;
+    max-width: none;
+    height: auto;
+    translate: 0 -100%;
+
+    &[open] {
+      translate: 0 0;
+
+      @starting-style {
+        translate: 0 -100%;
+      }
+    }
+  }
+
+  &[data-side="bottom"] {
+    inset: auto 0 0 0;
+    width: 100%;
+    max-width: none;
+    height: auto;
+    translate: 0 100%;
+
+    &[open] {
+      translate: 0 0;
+
+      @starting-style {
+        translate: 0 100%;
+      }
+    }
+  }
+}
+
+.sheerly-sheet-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 16px;
+  flex-shrink: 0;
+}
+
+.sheerly-sheet-title {
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--sheerly-foreground);
+  margin: 0;
+  padding-right: 32px;
+}
+
+.sheerly-sheet-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-sheet-body {
+  padding: 0 16px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.sheerly-sheet-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  flex-shrink: 0;
+  margin-top: auto;
+
+  & > * {
+    width: 100%;
+  }
+}
+
+.sheerly-sheet-close {
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  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/sheet.tsx

@@ -0,0 +1,48 @@
+import type { ButtonHTMLAttributes, DialogHTMLAttributes, HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface SheetProps extends DialogHTMLAttributes<HTMLDialogElement> {
+  'data-side'?: 'right' | 'left' | 'top' | 'bottom'
+}
+
+/**
+ * Native <dialog> that slides in from an edge. Open via invoker command
+ * (`command="show-modal"`) or `.showModal()`. Add `closedby="any"` for
+ * light-dismiss.
+ */
+export function Sheet({ className, ...props }: SheetProps) {
+  return <dialog className={cn('sheerly-sheet', className)} {...props} />
+}
+
+export function SheetHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-sheet-header', className)} {...props} />
+}
+
+export function SheetTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn('sheerly-sheet-title', className)} {...props} />
+}
+
+export function SheetDescription({
+  className,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn('sheerly-sheet-description', className)} {...props} />
+}
+
+export function SheetBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-sheet-body', className)} {...props} />
+}
+
+export function SheetFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-sheet-footer', className)} {...props} />
+}
+
+export function SheetClose({
+  className,
+  type = 'button',
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button type={type} className={cn('sheerly-sheet-close', className)} {...props} />
+  )
+}

package/src/skeleton.css

@@ -0,0 +1,15 @@
+/* Skeleton — pulsing loading placeholder */
+.sheerly-skeleton {
+  border-radius: var(--sheerly-radius-sm);
+  background-color: var(--sheerly-muted);
+  animation: sheerly-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes sheerly-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

package/src/skeleton.tsx

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export type SkeletonProps = HTMLAttributes<HTMLDivElement>
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return <div className={cn('sheerly-skeleton', className)} {...props} />
+}

package/src/slider.css

@@ -0,0 +1,68 @@
+/* Slider — native <input type="range"> (WebKit pseudo-elements only) */
+.sheerly-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  background-color: var(--sheerly-border);
+  border-radius: var(--sheerly-radius-full);
+  outline: none;
+  cursor: pointer;
+  margin: 8px 0;
+
+  &::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 4px;
+    background-color: var(--sheerly-border);
+    border-radius: var(--sheerly-radius-full);
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background-color: #ffffff;
+    border: 2px solid var(--sheerly-foreground);
+    border-radius: 50%;
+    cursor: grab;
+    margin-top: -6px;
+    transform: scale(0.85);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  &:active::-webkit-slider-thumb {
+    transform: scale(1);
+    cursor: grabbing;
+  }
+
+  &:focus-visible::-webkit-slider-thumb {
+    transform: scale(1);
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:disabled::-webkit-slider-thumb {
+    cursor: not-allowed;
+    border-color: var(--sheerly-input);
+  }
+}
+
+/* Dark mode */
+.dark .sheerly-slider {
+  background-color: var(--sheerly-border);
+
+  &::-webkit-slider-runnable-track {
+    background-color: var(--sheerly-border);
+  }
+
+  &::-webkit-slider-thumb {
+    background-color: var(--sheerly-foreground);
+    border-color: var(--sheerly-foreground);
+  }
+}

package/src/slider.tsx

@@ -0,0 +1,8 @@
+import type { InputHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>
+
+export function Slider({ className, ...props }: SliderProps) {
+  return <input type="range" className={cn('sheerly-slider', className)} {...props} />
+}

package/src/spinner.css

@@ -0,0 +1,43 @@
+/*
+ * Spinner — a spinning loading indicator.
+ *
+ * The spinner glyph is embedded in CSS (a masked ::before), so no <svg> child
+ * is required — a bare element works:
+ *
+ *   <span class="sheerly-spinner" role="status" aria-label="Loading"></span>
+ *
+ * It inherits the current text color.
+ */
+.sheerly-spinner {
+  display: inline-block;
+  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='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E") center / contain no-repeat;
+  animation: sheerly-spin 1s linear infinite;
+
+  &[data-size="sm"] {
+    width: 12px;
+    height: 12px;
+  }
+
+  &[data-size="md"] {
+    width: 20px;
+    height: 20px;
+  }
+
+  &[data-size="lg"] {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+@keyframes sheerly-spin {
+  from {
+    rotate: 0deg;
+  }
+  to {
+    rotate: 360deg;
+  }
+}

package/src/spinner.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+  'data-size'?: 'sm' | 'default' | 'md' | 'lg'
+}
+
+/**
+ * Loading spinner. The glyph is embedded in CSS (masked ::before), so no SVG
+ * child is needed — this renders a bare <span>. It inherits the current text
+ * color. Pass an <svg> child if you prefer to ship your own icon.
+ */
+export function Spinner({ className, children, ...props }: SpinnerProps) {
+  return (
+    <span
+      className={cn('sheerly-spinner', className)}
+      role="status"
+      aria-label="Loading"
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}