@refraction-ui/astro 0.16.1 → 0.17.1

package/dist/astro-location-selector/LocationSelector.astro

@@ -0,0 +1,56 @@
+---
+import { createLocationSelector } from '../location-selector/index.ts'
+import { cn } from '../shared/index.ts'
+
+export interface Props {
+  defaultCountry?: string
+  defaultLanguage?: string
+  className?: string
+}
+
+const {
+  defaultCountry = 'US',
+  defaultLanguage = 'en',
+  className
+} = Astro.props
+
+const api = createLocationSelector({
+  defaultCountry,
+  defaultLanguage
+})
+---
+
+<div class={cn('flex flex-col gap-4 sm:flex-row', className)}>
+  <div class="flex flex-col gap-1.5 flex-1">
+    <label for={api.countryProps.id} class="text-sm font-medium">Country</label>
+    <select
+      id={api.countryProps.id}
+      name={api.countryProps.name}
+      class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      {api.countries.map((c: any) => {
+        const value = c.code || c.id || c;
+        const label = c.name || c.label || c;
+        return (
+          <option value={value} selected={value === defaultCountry}>{label}</option>
+        )
+      })}
+    </select>
+  </div>
+  <div class="flex flex-col gap-1.5 flex-1">
+    <label for={api.languageProps.id} class="text-sm font-medium">Language</label>
+    <select
+      id={api.languageProps.id}
+      name={api.languageProps.name}
+      class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      {api.languages.map((l: any) => {
+        const value = l.code || l.id || l;
+        const label = l.name || l.label || l;
+        return (
+          <option value={value} selected={value === defaultLanguage}>{label}</option>
+        )
+      })}
+    </select>
+  </div>
+</div>

package/dist/astro-location-selector/LocationSelector.stories.ts

@@ -0,0 +1,15 @@
+import Component from './LocationSelector.astro'
+
+const meta = {
+  title: 'Astro/LocationSelector',
+  component: Component,
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    defaultCountry: 'Example defaultCountry',
+    defaultLanguage: 'Example defaultLanguage'
+  }
+}

package/dist/astro-location-selector/index.ts

@@ -0,0 +1 @@
+export { default as LocationSelector } from './LocationSelector.astro'

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

@@ -97,10 +97,10 @@ export class CommandInput {
       const matchedTrigger = this.options.triggers.find((t) => t.char === char);
 
       if (matchedTrigger) {
-        const isStartOfWord = i === 0 || /\\s/.test(rawText[i - 1]);
+        const isStartOfWord = i === 0 || /\s/.test(rawText[i - 1]);
         if (isStartOfWord) {
           const commandText = rawText.slice(i + 1, cursorPosition);
-          if (!/\\s/.test(commandText)) {
+          if (!/\s/.test(commandText)) {
             let isValid = true;
             if (matchedTrigger.pattern) {
               isValid = matchedTrigger.pattern.test(commandText);
@@ -118,7 +118,7 @@ export class CommandInput {
         break;
       }
       
-      if (/\\s/.test(char)) {
+      if (/\s/.test(char)) {
         break;
       }
     }
@@ -130,8 +130,8 @@ export class CommandInput {
       return;
     }
 
-    const triggerChars = this.options.triggers.map((t) => t.char.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'));
-    const patternStr = `(^|\\\\s)(${triggerChars.join('|')})([^\\\\s]*)`;
+    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;

package/dist/composer/emoji-trigger.ts

@@ -0,0 +1,51 @@
+/**
+ * `createEmojiTrigger` — a ready-made `:` shortcode trigger backed by the shared
+ * emoji dataset (`@refraction-ui/emoji-picker`, ~1900 base emoji), so the
+ * composer's `:` menu is complete and matches the picker exactly (one source of
+ * truth, no divergence). The committed token is the native glyph.
+ *
+ * This module is side-effect free and imports the dataset lazily via the emoji
+ * search API, so it is only pulled into a bundle when `createEmojiTrigger` is
+ * actually referenced.
+ */
+import { searchEmojis } from '../emoji-picker/index.ts'
+import type { ComposerCandidate, ComposerTrigger } from './types.js'
+
+export interface EmojiTriggerOptions {
+  /** Trigger id. Default 'emoji'. */
+  id?: string
+  /** Symbol. Default ':'. */
+  symbol?: string
+  /** Max results surfaced to the menu. Default 8. */
+  maxResults?: number
+  /**
+   * Minimum query length before resolving (avoids flooding the menu with the
+   * whole set on a lone ':'). Default 1.
+   */
+  minQueryLength?: number
+}
+
+/**
+ * Build a `:` emoji trigger. Typing `:fir` filters the full set; committing
+ * inserts the glyph (🔥). Pair it with the picker for the same coverage in both
+ * surfaces.
+ */
+export function createEmojiTrigger(options: EmojiTriggerOptions = {}): ComposerTrigger {
+  const { id = 'emoji', symbol = ':', maxResults = 8, minQueryLength = 1 } = options
+  return {
+    id,
+    symbol,
+    // The committed token is the glyph itself, not `:name:`.
+    toDisplay: (candidate: ComposerCandidate) =>
+      (candidate.metadata?.emoji as string | undefined) ?? candidate.display,
+    resolve: (query: string): ComposerCandidate[] => {
+      if (query.length < minQueryLength) return []
+      return searchEmojis(query, maxResults).map((entry) => ({
+        id: `${entry.shortcode}`,
+        display: `${entry.emoji} :${entry.shortcode}:`,
+        subtitle: entry.name,
+        metadata: { emoji: entry.emoji, shortcode: entry.shortcode },
+      }))
+    },
+  }
+}

package/dist/composer/index.ts

@@ -6,3 +6,4 @@ export * from './suggestion.ts'
 export * from './tokens.ts'
 export * from './composer.ts'
 export * from './styles.ts'
+export { createEmojiTrigger, type EmojiTriggerOptions } from './emoji-trigger.js'

package/dist/composer/styles.ts

@@ -6,13 +6,25 @@
 
 import { cva } from '../shared/index.ts'
 
-/** Outer surface (the rounded card wrapping tray + field + action row). */
+/**
+ * Outer surface (the rounded card wrapping tray + field + action row).
+ * `surface` picks the resting fill: `outlined` (transparent-on-page card) or
+ * `filled` (a calm muted fill distinct from the page). Both keep a tasteful
+ * focus-visible ring on the pill — a hairline border plus a single-px ring, not
+ * a slammed saturated full-perimeter brand border.
+ */
 export const composerSurfaceVariants = cva({
   base: [
-    'overflow-hidden rounded-2xl border border-border bg-background shadow-sm',
-    'transition-shadow focus-within:border-ring focus-within:ring-1 focus-within:ring-ring focus-within:shadow-md',
+    'overflow-hidden rounded-2xl border shadow-sm',
+    'transition-[box-shadow,border-color,background-color] duration-150 ease-out',
+    'focus-within:ring-1 focus-within:ring-ring focus-within:shadow-md',
+    'motion-reduce:transition-none',
   ].join(' '),
   variants: {
+    surface: {
+      outlined: 'border-border bg-background focus-within:border-ring',
+      filled: 'border-border/50 bg-muted/50 focus-within:border-ring/70 focus-within:bg-background',
+    },
     disabled: {
       true: 'pointer-events-none opacity-60',
       false: '',
@@ -23,6 +35,7 @@ export const composerSurfaceVariants = cva({
     },
   },
   defaultVariants: {
+    surface: 'outlined',
     disabled: 'false',
     error: 'false',
   },
@@ -35,9 +48,16 @@ export const composerFieldClass =
 /** Attachment tray above the field, inside the dock. */
 export const composerTrayClass = 'flex flex-wrap gap-2 px-3 pt-3'
 
-/** A single attachment chip. */
+/**
+ * A single attachment chip. Chips animate in on add (scale + fade) and, when
+ * the adapter marks one `exiting`, animate out faster before unmounting. Both
+ * degrade to opacity-only / instant under reduced motion.
+ */
 export const composerAttachmentChipVariants = cva({
-  base: 'inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs',
+  base: [
+    'inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs',
+    'origin-left transition-all duration-150 ease-out motion-reduce:transition-none',
+  ].join(' '),
   variants: {
     status: {
       pending: 'opacity-70',
@@ -45,9 +65,14 @@ export const composerAttachmentChipVariants = cva({
       ready: '',
       error: 'text-destructive',
     },
+    exiting: {
+      true: 'scale-90 opacity-0 motion-reduce:scale-100',
+      false: 'motion-safe:animate-fade-in-scale',
+    },
   },
   defaultVariants: {
     status: 'pending',
+    exiting: 'false',
   },
 })
 
@@ -55,9 +80,35 @@ export const composerAttachmentChipVariants = cva({
 export const composerTokenPillClass =
   'rounded bg-accent/40 px-0.5 text-accent-foreground'
 
-/** The caret-anchored suggestion menu. */
+/**
+ * The caret-anchored suggestion menu. Enters with an eased fade+scale from its
+ * bottom edge (it sits above the field); reduced motion drops the movement.
+ */
 export const composerMenuClass =
-  'z-20 w-72 overflow-hidden rounded-xl border border-border bg-popover shadow-lg'
+  'z-20 w-72 overflow-hidden rounded-xl border border-border bg-popover shadow-lg origin-bottom motion-safe:animate-fade-in-scale'
+
+/**
+ * The inline expression/accessory panel docked below the field. It is part of
+ * the composer's own stack (never a floating portal), so the textarea and the
+ * message in progress stay fully visible while the panel is open. Opens with an
+ * eased fade; reduced motion shows it instantly.
+ */
+export const composerAccessoryPanelClass =
+  'border-t border-border motion-safe:animate-fade-in'
+
+/** The built-in expression-panel toggle button. */
+export const composerAccessoryToggleVariants = cva({
+  base: 'flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+  variants: {
+    active: {
+      true: 'bg-accent text-foreground',
+      false: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    active: 'false',
+  },
+})
 
 /** A suggestion row; `active` follows keyboard/pointer last-input-wins. */
 export const composerMenuItemVariants = cva({
@@ -87,9 +138,13 @@ export const composerCounterVariants = cva({
   },
 })
 
-/** Primary action (send ⇄ stop swap driven by `{hasText, canSend, isBusy}`). */
+/**
+ * Primary action (send ⇄ stop swap driven by `{hasText, canSend, isBusy}`).
+ * The colour/affordance change eases; the adapter keys the button on busy so
+ * the swap pops in (scale) rather than snapping. Reduced motion keeps it calm.
+ */
 export const composerPrimaryActionVariants = cva({
-  base: 'flex h-9 w-9 items-center justify-center rounded-full transition',
+  base: 'flex h-9 w-9 items-center justify-center rounded-full transition-all duration-150 ease-out active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 motion-safe:animate-scale-in',
   variants: {
     enabled: {
       true: 'bg-primary text-primary-foreground hover:opacity-90',