@1e99/components 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,261 @@
-# Temporary Holding Version
+# @1e99/components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Componentes React compartilhados pelos produtos 1e99. `Navbar`,
+`GoogleSignInButton` e `Selector` foram extraídos fielmente de
+`domain-website` e `curriculo`, sem introduzir dependência de Next.js,
+autenticação, i18n ou geração de PDF.
+
+## Instalação futura
+
+Após a primeira publicação pública, instale o pacote no app consumidor:
+
+```sh
+pnpm add @1e99/components
+```
+
+O pacote declara `react`, `react-dom`, `react-icons` e `tailwindcss` como
+peer dependencies. Os apps 1e99 já usam `react-icons` 5.7.0; ele fornece os
+ícones Google e Lucide que o pacote renderiza, sem duplicar SVGs manualmente.
+
+### Tailwind CSS 4
+
+O Tailwind 4 não lê automaticamente classes presentes em `node_modules`.
+Adicione esta diretiva à folha CSS que já contém `@import "tailwindcss"`, com
+o caminho relativo àquela folha:
+
+```css
+@source "../../node_modules/@1e99/components/dist";
+```
+
+Nos consumidores atuais, a alteração futura será em:
+
+- `domain-website/src/app/globals.css`;
+- `curriculo/src/app/brand.css`.
+
+Os dois projetos já fornecem os tokens usados pela navbar, incluindo
+`surface-page`, `content-primary`, `content-secondary`, `border-subtle`,
+`action-primary`, `surface-raised`, `content-inverse`, `shadow-card`,
+`shadow-float`, `shadow-focus`, `ease-brand`, `shell`, `control` e `card`.
+O pacote não redefine esses tokens nem importa CSS global no aplicativo.
+
+## Uso
+
+```tsx
+import {useState} from "react";
+import {
+  GoogleSignInButton,
+  Navbar,
+  Selector,
+} from "@1e99/components";
+
+type LocaleOption = {
+  label: string;
+  languageTag: string;
+  value: string;
+};
+
+const localeOptions = [
+  { value: "pt", label: "Português", languageTag: "pt-BR" },
+  { value: "en", label: "English", languageTag: "en" },
+  { value: "es", label: "Español", languageTag: "es" },
+] satisfies readonly LocaleOption[];
+
+function Header() {
+  const [locale, setLocale] = useState("pt");
+
+  return (
+    <Navbar
+      brand={<a href="/"><BrandLogo /></a>}
+      items={[
+        { href: "/apps", label: "Apps" },
+        { href: "/about", label: "Sobre" },
+      ]}
+      navigationLabel="Navegação principal"
+      renderLink={({ href, children, className }) => (
+        <Link className={className} href={href}>{children}</Link>
+      )}
+      actions={
+        <div className="hidden items-center gap-3 md:flex">
+          <Selector
+            label={t("language")}
+            onValueChange={setLocale}
+            options={localeOptions}
+            renderOption={({ option }) => (
+              <span lang={option.languageTag}>{option.label}</span>
+            )}
+            renderTrigger={({ selectedOption, value }) => (
+              <span lang={selectedOption?.languageTag}>
+                {selectedOption?.label ?? value}
+              </span>
+            )}
+            value={locale}
+          />
+          <GoogleSignInButton
+            label={t("signInWithGoogle")}
+            onClick={startGoogleLogin}
+          />
+        </div>
+      }
+      width="content"
+      layer="above"
+      linkTreatment="underlined"
+      linkWeight="semibold"
+      mobileNavigation={{
+        menuLabel: t("openNavigation"),
+        navigationLabel: t("mobileNavigation"),
+        actions: <MobileAccountActions />,
+      }}
+    />
+  );
+}
+```
+
+| Prop | Opções | Uso nos projetos existentes |
+| --- | --- | --- |
+| `width` | `content` (padrão), `wide` | domain-website / curriculo |
+| `layer` | `standard` (padrão), `above` | curriculo / domain-website |
+| `linkTreatment` | `plain` (padrão), `underlined` | curriculo / domain-website |
+| `linkWeight` | `semibold` (padrão), `bold` | domain-website / curriculo |
+| `mobileNavigation` | ausente ou objeto de disclosure | curriculo / domain-website |
+
+`brand` e `actions` são slots e, junto da navegação desktop, permanecem como
+regiões irmãs no container — o mesmo layout dos dois headers fonte. O objeto
+`mobileNavigation` reproduz o menu do domain (botão azul de 48px e painel
+elevado); ele fica ausente no perfil do currículo. `renderLink` recebe `href`,
+`children` e `className`, permitindo usar `next/link`, `next-intl/link` ou
+outro roteador sem acoplar o pacote a ele.
+
+### Controles de header
+
+`GoogleSignInButton` é o único tratamento visual para entrar com Google e
+segue o botão do `domain-website` em todos os usos. `label` é obrigatório e
+deve receber a string já traduzida pelo consumidor; também aceita atributos
+comportamentais nativos de botão (`onClick`, `disabled`, `aria-*`). Não aceita
+variante nem `className`; autenticação e estado de carregamento são do
+consumidor.
+
+`Selector` é um disclosure genérico para uma coleção controlada. Cada opção
+tem apenas `value` estável e `label` como contrato-base; o consumidor pode
+acrescentar campos ao tipar sua própria coleção, como `languageTag`, descrição
+ou ícone. `value` e `onValueChange` são controlados pelo consumidor: ao clicar
+em uma opção, o componente informa o novo valor e fecha o disclosure, mas não
+navega nem atualiza estado por conta própria.
+
+`renderOption` recebe `option`, `isSelected` e `select`; ele renderiza somente
+o conteúdo interno do botão que o pacote controla. `renderTrigger` recebe
+`selectedOption` e `value` para personalizar o conteúdo do gatilho. Dessa
+forma, atributos como `lang` ficam no conteúdo do aplicativo consumidor, não
+no tipo genérico do pacote. O componente preserva botões com `aria-pressed`,
+`select-none`, as densidades `standard` (padrão), `compact` e
+`compact-mobile` e `whiteSurface`. Sem `triggerAriaLabel`, o nome acessível do
+gatilho vem do conteúdo selecionado visível; use essa prop quando o consumidor
+precisar de um nome mais descritivo e atualize-o junto do valor controlado.
+
+`Navbar` não recebe props de idioma nem de autenticação. `items`, `actions` e
+`mobileNavigation.actions` são os pontos de composição para qualquer controle
+ou CTA do produto. No Storybook, `Navigation/Navbar` inclui o playground de
+referência com o logo oficial fixo; seus args serializáveis controlam itens,
+seletor, botão Google e menu móvel. O seletor e o botão também possuem stories
+próprias em `Controls/Selector` e `Controls/GoogleSignInButton`.
+
+## Desenvolvimento e testes
+
+```sh
+pnpm lint
+pnpm lint:fix
+pnpm format
+pnpm storybook
+pnpm test
+pnpm test:stories
+pnpm build
+pnpm build-storybook
+pnpm pack:check
+```
+
+`pnpm lint` aplica o padrão Google para TypeScript e React; `pnpm lint:fix`
+corrige automaticamente o que for seguro, e `pnpm format` é seu atalho. O
+Husky executa `pnpm lint` e `pnpm test` antes de cada commit local, portanto
+ambos devem passar antes de o histórico ser criado.
+
+`pnpm test` roda testes de contrato em Vitest + Testing Library. As stories
+exibem o playground configurável da navbar, o seletor genérico e o botão
+Google, incluindo o SVG oficial somente como asset de demonstração do
+Storybook. Elas são verificadas em Chromium por `pnpm test:stories`, com os
+addons oficiais de acessibilidade e Vitest.
+
+Em uma máquina Linux nova, instale as dependências do Chromium uma vez antes
+do teste de stories:
+
+```sh
+pnpm exec playwright install chromium
+sudo pnpm exec playwright install-deps chromium
+```
+
+## Organização do código
+
+Cada componente é uma unidade em `src/components/<nome>/`: implementação,
+testes e story (quando houver) ficam juntos. `src/index.ts` é o único ponto de
+entrada público; mudar a organização interna não altera como os aplicativos
+importam `@1e99/components`. Testes transversais ficam em `test/`.
+
+## Publicação
+
+O destino recomendado é o npm público, como `@1e99/components`: ele evita
+configuração de registry e token em cada consumidor. GitHub Packages é uma
+alternativa para distribuição privada, mas exige registry e token GitHub nos
+aplicativos.
+
+`.github/workflows/ci.yml` valida pull requests e pushes para `main` com lint,
+tipos, testes, build, Storybook e prévia do tarball. `.github/workflows/publish.yml`
+repete essas verificações e publica somente quando uma tag `vX.Y.Z` corresponde
+exatamente à versão em `package.json` e aponta para um commit ancestral de
+`main`. Os actions usados nos workflows estão fixados em commits revisáveis.
+
+### Primeiro release pelo CI
+
+O bootstrap usa temporariamente o secret de repositório `NPM_TOKEN`. Crie-o no
+npm como token granular, com **Bypass two-factor authentication**, permissão
+**Read and write (publish and stage)** limitada ao escopo `@1e99` e expiração
+curta. Salve-o em GitHub → `1e99/components` → Settings → Secrets and variables
+→ Actions como `NPM_TOKEN`. Nunca grave ou compartilhe esse valor por chat,
+issues, commits ou logs.
+
+Como `@1e99/components` ainda não existe antes do primeiro publish, o escopo
+inteiro é uma exceção temporária de bootstrap: revogue o token assim que OIDC
+for configurado. O npm anuncia a remoção do publish direto com tokens granular
+de bypass de 2FA em janeiro de 2027; se o primeiro release for adiado além
+disso, use o fluxo de staged publishing do npm em vez de manter um token.
+
+Antes de criar a tag pública, confirme a política de licença: o pacote está
+como `UNLICENSED` e essa decisão precisa de aprovação explícita para publicação
+pública.
+
+Envie os commits e a tag correspondente à versão:
+
+```sh
+git push origin main
+git tag v0.1.0
+git push origin v0.1.0
+```
+
+O workflow recusa a tag se `package.json` não estiver em `0.1.0` e publica com
+`publishConfig.access: public` se todas as verificações passarem.
+Configure também regras do GitHub para exigir o CI antes de merge em `main` e
+restringir a criação e atualização de tags `v*` a mantenedores autorizados.
+
+### Migrar para Trusted Publishing
+
+Depois que a primeira release for publicada, habilite 2FA na conta npm e abra
+as configurações de `@1e99/components` no npm. Em **Trusted Publisher**, escolha
+GitHub Actions e informe organização `1e99`, repositório `components` e arquivo
+de workflow `publish.yml`; permita publicação direta com `npm publish`.
+
+Em seguida, apague o secret `NPM_TOKEN` do GitHub e revogue o token no npm. As
+tags futuras usarão OIDC com credenciais efêmeras do GitHub Actions e gerarão
+provenance automaticamente. Para uma próxima versão, atualize a versão e envie
+a tag criada pelo gerenciador:
+
+```sh
+pnpm version patch
+git push origin main --follow-tags
+```

package/dist/index.d.ts

@@ -0,0 +1,71 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type GoogleSignInButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'type'> & {
+    label: ReactNode;
+};
+declare function GoogleSignInButton({ label, ...buttonProps }: GoogleSignInButtonProps): react.JSX.Element;
+
+type SelectorOption = {
+    label: ReactNode;
+    value: string;
+};
+type SelectorDensity = 'compact' | 'compact-mobile' | 'standard';
+type SelectorRenderOptionContext<TOption extends SelectorOption> = {
+    isSelected: boolean;
+    option: TOption;
+    select: () => void;
+};
+type SelectorRenderTriggerContext<TOption extends SelectorOption> = {
+    selectedOption: TOption | undefined;
+    value: string;
+};
+type SelectorBaseProps = {
+    label: string;
+    triggerAriaLabel?: string;
+    value: string;
+};
+type SelectorProps<TOption extends SelectorOption = SelectorOption> = SelectorBaseProps & {
+    density?: SelectorDensity;
+    onValueChange: (value: string) => void;
+    options: readonly TOption[];
+    renderOption?: (context: SelectorRenderOptionContext<TOption>) => ReactNode;
+    renderTrigger?: (context: SelectorRenderTriggerContext<TOption>) => ReactNode;
+    whiteSurface?: boolean;
+};
+declare function Selector<TOption extends SelectorOption = SelectorOption>({ density, label, onValueChange, options, renderOption, renderTrigger, triggerAriaLabel, value, whiteSurface, }: SelectorProps<TOption>): react.JSX.Element;
+
+type NavbarItem = {
+    href: string;
+    label: ReactNode;
+};
+type NavbarLinkRenderer = (props: {
+    children: ReactNode;
+    className: string;
+    href: string;
+}) => ReactNode;
+type NavbarWidth = 'content' | 'wide';
+type NavbarLinkTreatment = 'plain' | 'underlined';
+type NavbarLinkWeight = 'bold' | 'semibold';
+type NavbarLayer = 'above' | 'standard';
+type NavbarMobileNavigation = {
+    actions?: ReactNode;
+    menuLabel: string;
+    navigationLabel: string;
+};
+type NavbarProps = {
+    actions?: ReactNode;
+    brand: ReactNode;
+    items: readonly NavbarItem[];
+    layer?: NavbarLayer;
+    linkTreatment?: NavbarLinkTreatment;
+    linkWeight?: NavbarLinkWeight;
+    mobileNavigation?: NavbarMobileNavigation;
+    navigationLabel: string;
+    renderLink?: NavbarLinkRenderer;
+    width?: NavbarWidth;
+};
+declare function Navbar({ actions, brand, items, layer, linkTreatment, linkWeight, mobileNavigation, navigationLabel, renderLink, width, }: NavbarProps): react.JSX.Element;
+
+export { GoogleSignInButton, Navbar, Selector };
+export type { GoogleSignInButtonProps, NavbarItem, NavbarLayer, NavbarLinkRenderer, NavbarLinkTreatment, NavbarLinkWeight, NavbarMobileNavigation, NavbarProps, NavbarWidth, SelectorDensity, SelectorOption, SelectorProps, SelectorRenderOptionContext, SelectorRenderTriggerContext };

package/dist/index.js

@@ -0,0 +1,189 @@
+// src/components/google-sign-in-button/google-sign-in-button.tsx
+import { FcGoogle } from "react-icons/fc";
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonClassName = "inline-flex min-h-12 w-full cursor-pointer items-center justify-center gap-3 rounded-control border border-border-subtle bg-surface-raised px-control-x py-control-y text-label font-semibold whitespace-nowrap text-content-primary shadow-card transition-[translate,scale,background-color] duration-200 ease-brand hover:-translate-y-0.5 hover:bg-brand-cloud active:scale-[0.97] focus-visible:outline-none focus-visible:shadow-focus disabled:cursor-wait disabled:opacity-70 motion-reduce:transform-none";
+function GoogleSignInButton({ label, ...buttonProps }) {
+  return /* @__PURE__ */ jsxs("button", { ...buttonProps, className: buttonClassName, type: "button", children: [
+    /* @__PURE__ */ jsx(
+      FcGoogle,
+      {
+        "aria-hidden": "true",
+        className: "size-5 shrink-0",
+        "data-testid": "google-mark"
+      }
+    ),
+    label
+  ] });
+}
+
+// src/components/selector/selector.tsx
+import { LuChevronDown } from "react-icons/lu";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var standardTriggerClassName = "flex w-full cursor-pointer list-none select-none items-center justify-between rounded-control border border-border-subtle py-control-y text-label font-semibold text-content-primary shadow-card transition-colors duration-200 ease-brand hover:bg-brand-cloud focus-visible:outline-none focus-visible:shadow-focus [&::-webkit-details-marker]:hidden";
+var optionClassName = "flex min-h-12 w-full select-none items-center rounded-control px-3 text-label font-semibold text-content-secondary transition-colors duration-200 ease-brand hover:bg-brand-cloud hover:text-content-primary focus-visible:outline-none focus-visible:shadow-focus";
+function closeSelectorDisclosure(element) {
+  element.closest("details")?.removeAttribute("open");
+}
+function getNavigationLayout(density) {
+  if (density === "compact") {
+    return { trigger: "h-12 gap-2", wrapper: "w-auto" };
+  }
+  if (density === "compact-mobile") {
+    return {
+      trigger: "h-12 gap-2 px-3 md:gap-4 md:px-4 md:min-w-32",
+      wrapper: "w-auto"
+    };
+  }
+  return { trigger: "min-h-12 gap-4 px-4 md:min-w-32", wrapper: "w-full md:w-auto" };
+}
+function SelectorTrigger({
+  densityClassName,
+  renderTrigger,
+  selectedOption,
+  triggerAriaLabel,
+  value
+}) {
+  const triggerContent = renderTrigger?.({ selectedOption, value }) ?? selectedOption?.label ?? value;
+  return /* @__PURE__ */ jsxs2("summary", { "aria-label": triggerAriaLabel, className: `${standardTriggerClassName} ${densityClassName}`, children: [
+    /* @__PURE__ */ jsx2("span", { children: triggerContent }),
+    /* @__PURE__ */ jsx2(
+      LuChevronDown,
+      {
+        "aria-hidden": "true",
+        className: "selector-disclosure-arrow size-5 shrink-0 text-content-secondary transition-transform duration-200 ease-brand motion-reduce:transition-none group-open:rotate-180"
+      }
+    )
+  ] });
+}
+function Selector({
+  density = "standard",
+  label,
+  onValueChange,
+  options,
+  renderOption,
+  renderTrigger,
+  triggerAriaLabel,
+  value,
+  whiteSurface = false
+}) {
+  const selectedOption = options.find((option) => option.value === value);
+  const layout = getNavigationLayout(density);
+  const surfaceClassName = whiteSurface ? "bg-white" : "bg-surface-raised";
+  return /* @__PURE__ */ jsxs2("details", { className: `selector-disclosure group relative ${layout.wrapper}`, children: [
+    /* @__PURE__ */ jsx2(
+      SelectorTrigger,
+      {
+        densityClassName: layout.trigger,
+        renderTrigger,
+        selectedOption,
+        triggerAriaLabel,
+        value
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "ul",
+      {
+        "aria-label": label,
+        className: `mt-2 w-full overflow-hidden rounded-control border border-border-subtle ${surfaceClassName} p-1 shadow-float md:absolute md:top-full md:right-0 md:z-60 md:min-w-44`,
+        children: options.map((option) => {
+          const isSelected = option.value === value;
+          const select = () => onValueChange(option.value);
+          const optionContent = renderOption?.({ isSelected, option, select }) ?? option.label;
+          return /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(
+            "button",
+            {
+              "aria-pressed": isSelected,
+              className: `${optionClassName} text-left ${isSelected ? "bg-brand-cloud text-content-primary" : ""}`,
+              onClick: (event) => {
+                select();
+                closeSelectorDisclosure(event.currentTarget);
+              },
+              type: "button",
+              children: optionContent
+            }
+          ) }, option.value);
+        })
+      }
+    )
+  ] });
+}
+
+// src/components/navbar/navbar.tsx
+import { Fragment } from "react";
+import { LuMenu } from "react-icons/lu";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var baseLinkClassName = "text-label text-content-secondary transition-colors duration-200 ease-brand hover:text-content-primary focus-visible:rounded-control focus-visible:outline-none focus-visible:shadow-focus";
+var underlinedLinkClassName = "relative after:absolute after:-bottom-1.5 after:left-0 after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-action-primary after:transition-transform after:duration-200 after:ease-brand hover:after:scale-x-100 focus-visible:after:scale-x-100";
+var mobileLinkClassName = "flex min-h-12 items-center rounded-control px-3 text-label font-semibold text-content-secondary transition-colors duration-200 ease-brand hover:text-content-primary focus-visible:outline-none focus-visible:shadow-focus";
+function Navbar({
+  actions,
+  brand,
+  items,
+  layer = "standard",
+  linkTreatment = "plain",
+  linkWeight = "semibold",
+  mobileNavigation,
+  navigationLabel,
+  renderLink,
+  width = "content"
+}) {
+  const linkClassName = [
+    baseLinkClassName,
+    linkWeight === "bold" ? "font-bold" : "font-semibold",
+    linkTreatment === "underlined" ? underlinedLinkClassName : ""
+  ].filter(Boolean).join(" ");
+  const containerWidthClassName = width === "wide" ? "max-w-7xl" : "max-w-5xl";
+  const layerClassName = layer === "above" ? "z-50" : "z-40";
+  const renderLinks = (className) => items.map((item) => /* @__PURE__ */ jsx3(Fragment, { children: renderLink ? renderLink({
+    children: item.label,
+    className,
+    href: item.href
+  }) : /* @__PURE__ */ jsx3("a", { className, href: item.href, children: item.label }) }, item.href));
+  return /* @__PURE__ */ jsx3(
+    "header",
+    {
+      className: `sticky top-0 ${layerClassName} border-b border-border-subtle bg-surface-page/90 text-label font-semibold backdrop-blur-lg`,
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: `mx-auto flex min-h-20 ${containerWidthClassName} items-center justify-between gap-4 px-shell`,
+          children: [
+            /* @__PURE__ */ jsx3("div", { className: "shrink-0", children: brand }),
+            /* @__PURE__ */ jsx3("nav", { "aria-label": navigationLabel, className: "hidden items-center gap-6 lg:flex", children: renderLinks(linkClassName) }),
+            actions,
+            mobileNavigation ? /* @__PURE__ */ jsxs3("details", { className: "relative md:hidden", children: [
+              /* @__PURE__ */ jsxs3(
+                "summary",
+                {
+                  "aria-label": mobileNavigation.menuLabel,
+                  className: "flex size-12 cursor-pointer list-none items-center justify-center rounded-control bg-action-primary text-content-inverse shadow-card transition-[translate,scale,background-color] duration-200 ease-brand active:scale-[0.97] focus-visible:outline-none focus-visible:shadow-focus [&::-webkit-details-marker]:hidden",
+                  children: [
+                    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: mobileNavigation.menuLabel }),
+                    /* @__PURE__ */ jsx3(LuMenu, { "aria-hidden": "true", className: "size-6" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                "nav",
+                {
+                  "aria-label": mobileNavigation.navigationLabel,
+                  className: "absolute top-14 right-0 w-72 rounded-card border border-border-subtle bg-surface-raised p-3 shadow-float",
+                  children: [
+                    renderLinks(mobileLinkClassName),
+                    mobileNavigation.actions ? /* @__PURE__ */ jsx3("div", { className: "mt-2 space-y-3 border-t border-border-subtle pt-3", children: mobileNavigation.actions }) : null
+                  ]
+                }
+              )
+            ] }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  GoogleSignInButton,
+  Navbar,
+  Selector
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/google-sign-in-button/google-sign-in-button.tsx","../src/components/selector/selector.tsx","../src/components/navbar/navbar.tsx"],"sourcesContent":["import type {ButtonHTMLAttributes, ReactNode} from 'react';\nimport {FcGoogle} from 'react-icons/fc';\n\nexport type GoogleSignInButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children' | 'className' | 'type'\n> & {\n  label: ReactNode;\n};\n\nconst buttonClassName =\n  'inline-flex min-h-12 w-full cursor-pointer items-center justify-center gap-3 rounded-control border border-border-subtle bg-surface-raised px-control-x py-control-y text-label font-semibold whitespace-nowrap text-content-primary shadow-card transition-[translate,scale,background-color] duration-200 ease-brand hover:-translate-y-0.5 hover:bg-brand-cloud active:scale-[0.97] focus-visible:outline-none focus-visible:shadow-focus disabled:cursor-wait disabled:opacity-70 motion-reduce:transform-none';\n\nexport function GoogleSignInButton(\n    {label, ...buttonProps}: GoogleSignInButtonProps,\n) {\n  return (\n    <button {...buttonProps} className={buttonClassName} type=\"button\">\n      <FcGoogle\n        aria-hidden=\"true\"\n        className=\"size-5 shrink-0\"\n        data-testid=\"google-mark\"\n      />\n      {label}\n    </button>\n  );\n}\n","import {type ReactNode} from 'react';\nimport {LuChevronDown} from 'react-icons/lu';\n\nexport type SelectorOption = {\n  label: ReactNode;\n  value: string;\n};\n\nexport type SelectorDensity = 'compact' | 'compact-mobile' | 'standard';\n\nexport type SelectorRenderOptionContext<TOption extends SelectorOption> = {\n  isSelected: boolean;\n  option: TOption;\n  select: () => void;\n};\n\nexport type SelectorRenderTriggerContext<TOption extends SelectorOption> = {\n  selectedOption: TOption | undefined;\n  value: string;\n};\n\ntype SelectorBaseProps = {\n  label: string;\n  triggerAriaLabel?: string;\n  value: string;\n};\n\nexport type SelectorProps<TOption extends SelectorOption = SelectorOption> =\n  SelectorBaseProps & {\n    density?: SelectorDensity;\n    onValueChange: (value: string) => void;\n    options: readonly TOption[];\n    renderOption?: (context: SelectorRenderOptionContext<TOption>) => ReactNode;\n    renderTrigger?: (\n      context: SelectorRenderTriggerContext<TOption>,\n    ) => ReactNode;\n    whiteSurface?: boolean;\n  };\n\nconst standardTriggerClassName =\n  'flex w-full cursor-pointer list-none select-none items-center justify-between rounded-control border border-border-subtle py-control-y text-label font-semibold text-content-primary shadow-card transition-colors duration-200 ease-brand hover:bg-brand-cloud focus-visible:outline-none focus-visible:shadow-focus [&::-webkit-details-marker]:hidden';\n\nconst optionClassName =\n  'flex min-h-12 w-full select-none items-center rounded-control px-3 text-label font-semibold text-content-secondary transition-colors duration-200 ease-brand hover:bg-brand-cloud hover:text-content-primary focus-visible:outline-none focus-visible:shadow-focus';\n\nfunction closeSelectorDisclosure(element: HTMLElement) {\n  element.closest('details')?.removeAttribute('open');\n}\n\nfunction getNavigationLayout(density: SelectorDensity) {\n  if (density === 'compact') {\n    return {trigger: 'h-12 gap-2', wrapper: 'w-auto'};\n  }\n\n  if (density === 'compact-mobile') {\n    return {\n      trigger: 'h-12 gap-2 px-3 md:gap-4 md:px-4 md:min-w-32',\n      wrapper: 'w-auto',\n    };\n  }\n\n  return {trigger: 'min-h-12 gap-4 px-4 md:min-w-32', wrapper: 'w-full md:w-auto'};\n}\n\nfunction SelectorTrigger<TOption extends SelectorOption>({\n  densityClassName,\n  renderTrigger,\n  selectedOption,\n  triggerAriaLabel,\n  value,\n}: {\n  densityClassName: string;\n  renderTrigger?: (context: SelectorRenderTriggerContext<TOption>) => ReactNode;\n  selectedOption: TOption | undefined;\n  triggerAriaLabel?: string;\n  value: string;\n}) {\n  const triggerContent = renderTrigger?.({selectedOption, value}) ??\n    selectedOption?.label ?? value;\n\n  return (\n    <summary aria-label={triggerAriaLabel} className={`${standardTriggerClassName} ${densityClassName}`}>\n      <span>{triggerContent}</span>\n      <LuChevronDown\n        aria-hidden=\"true\"\n        className=\"selector-disclosure-arrow size-5 shrink-0 text-content-secondary transition-transform duration-200 ease-brand motion-reduce:transition-none group-open:rotate-180\"\n      />\n    </summary>\n  );\n}\n\nexport function Selector<TOption extends SelectorOption = SelectorOption>({\n  density = 'standard',\n  label,\n  onValueChange,\n  options,\n  renderOption,\n  renderTrigger,\n  triggerAriaLabel,\n  value,\n  whiteSurface = false,\n}: SelectorProps<TOption>) {\n  const selectedOption = options.find((option) => option.value === value);\n  const layout = getNavigationLayout(density);\n  const surfaceClassName = whiteSurface ? 'bg-white' : 'bg-surface-raised';\n\n  return (\n    <details className={`selector-disclosure group relative ${layout.wrapper}`}>\n      <SelectorTrigger\n        densityClassName={layout.trigger}\n        renderTrigger={renderTrigger}\n        selectedOption={selectedOption}\n        triggerAriaLabel={triggerAriaLabel}\n        value={value}\n      />\n      <ul\n        aria-label={label}\n        className={`mt-2 w-full overflow-hidden rounded-control border border-border-subtle ${surfaceClassName} p-1 shadow-float md:absolute md:top-full md:right-0 md:z-60 md:min-w-44`}\n      >\n        {options.map((option) => {\n          const isSelected = option.value === value;\n          const select = () => onValueChange(option.value);\n          const optionContent = renderOption?.({isSelected, option, select}) ??\n            option.label;\n\n          return (\n            <li key={option.value}>\n              <button\n                aria-pressed={isSelected}\n                className={`${optionClassName} text-left ${isSelected ? 'bg-brand-cloud text-content-primary' : ''}`}\n                onClick={(event) => {\n                  select();\n                  closeSelectorDisclosure(event.currentTarget);\n                }}\n                type=\"button\"\n              >\n                {optionContent}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </details>\n  );\n}\n","import {Fragment, type ReactNode} from 'react';\nimport {LuMenu} from 'react-icons/lu';\n\nexport type NavbarItem = {\n  href: string;\n  label: ReactNode;\n};\n\nexport type NavbarLinkRenderer = (props: {\n  children: ReactNode;\n  className: string;\n  href: string;\n}) => ReactNode;\n\nexport type NavbarWidth = 'content' | 'wide';\nexport type NavbarLinkTreatment = 'plain' | 'underlined';\nexport type NavbarLinkWeight = 'bold' | 'semibold';\nexport type NavbarLayer = 'above' | 'standard';\nexport type NavbarMobileNavigation = {\n  actions?: ReactNode;\n  menuLabel: string;\n  navigationLabel: string;\n};\n\nexport type NavbarProps = {\n  actions?: ReactNode;\n  brand: ReactNode;\n  items: readonly NavbarItem[];\n  layer?: NavbarLayer;\n  linkTreatment?: NavbarLinkTreatment;\n  linkWeight?: NavbarLinkWeight;\n  mobileNavigation?: NavbarMobileNavigation;\n  navigationLabel: string;\n  renderLink?: NavbarLinkRenderer;\n  width?: NavbarWidth;\n};\n\nconst baseLinkClassName =\n  'text-label text-content-secondary transition-colors duration-200 ease-brand hover:text-content-primary focus-visible:rounded-control focus-visible:outline-none focus-visible:shadow-focus';\n\nconst underlinedLinkClassName =\n  'relative after:absolute after:-bottom-1.5 after:left-0 after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-action-primary after:transition-transform after:duration-200 after:ease-brand hover:after:scale-x-100 focus-visible:after:scale-x-100';\n\nconst mobileLinkClassName =\n  'flex min-h-12 items-center rounded-control px-3 text-label font-semibold text-content-secondary transition-colors duration-200 ease-brand hover:text-content-primary focus-visible:outline-none focus-visible:shadow-focus';\n\nexport function Navbar({\n  actions,\n  brand,\n  items,\n  layer = 'standard',\n  linkTreatment = 'plain',\n  linkWeight = 'semibold',\n  mobileNavigation,\n  navigationLabel,\n  renderLink,\n  width = 'content',\n}: NavbarProps) {\n  const linkClassName = [\n    baseLinkClassName,\n    linkWeight === 'bold' ? 'font-bold' : 'font-semibold',\n    linkTreatment === 'underlined' ? underlinedLinkClassName : '',\n  ]\n      .filter(Boolean)\n      .join(' ');\n  const containerWidthClassName = width === 'wide' ? 'max-w-7xl' : 'max-w-5xl';\n  const layerClassName = layer === 'above' ? 'z-50' : 'z-40';\n  const renderLinks = (className: string) =>\n    items.map((item) => (\n      <Fragment key={item.href}>\n        {renderLink ? (\n          renderLink({\n            children: item.label,\n            className,\n            href: item.href,\n          })\n        ) : (\n          <a className={className} href={item.href}>\n            {item.label}\n          </a>\n        )}\n      </Fragment>\n    ));\n\n  return (\n    <header\n      className={`sticky top-0 ${layerClassName} border-b border-border-subtle bg-surface-page/90 text-label font-semibold backdrop-blur-lg`}\n    >\n      <div\n        className={`mx-auto flex min-h-20 ${containerWidthClassName} items-center justify-between gap-4 px-shell`}\n      >\n        <div className=\"shrink-0\">{brand}</div>\n        <nav aria-label={navigationLabel} className=\"hidden items-center gap-6 lg:flex\">\n          {renderLinks(linkClassName)}\n        </nav>\n        {actions}\n        {mobileNavigation ? (\n          <details className=\"relative md:hidden\">\n            <summary\n              aria-label={mobileNavigation.menuLabel}\n              className=\"flex size-12 cursor-pointer list-none items-center justify-center rounded-control bg-action-primary text-content-inverse shadow-card transition-[translate,scale,background-color] duration-200 ease-brand active:scale-[0.97] focus-visible:outline-none focus-visible:shadow-focus [&::-webkit-details-marker]:hidden\"\n            >\n              <span className=\"sr-only\">{mobileNavigation.menuLabel}</span>\n              <LuMenu aria-hidden=\"true\" className=\"size-6\" />\n            </summary>\n            <nav\n              aria-label={mobileNavigation.navigationLabel}\n              className=\"absolute top-14 right-0 w-72 rounded-card border border-border-subtle bg-surface-raised p-3 shadow-float\"\n            >\n              {renderLinks(mobileLinkClassName)}\n              {mobileNavigation.actions ? (\n                <div className=\"mt-2 space-y-3 border-t border-border-subtle pt-3\">\n                  {mobileNavigation.actions}\n                </div>\n              ) : null}\n            </nav>\n          </details>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,81 @@
 {
   "name": "@1e99/components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Shared React components for 1e99 applications.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/1e99/components.git"
+  },
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "format": "pnpm lint:fix",
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix --max-warnings 0",
+    "prepare": "husky",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --project unit",
+    "test:watch": "vitest --project unit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test:stories": "vitest run --project storybook",
+    "pack:check": "pnpm build && npm pack --dry-run"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.7.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.5",
+    "@storybook/addon-a11y": "^10.6.3",
+    "@storybook/addon-vitest": "^10.6.3",
+    "@storybook/react-vite": "^10.6.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "26.6.5",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/browser-playwright": "5.0.5",
+    "eslint": "^9.39.5",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "jsdom": "^28.0.0",
+    "playwright": "1.64.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-icons": "5.7.0",
+    "storybook": "^10.6.3",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^9.0.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.72.0",
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5"
+  },
+  "packageManager": "pnpm@12.9.1",
+  "publishConfig": {
+    "access": "public"
+  }
+}