@hubpav/hwio-ui 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "HARDWARIO web design system for Astro: DaisyUI 5 themes generated from the brand tokens, the Tailwind entry stylesheet and the HWio* components.",
   "license": "MIT",
   "type": "module",
@@ -31,9 +31,9 @@
     "build": "node scripts/build-themes.mjs"
   },
   "dependencies": {
-    "@hubpav/hwio-brand": "0.2.0",
-    "@hubpav/hwio-web-runtime": "0.2.0",
-    "@hubpav/hwio-web-worker": "0.2.0",
+    "@hubpav/hwio-brand": "0.4.0",
+    "@hubpav/hwio-web-runtime": "0.4.0",
+    "@hubpav/hwio-web-worker": "0.4.0",
     "daisyui": "5.7.28"
   },
   "peerDependencies": {

package/src/components/HWioFaq.astro

@@ -1,14 +1,16 @@
 ---
 /** Exclusive accordion on native <details name>, optional FAQPage JSON-LD. Answers are text unless `html` is set. */
-interface Props { items: { q: string; a: string }[]; name?: string; html?: boolean; jsonLd?: boolean; class?: string }
+/** An answer is one paragraph, or several as an array. */
+interface Props { items: { q: string; a: string | string[] }[]; name?: string; html?: boolean; jsonLd?: boolean; class?: string }
 const { items, name = 'hwio-faq', html = false, jsonLd = true, class: className = '' } = Astro.props;
-const ld = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: items.map((i) => ({ '@type': 'Question', name: i.q, acceptedAnswer: { '@type': 'Answer', text: i.a } })) };
+const paragraphs = (a: string | string[]) => (Array.isArray(a) ? a : [a]);
+const ld = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: items.map((i) => ({ '@type': 'Question', name: i.q, acceptedAnswer: { '@type': 'Answer', text: paragraphs(i.a).join(' ') } })) };
 ---
 <div class:list={['space-y-3', className]}>
   {items.map((item) => (
     <details class="collapse collapse-arrow border border-base-300 bg-base-100" name={name}>
       <summary class="collapse-title font-semibold">{item.q}</summary>
-      <div class="collapse-content opacity-90">{html ? <div set:html={item.a} /> : <p>{item.a}</p>}</div>
+      <div class="collapse-content space-y-3 opacity-90">{html ? <div set:html={paragraphs(item.a).join('')} /> : paragraphs(item.a).map((p) => <p>{p}</p>)}</div>
     </details>
   ))}
 </div>

package/src/components/HWioHeader.astro

@@ -17,10 +17,19 @@ interface Props {
   showThemeToggle?: boolean;
   scrollspy?: boolean;
   labels: { nav: string; menu: string; close: string; theme?: string; languages?: string };
+  /** Viewport from which the inline nav and CTAs replace the drawer (default lg; xl for long navs). */
+  desktopFrom?: 'lg' | 'xl';
+  /** Desktop language control: dropdown (default) or inline pills (two-language sites). */
+  languageVariant?: 'dropdown' | 'pills';
   id?: string;
   class?: string;
 }
-const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
+const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, desktopFrom = 'lg', languageVariant = 'dropdown', id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
+const BREAK = {
+  lg: { nav: 'hidden flex-1 justify-center lg:flex', ctas: 'hidden items-center gap-2 lg:flex', drawer: 'drawer drawer-end w-auto lg:hidden' },
+  xl: { nav: 'hidden flex-1 justify-center xl:flex', ctas: 'hidden items-center gap-2 xl:flex', drawer: 'drawer drawer-end w-auto xl:hidden' },
+} as const;
+const bp = BREAK[desktopFrom];
 const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost' } as const;
 ---
 <header class:list={['sticky top-0 z-50 border-b border-base-300 bg-base-100/90 backdrop-blur supports-[backdrop-filter]:bg-base-100/80', className]} data-hwio-font-exempt>
@@ -29,7 +38,7 @@ const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost'
       <slot name="logo" />
     </div>
 
-    <nav class="hidden flex-1 justify-center lg:flex" aria-label={labels.nav} data-hwio-scrollspy={scrollspy ? 'true' : undefined}>
+    <nav class={bp.nav} aria-label={labels.nav} data-hwio-scrollspy={scrollspy ? 'true' : undefined}>
       <ul class="menu menu-horizontal flex-nowrap gap-0 px-0 whitespace-nowrap">
         {nav.map((item) => (
           <li>
@@ -50,13 +59,16 @@ const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost'
 
     <div class="ml-auto flex items-center gap-2">
       {showThemeToggle && <HWioThemeToggle label={labels.theme ?? 'Theme'} />}
-      {languages.length > 1 && <HWioLanguageSwitcher items={languages} label={labels.languages ?? 'Language'} />}
-      <div class="hidden items-center gap-2 lg:flex">
+      {languages.length > 1 && <HWioLanguageSwitcher items={languages} label={labels.languages ?? 'Language'} variant={languageVariant} />}
+      <div class={bp.ctas}>
         {ctas.map((cta) => (
-          <HWioButton href={cta.href} external={cta.external} variant={CTA_VARIANT[cta.variant ?? 'primary']} size="sm" track={cta.track ?? { id: 'header-cta', location: 'header' }}>{cta.label}</HWioButton>
+          <HWioButton href={cta.href} external={cta.external} variant={CTA_VARIANT[cta.variant ?? 'primary']} size="sm" track={cta.track ?? { id: 'header-cta', location: 'header' }} class={cta.icon ? '2xl:px-4 px-2.5' : ''} aria-label={cta.icon ? cta.label : undefined} title={cta.icon ? cta.label : undefined}>
+            {cta.icon && <HWioIcon name={cta.icon as 'bag'} size="sm" />}
+            {cta.icon ? <span class="hidden 2xl:inline">{cta.label}</span> : cta.label}
+          </HWioButton>
         ))}
       </div>
-      <div class="drawer drawer-end w-auto lg:hidden">
+      <div class={bp.drawer}>
         <input id={id} type="checkbox" class="drawer-toggle" />
         <div class="drawer-content">
           <label for={id} class="btn btn-ghost btn-square drawer-button" aria-label={labels.menu} aria-controls={`${id}-panel`} aria-expanded="false" tabindex="0" role="button">

package/src/components/HWioLogoStrip.astro

@@ -1,12 +1,13 @@
 ---
 /** Customer/partner logos as a static row or an infinite marquee (paused on hover, static under reduced motion). */
 import type { HWioTone } from '../types';
-interface Logo { src: string; alt: string; href?: string; width: number; height: number; class?: string }
+interface Logo { src: string; alt: string; href?: string; width: number; height: number; class?: string; /** Rendered height step (default md = 28 px); logos with thin marks go up, dense ones down. */ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' }
 interface Props { id?: string; logos: Logo[]; label?: string; marquee?: boolean; grey?: boolean; tone?: HWioTone; class?: string }
 const { id, logos, label, marquee = true, grey = true, tone = 'base', class: className = '' } = Astro.props;
 const TONE = { base: 'bg-base-100', alt: 'bg-base-200', neutral: 'bg-neutral text-neutral-content' } as const;
 const FADE = { base: 'from-base-100', alt: 'from-base-200', neutral: 'from-neutral' } as const;
 const groups = marquee ? [0, 1, 2, 3] : [0];
+const SIZE = { xs: 'h-6', sm: 'h-7', md: 'h-7', lg: 'h-10', xl: 'h-12' } as const;
 ---
 <section id={id} class:list={['overflow-hidden border-y border-base-300 py-10', TONE[tone], className]}>
   {label && <div class="container"><p class="mb-8 text-center text-sm font-semibold opacity-70">{label}</p></div>}
@@ -17,7 +18,7 @@ const groups = marquee ? [0, 1, 2, 3] : [0];
       {groups.map((g) => (
         <div class="flex shrink-0 items-center" aria-hidden={g > 0 ? 'true' : undefined}>
           {logos.map((logo) => {
-            const img = <img src={logo.src} alt={logo.alt} width={logo.width} height={logo.height} loading="lazy" decoding="async" class:list={['h-7 w-auto transition-transform duration-300 hover:scale-105', grey ? 'hwio-logo-grey' : '', logo.class]} />;
+            const img = <img src={logo.src} alt={logo.alt} width={logo.width} height={logo.height} loading="lazy" decoding="async" class:list={[SIZE[logo.size ?? 'md'], 'w-auto transition-transform duration-300 hover:scale-105', grey ? 'hwio-logo-grey' : '', logo.class]} />;
             return logo.href
               ? <a href={logo.href} target="_blank" rel="noopener noreferrer" class="mx-8" tabindex={g > 0 ? -1 : undefined}>{img}</a>
               : <span class="mx-8">{img}</span>;

package/src/components/HWioPricingTiers.astro

@@ -2,7 +2,7 @@
 import type { HWioCta } from '../types';
 import HWioButton from './HWioButton.astro';
 import HWioIcon from './HWioIcon.astro';
-interface Tier { name: string; price?: string; description?: string; features: string[]; cta?: HWioCta; featured?: boolean; badge?: string }
+interface Tier { eyebrow?: string; name: string; price?: string; pricePrefix?: string; period?: string; description?: string; features: string[]; cta?: HWioCta; featured?: boolean; badge?: string }
 interface Props { tiers: Tier[]; class?: string }
 const { tiers, class: className = '' } = Astro.props;
 const COLS = { 1: 'grid gap-6', 2: 'grid gap-6 md:grid-cols-2', 3: 'grid gap-6 md:grid-cols-3', 4: 'grid gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
@@ -12,11 +12,18 @@ const cols = (Math.min(Math.max(tiers.length, 1), 4) as 1 | 2 | 3 | 4);
   {tiers.map((tier) => (
     <article class:list={['card card-border bg-base-100 h-full', tier.featured ? 'border-primary shadow-lg' : '']}>
       <div class="card-body">
+        {tier.eyebrow && <p class="hwio-kicker">{tier.eyebrow}</p>}
         <div class="flex items-start justify-between gap-2">
           <h3 class="card-title text-[1.375rem]">{tier.name}</h3>
-          {tier.badge && <span class="badge badge-primary">{tier.badge}</span>}
+          {tier.badge && <span class="badge badge-primary shrink-0 whitespace-nowrap">{tier.badge}</span>}
         </div>
-        {tier.price && <p class="text-3xl font-bold">{tier.price}</p>}
+        {tier.price && (
+          <p class="flex flex-wrap items-baseline gap-x-1.5">
+            {tier.pricePrefix && <span class="hwio-muted text-sm">{tier.pricePrefix}</span>}
+            <span class="text-3xl font-bold tracking-tight">{tier.price}</span>
+            {tier.period && <span class="hwio-muted text-sm">{tier.period}</span>}
+          </p>
+        )}
         {tier.description && <p class="opacity-80">{tier.description}</p>}
         <ul class="my-4 space-y-2 text-sm">
           {tier.features.map((f) => <li class="flex items-start gap-2"><HWioIcon name="check" size="sm" class="mt-0.5 shrink-0 text-accent" /><span>{f}</span></li>)}

package/src/types.ts

@@ -24,6 +24,8 @@ export interface HWioMedia {
 export interface HWioCta extends HWioLinkItem {
   /** Visual weight; primary is the DaisyUI btn-primary fill. */
   variant?: 'primary' | 'secondary' | 'ghost';
+  /** HWioIcon name. In HWioHeader a CTA with an icon collapses to the icon alone below 2xl (label as aria-label). */
+  icon?: string;
 }
 
 export type HWioTone = 'base' | 'alt' | 'neutral';