@_linked/primitives 1.0.5

package/.changeset/README.md

@@ -0,0 +1,20 @@
+# Changesets
+
+This package uses [changesets](https://github.com/changesets/changesets) for version management and publishing.
+
+## Adding a changeset
+
+When making a change that should trigger a new release, run:
+
+```bash
+npx changeset
+```
+
+This generates a markdown file in `.changeset/` describing the change. Commit it with your PR.
+
+On merge to `main`, the publish workflow either:
+
+1. Creates (or updates) a **Release PR** that bumps the version + updates `CHANGELOG.md`, or
+2. If the Release PR is already merged, publishes the new version to npm.
+
+Changes that don't need a release (docs, CI config, tooling) can skip the changeset — the check is a warning, not a block.

package/.changeset/config.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "linked-cm/primitives" }
+  ],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.github/workflows/changeset-check.yml

@@ -0,0 +1,44 @@
+name: Changeset Check
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  changeset-check:
+    name: Check for changeset
+    # Skip the check on the automated Release PR.
+    if: ${{ github.head_ref != 'changeset-release/main' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Check for changeset files
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: files } = await github.rest.pulls.listFiles({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: context.issue.number,
+            });
+
+            const hasChangeset = files.some(f =>
+              f.filename.startsWith('.changeset/') &&
+              f.filename.endsWith('.md') &&
+              f.filename !== '.changeset/README.md'
+            );
+
+            if (!hasChangeset) {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body: "No changeset found. If this PR should trigger a release, run `npx changeset` and commit the generated file.\n\nIf this change doesn't need a release (docs, CI config, etc.), you can ignore this message."
+              });
+              core.warning('No changeset file found in this PR.');
+            }

package/.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build-and-test:
+    name: Build & Test
+    # Skip CI on the automated Release PR created by changesets/action.
+    if: ${{ !(github.event.pull_request.base.ref == 'main' && github.head_ref == 'changeset-release/main') }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.16.0
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Build
+        run: npm run build
+
+      - name: Test
+        run: npm test --if-present

package/.github/workflows/publish.yml

@@ -0,0 +1,42 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Publish Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.16.0
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Build
+        run: npm run build
+
+      - name: Create release Pull Request or Publish
+        uses: changesets/action@v1
+        with:
+          publish: npx changeset publish
+          title: 'chore: release'
+          commit: 'chore: release'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @\_linked/primitives
+
+## 1.0.5
+
+### Patch Changes
+
+- [`479b093`](https://github.com/linked-cm/primitives/commit/479b093a35399f2d8628b7d1bd5e38b1e2e006d6) - Initial release under the new publishing setup.

package/lib/cjs/components/Accordion.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+declare const Root: React.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Trigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Accordion: {
+    Root: React.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Root, Item, Trigger, Content };

package/lib/cjs/components/Accordion.module.css

@@ -0,0 +1,101 @@
+.Root {
+  border-radius: var(--accordion-radius, var(--box-radius));
+  width: 100%;
+  background-color: var(--accordion-bg, var(--box-bg));
+  box-shadow: var(--accordion-shadow, var(--box-shadow));
+}
+
+.Item {
+  overflow: hidden;
+  margin-top: 1px;
+
+  &:first-child {
+    margin-top: 0;
+    border-top-left-radius: var(--accordion-radius, var(--box-radius));
+    border-top-right-radius: var(--accordion-radius, var(--box-radius));
+  }
+
+  &:last-child {
+    border-bottom-left-radius: var(--accordion-radius, var(--box-radius));
+    border-bottom-right-radius: var(--accordion-radius, var(--box-radius));
+  }
+
+  &:focus-within {
+    position: relative;
+    z-index: 1;
+    /* box-shadow: var(--accordion-shadow);*/
+  }
+}
+
+.Header {
+  display: flex;
+}
+
+.Trigger {
+  font-family: inherit;
+  background-color: transparent;
+  padding: 0 var(--accordion-padding, var(--box-padding));
+  height: var(--accordion-trigger-height, 2.75rem);
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--accordion-trigger-font-size, var(--typography-small-size));
+  line-height: 1;
+  color: var(--box-text);
+  /* box-shadow: var(--accordion-shadow);*/
+  background-color: var(--accordion-bg, var(--box-bg));
+  transition: var(--transition-normal);
+
+  &:hover {
+    background-color: var(--accordion-bg-active, var(--bg-hover));
+  }
+
+  &[data-state='open'] > .Icon {
+    transform: rotate(180deg);
+  }
+}
+
+.Icon {
+  transition: transform var(--transition-duration-normal)
+    var(--transition-easing);
+}
+
+.Content {
+  overflow: hidden;
+  font-size: var(--typography-font-size);
+  color: var(--typography-color);
+  background-color: var(--accordion-content-bg, var(--box-bg));
+
+  &[data-state='open'] {
+    animation: slideDown var(--transition-duration-normal)
+      var(--transition-easing);
+  }
+
+  &[data-state='closed'] {
+    animation: slideUp var(--transition-duration-normal)
+      var(--transition-easing);
+  }
+}
+
+.ContentText {
+  padding: var(--accordion-content-padding, var(--box-padding));
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/lib/cjs/components/AlertDialog.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+declare const Root: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const Trigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Overlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Title: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const Description: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const Action: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Header: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const Footer: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+export declare const AlertDialog: {
+    Root: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+    Trigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Header: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Title: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Action: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Root, Trigger, Overlay, Content, Header, Footer, Title, Description, Action, Cancel, };

package/lib/cjs/components/AlertDialog.module.css

@@ -0,0 +1,80 @@
+.Overlay {
+  background-color: var(--alertdialog-overlay-bg, var(--modal-overlay-bg));
+  position: fixed;
+  inset: 0;
+  animation: overlayShow
+    var(--alertdialog-animation-duration, var(--transition-duration-normal))
+    var(--transition-easing);
+}
+
+.Content {
+  background-color: var(--alertdialog-bg, var(--modal-bg));
+  color: var(--alertdialog-text, var(--modal-text));
+  border: 1px solid var(--alertdialog-border, var(--modal-border));
+  border-radius: var(--alertdialog-radius, var(--modal-radius));
+  box-shadow: var(--alertdialog-shadow, var(--modal-shadow));
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: var(--alertdialog-transform, translate(-50%, -50%));
+  width: min(90vw, var(--alertdialog-max-width, 32rem));
+  max-height: 85vh;
+  padding: var(--alertdialog-padding, var(--modal-padding));
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--alertdialog-gap, var(--modal-gap));
+  animation: var(--alertdialog-animation-name, contentShow)
+    var(--alertdialog-animation-duration, var(--transition-duration-normal))
+    var(--transition-easing);
+}
+
+.Title {
+  margin: 0;
+  color: var(--heading-5-color);
+  font-size: var(--heading-5-font-size);
+  font-weight: var(--heading-5-font-weight);
+  font-family: var(--heading-5-font-family);
+  letter-spacing: var(--heading-5-letter-spacing);
+  line-height: var(--heading-5-line-height);
+}
+
+.Description {
+  margin: 0;
+  color: var(--typography-color);
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-font-size);
+  line-height: var(--typography-line-height);
+}
+
+.Header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--alertdialog-gap, var(--modal-gap));
+}
+
+.Footer {
+  display: flex;
+  gap: var(--alertdialog-gap, var(--modal-gap));
+  justify-content: flex-end;
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}

package/lib/cjs/components/AspectRatio.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+declare const Root: React.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
+export declare const AspectRatio: {
+    Root: React.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
+};
+export { Root };

package/lib/cjs/components/AspectRatio.module.css

@@ -0,0 +1,28 @@
+.Root {
+  overflow: hidden;
+  width: 100%;
+  border-radius: var(--aspectratio-radius, var(--media-radius));
+  background-color: var(--aspectratio-bg, var(--media-bg));
+  box-shadow: var(--aspectratio-shadow, var(--media-shadow));
+}
+
+.Image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.Fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--aspectratio-bg, var(--media-bg));
+  color: var(--aspectratio-fallback-color, var(--typography-auxiliary-color));
+  font-family: var(--aspectratio-font-family, var(--typography-font-family));
+  font-size: var(--aspectratio-font-size, var(--typography-font-size));
+  font-weight: var(--aspectratio-font-weight, var(--typography-font-weight));
+  line-height: var(--aspectratio-line-height, var(--typography-line-height));
+}

package/lib/cjs/components/Avatar.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+declare const Root: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const Image: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const Fallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Avatar: {
+    Root: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Image: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+    Fallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+};
+export { Root, Image, Fallback };

package/lib/cjs/components/Avatar.module.css

@@ -0,0 +1,43 @@
+.Root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  user-select: none;
+  width: var(--avatar-size, var(--avatar-size-md));
+  height: var(--avatar-size, var(--avatar-size-md));
+  border-radius: var(--avatar-radius, var(--media-radius));
+  background-color: var(--avatar-bg, var(--media-bg));
+  color: var(--avatar-color, var(--typography-auxiliary-color));
+  box-shadow: var(--avatar-shadow, var(--media-shadow));
+}
+
+.Root[data-size='sm'] {
+  --avatar-size: var(--avatar-size-sm);
+}
+
+.Root[data-size='lg'] {
+  --avatar-size: var(--avatar-size-lg);
+}
+
+.Image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.Fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--avatar-bg, var(--media-bg));
+  color: var(--avatar-color, var(--typography-auxiliary-color));
+  font-family: var(--avatar-font-family, var(--typography-font-family));
+  font-size: var(--avatar-font-size, var(--typography-font-size));
+  font-weight: var(--avatar-font-weight, var(--typography-font-weight));
+  line-height: var(--avatar-line-height, var(--typography-line-height));
+}

package/lib/cjs/components/Breadcrumb.d.ts

@@ -0,0 +1,41 @@
+/**
+ * copy from `https://ui.shadcn.com/docs/components/breadcrumb`
+ */
+import * as React from 'react';
+declare const Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    separator?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+declare const List: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+declare const Page: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const Separator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+    displayName: string;
+};
+declare const Ellipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+    displayName: string;
+};
+export declare const Breadcrumb: {
+    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+        separator?: React.ReactNode;
+    } & React.RefAttributes<HTMLElement>>;
+    List: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+    Page: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Separator: {
+        ({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+        displayName: string;
+    };
+    Ellipsis: {
+        ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+        displayName: string;
+    };
+};
+export { Root, List, Item, Link, Page, Separator, Ellipsis };

package/lib/cjs/components/Breadcrumb.module.css

@@ -0,0 +1,78 @@
+.Root {
+  color: var(--breadcrumb-text, var(--navigation-text));
+}
+
+.List {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--breadcrumb-gap, var(--navigation-gap));
+  overflow-wrap: anywhere;
+  font-family: var(--typography-font-family);
+  font-size: var(--breadcrumb-font-size, var(--typography-font-size));
+  color: inherit;
+}
+
+@media (min-width: 640px) {
+  .List {
+    gap: calc(var(--breadcrumb-gap, var(--navigation-gap)) / 2);
+  }
+}
+
+.Item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--breadcrumb-item-gap, var(--breadcrumb-gap, var(--navigation-gap)));
+}
+
+.Link {
+  color: inherit;
+  transition: var(--breadcrumb-transition, var(--transition-normal));
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--breadcrumb-text-hover, var(--link-color));
+  }
+}
+
+.Page {
+  font-weight: var(--typography-font-weight);
+  color: var(--breadcrumb-text-active, var(--navigation-text-active));
+}
+
+.Separator {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+  color: var(--breadcrumb-separator, var(--navigation-border));
+
+  svg {
+    width: var(--breadcrumb-icon-size, var(--icon-size-sm));
+    height: var(--breadcrumb-icon-size, var(--icon-size-sm));
+  }
+}
+
+.Ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--breadcrumb-ellipsis-size, var(--icon-size-md));
+  height: var(--breadcrumb-ellipsis-size, var(--icon-size-md));
+
+  .moreHorizontal {
+    width: var(--breadcrumb-icon-size, var(--icon-size-sm));
+    height: var(--breadcrumb-icon-size, var(--icon-size-sm));
+  }
+
+  .srOnly {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+}

package/lib/cjs/components/Button.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    variant?: 'solid' | 'outline' | 'ghost' | 'link';
+    color?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'small' | 'medium' | 'large' | 'default';
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button };