sheerly 0.0.2 → 0.0.4

package/src/dropdown-menu.tsx

@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType } from 'react'
+import type { ButtonHTMLAttributes, ElementType } from 'react'
 import { cn } from './utils/cn'
 import type { PolymorphicProps } from './utils/polymorphic'
 
@@ -78,14 +78,27 @@ 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
-}
+/**
+ * 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({ className, ...props }: DropdownMenuLinkItemProps) {
-  return <a className={cn('sheerly-dropdown-menu-item', className)} {...props} />
+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. */

package/src/hover-card.css

@@ -47,7 +47,7 @@
   /* Neutral card-like surface */
   background-color: var(--sheerly-popover);
   color: var(--sheerly-popover-foreground);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   line-height: 20px;
   width: max-content;

package/src/input.css

@@ -7,7 +7,7 @@
   box-sizing: border-box;
   background-color: transparent;
   padding: 0 10px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/kbd.css

@@ -10,7 +10,7 @@
   padding: 0 4px;
   border-radius: 4px;
   background-color: var(--sheerly-muted);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;

package/src/label.css

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/pagination.css

@@ -31,7 +31,7 @@
   justify-content: center;
   width: 100%;
   margin-inline: auto;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
 }
 
 .sheerly-pagination-content {

package/src/pagination.tsx

@@ -1,10 +1,14 @@
-import type { AnchorHTMLAttributes, ElementType, HTMLAttributes } from 'react'
+import type { ElementType } from 'react'
 import { cn } from './utils/cn'
 import type { PolymorphicProps } from './utils/polymorphic'
 
+export type PaginationProps<T extends ElementType = 'nav'> = PolymorphicProps<T>
+
 /**
  * Page navigation. Mark the current page's link with `isActive`.
  *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `nav`).
+ *
  * @example
  * <Pagination>
  *   <PaginationContent>
@@ -14,9 +18,14 @@ import type { PolymorphicProps } from './utils/polymorphic'
  *   </PaginationContent>
  * </Pagination>
  */
-export function Pagination({ className, ...props }: HTMLAttributes<HTMLElement>) {
+export function Pagination<T extends ElementType = 'nav'>({
+  as,
+  className,
+  ...props
+}: PaginationProps<T>) {
+  const Tag = as ?? 'nav'
   return (
-    <nav
+    <Tag
       role="navigation"
       aria-label="pagination"
       className={cn('sheerly-pagination', className)}
@@ -25,30 +34,56 @@ export function Pagination({ className, ...props }: HTMLAttributes<HTMLElement>)
   )
 }
 
-export function PaginationContent({
+export type PaginationContentProps<T extends ElementType = 'ul'> = PolymorphicProps<T>
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `ul`).
+ */
+export function PaginationContent<T extends ElementType = 'ul'>({
+  as,
   className,
   ...props
-}: HTMLAttributes<HTMLUListElement>) {
-  return <ul className={cn('sheerly-pagination-content', className)} {...props} />
+}: PaginationContentProps<T>) {
+  const Tag = as ?? 'ul'
+  return <Tag className={cn('sheerly-pagination-content', className)} {...props} />
 }
 
-export function PaginationItem({ className, ...props }: HTMLAttributes<HTMLLIElement>) {
-  return <li className={cn('sheerly-pagination-item', className)} {...props} />
-}
+export type PaginationItemProps<T extends ElementType = 'li'> = PolymorphicProps<T>
 
-export interface PaginationLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Marks the current page (renders like the outline button). */
-  isActive?: boolean
-  'data-role'?: 'previous' | 'next'
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
+ */
+export function PaginationItem<T extends ElementType = 'li'>({
+  as,
+  className,
+  ...props
+}: PaginationItemProps<T>) {
+  const Tag = as ?? 'li'
+  return <Tag className={cn('sheerly-pagination-item', className)} {...props} />
 }
 
-export function PaginationLink({
+export type PaginationLinkProps<T extends ElementType = 'a'> = PolymorphicProps<
+  T,
+  {
+    /** Marks the current page (renders like the outline button). */
+    isActive?: boolean
+    'data-role'?: 'previous' | 'next'
+  }
+>
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
+ * `as={Link}` for a router link).
+ */
+export function PaginationLink<T extends ElementType = 'a'>({
+  as,
   className,
   isActive,
   ...props
-}: PaginationLinkProps) {
+}: PaginationLinkProps<T>) {
+  const Tag = as ?? 'a'
   return (
-    <a
+    <Tag
       aria-current={isActive ? 'page' : undefined}
       className={cn('sheerly-pagination-link', className)}
       {...props}
@@ -56,44 +91,68 @@ export function PaginationLink({
   )
 }
 
-export function PaginationPrevious({
+export type PaginationPreviousProps<T extends ElementType = 'a'> = PaginationLinkProps<T> & {
+  /** Visible label. Children override it. */
+  text?: string
+}
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`).
+ */
+export function PaginationPrevious<T extends ElementType = 'a'>({
+  as,
   className,
+  isActive,
   text = 'Previous',
   children,
   ...props
-}: PaginationLinkProps & { text?: string }) {
+}: PaginationPreviousProps<T>) {
+  const Tag = as ?? 'a'
   return (
-    <PaginationLink
+    <Tag
       aria-label="Go to previous page"
+      aria-current={isActive ? 'page' : undefined}
       data-role="previous"
-      className={className}
+      className={cn('sheerly-pagination-link', className)}
       {...props}
     >
       {children ?? text}
-    </PaginationLink>
+    </Tag>
   )
 }
 
-export function PaginationNext({
+export type PaginationNextProps<T extends ElementType = 'a'> = PaginationPreviousProps<T>
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`).
+ */
+export function PaginationNext<T extends ElementType = 'a'>({
+  as,
   className,
+  isActive,
   text = 'Next',
   children,
   ...props
-}: PaginationLinkProps & { text?: string }) {
+}: PaginationNextProps<T>) {
+  const Tag = as ?? 'a'
   return (
-    <PaginationLink
+    <Tag
       aria-label="Go to next page"
+      aria-current={isActive ? 'page' : undefined}
       data-role="next"
-      className={className}
+      className={cn('sheerly-pagination-link', className)}
       {...props}
     >
       {children ?? text}
-    </PaginationLink>
+    </Tag>
   )
 }
 
 export type PaginationEllipsisProps<T extends ElementType = 'span'> = PolymorphicProps<T>
 
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
+ */
 export function PaginationEllipsis<T extends ElementType = 'span'>({
   as,
   className,

package/src/popover.css

@@ -37,7 +37,7 @@
   /* Neutral popover surface */
   background-color: var(--sheerly-popover);
   color: var(--sheerly-popover-foreground);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   line-height: 20px;
   width: max-content;

package/src/root.css

@@ -1,4 +1,10 @@
+/* @import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400&display=swap"); */
+
 :root {
+  /* Typography */
+  --sheerly-font-sans: "Geist", "Geist Sans", system-ui, -apple-system, sans-serif;
+  --sheerly-font-mono: "Geist Mono", ui-monospace, monospace;
+
   /* Radius (Nova: 0.625rem base) */
   --sheerly-radius: 0.625rem;
   --sheerly-radius-sm: calc(var(--sheerly-radius) * 0.6);

package/src/root.terminal.css

@@ -0,0 +1,77 @@
+/* Terminal theme — IBM Plex Mono everywhere, square corners, orange accent.
+   Theme override: import AFTER the base library so these tokens win.
+     @import "sheerly/index.css";
+     @import "sheerly/root.terminal.css"; */
+
+/* @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"); */
+
+:root {
+  /* Typography */
+  --sheerly-font-sans: "IBM Plex Mono", ui-monospace, monospace;
+  --sheerly-font-mono: "IBM Plex Mono", ui-monospace, monospace;
+
+  /* Radius (square) — derived radii scale to 0 automatically */
+  --sheerly-radius: 0rem;
+
+  /* Semantic colors (terminal light) */
+  --sheerly-background: oklch(0.9851 0 0);
+  --sheerly-foreground: oklch(0.1448 0 0);
+  --sheerly-card: oklch(0.9702 0 0);
+  --sheerly-card-foreground: oklch(0.1448 0 0);
+  --sheerly-popover: oklch(0.9851 0 0);
+  --sheerly-popover-foreground: oklch(0.1448 0 0);
+  --sheerly-primary: oklch(0.6996 0.202 44.4414);
+  --sheerly-primary-foreground: oklch(0 0 0);
+  --sheerly-secondary: oklch(0.9219 0 0);
+  --sheerly-secondary-foreground: oklch(0.1448 0 0);
+  --sheerly-muted: oklch(0.9401 0 0);
+  --sheerly-muted-foreground: oklch(0.4495 0 0);
+  --sheerly-accent: oklch(0.7512 0.168 52.0772);
+  --sheerly-accent-foreground: oklch(0 0 0);
+  --sheerly-destructive: oklch(0.628 0.2577 29.2339);
+  --sheerly-border: oklch(0.8514 0 0);
+  --sheerly-input: oklch(0.8514 0 0);
+  --sheerly-ring: oklch(0.6996 0.202 44.4414);
+
+  /* Sidebar */
+  --sheerly-sidebar: oklch(0.9851 0 0);
+  --sheerly-sidebar-foreground: oklch(0.1448 0 0);
+  --sheerly-sidebar-primary: oklch(0.2046 0 0);
+  --sheerly-sidebar-primary-foreground: oklch(0.9851 0 0);
+  --sheerly-sidebar-accent: oklch(0.9702 0 0);
+  --sheerly-sidebar-accent-foreground: oklch(0.2046 0 0);
+  --sheerly-sidebar-border: oklch(0.9219 0 0);
+  --sheerly-sidebar-ring: oklch(0.709 0 0);
+}
+
+.dark {
+  /* Semantic colors (terminal dark) */
+  --sheerly-background: oklch(0.1822 0 0);
+  --sheerly-foreground: oklch(0.9612 0 0);
+  --sheerly-card: oklch(0.2178 0 0);
+  --sheerly-card-foreground: oklch(0.9612 0 0);
+  --sheerly-popover: oklch(0.1822 0 0);
+  --sheerly-popover-foreground: oklch(0.9612 0 0);
+  --sheerly-primary: oklch(0.6996 0.202 44.4414);
+  --sheerly-primary-foreground: oklch(0 0 0);
+  --sheerly-secondary: oklch(0.3211 0 0);
+  --sheerly-secondary-foreground: oklch(0.9612 0 0);
+  --sheerly-muted: oklch(0.2686 0 0);
+  --sheerly-muted-foreground: oklch(0.7252 0 0);
+  --sheerly-accent: oklch(0.7512 0.168 52.0772);
+  --sheerly-accent-foreground: oklch(0 0 0);
+  --sheerly-destructive: oklch(0.628 0.2577 29.2339);
+  --sheerly-border: oklch(0.3715 0 0);
+  --sheerly-input: oklch(0.3715 0 0);
+  --sheerly-ring: oklch(0.6996 0.202 44.4414);
+
+  /* Sidebar */
+  --sheerly-sidebar: oklch(0.2046 0 0);
+  --sheerly-sidebar-foreground: oklch(0.9851 0 0);
+  --sheerly-sidebar-primary: oklch(0.4878 0.2432 264.4045);
+  --sheerly-sidebar-primary-foreground: oklch(0.9851 0 0);
+  --sheerly-sidebar-accent: oklch(0.2686 0 0);
+  --sheerly-sidebar-accent-foreground: oklch(0.9851 0 0);
+  --sheerly-sidebar-border: oklch(0.2768 0 0);
+  --sheerly-sidebar-ring: oklch(0.4386 0 0);
+}

package/src/select.css

@@ -15,7 +15,7 @@
   box-sizing: border-box;
   background-color: transparent;
   padding: 0 12px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/sheet.css

@@ -142,7 +142,7 @@
 }
 
 .sheerly-sheet-title {
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 16px;
   font-weight: 500;
   line-height: 1;
@@ -152,7 +152,7 @@
 }
 
 .sheerly-sheet-description {
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/table.css

@@ -9,7 +9,7 @@
   width: 100%;
   caption-side: bottom;
   border-collapse: collapse;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   line-height: 20px;
   color: var(--sheerly-foreground);

package/src/tabs.css

@@ -37,7 +37,7 @@
   border-radius: 6px;
   border: 1px solid transparent;
   padding: 4px 8px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;

package/src/tabs.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ElementType } from 'react'
+import type { ElementType } from 'react'
 import { cn } from './utils/cn'
 import type { PolymorphicProps } from './utils/polymorphic'
 
@@ -46,14 +46,21 @@ export function TabsList<T extends ElementType = 'div'>({
   return <Tag role="tablist" className={cn('sheerly-tabs-list', className)} {...props} />
 }
 
-export interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  'data-state'?: 'active'
-}
+export type TabsTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<
+  T,
+  { 'data-state'?: 'active' }
+>
 
-export function TabsTrigger({ className, role = 'tab', ...props }: TabsTriggerProps) {
-  return (
-    <button role={role} className={cn('sheerly-tabs-trigger', className)} {...props} />
-  )
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `button`).
+ */
+export function TabsTrigger<T extends ElementType = 'button'>({
+  as,
+  className,
+  ...props
+}: TabsTriggerProps<T>) {
+  const Tag = as ?? 'button'
+  return <Tag role="tab" className={cn('sheerly-tabs-trigger', className)} {...props} />
 }
 
 export type TabsContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>
@@ -68,4 +75,4 @@ export function TabsContent<T extends ElementType = 'div'>({
 }: TabsContentProps<T>) {
   const Tag = as ?? 'div'
   return <Tag role="tabpanel" className={cn('sheerly-tabs-content', className)} {...props} />
-}
+}

package/src/textarea.css

@@ -7,7 +7,7 @@
   border: 1px solid var(--sheerly-input);
   background-color: transparent;
   padding: 6px 10px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/toggle.css

@@ -18,7 +18,7 @@
   justify-content: center;
   gap: 4px;
   border-radius: var(--sheerly-radius-lg);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;

package/src/tooltip.css

@@ -29,7 +29,7 @@
   /* Visual style */
   background-color: var(--sheerly-foreground);
   color: var(--sheerly-background);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;

package/src/typography.css

@@ -5,7 +5,7 @@
  * element (h1–h4, p, a, blockquote, ul/ol, li, code, table, small, etc.).
  * Follows the shadcn Nova typography scale. */
 .sheerly-typography {
-  font-family: "Geist Sans", "Geist", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   color: var(--sheerly-foreground);
   font-size: 16px;
   line-height: 1.75;
@@ -110,7 +110,7 @@
   }
 
   & code {
-    font-family: "Geist Mono", ui-monospace, monospace;
+    font-family: var(--sheerly-font-mono);
     font-size: 0.875em;
     font-weight: 600;
     border-radius: var(--sheerly-radius-sm);