@publier/primitives 0.3.34

package/README.md

@@ -0,0 +1 @@
+# @publier/primitives

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@publier/primitives",
+  "version": "0.3.34",
+  "license": "UNLICENSED",
+  "description": "MDX-facing interactive primitives for Publier (Accordion, Tooltip, Tabs, CopyButton, ImageZoom, ColorSwatch, ViewAnimation). Zero-Qwik Astro components built on daisyUI + HTML natives + lazy-upgraded web components.",
+  "_filesRationale": "source-shipped Astro/Qwik: globs + negation; consumer's Astro+Vite compiles JSX/.astro AST",
+  "type": "module",
+  "files": [
+    "src/**/*.ts",
+    "src/**/*.astro",
+    "src/**/*.css",
+    "!src/**/__tests__/**",
+    "!src/**/*.test.ts",
+    "!__tests__/**"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "astro": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./styles/tailwind-sources.css": "./src/styles/tailwind-sources.css"
+  },
+  "dependencies": {
+    "@github/clipboard-copy-element": "^1.3.0",
+    "@github/tab-container-element": "^4.8.2",
+    "medium-zoom": "^1.1.0",
+    "@publier/native": "0.10.1"
+  },
+  "peerDependencies": {
+    "astro": "^6.0.0 || >=7.0.0-alpha.0",
+    "tailwindcss": ">=4.0.0-beta.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "@types/node": "^22",
+    "astro": "7.0.0-beta.3",
+    "tailwindcss": "^4",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Publier/releases.git",
+    "directory": "packages/primitives"
+  },
+  "scripts": {
+    "check-types": "tsc --noEmit",
+    "test": "echo \"@publier/primitives: covered by root vitest workspace\" && exit 0",
+    "test:browser": "playwright test",
+    "test:browser:install": "playwright install chromium"
+  }
+}

package/src/astro-modules.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Ambient type for `.astro` component imports.
+ *
+ * `@publier/primitives` type-checks its own source via `tsc --noEmit` outside
+ * Astro's build pipeline. This declaration lets `index.ts` re-export sibling
+ * `.astro` default exports without TypeScript erroring. At runtime, the
+ * consumer's Astro build provides the real `ComponentFactory`.
+ *
+ * Mirrors `packages/ui/src/astro-modules.d.ts`.
+ */
+declare module '*.astro' {
+	// biome-ignore lint/suspicious/noExplicitAny: library-boundary escape hatch.
+	const Component: (_props: any) => any;
+	export default Component;
+}

package/src/components/accordion-item.astro

@@ -0,0 +1,15 @@
+---
+import { primitivesRenderAccordionItem } from '@publier/native';
+
+interface Props {
+	title: string;
+	open?: boolean;
+	name?: string;
+}
+
+const { title, open = false, name } = Astro.props;
+const slotHtml = await Astro.slots.render('default');
+const html = primitivesRenderAccordionItem(title, open, name ?? null, slotHtml);
+---
+
+<Fragment set:html={html} />

package/src/components/accordion.astro

@@ -0,0 +1,13 @@
+---
+import { primitivesRenderAccordion } from '@publier/native';
+
+interface Props {
+	class?: string;
+}
+
+const { class: className } = Astro.props;
+const slotHtml = await Astro.slots.render('default');
+const html = primitivesRenderAccordion(className ?? null, slotHtml);
+---
+
+<Fragment set:html={html} />

package/src/components/color-swatch.astro

@@ -0,0 +1,15 @@
+---
+import {
+	primitivesColorSwatchScript,
+	primitivesColorSwatchStyle,
+	primitivesRenderColorSwatch,
+} from '@publier/native';
+import type { ColorSwatchProps } from './types.ts';
+
+const props = Astro.props as ColorSwatchProps;
+const html = primitivesRenderColorSwatch(JSON.stringify(props));
+---
+
+<Fragment set:html={html} />
+<style is:global set:html={primitivesColorSwatchStyle()}></style>
+<script is:inline set:html={primitivesColorSwatchScript()}></script>

package/src/components/copy-button.astro

@@ -0,0 +1,21 @@
+---
+import {
+	primitivesCopyButtonScript,
+	primitivesCopyButtonStyle,
+	primitivesRenderCopyButton,
+} from '@publier/native';
+import type { CopyButtonProps } from './types.ts';
+
+const { selector, text, floating = false, class: className, label } = Astro.props as CopyButtonProps;
+const html = primitivesRenderCopyButton(
+	selector ?? null,
+	text ?? null,
+	floating,
+	className ?? null,
+	label ?? null,
+);
+---
+
+<Fragment set:html={html} />
+<style is:global set:html={primitivesCopyButtonStyle()}></style>
+<script is:inline set:html={primitivesCopyButtonScript()}></script>

package/src/components/image-zoom.astro

@@ -0,0 +1,16 @@
+---
+import { primitivesImageZoomScript, primitivesRenderImageZoom } from '@publier/native';
+import type { ImageZoomProps } from './types.ts';
+
+const { src, alt, width, height, class: customClass } = Astro.props as ImageZoomProps;
+const html = primitivesRenderImageZoom(
+	src,
+	alt,
+	width ?? null,
+	height ?? null,
+	customClass ?? null,
+);
+---
+
+<Fragment set:html={html} />
+<script is:inline set:html={primitivesImageZoomScript()}></script>

package/src/components/tab-panel.astro

@@ -0,0 +1,13 @@
+---
+import { primitivesRenderTabPanel } from '@publier/native';
+
+interface Props {
+	class?: string;
+}
+
+const { class: className } = Astro.props;
+const slotHtml = await Astro.slots.render('default');
+const html = primitivesRenderTabPanel(className ?? null, slotHtml);
+---
+
+<Fragment set:html={html} />

package/src/components/tabs.astro

@@ -0,0 +1,19 @@
+---
+import { primitivesRenderTabs, primitivesTabsScript } from '@publier/native';
+import type { TabsProps } from './types.ts';
+
+const { labels, defaultIndex = 0, variant, class: className } = Astro.props as TabsProps;
+const id = Math.random().toString(36).slice(2, 10);
+const slotHtml = await Astro.slots.render('default');
+const html = primitivesRenderTabs(
+	labels,
+	defaultIndex,
+	variant ?? null,
+	className ?? null,
+	slotHtml,
+	id,
+);
+---
+
+<Fragment set:html={html} />
+<script is:inline set:html={primitivesTabsScript()}></script>

package/src/components/tooltip.astro

@@ -0,0 +1,16 @@
+---
+import { primitivesRenderTooltip } from '@publier/native';
+
+interface Props {
+	tip: string;
+	position?: 'top' | 'bottom' | 'left' | 'right';
+	color?: 'primary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+	open?: boolean;
+	class?: string;
+}
+const { tip, position = 'top', color, open = false, class: cls } = Astro.props;
+const slotHtml = await Astro.slots.render('default');
+const html = primitivesRenderTooltip(tip, position, color ?? null, open, cls ?? null, slotHtml);
+---
+
+<Fragment set:html={html} />

package/src/components/types.ts

@@ -0,0 +1,155 @@
+/**
+ * Public prop types for the Astro-rendered primitives.
+ *
+ * These live in a separate `.ts` file (rather than inline in each `.astro`'s
+ * frontmatter) so the barrel `index.ts` can re-export them without relying
+ * on TypeScript's `.astro` module inference — only provided in Astro build
+ * contexts, not during our plain `tsc --noEmit` check.
+ *
+ * The inline `interface Props` in each `.astro` must stay in sync with these.
+ */
+
+// ---------------------------------------------------------------------------
+// Accordion
+// ---------------------------------------------------------------------------
+
+export interface AccordionProps {
+	/**
+	 * When set, child items share this radio-group name so only one can be open
+	 * at a time. Omit to let items toggle independently (checkbox mode).
+	 */
+	name?: string;
+}
+
+export interface AccordionItemProps {
+	/** Heading text rendered on the disclosure trigger. */
+	title: string;
+	/** Render the panel open on first paint. Defaults to `false`. */
+	open?: boolean;
+	/**
+	 * When set, the item renders as a radio input in the named group. Usually
+	 * provided implicitly by wrapping `<Accordion name="…">`.
+	 */
+	name?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Tooltip
+// ---------------------------------------------------------------------------
+
+export interface TooltipProps {
+	/** Body text shown inside the tooltip bubble. */
+	tip: string;
+	/**
+	 * Preferred side of the trigger for the bubble. Defaults to `top`.
+	 * Maps to daisyUI's `tooltip-top|bottom|left|right` modifiers.
+	 */
+	position?: 'top' | 'bottom' | 'left' | 'right';
+	/**
+	 * Optional daisyUI color variant (`primary`, `accent`, `info`, `success`,
+	 * `warning`, `error`). Omit for the default surface.
+	 */
+	color?: 'primary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+	/** Render open regardless of hover/focus state (useful for docs). */
+	open?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Tabs
+// ---------------------------------------------------------------------------
+
+export interface TabsProps {
+	/**
+	 * Labels for each tab in order. The number of labels MUST equal the number
+	 * of `<TabPanel>` children; the component renders one `<button role="tab">`
+	 * per label with matching `aria-controls`.
+	 */
+	labels: string[];
+	/** Zero-based index of the tab shown on first paint. Defaults to `0`. */
+	defaultIndex?: number;
+	/**
+	 * Visual variant of the tab list. Maps to daisyUI `tabs-box|tabs-border|
+	 * tabs-lift`. Omit for the default underline style.
+	 */
+	variant?: 'box' | 'border' | 'lift';
+	/** Additional CSS classes on the outer container. */
+	class?: string;
+}
+
+export interface TabPanelProps {
+	/** Additional CSS classes on the panel. */
+	class?: string;
+}
+
+// ---------------------------------------------------------------------------
+// CopyButton
+// ---------------------------------------------------------------------------
+
+export interface CopyButtonProps {
+	/**
+	 * Element id (no `#` prefix) passed to `<clipboard-copy for>`; the element's
+	 * `textContent` or `[value]` is copied. Upstream resolves via `getElementById`,
+	 * so a CSS selector will not match. Takes precedence over `text` when both
+	 * are set.
+	 */
+	selector?: string;
+	/** Literal text to copy (passed to `<clipboard-copy value>`). */
+	text?: string;
+	/** Absolutely positions the button over its container (code blocks, etc.). */
+	floating?: boolean;
+	/**
+	 * daisyUI button variant. Defaults to `btn-ghost btn-sm`; override for
+	 * inline placement. Pass the full class string (e.g. `'btn btn-primary'`).
+	 */
+	class?: string;
+	/** Accessible label. Defaults to `'Copy to clipboard'`. */
+	label?: string;
+}
+
+// ---------------------------------------------------------------------------
+// ImageZoom
+// ---------------------------------------------------------------------------
+
+export interface ImageZoomProps {
+	/** Image source URL. */
+	src: string;
+	/** Alt text for accessibility. */
+	alt: string;
+	/** Optional intrinsic width. */
+	width?: number;
+	/** Optional intrinsic height. */
+	height?: number;
+	/** Additional CSS class appended to `publier-image-zoom`. */
+	class?: string;
+}
+
+// ---------------------------------------------------------------------------
+// ColorSwatch
+// ---------------------------------------------------------------------------
+
+/** A single color entry in the {@link ColorSwatchProps} grid. */
+export interface ColorEntry {
+	name: string;
+	value: string;
+	/** Force dark label text. Auto-detected from luminance when omitted. */
+	textDark?: boolean;
+}
+
+export interface ColorSwatchProps {
+	colors: ColorEntry[];
+	columns?: 2 | 3 | 4 | 5 | 6;
+	size?: 'sm' | 'md' | 'lg';
+}
+
+// ---------------------------------------------------------------------------
+// ViewAnimation
+// ---------------------------------------------------------------------------
+
+export interface ViewAnimationProps {
+	/** Additional CSS classes appended to the animated container. */
+	class?: string;
+	/** Transition delay in ms (capped at 200). Useful for staggered lists. */
+	delay?: number;
+	/** When true (default), the animation runs only on first intersection. */
+	once?: boolean;
+}

package/src/components/view-animation.astro

@@ -0,0 +1,16 @@
+---
+import {
+	primitivesRenderViewAnimation,
+	primitivesViewAnimationScript,
+	primitivesViewAnimationStyle,
+} from '@publier/native';
+import type { ViewAnimationProps } from './types.ts';
+
+const { class: className, delay = 0, once = true } = Astro.props as ViewAnimationProps;
+const slotHtml = await Astro.slots.render('default');
+const html = primitivesRenderViewAnimation(slotHtml, className ?? null, delay, once);
+---
+
+<Fragment set:html={html} />
+<style is:global set:html={primitivesViewAnimationStyle()}></style>
+<script is:inline set:html={primitivesViewAnimationScript()}></script>

package/src/index.ts

@@ -0,0 +1,23 @@
+
+
+export { default as Accordion } from './components/accordion.astro';
+export { default as AccordionItem } from './components/accordion-item.astro';
+export { default as ColorSwatch } from './components/color-swatch.astro';
+export { default as CopyButton } from './components/copy-button.astro';
+export { default as ImageZoom } from './components/image-zoom.astro';
+export { default as TabPanel } from './components/tab-panel.astro';
+export { default as Tabs } from './components/tabs.astro';
+export { default as Tooltip } from './components/tooltip.astro';
+export type {
+	AccordionItemProps,
+	AccordionProps,
+	ColorEntry,
+	ColorSwatchProps,
+	CopyButtonProps,
+	ImageZoomProps,
+	TabPanelProps,
+	TabsProps,
+	TooltipProps,
+	ViewAnimationProps,
+} from './components/types.ts';
+export { default as ViewAnimation } from './components/view-animation.astro';

package/src/styles/tailwind-sources.css

@@ -0,0 +1,8 @@
+/* Tailwind v4 source scan registration for @publier/primitives.
+ *
+ * Imported by `@publier/ui/src/css/base.css`. Tailwind v4 resolves the @source
+ * pattern below relative to THIS file's on-disk location — which works under
+ * pnpm where sibling packages live in separate `.pnpm/<pkg>/` directories.
+ * See `@publier/shell/styles/tailwind-sources.css` for the full rationale. */
+
+@source "../components/**/*.astro";