@at-flux/astroflare 1.0.1 → 1.0.3

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Taylor Siviter
+Copyright (c) 2026 atflux
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -35,6 +35,8 @@ import { forms } from '@at-flux/astroflare/core';
 
 - `Modal.astro` — Headless modal using native `<dialog>` and `<app-modal>` web component (`class` applies to the panel)
 - `ModalTrigger.astro` — Trigger that opens a modal by ID using `<modal-trigger>` web component
+- `ContactModalCta.astro` — Opinionated contact button (solid pill or text link) wrapped in `ModalTrigger`
+- `InstagramProfileLink.astro` — Small Instagram icon + `@handle` link with safe defaults
 - `Section.astro` — Page section with optional `narrow` and `contentOnly` (inner width wrapper without outer padding)
 - `ThemeToggle.astro` — Dark/light mode toggle using `<theme-toggle>` web component
 - `ClientRouterLoadingSpinner.astro` — Loading spinner for Astro view transitions

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@at-flux/astroflare",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "Reusable headless components, styles, and utilities for Astro + Tailwind v4 + Cloudflare projects",
-  "author": "Taylor Siviter <taylor@siviter.xyz>",
+  "author": "atflux <dev@atflux.uk>",
   "license": "MIT",
   "keywords": [
     "astro",

package/src/components/ContactModalCta.astro

@@ -0,0 +1,30 @@
+---
+import ModalTrigger from './ModalTrigger.astro';
+
+interface Props {
+  /** Target dialog id (must match `<dialog id="…">`). */
+  modalId?: string;
+  label: string;
+  /** `solid` — primary pill; `text` — tertiary link style (e.g. inline in prose). */
+  variant?: 'solid' | 'text';
+  class?: string;
+}
+
+const {
+  modalId = 'contact-modal',
+  label,
+  variant = 'solid',
+  class: className = '',
+} = Astro.props;
+
+const solidClass =
+  'btn-primary-solid inline-flex items-center gap-2 rounded-full bg-[var(--color-primary)] px-6 py-3 text-sm font-semibold shadow-md transition-all hover:scale-105 hover:opacity-95 hover:shadow-lg no-underline';
+const textClass =
+  'inline-flex items-center gap-2 font-bold text-[var(--color-tertiary)] no-underline hover:text-[var(--color-secondary)]';
+---
+
+<ModalTrigger modalId={modalId} class={className}>
+  <button type='button' class:list={[variant === 'solid' ? solidClass : textClass]}>
+    {label}
+  </button>
+</ModalTrigger>

package/src/components/InstagramProfileLink.astro

@@ -0,0 +1,45 @@
+---
+interface Props {
+  /** Instagram username without @ */
+  handle: string;
+  href?: string;
+  class?: string;
+  'aria-label'?: string;
+}
+
+const {
+  handle: rawHandle,
+  href,
+  class: className = '',
+  'aria-label': ariaLabel,
+} = Astro.props;
+
+const handle = rawHandle.replace(/^@/, '');
+const url = href ?? `https://www.instagram.com/${handle}`;
+const a11yLabel = ariaLabel ?? `Instagram: @${handle}`;
+---
+
+<a
+  href={url}
+  target='_blank'
+  rel='noopener noreferrer'
+  class:list={['area-handle no-underline', className]}
+  aria-label={a11yLabel}
+>
+  <svg
+    width='13'
+    height='13'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    stroke-width='2'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+    aria-hidden='true'
+  >
+    <rect x='2' y='2' width='20' height='20' rx='5' ry='5' />
+    <circle cx='12' cy='12' r='5' />
+    <circle cx='17.5' cy='6.5' r='1.5' fill='currentColor' stroke='none' />
+  </svg>
+  @{handle}
+</a>