@smicolon/fasla-ui 0.6.0 → 0.8.0

package/tailwind-preset.ts

@@ -28,7 +28,7 @@ import type { Config } from "tailwindcss"
  * rounding a source-of-truth value. calc() avoids that entirely.
  *
  * `null` means Figma has the rung on AUTO — the font's own metrics, which CSS
- * spells `normal`. No rung is currently on AUTO: all 144 styles are bound, in
+ * spells `normal`. No rung is currently on AUTO: all 148 styles are bound, in
  * both scripts, at every size. The mechanism stays because AUTO is a legitimate
  * choice Figma can express, and a rung may return to it.
  */
@@ -105,7 +105,7 @@ const leadingFor = (index: 0 | 1) =>
   )
 
 /**
- * Figma sets `letterSpacing` to 0% on all 144 text styles, both scripts, every
+ * Figma sets `letterSpacing` to 0% on all 148 text styles, both scripts, every
  * weight — so the ramp declares no tracking and components should set none.
  * Tailwind's stock `tracking-*` scale is left in place for the one sanctioned
  * exception, the letter-spaced eyebrow that design/DESIGN.md documents as

package/registry/blocks/navbar/Navbar.test.tsx

@@ -1,12 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { render, screen } from "@testing-library/react"
-import { NavbarToggle } from "./Navbar"
-
-describe("NavbarToggle", () => {
-  it("tells assistive tech whether the menu is showing", () => {
-    const { rerender } = render(<NavbarToggle />)
-    expect(screen.getByRole("button").getAttribute("aria-expanded")).toBe("false")
-    rerender(<NavbarToggle open />)
-    expect(screen.getByRole("button", { name: "Close menu" }).getAttribute("aria-expanded")).toBe("true")
-  })
-})

package/registry/blocks/navbar/Navbar.tsx

@@ -1,175 +0,0 @@
-import * as React from "react"
-import { MenuIcon, XIcon } from "lucide-react"
-import { cn } from "../../../src/lib/utils"
-
-export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
-  /** Whether the navbar is sticky */
-  sticky?: boolean
-  /** Whether to show border at bottom */
-  bordered?: boolean
-  children: React.ReactNode
-}
-
-export function Navbar({
-  sticky = true,
-  bordered = true,
-  className,
-  children,
-  ...props
-}: NavbarProps) {
-  return (
-    <nav
-      className={cn(
-        "z-50 flex h-14 w-full items-center bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
-        sticky && "sticky top-0",
-        bordered && "border-b",
-        className
-      )}
-      {...props}
-    >
-      <div className="container flex h-full items-center px-4">
-        {children}
-      </div>
-    </nav>
-  )
-}
-
-export interface NavbarBrandProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode
-}
-
-export function NavbarBrand({ className, children, ...props }: NavbarBrandProps) {
-  return (
-    <div
-      className={cn("flex items-center gap-2 font-semibold", className)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-export interface NavbarContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Alignment of content */
-  align?: "start" | "center" | "end"
-  children: React.ReactNode
-}
-
-export function NavbarContent({
-  align = "start",
-  className,
-  children,
-  ...props
-}: NavbarContentProps) {
-  return (
-    <div
-      className={cn(
-        "flex flex-1 items-center gap-4",
-        align === "start" && "justify-start",
-        align === "center" && "justify-center",
-        align === "end" && "justify-end",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-export interface NavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode
-}
-
-export function NavbarItem({ className, children, ...props }: NavbarItemProps) {
-  return (
-    <div className={cn("flex items-center", className)} {...props}>
-      {children}
-    </div>
-  )
-}
-
-export interface NavbarLinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Whether link is active */
-  active?: boolean
-  children: React.ReactNode
-}
-
-export function NavbarLink({
-  active,
-  className,
-  children,
-  ...props
-}: NavbarLinkProps) {
-  return (
-    <a
-      className={cn(
-        "text-sm font-medium transition-colors hover:text-foreground",
-        active ? "text-foreground" : "text-muted-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </a>
-  )
-}
-
-export interface NavbarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Whether to show on mobile */
-  mobileMenu?: boolean
-  children: React.ReactNode
-}
-
-export function NavbarMenu({
-  mobileMenu,
-  className,
-  children,
-  ...props
-}: NavbarMenuProps) {
-  return (
-    <div
-      className={cn(
-        "flex items-center gap-6",
-        mobileMenu && "hidden md:flex",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-export interface NavbarToggleProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Whether menu is open */
-  open?: boolean
-}
-
-export function NavbarToggle({
-  open,
-  className,
-  ...props
-}: NavbarToggleProps) {
-  return (
-    <button
-      className={cn(
-        "flex h-9 w-9 items-center justify-center rounded-md md:hidden",
-        "hover:bg-accent hover:text-accent-foreground",
-        className
-      )}
-      aria-label={open ? "Close menu" : "Open menu"}
-      // Screen readers announce whether the menu it controls is showing.
-      aria-expanded={open ?? false}
-      {...props}
-    >
-      {open ? (
-        <XIcon size={20} strokeWidth={1.5} />
-      ) : (
-        <MenuIcon size={20} strokeWidth={1.5} />
-      )}
-    </button>
-  )
-}

package/registry/blocks/sidebar/Sidebar.test.tsx

@@ -1,39 +0,0 @@
-import { describe, it, expect, vi } from "vitest"
-import { render, screen, fireEvent } from "@testing-library/react"
-import { Sidebar, SidebarCollapseButton } from "./Sidebar"
-
-describe("Sidebar onCollapsedChange", () => {
-  it("is called when the collapse button inside it is pressed", () => {
-    const onSidebarChange = vi.fn()
-    const onButtonChange = vi.fn()
-    render(
-      <Sidebar onCollapsedChange={onSidebarChange}>
-        <SidebarCollapseButton collapsed={false} onCollapsedChange={onButtonChange} />
-      </Sidebar>
-    )
-    fireEvent.click(screen.getByRole("button", { name: "Collapse sidebar" }))
-    expect(onButtonChange).toHaveBeenCalledWith(true)
-    expect(onSidebarChange).toHaveBeenCalledWith(true)
-  })
-
-  it("calls a handler given to both the sidebar and the button once", () => {
-    const onChange = vi.fn()
-    render(
-      <Sidebar collapsed onCollapsedChange={onChange}>
-        <SidebarCollapseButton collapsed onCollapsedChange={onChange} />
-      </Sidebar>
-    )
-    fireEvent.click(screen.getByRole("button", { name: "Expand sidebar" }))
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenCalledWith(false)
-  })
-
-  it("is not passed to the aside", () => {
-    const { container } = render(
-      <Sidebar onCollapsedChange={() => {}}>
-        <span />
-      </Sidebar>
-    )
-    expect(container.querySelector("aside")?.getAttributeNames()).toEqual(["class"])
-  })
-})

package/registry/blocks/sidebar/Sidebar.tsx

@@ -1,212 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronsLeftIcon } from "lucide-react"
-import { cn } from "../../../src/lib/utils"
-
-export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
-  /** Whether the sidebar is collapsed */
-  collapsed?: boolean
-  /** Called when collapse state changes */
-  onCollapsedChange?: (collapsed: boolean) => void
-  /** Sidebar width when expanded */
-  width?: "sm" | "default" | "lg"
-  children: React.ReactNode
-}
-
-const widthClasses = {
-  sm: "w-56",
-  default: "w-64",
-  lg: "w-72",
-}
-
-/** The enclosing Sidebar's onCollapsedChange, for SidebarCollapseButton. */
-const SidebarCollapsedChangeContext = React.createContext<
-  ((collapsed: boolean) => void) | undefined
->(undefined)
-
-export function Sidebar({
-  collapsed = false,
-  onCollapsedChange,
-  width = "default",
-  className,
-  children,
-  ...props
-}: SidebarProps) {
-  return (
-    <SidebarCollapsedChangeContext.Provider value={onCollapsedChange}>
-      <aside
-        className={cn(
-          "flex h-full flex-col border-e bg-background transition-all duration-200",
-          collapsed ? "w-16" : widthClasses[width],
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </aside>
-    </SidebarCollapsedChangeContext.Provider>
-  )
-}
-
-export interface SidebarHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode
-}
-
-export function SidebarHeader({
-  className,
-  children,
-  ...props
-}: SidebarHeaderProps) {
-  return (
-    <div
-      className={cn("flex h-14 items-center border-b px-4", className)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-export interface SidebarContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode
-}
-
-export function SidebarContent({
-  className,
-  children,
-  ...props
-}: SidebarContentProps) {
-  return (
-    <div
-      className={cn("flex-1 overflow-auto p-2", className)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-export interface SidebarFooterProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode
-}
-
-export function SidebarFooter({
-  className,
-  children,
-  ...props
-}: SidebarFooterProps) {
-  return (
-    <div
-      className={cn("border-t p-2", className)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-export interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Group label */
-  label?: string
-  children: React.ReactNode
-}
-
-export function SidebarGroup({
-  label,
-  className,
-  children,
-  ...props
-}: SidebarGroupProps) {
-  return (
-    <div className={cn("py-2", className)} {...props}>
-      {label && (
-        <div className="mb-2 px-2 text-xs font-semibold uppercase text-muted-foreground">
-          {label}
-        </div>
-      )}
-      <div className="space-y-1">{children}</div>
-    </div>
-  )
-}
-
-export interface SidebarItemProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Icon element */
-  icon?: React.ReactNode
-  /** Whether item is active */
-  active?: boolean
-  /** Whether sidebar is collapsed (hides label) */
-  collapsed?: boolean
-  children: React.ReactNode
-}
-
-export function SidebarItem({
-  icon,
-  active,
-  collapsed,
-  className,
-  children,
-  ...props
-}: SidebarItemProps) {
-  return (
-    <button
-      className={cn(
-        "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
-        "hover:bg-accent hover:text-accent-foreground",
-        active && "bg-accent text-accent-foreground",
-        collapsed && "justify-center px-2",
-        className
-      )}
-      {...props}
-    >
-      {icon && <span className="shrink-0">{icon}</span>}
-      {!collapsed && <span className="truncate">{children}</span>}
-    </button>
-  )
-}
-
-export interface SidebarCollapseButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  collapsed: boolean
-  onCollapsedChange: (collapsed: boolean) => void
-}
-
-export function SidebarCollapseButton({
-  collapsed,
-  onCollapsedChange,
-  className,
-  ...props
-}: SidebarCollapseButtonProps) {
-  const onSidebarCollapsedChange = React.useContext(SidebarCollapsedChangeContext)
-
-  // Tells the enclosing Sidebar too, once if both were given the same handler
-  const toggle = () => {
-    onCollapsedChange(!collapsed)
-    if (onSidebarCollapsedChange && onSidebarCollapsedChange !== onCollapsedChange) {
-      onSidebarCollapsedChange(!collapsed)
-    }
-  }
-
-  return (
-    <button
-      onClick={toggle}
-      className={cn(
-        "flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
-        className
-      )}
-      aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-      {...props}
-    >
-      {/* Points at the edge the sidebar collapses toward, so it mirrors in RTL. */}
-      <ChevronsLeftIcon
-        size={16}
-        strokeWidth={1.5}
-        className={cn("transition-transform motion-reduce:transition-none rtl:-scale-x-100", collapsed && "rotate-180")}
-      />
-    </button>
-  )
-}