@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/navbar-active-action-with-round/NavbarActiveActionWithRound.tsx

@@ -0,0 +1,120 @@
+"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=Active Action with Round.
+ *
+ * The logo, four links at the end in `muted-foreground`, the current one in
+ * `foreground` with a 5px `primary` dot under it, and a small Outline button.
+ * On Mobile the links move into the Sheet; the button still fits beside the
+ * logo, so it stays.
+ *
+ * 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 NavbarActiveActionWithRoundCopy {
+  /** The links, in reading order. The `current` one has the dot. */
+  links: NavbarLinkItem[]
+  /** The button's label. */
+  ctaLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<Locale, NavbarActiveActionWithRoundCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/" },
+      { label: "Services", href: "/services" },
+      { label: "Pricing", href: "/pricing", current: true },
+      { label: "About Us", href: "/about" },
+    ],
+    ctaLabel: "Log in",
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/" },
+      { label: "الخدمات", href: "/services" },
+      { label: "التسعير", href: "/pricing", current: true },
+      { label: "من نحن", href: "/about" },
+    ],
+    ctaLabel: "تسجيل الدخول",
+  },
+}
+
+export interface NavbarActiveActionWithRoundProps
+  extends React.HTMLAttributes<HTMLElement>,
+    Partial<NavbarActiveActionWithRoundCopy> {
+  /** 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. */
+  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 NavbarActiveActionWithRound({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  ctaLabel,
+  onCtaClick,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarActiveActionWithRoundProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+  const items = links ?? copy.links
+
+  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="dot" tone="muted" />
+        </nav>
+        <Button type="button" variant="outline" tone="primary" size="sm" onClick={onCtaClick}>
+          {ctaLabel ?? copy.ctaLabel}
+        </Button>
+        <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 navbarActiveActionWithRoundCopy = COPY

package/registry/blocks/navbar-active-action-with-round/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarActiveActionWithRound,
+  navbarActiveActionWithRoundCopy,
+  type NavbarActiveActionWithRoundCopy,
+  type NavbarActiveActionWithRoundProps,
+} from "./NavbarActiveActionWithRound"

package/registry/blocks/navbar-centered-floating/NavbarCenteredFloating.tsx

@@ -0,0 +1,121 @@
+"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=Centered Floating.
+ *
+ * A slim `background` pill in the middle of the page, 4px above and below and
+ * 8px at its ends: the logo, four links in `muted-foreground` with the
+ * current one in `foreground`, and a small round Solid button. On Mobile the
+ * pill spans the width and the links move into the Sheet; the button still
+ * fits, so it stays.
+ *
+ * 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 NavbarCenteredFloatingCopy {
+  /** The links, in reading order. The `current` one is in `foreground`. */
+  links: NavbarLinkItem[]
+  /** The button's label. */
+  ctaLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<Locale, NavbarCenteredFloatingCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/", current: true },
+      { label: "Services", href: "/services" },
+      { label: "About Us", href: "/about" },
+      { label: "Pricing", href: "/pricing" },
+    ],
+    ctaLabel: "Log in",
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/", current: true },
+      { label: "الخدمات", href: "/services" },
+      { label: "من نحن", href: "/about" },
+      { label: "التسعير", href: "/pricing" },
+    ],
+    ctaLabel: "تسجيل الدخول",
+  },
+}
+
+export interface NavbarCenteredFloatingProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarCenteredFloatingCopy> {
+  /** 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. */
+  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 NavbarCenteredFloating({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  ctaLabel,
+  onCtaClick,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarCenteredFloatingProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+  const items = links ?? copy.links
+
+  return (
+    <header className={cn("flex justify-center px-4 md:px-6 lg:px-8", className)} {...props}>
+      <div className="flex w-full items-center gap-4 rounded-full bg-background px-2 py-1 md:w-auto">
+        <div className="flex flex-1 md:flex-none">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <nav aria-label={l.nav} className="hidden md:block">
+          <NavbarLinks links={items} indicator="text" tone="muted" />
+        </nav>
+        <Button type="button" size="sm" radius="rounded" onClick={onCtaClick}>
+          {ctaLabel ?? copy.ctaLabel}
+        </Button>
+        <NavbarMenu
+          links={items}
+          label={l.openMenu}
+          title={l.menuTitle}
+          closeLabel={l.closeMenu}
+          open={menuOpen}
+          onOpenChange={onMenuOpenChange}
+          className="md:hidden"
+        />
+      </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 navbarCenteredFloatingCopy = COPY

package/registry/blocks/navbar-centered-floating/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarCenteredFloating,
+  navbarCenteredFloatingCopy,
+  type NavbarCenteredFloatingCopy,
+  type NavbarCenteredFloatingProps,
+} from "./NavbarCenteredFloating"

package/registry/blocks/navbar-default/NavbarDefault.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { NavbarBar, NavbarLinks, NavbarLogo, NavbarMenu, navbarLabels, type NavbarLabels, type NavbarLinkItem } from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=Default.
+ *
+ * The logo at the start and the links at the end, the current one on an
+ * `accent` fill. Desktop and Tablet show the links; on Mobile they move into
+ * the Sheet behind the menu button, and the logo stays.
+ *
+ * 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 NavbarDefaultCopy {
+  /** The links, in reading order. The `current` one carries the `accent` fill. */
+  links: NavbarLinkItem[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<Locale, NavbarDefaultCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/", current: true },
+      { label: "Services", href: "/services" },
+      { label: "Products", href: "/products" },
+    ],
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/", current: true },
+      { label: "الخدمات", href: "/services" },
+      { label: "المنتجات", href: "/products" },
+    ],
+  },
+}
+
+export interface NavbarDefaultProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarDefaultCopy> {
+  /** 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 NavbarDefault({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarDefaultProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const items = links ?? COPY[locale].links
+
+  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 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 navbarDefaultCopy = COPY

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

@@ -0,0 +1,6 @@
+export {
+  NavbarDefault,
+  navbarDefaultCopy,
+  type NavbarDefaultCopy,
+  type NavbarDefaultProps,
+} from "./NavbarDefault"

package/registry/blocks/navbar-e-commerce/NavbarECommerce.tsx

@@ -0,0 +1,212 @@
+"use client"
+
+import * as React from "react"
+import { Baby, Bike, Brush, Computer, Heart, House, Laptop, Paintbrush, PencilRuler, ShoppingCart } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import {
+  NavbarAccount,
+  NavbarBar,
+  NavbarIconButton,
+  NavbarLinks,
+  NavbarLogo,
+  NavbarMenu,
+  NavbarSearch,
+  navbarLabels,
+  type NavbarLabels,
+  type NavbarLinkItem,
+} from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=E-commerce.
+ *
+ * A shop's header in two rows. The first: the logo, a search field that
+ * takes the room between, and home, wishlist, cart and the account 24px apart.
+ * The second, under a `border` line: the categories, each with its icon after
+ * its name, the current one on an `accent` fill.
+ *
+ * Tablet hides the category row behind the menu button and closes the 112px
+ * gaps around the search field to 24px. Mobile keeps the logo, the cart and
+ * the menu button; the search field takes a full-width row of its own, and
+ * home, wishlist and the account join the categories in the Sheet.
+ *
+ * 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 NavbarECommerceCopy {
+  /** The categories, in reading order, each with an icon after its name. The `current` one carries the `accent` fill. */
+  categories: NavbarLinkItem[]
+  /** The home button's name. */
+  homeLabel: string
+  /** The wishlist button's name. */
+  wishlistLabel: string
+  /** The cart button's name. */
+  cartLabel: string
+  /** The account holder's name: the avatar's alternative text, and its initials while the photo loads. */
+  accountName: string
+}
+
+const ICONS = [<Brush key="a" />, <PencilRuler key="b" />, <Computer key="c" />, <Bike key="d" />, <Baby key="e" />, <Paintbrush key="f" />, <House key="g" />, <Laptop key="h" />]
+const HREFS = ["/art", "/study", "/electronics", "/sport", "/toys", "/painting", "/house", "/computers"]
+const categories = (names: string[]): NavbarLinkItem[] =>
+  names.map((label, index) => ({ label, href: HREFS[index]!, icon: ICONS[index], current: index === 1 }))
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<Locale, NavbarECommerceCopy> = {
+  en: {
+    categories: categories(["Art & craft", "Study", "Electronics", "Sport", "Toys", "Painting", "House accessories", "Computer"]),
+    homeLabel: "Home",
+    wishlistLabel: "Wishlist",
+    cartLabel: "Cart",
+    accountName: "Chris Doe",
+  },
+  ar: {
+    categories: categories(["الفنون والحِرف", "الدراسة", "الإلكترونيات", "الرياضة", "الألعاب", "الرسم", "مستلزمات المنزل", "الكمبيوتر"]),
+    homeLabel: "الرئيسية",
+    wishlistLabel: "المفضلة",
+    cartLabel: "سلة التسوق",
+    accountName: "أحمد علي",
+  },
+}
+
+export interface NavbarECommerceProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarECommerceCopy> {
+  /** 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, and the search placeholder, in place of `locale`'s. */
+  labels?: Partial<NavbarLabels>
+  /** The account photo. Without it the avatar shows the name's initials. */
+  avatar?: string
+  /**
+   * Where home links.
+   * @default "/"
+   */
+  homeHref?: string
+  /**
+   * Where the wishlist links.
+   * @default "/wishlist"
+   */
+  wishlistHref?: string
+  /**
+   * Where the cart links.
+   * @default "/cart"
+   */
+  cartHref?: string
+  /**
+   * Where the account links, in the Sheet.
+   * @default "/account"
+   */
+  accountHref?: string
+  /** The search field's value, to control it. */
+  searchValue?: string
+  /** Called as the search field changes. */
+  onSearchChange?: React.ChangeEventHandler<HTMLInputElement>
+  /** 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
+}
+
+const SHEET_EXTRA =
+  "flex min-h-11 items-center rounded-[var(--radius-sm)] px-3 py-2 text-base text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring"
+
+export function NavbarECommerce({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  categories: categoryLinks,
+  homeLabel,
+  wishlistLabel,
+  cartLabel,
+  accountName,
+  avatar,
+  homeHref = "/",
+  wishlistHref = "/wishlist",
+  cartHref = "/cart",
+  accountHref = "/account",
+  searchValue,
+  onSearchChange,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarECommerceProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+  const items = categoryLinks ?? copy.categories
+  const home = homeLabel ?? copy.homeLabel
+  const wishlist = wishlistLabel ?? copy.wishlistLabel
+
+  return (
+    <header className={cn("bg-background", className)} {...props}>
+      {/* One search field: on Mobile it wraps to a row of its own, after the cart and the menu button. */}
+      <NavbarBar className="py-3" contentClassName="flex-wrap gap-x-6 gap-y-3 lg:gap-x-28">
+        <div className="flex flex-1 md:flex-none">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <NavbarSearch
+          label={l.search}
+          placeholder={l.searchPlaceholder}
+          radius="standard"
+          value={searchValue}
+          onChange={onSearchChange}
+          className="order-last w-full md:order-none md:w-auto md:min-w-0 md:flex-1"
+        />
+        <div className="flex items-center gap-6">
+          <NavbarIconButton label={home} icon={<House />} href={homeHref} className="hidden md:inline-flex" />
+          <NavbarIconButton label={wishlist} icon={<Heart />} href={wishlistHref} className="hidden md:inline-flex" />
+          <NavbarIconButton label={cartLabel ?? copy.cartLabel} icon={<ShoppingCart />} href={cartHref} />
+          <NavbarAccount name={accountName ?? copy.accountName} src={avatar} className="hidden md:flex" />
+          <NavbarMenu
+            links={items}
+            label={l.openMenu}
+            title={l.menuTitle}
+            closeLabel={l.closeMenu}
+            open={menuOpen}
+            onOpenChange={onMenuOpenChange}
+            className="lg:hidden"
+          >
+            {/* On Tablet these stay in the bar; on Mobile they join the categories here. */}
+            <ul className="mt-2 flex flex-col gap-1 border-t border-border pt-2 md:hidden">
+              <li>
+                <a href={homeHref} className={SHEET_EXTRA}>
+                  {home}
+                </a>
+              </li>
+              <li>
+                <a href={wishlistHref} className={SHEET_EXTRA}>
+                  {wishlist}
+                </a>
+              </li>
+              <li>
+                <a href={accountHref} className={SHEET_EXTRA}>
+                  {l.account}
+                </a>
+              </li>
+            </ul>
+          </NavbarMenu>
+        </div>
+      </NavbarBar>
+      <nav aria-label={l.nav} className="hidden border-t border-border lg:block">
+        <NavbarBar className="py-1.5">
+          <NavbarLinks links={items} indicator="fill" className="gap-6" />
+        </NavbarBar>
+      </nav>
+    </header>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const navbarECommerceCopy = COPY

package/registry/blocks/navbar-e-commerce/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarECommerce,
+  navbarECommerceCopy,
+  type NavbarECommerceCopy,
+  type NavbarECommerceProps,
+} from "./NavbarECommerce"