@refraction-ui/astro 0.4.2 → 0.4.5

package/dist/command/command.styles.ts

@@ -0,0 +1,27 @@
+import { cva } from '../shared/index.ts'
+
+export const commandVariants = cva({
+  base: 'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+})
+
+export const commandInputVariants = cva({
+  base: 'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+})
+
+export const commandItemVariants = cva({
+  base: 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+  variants: {
+    state: {
+      default: '',
+      selected: 'bg-accent text-accent-foreground',
+      disabled: 'pointer-events-none opacity-50',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+})
+
+export const commandGroupVariants = cva({
+  base: 'overflow-hidden p-1 text-foreground',
+})

package/dist/command/command.ts

@@ -0,0 +1,179 @@
+import type { KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys, generateId } from '../shared/index.ts'
+
+export interface CommandProps {
+  /** Whether the command palette is open (controlled) */
+  open?: boolean
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void
+  /** Custom filter function — receives item value and search query, returns true to include */
+  filter?: (value: string, search: string) => boolean
+}
+
+export interface CommandItemData {
+  /** Unique identifier for the item */
+  id: string
+  /** Display label */
+  label: string
+  /** Searchable value */
+  value: string
+  /** Whether the item is disabled */
+  disabled?: boolean
+  /** Optional group the item belongs to */
+  group?: string
+}
+
+export interface CommandState {
+  /** Current search query */
+  search: string
+  /** Items after filtering */
+  filteredItems: CommandItemData[]
+  /** Index of the currently highlighted item in filteredItems */
+  selectedIndex: number
+  /** Whether the palette is open */
+  open: boolean
+}
+
+export interface CommandAPI {
+  /** Current command state */
+  state: CommandState
+  /** Update the search query and re-filter items */
+  search(query: string): void
+  /** Select the item at the given index (or the currently highlighted item) */
+  select(index?: number): CommandItemData | undefined
+  /** Keyboard handlers for the command palette */
+  keyboardHandlers: KeyboardHandlerMap
+  /** ARIA attributes for the command root */
+  ariaProps: Record<string, unknown>
+  /** ARIA attributes for the input */
+  inputAriaProps: Record<string, unknown>
+  /** ARIA attributes for the list */
+  listAriaProps: Record<string, unknown>
+  /** Get ARIA attributes for a specific item */
+  getItemAriaProps(item: CommandItemData, index: number): Record<string, unknown>
+  /** Generated IDs */
+  ids: {
+    root: string
+    input: string
+    list: string
+  }
+}
+
+/** Default filter: case-insensitive includes */
+function defaultFilter(value: string, search: string): boolean {
+  return value.toLowerCase().includes(search.toLowerCase())
+}
+
+export function createCommand(
+  props: CommandProps = {},
+  items: CommandItemData[] = [],
+): CommandAPI {
+  const {
+    open: controlledOpen,
+    onOpenChange,
+    filter = defaultFilter,
+  } = props
+
+  const rootId = generateId('rfr-cmd')
+  const inputId = generateId('rfr-cmd-input')
+  const listId = generateId('rfr-cmd-list')
+
+  let searchQuery = ''
+  let selectedIndex = 0
+  let filteredItems = [...items]
+  const isOpen = controlledOpen ?? true
+
+  function applyFilter(query: string): CommandItemData[] {
+    if (!query) return [...items]
+    return items.filter((item) => filter(item.value, query))
+  }
+
+  function doSearch(query: string): void {
+    searchQuery = query
+    filteredItems = applyFilter(query)
+    selectedIndex = 0
+  }
+
+  function doSelect(index?: number): CommandItemData | undefined {
+    const idx = index ?? selectedIndex
+    const item = filteredItems[idx]
+    if (!item || item.disabled) return undefined
+    return item
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {
+    [Keys.ArrowDown]: (e) => {
+      e.preventDefault()
+      if (filteredItems.length > 0) {
+        selectedIndex = (selectedIndex + 1) % filteredItems.length
+      }
+    },
+    [Keys.ArrowUp]: (e) => {
+      e.preventDefault()
+      if (filteredItems.length > 0) {
+        selectedIndex = (selectedIndex - 1 + filteredItems.length) % filteredItems.length
+      }
+    },
+    [Keys.Enter]: (e) => {
+      e.preventDefault()
+      doSelect()
+    },
+    [Keys.Escape]: (e) => {
+      e.preventDefault()
+      onOpenChange?.(false)
+    },
+  }
+
+  const ariaProps: Record<string, unknown> = {
+    role: 'combobox',
+    'aria-expanded': isOpen,
+    'aria-haspopup': 'listbox',
+    'aria-owns': listId,
+    id: rootId,
+  }
+
+  const inputAriaProps: Record<string, unknown> = {
+    role: 'searchbox',
+    'aria-autocomplete': 'list',
+    'aria-controls': listId,
+    id: inputId,
+  }
+
+  const listAriaProps: Record<string, unknown> = {
+    role: 'listbox',
+    id: listId,
+    'aria-label': 'Command suggestions',
+  }
+
+  function getItemAriaProps(item: CommandItemData, index: number): Record<string, unknown> {
+    return {
+      role: 'option',
+      'aria-selected': index === selectedIndex,
+      'aria-disabled': item.disabled ?? false,
+      id: `${listId}-item-${item.id}`,
+    }
+  }
+
+  return {
+    get state(): CommandState {
+      return {
+        search: searchQuery,
+        filteredItems,
+        selectedIndex,
+        open: isOpen,
+      }
+    },
+    search: doSearch,
+    select: doSelect,
+    keyboardHandlers,
+    ariaProps,
+    inputAriaProps,
+    listAriaProps,
+    getItemAriaProps,
+    ids: {
+      root: rootId,
+      input: inputId,
+      list: listId,
+    },
+  }
+}

package/dist/command/index.ts

@@ -0,0 +1,14 @@
+export {
+  createCommand,
+  type CommandProps,
+  type CommandItemData,
+  type CommandState,
+  type CommandAPI,
+} from './command.js'
+
+export {
+  commandVariants,
+  commandInputVariants,
+  commandItemVariants,
+  commandGroupVariants,
+} from './command.styles.js'

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',
+  },
+})