sdaia-ui 1.0.1

package/src/components/FloatingButton/index.ts

@@ -0,0 +1,6 @@
+export { FloatingButton } from './FloatingButton';
+export type {
+  FloatingButtonProps,
+  FloatingButtonVariant,
+  FloatingButtonSize,
+} from './FloatingButton.types';

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,353 @@
+'use client';
+
+import { forwardRef, useState, type FormEvent } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import { Divider } from '../Divider';
+import { Link } from '../Link';
+import { TextInput } from '../TextInput';
+import type {
+  FooterAppStoresProps,
+  FooterBottomBarProps,
+  FooterInlineBarProps,
+  FooterLinkColumnsProps,
+  FooterNewsletterProps,
+  FooterProps,
+  FooterSocialLinksProps,
+} from './Footer.types';
+import {
+  APP_STORES_ROOT,
+  BOTTOM_BAR_COPYRIGHT,
+  BOTTOM_BAR_EXTRAS,
+  BOTTOM_BAR_LEGAL,
+  BOTTOM_BAR_ROOT,
+  INLINE_BAR_END,
+  INLINE_BAR_LINKS,
+  INLINE_BAR_ROOT,
+  LINK_COLUMNS,
+  NEWSLETTER_DESCRIPTION,
+  NEWSLETTER_FORM,
+  NEWSLETTER_HEADING,
+  NEWSLETTER_ROOT,
+  NEWSLETTER_TEXT_COLUMN,
+  ROOT_BASE,
+  ROOT_COMPACT,
+  SOCIAL_LINKS_ROOT,
+} from './Footer.variants';
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.LinkColumns
+   Grid container for 1–6 `<FooterLinkList />` children. Responsive
+   by default (1 col mobile → 2 cols tablet → auto-fit desktop).
+   ───────────────────────────────────────────────────────────── */
+const FooterLinkColumns = forwardRef<HTMLDivElement, FooterLinkColumnsProps>(
+  function FooterLinkColumns({ className, children, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-slot="footer-link-columns"
+        className={cn(LINK_COLUMNS, className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.Newsletter
+   Heading + description + email form. `onSubmit` receives the typed
+   email; the native submit event is provided so consumers can
+   `preventDefault()` or integrate with their own form library.
+   ───────────────────────────────────────────────────────────── */
+const FooterNewsletter = forwardRef<HTMLDivElement, FooterNewsletterProps>(
+  function FooterNewsletter(
+    {
+      heading,
+      description,
+      inputPlaceholder = 'name@example.com',
+      submitLabel = 'Subscribe',
+      inputLabel = 'Email address',
+      inputName = 'email',
+      onSubmit,
+      dir,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const [value, setValue] = useState('');
+
+    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+      if (!onSubmit) {
+        // No consumer handler — let the browser do its default thing but
+        // still emit `preventDefault` so we don't accidentally navigate.
+        event.preventDefault();
+        return;
+      }
+      onSubmit(value, event);
+    };
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="footer-newsletter"
+        className={cn(NEWSLETTER_ROOT, className)}
+        {...rest}
+      >
+        <div data-slot="footer-newsletter-text" className={NEWSLETTER_TEXT_COLUMN}>
+          {heading != null ? (
+            <p className={NEWSLETTER_HEADING} dir="auto">
+              {heading}
+            </p>
+          ) : null}
+          {description != null ? (
+            <p className={NEWSLETTER_DESCRIPTION} dir="auto">
+              {description}
+            </p>
+          ) : null}
+        </div>
+
+        <form
+          data-slot="footer-newsletter-form"
+          className={NEWSLETTER_FORM}
+          onSubmit={handleSubmit}
+          noValidate
+        >
+          <TextInput
+            type="email"
+            name={inputName}
+            aria-label={inputLabel}
+            placeholder={inputPlaceholder}
+            value={value}
+            onChange={(event) => setValue(event.currentTarget.value)}
+            fullWidth
+          />
+          <Button type="submit" variant="primary">
+            {submitLabel}
+          </Button>
+        </form>
+      </div>
+    );
+  },
+);
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.AppStores — wrap for two or more app-store buttons.
+   ───────────────────────────────────────────────────────────── */
+const FooterAppStores = forwardRef<HTMLDivElement, FooterAppStoresProps>(
+  function FooterAppStores({ className, children, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-slot="footer-app-stores"
+        className={cn(APP_STORES_ROOT, className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.SocialLinks — wrap for a row of social icon anchors.
+   ───────────────────────────────────────────────────────────── */
+const FooterSocialLinks = forwardRef<HTMLDivElement, FooterSocialLinksProps>(
+  function FooterSocialLinks({ className, children, ...rest }, ref) {
+    return (
+      <nav
+        ref={ref as never}
+        aria-label="Social media"
+        data-slot="footer-social-links"
+        className={cn(SOCIAL_LINKS_ROOT, className)}
+        {...rest}
+      >
+        {children}
+      </nav>
+    );
+  },
+);
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.BottomBar
+   Logo on the start edge + legal block (copyright + small links)
+   on the end edge. Optional divider above. Stacks vertically on
+   narrow viewports.
+   ───────────────────────────────────────────────────────────── */
+const FooterBottomBar = forwardRef<HTMLDivElement, FooterBottomBarProps>(
+  function FooterBottomBar(
+    { logo, copyright, extraLinks, divider = true, dir, className, ...rest },
+    ref,
+  ) {
+    return (
+      <div ref={ref} dir={dir} data-slot="footer-bottom-bar-wrapper" className="w-full flex flex-col items-start gap-spacing-5xl">
+        {divider ? <Divider lineType="horizontal" color="neutral" thickness="hairline" length="full" /> : null}
+
+        <div
+          data-slot="footer-bottom-bar"
+          className={cn(BOTTOM_BAR_ROOT, className)}
+          {...rest}
+        >
+          {logo != null ? (
+            <div data-slot="footer-bottom-bar-logo" className="flex items-center shrink-0">
+              {logo}
+            </div>
+          ) : null}
+
+          {copyright != null || (extraLinks && extraLinks.length > 0) ? (
+            <div data-slot="footer-bottom-bar-legal" className={BOTTOM_BAR_LEGAL}>
+              {copyright != null ? (
+                <p className={BOTTOM_BAR_COPYRIGHT} dir="auto">
+                  {copyright}
+                </p>
+              ) : null}
+
+              {extraLinks && extraLinks.length > 0 ? (
+                <div className={BOTTOM_BAR_EXTRAS}>
+                  {extraLinks.map((link, index) => {
+                    const { id, label, href = '#', onClick, ...anchorRest } = link;
+                    return (
+                      <Link
+                        key={id ?? index}
+                        href={href}
+                        size="sm"
+                        variant="neutral"
+                        onClick={onClick}
+                        {...anchorRest}
+                      >
+                        {label}
+                      </Link>
+                    );
+                  })}
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.InlineBar
+   Compact single-row layout used by Figma's Small 1 / Small 2
+   variants: logo on the start edge, inline links in the middle,
+   optional copyright + extras on the end edge.
+   ───────────────────────────────────────────────────────────── */
+const FooterInlineBar = forwardRef<HTMLDivElement, FooterInlineBarProps>(
+  function FooterInlineBar(
+    { logo, links, extraLinks, copyright, dir, className, ...rest },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="footer-inline-bar"
+        className={cn(INLINE_BAR_ROOT, className)}
+        {...rest}
+      >
+        {logo != null ? (
+          <div data-slot="footer-inline-bar-logo" className="flex items-center shrink-0 md:flex-1">
+            {logo}
+          </div>
+        ) : null}
+
+        {links && links.length > 0 ? (
+          <nav aria-label="Footer" className={INLINE_BAR_LINKS}>
+            {links.map((link, index) => {
+              const { id, label, href = '#', onClick, ...anchorRest } = link;
+              return (
+                <Link
+                  key={id ?? index}
+                  href={href}
+                  size="md"
+                  variant="primary"
+                  onClick={onClick}
+                  {...anchorRest}
+                >
+                  {label}
+                </Link>
+              );
+            })}
+          </nav>
+        ) : null}
+
+        {copyright != null || (extraLinks && extraLinks.length > 0) ? (
+          <div className={cn(INLINE_BAR_END, 'md:flex-1')}>
+            {copyright != null ? (
+              <p className={BOTTOM_BAR_COPYRIGHT} dir="auto">
+                {copyright}
+              </p>
+            ) : null}
+            {extraLinks && extraLinks.length > 0 ? (
+              <div className={BOTTOM_BAR_EXTRAS}>
+                {extraLinks.map((link, index) => {
+                  const { id, label, href = '#', onClick, ...anchorRest } = link;
+                  return (
+                    <Link
+                      key={id ?? index}
+                      href={href}
+                      size="sm"
+                      variant="neutral"
+                      onClick={onClick}
+                      {...anchorRest}
+                    >
+                      {label}
+                    </Link>
+                  );
+                })}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+/* ─────────────────────────────────────────────────────────────
+   Root
+   ───────────────────────────────────────────────────────────── */
+
+interface FooterComponent
+  extends React.ForwardRefExoticComponent<
+    FooterProps & React.RefAttributes<HTMLElement>
+  > {
+  LinkColumns: typeof FooterLinkColumns;
+  Newsletter: typeof FooterNewsletter;
+  AppStores: typeof FooterAppStores;
+  SocialLinks: typeof FooterSocialLinks;
+  BottomBar: typeof FooterBottomBar;
+  InlineBar: typeof FooterInlineBar;
+}
+
+const FooterBase = forwardRef<HTMLElement, FooterProps>(function Footer(
+  { className, children, dir: dirProp, rtl = false, compact = false, ...rest },
+  ref,
+) {
+  const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+  return (
+    <footer
+      ref={ref}
+      dir={dir}
+      data-slot="footer"
+      className={cn(compact ? ROOT_COMPACT : ROOT_BASE, className)}
+      {...rest}
+    >
+      {children}
+    </footer>
+  );
+});
+
+export const Footer = FooterBase as FooterComponent;
+Footer.LinkColumns = FooterLinkColumns;
+Footer.Newsletter = FooterNewsletter;
+Footer.AppStores = FooterAppStores;
+Footer.SocialLinks = FooterSocialLinks;
+Footer.BottomBar = FooterBottomBar;
+Footer.InlineBar = FooterInlineBar;

package/src/components/Footer/Footer.types.ts

@@ -0,0 +1,142 @@
+import type {
+  AnchorHTMLAttributes,
+  FormEventHandler,
+  HTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
+
+/* ─────────────────────────────────────────────────────────────
+   Footer (root)
+   ───────────────────────────────────────────────────────────── */
+
+export interface FooterProps extends HTMLAttributes<HTMLElement> {
+  /** Direction — applied to the root and drives RTL layout. */
+  dir?: 'ltr' | 'rtl';
+  /** @deprecated Use `dir="rtl"` instead. */
+  rtl?: boolean;
+  /**
+   * Compact vertical spacing. When `true` the root uses the "Small" footer
+   * padding from Figma (shorter `py`, same `px`). Use for minimal footers
+   * that do not include link columns or a newsletter block.
+   * @default false
+   */
+  compact?: boolean;
+  children?: ReactNode;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.LinkColumns — grid wrapper for FooterLinkList instances
+   ───────────────────────────────────────────────────────────── */
+
+export interface FooterLinkColumnsProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Each child is treated as a column. On desktop the children sit side by
+   * side (`flex-1`); on tablet they wrap into two columns; on mobile they
+   * stack vertically at full width. Typically rendered with
+   * `<FooterLinkList />` children.
+   */
+  children?: ReactNode;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.Newsletter — heading + description + email input + submit
+   ───────────────────────────────────────────────────────────── */
+
+export interface FooterNewsletterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSubmit'> {
+  /** Bold title (Text md/Medium). */
+  heading?: ReactNode;
+  /** Supporting copy under the heading (Text sm/Regular). */
+  description?: ReactNode;
+  /** Placeholder for the email input. @default 'name@example.com' */
+  inputPlaceholder?: string;
+  /** Submit button label. @default 'Subscribe' */
+  submitLabel?: ReactNode;
+  /** Accessible label for the email input. @default 'Email address' */
+  inputLabel?: string;
+  /** Name attribute for the email input. @default 'email' */
+  inputName?: string;
+  /**
+   * Fired on form submit. Receives the typed email and the native submit
+   * event; call `event.preventDefault()` to block default navigation.
+   */
+  onSubmit?: (value: string, event: React.FormEvent<HTMLFormElement>) => void;
+  /** Direction override for the newsletter block. */
+  dir?: 'ltr' | 'rtl';
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.AppStores — row of (typically two) app-store buttons
+   ───────────────────────────────────────────────────────────── */
+
+export interface FooterAppStoresProps extends HTMLAttributes<HTMLDivElement> {
+  /** Button elements (e.g. App Store + Google Play). */
+  children?: ReactNode;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.SocialLinks — row of social icon buttons
+   ───────────────────────────────────────────────────────────── */
+
+export interface FooterSocialLinksProps extends HTMLAttributes<HTMLDivElement> {
+  /** Icon anchor children (`<a>` with a social glyph). */
+  children?: ReactNode;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.BottomBar — logo + legal info row, divider optional
+   ───────────────────────────────────────────────────────────── */
+
+/** Item rendered in the BottomBar's small "Terms / Privacy" link row. */
+export interface FooterBottomBarExtraLink
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'onClick'> {
+  id?: string;
+  label: ReactNode;
+  href?: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+}
+
+export interface FooterBottomBarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Brand mark rendered on the start edge. Typically a
+   * `<NavLogoPlaceholder size="medium" />`.
+   */
+  logo?: ReactNode;
+  /** Legal / copyright line (Text sm/Semibold). */
+  copyright?: ReactNode;
+  /**
+   * Small secondary links (Text sm/Regular, neutral color) rendered under
+   * the copyright line. Figma ships "Terms and Conditions" + "Privacy
+   * Policy" as defaults, but any number of links is supported.
+   */
+  extraLinks?: FooterBottomBarExtraLink[];
+  /**
+   * Show a hairline `<Divider />` above the bottom bar. Matches the Large
+   * variants that separate link columns / newsletter from the legal row.
+   * @default true
+   */
+  divider?: boolean;
+  /** Direction override. */
+  dir?: 'ltr' | 'rtl';
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Footer.InlineBar — minimal single-row variant (Small 1/2)
+   ───────────────────────────────────────────────────────────── */
+
+export interface FooterInlineBarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Brand mark rendered on the start edge. */
+  logo?: ReactNode;
+  /** Inline link items rendered in the centre. */
+  links?: FooterBottomBarExtraLink[];
+  /** Inline link items rendered on the end edge (Terms / Privacy). */
+  extraLinks?: FooterBottomBarExtraLink[];
+  /** Legal copy rendered on the end edge (above the extra links). */
+  copyright?: ReactNode;
+  /** Direction override. */
+  dir?: 'ltr' | 'rtl';
+}
+
+/* Re-export for convenience so consumers can import the form type alongside
+   the component types. */
+export type { FormEventHandler };

package/src/components/Footer/Footer.variants.ts

@@ -0,0 +1,137 @@
+/* ─────────────────────────────────────────────────────────────────
+   Footer.variants.ts
+   Class-name constants for the Footer component.
+   Derived from Figma node 5156:62257 (Footer frame).
+   No JSX / React imports — pure strings.
+──────────────────────────────────────────────────────────────────── */
+
+/* ── Root ─────────────────────────────────────────────────────── */
+
+/*
+ * Mobile → Tablet (md: ≥ 768 px) → Desktop (xl: ≥ 1280 px).
+ *
+ * Figma desktop spec (node 5156:62256):
+ *   px = spacing-8xl (80)
+ *   pt = spacing-7xl (64)
+ *   pb = spacing-4xl (32)
+ *   gap = spacing-5xl (40)
+ *
+ * On mobile the 80 px side padding would eat most of a 360 px viewport, so
+ * we drop to 16 px and step up at each breakpoint. Vertical rhythm comes
+ * from the responsive spacing tokens directly — `pt-spacing-7xl` reads
+ * 40 / 48 / 64 px across mobile / tablet / desktop automatically, which
+ * lands close to Figma's mobile (3286-wide) frames that use slightly
+ * tighter vertical spacing than desktop.
+ */
+export const ROOT_BASE =
+  'flex w-full flex-col items-start ' +
+  'bg-white dark:bg-[rgba(17,25,39,1)] ' +
+  'px-[16px] md:px-[48px] xl:px-[80px] ' +
+  'pt-spacing-7xl pb-spacing-4xl ' +
+  'gap-spacing-5xl';
+
+/*
+ * Compact variant — used by the Figma "Small 1" and "Small 2" layouts
+ * which omit link columns and newsletter. Uses spacing-6xl (32/40/48)
+ * top and bottom, no gap because only one child is expected.
+ */
+export const ROOT_COMPACT =
+  'flex w-full flex-col items-start ' +
+  'bg-white dark:bg-[rgba(17,25,39,1)] ' +
+  '' +
+  'py-spacing-6xl ' +
+  'gap-spacing-5xl';
+
+/* ── LinkColumns ──────────────────────────────────────────────── */
+
+/*
+ * Grid of FooterLinkList children.
+ * - mobile:  1 column (each list stacks, full width)
+ * - tablet:  2 columns
+ * - desktop: auto-fit with 140 px min per column so 1–6 lists all fit
+ *   cleanly. The `gap-spacing-3xl` (spacing-3xl = 16/20/24 px responsive)
+ *   matches Figma's 24 px desktop gap while tightening on mobile.
+ */
+export const LINK_COLUMNS =
+  'grid w-full ' +
+  'grid-cols-1 sm:grid-cols-2 xl:[grid-template-columns:repeat(auto-fit,minmax(140px,1fr))] ' +
+  'gap-spacing-3xl';
+
+/* ── Newsletter ───────────────────────────────────────────────── */
+
+/*
+ * Heading + description on the start edge, input + button on the end edge.
+ * Stacks vertically on mobile and flips to a side-by-side row on tablet+.
+ */
+export const NEWSLETTER_ROOT =
+  'flex w-full flex-col gap-spacing-xl ' +
+  'md:flex-row md:items-start md:justify-between md:gap-spacing-3xl';
+
+export const NEWSLETTER_TEXT_COLUMN =
+  'flex flex-col gap-spacing-md min-w-0 md:flex-1';
+
+export const NEWSLETTER_HEADING =
+  'text-text-md font-[500] leading-[24px] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]';
+
+export const NEWSLETTER_DESCRIPTION =
+  'text-text-sm font-[400] leading-[20px] ' +
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]';
+
+/**
+ * Input + button row. `w-full md:w-auto md:min-w-[350px]` makes the form
+ * span the container on mobile (where it stacks under the text) and pin
+ * at the designed 350 px width on tablet+ (Figma spec).
+ */
+export const NEWSLETTER_FORM =
+  'flex items-stretch gap-spacing-md w-full md:w-auto md:min-w-[350px] md:max-w-[420px]';
+
+/* ── AppStores ────────────────────────────────────────────────── */
+
+export const APP_STORES_ROOT =
+  'flex flex-wrap items-center gap-spacing-md';
+
+/* ── SocialLinks ──────────────────────────────────────────────── */
+
+export const SOCIAL_LINKS_ROOT =
+  'flex items-center gap-spacing-md';
+
+/* ── BottomBar ────────────────────────────────────────────────── */
+
+/*
+ * Logo on the start edge, legal block on the end edge.
+ * Stacks vertically on mobile, flips to the side-by-side row on tablet+.
+ */
+export const BOTTOM_BAR_ROOT =
+  'flex w-full flex-col items-start gap-spacing-lg ' +
+  'md:flex-row md:items-center md:justify-between md:gap-spacing-3xl';
+
+export const BOTTOM_BAR_LEGAL =
+  'flex flex-col items-start gap-spacing-md ' +
+  'md:items-end ' +
+  'rtl:md:items-start';
+
+export const BOTTOM_BAR_COPYRIGHT =
+  'text-text-sm font-[600] leading-[20px] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]';
+
+export const BOTTOM_BAR_EXTRAS =
+  'flex flex-wrap items-center gap-spacing-lg';
+
+/* ── InlineBar ────────────────────────────────────────────────── */
+
+/*
+ * Single row: logo (start) + inline links (centre) + copyright + extras
+ * (end). Wraps to a stacked column on narrow widths.
+ */
+export const INLINE_BAR_ROOT =
+  'flex w-full flex-col items-start gap-spacing-xl ' +
+  'md:flex-row md:items-center md:justify-center md:gap-spacing-3xl';
+
+export const INLINE_BAR_LINKS =
+  'flex flex-wrap items-center gap-spacing-3xl';
+
+export const INLINE_BAR_END =
+  'flex flex-col items-start gap-spacing-xxs ' +
+  'md:items-end ' +
+  'rtl:md:items-start';

package/src/components/Footer/index.ts

@@ -0,0 +1,11 @@
+export { Footer } from './Footer';
+export type {
+  FooterAppStoresProps,
+  FooterBottomBarExtraLink,
+  FooterBottomBarProps,
+  FooterInlineBarProps,
+  FooterLinkColumnsProps,
+  FooterNewsletterProps,
+  FooterProps,
+  FooterSocialLinksProps,
+} from './Footer.types';