banhaten 0.1.0

package/registry/components/expanded/divider.css

@@ -0,0 +1,75 @@
+.ds-divider {
+  width: 100%;
+  height: 0;
+  margin: 0;
+  border: 0;
+  border-top: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
+}
+
+.ds-divider--dotted {
+  border-top-style: dashed;
+}
+
+.ds-content-divider {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-md-8);
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: 0;
+}
+
+.ds-content-divider *,
+.ds-content-divider *::before,
+.ds-content-divider *::after {
+  box-sizing: border-box;
+}
+
+.ds-content-divider__rule {
+  flex: 1 1 auto;
+  min-width: var(--bh-space-5xl-24);
+  border-top: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
+}
+
+.ds-content-divider--dotted .ds-content-divider__rule {
+  border-top-style: dashed;
+}
+
+.ds-content-divider__label {
+  flex: 0 0 auto;
+  color: var(--bh-content-default);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-content-divider__button {
+  min-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  border: 0;
+  border-radius: var(--bh-control-default);
+  background: var(--bh-interactive-ghost-hover);
+  color: var(--bh-content-default);
+  padding: 0 var(--bh-space-3xl-16);
+  font: inherit;
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-line-height);
+  cursor: pointer;
+}
+
+.ds-content-divider__button:hover:not(:disabled) {
+  background: var(--bh-interactive-soft-default);
+}
+
+.ds-content-divider__button:disabled {
+  color: var(--bh-content-muted);
+  cursor: not-allowed;
+  opacity: var(--bh-opacity-65);
+}
+
+.ds-content-divider__button:focus-visible {
+  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
+  outline-offset: var(--bh-space-xxs-2);
+}

package/registry/components/expanded/fileUpload.css

@@ -0,0 +1,228 @@
+.ds-file-upload {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--bh-file-upload-root-max-width);
+  display: grid;
+  gap: var(--bh-space-xl-12);
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: 0;
+}
+
+.ds-file-upload *,
+.ds-file-upload *::before,
+.ds-file-upload *::after {
+  box-sizing: border-box;
+}
+
+.ds-file-upload--sm {
+  max-width: var(--bh-file-upload-content-max-width);
+}
+
+.ds-file-upload__dropzone {
+  min-height: calc(var(--bh-space-14xl-192) + var(--bh-space-xs-4));
+  display: grid;
+  place-items: center;
+  gap: var(--bh-space-md-8);
+  padding: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2)) var(--bh-space-5xl-24);
+  border: var(--bh-space-xxxs-1) dashed var(--bh-border-default);
+  border-radius: var(--bh-radius-lg-8);
+  background: var(--bh-bg-muted);
+  text-align: center;
+}
+
+.ds-file-upload--sm .ds-file-upload__dropzone {
+  min-height: calc(var(--bh-space-13xl-160) - var(--bh-space-sm-6));
+  padding: var(--bh-space-5xl-24) calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+}
+
+.ds-file-upload__dropzone.is-dragging {
+  border-color: var(--bh-border-brand-strong);
+  background: var(--bh-bg-brand-soft);
+}
+
+.ds-file-upload__dropzone[aria-disabled="true"] {
+  opacity: var(--bh-opacity-disabled-media);
+}
+
+.ds-file-upload__input {
+  display: none;
+}
+
+.ds-file-upload__icon {
+  width: var(--bh-space-8xl-48);
+  height: var(--bh-space-8xl-48);
+  display: grid;
+  place-items: center;
+  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
+  border-radius: var(--bh-control-default);
+  background: var(--bh-bg-default);
+  color: var(--bh-content-subtle);
+}
+
+.ds-file-upload__icon svg {
+  width: var(--bh-space-5xl-24);
+  height: var(--bh-space-5xl-24);
+}
+
+.ds-file-upload__dropzone p {
+  margin: 0;
+  color: var(--bh-content-default);
+  font-size: var(--bh-text-body-md-font-size);
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-file-upload__browse {
+  border: 0;
+  background: transparent;
+  color: var(--bh-content-link);
+  padding: 0;
+  font: inherit;
+  font-weight: var(--bh-font-weight-semibold);
+  cursor: pointer;
+}
+
+.ds-file-upload__browse:focus-visible {
+  border-radius: var(--bh-radius-sm-4);
+  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
+  outline-offset: var(--bh-space-xxs-2);
+}
+
+.ds-file-upload__helper {
+  color: var(--bh-content-muted);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.ds-file-upload__list {
+  display: grid;
+  gap: var(--bh-space-xl-12);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-file-upload-row {
+  display: grid;
+  grid-template-columns: var(--bh-space-7xl-40) minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: var(--bh-space-xl-12);
+  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-md-8));
+  padding: var(--bh-space-3xl-16);
+  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
+  border-radius: var(--bh-radius-lg-8);
+  background: var(--bh-bg-raised);
+  box-shadow: var(--shadow-component-default);
+}
+
+.ds-file-upload-row--sm {
+  grid-template-columns: var(--bh-space-6xl-32) minmax(0, 1fr) auto;
+  gap: var(--bh-space-md-8);
+  min-height: calc(var(--bh-space-8xl-48) + var(--bh-space-lg-10));
+  padding: var(--bh-space-xl-12);
+}
+
+.ds-file-upload-row--error {
+  border-color: var(--bh-border-danger-subtle);
+}
+
+.ds-file-upload-row__file-icon {
+  width: var(--bh-space-7xl-40);
+  height: var(--bh-space-7xl-40);
+  display: grid;
+  place-items: center;
+  border-radius: var(--bh-control-default);
+  background: var(--bh-interactive-secondary-default);
+  color: var(--bh-content-subtle);
+}
+
+.ds-file-upload-row--sm .ds-file-upload-row__file-icon {
+  width: var(--bh-space-6xl-32);
+  height: var(--bh-space-6xl-32);
+}
+
+.ds-file-upload-row__file-icon svg,
+.ds-file-upload-row__status svg {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+}
+
+.ds-file-upload-row__copy {
+  min-width: 0;
+  display: grid;
+  gap: var(--bh-space-xxs-2);
+}
+
+.ds-file-upload-row__copy strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--bh-content-default);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-font-weight-semibold);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-file-upload-row__copy span,
+.ds-file-upload-row__copy em {
+  color: var(--bh-content-muted);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-style: normal;
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+}
+
+.ds-file-upload-row__copy em {
+  color: var(--bh-content-danger-default);
+}
+
+.ds-file-upload-row__status {
+  width: var(--bh-space-5xl-24);
+  height: var(--bh-space-5xl-24);
+  display: grid;
+  place-items: center;
+}
+
+.ds-file-upload-row__status--uploaded {
+  color: var(--bh-content-success-default);
+}
+
+.ds-file-upload-row__status--uploading {
+  color: var(--bh-content-brand-default);
+}
+
+.ds-file-upload-row__status--error {
+  color: var(--bh-content-danger-default);
+}
+
+.ds-file-upload-row__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-file-upload-row--sm .ds-file-upload-row__actions {
+  grid-column: 2 / -1;
+  justify-content: flex-start;
+}
+
+.ds-file-upload-row__actions button {
+  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  border: 0;
+  border-radius: var(--bh-control-default);
+  background: var(--bh-interactive-secondary-default);
+  color: var(--bh-content-default);
+  padding: 0 var(--bh-space-lg-10);
+  font: inherit;
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-weight: var(--bh-font-weight-semibold);
+  cursor: pointer;
+}
+
+.ds-file-upload-row__actions button:hover {
+  background: var(--bh-interactive-ghost-hover);
+}
+
+.ds-file-upload[dir="rtl"] {
+  font-family: var(--bh-font-family);
+}