sheerly 0.0.1

package/src/avatar.css

@@ -0,0 +1,75 @@
+/* Avatar — circular image with initials fallback */
+.sheerly-avatar {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--sheerly-radius-full);
+  user-select: none;
+
+  /* Default size (32px) */
+  width: 32px;
+  height: 32px;
+
+  &[data-size="sm"] {
+    width: 24px;
+    height: 24px;
+  }
+
+  &[data-size="lg"] {
+    width: 40px;
+    height: 40px;
+  }
+
+  &[data-size="xl"] {
+    width: 56px;
+    height: 56px;
+  }
+}
+
+.sheerly-avatar img {
+  aspect-ratio: 1;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Shown when there's no image; typically holds initials */
+.sheerly-avatar-fallback {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--sheerly-radius-full);
+  background-color: var(--sheerly-muted);
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--sheerly-muted-foreground);
+}
+
+.sheerly-avatar[data-size="sm"] .sheerly-avatar-fallback {
+  font-size: 11px;
+}
+
+.sheerly-avatar[data-size="lg"] .sheerly-avatar-fallback {
+  font-size: 16px;
+}
+
+.sheerly-avatar[data-size="xl"] .sheerly-avatar-fallback {
+  font-size: 20px;
+}
+
+/* Overlapping stack of avatars */
+.sheerly-avatar-group {
+  display: flex;
+
+  & .sheerly-avatar {
+    box-shadow: 0 0 0 2px var(--sheerly-background);
+  }
+
+  & .sheerly-avatar + .sheerly-avatar {
+    margin-left: -8px;
+  }
+}

package/src/avatar.tsx

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ImgHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  'data-size'?: 'sm' | 'default' | 'lg' | 'xl'
+}
+
+export function Avatar({ className, ...props }: AvatarProps) {
+  return <div className={cn('sheerly-avatar', className)} {...props} />
+}
+
+export interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  alt: string
+}
+
+export function AvatarImage(props: AvatarImageProps) {
+  return <img {...props} />
+}
+
+export type AvatarFallbackProps = HTMLAttributes<HTMLSpanElement>
+
+export function AvatarFallback({ className, ...props }: AvatarFallbackProps) {
+  return <span className={cn('sheerly-avatar-fallback', className)} {...props} />
+}
+
+export type AvatarGroupProps = HTMLAttributes<HTMLDivElement>
+
+export function AvatarGroup({ className, ...props }: AvatarGroupProps) {
+  return <div className={cn('sheerly-avatar-group', className)} {...props} />
+}

package/src/badge.css

@@ -0,0 +1,71 @@
+/* Badge — pill-shaped <span> label */
+.sheerly-badge {
+  display: inline-flex;
+  width: fit-content;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  overflow: hidden;
+  border-radius: var(--sheerly-radius-full);
+  border: 1px solid transparent;
+  padding: 2px 8px;
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  /* Default variant */
+  background-color: var(--sheerly-foreground);
+  color: var(--sheerly-background);
+
+  & svg {
+    pointer-events: none;
+    flex-shrink: 0;
+    width: 12px;
+    height: 12px;
+  }
+
+  &[data-variant="secondary"] {
+    background-color: var(--sheerly-muted);
+    color: var(--sheerly-muted-foreground);
+  }
+
+  &[data-variant="destructive"] {
+    background-color: var(--sheerly-destructive);
+    color: #ffffff;
+  }
+
+  &[data-variant="outline"] {
+    border-color: var(--sheerly-border);
+    background-color: transparent;
+    color: var(--sheerly-foreground);
+  }
+
+  &[data-variant="ghost"] {
+    background-color: transparent;
+    color: var(--sheerly-foreground);
+  }
+
+  &[data-variant="success"] {
+    background-color: oklch(0.962 0.044 156.64);
+    color: oklch(0.393 0.095 152.53);
+  }
+
+  &[data-variant="warning"] {
+    background-color: oklch(0.962 0.059 95.27);
+    color: oklch(0.553 0.135 66.44);
+  }
+
+  &[data-variant="error"] {
+    background-color: oklch(0.936 0.032 17.72);
+    color: oklch(0.444 0.177 26.9);
+  }
+
+  &[data-variant="blue"] {
+    background-color: oklch(0.932 0.032 255.59);
+    color: oklch(0.488 0.243 264.38);
+  }
+}

package/src/badge.tsx

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  'data-variant'?:
+    | 'default'
+    | 'secondary'
+    | 'destructive'
+    | 'outline'
+    | 'ghost'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'blue'
+}
+
+export function Badge({ className, ...props }: BadgeProps) {
+  return <span className={cn('sheerly-badge', className)} {...props} />
+}

package/src/breadcrumb.css

@@ -0,0 +1,166 @@
+/*
+ * Breadcrumb — the path to the current resource as a hierarchy of links. <nav>
+ *
+ * Structure:
+ *   <nav class="sheerly-breadcrumb" aria-label="breadcrumb">
+ *     <ol class="sheerly-breadcrumb-list">
+ *       <li class="sheerly-breadcrumb-item">
+ *         <a class="sheerly-breadcrumb-link" href="#">Home</a>
+ *       </li>
+ *       <li class="sheerly-breadcrumb-separator" role="presentation" aria-hidden="true"></li>
+ *       <li class="sheerly-breadcrumb-item">
+ *         <a class="sheerly-breadcrumb-link" href="#">Components</a>
+ *       </li>
+ *       <li class="sheerly-breadcrumb-separator" role="presentation" aria-hidden="true"></li>
+ *       <li class="sheerly-breadcrumb-item">
+ *         <span class="sheerly-breadcrumb-page" role="link" aria-disabled="true" aria-current="page">Breadcrumb</span>
+ *       </li>
+ *     </ol>
+ *   </nav>
+ *
+ * The separator chevron is embedded in CSS (masked ::after) when the element is
+ * :empty — pass custom children (e.g. a dot) to override it. The ellipsis glyph
+ * is likewise embedded (masked ::before) when :empty — no <svg> child needed.
+ */
+.sheerly-breadcrumb {
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+}
+
+.sheerly-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--sheerly-muted-foreground);
+  font-size: 14px;
+  line-height: 20px;
+  word-break: break-word;
+}
+
+@media (min-width: 640px) {
+  .sheerly-breadcrumb-list {
+    gap: 10px;
+  }
+}
+
+.sheerly-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Link — muted, hover reveals the foreground color. */
+.sheerly-breadcrumb-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--sheerly-radius-sm);
+  outline: none;
+  transition: color 0.15s ease;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--sheerly-foreground);
+  }
+
+  &:focus-visible {
+    color: var(--sheerly-foreground);
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  & svg {
+    pointer-events: none;
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+  }
+}
+
+/* Current page — non-interactive, foreground color. */
+.sheerly-breadcrumb-page {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--sheerly-foreground);
+  font-weight: 400;
+
+  & svg {
+    pointer-events: none;
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+  }
+}
+
+/* Separator — embedded chevron glyph when :empty; children override it. */
+.sheerly-breadcrumb-separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sheerly-muted-foreground);
+
+  & svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  &:empty::after {
+    content: "";
+    width: 14px;
+    height: 14px;
+    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='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+}
+
+/* Ellipsis — collapsed-items indicator; embedded glyph when :empty. Styled
+ * like a ghost button so an interactive trigger (button / dropdown) reveals a
+ * hover / focus surface, matching shadcn's ghost-button ellipsis. */
+.sheerly-breadcrumb-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sheerly-radius-lg);
+  background-color: transparent;
+  color: var(--sheerly-foreground);
+  outline: none;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  & svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  &: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%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+
+  /* Interactive (a <button> trigger or a dropdown trigger): ghost-button hover. */
+  &:is(button, [role="button"], a) {
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--sheerly-accent);
+      color: var(--sheerly-accent-foreground);
+    }
+
+    &:focus-visible {
+      background-color: var(--sheerly-accent);
+      color: var(--sheerly-accent-foreground);
+      box-shadow: var(--sheerly-focus-ring);
+    }
+  }
+}

package/src/breadcrumb.tsx

@@ -0,0 +1,71 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, OlHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export function Breadcrumb({ className, ...props }: HTMLAttributes<HTMLElement>) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      className={cn('sheerly-breadcrumb', className)}
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbList({ className, ...props }: OlHTMLAttributes<HTMLOListElement>) {
+  return <ol className={cn('sheerly-breadcrumb-list', className)} {...props} />
+}
+
+export function BreadcrumbItem({ className, ...props }: HTMLAttributes<HTMLLIElement>) {
+  return <li className={cn('sheerly-breadcrumb-item', className)} {...props} />
+}
+
+export function BreadcrumbLink({ className, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return <a className={cn('sheerly-breadcrumb-link', className)} {...props} />
+}
+
+export function BreadcrumbPage({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('sheerly-breadcrumb-page', className)}
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbSeparator({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLLIElement>) {
+  return (
+    <li
+      role="presentation"
+      aria-hidden="true"
+      className={cn('sheerly-breadcrumb-separator', className)}
+      {...props}
+    >
+      {children}
+    </li>
+  )
+}
+
+export function BreadcrumbEllipsis({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      aria-label="More"
+      className={cn('sheerly-breadcrumb-ellipsis', className)}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}

package/src/button.css

@@ -0,0 +1,214 @@
+/* Button — <button>; defaults to primary variant, default size (32px) */
+.sheerly-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex-shrink: 0;
+  white-space: nowrap;
+  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;
+  transition: all 0.15s ease;
+  outline: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  text-decoration: none;
+  user-select: none;
+
+  /* Default = primary variant, default size (32px) */
+  background-color: var(--sheerly-primary);
+  color: var(--sheerly-primary-foreground);
+  padding: 0 10px;
+  height: 32px;
+
+  &:hover {
+    background-color: oklch(from var(--sheerly-primary) l c h / 80%);
+  }
+
+  &:active:not([aria-haspopup]) {
+    translate: 0 1px;
+  }
+
+  &:focus-visible {
+    border-color: var(--sheerly-ring);
+    box-shadow: var(--sheerly-focus-ring);
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  & svg {
+    pointer-events: none;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Icon positioning */
+  & [data-icon="inline-start"] {
+    margin-inline-start: -2px;
+  }
+
+  & [data-icon="inline-end"] {
+    margin-inline-end: -2px;
+  }
+
+  /* Rounded (pill shape) */
+  &[data-rounded="full"] {
+    border-radius: var(--sheerly-radius-full);
+  }
+
+  /* ========== Variants ========== */
+
+  &[data-variant="default"],
+  &[data-variant="primary"] {
+    background-color: var(--sheerly-primary);
+    color: var(--sheerly-primary-foreground);
+
+    &:hover {
+      background-color: oklch(from var(--sheerly-primary) l c h / 80%);
+    }
+  }
+
+  &[data-variant="secondary"] {
+    background-color: var(--sheerly-secondary);
+    color: var(--sheerly-secondary-foreground);
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--sheerly-secondary), var(--sheerly-foreground) 5%);
+    }
+  }
+
+  &[data-variant="tertiary"],
+  &[data-variant="ghost"] {
+    background-color: transparent;
+    color: var(--sheerly-foreground);
+
+    &:hover {
+      background-color: var(--sheerly-muted);
+      color: var(--sheerly-foreground);
+    }
+  }
+
+  &[data-variant="muted"] {
+    background-color: var(--sheerly-muted);
+    color: var(--sheerly-muted-foreground);
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--sheerly-muted), var(--sheerly-foreground) 5%);
+    }
+  }
+
+  &[data-variant="destructive"],
+  &[data-variant="error"] {
+    background-color: oklch(from var(--sheerly-destructive) l c h / 10%);
+    color: var(--sheerly-destructive);
+
+    &:hover {
+      background-color: oklch(from var(--sheerly-destructive) l c h / 20%);
+    }
+
+    &:focus-visible {
+      border-color: oklch(from var(--sheerly-destructive) l c h / 40%);
+      box-shadow: 0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%);
+    }
+  }
+
+  &[data-variant="outline"] {
+    background-color: var(--sheerly-background);
+    color: var(--sheerly-foreground);
+    border-color: var(--sheerly-border);
+
+    &:hover {
+      background-color: var(--sheerly-muted);
+      color: var(--sheerly-foreground);
+    }
+  }
+
+  &[data-variant="link"] {
+    background-color: transparent;
+    color: var(--sheerly-primary);
+    padding: 0;
+    height: auto;
+    border: none;
+    text-underline-offset: 4px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  /* ========== Sizes ========== */
+
+  /* XS (24px) */
+  &[data-size="xs"] {
+    height: 24px;
+    padding: 0 8px;
+    gap: 4px;
+    font-size: 12px;
+    border-radius: var(--sheerly-radius-md);
+
+    & svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  /* SM (28px) */
+  &[data-size="sm"] {
+    height: 28px;
+    padding: 0 10px;
+    gap: 4px;
+    font-size: 13px;
+    border-radius: var(--sheerly-radius-md);
+  }
+
+  /* Default (32px) */
+  &[data-size="default"] {
+    height: 32px;
+    padding: 0 10px;
+  }
+
+  /* LG (36px) */
+  &[data-size="lg"] {
+    height: 36px;
+    padding: 0 10px;
+  }
+
+  /* Icon sizes */
+  &[data-size="icon"] {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+  }
+
+  &[data-size="icon-xs"] {
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-radius: var(--sheerly-radius-md);
+
+    & svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &[data-size="icon-sm"] {
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: var(--sheerly-radius-md);
+  }
+
+  &[data-size="icon-lg"] {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+  }
+}

package/src/button.tsx

@@ -0,0 +1,30 @@
+import type { ButtonHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'data-variant'?:
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'ghost'
+    | 'muted'
+    | 'destructive'
+    | 'error'
+    | 'outline'
+    | 'link'
+  'data-size'?:
+    | 'xs'
+    | 'sm'
+    | 'default'
+    | 'lg'
+    | 'icon'
+    | 'icon-xs'
+    | 'icon-sm'
+    | 'icon-lg'
+  'data-rounded'?: 'full'
+}
+
+export function Button({ className, ...props }: ButtonProps) {
+  return <button className={cn('sheerly-button', className)} {...props} />
+}