@refraction-ui/astro 0.4.7 → 0.4.10

package/dist/astro-callout/Callout.astro

@@ -1,3 +1,20 @@
 ---
+import { createCallout, calloutVariants } from '../callout/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info'
+}
+
+const { variant = 'default', class: className, ...props } = Astro.props
+const api = createCallout({ role: variant === 'destructive' ? 'alert' : 'region' })
 ---
-<div></div>
+
+<div
+  class={cn(calloutVariants({ variant }), className)}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-callout/CalloutContent.astro

@@ -0,0 +1,17 @@
+---
+import { createCalloutContent } from '../callout/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const api = createCalloutContent()
+---
+
+<div
+  class={cn('flex-1', className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-callout/CalloutDescription.astro

@@ -0,0 +1,17 @@
+---
+import { createCalloutDescription, calloutDescriptionVariants } from '../callout/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const api = createCalloutDescription()
+---
+
+<div
+  class={cn(calloutDescriptionVariants(), className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-callout/CalloutIcon.astro

@@ -0,0 +1,17 @@
+---
+import { createCalloutIcon } from '../callout/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const api = createCalloutIcon()
+---
+
+<div
+  class={cn('flex-shrink-0 mt-0.5', className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-callout/CalloutTitle.astro

@@ -0,0 +1,17 @@
+---
+import { createCalloutTitle, calloutTitleVariants } from '../callout/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const api = createCalloutTitle()
+---
+
+<h5
+  class={cn(calloutTitleVariants(), className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</h5>

package/dist/astro-callout/index.ts

@@ -1 +1,5 @@
-export { default as Callout } from './Callout.astro';
+export { default as Callout } from './Callout.astro'
+export { default as CalloutIcon } from './CalloutIcon.astro'
+export { default as CalloutContent } from './CalloutContent.astro'
+export { default as CalloutTitle } from './CalloutTitle.astro'
+export { default as CalloutDescription } from './CalloutDescription.astro'

package/dist/astro-code-block/CodeBlock.astro

@@ -1,3 +1,17 @@
 ---
+import { createCodeBlock, codeBlockVariants } from '../code-block/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const api = createCodeBlock()
 ---
-<div></div>
+
+<div
+  class={cn(codeBlockVariants(), className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>

package/dist/callout/callout.styles.ts

@@ -0,0 +1,25 @@
+import { cva } from '../shared/index.ts'
+
+export const calloutVariants = cva({
+  base: 'relative w-full rounded-lg border p-4 text-sm flex gap-3',
+  variants: {
+    variant: {
+      default: 'bg-muted/50 border-border text-foreground',
+      destructive: 'bg-destructive/10 border-destructive/20 text-destructive',
+      success: 'bg-green-500/10 border-green-500/20 text-green-700 dark:text-green-400',
+      warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-700 dark:text-yellow-400',
+      info: 'bg-blue-500/10 border-blue-500/20 text-blue-700 dark:text-blue-400',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export const calloutTitleVariants = cva({
+  base: 'font-semibold leading-none tracking-tight mb-1',
+})
+
+export const calloutDescriptionVariants = cva({
+  base: 'text-sm opacity-90 leading-relaxed',
+})

package/dist/callout/callout.ts

@@ -1 +1,43 @@
-export const callout = {};
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface CalloutProps {
+  /** Optional accessible role override */
+  role?: string
+}
+
+export interface CalloutAPI {
+  ariaProps: Partial<AccessibilityProps>
+  dataAttributes: Record<string, string>
+}
+
+export function createCallout(props: CalloutProps = {}): CalloutAPI {
+  const ariaProps: Partial<AccessibilityProps> = {}
+  
+  // Callouts are usually alert or region depending on severity
+  if (props.role) {
+    ariaProps.role = props.role
+  } else {
+    ariaProps.role = 'region'
+  }
+
+  return {
+    ariaProps,
+    dataAttributes: { 'data-slot': 'callout' },
+  }
+}
+
+export function createCalloutIcon(): { dataAttributes: Record<string, string> } {
+  return { dataAttributes: { 'data-slot': 'callout-icon' } }
+}
+
+export function createCalloutContent(): { dataAttributes: Record<string, string> } {
+  return { dataAttributes: { 'data-slot': 'callout-content' } }
+}
+
+export function createCalloutTitle(): { dataAttributes: Record<string, string> } {
+  return { dataAttributes: { 'data-slot': 'callout-title' } }
+}
+
+export function createCalloutDescription(): { dataAttributes: Record<string, string> } {
+  return { dataAttributes: { 'data-slot': 'callout-description' } }
+}

package/dist/callout/index.ts

@@ -1 +1,15 @@
-export * from './callout.ts';
+export {
+  createCallout,
+  createCalloutIcon,
+  createCalloutContent,
+  createCalloutTitle,
+  createCalloutDescription,
+  type CalloutProps,
+  type CalloutAPI,
+} from './callout.js'
+
+export {
+  calloutVariants,
+  calloutTitleVariants,
+  calloutDescriptionVariants,
+} from './callout.styles.js'

package/dist/code-block/code-block.styles.ts

@@ -0,0 +1,13 @@
+import { cva } from '../shared/index.ts'
+
+export const codeBlockVariants = cva({
+  base: 'relative overflow-hidden rounded-lg border bg-zinc-950 text-zinc-50 dark:bg-zinc-900',
+})
+
+export const codeBlockHeaderVariants = cva({
+  base: 'flex items-center justify-between border-b border-zinc-800 bg-zinc-900/50 px-4 py-2 text-xs text-zinc-400',
+})
+
+export const codeBlockContentVariants = cva({
+  base: 'overflow-x-auto p-4 text-sm font-mono leading-relaxed',
+})

package/dist/code-block/code-block.ts

@@ -1 +1,15 @@
-export {};
+export interface CodeBlockAPI {
+  dataAttributes: Record<string, string>
+}
+
+export function createCodeBlock(): CodeBlockAPI {
+  return { dataAttributes: { 'data-slot': 'code-block' } }
+}
+
+export function createCodeBlockHeader(): CodeBlockAPI {
+  return { dataAttributes: { 'data-slot': 'code-block-header' } }
+}
+
+export function createCodeBlockContent(): CodeBlockAPI {
+  return { dataAttributes: { 'data-slot': 'code-block-content' } }
+}

package/dist/code-block/index.ts

@@ -1 +1,12 @@
-export * from './code-block.ts';
+export {
+  createCodeBlock,
+  createCodeBlockHeader,
+  createCodeBlockContent,
+  type CodeBlockAPI,
+} from './code-block.js'
+
+export {
+  codeBlockVariants,
+  codeBlockHeaderVariants,
+  codeBlockContentVariants,
+} from './code-block.styles.js'

package/dist/skip-to-content/skip-to-content.ts

@@ -1 +1,13 @@
-export {};
+import { cva } from '../shared/index.ts'
+
+export interface SkipToContentAPI {
+  dataAttributes: Record<string, string>
+}
+
+export function createSkipToContent(): SkipToContentAPI {
+  return { dataAttributes: { 'data-slot': 'skip-to-content' } }
+}
+
+export const skipToContentVariants = cva({
+  base: 'fixed left-4 top-4 z-[100] -translate-y-16 rounded-md border bg-background px-4 py-2 text-sm font-medium shadow-md transition-transform focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+})

package/dist/steps/steps.ts

@@ -1 +1,78 @@
-export const steps = {};
+import { cva } from '../shared/index.ts'
+
+export interface StepsAPI {
+  dataAttributes: Record<string, string>
+}
+
+export function createSteps(): StepsAPI {
+  return { dataAttributes: { 'data-slot': 'steps' } }
+}
+
+export function createStep(): StepsAPI {
+  return { dataAttributes: { 'data-slot': 'step' } }
+}
+
+export function createStepIndicator(): StepsAPI {
+  return { dataAttributes: { 'data-slot': 'step-indicator' } }
+}
+
+export function createStepContent(): StepsAPI {
+  return { dataAttributes: { 'data-slot': 'step-content' } }
+}
+
+export function createStepTitle(): StepsAPI {
+  return { dataAttributes: { 'data-slot': 'step-title' } }
+}
+
+export function createStepDescription(): StepsAPI {
+  return { dataAttributes: { 'data-slot': 'step-description' } }
+}
+
+export const stepsVariants = cva({
+  base: 'flex flex-col gap-0',
+  variants: {
+    orientation: {
+      vertical: 'flex-col',
+      horizontal: 'flex-row',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+})
+
+export const stepVariants = cva({
+  base: 'flex gap-3',
+  variants: {
+    status: {
+      completed: 'text-foreground',
+      active: 'text-foreground',
+      upcoming: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    status: 'upcoming',
+  },
+})
+
+export const stepIndicatorVariants = cva({
+  base: 'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold',
+  variants: {
+    status: {
+      completed: 'border-primary bg-primary text-primary-foreground',
+      active: 'border-primary bg-background text-primary',
+      upcoming: 'border-muted bg-background text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    status: 'upcoming',
+  },
+})
+
+export const stepTitleVariants = cva({
+  base: 'font-semibold leading-none tracking-tight',
+})
+
+export const stepDescriptionVariants = cva({
+  base: 'text-sm text-muted-foreground mt-1',
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.4.7",
+  "version": "0.4.10",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {
@@ -104,4 +104,4 @@
     "directory": "packages/astro-meta"
   },
   "homepage": "https://elloloop.github.io/refraction-ui/"
-}
+}