@hubpav/hwio-ui 0.1.5 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.1.5",
+  "version": "0.3.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.1.5",
-    "@hubpav/hwio-web-runtime": "0.1.5",
-    "@hubpav/hwio-web-worker": "0.1.5",
+    "@hubpav/hwio-brand": "0.3.0",
+    "@hubpav/hwio-web-runtime": "0.3.0",
+    "@hubpav/hwio-web-worker": "0.3.0",
     "daisyui": "5.7.28"
   },
   "peerDependencies": {

package/src/components/HWioHeader.astro

@@ -17,10 +17,17 @@ 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';
   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', 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 +36,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>
@@ -51,12 +58,15 @@ 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">
+      <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; 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,6 +12,7 @@ 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>}

package/src/styles/styles.css

@@ -226,20 +226,3 @@
 .btn-lg { height: var(--size); --fontsize: 0.9375rem; padding-inline: 1.75rem; }
 .btn-square, .btn-circle { padding-inline: 0; }
 .card .card-body { --card-p: 2rem; }
-
-/* Dark themes keep the navy primary for filled buttons (white on navy: 11.6:1), but navy text is
-   1.3-1.7:1 on the night surfaces, so outline and ghost primary buttons take the light brand blue
-   there (5.3-6.5:1) and fill with it on hover, dark text on top. Both dark cases: an explicit
-   data-theme ending in -dark, and the system preference with no stored choice (DaisyUI's prefersdark). */
-[data-theme$="-dark"] .btn-outline.btn-primary,
-[data-theme$="-dark"] .btn-ghost.btn-primary {
-  --btn-color: var(--color-info);
-  --btn-fg: var(--color-base-100);
-}
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) .btn-outline.btn-primary,
-  :root:not([data-theme]) .btn-ghost.btn-primary {
-    --btn-color: var(--color-info);
-    --btn-fg: var(--color-base-100);
-  }
-}

package/src/styles/themes/hwio-dark.css

@@ -8,8 +8,8 @@
   --color-base-200: #1a1a22;
   --color-base-300: #23232f;
   --color-base-content: #e7e7ee;
-  --color-primary: #06367a;
-  --color-primary-content: #ffffff;
+  --color-primary: #009cfa;
+  --color-primary-content: #0f0f14;
   --color-secondary: #016ad4;
   --color-secondary-content: #ffffff;
   --color-accent: #f43f5e;

package/src/styles/themes/hwio-forestry-dark.css

@@ -8,8 +8,8 @@
   --color-base-200: #1a1a22;
   --color-base-300: #23232f;
   --color-base-content: #e7e7ee;
-  --color-primary: #2B7036;
-  --color-primary-content: #ffffff;
+  --color-primary: #5aa864;
+  --color-primary-content: #0f0f14;
   --color-secondary: #016ad4;
   --color-secondary-content: #ffffff;
   --color-accent: #5aa864;

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';