@barkajs/barka 0.1.0

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

@@ -0,0 +1,81 @@
+/** @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 LogoSlider: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  if (settings.hidden) return null;
+
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.medium;
+  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; url?: 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-10 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+
+        <div class="flex flex-wrap items-center justify-center gap-8 sm:gap-12">
+          {items.map((item) => {
+            const img = (
+              <img
+                src={item.src}
+                alt={item.alt ?? ''}
+                class="h-10 max-w-[140px] object-contain grayscale transition-all duration-200 hover:grayscale-0"
+                loading="lazy"
+              />
+            );
+
+            return item.url ? (
+              <a href={item.url} target="_blank" rel="noopener noreferrer">
+                {img}
+              </a>
+            ) : (
+              <div>{img}</div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default LogoSlider;

package/starters/blank/themes/starter/components/logo-slider/schema.yaml

@@ -0,0 +1,23 @@
+label: Logo Slider
+icon: layers
+description: "Infinite-scroll logo marquee with grayscale-to-color hover effect."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  items:
+    type: repeater
+    label: Logos
+    fields:
+      image:
+        type: media
+        label: Logo Image
+        required: true
+      alt:
+        type: text
+        label: Company Name
+        required: true
+      url:
+        type: text
+        label: Link URL

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

@@ -0,0 +1,141 @@
+/** @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-gray-50 text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const Pricing: 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 plans: Array<{
+    name: string;
+    price: string;
+    period?: string;
+    description?: string;
+    features?: string;
+    cta_text?: string;
+    cta_url?: string;
+    highlighted?: boolean;
+  }> = data.plans ?? [];
+
+  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 cols = plans.length <= 2 ? 'sm:grid-cols-2' : 'sm:grid-cols-2 lg:grid-cols-3';
+
+  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 ${cols}`}>
+          {plans.map((plan) => {
+            const featureList = (plan.features ?? '')
+              .split('\n')
+              .map((f) => f.trim())
+              .filter(Boolean);
+            const isHighlighted = plan.highlighted;
+
+            return (
+              <div
+                class={`relative flex flex-col rounded-2xl border p-8 shadow-sm transition-shadow hover:shadow-md ${
+                  isHighlighted
+                    ? 'border-2 scale-105'
+                    : 'border-gray-200 bg-white'
+                }`}
+                style={isHighlighted ? { borderColor: primaryColor, backgroundColor: '#fff' } : undefined}
+              >
+                {isHighlighted && (
+                  <div
+                    class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full px-4 py-1 text-xs font-semibold text-white"
+                    style={{ backgroundColor: primaryColor }}
+                  >
+                    {data.highlighted_label ?? 'Popular'}
+                  </div>
+                )}
+
+                <h3 class="text-lg font-semibold text-gray-900">{plan.name}</h3>
+
+                <div class="mt-4 flex items-baseline">
+                  <span class="text-4xl font-extrabold text-gray-900">{plan.price}</span>
+                  {plan.period && (
+                    <span class="ml-1 text-sm text-gray-500">/{plan.period}</span>
+                  )}
+                </div>
+
+                {plan.description && (
+                  <p class="mt-3 text-sm text-gray-500">{plan.description}</p>
+                )}
+
+                {featureList.length > 0 && (
+                  <ul class="mt-6 flex-1 space-y-3">
+                    {featureList.map((feature) => (
+                      <li class="flex items-start gap-2 text-sm text-gray-600">
+                        <svg class="mt-0.5 h-4 w-4 flex-shrink-0" style={{ color: primaryColor }} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                        </svg>
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+
+                {plan.cta_text && (
+                  <a
+                    href={plan.cta_url ?? '#'}
+                    class={`mt-8 block rounded-lg py-3 text-center text-sm font-semibold transition-transform hover:scale-105 ${
+                      isHighlighted ? 'text-white shadow-lg' : 'border border-gray-300 text-gray-900 hover:border-gray-400'
+                    }`}
+                    style={isHighlighted ? { backgroundColor: primaryColor } : undefined}
+                  >
+                    {plan.cta_text}
+                  </a>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Pricing;

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

@@ -0,0 +1,44 @@
+label: Pricing
+icon: credit-card
+description: "Pricing plans grid with features, highlighted plan, and CTAs."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  subheading:
+    type: text
+    label: Subheading
+  plans:
+    type: repeater
+    label: Plans
+    fields:
+      name:
+        type: text
+        label: Plan Name
+        required: true
+      price:
+        type: text
+        label: Price
+        required: true
+      period:
+        type: text
+        label: Period
+        default: "/month"
+      description:
+        type: text
+        label: Description
+      features:
+        type: textarea
+        label: "Features (one per line)"
+      highlighted:
+        type: boolean
+        label: Highlighted
+        default: false
+      cta_text:
+        type: text
+        label: Button Text
+        default: "Choose Plan"
+      cta_url:
+        type: text
+        label: Button URL

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

@@ -0,0 +1,26 @@
+label: Testimonials
+icon: quote
+description: "Featured testimonial with side quotes and author details."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  items:
+    type: repeater
+    label: Testimonials
+    fields:
+      quote:
+        type: textarea
+        label: Quote
+        required: true
+      author:
+        type: text
+        label: Author Name
+        required: true
+      role:
+        type: text
+        label: Author Role
+      avatar:
+        type: media
+        label: Avatar

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

@@ -0,0 +1,100 @@
+/** @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-gray-50 text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const Testimonials: 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<{
+    quote: string;
+    author: string;
+    role?: string;
+    avatar?: 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 cols = items.length <= 2 ? 'sm:grid-cols-2' : 'sm:grid-cols-2 lg:grid-cols-3';
+
+  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-8 ${cols}`}>
+          {items.map((item) => (
+            <div class="relative rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+              <div class="mb-4 text-4xl leading-none opacity-20" style={{ color: primaryColor }}>"</div>
+              <blockquote class="mb-6 text-base italic leading-relaxed text-gray-600">
+                {item.quote}
+              </blockquote>
+              <div class="flex items-center gap-3">
+                {item.avatar ? (
+                  <img
+                    src={item.avatar}
+                    alt={item.author}
+                    class="h-10 w-10 rounded-full object-cover"
+                    loading="lazy"
+                  />
+                ) : (
+                  <div
+                    class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-bold text-white"
+                    style={{ backgroundColor: primaryColor }}
+                  >
+                    {item.author.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <div>
+                  <div class="text-sm font-semibold text-gray-900">{item.author}</div>
+                  {item.role && (
+                    <div class="text-xs text-gray-500">{item.role}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Testimonials;

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

@@ -0,0 +1,12 @@
+label: Text
+icon: text
+description: "Rich text block with optional heading."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  body:
+    type: textarea
+    label: Body
+    required: true

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

@@ -0,0 +1,62 @@
+/** @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 Text: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.medium;
+  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;
+  }
+
+  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-6 text-3xl font-bold tracking-tight">
+            {data.heading}
+          </h2>
+        )}
+        {data.body && (
+          <div
+            class="prose prose-lg max-w-none"
+            dangerouslySetInnerHTML={{ __html: data.body }}
+          />
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Text;

package/starters/blank/themes/starter/components/text-with-image/schema.yaml

@@ -0,0 +1,30 @@
+label: Text with Image
+icon: image
+description: "Two-column text and image with optional CTA."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  body:
+    type: textarea
+    label: Body
+    required: true
+  image:
+    type: media
+    label: Image
+    required: true
+  image_position:
+    type: select
+    label: Image Position
+    options: [left, right]
+    default: right
+  image_alt:
+    type: text
+    label: Image Alt Text
+  cta_text:
+    type: text
+    label: Button Text
+  cta_url:
+    type: text
+    label: Button URL

package/starters/blank/themes/starter/components/text-with-image/text-with-image.tsx

@@ -0,0 +1,86 @@
+/** @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 TextWithImage: 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 reversed = data.image_position === 'left';
+
+  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} grid items-center gap-12 md:grid-cols-2`}>
+        <div class={reversed ? 'order-2' : ''}>
+          {data.heading && (
+            <h2 class="mb-4 text-3xl font-bold tracking-tight">
+              {data.heading}
+            </h2>
+          )}
+          {data.body && (
+            <div
+              class="prose prose-lg max-w-none"
+              dangerouslySetInnerHTML={{ __html: data.body }}
+            />
+          )}
+          {data.cta_text && (
+            <div class="mt-6">
+              <a
+                href={data.cta_url ?? '#'}
+                class="inline-block rounded-lg px-6 py-2.5 text-sm font-semibold text-white transition-transform hover:scale-105"
+                style={{ backgroundColor: primaryColor }}
+              >
+                {data.cta_text}
+              </a>
+            </div>
+          )}
+        </div>
+        <div class={reversed ? 'order-1' : ''}>
+          {data.image && (
+            <img
+              src={data.image}
+              alt={data.image_alt ?? ''}
+              class="rounded-xl shadow-lg"
+              loading="lazy"
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TextWithImage;

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

@@ -0,0 +1,19 @@
+label: Video Embed
+icon: play-circle
+description: "YouTube or Vimeo video embed with optional heading and caption."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  video_url:
+    type: text
+    label: "Video URL (YouTube/Vimeo)"
+    required: true
+  caption:
+    type: text
+    label: Caption
+  autoplay:
+    type: boolean
+    label: Autoplay
+    default: false