monochrome 0.2.0 → 0.4.0

package/src/react/menu.tsx

@@ -1,230 +0,0 @@
-"use client"
-
-import { createContext, useContext, useId, useRef } from "react"
-import type { BaseProps } from "./shared.js"
-
-type MenuContextValue = {
-  id: string
-  root?: boolean
-  menubar?: boolean
-  submenu?: boolean
-  first?: boolean
-}
-type MenuPopupContextValue = { claimFirst: () => boolean }
-
-const MenuContext = createContext<MenuContextValue | null>(null)
-const MenuPopupContext = createContext<MenuPopupContextValue | null>(null)
-
-function useMenuContext() {
-  const context = useContext(MenuContext)
-  if (!context) throw new Error("Menu components must be used within Menu.Root")
-  return context
-}
-
-function useMenuPopupContext() {
-  const context = useContext(MenuPopupContext)
-  if (!context) throw new Error("Menu components must be used within Menu.Popover")
-  return context
-}
-
-function Root({ children, menubar, ...props }: BaseProps & { menubar?: boolean }) {
-  const id = useId()
-  return (
-    <MenuContext.Provider value={{ id, root: true, menubar }}>
-      <div {...props} id={`mcr:menu:${id}`}>
-        {children}
-      </div>
-    </MenuContext.Provider>
-  )
-}
-
-function Trigger({ children, ...props }: BaseProps) {
-  const context = useMenuContext()
-  return (
-    <button
-      {...props}
-      type="button"
-      id={`mct:menu:${context.id}`}
-      aria-controls={`mcc:menu:${context.id}`}
-      aria-expanded="false"
-      aria-haspopup="menu"
-      tabIndex={context.root || context.first ? 0 : -1}
-      role={context.submenu ? "menuitem" : "button"}
-    >
-      {children}
-    </button>
-  )
-}
-
-function Popover({ children, ...props }: BaseProps) {
-  const context = useMenuContext()
-  const claimed = useRef(false)
-  claimed.current = false
-  const inner = (
-    <MenuPopupContext.Provider
-      value={{
-        claimFirst: () => {
-          if (!claimed.current) {
-            claimed.current = true
-            return true
-          }
-          return false
-        },
-      }}
-    >
-      {children}
-    </MenuPopupContext.Provider>
-  )
-  return context.menubar ? (
-    // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: WAI-ARIA menubar
-    <ul {...props} role="menubar">
-      {inner}
-    </ul>
-  ) : (
-    <ul
-      {...props}
-      // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: WAI-ARIA menu
-      role="menu"
-      id={`mcc:menu:${context.id}`}
-      aria-labelledby={`mct:menu:${context.id}`}
-      aria-hidden="true"
-      popover="manual"
-    >
-      {inner}
-    </ul>
-  )
-}
-
-function Item({
-  children,
-  disabled,
-  href,
-  ...props
-}: BaseProps & { disabled?: boolean; href?: string }) {
-  return (
-    <li role="none">
-      {disabled ? (
-        <span {...props} role="menuitem" aria-disabled="true" tabIndex={-1}>
-          {children}
-        </span>
-      ) : href ? (
-        <a {...props} role="menuitem" href={href} tabIndex={-1}>
-          {children}
-        </a>
-      ) : (
-        <button {...props} type="button" role="menuitem" tabIndex={-1}>
-          {children}
-        </button>
-      )}
-    </li>
-  )
-}
-
-function CheckboxItem({
-  children,
-  checked,
-  disabled,
-  ...props
-}: BaseProps & { checked?: boolean; disabled?: boolean }) {
-  return (
-    <li role="none">
-      {disabled ? (
-        <span
-          {...props}
-          role="menuitemcheckbox"
-          aria-checked={checked ?? false}
-          aria-disabled="true"
-          tabIndex={-1}
-        >
-          {children}
-        </span>
-      ) : (
-        <button
-          {...props}
-          type="button"
-          role="menuitemcheckbox"
-          aria-checked={checked ?? false}
-          tabIndex={-1}
-        >
-          {children}
-        </button>
-      )}
-    </li>
-  )
-}
-
-function RadioItem({
-  children,
-  checked,
-  disabled,
-  ...props
-}: BaseProps & { checked?: boolean; disabled?: boolean }) {
-  return (
-    <li role="none">
-      {disabled ? (
-        <span
-          {...props}
-          role="menuitemradio"
-          aria-checked={checked ?? false}
-          aria-disabled="true"
-          tabIndex={-1}
-        >
-          {children}
-        </span>
-      ) : (
-        <button
-          {...props}
-          type="button"
-          role="menuitemradio"
-          aria-checked={checked ?? false}
-          tabIndex={-1}
-        >
-          {children}
-        </button>
-      )}
-    </li>
-  )
-}
-
-function Label({ children, ...props }: BaseProps) {
-  return (
-    <li {...props} role="presentation">
-      {children}
-    </li>
-  )
-}
-
-function Separator(props: Omit<BaseProps, "children">) {
-  // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: WAI-ARIA menu separator
-  // biome-ignore lint/a11y/useSemanticElements: separator must be <li> inside menu <ul>
-  // biome-ignore lint/a11y/useFocusableInteractive: non-focusable separator per WAI-ARIA
-  // biome-ignore lint/a11y/useAriaPropsForRole: static separator, not interactive range
-  return <li {...props} role="separator" />
-}
-
-function Group({ children, ...props }: BaseProps) {
-  const parentContext = useMenuContext()
-  const popupContext = useMenuPopupContext()
-  const isFirst = popupContext.claimFirst()
-  const id = useId()
-  const isFirstInMenubar = isFirst && parentContext.menubar && !parentContext.submenu
-  return (
-    <MenuContext.Provider value={{ id, submenu: true, first: isFirstInMenubar }}>
-      <li {...props} role="none">
-        {children}
-      </li>
-    </MenuContext.Provider>
-  )
-}
-
-export const Menu = {
-  Root,
-  Trigger,
-  Popover,
-  Item,
-  CheckboxItem,
-  RadioItem,
-  Label,
-  Separator,
-  Group,
-}

package/src/react/shared.tsx

@@ -1,16 +0,0 @@
-"use client"
-
-import type { HTMLAttributes, ReactNode } from "react"
-
-export type BaseProps = HTMLAttributes<HTMLElement> & { children: ReactNode }
-
-export const buildId = (base: string, id?: string) => (id ? `${base}:${id}` : base)
-
-export const HiddenUntilFound = () => (
-  <script
-    // biome-ignore lint/security/noDangerouslySetInnerHtml: SSR hydration
-    dangerouslySetInnerHTML={{
-      __html: "document.currentScript.parentNode.setAttribute('hidden','until-found')",
-    }}
-  />
-)

package/src/react/tabs.tsx

@@ -1,116 +0,0 @@
-"use client"
-
-import { createContext, isValidElement, useContext, useId } from "react"
-import { type BaseProps, buildId, HiddenUntilFound } from "./shared.js"
-
-type TabsContextValue = {
-  baseId: string
-  selected?: string
-  orientation: "horizontal" | "vertical"
-}
-const TabsContext = createContext<TabsContextValue | null>(null)
-
-function useTabsContext() {
-  const context = useContext(TabsContext)
-  if (!context) throw new Error("Tabs components must be used within Tabs.Root")
-  return context
-}
-
-function findFirstValue(node: unknown): string | undefined {
-  if (!node || typeof node !== "object") return
-  if (isValidElement(node)) {
-    const nodeProps = node.props as { value?: string; children?: unknown }
-    if (nodeProps.value !== undefined) return nodeProps.value
-    return findFirstValue(nodeProps.children)
-  }
-  if (Array.isArray(node))
-    for (const child of node) {
-      const value = findFirstValue(child)
-      if (value !== undefined) return value
-    }
-}
-
-function Root({
-  children,
-  defaultValue,
-  orientation,
-  ...props
-}: BaseProps & { defaultValue?: string; orientation?: "horizontal" | "vertical" }) {
-  const baseId = useId()
-  const dir = orientation ?? "horizontal"
-  return (
-    <TabsContext.Provider
-      value={{ baseId, selected: defaultValue ?? findFirstValue(children), orientation: dir }}
-    >
-      <div {...props} data-orientation={dir} id={`mcr:tabs:${baseId}`}>
-        {children}
-      </div>
-    </TabsContext.Provider>
-  )
-}
-
-function List({ children, ...props }: BaseProps) {
-  const context = useTabsContext()
-  return (
-    <div {...props} role="tablist" aria-orientation={context.orientation}>
-      {children}
-    </div>
-  )
-}
-
-function Tab({
-  children,
-  value,
-  id,
-  selected,
-  disabled,
-  ...props
-}: BaseProps & { value?: string; id?: string; selected?: boolean; disabled?: boolean }) {
-  const context = useTabsContext()
-  const fullId = buildId(context.baseId, id ?? value)
-  const isSelected = selected ?? value === context.selected
-  return (
-    <button
-      {...props}
-      type="button"
-      role="tab"
-      id={`mct:tabs:${fullId}`}
-      aria-selected={isSelected}
-      aria-controls={`mcc:tabs:${fullId}`}
-      tabIndex={isSelected ? 0 : -1}
-      aria-disabled={disabled || undefined}
-    >
-      {children}
-    </button>
-  )
-}
-
-function Panel({
-  children,
-  value,
-  id,
-  selected,
-  focusable = true,
-  ...props
-}: BaseProps & { value?: string; id?: string; selected?: boolean; focusable?: boolean }) {
-  const context = useTabsContext()
-  const fullId = buildId(context.baseId, id ?? value)
-  const isSelected = selected ?? value === context.selected
-  return (
-    <div
-      {...props}
-      role="tabpanel"
-      id={`mcc:tabs:${fullId}`}
-      aria-labelledby={`mct:tabs:${fullId}`}
-      aria-hidden={!isSelected}
-      hidden={isSelected ? undefined : true}
-      tabIndex={focusable ? (isSelected ? 0 : -1) : undefined}
-      data-orientation={context.orientation}
-    >
-      {!isSelected && <HiddenUntilFound />}
-      {children}
-    </div>
-  )
-}
-
-export const Tabs = { Root, List, Tab, Panel }