@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/command-input/command-input.ts

@@ -0,0 +1,176 @@
+export interface Trigger {
+  char: string;
+  pattern?: RegExp;
+}
+
+export interface CommandNode {
+  type: 'command';
+  trigger: string;
+  text: string;
+}
+
+export interface TextNode {
+  type: 'text';
+  text: string;
+}
+
+export type InputNode = TextNode | CommandNode;
+
+export interface CommandInputState {
+  nodes: InputNode[];
+  rawText: string;
+  cursorPosition: number;
+  activeTrigger: Trigger | null;
+  activeCommandText: string | null;
+}
+
+export interface CommandInputOptions {
+  triggers: Trigger[];
+  onCommandTriggered?: (trigger: Trigger, text: string) => void;
+  onStateChange?: (state: CommandInputState) => void;
+  onCommandCommit?: (trigger: Trigger, text: string) => void;
+  onCommandCancel?: () => void;
+}
+
+export class CommandInput {
+  private state: CommandInputState = {
+    nodes: [],
+    rawText: '',
+    cursorPosition: 0,
+    activeTrigger: null,
+    activeCommandText: null,
+  };
+
+  private options: CommandInputOptions;
+
+  constructor(options: CommandInputOptions) {
+    this.options = { ...options };
+  }
+
+  public handleInput(text: string, cursorPosition: number): void {
+    this.state.rawText = text;
+    this.state.cursorPosition = cursorPosition;
+    this.parseInput();
+    this.notifyStateChange();
+  }
+
+  public handleKeyDown(key: string, event?: Event): void {
+    if (this.state.activeTrigger) {
+      if (key === 'Escape') {
+        if (event) event.preventDefault();
+        this.state.activeTrigger = null;
+        this.state.activeCommandText = null;
+        if (this.options.onCommandCancel) {
+          this.options.onCommandCancel();
+        }
+        this.notifyStateChange();
+      } else if (key === 'Enter') {
+        if (event) event.preventDefault();
+        const trigger = this.state.activeTrigger;
+        const text = this.state.activeCommandText || '';
+        this.state.activeTrigger = null;
+        this.state.activeCommandText = null;
+        if (this.options.onCommandCommit) {
+          this.options.onCommandCommit(trigger, text);
+        }
+        this.notifyStateChange();
+      }
+    }
+  }
+
+  public get value(): InputNode[] {
+    return this.state.nodes;
+  }
+
+  public getState(): CommandInputState {
+    return { ...this.state };
+  }
+
+  private parseInput() {
+    const { rawText, cursorPosition } = this.state;
+
+    this.state.activeTrigger = null;
+    this.state.activeCommandText = null;
+
+    for (let i = cursorPosition - 1; i >= 0; i--) {
+      const char = rawText[i];
+      const matchedTrigger = this.options.triggers.find((t) => t.char === char);
+
+      if (matchedTrigger) {
+        const isStartOfWord = i === 0 || /\\s/.test(rawText[i - 1]);
+        if (isStartOfWord) {
+          const commandText = rawText.slice(i + 1, cursorPosition);
+          if (!/\\s/.test(commandText)) {
+            let isValid = true;
+            if (matchedTrigger.pattern) {
+              isValid = matchedTrigger.pattern.test(commandText);
+            }
+            if (isValid) {
+              this.state.activeTrigger = matchedTrigger;
+              this.state.activeCommandText = commandText;
+              
+              if (this.options.onCommandTriggered) {
+                this.options.onCommandTriggered(matchedTrigger, commandText);
+              }
+            }
+          }
+        }
+        break;
+      }
+      
+      if (/\\s/.test(char)) {
+        break;
+      }
+    }
+
+    const nodes: InputNode[] = [];
+    if (this.options.triggers.length === 0) {
+      nodes.push({ type: 'text', text: rawText });
+      this.state.nodes = nodes;
+      return;
+    }
+
+    const triggerChars = this.options.triggers.map((t) => t.char.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'));
+    const patternStr = `(^|\\\\s)(${triggerChars.join('|')})([^\\\\s]*)`;
+    const regex = new RegExp(patternStr, 'g');
+    
+    let currentIndex = 0;
+    let match;
+
+    while ((match = regex.exec(rawText)) !== null) {
+      const precedingWhitespace = match[1];
+      const triggerChar = match[2];
+      const commandText = match[3];
+
+      const matchStart = match.index;
+      const triggerStart = matchStart + precedingWhitespace.length;
+
+      const triggerConfig = this.options.triggers.find(t => t.char === triggerChar);
+      let isValid = true;
+      if (triggerConfig?.pattern && commandText.length > 0) {
+        isValid = triggerConfig.pattern.test(commandText);
+      }
+
+      if (isValid) {
+        if (triggerStart > currentIndex) {
+          nodes.push({ type: 'text', text: rawText.slice(currentIndex, triggerStart) });
+        }
+
+        nodes.push({ type: 'command', trigger: triggerChar, text: commandText });
+        currentIndex = regex.lastIndex;
+      }
+    }
+
+    if (currentIndex < rawText.length) {
+      nodes.push({ type: 'text', text: rawText.slice(currentIndex) });
+    }
+
+    this.state.nodes = nodes;
+  }
+
+  private notifyStateChange() {
+    if (this.options.onStateChange) {
+      this.options.onStateChange({ ...this.state });
+    }
+  }
+}

package/dist/command-input/index.ts

@@ -0,0 +1 @@
+export * from './command-input'

package/dist/content-protection/content-protection.styles.ts

@@ -0,0 +1,9 @@
+import { cva } from '../shared/index.ts'
+
+export const contentProtectionVariants = cva({
+  base: 'relative select-none',
+})
+
+export const watermarkVariants = cva({
+  base: 'pointer-events-none absolute inset-0 z-50 overflow-hidden',
+})

package/dist/content-protection/content-protection.ts

@@ -0,0 +1,68 @@
+export interface ContentProtectionProps {
+  /** Enable content protection. Default: true */
+  enabled?: boolean
+  /** Disable copy/cut. Default: true */
+  disableCopy?: boolean
+  /** Disable right-click context menu. Default: true */
+  disableContextMenu?: boolean
+  /** Watermark text overlay */
+  watermarkText?: string
+}
+
+export interface WatermarkConfig {
+  text: string
+  opacity: number
+  angle: number
+}
+
+export interface ContentProtectionAPI {
+  eventHandlers: {
+    onCopy?: (e: { preventDefault(): void }) => void
+    onCut?: (e: { preventDefault(): void }) => void
+    onContextMenu?: (e: { preventDefault(): void }) => void
+    onSelectStart?: (e: { preventDefault(): void }) => void
+  }
+  watermarkConfig: WatermarkConfig | null
+  dataAttributes: Record<string, string>
+}
+
+export function createContentProtection(
+  props: ContentProtectionProps = {},
+): ContentProtectionAPI {
+  const {
+    enabled = true,
+    disableCopy = true,
+    disableContextMenu = true,
+    watermarkText,
+  } = props
+
+  const eventHandlers: ContentProtectionAPI['eventHandlers'] = {}
+
+  if (enabled) {
+    if (disableCopy) {
+      const prevent = (e: { preventDefault(): void }) => e.preventDefault()
+      eventHandlers.onCopy = prevent
+      eventHandlers.onCut = prevent
+      eventHandlers.onSelectStart = prevent
+    }
+    if (disableContextMenu) {
+      eventHandlers.onContextMenu = (e: { preventDefault(): void }) =>
+        e.preventDefault()
+    }
+  }
+
+  const watermarkConfig: WatermarkConfig | null = watermarkText
+    ? { text: watermarkText, opacity: 0.08, angle: -45 }
+    : null
+
+  const dataAttributes: Record<string, string> = {}
+  if (enabled) {
+    dataAttributes['data-protected'] = 'true'
+  }
+
+  return {
+    eventHandlers,
+    watermarkConfig,
+    dataAttributes,
+  }
+}

package/dist/content-protection/index.ts

@@ -0,0 +1,8 @@
+export {
+  createContentProtection,
+  type ContentProtectionProps,
+  type ContentProtectionAPI,
+  type WatermarkConfig,
+} from './content-protection.js'
+
+export { contentProtectionVariants, watermarkVariants } from './content-protection.styles.js'

package/dist/data-table/data-table.styles.ts

@@ -0,0 +1,55 @@
+import { cva } from '../shared/index.ts'
+
+export const tableVariants = cva({
+  base: 'w-full caption-bottom text-sm border-collapse',
+  variants: {
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const headerVariants = cva({
+  base: 'h-10 px-2 text-left align-middle font-medium text-muted-foreground border-b',
+  variants: {
+    sortable: {
+      true: 'cursor-pointer select-none hover:text-foreground',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    sortable: 'false',
+  },
+})
+
+export const cellVariants = cva({
+  base: 'p-2 align-middle border-b',
+  variants: {
+    size: {
+      sm: 'p-1',
+      md: 'p-2',
+      lg: 'p-3',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const rowVariants = cva({
+  base: 'border-b transition-colors hover:bg-muted/50',
+  variants: {
+    selected: {
+      true: 'bg-muted',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    selected: 'false',
+  },
+})

package/dist/data-table/data-table.ts

@@ -0,0 +1,183 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface ColumnDef<T = Record<string, unknown>> {
+  /** Unique column identifier */
+  id: string
+  /** Column header text */
+  header: string
+  /** Accessor function to get cell value from row */
+  accessor: (row: T) => unknown
+  /** Whether this column is sortable */
+  sortable?: boolean
+  /** Whether this column is filterable */
+  filterable?: boolean
+}
+
+export type SortDirection = 'asc' | 'desc'
+
+export interface DataTableProps<T = Record<string, unknown>> {
+  /** Column definitions */
+  columns: ColumnDef<T>[]
+  /** Data rows */
+  data: T[]
+  /** Current sort column */
+  sortBy?: string
+  /** Current sort direction */
+  sortDir?: SortDirection
+  /** Callback when sort changes */
+  onSort?: (columnId: string, direction: SortDirection) => void
+  /** Active filters: columnId -> filter value */
+  filters?: Record<string, string>
+}
+
+export interface DataTableState<T = Record<string, unknown>> {
+  sortedData: T[]
+  sortBy: string | null
+  sortDir: SortDirection
+  filters: Record<string, string>
+}
+
+export interface DataTableAPI<T = Record<string, unknown>> {
+  /** Current table state */
+  state: DataTableState<T>
+  /** Toggle sort for a column */
+  sort(columnId: string): void
+  /** Set a filter value for a column */
+  setFilter(columnId: string, value: string): void
+  /** Get ARIA and role props for a header cell */
+  getHeaderProps(col: ColumnDef<T>): Partial<AccessibilityProps> & Record<string, unknown>
+  /** Get props for a data cell */
+  getCellProps(col: ColumnDef<T>, row: T): Record<string, unknown>
+  /** Get props for a data row */
+  getRowProps(row: T, index: number): Record<string, unknown>
+}
+
+export function createDataTable<T = Record<string, unknown>>(
+  props: DataTableProps<T>,
+): DataTableAPI<T> {
+  const {
+    columns,
+    data,
+    sortBy: initialSortBy,
+    sortDir: initialSortDir = 'asc',
+    onSort,
+    filters: initialFilters,
+  } = props
+
+  let sortBy: string | null = initialSortBy ?? null
+  let sortDir: SortDirection = initialSortDir
+  let filters: Record<string, string> = { ...(initialFilters ?? {}) }
+
+  function getFilteredData(): T[] {
+    let result = [...data]
+
+    for (const [columnId, filterValue] of Object.entries(filters)) {
+      if (!filterValue) continue
+      const col = columns.find((c) => c.id === columnId)
+      if (!col) continue
+      const lowerFilter = filterValue.toLowerCase()
+      result = result.filter((row) => {
+        const cellValue = col.accessor(row)
+        return String(cellValue ?? '').toLowerCase().includes(lowerFilter)
+      })
+    }
+
+    return result
+  }
+
+  function getSortedData(): T[] {
+    const filtered = getFilteredData()
+
+    if (!sortBy) return filtered
+
+    const col = columns.find((c) => c.id === sortBy)
+    if (!col) return filtered
+
+    return [...filtered].sort((a, b) => {
+      const aVal = col.accessor(a)
+      const bVal = col.accessor(b)
+      const aStr = String(aVal ?? '')
+      const bStr = String(bVal ?? '')
+
+      const cmp = aStr.localeCompare(bStr, undefined, { numeric: true })
+      return sortDir === 'asc' ? cmp : -cmp
+    })
+  }
+
+  function sort(columnId: string): void {
+    const col = columns.find((c) => c.id === columnId)
+    if (!col?.sortable) return
+
+    if (sortBy === columnId) {
+      sortDir = sortDir === 'asc' ? 'desc' : 'asc'
+    } else {
+      sortBy = columnId
+      sortDir = 'asc'
+    }
+
+    onSort?.(sortBy, sortDir)
+  }
+
+  function setFilter(columnId: string, value: string): void {
+    filters = { ...filters, [columnId]: value }
+  }
+
+  function getHeaderProps(
+    col: ColumnDef<T>,
+  ): Partial<AccessibilityProps> & Record<string, unknown> {
+    const props: Partial<AccessibilityProps> & Record<string, unknown> = {
+      role: 'columnheader',
+    }
+
+    if (col.sortable) {
+      if (sortBy === col.id) {
+        props['aria-sort'] = sortDir === 'asc' ? 'ascending' : 'descending'
+      } else {
+        props['aria-sort'] = 'none'
+      }
+    }
+
+    return props
+  }
+
+  function getCellProps(
+    col: ColumnDef<T>,
+    _row: T,
+  ): Record<string, unknown> {
+    return {
+      role: 'cell',
+      'data-column': col.id,
+    }
+  }
+
+  function getRowProps(_row: T, index: number): Record<string, unknown> {
+    return {
+      role: 'row',
+      'data-row-index': index,
+    }
+  }
+
+  return {
+    get state(): DataTableState<T> {
+      return {
+        get sortedData() {
+          return getSortedData()
+        },
+        get sortBy() {
+          return sortBy
+        },
+        get sortDir() {
+          return sortDir
+        },
+        get filters() {
+          return { ...filters }
+        },
+      }
+    },
+    sort,
+    setFilter,
+    getHeaderProps,
+    getCellProps,
+    getRowProps,
+  }
+}

package/dist/data-table/index.ts

@@ -0,0 +1,15 @@
+export {
+  createDataTable,
+  type ColumnDef,
+  type SortDirection,
+  type DataTableProps,
+  type DataTableState,
+  type DataTableAPI,
+} from './data-table.js'
+
+export {
+  tableVariants,
+  headerVariants,
+  cellVariants,
+  rowVariants,
+} from './data-table.styles.js'

package/dist/date-picker/date-picker.styles.ts

@@ -0,0 +1,31 @@
+import { cva } from '../shared/index.ts'
+
+export const datePickerTriggerStyles =
+  'inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer'
+
+export const datePickerDropdownStyles =
+  'absolute z-50 mt-1 rounded-md border bg-popover p-4 text-popover-foreground shadow-md'
+
+export const datePickerGridStyles = 'w-full border-collapse'
+
+export const datePickerDayVariants = cva({
+  base: 'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground',
+  variants: {
+    state: {
+      default: '',
+      selected: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      today: 'border border-accent-foreground',
+      disabled: 'text-muted-foreground opacity-50 pointer-events-none',
+      outside: 'text-muted-foreground opacity-30',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+})
+
+export const datePickerTimeStyles =
+  'flex items-center gap-2 mt-3 pt-3 border-t'
+
+export const datePickerTimeInputStyles =
+  'w-14 rounded-md border border-input bg-background px-2 py-1 text-sm text-center'