sdaia-ui 1.0.1 → 1.0.2

package/src/components/FloatingButton/index.ts

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

package/src/components/Footer/Footer.tsx

@@ -1,353 +0,0 @@
-'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

@@ -1,142 +0,0 @@
-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

@@ -1,137 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────
-   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

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