@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/navbar-extended-at-top/NavbarExtendedAtTop.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { Mail } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { SocialIcon, SOCIAL_PLATFORM_NAMES, type SocialPlatform } from "../../ui/social-icons/social-icons"
+import { NavbarBar, NavbarLinks, NavbarLogo, NavbarMenu, navbarLabels, type NavbarLabels, type NavbarLinkItem } from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=Extended at Top.
+ *
+ * A 40px `primary` band over Default's bar: the contact email at the start,
+ * after a mail icon, and the social marks at the end, all in
+ * `primary-foreground`. On Mobile the bar's links move into the Sheet; the
+ * band keeps everything.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+type Locale = "en" | "ar"
+
+export interface NavbarExtendedAtTopSocial {
+  /** Which platform's mark. Its name is the link's accessible name. */
+  platform: SocialPlatform
+  href: string
+}
+
+export interface NavbarExtendedAtTopCopy {
+  /** The links, in reading order. The `current` one carries the `accent` fill. */
+  links: NavbarLinkItem[]
+  /** The contact address in the band. */
+  email: string
+  /** The social links in the band, in reading order. */
+  socials: NavbarExtendedAtTopSocial[]
+}
+
+const SOCIALS: NavbarExtendedAtTopSocial[] = [
+  { platform: "github", href: "https://github.com" },
+  { platform: "facebook", href: "https://facebook.com" },
+  { platform: "x", href: "https://x.com" },
+  { platform: "google", href: "https://google.com" },
+]
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<Locale, NavbarExtendedAtTopCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/", current: true },
+      { label: "Services", href: "/services" },
+      { label: "Products", href: "/products" },
+    ],
+    email: "hello@Fasla.com",
+    socials: SOCIALS,
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/", current: true },
+      { label: "الخدمات", href: "/services" },
+      { label: "المنتجات", href: "/products" },
+    ],
+    email: "hello@Fasla.com",
+    socials: SOCIALS,
+  },
+}
+
+export interface NavbarExtendedAtTopProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarExtendedAtTopCopy> {
+  /** Which language the default copy and labels are in. The page's `dir` sets the direction. */
+  locale?: Locale
+  /** Your logo, a link home: Figma shows the 34px Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * Where the logo links.
+   * @default "/"
+   */
+  logoHref?: string
+  /** The names only assistive tech reads, in place of `locale`'s. */
+  labels?: Partial<NavbarLabels>
+  /** Whether the menu's Sheet is open, to control it. */
+  menuOpen?: boolean
+  /** Called when the menu's Sheet opens or closes. */
+  onMenuOpenChange?: (open: boolean) => void
+}
+
+export function NavbarExtendedAtTop({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  email,
+  socials,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarExtendedAtTopProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+  const items = links ?? copy.links
+  const address = email ?? copy.email
+
+  return (
+    <header className={cn("bg-background", className)} {...props}>
+      <NavbarBar className="bg-primary py-2 text-primary-foreground" contentClassName="justify-between gap-6">
+        <a
+          href={`mailto:${address}`}
+          className="flex min-w-0 items-center gap-2 rounded-[var(--radius-sm)] text-base outline-none focus-visible:ring-2 focus-visible:ring-primary-foreground"
+        >
+          <Mail aria-hidden="true" strokeWidth={1.5} className="size-6 shrink-0" />
+          {/* An address reads left to right in both directions. */}
+          <span dir="ltr" className="truncate">
+            {address}
+          </span>
+        </a>
+        <ul className="flex shrink-0 items-center gap-4">
+          {(socials ?? copy.socials).map((social) => (
+            <li key={social.platform} className="flex">
+              <a
+                href={social.href}
+                aria-label={SOCIAL_PLATFORM_NAMES[social.platform]}
+                className="rounded-[var(--radius-xs)] outline-none focus-visible:ring-2 focus-visible:ring-primary-foreground"
+              >
+                <SocialIcon platform={social.platform} color="current" className="size-5" />
+              </a>
+            </li>
+          ))}
+        </ul>
+      </NavbarBar>
+      <NavbarBar className="py-3" contentClassName="gap-6">
+        <div className="flex flex-1">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <nav aria-label={l.nav} className="hidden md:block">
+          <NavbarLinks links={items} indicator="fill" />
+        </nav>
+        <NavbarMenu
+          links={items}
+          label={l.openMenu}
+          title={l.menuTitle}
+          closeLabel={l.closeMenu}
+          open={menuOpen}
+          onOpenChange={onMenuOpenChange}
+          className="md:hidden"
+        />
+      </NavbarBar>
+    </header>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const navbarExtendedAtTopCopy = COPY

package/registry/blocks/navbar-extended-at-top/index.ts

@@ -0,0 +1,7 @@
+export {
+  NavbarExtendedAtTop,
+  navbarExtendedAtTopCopy,
+  type NavbarExtendedAtTopCopy,
+  type NavbarExtendedAtTopProps,
+  type NavbarExtendedAtTopSocial,
+} from "./NavbarExtendedAtTop"

package/registry/blocks/navbar-multiple-action/NavbarMultipleAction.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { NavbarBar, NavbarLinks, NavbarLogo, NavbarMenu, navbarLabels, type NavbarLabels, type NavbarLinkItem } from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=Multiple Action.
+ *
+ * The logo, the links at the end with a `foreground` line under the current
+ * one, then two small buttons: Outline to log in, Solid to sign up. On Mobile
+ * the links and the Outline button move into the Sheet; the Solid button
+ * stays beside the logo.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+type Locale = "en" | "ar"
+
+export interface NavbarMultipleActionCopy {
+  /** The links, in reading order. The `current` one is underlined. */
+  links: NavbarLinkItem[]
+  /** The Outline button's label. */
+  logInLabel: string
+  /** The Solid button's label. */
+  signUpLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<Locale, NavbarMultipleActionCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/", current: true },
+      { label: "Services", href: "/services" },
+      { label: "Products", href: "/products" },
+    ],
+    logInLabel: "Log in",
+    signUpLabel: "Sign up",
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/", current: true },
+      { label: "الخدمات", href: "/services" },
+      { label: "المنتجات", href: "/products" },
+    ],
+    logInLabel: "تسجيل الدخول",
+    signUpLabel: "إنشاء حساب",
+  },
+}
+
+export interface NavbarMultipleActionProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarMultipleActionCopy> {
+  /** Which language the default copy and labels are in. The page's `dir` sets the direction. */
+  locale?: Locale
+  /** Your logo, a link home: Figma shows the 34px Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * Where the logo links.
+   * @default "/"
+   */
+  logoHref?: string
+  /** The names only assistive tech reads, in place of `locale`'s. */
+  labels?: Partial<NavbarLabels>
+  /** Called when the Outline button is pressed, in the bar or in the Sheet. */
+  onLogInClick?: React.MouseEventHandler<HTMLButtonElement>
+  /** Called when the Solid button is pressed. */
+  onSignUpClick?: React.MouseEventHandler<HTMLButtonElement>
+  /** Whether the menu's Sheet is open, to control it. */
+  menuOpen?: boolean
+  /** Called when the menu's Sheet opens or closes. */
+  onMenuOpenChange?: (open: boolean) => void
+}
+
+export function NavbarMultipleAction({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  logInLabel,
+  signUpLabel,
+  onLogInClick,
+  onSignUpClick,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarMultipleActionProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+  const items = links ?? copy.links
+  const logIn = logInLabel ?? copy.logInLabel
+
+  return (
+    <header className={cn("bg-background", className)} {...props}>
+      <NavbarBar className="py-3" contentClassName="gap-6">
+        <div className="flex flex-1">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <nav aria-label={l.nav} className="hidden flex-1 justify-end md:flex">
+          <NavbarLinks links={items} indicator="underline" />
+        </nav>
+        <Button type="button" variant="outline" tone="primary" size="sm" onClick={onLogInClick} className="hidden md:inline-flex">
+          {logIn}
+        </Button>
+        <Button type="button" size="sm" onClick={onSignUpClick}>
+          {signUpLabel ?? copy.signUpLabel}
+        </Button>
+        <NavbarMenu
+          links={items}
+          label={l.openMenu}
+          title={l.menuTitle}
+          closeLabel={l.closeMenu}
+          open={menuOpen}
+          onOpenChange={onMenuOpenChange}
+          className="md:hidden"
+          footer={
+            <Button type="button" variant="outline" tone="primary" size="md" onClick={onLogInClick}>
+              {logIn}
+            </Button>
+          }
+        />
+      </NavbarBar>
+    </header>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const navbarMultipleActionCopy = COPY

package/registry/blocks/navbar-multiple-action/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarMultipleAction,
+  navbarMultipleActionCopy,
+  type NavbarMultipleActionCopy,
+  type NavbarMultipleActionProps,
+} from "./NavbarMultipleAction"

package/registry/blocks/navbar-multiple-icon/NavbarMultipleIcon.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { Mail, Search } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import {
+  NavbarAccount,
+  NavbarBar,
+  NavbarIconButton,
+  NavbarLogo,
+  NavbarNotifications,
+  navbarLabels,
+  type NavbarLabels,
+} from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=Multiple Icon.
+ *
+ * The logo, then the bell with its notification dot, messages, search and the
+ * account: the avatar, the name and a chevron that opens the account's menu.
+ * It has no links, so it has no menu button: on Mobile the account shows its
+ * avatar alone and the four icons close up from 16px to 8px apart.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+type Locale = "en" | "ar"
+
+export interface NavbarMultipleIconCopy {
+  /** The account holder's name, beside the avatar. */
+  accountName: string
+  /** The account menu's pages. */
+  accountItems: { label: string; href: string }[]
+  /** The messages button's name. */
+  messagesLabel: string
+}
+
+/** Figma's copy, English and Arabic. The account menu's pages are not in Figma. */
+const COPY: Record<Locale, NavbarMultipleIconCopy> = {
+  en: {
+    accountName: "Chris Doe",
+    accountItems: [
+      { label: "Profile", href: "/account" },
+      { label: "Settings", href: "/settings" },
+      { label: "Log out", href: "/logout" },
+    ],
+    messagesLabel: "Messages",
+  },
+  ar: {
+    accountName: "أحمد علي",
+    accountItems: [
+      { label: "الملف الشخصي", href: "/account" },
+      { label: "الإعدادات", href: "/settings" },
+      { label: "تسجيل الخروج", href: "/logout" },
+    ],
+    messagesLabel: "الرسائل",
+  },
+}
+
+export interface NavbarMultipleIconProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarMultipleIconCopy> {
+  /** Which language the default copy and labels are in. The page's `dir` sets the direction. */
+  locale?: Locale
+  /** Your logo, a link home: Figma shows the 34px Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * Where the logo links.
+   * @default "/"
+   */
+  logoHref?: string
+  /** The names only assistive tech reads, in place of `locale`'s. */
+  labels?: Partial<NavbarLabels>
+  /** The account photo. Without it the avatar shows the name's initials. */
+  avatar?: string
+  /**
+   * Shows the notification dot on the bell.
+   * @default true
+   */
+  unread?: boolean
+  /** Called when the bell is pressed. */
+  onNotificationsClick?: React.MouseEventHandler<HTMLButtonElement>
+  /** Called when the messages button is pressed. */
+  onMessagesClick?: React.MouseEventHandler<HTMLButtonElement>
+  /** Called when the search button is pressed. */
+  onSearchClick?: React.MouseEventHandler<HTMLButtonElement>
+}
+
+export function NavbarMultipleIcon({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  accountName,
+  accountItems,
+  messagesLabel,
+  avatar,
+  unread = true,
+  onNotificationsClick,
+  onMessagesClick,
+  onSearchClick,
+  className,
+  ...props
+}: NavbarMultipleIconProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+
+  return (
+    <header className={cn("bg-background", className)} {...props}>
+      <NavbarBar className="py-3" contentClassName="gap-2 md:gap-4">
+        <div className="flex flex-1">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <NavbarNotifications label={l.notifications} unread={unread} unreadLabel={l.unread} onClick={onNotificationsClick} />
+        <NavbarIconButton label={messagesLabel ?? copy.messagesLabel} icon={<Mail />} onClick={onMessagesClick} />
+        <NavbarIconButton label={l.search} icon={<Search />} onClick={onSearchClick} />
+        <NavbarAccount
+          name={accountName ?? copy.accountName}
+          src={avatar}
+          label={l.account}
+          items={accountItems ?? copy.accountItems}
+          detailClassName="hidden md:flex"
+        />
+      </NavbarBar>
+    </header>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const navbarMultipleIconCopy = COPY

package/registry/blocks/navbar-multiple-icon/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarMultipleIcon,
+  navbarMultipleIconCopy,
+  type NavbarMultipleIconCopy,
+  type NavbarMultipleIconProps,
+} from "./NavbarMultipleIcon"

package/registry/blocks/navbar-rounded/NavbarRounded.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { NavbarLinks, NavbarLogo, NavbarMenu, navbarLabels, type NavbarLabels, type NavbarLinkItem } from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=Rounded.
+ *
+ * The bar as a `background` pill as wide as the content, 24px in from its
+ * rounded ends: the logo, the links in the middle with a `primary` dot under
+ * the current one, and a Solid button. On Mobile the button no longer fits
+ * beside the logo, so it moves into the Sheet with the links.
+ *
+ * The block itself has no fill: the pill floats on the page under it.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+type Locale = "en" | "ar"
+
+export interface NavbarRoundedCopy {
+  /** The links, in reading order. A link with `items` opens a menu of them; the `current` one has the dot. */
+  links: NavbarLinkItem[]
+  /** The button's label. */
+  ctaLabel: string
+}
+
+/** Figma's copy, English and Arabic. The menu's pages are not in Figma. */
+const COPY: Record<Locale, NavbarRoundedCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/", current: true },
+      { label: "Services", href: "/services" },
+      {
+        label: "Products",
+        href: "/products",
+        items: [
+          { label: "All products", href: "/products" },
+          { label: "New arrivals", href: "/products/new" },
+          { label: "Best sellers", href: "/products/best-sellers" },
+        ],
+      },
+    ],
+    ctaLabel: "Get Started",
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/", current: true },
+      { label: "الخدمات", href: "/services" },
+      {
+        label: "المنتجات",
+        href: "/products",
+        items: [
+          { label: "كل المنتجات", href: "/products" },
+          { label: "وصل حديثًا", href: "/products/new" },
+          { label: "الأكثر مبيعًا", href: "/products/best-sellers" },
+        ],
+      },
+    ],
+    ctaLabel: "ابدأ الآن",
+  },
+}
+
+export interface NavbarRoundedProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarRoundedCopy> {
+  /** Which language the default copy and labels are in. The page's `dir` sets the direction. */
+  locale?: Locale
+  /** Your logo, a link home: Figma shows the 34px Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * Where the logo links.
+   * @default "/"
+   */
+  logoHref?: string
+  /** The names only assistive tech reads, in place of `locale`'s. */
+  labels?: Partial<NavbarLabels>
+  /** Called when the button is pressed, in the bar or in the Sheet. */
+  onCtaClick?: React.MouseEventHandler<HTMLButtonElement>
+  /** Whether the menu's Sheet is open, to control it. */
+  menuOpen?: boolean
+  /** Called when the menu's Sheet opens or closes. */
+  onMenuOpenChange?: (open: boolean) => void
+}
+
+export function NavbarRounded({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  ctaLabel,
+  onCtaClick,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarRoundedProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+  const items = links ?? copy.links
+  const cta = ctaLabel ?? copy.ctaLabel
+
+  return (
+    <header className={cn("px-4 md:px-6 lg:px-8", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[1248px] items-center gap-4 rounded-full bg-background px-6 py-3">
+        <div className="flex flex-1 md:flex-none">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <nav aria-label={l.nav} className="hidden flex-1 justify-center md:flex">
+          <NavbarLinks links={items} indicator="dot" />
+        </nav>
+        <Button type="button" size="md" onClick={onCtaClick} className="hidden md:inline-flex">
+          {cta}
+        </Button>
+        <NavbarMenu
+          links={items}
+          label={l.openMenu}
+          title={l.menuTitle}
+          closeLabel={l.closeMenu}
+          open={menuOpen}
+          onOpenChange={onMenuOpenChange}
+          className="md:hidden"
+          footer={
+            <Button type="button" size="md" onClick={onCtaClick}>
+              {cta}
+            </Button>
+          }
+        />
+      </div>
+    </header>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const navbarRoundedCopy = COPY

package/registry/blocks/navbar-rounded/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarRounded,
+  navbarRoundedCopy,
+  type NavbarRoundedCopy,
+  type NavbarRoundedProps,
+} from "./NavbarRounded"