southpaw 0.2.7

package/ui/badge.tsx

@@ -0,0 +1,28 @@
+import { Badge, BadgeProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = BadgeProps;
+const Component = create_component({
+  name: "Badge",
+  description: "The badge UI element",
+  props: {
+    color: "dark",
+    children: "A badge",
+  } as Props,
+  propsDef: {
+    color: {
+      type: "color",
+      label: "Background color",
+    },
+    c: {
+      type: "color",
+      label: "Text color",
+    },
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Badge {...other}>{children}</Badge>;
+  },
+});
+export default Component;

package/ui/blockquote.tsx

@@ -0,0 +1,15 @@
+import { Blockquote, BlockquoteProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = BlockquoteProps;
+const Component = create_component({
+  name: "Blockquote",
+  description: "The blockquote UI element",
+  props: {} as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Blockquote {...other}>{children}</Blockquote>;
+  },
+});
+export default Component;

package/ui/blocks/faq.tsx

@@ -0,0 +1,145 @@
+import { create_component } from "southpaw/modules/component";
+import { UI } from "..";
+
+type FAQItem = {
+  id: string;
+  question: string;
+  answer: string;
+};
+
+type Props = {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  questions?: FAQItem[];
+  backgroundColor?: string;
+  textColor?: string;
+  accentColor?: string;
+  py?: number;
+};
+
+const Component = create_component({
+  name: "FAQ",
+  description:
+    "A section for frequently asked questions with collapsible answers",
+  props: {
+    title: "Frequently Asked Questions",
+    subtitle: "FAQ",
+    description: "Get answers to common questions about using Southpaw.",
+    accentColor: "primary",
+    py: 120,
+    questions: [
+      {
+        id: "1",
+        question: "How do I get started with Southpaw?",
+        answer:
+          "Getting started with Southpaw is easy. Just follow our quick start guide to set up your environment, and you'll be building UI blocks in minutes.",
+      },
+      {
+        id: "2",
+        question: "Does it support custom themes?",
+        answer:
+          "Absolutely! Southpaw is built with flexibility in mind. You can easily customize themes, colors, and typography to perfectly match your brand's identity.",
+      },
+      {
+        id: "3",
+        question: "Is it suitable for production applications?",
+        answer:
+          "Yes, Southpaw is designed for high-performance production workloads. It leverages Next.js and optimized UI components to ensure your app is both fast and robust.",
+      },
+      {
+        id: "4",
+        question: "How do I contribute to Southpaw?",
+        answer:
+          "We welcome contributions from the community! Check out our contribution guide on GitHub to learn how you can help improve Southpaw.",
+      },
+    ],
+  } as Props,
+  propsDef: {
+    title: { type: "text", label: "Main Title" },
+    subtitle: { type: "text", label: "Subtitle" },
+    description: { type: "text", label: "Description" },
+    backgroundColor: { type: "color", label: "Background Color" },
+    textColor: { type: "color", label: "Text Color" },
+    accentColor: { type: "color", label: "Accent Color" },
+    py: { type: "number", label: "Vertical Padding" },
+    questions: { type: "list-text", label: "Questions (JSON List)" } as any,
+  },
+  render() {
+    const {
+      title,
+      subtitle,
+      description,
+      questions,
+      backgroundColor,
+      textColor,
+      accentColor,
+      py,
+    } = this.props as Required<Props>;
+
+    return (
+      <UI.box py={py} px={40} style={{ backgroundColor }}>
+        <UI.container size="sm">
+          <UI.flex direction="column" align="center" gap={16} mb={80}>
+            {subtitle && (
+              <UI.badge
+                variant="light"
+                color={accentColor}
+                radius="xl"
+                size="lg"
+              >
+                {subtitle}
+              </UI.badge>
+            )}
+            <UI.title
+              text={title}
+              order={2}
+              fz={42}
+              fw={800}
+              ta="center"
+              c={textColor}
+            />
+            <UI.text
+              text={description}
+              size="lg"
+              ta="center"
+              maw={700}
+              c={textColor}
+              opacity={0.7}
+            />
+          </UI.flex>
+
+          <UI.accordion
+            variant="separated"
+            radius="xl"
+            mb="xl"
+            items={questions?.map((item) => ({
+              id: item.id,
+              label: (
+                <UI.text
+                  text={item.question}
+                  fw={600}
+                  fz="lg"
+                  p={12}
+                  c={textColor}
+                />
+              ),
+              content: (
+                <UI.text
+                  text={item.answer}
+                  fz="md"
+                  p={12}
+                  lh={1.6}
+                  opacity={0.8}
+                  c={textColor}
+                />
+              ),
+            }))}
+          />
+        </UI.container>
+      </UI.box>
+    );
+  },
+});
+
+export default Component;

package/ui/blocks/features.tsx

@@ -0,0 +1,167 @@
+import { create_component } from "southpaw/modules/component";
+import { UI } from "..";
+
+type FeatureItem = {
+  title: string;
+  description: string;
+  icon: string;
+};
+
+type Props = {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  features?: FeatureItem[];
+  columns?: number;
+  backgroundColor?: string;
+  textColor?: string;
+  iconColor?: string;
+  py?: number;
+};
+
+const Component = create_component({
+  name: "Features",
+  description: "A premium features grid with icons and descriptions",
+  props: {
+    title: "Everything you need to build faster",
+    subtitle: "Robust Features",
+    description:
+      "Southpaw provides a complete toolkit for building modern web applications with speed and precision.",
+    columns: 3,
+    py: 120,
+    features: [
+      {
+        title: "Visual Development",
+        description:
+          "Edit your components directly in the browser with real-time preview and property controls.",
+        icon: "visibility",
+      },
+      {
+        title: "TypeScript First",
+        description:
+          "Highly typed API ensures your codebase stays robust and maintainable as it scales.",
+        icon: "code",
+      },
+      {
+        title: "Premium Blocks",
+        description:
+          "Access a library of pre-built, high-quality UI blocks to jumpstart your next project.",
+        icon: "dashboard",
+      },
+      {
+        title: "Performance Optimized",
+        description:
+          "Built on Next.js with automatic code splitting and server-side rendering for peak performance.",
+        icon: "speed",
+      },
+      {
+        title: "Customizable Design",
+        description:
+          "Easily theme your application with our flexible and powerful design system.",
+        icon: "palette",
+      },
+      {
+        title: "Enterprise Ready",
+        description:
+          "Engineered for reliability and security, suitable for projects of any size.",
+        icon: "security",
+      },
+    ],
+  } as Props,
+  propsDef: {
+    title: { type: "text", label: "Main Title" },
+    subtitle: { type: "text", label: "Subtitle" },
+    description: { type: "text", label: "Description" },
+    columns: {
+      type: "number",
+      label: "Columns",
+      min: 2,
+      step: 1,
+      max: 4,
+    },
+    backgroundColor: { type: "color", label: "Background Color" },
+    textColor: { type: "color", label: "Text Color" },
+    iconColor: { type: "color", label: "Icon Color" },
+    py: { type: "number", label: "Vertical Padding" },
+    features: { type: "list-json", label: "Features (JSON List)" },
+  },
+  render() {
+    const {
+      title,
+      subtitle,
+      description,
+      features,
+      columns,
+      backgroundColor,
+      textColor,
+      iconColor,
+      py,
+    } = this.props as Required<Props>;
+
+    return (
+      <UI.box py={py} px={40} style={{ backgroundColor }}>
+        <UI.container size="lg">
+          <UI.flex direction="column" align="center" gap={16} mb={80}>
+            {subtitle && (
+              <UI.badge
+                variant="filled"
+                color={iconColor}
+                radius="xl"
+                size="lg"
+              >
+                {subtitle}
+              </UI.badge>
+            )}
+            <UI.title
+              text={title}
+              order={2}
+              fz={42}
+              fw={800}
+              ta="center"
+              c={textColor}
+              styles={{
+                root: {
+                  textWrap: "wrap",
+                },
+              }}
+            />
+            <UI.text
+              text={description}
+              size="lg"
+              ta="center"
+              maw={700}
+              c={textColor}
+              opacity={0.7}
+            />
+          </UI.flex>
+
+          <UI.simplegrid cols={{ base: 1, sm: 2, md: columns }} spacing={40}>
+            {features?.map((feature, index) => (
+              <UI.flex key={index} gap={20} align="flex-start">
+                <UI.box p={12}>
+                  <UI.icon icon={feature.icon as any} fz={28} />
+                </UI.box>
+                <UI.flex direction="column" gap={8} style={{ flex: 1 }}>
+                  <UI.text
+                    text={feature.title}
+                    fw={700}
+                    fz="lg"
+                    c={textColor}
+                  />
+                  <UI.text
+                    text={feature.description}
+                    c={textColor}
+                    opacity={0.65}
+                    lh={1.5}
+                  />
+                </UI.flex>
+              </UI.flex>
+            ))}
+          </UI.simplegrid>
+        </UI.container>
+      </UI.box>
+    );
+  },
+});
+
+export default Component;

package/ui/blocks/footer.tsx

@@ -0,0 +1,182 @@
+import { create_component } from "southpaw/modules/component";
+import { UI } from "..";
+
+type Link = {
+  label: string;
+  href: string;
+};
+
+type Section = {
+  title: string;
+  links: Link[];
+};
+
+type Props = {
+  companyName?: string;
+  tagline?: string;
+  sections?: Section[];
+  backgroundColor?: string;
+  textColor?: string;
+  accentColor?: string;
+  py?: number;
+};
+
+const Component = create_component({
+  name: "Footer",
+  description:
+    "A premium footer with multiple columns of links and company information",
+  props: {
+    companyName: "Southpaw",
+    tagline:
+      "Build beautiful web experiences faster with our powerful UI framework.",
+    accentColor: "primary",
+    py: 80,
+    sections: [
+      {
+        title: "Product",
+        links: [
+          { label: "Features", href: "#features" },
+          { label: "Pricing", href: "#pricing" },
+          { label: "Documentation", href: "#docs" },
+          { label: "API Reference", href: "#api" },
+        ],
+      },
+      {
+        title: "Company",
+        links: [
+          { label: "About Us", href: "#about" },
+          { label: "Blog", href: "#blog" },
+          { label: "Careers", href: "#careers" },
+          { label: "Contact Us", href: "#contact" },
+        ],
+      },
+      {
+        title: "Legal",
+        links: [
+          { label: "Privacy Policy", href: "#privacy" },
+          { label: "Terms of Service", href: "#terms" },
+          { label: "Cookie Policy", href: "#cookies" },
+        ],
+      },
+    ],
+  } as Props,
+  propsDef: {
+    companyName: { type: "text", label: "Company Name" },
+    tagline: { type: "text", label: "Company Tagline" },
+    backgroundColor: { type: "color", label: "Background Color" },
+    textColor: { type: "color", label: "Text Color" },
+    accentColor: { type: "color", label: "Accent Color" },
+    py: { type: "number", label: "Vertical Padding" },
+    sections: { type: "list-text", label: "Sections (JSON List)" },
+  },
+  render() {
+    const {
+      companyName,
+      tagline,
+      sections,
+      backgroundColor,
+      textColor,
+      accentColor,
+      py,
+    } = this.props as Required<Props>;
+
+    return (
+      <UI.box py={py} px={40} style={{ backgroundColor }}>
+        <UI.container size="lg">
+          <UI.simplegrid cols={{ base: 1, sm: 2, md: 5 }} spacing={40} mb={60}>
+            <UI.flex
+              direction="column"
+              gap={20}
+              style={{ gridColumn: "span 2" }}
+            >
+              <UI.flex align="center" gap={12}>
+                <UI.icon icon="auto_fix_high" c={accentColor} fz={28} />
+                <UI.text
+                  text={companyName}
+                  fw={800}
+                  fz={24}
+                  c={textColor}
+                  lts={-0.5}
+                />
+              </UI.flex>
+              <UI.text
+                text={tagline}
+                fz="sm"
+                opacity={0.6}
+                maw={300}
+                c={textColor}
+              />
+              <UI.flex gap={16} mt={8}>
+                <UI.actionicon variant="subtle" color="gray">
+                  <UI.icon icon={"face"} />
+                </UI.actionicon>
+                <UI.actionicon variant="subtle" color="gray">
+                  <UI.icon icon={"10k"} />
+                </UI.actionicon>
+                <UI.actionicon variant="subtle" color="gray">
+                  <UI.icon icon={"airplay"} />
+                </UI.actionicon>
+              </UI.flex>
+            </UI.flex>
+
+            {sections?.map((section, index) => (
+              <UI.flex key={index} direction="column" gap={20}>
+                <UI.text
+                  text={section.title}
+                  fw={700}
+                  fz="sm"
+                  tt="uppercase"
+                  lts={1.5}
+                  c={textColor}
+                />
+                <UI.flex direction="column" gap={12}>
+                  {section.links.map((link, lIndex) => (
+                    <UI.anchor
+                      key={lIndex}
+                      href={link.href}
+                      fz="sm"
+                      c={textColor}
+                      opacity={0.6}
+                      style={{ transition: "all 0.2s ease" }}
+                    >
+                      {link.label}
+                    </UI.anchor>
+                  ))}
+                </UI.flex>
+              </UI.flex>
+            ))}
+          </UI.simplegrid>
+
+          <UI.divider opacity={0.1} mb={40} />
+
+          <UI.flex
+            justify="space-between"
+            align="center"
+            direction={{ base: "column", sm: "row" }}
+            gap={20}
+          >
+            <UI.text
+              text={`© ${new Date().getFullYear()} ${companyName} Inc. All rights reserved.`}
+              fz="xs"
+              opacity={0.5}
+              c={textColor}
+            />
+            <UI.flex gap={24}>
+              <UI.anchor fz="xs" href="#" opacity={0.5} c={textColor}>
+                Terms
+              </UI.anchor>
+              <UI.anchor fz="xs" href="#" opacity={0.5} c={textColor}>
+                Privacy
+              </UI.anchor>
+              <UI.anchor fz="xs" href="#" opacity={0.5} c={textColor}>
+                Cookies
+              </UI.anchor>
+            </UI.flex>
+          </UI.flex>
+        </UI.container>
+      </UI.box>
+    );
+  },
+});
+
+export default Component;