banhaten 0.1.2 → 0.2.0

package/registry/components/expanded/commandBar.css

@@ -1,470 +0,0 @@
-.ds-command-bar {
-  --command-bg-raised: var(--bh-bg-raised);
-  --command-bg-neutral-soft: var(--bh-bg-neutral-soft);
-  --command-bg-neutral-subtle: var(--bh-bg-neutral-subtle);
-  --command-border-default: var(--bh-border-default);
-  --command-border-input: var(--bh-border-input);
-  --command-border-subtle: var(--bh-border-subtle);
-  --command-content-default: var(--bh-content-default);
-  --command-content-muted: var(--bh-content-muted);
-  --command-content-subtle: var(--bh-content-subtle);
-  --command-control-default: var(--bh-control-default);
-  --command-input-default: var(--bh-interactive-input-default);
-  --command-interactive-hover: var(--bh-interactive-ghost-hover);
-  --command-interactive-soft: var(--bh-interactive-soft-default);
-  --command-radius-3xl: var(--bh-radius-3xl-16);
-  --command-radius-full: var(--bh-radius-full);
-  --command-radius-lg: var(--bh-radius-lg-8);
-  --command-radius-md: var(--bh-radius-md-6);
-  --command-space-xs: var(--bh-space-xs-4);
-  --command-space-sm: var(--bh-space-sm-6);
-  --command-space-md: var(--bh-space-md-8);
-  --command-space-xl: var(--bh-space-xl-12);
-  --command-space-3xl: var(--bh-space-3xl-16);
-  --command-space-4xl: var(--bh-space-4xl-20);
-  --command-space-5xl: var(--bh-space-5xl-24);
-  --command-space-10xl: var(--bh-space-10xl-80);
-  --command-width-desktop: calc(var(--bh-space-18xl-320) + var(--bh-space-18xl-320));
-  --command-width-mobile: calc(var(--bh-space-19xl-384) - var(--bh-space-md-8) - var(--bh-space-xxxs-1));
-  --command-height-mobile: calc(var(--bh-space-19xl-384) + var(--bh-space-19xl-384) + var(--bh-space-7xl-40) + var(--bh-space-xs-4));
-  --command-height-default: calc(var(--bh-space-8xl-48) + var(--bh-space-xl-12));
-  --command-height-recent: calc(var(--bh-space-19xl-384) + var(--bh-space-18xl-320) + var(--bh-space-xs-4));
-  --command-height-results: calc(var(--bh-space-19xl-384) + var(--bh-space-18xl-320));
-  --command-height-empty: calc(var(--bh-space-18xl-320) - var(--bh-space-xs-4));
-  --command-content-height-recent: calc(var(--bh-space-19xl-384) + var(--bh-space-14xl-192) + var(--bh-space-5xl-24));
-  --command-content-height-results: calc(var(--bh-space-19xl-384) + var(--bh-space-14xl-192) + var(--bh-space-4xl-20));
-  --command-search-mobile-height: var(--bh-space-8xl-48);
-  --command-item-height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
-  --command-icon-size: var(--bh-space-6xl-32);
-  --command-close-size: var(--bh-space-5xl-24);
-  --command-shortcut-height: var(--bh-space-5xl-24);
-  --command-shortcut-icon-size: var(--bh-space-3xl-16);
-  --command-shortcut-min-width: var(--bh-space-7xl-40);
-  --command-empty-mobile-padding: calc(var(--bh-space-13xl-160) + var(--bh-space-5xl-24));
-  --command-shadow-surface: var(--shadow-component-default);
-
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: var(--command-width-desktop);
-  max-width: var(--command-width-desktop);
-  overflow: hidden;
-  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
-  background: var(--command-bg-raised);
-  color: var(--command-content-default);
-  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);
-  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
-  line-height: var(--bh-text-body-md-regular-line-height);
-}
-
-.ds-command-bar *,
-.ds-command-bar *::before,
-.ds-command-bar *::after {
-  box-sizing: border-box;
-}
-
-.ds-command-bar button {
-  font: inherit;
-}
-
-.ds-command-bar svg {
-  display: block;
-  flex: 0 0 auto;
-}
-
-.ds-command-bar--desktop {
-  border-radius: var(--command-radius-3xl);
-  box-shadow: var(--command-shadow-surface);
-}
-
-.ds-command-bar--mobile {
-  width: var(--command-width-mobile);
-  height: var(--command-height-mobile);
-  max-width: var(--command-width-mobile);
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.ds-command-bar--desktop.ds-command-bar--default {
-  height: var(--command-height-default);
-}
-
-.ds-command-bar--desktop.ds-command-bar--recent {
-  height: var(--command-height-recent);
-}
-
-.ds-command-bar--desktop.ds-command-bar--results {
-  height: var(--command-height-results);
-}
-
-.ds-command-bar--desktop.ds-command-bar--no-result {
-  height: var(--command-height-empty);
-}
-
-.ds-command-bar--rtl {
-  font-family: var(--bh-font-family);
-}
-
-.ds-command-bar__input-wrap {
-  width: 100%;
-  padding: var(--command-space-3xl) var(--command-space-3xl) 0;
-}
-
-.ds-command-bar__search {
-  appearance: none;
-  width: 100%;
-  min-height: var(--command-height-default);
-  border: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--command-space-md);
-  margin: 0;
-  background: var(--command-bg-raised);
-  color: var(--command-content-subtle);
-  padding: var(--command-space-3xl) var(--command-space-4xl) var(--command-space-3xl) var(--command-space-3xl);
-  text-align: start;
-}
-
-.ds-command-bar__search--default {
-  cursor: pointer;
-}
-
-.ds-command-bar__search--divider {
-  border-bottom: var(--bh-space-xxxs-1) solid var(--command-border-input);
-}
-
-.ds-command-bar--mobile .ds-command-bar__search {
-  min-height: var(--command-search-mobile-height);
-  border: var(--bh-space-xxxs-1) solid var(--command-border-input);
-  border-radius: var(--command-radius-lg);
-  background: var(--command-input-default);
-  padding: var(--command-space-xl);
-}
-
-.ds-command-bar--desktop.ds-command-bar--rtl .ds-command-bar__search {
-  padding-right: var(--command-space-3xl);
-  padding-left: var(--command-space-4xl);
-}
-
-.ds-command-bar__search-content {
-  display: flex;
-  flex: 1 0 0;
-  align-items: center;
-  gap: var(--command-space-md);
-  min-width: 0;
-}
-
-.ds-command-bar__placeholder,
-.ds-command-bar__search-text {
-  display: block;
-  flex: 1 0 0;
-  min-width: 0;
-  overflow: hidden;
-  line-height: var(--bh-text-body-md-regular-line-height);
-  text-align: start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-break: break-word;
-}
-
-.ds-command-bar__placeholder {
-  color: var(--command-content-muted);
-}
-
-.ds-command-bar__search-text {
-  color: var(--command-content-default);
-}
-
-.ds-command-bar__shortcut {
-  height: var(--command-shortcut-height);
-  min-width: var(--command-shortcut-min-width);
-  border: var(--bh-space-xxxs-1) solid var(--command-border-default);
-  border-radius: var(--command-radius-md);
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  gap: var(--bh-space-xxs-2);
-  background: var(--command-interactive-soft);
-  color: var(--command-content-subtle);
-  font-family: var(--bh-font-family);
-  font-size: var(--bh-text-body-sm-medium-font-size);
-  font-style: normal;
-  font-weight: var(--bh-text-body-sm-medium-font-weight);
-  line-height: 1;
-  padding: 0 var(--command-space-sm);
-}
-
-.ds-command-bar__shortcut-icon {
-  width: var(--command-shortcut-icon-size);
-  height: var(--command-shortcut-icon-size);
-  stroke-width: 1.8;
-}
-
-.ds-command-bar__shortcut-key {
-  display: block;
-  line-height: 1;
-}
-
-.ds-command-bar__close {
-  appearance: none;
-  width: var(--command-close-size);
-  height: var(--command-close-size);
-  border: 0;
-  border-radius: var(--command-radius-full);
-  display: inline-grid;
-  flex: 0 0 auto;
-  place-items: center;
-  background: transparent;
-  color: var(--command-content-subtle);
-  cursor: pointer;
-  padding: 0;
-}
-
-.ds-command-bar__close:focus-visible,
-.ds-command-bar__search:focus-visible,
-.ds-command-bar__item:focus-visible {
-  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
-  outline-offset: var(--bh-space-xxs-2);
-}
-
-.ds-command-bar__content {
-  width: 100%;
-  overflow: hidden;
-  padding-block: var(--command-space-3xl);
-}
-
-.ds-command-bar--desktop.ds-command-bar--recent .ds-command-bar__content {
-  height: var(--command-content-height-recent);
-}
-
-.ds-command-bar--desktop.ds-command-bar--results .ds-command-bar__content {
-  height: var(--command-content-height-results);
-}
-
-.ds-command-bar--mobile .ds-command-bar__content {
-  flex: 1 1 auto;
-  min-height: 0;
-  padding-block: var(--command-space-3xl);
-}
-
-.ds-command-bar__main {
-  display: flex;
-  flex-direction: column;
-  gap: var(--command-space-5xl);
-  min-width: 0;
-}
-
-.ds-command-bar__section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--command-space-md);
-  width: 100%;
-}
-
-.ds-command-bar__section-heading {
-  display: flex;
-  width: 100%;
-  padding-inline: var(--command-space-4xl);
-}
-
-.ds-command-bar--mobile .ds-command-bar__section-heading {
-  padding-inline: var(--command-space-3xl);
-}
-
-.ds-command-bar__section-heading span {
-  flex: 1 0 0;
-  min-width: 0;
-  color: var(--command-content-subtle);
-  line-height: var(--bh-text-body-md-regular-line-height);
-  text-align: start;
-}
-
-.ds-command-bar__group {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding-inline: var(--command-space-md);
-}
-
-.ds-command-bar--mobile .ds-command-bar__group {
-  padding-inline: var(--command-space-xs);
-}
-
-.ds-command-bar__item {
-  appearance: none;
-  width: 100%;
-  min-height: var(--command-item-height);
-  border: 0;
-  border-radius: var(--command-radius-lg);
-  display: flex;
-  align-items: center;
-  gap: var(--command-space-xl);
-  margin: 0;
-  background: transparent;
-  color: var(--command-content-default);
-  cursor: pointer;
-  padding: var(--command-space-xl);
-  text-align: start;
-}
-
-.ds-command-bar__item.is-highlighted,
-.ds-command-bar__item:hover {
-  background: var(--command-interactive-hover);
-}
-
-.ds-command-bar__icon-wrap,
-.ds-command-bar__avatar {
-  width: var(--command-icon-size);
-  height: var(--command-icon-size);
-  border-radius: var(--command-radius-md);
-  display: inline-grid;
-  flex: 0 0 auto;
-  place-items: center;
-}
-
-.ds-command-bar__icon-wrap {
-  background: var(--command-bg-neutral-soft);
-  color: var(--command-content-subtle);
-}
-
-.ds-command-bar__avatar {
-  overflow: hidden;
-  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
-  border-radius: var(--command-radius-full);
-  background:
-    radial-gradient(circle at 42% 34%, var(--bh-bg-accent-amber-soft) 0 10%, transparent 11%),
-    radial-gradient(circle at 52% 42%, var(--bh-bg-accent-amber-default) 0 20%, transparent 21%),
-    linear-gradient(135deg, var(--bh-bg-inverse), var(--bh-bg-brand-strong) 42%, var(--bh-bg-always-dark));
-}
-
-.ds-command-bar__item-copy {
-  display: flex;
-  flex: 1 0 0;
-  flex-direction: column;
-  min-width: 0;
-  text-align: start;
-  word-break: break-word;
-}
-
-.ds-command-bar__item-copy strong {
-  width: 100%;
-  overflow: hidden;
-  color: var(--command-content-default);
-  font-size: var(--bh-text-body-md-medium-font-size);
-  font-weight: var(--bh-text-body-md-medium-font-weight);
-  line-height: var(--bh-text-body-md-medium-line-height);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ds-command-bar__item-copy span {
-  width: 100%;
-  overflow: hidden;
-  color: var(--command-content-subtle);
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-weight: var(--bh-text-body-2xs-regular-font-weight);
-  line-height: var(--bh-text-body-2xs-regular-line-height);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ds-command-bar__filter {
-  display: flex;
-  flex-direction: column;
-  gap: var(--command-space-3xl);
-  width: 100%;
-  padding-inline: var(--command-space-4xl);
-}
-
-.ds-command-bar--mobile .ds-command-bar__filter {
-  padding-inline: var(--command-space-3xl);
-}
-
-.ds-command-bar__filter .ds-command-bar__section-heading {
-  padding-inline: 0;
-}
-
-.ds-command-bar__tags {
-  display: flex;
-  gap: var(--command-space-md);
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.ds-command-bar__tag {
-  flex: 0 0 auto;
-  white-space: nowrap;
-}
-
-.ds-command-bar__empty {
-  width: 100%;
-  display: grid;
-  flex: 1 1 auto;
-  place-items: center;
-  padding: var(--command-space-10xl) var(--command-space-4xl);
-}
-
-.ds-command-bar--mobile .ds-command-bar__empty {
-  align-items: start;
-  padding-top: var(--command-empty-mobile-padding);
-}
-
-.ds-command-bar__empty-wrap {
-  display: grid;
-  place-items: center;
-  gap: var(--command-space-xs);
-  text-align: center;
-}
-
-.ds-command-bar__empty-icon {
-  width: var(--bh-space-7xl-40);
-  height: var(--bh-space-7xl-40);
-  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
-  border-radius: var(--command-radius-full);
-  display: grid;
-  place-items: center;
-  background: var(--command-bg-neutral-subtle);
-  color: var(--command-content-default);
-}
-
-.ds-command-bar__empty-wrap strong {
-  color: var(--command-content-default);
-  font-size: var(--bh-text-body-lg-medium-font-size);
-  font-weight: var(--bh-text-body-lg-medium-font-weight);
-  line-height: var(--bh-text-body-lg-medium-line-height);
-}
-
-.ds-command-bar__empty-wrap span:last-child {
-  color: var(--command-content-subtle);
-  font-size: var(--bh-text-body-md-regular-font-size);
-  line-height: var(--bh-text-body-md-regular-line-height);
-}
-
-.ds-command-bar__footer {
-  width: 100%;
-  border-top: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
-  display: flex;
-  align-items: center;
-  background: var(--command-bg-raised);
-  color: var(--command-content-subtle);
-  padding: var(--command-space-xl);
-}
-
-.ds-command-bar__footer-content {
-  display: flex;
-  align-items: center;
-  gap: var(--command-space-3xl);
-}
-
-.ds-command-bar__footer-hint {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--command-space-xs);
-  white-space: nowrap;
-}