banhaten 0.1.0

package/registry/components/expanded/tabs.css

@@ -0,0 +1,197 @@
+.ds-tabs {
+  --tabs-bg-neutral-subtle: var(--bh-bg-neutral-subtle);
+  --tabs-bg-default: var(--bh-bg-default);
+  --tabs-border-default: var(--bh-border-default);
+  --tabs-content-brand: var(--bh-content-brand-default);
+  --tabs-content-default: var(--bh-content-default);
+  --tabs-content-subtle: var(--bh-content-subtle);
+  --tabs-radius-md: var(--bh-radius-md-6);
+  --tabs-radius-lg: var(--bh-radius-lg-8);
+  --tabs-radius-full: var(--bh-radius-full);
+  --tabs-space-xxs: var(--bh-space-xxs-2);
+  --tabs-space-xs: var(--bh-space-xs-4);
+  --tabs-space-sm: var(--bh-space-sm-6);
+  --tabs-space-md: var(--bh-space-md-8);
+  --tabs-space-lg: var(--bh-space-lg-10);
+  --tabs-space-xl: var(--bh-space-xl-12);
+  --tabs-space-3xl: var(--bh-space-3xl-16);
+  --tabs-label-padding-x: var(--tabs-space-xxs);
+  --tabs-height-segment-md: var(--bh-space-7xl-40);
+  --tabs-height-segment-sm: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  --tabs-height-segment-xs: var(--bh-space-6xl-32);
+  --tabs-height-underline-md: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
+  --tabs-height-underline-sm: var(--bh-space-8xl-48);
+  --tabs-height-underline-content: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  --tabs-shadow-selected: var(--shadow-button-soft);
+
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: visible;
+  color: var(--tabs-content-subtle);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-md-regular-font-size);
+  font-style: normal;
+  font-weight: var(--bh-text-body-md-regular-font-weight);
+  line-height: var(--bh-text-body-md-regular-line-height);
+  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
+}
+
+.ds-tabs *,
+.ds-tabs *::before,
+.ds-tabs *::after {
+  box-sizing: border-box;
+}
+
+.ds-tabs--full {
+  width: 100%;
+}
+
+.ds-tabs--segment,
+.ds-tabs--rounded {
+  align-items: center;
+  gap: var(--tabs-space-xxs);
+  padding: var(--tabs-space-xxs);
+  background: var(--tabs-bg-neutral-subtle);
+}
+
+.ds-tabs--segment {
+  border-radius: var(--tabs-radius-full);
+}
+
+.ds-tabs--rounded {
+  border-radius: var(--tabs-radius-lg);
+}
+
+.ds-tabs--underline {
+  align-items: center;
+  gap: var(--tabs-space-3xl);
+  border-bottom: var(--bh-space-xxxs-1) solid var(--tabs-border-default);
+}
+
+.ds-tabs__tab {
+  appearance: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  color: var(--tabs-content-subtle);
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.ds-tabs__tab:focus-visible {
+  outline: var(--tabs-space-xxs) solid var(--tabs-content-brand);
+  outline-offset: var(--tabs-space-xxs);
+}
+
+.ds-tabs__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tabs-space-xs);
+  min-width: 0;
+}
+
+.ds-tabs__label {
+  display: block;
+  flex: 0 0 auto;
+  padding-inline: var(--tabs-label-padding-x);
+  color: currentColor;
+  font: inherit;
+  white-space: nowrap;
+  word-break: break-word;
+}
+
+.ds-tabs__tab[aria-selected="true"] {
+  color: var(--tabs-content-default);
+  font-weight: var(--bh-font-weight-medium);
+}
+
+.ds-tabs--segment .ds-tabs__tab,
+.ds-tabs--rounded .ds-tabs__tab {
+  gap: var(--tabs-space-xs);
+}
+
+.ds-tabs--segment .ds-tabs__tab {
+  border-radius: var(--tabs-radius-full);
+}
+
+.ds-tabs--rounded .ds-tabs__tab {
+  border-radius: var(--tabs-radius-md);
+}
+
+.ds-tabs--segment .ds-tabs__tab[aria-selected="true"],
+.ds-tabs--rounded .ds-tabs__tab[aria-selected="true"] {
+  background: var(--tabs-bg-default);
+  box-shadow: var(--tabs-shadow-selected);
+}
+
+.ds-tabs--segment.ds-tabs--md .ds-tabs__tab,
+.ds-tabs--rounded.ds-tabs--md .ds-tabs__tab {
+  min-height: var(--tabs-height-segment-md);
+  padding: var(--tabs-space-md) var(--tabs-space-xl);
+}
+
+.ds-tabs--segment.ds-tabs--sm .ds-tabs__tab,
+.ds-tabs--rounded.ds-tabs--sm .ds-tabs__tab {
+  min-height: var(--tabs-height-segment-sm);
+  padding: var(--tabs-space-sm) var(--tabs-space-lg);
+}
+
+.ds-tabs--segment.ds-tabs--xs .ds-tabs__tab,
+.ds-tabs--rounded.ds-tabs--xs .ds-tabs__tab {
+  min-height: var(--tabs-height-segment-xs);
+  padding: var(--tabs-space-xs) var(--tabs-space-lg);
+}
+
+.ds-tabs--segment.ds-tabs--full .ds-tabs__tab,
+.ds-tabs--rounded.ds-tabs--full .ds-tabs__tab {
+  flex: 1 0 0;
+}
+
+.ds-tabs--underline .ds-tabs__tab {
+  border-bottom: var(--tabs-space-xxs) solid transparent;
+}
+
+.ds-tabs--underline .ds-tabs__tab[aria-selected="true"] {
+  border-bottom-color: var(--tabs-content-brand);
+}
+
+.ds-tabs--underline.ds-tabs--md .ds-tabs__tab {
+  min-height: var(--tabs-height-underline-md);
+  padding-block: var(--tabs-space-md);
+}
+
+.ds-tabs--underline.ds-tabs--sm .ds-tabs__tab,
+.ds-tabs--underline.ds-tabs--xs .ds-tabs__tab {
+  min-height: var(--tabs-height-underline-sm);
+}
+
+.ds-tabs--underline.ds-tabs--sm .ds-tabs__content,
+.ds-tabs--underline.ds-tabs--xs .ds-tabs__content {
+  height: var(--tabs-height-underline-content);
+}
+
+.ds-tabs--underline.ds-tabs--full .ds-tabs__tab {
+  flex: 1 0 0;
+}
+
+.ds-tabs--rtl .ds-tabs__tab {
+  text-align: right;
+}
+
+.ds-tabs--rtl {
+  --tabs-label-padding-x: var(--tabs-space-xxs);
+  font-family: var(--bh-font-family);
+}

package/registry/components/expanded/tag.css

@@ -0,0 +1,148 @@
+.ds-tag {
+  --tag-bg: var(--bh-bg-default);
+  --tag-border: var(--bh-border-default);
+  --tag-color: var(--bh-content-default);
+
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bh-space-xs-4);
+  border: var(--bh-space-xxxs-1) solid var(--tag-border);
+  border-radius: var(--bh-radius-full);
+  background: var(--tag-bg);
+  color: var(--tag-color);
+  font-family: var(--bh-font-family);
+  font-weight: var(--bh-font-weight-medium);
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+.ds-tag *,
+.ds-tag *::before,
+.ds-tag *::after {
+  box-sizing: border-box;
+}
+
+.ds-tag--xs {
+  min-height: var(--bh-space-5xl-24);
+  padding-inline: var(--bh-space-md-8);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+}
+
+.ds-tag--md {
+  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  padding-inline: var(--bh-space-lg-10);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.ds-tag--lg {
+  min-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  padding-inline: var(--bh-space-xl-12);
+  font-size: var(--bh-text-body-md-font-size);
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-tag--closeable {
+  padding-inline-end: var(--bh-space-sm-6);
+}
+
+.ds-tag__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-tag__leading {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+}
+
+.ds-tag__leading svg {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  display: block;
+}
+
+.ds-tag__dot {
+  width: var(--bh-space-md-8);
+  height: var(--bh-space-md-8);
+  border-radius: var(--bh-radius-full);
+  background: var(--bh-content-success-default);
+}
+
+.ds-tag__flag {
+  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
+  height: var(--bh-space-xl-12);
+  border-radius: var(--bh-radius-xs-2);
+  background:
+    linear-gradient(var(--bh-bg-danger-default) 0 33%, var(--bh-bg-raised) 33% 66%, var(--bh-bg-inverse) 66% 100%);
+  box-shadow: inset 0 0 0 var(--bh-space-xxxs-1) var(--bh-border-default);
+}
+
+.ds-tag__avatar {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+  display: inline-grid;
+  place-items: center;
+  border-radius: var(--bh-radius-full);
+  background: var(--bh-bg-brand-soft);
+  color: var(--bh-content-brand-default);
+  font-size: var(--bh-text-body-3xs-regular-font-size);
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.ds-tag__close {
+  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
+  height: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
+  border: 0;
+  border-radius: var(--bh-radius-full);
+  display: inline-grid;
+  place-items: center;
+  background: transparent;
+  color: currentColor;
+  padding: 0;
+  cursor: pointer;
+}
+
+.ds-tag__close svg {
+  width: var(--bh-space-2xl-14);
+  height: var(--bh-space-2xl-14);
+}
+
+.ds-tag__close:hover:not(:disabled) {
+  background: var(--bh-interactive-ghost-hover);
+}
+
+.ds-tag:hover {
+  --tag-bg: var(--bh-interactive-ghost-hover);
+}
+
+.ds-tag--active {
+  --tag-bg: var(--bh-bg-brand-soft);
+  --tag-border: var(--bh-border-brand-strong);
+  --tag-color: var(--bh-content-brand-default);
+}
+
+.ds-tag:focus-visible {
+  --tag-border: var(--bh-border-brand-strong);
+  box-shadow: var(--shadow-button-focus);
+}
+
+.ds-tag--disabled {
+  --tag-bg: var(--bh-bg-muted);
+  --tag-border: var(--bh-border-subtle);
+  --tag-color: var(--bh-content-muted);
+  opacity: var(--bh-opacity-tag-muted);
+}
+
+.ds-tag[dir="rtl"] {
+  font-family: var(--bh-font-family);
+}

package/registry/components/expanded/timeline.css

@@ -0,0 +1,282 @@
+.ds-timeline,
+.ds-timeline-item {
+  --timeline-bg-brand: var(--bh-bg-brand-default);
+  --timeline-bg-default: var(--bh-bg-default);
+  --timeline-bg-muted: var(--bh-bg-muted);
+  --timeline-border-brand: var(--bh-border-brand-strong);
+  --timeline-border-default: var(--bh-border-default);
+  --timeline-border-muted: var(--bh-border-subtle);
+  --timeline-content-default: var(--bh-content-default);
+  --timeline-content-on-brand: var(--bh-content-on-brand);
+  --timeline-content-subtle: var(--bh-content-subtle);
+  --timeline-radius-full: var(--bh-radius-full);
+  --timeline-space-xxs: var(--bh-space-xxs-2);
+  --timeline-space-xs: var(--bh-space-xs-4);
+  --timeline-space-sm: var(--bh-space-sm-6);
+  --timeline-space-lg: var(--bh-space-lg-10);
+  --timeline-space-xl: var(--bh-space-xl-12);
+
+  box-sizing: border-box;
+  color: var(--timeline-content-default);
+  font-family: inherit;
+  letter-spacing: 0;
+}
+
+.ds-timeline {
+  font-family: var(--bh-font-family);
+}
+
+.ds-timeline *,
+.ds-timeline *::before,
+.ds-timeline *::after,
+.ds-timeline-item *,
+.ds-timeline-item *::before,
+.ds-timeline-item *::after {
+  box-sizing: border-box;
+}
+
+.ds-timeline--vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: min(var(--bh-timeline-narrow-width), 100%);
+  min-width: 0;
+}
+
+.ds-timeline--horizontal {
+  display: flex;
+  align-items: flex-start;
+  width: min(var(--bh-timeline-grid-width), 100%);
+  min-width: 0;
+}
+
+.ds-timeline--rtl,
+.ds-timeline-item--rtl {
+  font-family: var(--bh-font-family);
+}
+
+.ds-timeline-item {
+  font-family: var(--bh-font-family);
+}
+
+.ds-timeline-item--vertical {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--timeline-space-xl);
+  width: 100%;
+  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
+}
+
+.ds-timeline-item--vertical.ds-timeline-item--rtl {
+  justify-content: flex-end;
+}
+
+.ds-timeline-item--horizontal {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: var(--timeline-space-lg);
+  align-items: flex-start;
+  min-width: 0;
+  width: var(--bh-timeline-sidebar-width);
+}
+
+.ds-timeline-item--horizontal.ds-timeline-item--rtl {
+  align-items: flex-end;
+}
+
+.ds-timeline__indicator {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  direction: ltr;
+}
+
+.ds-timeline__indicator--vertical {
+  align-self: stretch;
+  flex-direction: column;
+  padding-top: var(--timeline-space-xxs);
+}
+
+.ds-timeline__indicator--horizontal {
+  width: 100%;
+  min-width: 0;
+  flex-direction: row;
+}
+
+.ds-timeline-item--icon .ds-timeline__indicator {
+  gap: var(--timeline-space-xxs);
+}
+
+.ds-timeline__marker {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--timeline-bg-brand);
+}
+
+.ds-timeline__marker--default {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+}
+
+.ds-timeline__marker--default::before {
+  content: "";
+  width: var(--bh-space-lg-10);
+  height: var(--bh-space-lg-10);
+  border: var(--bh-space-xxs-2) solid currentColor;
+  border-radius: var(--timeline-radius-full);
+  background: var(--timeline-bg-default);
+}
+
+.ds-timeline__marker--default.ds-timeline__marker--inactive {
+  color: var(--timeline-border-muted);
+}
+
+.ds-timeline__marker--icon {
+  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  border-radius: var(--timeline-radius-full);
+  color: var(--timeline-content-on-brand);
+  background: var(--timeline-bg-brand);
+}
+
+.ds-timeline__marker--icon.ds-timeline__marker--inactive {
+  border: var(--bh-space-xxxs-1) solid var(--timeline-border-default);
+  color: var(--timeline-content-default);
+  background: var(--timeline-bg-muted);
+}
+
+.ds-timeline__check {
+  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
+  height: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
+  display: block;
+}
+
+.ds-timeline__line {
+  display: block;
+  flex: 1 0 0;
+  min-width: var(--bh-space-xxxs-1);
+  min-height: var(--bh-space-xxxs-1);
+  border-radius: var(--timeline-radius-full);
+  background: var(--timeline-border-default);
+}
+
+.ds-timeline__line--finished {
+  background: var(--timeline-border-brand);
+}
+
+.ds-timeline__indicator--vertical .ds-timeline__line {
+  width: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1) / 2);
+}
+
+.ds-timeline__indicator--horizontal .ds-timeline__line {
+  height: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1));
+}
+
+.ds-timeline__body {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: var(--timeline-space-xs);
+  align-items: flex-start;
+  min-width: 0;
+  color: var(--timeline-content-default);
+}
+
+.ds-timeline-item--rtl .ds-timeline__body {
+  align-items: flex-end;
+  text-align: right;
+}
+
+.ds-timeline-item--horizontal .ds-timeline__body {
+  flex: 0 0 auto;
+  width: 100%;
+  padding-right: var(--timeline-space-xl);
+}
+
+.ds-timeline-item--horizontal.ds-timeline-item--rtl .ds-timeline__body {
+  padding-right: 0;
+  padding-left: var(--timeline-space-xl);
+}
+
+.ds-timeline__copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--timeline-space-xs);
+  width: 100%;
+  min-width: 0;
+}
+
+.ds-timeline__label,
+.ds-timeline__caption,
+.ds-timeline__date {
+  display: block;
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  letter-spacing: 0;
+}
+
+.ds-timeline__label {
+  color: var(--timeline-content-default);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-semibold);
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-timeline__caption {
+  color: var(--timeline-content-subtle);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.ds-timeline__date {
+  color: var(--timeline-content-subtle);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+  white-space: nowrap;
+}
+
+.ds-timeline__date--leading {
+  flex: 0 0 auto;
+  padding-top: var(--timeline-space-xs);
+}
+
+.ds-timeline-item--vertical.ds-timeline-item--ltr .ds-timeline__date--leading {
+  text-align: right;
+}
+
+.ds-timeline-item--horizontal .ds-timeline__date--leading {
+  width: 100%;
+  padding-top: 0;
+  text-align: start;
+}
+
+.ds-timeline-item--rtl .ds-timeline__date--leading,
+.ds-timeline-item--rtl .ds-timeline__date--top,
+.ds-timeline-item--rtl .ds-timeline__date--bottom {
+  text-align: right;
+}
+
+.ds-timeline__date--top {
+  width: 100%;
+  padding-top: var(--timeline-space-xs);
+}
+
+.ds-timeline__date--bottom {
+  width: 100%;
+  padding-top: var(--timeline-space-sm);
+}
+
+.ds-timeline__bottom-space {
+  display: block;
+  width: 100%;
+  height: var(--bh-space-5xl-24);
+  flex: 0 0 auto;
+}