feat: adding Badge, Breadcrumb, Checkbox et Radio components

src/components/Badge/_badge.scss

@@ -0,0 +1,58 @@
+@use "../../styles/tokens/typography" as *;
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nds-spacing-2xs);
+  padding: 3px var(--nds-spacing-xs);
+  border-radius: var(--nds-radius-full);
+  @include text-sm;
+  font-weight: 600;
+  line-height: 1.2;
+  width: fit-content;
+  white-space: nowrap;
+  &__primary {
+    --c: var(--nds-primary);
+    --on: var(--nds-on-primary);
+    --soft: var(--nds-primary-soft);
+  }
+  &__neutral {
+    --c: var(--nds-neutral);
+    --on: var(--nds-surface);
+    --soft: color-mix(in srgb, var(--nds-neutral) 16%, transparent);
+  }
+  &__success {
+    --c: var(--nds-success-medium);
+    --on: #fff;
+    --soft: var(--nds-success-low);
+  }
+  &__warning {
+    --c: var(--nds-warning-medium);
+    --on: #fff;
+    --soft: var(--nds-warning-low);
+  }
+  &__error {
+    --c: var(--nds-error-medium);
+    --on: #fff;
+    --soft: var(--nds-error-low);
+  }
+  &__info {
+    --c: var(--nds-info-medium);
+    --on: #fff;
+    --soft: var(--nds-info-low);
+  }
+  &--soft {
+    background-color: var(--soft);
+    color: var(--c);
+  }
+  &--solid {
+    background-color: var(--c);
+    color: var(--on);
+  }
+  &__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--nds-radius-full);
+    background-color: currentColor;
+  }
+}

src/components/Badge/badge.astro

@@ -0,0 +1,15 @@
+---
+export interface Props {
+  type?: "primary" | "neutral" | "success" | "warning" | "error" | "info";
+  variant?: "soft" | "solid";
+}
+const { type = "primary", variant = "soft" } = Astro.props;
+---
+
+<span class={`badge badge__${type} badge--${variant}`}>
+  <slot />
+</span>
+
+<style lang="scss">
+  @use "./_badge.scss";
+</style>

src/components/Breadcrumb/_breadcrumb.scss

@@ -0,0 +1,27 @@
+@use "../../styles/tokens/typography" as *;
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--nds-spacing-xs);
+  @include text-base;
+
+  &__item {
+    text-decoration: none;
+    color: var(--nds-neutral);
+    transition: color 120ms ease;
+    &:hover {
+      color: var(--nds-text);
+    }
+    &:not(:first-child)::before {
+      content: "/";
+      color: var(--nds-disabled);
+      margin-right: var(--nds-spacing-xs);
+    }
+    &--current {
+      color: var(--nds-text);
+      font-weight: 600;
+      pointer-events: none;
+    }
+  }
+}

src/components/Breadcrumb/breadcrumb.astro

@@ -0,0 +1,11 @@
+---
+export interface Props {}
+---
+
+<nav class="breadcrumb" aria-label="Breadcrumb">
+  <slot />
+</nav>
+
+<style lang="scss">
+  @use "./_breadcrumb.scss";
+</style>

src/components/Breadcrumb/breadcrumbItem.astro

@@ -0,0 +1,19 @@
+---
+export interface Props {
+  href?: string;
+  current?: boolean;
+}
+const { href = "#", current = false } = Astro.props;
+---
+
+<a
+  href={href}
+  class={`breadcrumb__item ${current ? "breadcrumb__item--current" : ""}`}
+  aria-current={current ? "page" : undefined}
+>
+  <slot />
+</a>
+
+<style lang="scss">
+  @use "./_breadcrumb.scss";
+</style>

src/components/Checkbox/_checkbox.scss

@@ -0,0 +1,51 @@
+@use "../../styles/tokens/typography" as *;
+
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nds-spacing-xs);
+  cursor: pointer;
+  @include text-base;
+  color: var(--nds-text);
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  &__box {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: var(--nds-border-width-medium) solid var(--nds-border-strong);
+    border-radius: var(--nds-radius-sm);
+    background-color: var(--nds-surface);
+    color: var(--nds-on-primary);
+    transition: all 130ms ease;
+    svg {
+      width: 12px;
+      height: 12px;
+      opacity: 0;
+      transform: scale(0.6);
+      transition: all 130ms ease;
+    }
+  }
+  &__input:checked + &__box {
+    background-color: var(--nds-primary);
+    border-color: var(--nds-primary);
+    svg {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  &__input:focus-visible + &__box {
+    box-shadow: 0 0 0 3px var(--nds-ring);
+  }
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

src/components/Checkbox/checkbox.astro

@@ -0,0 +1,37 @@
+---
+export interface Props {
+  id: string;
+  name?: string;
+  checked?: boolean;
+  disabled?: boolean;
+}
+const { id, name, checked = false, disabled = false } = Astro.props;
+---
+
+<label class={`checkbox ${disabled ? "checkbox--disabled" : ""}`} for={id}>
+  <input
+    type="checkbox"
+    id={id}
+    name={name}
+    checked={checked}
+    disabled={disabled}
+    class="checkbox__input"
+  />
+  <span class="checkbox__box" aria-hidden="true">
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M5 13l4 4L19 7"></path>
+    </svg>
+  </span>
+  <span class="checkbox__label"><slot /></span>
+</label>
+
+<style lang="scss">
+  @use "./_checkbox.scss";
+</style>

src/components/Radio/_radio.scss

@@ -0,0 +1,50 @@
+@use "../../styles/tokens/typography" as *;
+
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nds-spacing-xs);
+  cursor: pointer;
+  @include text-base;
+  color: var(--nds-text);
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  &__dot {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: var(--nds-border-width-medium) solid var(--nds-border-strong);
+    border-radius: var(--nds-radius-full);
+    background-color: var(--nds-surface);
+    transition: border-color 130ms ease;
+    &::after {
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: var(--nds-radius-full);
+      background-color: var(--nds-primary);
+      transform: scale(0);
+      transition: transform 130ms cubic-bezier(0.34, 1.4, 0.6, 1);
+    }
+  }
+  &__input:checked + &__dot {
+    border-color: var(--nds-primary);
+    &::after {
+      transform: scale(1);
+    }
+  }
+  &__input:focus-visible + &__dot {
+    box-shadow: 0 0 0 3px var(--nds-ring);
+  }
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

src/components/Radio/radio.astro

@@ -0,0 +1,28 @@
+---
+export interface Props {
+  id: string;
+  name: string;
+  value?: string;
+  checked?: boolean;
+  disabled?: boolean;
+}
+const { id, name, value, checked = false, disabled = false } = Astro.props;
+---
+
+<label class={`radio ${disabled ? "radio--disabled" : ""}`} for={id}>
+  <input
+    type="radio"
+    id={id}
+    name={name}
+    value={value}
+    checked={checked}
+    disabled={disabled}
+    class="radio__input"
+  />
+  <span class="radio__dot" aria-hidden="true"></span>
+  <span class="radio__label"><slot /></span>
+</label>
+
+<style lang="scss">
+  @use "./_radio.scss";
+</style>