@barkajs/barka 0.1.0

package/starters/blank/themes/starter/components/cta/cta.tsx

@@ -0,0 +1,57 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-8',
+  medium: 'py-16',
+  large: 'py-24',
+  xlarge: 'py-32',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-4xl mx-auto px-6',
+  wide: 'max-w-6xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const Cta: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+
+  return (
+    <section
+      class={`${spacing} text-white ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={{ backgroundColor: primaryColor }}
+    >
+      <div class={`${width} text-center`}>
+        {data.heading && (
+          <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+        {data.description && (
+          <p class="mt-4 text-lg opacity-90">
+            {data.description}
+          </p>
+        )}
+        {data.button_text && (
+          <div class="mt-8">
+            <a
+              href={data.button_url ?? '#'}
+              class="inline-block rounded-lg bg-white px-8 py-3 text-sm font-semibold shadow-lg transition-transform hover:scale-105"
+              style={{ color: primaryColor }}
+            >
+              {data.button_text}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Cta;

package/starters/blank/themes/starter/components/cta/schema.yaml

@@ -0,0 +1,30 @@
+label: Call to Action
+icon: megaphone
+description: "Prominent call-to-action with optional eyebrow, primary and secondary buttons."
+status: stable
+fields:
+  eyebrow:
+    type: text
+    label: Eyebrow
+  heading:
+    type: text
+    label: Heading
+    required: true
+  body:
+    type: textarea
+    label: Body Text
+  description:
+    type: textarea
+    label: Description
+  button_text:
+    type: text
+    label: Button Text
+  button_url:
+    type: text
+    label: Button URL
+  secondary_text:
+    type: text
+    label: Secondary Button Text
+  secondary_url:
+    type: text
+    label: Secondary Button URL

package/starters/blank/themes/starter/components/faq/faq.tsx

@@ -0,0 +1,77 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-8',
+  medium: 'py-16',
+  large: 'py-24',
+  xlarge: 'py-32',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-3xl mx-auto px-6',
+  wide: 'max-w-5xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const bgMap: Record<string, string> = {
+  light: 'bg-white text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const Faq: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  if (settings.hidden) return null;
+
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const bg = bgMap[settings.background] ?? bgMap.light;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+  const items: Array<{ question: string; answer: string }> = data.items ?? [];
+
+  const bgStyle: Record<string, string> = {};
+  if (settings.background === 'primary') {
+    bgStyle.backgroundColor = primaryColor;
+  } else if (settings.background === 'custom' && settings.background_color) {
+    bgStyle.backgroundColor = settings.background_color;
+  }
+
+  const isDark = settings.background === 'dark' || settings.background === 'primary';
+
+  return (
+    <section
+      class={`${spacing} ${bg} ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={width}>
+        {data.heading && (
+          <h2 class="mb-12 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+
+        <div class="divide-y divide-gray-200">
+          {items.map((item) => (
+            <details class="group">
+              <summary
+                class={`flex cursor-pointer items-center justify-between py-5 text-left text-lg font-medium transition-colors ${isDark ? 'hover:opacity-80' : 'hover:text-gray-600'}`}
+              >
+                {item.question}
+                <span class="ml-4 flex-shrink-0 text-xl transition-transform group-open:rotate-45">+</span>
+              </summary>
+              <div class={`pb-5 leading-relaxed ${isDark ? 'opacity-80' : 'text-gray-600'}`}>
+                {item.answer}
+              </div>
+            </details>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Faq;

package/starters/blank/themes/starter/components/faq/schema.yaml

@@ -0,0 +1,20 @@
+label: FAQ
+icon: help-circle
+description: "Question and answer list."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  items:
+    type: repeater
+    label: Questions
+    fields:
+      question:
+        type: text
+        label: Question
+        required: true
+      answer:
+        type: textarea
+        label: Answer
+        required: true

package/starters/blank/themes/starter/components/features/features.tsx

@@ -0,0 +1,82 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-8',
+  medium: 'py-16',
+  large: 'py-24',
+  xlarge: 'py-32',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-6xl mx-auto px-6',
+  wide: 'max-w-7xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const bgMap: Record<string, string> = {
+  light: 'bg-white text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const Features: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const bg = bgMap[settings.background] ?? bgMap.light;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+  const items: Array<{ icon?: string; title: string; description?: string }> =
+    data.items ?? [];
+
+  const bgStyle: Record<string, string> = {};
+  if (settings.background === 'primary') {
+    bgStyle.backgroundColor = primaryColor;
+  } else if (settings.background === 'custom' && settings.background_color) {
+    bgStyle.backgroundColor = settings.background_color;
+  }
+
+  return (
+    <section
+      class={`${spacing} ${bg} ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={width}>
+        {data.heading && (
+          <h2 class="mb-4 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+        {data.subheading && (
+          <p class="mb-12 text-center text-lg opacity-70">
+            {data.subheading}
+          </p>
+        )}
+
+        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {items.map((item) => (
+            <div class="rounded-xl border border-gray-100 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
+              {item.icon && (
+                <div
+                  class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg text-2xl text-white"
+                  style={{ backgroundColor: primaryColor }}
+                >
+                  {item.icon}
+                </div>
+              )}
+              <h3 class="mb-2 text-lg font-semibold text-gray-900">{item.title}</h3>
+              {item.description && (
+                <p class="text-sm leading-relaxed text-gray-600">{item.description}</p>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Features;

package/starters/blank/themes/starter/components/features/schema.yaml

@@ -0,0 +1,19 @@
+label: Features
+icon: grid
+description: "Grid of feature cards with icons, titles, and descriptions."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  subheading:
+    type: textarea
+    label: Subheading
+  columns:
+    type: select
+    label: Columns
+    options: ["2", "3", "4"]
+    default: "3"
+  items:
+    type: textarea
+    label: Feature Items (YAML)

package/starters/blank/themes/starter/components/form/form.tsx

@@ -0,0 +1,126 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-8',
+  medium: 'py-16',
+  large: 'py-24',
+  xlarge: 'py-32',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-2xl mx-auto px-6',
+  wide: 'max-w-4xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const bgMap: Record<string, string> = {
+  light: 'bg-white text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const Form: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  if (settings.hidden) return null;
+
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const bg = bgMap[settings.background] ?? bgMap.light;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+
+  const bgStyle: Record<string, string> = {};
+  if (settings.background === 'primary') {
+    bgStyle.backgroundColor = primaryColor;
+  } else if (settings.background === 'custom' && settings.background_color) {
+    bgStyle.backgroundColor = settings.background_color;
+  }
+
+  const isDark = settings.background === 'dark' || settings.background === 'primary';
+  const inputClasses = isDark
+    ? 'w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder-white/50 focus:border-white/40 focus:outline-none focus:ring-1 focus:ring-white/40'
+    : 'w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500';
+
+  return (
+    <section
+      class={`${spacing} ${bg} ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={width}>
+        {data.heading && (
+          <h2 class="mb-4 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+        {data.description && (
+          <p class={`mb-10 text-center text-lg ${isDark ? 'opacity-80' : 'text-gray-600'}`}>
+            {data.description}
+          </p>
+        )}
+
+        <form
+          action={data.action_url ?? '#'}
+          method="post"
+          class="space-y-6"
+        >
+          <div>
+            <label for="form-name" class="mb-1 block text-sm font-medium">Name</label>
+            <input
+              id="form-name"
+              name="name"
+              type="text"
+              required
+              placeholder="Your name"
+              class={inputClasses}
+            />
+          </div>
+
+          <div>
+            <label for="form-email" class="mb-1 block text-sm font-medium">Email</label>
+            <input
+              id="form-email"
+              name="email"
+              type="email"
+              required
+              placeholder="you@example.com"
+              class={inputClasses}
+            />
+          </div>
+
+          <div>
+            <label for="form-message" class="mb-1 block text-sm font-medium">Message</label>
+            <textarea
+              id="form-message"
+              name="message"
+              rows={5}
+              required
+              placeholder="How can we help?"
+              class={inputClasses}
+            />
+          </div>
+
+          <div class="text-center">
+            <button
+              type="submit"
+              class="inline-block rounded-lg px-8 py-3 text-sm font-semibold text-white shadow-lg transition-transform hover:scale-105"
+              style={{ backgroundColor: primaryColor }}
+            >
+              {data.button_text ?? 'Send message'}
+            </button>
+          </div>
+        </form>
+
+        {data.success_message && (
+          <div class="mt-4 hidden text-center text-sm text-green-600" data-form-success>
+            {data.success_message}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Form;

package/starters/blank/themes/starter/components/form/schema.yaml

@@ -0,0 +1,18 @@
+label: Contact Form
+icon: mail
+description: "Contact form with name, email, company, and message fields."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  description:
+    type: textarea
+    label: Description
+  action_url:
+    type: text
+    label: Form Action URL
+  success_message:
+    type: text
+    label: Success Message
+    default: "Thank you! We'll be in touch."

package/starters/blank/themes/starter/components/gallery/gallery.tsx

@@ -0,0 +1,85 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-8',
+  medium: 'py-16',
+  large: 'py-24',
+  xlarge: 'py-32',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-6xl mx-auto px-6',
+  wide: 'max-w-7xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const bgMap: Record<string, string> = {
+  light: 'bg-white text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const colsMap: Record<string, string> = {
+  '2': 'sm:grid-cols-2',
+  '3': 'sm:grid-cols-2 lg:grid-cols-3',
+  '4': 'sm:grid-cols-2 lg:grid-cols-4',
+};
+
+const Gallery: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  if (settings.hidden) return null;
+
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const bg = bgMap[settings.background] ?? bgMap.light;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+  const items: Array<{ src: string; alt?: string; caption?: string }> =
+    data.items ?? [];
+  const columns = String(data.columns ?? '3');
+
+  const bgStyle: Record<string, string> = {};
+  if (settings.background === 'primary') {
+    bgStyle.backgroundColor = primaryColor;
+  } else if (settings.background === 'custom' && settings.background_color) {
+    bgStyle.backgroundColor = settings.background_color;
+  }
+
+  return (
+    <section
+      class={`${spacing} ${bg} ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={width}>
+        {data.heading && (
+          <h2 class="mb-12 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+
+        <div class={`grid gap-4 ${colsMap[columns] ?? colsMap['3']}`}>
+          {items.map((item) => (
+            <figure class="group overflow-hidden rounded-lg">
+              <img
+                src={item.src}
+                alt={item.alt ?? ''}
+                class="aspect-square w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                loading="lazy"
+              />
+              {item.caption && (
+                <figcaption class="mt-2 text-center text-sm opacity-60">
+                  {item.caption}
+                </figcaption>
+              )}
+            </figure>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Gallery;

package/starters/blank/themes/starter/components/gallery/schema.yaml

@@ -0,0 +1,27 @@
+label: Gallery
+icon: grid
+description: "Responsive image grid with captions and alt text."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  columns:
+    type: select
+    label: Columns
+    options: ["2", "3", "4"]
+    default: "3"
+  items:
+    type: repeater
+    label: Images
+    fields:
+      image:
+        type: media
+        label: Image
+        required: true
+      caption:
+        type: text
+        label: Caption
+      alt:
+        type: text
+        label: Alt Text

package/starters/blank/themes/starter/components/hero/hero.tsx

@@ -0,0 +1,77 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-8',
+  medium: 'py-16',
+  large: 'py-24',
+  xlarge: 'py-32',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-5xl mx-auto px-6',
+  wide: 'max-w-7xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const bgMap: Record<string, string> = {
+  light: 'bg-white text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const Hero: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const bg = bgMap[settings.background] ?? bgMap.light;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+
+  const bgStyle: Record<string, string> = {};
+  if (settings.background === 'primary') {
+    bgStyle.backgroundColor = primaryColor;
+  } else if (settings.background === 'custom' && settings.background_color) {
+    bgStyle.backgroundColor = settings.background_color;
+  }
+  if (settings.background_image) {
+    bgStyle.backgroundImage = `url(${settings.background_image})`;
+    bgStyle.backgroundSize = 'cover';
+    bgStyle.backgroundPosition = 'center';
+  }
+
+  return (
+    <section
+      class={`${spacing} ${bg} ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={`${width} text-center`}>
+        {data.heading && (
+          <h1 class="text-4xl font-bold tracking-tight sm:text-6xl">
+            {data.heading}
+          </h1>
+        )}
+        {data.subheading && (
+          <p class="mt-6 text-lg leading-relaxed opacity-80 sm:text-xl">
+            {data.subheading}
+          </p>
+        )}
+        {data.cta_text && (
+          <div class="mt-10">
+            <a
+              href={data.cta_url ?? '#'}
+              class="inline-block rounded-lg px-8 py-3 text-sm font-semibold text-white shadow-lg transition-transform hover:scale-105"
+              style={{ backgroundColor: primaryColor }}
+            >
+              {data.cta_text}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Hero;

package/starters/blank/themes/starter/components/hero/schema.yaml

@@ -0,0 +1,26 @@
+label: Hero
+icon: star
+description: "Full-width hero banner with heading, subheading, CTA buttons."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+    required: true
+  subheading:
+    type: textarea
+    label: Subheading
+  image:
+    type: media
+    label: Background Image
+  cta_text:
+    type: text
+    label: CTA Button Text
+  cta_url:
+    type: text
+    label: CTA Button URL
+  alignment:
+    type: select
+    label: Alignment
+    options: [left, center, right]
+    default: center

package/starters/blank/themes/starter/components/logo-slider/logo-slider.css

@@ -0,0 +1,21 @@
+.logo-marquee-wrap {
+  overflow: hidden;
+  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+}
+
+.logo-marquee {
+  display: flex;
+  align-items: center;
+  width: max-content;
+  animation: marquee 30s linear infinite;
+}
+
+.logo-marquee:hover {
+  animation-play-state: paused;
+}
+
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}