@rovula/ui 0.1.0 → 0.1.2

package/dist/utils/colors.js

@@ -1,3 +1,372 @@
+/** CSS variable names for theme colors (resolved by data-theme) */
+export const THEME_COLOR_KEYS = {
+    /* ----- Palette: Primary ----- */
+    "primary-5": "--primary-ramps-primary-5",
+    "primary-10": "--primary-ramps-primary-10",
+    "primary-20": "--primary-ramps-primary-20",
+    "primary-30": "--primary-ramps-primary-30",
+    "primary-40": "--primary-ramps-primary-40",
+    "primary-50": "--primary-ramps-primary-50",
+    "primary-60": "--primary-ramps-primary-60",
+    "primary-70": "--primary-ramps-primary-70",
+    "primary-80": "--primary-ramps-primary-80",
+    "primary-90": "--primary-ramps-primary-90",
+    "primary-100": "--primary-ramps-primary-100",
+    "primary-110": "--primary-ramps-primary-110",
+    "primary-120": "--primary-ramps-primary-120",
+    "primary-130": "--primary-ramps-primary-130",
+    "primary-140": "--primary-ramps-primary-140",
+    "primary-150": "--primary-ramps-primary-150",
+    /* ----- Palette: Secondary ----- */
+    "secondary-5": "--secondary-ramps-secondary-5",
+    "secondary-10": "--secondary-ramps-secondary-10",
+    "secondary-20": "--secondary-ramps-secondary-20",
+    "secondary-30": "--secondary-ramps-secondary-30",
+    "secondary-40": "--secondary-ramps-secondary-40",
+    "secondary-50": "--secondary-ramps-secondary-50",
+    "secondary-60": "--secondary-ramps-secondary-60",
+    "secondary-70": "--secondary-ramps-secondary-70",
+    "secondary-80": "--secondary-ramps-secondary-80",
+    "secondary-90": "--secondary-ramps-secondary-90",
+    "secondary-100": "--secondary-ramps-secondary-100",
+    "secondary-110": "--secondary-ramps-secondary-110",
+    "secondary-120": "--secondary-ramps-secondary-120",
+    "secondary-130": "--secondary-ramps-secondary-130",
+    "secondary-140": "--secondary-ramps-secondary-140",
+    "secondary-150": "--secondary-ramps-secondary-150",
+    /* ----- Palette: Tertiary ----- */
+    "tertiary-5": "--tertiary-ramps-tertiary-5",
+    "tertiary-10": "--tertiary-ramps-tertiary-10",
+    "tertiary-20": "--tertiary-ramps-tertiary-20",
+    "tertiary-30": "--tertiary-ramps-tertiary-30",
+    "tertiary-40": "--tertiary-ramps-tertiary-40",
+    "tertiary-50": "--tertiary-ramps-tertiary-50",
+    "tertiary-60": "--tertiary-ramps-tertiary-60",
+    "tertiary-70": "--tertiary-ramps-tertiary-70",
+    "tertiary-80": "--tertiary-ramps-tertiary-80",
+    "tertiary-90": "--tertiary-ramps-tertiary-90",
+    "tertiary-100": "--tertiary-ramps-tertiary-100",
+    "tertiary-110": "--tertiary-ramps-tertiary-110",
+    "tertiary-120": "--tertiary-ramps-tertiary-120",
+    "tertiary-130": "--tertiary-ramps-tertiary-130",
+    "tertiary-140": "--tertiary-ramps-tertiary-140",
+    "tertiary-150": "--tertiary-ramps-tertiary-150",
+    /* ----- Palette: Grey ----- */
+    "grey-5": "--grey-grey-5",
+    "grey-10": "--grey-grey-10",
+    "grey-20": "--grey-grey-20",
+    "grey-30": "--grey-grey-30",
+    "grey-40": "--grey-grey-40",
+    "grey-50": "--grey-grey-50",
+    "grey-60": "--grey-grey-60",
+    "grey-70": "--grey-grey-70",
+    "grey-80": "--grey-grey-80",
+    "grey-90": "--grey-grey-90",
+    "grey-100": "--grey-grey-100",
+    "grey-110": "--grey-grey-110",
+    "grey-120": "--grey-grey-120",
+    "grey-130": "--grey-grey-130",
+    "grey-140": "--grey-grey-140",
+    "grey-150": "--grey-grey-150",
+    /* ----- Palette: Grey2 ----- */
+    "grey2-50": "--grey2-grey2-50",
+    "grey2-100": "--grey2-grey2-100",
+    "grey2-200": "--grey2-grey2-200",
+    "grey2-300": "--grey2-grey2-300",
+    "grey2-400": "--grey2-grey2-400",
+    "grey2-500": "--grey2-grey2-500",
+    "grey2-600": "--grey2-grey2-600",
+    "grey2-700": "--grey2-grey2-700",
+    "grey2-800": "--grey2-grey2-800",
+    "grey2-900": "--grey2-grey2-900",
+    "grey2-950": "--grey2-grey2-950",
+    /* ----- Palette: Info, Success, Warning, Error ----- */
+    "info-50": "--info-info-50",
+    "info-100": "--info-info-100",
+    "info-200": "--info-info-200",
+    "info-300": "--info-info-300",
+    "info-400": "--info-info-400",
+    "info-500": "--info-info-500",
+    "info-600": "--info-info-600",
+    "info-700": "--info-info-700",
+    "info-800": "--info-info-800",
+    "info-900": "--info-info-900",
+    "info-950": "--info-info-950",
+    "success-50": "--success-success-50",
+    "success-100": "--success-success-100",
+    "success-200": "--success-success-200",
+    "success-300": "--success-success-300",
+    "success-400": "--success-success-400",
+    "success-500": "--success-success-500",
+    "success-600": "--success-success-600",
+    "success-700": "--success-success-700",
+    "success-800": "--success-success-800",
+    "success-900": "--success-success-900",
+    "success-950": "--success-success-950",
+    "warning-50": "--warning-warning-50",
+    "warning-100": "--warning-warning-100",
+    "warning-200": "--warning-warning-200",
+    "warning-300": "--warning-warning-300",
+    "warning-400": "--warning-warning-400",
+    "warning-500": "--warning-warning-500",
+    "warning-600": "--warning-warning-600",
+    "warning-700": "--warning-warning-700",
+    "warning-800": "--warning-warning-800",
+    "warning-900": "--warning-warning-900",
+    "warning-950": "--warning-warning-950",
+    "error-50": "--error-error-50",
+    "error-100": "--error-error-100",
+    "error-200": "--error-error-200",
+    "error-300": "--error-error-300",
+    "error-400": "--error-error-400",
+    "error-500": "--error-error-500",
+    "error-600": "--error-error-600",
+    "error-700": "--error-error-700",
+    "error-800": "--error-error-800",
+    "error-900": "--error-error-900",
+    "error-950": "--error-error-950",
+    /* ----- State: Primary ----- */
+    primary: "--state-color-primary-default",
+    "primary-hover": "--state-color-primary-hover",
+    "primary-stroke": "--state-color-primary-stroke",
+    "primary-hover-bg": "--state-color-primary-hover-bg",
+    "primary-pressed": "--state-color-primary-pressed",
+    "primary-active": "--state-color-primary-active",
+    "primary-text-solid": "--state-color-primary-text-solid",
+    "primary-text-outline": "--state-color-primary-text-outline",
+    "primary-text-hover": "--state-color-primary-text-hover",
+    "primary-text-pressed": "--state-color-primary-text-pressed",
+    /* ----- State: Secondary ----- */
+    secondary: "--state-color-secondary-default",
+    "secondary-hover": "--state-color-secondary-hover",
+    "secondary-stroke": "--state-color-secondary-stroke",
+    "secondary-hover-bg": "--state-color-secondary-hover-bg",
+    "secondary-pressed": "--state-color-secondary-pressed",
+    "secondary-active": "--state-color-secondary-active",
+    "secondary-text-solid": "--state-color-secondary-text-solid",
+    "secondary-text-outline": "--state-color-secondary-text-outline",
+    "secondary-text-hover": "--state-color-secondary-text-hover",
+    "secondary-text-pressed": "--state-color-secondary-text-pressed",
+    /* ----- State: Tertiary ----- */
+    tertiary: "--state-color-tertiary-default",
+    "tertiary-hover": "--state-color-tertiary-hover",
+    "tertiary-stroke": "--state-color-tertiary-stroke",
+    "tertiary-hover-bg": "--state-color-tertiary-hover-bg",
+    "tertiary-pressed": "--state-color-tertiary-pressed",
+    "tertiary-active": "--state-color-tertiary-active",
+    "tertiary-text-solid": "--state-color-tertiary-text-solid",
+    "tertiary-text-outline": "--state-color-tertiary-text-outline",
+    "tertiary-text-hover": "--state-color-tertiary-text-hover",
+    "tertiary-text-pressed": "--state-color-tertiary-text-pressed",
+    /* ----- State: Info ----- */
+    info: "--state-color-info-default",
+    "info-hover": "--state-color-info-hover",
+    "info-stroke": "--state-color-info-stroke",
+    "info-hover-bg": "--state-color-info-hover-bg",
+    "info-pressed": "--state-color-info-pressed",
+    "info-active": "--state-color-info-active",
+    "info-text-solid": "--state-color-info-text-solid",
+    "info-text-outline": "--state-color-info-text-outline",
+    "info-text-hover": "--state-color-info-text-hover",
+    "info-text-pressed": "--state-color-info-text-pressed",
+    /* ----- State: Success ----- */
+    success: "--state-color-success-default",
+    "success-hover": "--state-color-success-hover",
+    "success-stroke": "--state-color-success-stroke",
+    "success-hover-bg": "--state-color-success-hover-bg",
+    "success-pressed": "--state-color-success-pressed",
+    "success-active": "--state-color-success-active",
+    "success-text-solid": "--state-color-success-text-solid",
+    "success-text-outline": "--state-color-success-text-outline",
+    "success-text-hover": "--state-color-success-text-hover",
+    "success-text-pressed": "--state-color-success-text-pressed",
+    /* ----- State: Warning ----- */
+    warning: "--state-color-warning-default",
+    "warning-hover": "--state-color-warning-hover",
+    "warning-stroke": "--state-color-warning-stroke",
+    "warning-hover-bg": "--state-color-warning-hover-bg",
+    "warning-pressed": "--state-color-warning-pressed",
+    "warning-active": "--state-color-warning-active",
+    "warning-text-solid": "--state-color-warning-text-solid",
+    "warning-text-outline": "--state-color-warning-text-outline",
+    "warning-text-hover": "--state-color-warning-text-hover",
+    "warning-text-pressed": "--state-color-warning-text-pressed",
+    /* ----- State: Error ----- */
+    error: "--state-color-error-default",
+    "error-hover": "--state-color-error-hover",
+    "error-stroke": "--state-color-error-stroke",
+    "error-hover-bg": "--state-color-error-hover-bg",
+    "error-pressed": "--state-color-error-pressed",
+    "error-active": "--state-color-error-active",
+    "error-text-solid": "--state-color-error-text-solid",
+    "error-text-outline": "--state-color-error-text-outline",
+    "error-text-hover": "--state-color-error-text-hover",
+    "error-text-pressed": "--state-color-error-text-pressed",
+    /* ----- State: Disable ----- */
+    "disable-solid": "--state-color-disable-solid",
+    "disable-outline": "--state-color-disable-outline",
+    /* ----- Text ----- */
+    "text-black": "--text-black",
+    "text-dark": "--text-dark",
+    "text-medium": "--text-medium",
+    "text-light": "--text-light",
+    "text-grey-dark": "--text-grey-dark",
+    "text-grey-medium": "--text-grey-medium",
+    "text-grey-light": "--text-grey-light",
+    "text-white": "--text-white",
+    /* ----- Input ----- */
+    "input-default-text": "--input-color-default-text",
+    "input-default-stroke": "--input-color-default-stroke",
+    "input-filled-text": "--input-color-filled-text",
+    "input-active-stroke": "--input-color-active-stroke",
+    "input-disable-text": "--input-color-disable-text",
+    "input-disable-stroke": "--input-color-disable-stroke",
+    "input-disable-bg": "--input-color-disable-bg",
+    "input-label-bg": "--input-color-label-bg",
+    "input-error": "--input-color-error",
+    /* ----- Function button ----- */
+    "function-default-solid": "--function-default-solid",
+    "function-default-hover": "--function-default-hover",
+    "function-default-hover-bg": "--function-default-hover-bg",
+    "function-default-stroke": "--function-default-stroke",
+    "function-default-icon": "--function-default-icon",
+    "function-default-outline-icon": "--function-default-outline-icon",
+    "function-active-solid": "--function-active-solid",
+    "function-active-hover": "--function-active-hover",
+    "function-active-hover-bg": "--function-active-hover-bg",
+    "function-active-stroke": "--function-active-stroke",
+    "function-active-icon": "--function-active-icon",
+    /* ----- Base ----- */
+    "base-bg": "--base-color-bg",
+    "base-bg2": "--base-color-bg2",
+    "base-bg3": "--base-color-bg3",
+    "base-workspace-stroke": "--base-color-workspace-stroke",
+    "base-guideline-stroke": "--base-color-guideline-stroke",
+    "base-popup": "--base-color-popup",
+    "base-popup-highlight": "--base-color-popup-hightlight",
+    "base-popup-curtain": "--base-color-popup-curtain",
+    "base-popup-foreground": "--base-color-popup-foreground",
+    /* ----- Common ----- */
+    "common-white": "--common-white",
+    "common-black": "--common-black",
+    /* ----- Semantic ----- */
+    background: "--background",
+    foreground: "--foreground",
+    surface: "--surface",
+    "surface-foreground": "--surface-foreground",
+    "primary-foreground": "--primary-foreground",
+    "secondary-foreground": "--secondary-foreground",
+    "tertiary-foreground": "--tertiary-foreground",
+    "info-foreground": "--info-foreground",
+    "success-foreground": "--success-foreground",
+    "warning-foreground": "--warning-foreground",
+    "error-foreground": "--error-foreground",
+    "grey-foreground": "--grey-foreground",
+    "grey2-foreground": "--grey2-foreground",
+    /* ----- Transparency: Primary ----- */
+    "primary-transparent-8": "--main-transparency-primary-8",
+    "primary-transparent-12": "--main-transparency-primary-12",
+    "primary-transparent-16": "--main-transparency-primary-16",
+    "primary-transparent-24": "--main-transparency-primary-24",
+    "primary-transparent-32": "--main-transparency-primary-32",
+    "primary-transparent-48": "--main-transparency-primary-48",
+    /* ----- Transparency: Secondary ----- */
+    "secondary-transparent-8": "--main-transparency-secondary-8",
+    "secondary-transparent-12": "--main-transparency-secondary-12",
+    "secondary-transparent-16": "--main-transparency-secondary-16",
+    "secondary-transparent-24": "--main-transparency-secondary-24",
+    "secondary-transparent-32": "--main-transparency-secondary-32",
+    "secondary-transparent-48": "--main-transparency-secondary-48",
+    /* ----- Transparency: Tertiary ----- */
+    "tertiary-transparent-8": "--main-transparency-tertiary-8",
+    "tertiary-transparent-12": "--main-transparency-tertiary-12",
+    "tertiary-transparent-16": "--main-transparency-tertiary-16",
+    "tertiary-transparent-24": "--main-transparency-tertiary-24",
+    "tertiary-transparent-32": "--main-transparency-tertiary-32",
+    "tertiary-transparent-48": "--main-transparency-tertiary-48",
+    /* ----- Transparency: Info, Success, Warning, Error, Grey, Grey2 ----- */
+    "info-transparent-8": "--other-transparency-info-8",
+    "info-transparent-12": "--other-transparency-info-12",
+    "info-transparent-16": "--other-transparency-info-16",
+    "info-transparent-24": "--other-transparency-info-24",
+    "info-transparent-32": "--other-transparency-info-32",
+    "info-transparent-48": "--other-transparency-info-48",
+    "success-transparent-8": "--other-transparency-success-8",
+    "success-transparent-12": "--other-transparency-success-12",
+    "success-transparent-16": "--other-transparency-success-16",
+    "success-transparent-24": "--other-transparency-success-24",
+    "success-transparent-32": "--other-transparency-success-32",
+    "success-transparent-48": "--other-transparency-success-48",
+    "warning-transparent-8": "--other-transparency-warning-8",
+    "warning-transparent-12": "--other-transparency-warning-12",
+    "warning-transparent-16": "--other-transparency-warning-16",
+    "warning-transparent-24": "--other-transparency-warning-24",
+    "warning-transparent-32": "--other-transparency-warning-32",
+    "warning-transparent-48": "--other-transparency-warning-48",
+    "error-transparent-8": "--other-transparency-error-8",
+    "error-transparent-12": "--other-transparency-error-12",
+    "error-transparent-16": "--other-transparency-error-16",
+    "error-transparent-24": "--other-transparency-error-24",
+    "error-transparent-32": "--other-transparency-error-32",
+    "error-transparent-48": "--other-transparency-error-48",
+    "grey-transparent-8": "--other-transparency-grey-8",
+    "grey-transparent-12": "--other-transparency-grey-12",
+    "grey-transparent-16": "--other-transparency-grey-16",
+    "grey-transparent-24": "--other-transparency-grey-24",
+    "grey-transparent-32": "--other-transparency-grey-32",
+    "grey-transparent-48": "--other-transparency-grey-48",
+    "grey2-transparent-8": "--other-transparency-grey2-8",
+    "grey2-transparent-12": "--other-transparency-grey2-12",
+    "grey2-transparent-16": "--other-transparency-grey2-16",
+    "grey2-transparent-24": "--other-transparency-grey2-24",
+    "grey2-transparent-32": "--other-transparency-grey2-32",
+    "grey2-transparent-48": "--other-transparency-grey2-48",
+    /* ----- Transparency: White, Black ----- */
+    "white-transparent-8": "--other-transparency-white-08",
+    "white-transparent-12": "--other-transparency-white-12",
+    "white-transparent-16": "--other-transparency-white-16",
+    "white-transparent-24": "--other-transparency-white-24",
+    "white-transparent-32": "--other-transparency-white-32",
+    "white-transparent-48": "--other-transparency-white-48",
+    "black-transparent-8": "--other-transparency-black-08",
+    "black-transparent-12": "--other-transparency-black-12",
+    "black-transparent-16": "--other-transparency-black-16",
+    "black-transparent-24": "--other-transparency-black-24",
+    "black-transparent-32": "--other-transparency-black-32",
+    "black-transparent-48": "--other-transparency-black-48",
+};
+/**
+ * Get computed color value from a CSS variable (respects current theme).
+ * Use in browser only; returns empty string during SSR.
+ *
+ * @example
+ * const primary = getThemeColor('primary');
+ * const hex = getThemeColor('--primary-ramps-primary-100');
+ */
+export function getThemeColor(keyOrVar, element = document) {
+    if (typeof window === "undefined")
+        return "";
+    const root = element instanceof Document ? element.documentElement : element;
+    const varName = keyOrVar in THEME_COLOR_KEYS
+        ? THEME_COLOR_KEYS[keyOrVar]
+        : keyOrVar.startsWith("--")
+            ? keyOrVar
+            : `--${keyOrVar}`;
+    return getComputedStyle(root).getPropertyValue(varName).trim();
+}
+/**
+ * Get multiple theme colors as a JS object.
+ *
+ * @example
+ * const colors = getThemeColors();
+ * // { primary: '#2563eb', secondary: '#60a5fa', ... }
+ */
+export function getThemeColors(keys = Object.keys(THEME_COLOR_KEYS), element) {
+    return keys.reduce((acc, key) => {
+        acc[key] = getThemeColor(key, element);
+        return acc;
+    }, {});
+}
 export const srgbToHex = (color) => {
     if (color.startsWith("color(")) {
         const rgbValues = color.match(/([\d.]+)/g);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -77,6 +77,7 @@
   "dependencies": {
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
+    "lucide-react": "^0.460.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",

package/src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Footer from "./Footer";
+
+const meta = {
+  title: "Components/Footer",
+  component: Footer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 w-full h-screen flex flex-col">
+        <div className="flex-1">Page content</div>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+  render: (args) => (
+    <Footer
+      leftNav={
+        <ul className="flex gap-2">
+          <li>© 2024 Company</li>
+          <li>Privacy</li>
+          <li>Terms</li>
+        </ul>
+      }
+      center={<>Footer center</>}
+      rightNav={
+        <ul className="flex gap-2">
+          <li>Link 1</li>
+          <li>Link 2</li>
+          <li>Link 3</li>
+        </ul>
+      }
+    />
+  ),
+} satisfies StoryObj;
+
+export const WithCopyright = {
+  args: {},
+  render: (args) => (
+    <Footer
+      copyright="© 2024 Company. All rights reserved."
+      leftNav={
+        <ul className="flex gap-2">
+          <li>Privacy</li>
+          <li>Terms</li>
+        </ul>
+      }
+      rightNav={
+        <ul className="flex gap-2">
+          <li>Help</li>
+          <li>Contact</li>
+        </ul>
+      }
+    />
+  ),
+} satisfies StoryObj;
+
+export const Simple = {
+  args: {},
+  render: (args) => (
+    <Footer
+      variant="simple"
+      copyright="© 2024 Company. Powered by Rovula."
+    />
+  ),
+} satisfies StoryObj;
+
+export const Transparent = {
+  args: {},
+  render: (args) => (
+    <div className="flex flex-col w-full min-h-screen bg-primary-5">
+      <div className="flex-1 p-8">Page content</div>
+      <Footer
+        variant="transparent"
+        copyright="© 2024 Company"
+        leftNav={
+          <ul className="flex gap-2">
+            <li>Privacy</li>
+            <li>Terms</li>
+          </ul>
+        }
+        rightNav={
+          <ul className="flex gap-2">
+            <li>Help</li>
+            <li>Contact</li>
+          </ul>
+        }
+      />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const Custom = {
+  args: {},
+  render: (args) => (
+    <Footer
+      className="px-8"
+      copyright="© 2024 Company"
+      center={<>Powered by Rovula</>}
+      rightNav={
+        <ul className="flex gap-2">
+          <li>Help</li>
+          <li>Contact</li>
+        </ul>
+      }
+    />
+  ),
+} satisfies StoryObj;

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,122 @@
+import { cn } from "@/utils/cn";
+import React, { FC, ReactNode } from "react";
+
+export type FooterVariant = "default" | "simple" | "transparent";
+
+export type FooterProps = {
+  /** Layout variant: default (3-column) | simple (centered) | transparent (no bg) */
+  variant?: FooterVariant;
+  /** Copyright text - renders in left (default) or center (simple) */
+  copyright?: ReactNode;
+  position?: "static" | "sticky";
+  children?: ReactNode;
+  leftNav?: ReactNode;
+  rightNav?: ReactNode;
+  center?: ReactNode;
+  container?: boolean;
+  className?: string;
+  containerClassName?: string;
+  leftNavClassName?: string;
+  centerClassName?: string;
+  rightNavClassName?: string;
+};
+
+const Footer: FC<FooterProps> = ({
+  children,
+  className,
+  variant = "default",
+  copyright,
+  center,
+  leftNav,
+  rightNav,
+  position,
+  container = false,
+  containerClassName,
+  leftNavClassName,
+  centerClassName,
+  rightNavClassName,
+}) => {
+  const isSimple = variant === "simple";
+  const isTransparent = variant === "transparent";
+
+  const defaultLeft = leftNav || copyright;
+  const defaultCenter = isSimple ? copyright ?? center : center;
+  const defaultRight = isSimple ? null : rightNav;
+
+  return (
+    <footer
+      className={cn(
+        "relative w-full px-4 py-6 box-border overflow-hidden typography-subtitile2 border-solid border-t-2 text-[var(--footer-text-color)] border-t-[var(--footer-border-color)]",
+        isSimple ? "h-[var(--footer-height-simple)]" : "h-[var(--footer-height)]",
+        { position },
+        className
+      )}
+    >
+      {/* Default bg (z:-10) + overlay for className override - hidden when transparent */}
+      {!isTransparent && (
+        <div
+          className="absolute inset-0 -z-10 bg-[var(--footer-bg-color)]"
+          aria-hidden
+        />
+      )}
+      <div
+        className={cn("absolute inset-0 -z-[5] pointer-events-none", className)}
+        aria-hidden
+      />
+      <div
+        className={cn(
+          "relative mx-auto flex h-full items-center",
+          isSimple ? "justify-center" : "justify-between",
+          { container },
+          containerClassName
+        )}
+      >
+        {children ?? (
+          isSimple ? (
+            <div className={cn("text-center", centerClassName)}>
+              {defaultCenter}
+            </div>
+          ) : (
+            <>
+              <nav
+                className={cn(
+                  "flex w-1/2 items-center gap-x-[var(--footer-gap)] text-xl",
+                  leftNavClassName
+                )}
+              >
+                {copyright && leftNav ? (
+                  <>
+                    <span className="flex-shrink-0">{copyright}</span>
+                    {leftNav}
+                  </>
+                ) : (
+                  defaultLeft
+                )}
+              </nav>
+
+              <div
+                className={cn(
+                  "flex flex-shrink-0 flex-wrap justify-center",
+                  centerClassName
+                )}
+              >
+                {defaultCenter}
+              </div>
+
+              <nav
+                className={cn(
+                  "flex w-1/2 justify-end gap-x-[var(--footer-gap)] text-xl",
+                  rightNavClassName
+                )}
+              >
+                {defaultRight}
+              </nav>
+            </>
+          )
+        )}
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/src/components/Footer/index.ts

@@ -0,0 +1,3 @@
+import Footer from "./Footer";
+
+export { Footer };