@warmio/ui 1.4.0 → 2.0.0

package/dist/entries/sheet.css

@@ -0,0 +1,666 @@
+/* ../ui/src/warmio/sheet/sheet.css */
+[data-slot=sheet-overlay] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay-backdrop);
+  background-color: var(--black-50);
+}
+@supports (backdrop-filter: blur(2px)) {
+  [data-slot=sheet-overlay] {
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+  }
+}
+[data-visually-hidden] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+[data-slot=sheet-content] {
+  --sheet-inset-top: max(1rem, var(--safe-area-inset-top));
+  --sheet-inset-right: max(1rem, var(--safe-area-inset-right));
+  --sheet-inset-bottom: max(1rem, var(--safe-area-inset-bottom));
+  --sheet-inset-left: max(1rem, var(--safe-area-inset-left));
+  position: fixed;
+  z-index: calc(var(--z-overlay-backdrop) + 1);
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  gap: 0;
+  border-radius: var(--radius-xl);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--border);
+  background-color: var(--popover);
+  background-clip: padding-box;
+  color: var(--foreground);
+  box-shadow: var(--shadow-lg);
+}
+[data-slot=sheet-content][data-side=bottom],
+[data-slot=sheet-content][data-side=responsive] {
+  top: auto;
+  right: var(--sheet-inset-right);
+  bottom: var(--sheet-inset-bottom);
+  left: var(--sheet-inset-left);
+  width: auto;
+  height: auto;
+  max-height: calc(100dvh - var(--sheet-inset-top) - var(--sheet-inset-bottom));
+}
+[data-slot=sheet-content][data-side=right] {
+  top: var(--sheet-inset-top);
+  right: var(--sheet-inset-right);
+  bottom: var(--sheet-inset-bottom);
+  left: auto;
+  width: 75%;
+  height: auto;
+}
+[data-slot=sheet-content][data-side=left] {
+  top: var(--sheet-inset-top);
+  right: auto;
+  bottom: var(--sheet-inset-bottom);
+  left: var(--sheet-inset-left);
+  width: 75%;
+  height: auto;
+}
+@media (width >= 40rem) {
+  [data-slot=sheet-content][data-side=left],
+  [data-slot=sheet-content][data-side=right] {
+    max-width: 24rem;
+  }
+}
+[data-slot=sheet-content][data-side=top] {
+  top: var(--sheet-inset-top);
+  right: var(--sheet-inset-right);
+  bottom: auto;
+  left: var(--sheet-inset-left);
+  width: auto;
+  height: auto;
+  max-height: calc(100dvh - var(--sheet-inset-top) - var(--sheet-inset-bottom));
+}
+@media (width >= 64rem) {
+  [data-slot=sheet-content][data-side=responsive][data-side=responsive] {
+    top: var(--sheet-inset-top);
+    right: var(--sheet-inset-right);
+    bottom: var(--sheet-inset-bottom);
+    left: auto;
+    width: 75%;
+    max-width: 24rem;
+    height: auto;
+    max-height: none;
+  }
+}
+[data-slot=sheet-content][data-mobile=true] {
+  width: var(--sidebar-width-mobile);
+  padding: 0;
+  background-color: var(--sidebar);
+  color: var(--foreground);
+}
+.dark [data-slot=sheet-content][data-mobile=true] {
+  background-color: var(--card);
+}
+[data-slot=sheet-header] {
+  display: grid;
+  flex: 0 0 auto;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  column-gap: calc(var(--spacing) * 4);
+  row-gap: calc(var(--spacing) * 2);
+  padding: calc(var(--spacing) * 4);
+}
+[data-slot=sheet-header] > [data-slot=sheet-title] {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  min-width: 0;
+  color: var(--foreground);
+}
+[data-slot=sheet-header] > [data-slot=sheet-description] {
+  grid-column: 1;
+  grid-row: 2;
+  color: var(--muted-foreground);
+}
+[data-slot=sheet-header] > [data-slot=sheet-close] {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+  justify-self: end;
+}
+[data-slot=sheet-header] > :not([data-slot=sheet-title]):not([data-slot=sheet-description]):not([data-slot=sheet-close]) {
+  grid-column: 1 / -1;
+}
+[data-slot=sheet-footer] {
+  display: flex;
+  flex: 0 0 auto;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  gap: calc(var(--spacing) * 2);
+  margin-top: auto;
+  border-top: 1px solid var(--border);
+  padding: calc(var(--spacing) * 4);
+}
+[data-slot=sheet-footer] > :first-child {
+  margin-inline-end: auto;
+}
+[data-slot=sheet-footer] > :only-child {
+  margin-inline-end: 0;
+}
+[data-slot=sheet-content][data-presentation=navigation] {
+  gap: 0;
+  overflow: hidden;
+  border-color: var(--border);
+  padding: 0;
+  background-color: var(--sidebar);
+  color: var(--foreground);
+}
+@media (width < 64rem) {
+  [data-slot=sheet-content][data-presentation=navigation] {
+    width: auto;
+  }
+}
+@media (width >= 64rem) {
+  [data-slot=sheet-content][data-presentation=navigation] {
+    width: var(--sidebar-width-mobile);
+  }
+}
+@media (width >= 48rem) {
+  [data-slot=sheet-content][data-presentation=navigation][data-responsive=mobileOnly] {
+    display: none;
+  }
+}
+[data-slot=sheet-content][data-width=full][data-side=left],
+[data-slot=sheet-content][data-width=full][data-side=right],
+[data-slot=sheet-content][data-width=full][data-side=responsive] {
+  width: 100%;
+  max-width: none;
+}
+[data-slot=sheet-content][data-width=wide] {
+  width: 100%;
+}
+@media (width >= 40rem) {
+  [data-slot=sheet-content][data-width=wide][data-side=left],
+  [data-slot=sheet-content][data-width=wide][data-side=right] {
+    max-width: 32rem;
+  }
+}
+@media (width >= 64rem) {
+  [data-slot=sheet-content][data-width=wide][data-side=responsive] {
+    max-width: 32rem;
+  }
+}
+[data-slot=sheet-header][data-presentation=navigation] {
+  border-bottom: 1px solid var(--border);
+  padding: 0;
+  background-color: var(--background);
+}
+[data-slot=sheet-title] {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-large);
+  font-weight: 500;
+}
+[data-slot=sheet-title][data-presentation=navigation] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  color: var(--foreground);
+}
+[data-slot=sheet-content] > :not([data-slot=sheet-header]):not([data-slot=sheet-footer]) {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* ../ui/src/warmio/button/button.css */
+[data-warm-button] {
+  position: relative;
+  isolation: isolate;
+  border: 0 solid;
+  background: transparent;
+  background-clip: padding-box;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  font-size: var(--type-size-body);
+  font-weight: 400;
+  line-height: 1.25;
+  white-space: nowrap;
+  transition-property: var(--button-transition-property);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: ease-out;
+  outline: none;
+  user-select: none;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+[data-warm-button]::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: inherit;
+  background-color: transparent;
+  background-image: none;
+  background-clip: inherit;
+  box-shadow: none;
+  pointer-events: none;
+  transition-property: var(--button-surface-transition-property);
+  transition-duration:
+    var(--motion-duration-normal),
+    var(--motion-duration-fast),
+    var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing);
+}
+[data-warm-button]:focus-visible {
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus);
+}
+[data-warm-button][data-width=full] {
+  width: 100%;
+}
+[data-warm-button]:not(:disabled):not([aria-disabled=true]):hover {
+  filter: brightness(var(--button-hover-brightness));
+}
+[data-slot=toggle-group][data-appearance=segmented]:has([data-slot=toggle-group-item][data-pressed]:hover:not(:disabled):not([aria-disabled=true])) [data-slot=toggle-group-indicator] {
+  filter: brightness(var(--button-hover-brightness));
+}
+[data-warm-button]:not(:disabled):not([aria-disabled=true]):not([data-variant=arrow]):active::before {
+  inset: var(--button-press-inset);
+  transition-duration: var(--motion-duration-fast);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-warm-button],
+  [data-warm-button]::before {
+    transition: none;
+  }
+  [data-warm-button]:not(:disabled):not([aria-disabled=true]):not([data-variant=arrow]):active::before {
+    inset: 0;
+  }
+}
+[data-warm-button][data-variant=default] {
+  color: var(--button-primary-foreground);
+}
+[data-warm-button][data-variant=default]::before {
+  background-color: var(--button-primary-bg);
+  background-image: var(--button-primary-gradient);
+  box-shadow: var(--button-primary-shadow);
+}
+[data-warm-button][data-variant=default]:hover::before {
+  background-color: var(--button-primary-hover);
+  background-image: var(--button-primary-gradient-hover);
+}
+[data-warm-button][data-variant=default]:active::before {
+  background-color: var(--button-primary-active);
+}
+[data-warm-button][data-variant=outline] {
+  border-style: none;
+  color: var(--background);
+}
+[data-warm-button][data-variant=outline]::before {
+  background-color: var(--background);
+  background-image: var(--button-outline-fill-image);
+  box-shadow: var(--button-outline-shadow);
+}
+[data-warm-button][data-variant=outline]:hover {
+  color: var(--background);
+}
+[data-warm-button][data-variant=outline]:hover::before {
+  background-color: var(--muted);
+  background-image: var(--button-outline-fill-image-hover);
+}
+[data-warm-button][data-variant=outline]:active::before {
+  background-color: var(--muted);
+}
+[data-warm-button][data-variant=ghost]::before {
+  background-color: transparent;
+  box-shadow: var(--button-ghost-shadow);
+}
+[data-warm-button][data-variant=ghost]:hover {
+  color: var(--foreground);
+}
+[data-warm-button][data-variant=ghost]:hover::before {
+  background-color: var(--muted);
+}
+.dark [data-warm-button][data-variant=ghost]:hover::before {
+  background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+}
+[data-warm-button][data-variant=destructive] {
+  color: var(--destructive);
+}
+[data-warm-button] [data-slot=loader-spinner] {
+  color: inherit;
+}
+[data-warm-button][data-variant=destructive]::before {
+  background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+}
+[data-warm-button][data-variant=destructive]:hover::before {
+  background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+}
+.dark [data-warm-button][data-variant=destructive]::before {
+  background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+}
+[data-warm-button][data-variant=apple] {
+  color: var(--apple-button-foreground) !important;
+}
+[data-warm-button][data-variant=apple]::before {
+  background-color: var(--apple-button-background) !important;
+  box-shadow: none;
+}
+button[data-warm-button][data-variant=apple] {
+  appearance: button;
+  background-clip: padding-box;
+}
+[data-warm-button][data-variant=apple]:hover {
+  color: var(--apple-button-foreground);
+}
+[data-warm-button][data-variant=apple]:hover::before {
+  background-color: var(--apple-button-background) !important;
+}
+[data-warm-button][data-variant=arrow] {
+  border-width: 0;
+  text-decoration: underline;
+}
+[data-warm-button][data-variant=arrow] svg {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  transition: transform var(--motion-duration-normal);
+}
+[data-warm-button][data-variant=arrow]:hover svg {
+  transform: translate(calc(var(--motion-distance) / 2), calc(-1 * var(--motion-distance) / 2));
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-warm-button][data-variant=arrow]:hover svg {
+    transform: none;
+    transition: none;
+  }
+}
+[data-warm-button][data-size=compact] {
+  height: var(--control-height-sm);
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+  gap: var(--spacing-sm);
+}
+[data-warm-button][data-size=default] {
+  height: var(--control-height);
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+  gap: var(--spacing-sm);
+}
+[data-warm-button][data-size=jumbo] {
+  height: var(--control-height-lg);
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+  font-size: var(--type-size-body);
+  font-weight: 500;
+  line-height: 1.25;
+  gap: var(--spacing-sm);
+}
+[data-warm-button][data-size=icon] {
+  width: var(--control-height);
+  height: var(--control-height);
+}
+[data-warm-button][data-size=default][data-explicit-size] {
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+  background-clip: border-box;
+}
+[data-warm-button][data-presentation=assistantIcon]:not([data-explicit-size]) {
+  width: var(--control-height-sm);
+  height: var(--control-height-sm);
+  padding: var(--spacing-sm);
+}
+[data-warm-button][data-presentation=assistantRoundIcon]:not([data-explicit-size]) {
+  width: var(--control-height);
+  height: var(--control-height);
+}
+[data-warm-button][data-presentation=composerIcon]:not([data-explicit-size]) {
+  width: var(--control-height-sm);
+  height: var(--control-height-sm);
+  padding: var(--spacing-sm);
+}
+[data-warm-button][data-presentation=editPill]:not([data-explicit-size]) {
+  height: var(--control-height-sm);
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+}
+[data-warm-button][data-presentation=hero]:not([data-explicit-size]) {
+  height: var(--control-height-lg);
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+  font-size: var(--type-size-body);
+  font-weight: 500;
+  line-height: 1.25;
+  background-clip: border-box;
+}
+[data-warm-button][data-presentation=promptCategory]:not([data-explicit-size]) {
+  height: var(--control-height);
+  gap: var(--spacing-sm);
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+  font-size: var(--type-size-body);
+  font-weight: 400;
+  color: var(--foreground);
+  transition-property: var(--button-transition-property-colors);
+}
+[data-warm-button][data-presentation=promptCategory]:not([data-explicit-size])::before {
+  background-color: var(--background);
+}
+[data-warm-button][data-presentation=promptCategory][data-variant=default]::before {
+  box-shadow: var(--shadow-sm) !important;
+}
+[data-warm-button][data-presentation=promptCategory]:not([data-explicit-size]):not([data-variant=arrow])::before {
+  box-shadow: var(--shadow-sm) !important;
+}
+[data-warm-button][data-presentation=promptCategory]:hover::before {
+  background-color: var(--muted);
+}
+[data-warm-button][data-presentation=promptOption]:not([data-explicit-size]) {
+  height: auto;
+  min-height: calc(var(--spacing) * 16);
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-lg);
+  font-size: var(--type-size-body);
+}
+[data-warm-button][data-presentation=sidebarIcon]:not([data-explicit-size]) {
+  color: var(--foreground);
+  background-clip: border-box;
+}
+[data-warm-button][data-presentation=sidebarIcon]:hover {
+  color: var(--foreground);
+}
+[data-warm-button][data-presentation=sidebarIcon]:hover::before {
+  background-color: var(--sidebar-accent);
+}
+[data-warm-button][data-presentation=tableHeader]:not([data-explicit-size]) {
+  height: auto;
+  min-height: 0;
+  width: 100%;
+  justify-content: flex-start;
+  gap: var(--spacing-sm);
+  padding: 0;
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--muted-foreground);
+}
+[data-warm-button][data-presentation=tableHeader]:hover {
+  color: var(--foreground);
+}
+[data-warm-button][data-presentation=tableHeader]:hover::before {
+  background-color: transparent;
+}
+[data-warm-button][data-presentation=tableHeaderLink]:not([data-explicit-size]) {
+  height: auto;
+  min-height: 0;
+  width: 100%;
+  justify-content: flex-start;
+  gap: var(--spacing-sm);
+  padding: 0;
+  border-radius: 0;
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--muted-foreground);
+  text-decoration: underline;
+  text-decoration-thickness: var(--button-underline-thickness);
+  text-underline-offset: var(--button-underline-offset);
+}
+[data-warm-button][data-presentation=tableHeaderLink]::before {
+  background-image: none;
+  background-color: transparent;
+  box-shadow: none;
+}
+[data-warm-button][data-presentation=tableHeaderLink]:focus-visible {
+  box-shadow: none;
+}
+[data-warm-button][data-presentation=tableHeaderLink]:hover {
+  color: var(--foreground);
+}
+[data-warm-button][data-presentation=tableHeaderLink]:hover::before {
+  background-image: none;
+  background-color: transparent;
+  box-shadow: none;
+}
+[data-warm-button][data-presentation=touch]:not([data-explicit-size]) {
+  min-height: var(--control-height-lg);
+}
+[data-warm-button][data-presentation=headerAction]:not([data-explicit-size]) {
+  width: auto;
+  height: var(--control-height-sm);
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+}
+[data-warm-button][data-presentation=threadMore]:not([data-explicit-size]) {
+  width: var(--control-height-sm);
+  height: var(--control-height-sm);
+  padding: 0;
+}
+[data-warm-button][data-presentation=threadNew]:not([data-explicit-size]) {
+  height: var(--control-height-sm);
+  justify-content: flex-start;
+  gap: var(--spacing-sm);
+  padding-left: var(--spacing-sm);
+  padding-right: var(--spacing-sm);
+  font-size: var(--type-size-body);
+  font-weight: 400;
+}
+[data-warm-button][data-presentation=threadNew]:hover::before {
+  background-color: var(--muted);
+}
+[data-warm-button][data-presentation=compact]:not([data-explicit-size]) {
+  height: var(--control-height-sm);
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+}
+[data-warm-button][data-presentation=default]:not([data-explicit-size]),
+[data-warm-button][data-presentation=controlPeer]:not([data-explicit-size]) {
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+  background-clip: border-box;
+}
+[data-warm-button][data-presentation=menuOption]:not([data-explicit-size]) {
+  height: auto;
+  min-height: calc(var(--spacing) * 16);
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-lg);
+}
+[data-warm-button][data-variant=arrow][data-variant=arrow] {
+  height: auto;
+  padding: 0;
+  gap: var(--spacing-sm);
+  border-radius: 0;
+  color: var(--foreground);
+  font-size: var(--type-size-body);
+  line-height: 1.25;
+  font-weight: 500;
+}
+[data-warm-button][data-variant=arrow][data-variant=arrow]::before {
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+}
+[data-warm-button] svg {
+  pointer-events: none;
+  flex-shrink: 0;
+}
+[data-warm-button] svg:not([class*=size-]) {
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+[data-warm-button][data-presentation=assistantIcon]:not([data-explicit-size]) svg:not([class*=size-]),
+[data-warm-button][data-presentation=threadMore]:not([data-explicit-size]) svg:not([class*=size-]) {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+[data-warm-button][aria-invalid] {
+  box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklab, var(--destructive) 20%, transparent);
+}
+.dark [data-warm-button][aria-invalid] {
+  box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklab, var(--destructive) 50%, transparent);
+}
+[data-warm-button][data-variant=ghost][aria-expanded=true] {
+  color: var(--foreground);
+}
+[data-warm-button][data-variant=ghost][aria-expanded=true]::before {
+  background-color: var(--muted);
+}
+[data-warm-button]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+[data-warm-button][data-variant=apple]:disabled {
+  opacity: 1;
+}
+[data-warm-button][data-presentation=cardTitle]:not([data-explicit-size]) {
+  height: auto;
+  min-height: 0;
+  min-width: 0;
+  justify-content: flex-start;
+  padding: 0;
+  border-radius: var(--radius-sm);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+[data-warm-button][data-presentation=cardTitle]::before {
+  display: none;
+}
+
+/* ../ui/src/warmio/close-button/close-button.css */
+[data-warm-button][data-warm-close-button][data-size] {
+  --warm-close-size: var(--control-height);
+  --warm-close-icon-size: var(--icon-size);
+  width: var(--warm-close-size);
+  height: var(--warm-close-size);
+  padding: 0;
+  padding-inline: 0;
+  cursor: pointer;
+}
+[data-warm-button][data-warm-close-button][data-size=small] {
+  --warm-close-size: var(--control-height-sm);
+  --warm-close-icon-size: var(--icon-size-sm);
+}
+[data-warm-button][data-warm-close-button][data-size=large] {
+  --warm-close-size: var(--control-height-lg);
+  --warm-close-icon-size: var(--icon-size);
+}
+[data-warm-button][data-warm-close-button] > [data-slot=close-button-icon] {
+  width: var(--warm-close-icon-size);
+  height: var(--warm-close-icon-size);
+}