@refraction-ui/astro 0.18.1 → 0.20.0

package/dist/sticky-note/sticky-note.styles.ts

@@ -14,6 +14,8 @@ export const stickyNoteVariants = cva({
     'min-w-[160px] min-h-[120px]',
   ].join(' '),
   variants: {
+    // Named paper colors are product semantics (physical sticky notes),
+    // not status tones — deliberately not routed through the theme tokens.
     color: {
       yellow: 'bg-yellow-100 text-yellow-900',
       pink: 'bg-pink-100 text-pink-900',

package/dist/table/index.ts

@@ -0,0 +1,16 @@
+export {
+  createTable,
+  type TableDensity,
+  type TableAlign,
+  type TableHeadTone,
+  type TableAPI,
+} from './table.js'
+
+export {
+  tableContainerClass,
+  tableRootVariants,
+  tableCaptionClass,
+  tableRowClass,
+  tableHeadVariants,
+  tableCellVariants,
+} from './table.styles.js'

package/dist/table/table.styles.ts

@@ -0,0 +1,72 @@
+import { cva } from '../shared/index.ts'
+
+/** Scroll container: a wide table scrolls inside it instead of the page. */
+export const tableContainerClass = 'relative w-full overflow-x-auto'
+
+/** The `<table>`. `fixed` pins column widths to the header row. */
+export const tableRootVariants = cva({
+  base: 'w-full caption-bottom border-collapse text-sm',
+  variants: {
+    fixed: {
+      true: 'table-fixed',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    fixed: 'false',
+  },
+})
+
+/** Caption under the table. */
+export const tableCaptionClass = 'mt-2 text-xs text-muted-foreground'
+
+/** Body rows: a hairline between rows, none after the last. */
+export const tableRowClass = 'border-b border-border-subtle last:border-b-0'
+
+const align = {
+  start: 'text-start',
+  center: 'text-center',
+  end: 'text-end',
+}
+
+/** Header cell: subtle surface, rule under it. */
+export const tableHeadVariants = cva({
+  base: 'border-b border-border-subtle bg-surface-subtle align-middle',
+  variants: {
+    align,
+    tone: {
+      default: 'text-xs font-medium text-muted-foreground',
+      eyebrow: 'text-[11px] font-semibold uppercase tracking-wider text-muted-foreground',
+    },
+    density: {
+      compact: 'h-8 px-2',
+      default: 'h-9 px-3',
+    },
+  },
+  defaultVariants: {
+    align: 'start',
+    tone: 'default',
+    density: 'default',
+  },
+})
+
+/** Data cell. */
+export const tableCellVariants = cva({
+  base: 'align-middle',
+  variants: {
+    align,
+    density: {
+      compact: 'px-2 py-1.5',
+      default: 'px-3 py-2.5',
+    },
+    numeric: {
+      true: 'tabular-nums whitespace-nowrap',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    align: 'start',
+    density: 'default',
+    numeric: 'false',
+  },
+})

package/dist/table/table.ts

@@ -0,0 +1,24 @@
+/** Cell padding for every cell of a table. */
+export type TableDensity = 'compact' | 'default'
+/** Horizontal alignment of a header or data cell (logical, RTL-safe). */
+export type TableAlign = 'start' | 'center' | 'end'
+/** Look of header cells: `eyebrow` is small uppercase tracked text. */
+export type TableHeadTone = 'default' | 'eyebrow'
+
+export interface TableAPI {
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/** Framework-agnostic data attributes for the table root. */
+export function createTable(
+  props: { density?: TableDensity; headTone?: TableHeadTone } = {},
+): TableAPI {
+  return {
+    dataAttributes: {
+      'data-slot': 'table',
+      'data-density': props.density ?? 'default',
+      'data-head-tone': props.headTone ?? 'default',
+    },
+  }
+}

package/dist/tabs/index.ts

@@ -1,5 +1,6 @@
 export {
   createTabs,
+  getNextTabIndex,
   type TabsProps,
   type TabsAPI,
   type TabsState,

package/dist/tabs/tabs.ts

@@ -131,3 +131,32 @@ export function createTabs(props: TabsProps = {}): TabsAPI {
     idPrefix,
   }
 }
+
+/**
+ * Roving-focus target for a key press inside a tab list (WAI-ARIA Tabs
+ * pattern). Given the index of the focused tab among the ENABLED tabs, returns
+ * the index to move to, or `null` when the key is not a navigation key for this
+ * orientation. Arrow keys wrap; Home/End jump to the ends.
+ */
+export function getNextTabIndex(
+  current: number,
+  key: string,
+  count: number,
+  orientation: 'horizontal' | 'vertical' = 'horizontal',
+): number | null {
+  if (count === 0) return null
+  const prev = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+  const next = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+  switch (key) {
+    case next:
+      return current < 0 ? 0 : (current + 1) % count
+    case prev:
+      return current < 0 ? count - 1 : (current - 1 + count) % count
+    case 'Home':
+      return 0
+    case 'End':
+      return count - 1
+    default:
+      return null
+  }
+}

package/dist/textarea/textarea.styles.ts

@@ -1,11 +1,11 @@
 import { cva } from '../shared/index.ts'
 
 export const textareaVariants = cva({
-  base: 'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+  base: 'flex w-full rounded-md border border-input bg-transparent px-3 py-2 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
   variants: {
     size: {
       sm: 'min-h-[40px] text-xs',
-      default: 'min-h-[60px]',
+      default: 'min-h-[60px] text-sm',
       lg: 'min-h-[80px] text-base',
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.18.1",
+  "version": "0.20.0",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@refraction-ui/astro-accordion": "workspace:*",
+    "@refraction-ui/astro-action-list": "workspace:*",
     "@refraction-ui/astro-ai": "workspace:*",
     "@refraction-ui/astro-analytics": "workspace:*",
     "@refraction-ui/astro-animated-text": "workspace:*",
@@ -71,6 +72,7 @@
     "@refraction-ui/astro-floating-reactions": "workspace:*",
     "@refraction-ui/astro-flow-editor": "workspace:*",
     "@refraction-ui/astro-footer": "workspace:*",
+    "@refraction-ui/astro-funnel-chart": "workspace:*",
     "@refraction-ui/astro-graph-view": "workspace:*",
     "@refraction-ui/astro-icon-system": "workspace:*",
     "@refraction-ui/astro-infinite-canvas": "workspace:*",
@@ -81,6 +83,7 @@
     "@refraction-ui/astro-kanban-board": "workspace:*",
     "@refraction-ui/astro-keyboard-shortcut": "workspace:*",
     "@refraction-ui/astro-language-selector": "workspace:*",
+    "@refraction-ui/astro-line-chart": "workspace:*",
     "@refraction-ui/astro-link-card": "workspace:*",
     "@refraction-ui/astro-live-captions": "workspace:*",
     "@refraction-ui/astro-live-cursors": "workspace:*",
@@ -93,9 +96,11 @@
     "@refraction-ui/astro-mastery-bar": "workspace:*",
     "@refraction-ui/astro-mini-map": "workspace:*",
     "@refraction-ui/astro-mobile-nav": "workspace:*",
+    "@refraction-ui/astro-native-select": "workspace:*",
     "@refraction-ui/astro-navbar": "workspace:*",
     "@refraction-ui/astro-numbered-steps": "workspace:*",
     "@refraction-ui/astro-otp-input": "workspace:*",
+    "@refraction-ui/astro-page-header": "workspace:*",
     "@refraction-ui/astro-pagination": "workspace:*",
     "@refraction-ui/astro-password-input": "workspace:*",
     "@refraction-ui/astro-payment": "workspace:*",
@@ -128,6 +133,7 @@
     "@refraction-ui/astro-steps": "workspace:*",
     "@refraction-ui/astro-sticky-note": "workspace:*",
     "@refraction-ui/astro-switch": "workspace:*",
+    "@refraction-ui/astro-table": "workspace:*",
     "@refraction-ui/astro-table-of-contents": "workspace:*",
     "@refraction-ui/astro-tabs": "workspace:*",
     "@refraction-ui/astro-terminal": "workspace:*",