@1e99/components 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 1e99
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,130 @@
-# 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 reutilizáveis, estilizados com Tailwind CSS.
+
+## Instalação
+
+```sh
+pnpm add @1e99/components
+```
+
+O pacote declara `react`, `react-dom`, `react-icons` e `tailwindcss` como peer
+dependencies.
+
+### Tailwind CSS 4
+
+O Tailwind 4 não examina automaticamente classes em `node_modules`. Na folha
+CSS que importa o Tailwind, adicione uma diretiva `@source` cujo caminho seja
+relativo a ela:
+
+```css
+@import "tailwindcss";
+@source "../../node_modules/@1e99/components/dist";
+```
+
+Os componentes usam tokens Tailwind do tema do aplicativo, como
+`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 cria tokens nem importa CSS global.
+
+## Uso
+
+```tsx
+import {useState} from "react";
+import {
+  GoogleSignInButton,
+  Navbar,
+  Selector,
+} from "@1e99/components";
+
+const languageOptions = [
+  {label: "Português", value: "pt"},
+  {label: "English", value: "en"},
+] as const;
+
+function Header() {
+  const [language, setLanguage] = useState("pt");
+
+  return (
+    <Navbar
+      actions={
+        <div className="hidden items-center gap-3 md:flex">
+          <Selector
+            label="Idioma"
+            onValueChange={setLanguage}
+            options={languageOptions}
+            value={language}
+          />
+          <GoogleSignInButton
+            label="Entrar com Google"
+            onClick={() => undefined}
+          />
+        </div>
+      }
+      brand={<a aria-label="Início" href="/">Marca</a>}
+      items={[
+        {href: "/products", label: "Produtos"},
+        {href: "/about", label: "Sobre"},
+      ]}
+      navigationLabel="Navegação principal"
+    />
+  );
+}
+```
+
+`Navbar` mantém marca, itens de navegação e ações como regiões independentes.
+Use `renderLink` para integrar um roteador próprio sem acoplar o pacote a uma
+biblioteca de navegação. Os itens podem ser adicionados ou removidos, e
+`actions` e `mobileNavigation.actions` aceitam qualquer nó React.
+
+| Prop | Opções | Finalidade |
+| --- | --- | --- |
+| `width` | `content` (padrão), `wide` | Largura máxima da navegação |
+| `layer` | `standard` (padrão), `above` | Camada de empilhamento |
+| `linkTreatment` | `plain` (padrão), `underlined` | Aparência dos links |
+| `linkWeight` | `semibold` (padrão), `bold` | Peso dos links |
+| `mobileNavigation` | ausente ou objeto de disclosure | Navegação móvel opcional |
+
+`GoogleSignInButton` recebe uma `label` obrigatória e os atributos nativos de
+um botão, como `onClick`, `disabled` e `aria-*`. Autenticação, estado de
+carregamento e traduções pertencem ao aplicativo que o utiliza.
+
+`Selector` é controlado: `value` determina a opção visível e
+`onValueChange` informa uma nova escolha. As opções exigem somente `value` e
+`label`, mas podem ser estendidas com outros campos e apresentadas por
+`renderOption` e `renderTrigger`. O componente não navega nem muda estado por
+conta própria.
+
+## Desenvolvimento
+
+```sh
+pnpm lint
+pnpm lint:fix
+pnpm format
+pnpm storybook
+pnpm test
+pnpm test:stories
+pnpm build
+pnpm build-storybook
+pnpm pack:check
+```
+
+Husky executa `pnpm lint` e `pnpm test` antes de cada commit. As stories são
+verificadas em Chromium por `pnpm test:stories`; em uma máquina Linux nova,
+instale as dependências uma vez:
+
+```sh
+pnpm exec playwright install chromium
+sudo pnpm exec playwright install-deps chromium
+```
+
+Cada componente fica em `src/components/<nome>/`, junto dos seus testes e
+stories. `src/index.ts` é o ponto de entrada público, e testes transversais
+ficam em `test/`.
+
+## Licença
+
+Este pacote é licenciado sob a [MIT License](LICENSE). Você pode usar, copiar,
+modificar, distribuir e sublicenciar o software, inclusive comercialmente,
+desde que preserve o aviso de copyright e a licença.

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,82 @@
 {
   "name": "@1e99/components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Reusable React components built with Tailwind CSS.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/1e99/components.git"
+  },
+  "license": "MIT",
+  "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",
+    "LICENSE",
+    "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"
+  }
+}