@warmio/ui 1.4.0 → 2.0.0

package/dist/entries/badge.css

@@ -0,0 +1,178 @@
+/* ../ui/src/warmio/badge/badge.css */
+[data-slot=badge] {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing) * 2);
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  padding-inline: calc(var(--spacing) * 2);
+  font-size: var(--type-size-caption);
+  font-weight: 400;
+  line-height: 1.25;
+  white-space: nowrap;
+  transition-property:
+    color,
+    background-color,
+    box-shadow,
+    border-color;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing);
+}
+[data-slot=badge][data-size=sm] {
+  height: 1.25rem;
+  padding-block: 0;
+}
+[data-slot=badge][data-size=default] {
+  height: 1.5rem;
+  padding-block: 0;
+}
+[data-slot=badge]:not([data-size]) {
+  height: 1.25rem;
+  padding-block: calc(var(--spacing) * 2);
+}
+[data-slot=badge][data-shape=circle][data-size=sm] {
+  width: 1.25rem;
+  padding: 0;
+}
+[data-slot=badge][data-shape=circle][data-size=default] {
+  width: 1.5rem;
+  padding: 0;
+}
+[data-slot=badge][data-tone=default] {
+  border-color: var(--border);
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+[data-slot=badge][data-tone=info] {
+  border-color: var(--info-border);
+  background-color: var(--info-bg-subtle);
+  color: var(--info-text);
+}
+[data-slot=badge][data-tone=success] {
+  border-color: var(--success-border);
+  background-color: var(--success-bg-subtle);
+  color: var(--success-text);
+}
+[data-slot=badge][data-tone=warning] {
+  border-color: var(--warning-border);
+  background-color: var(--warning-bg-subtle);
+  color: var(--warning-text);
+}
+[data-slot=badge][data-tone=destructive] {
+  border-color: var(--error-border);
+  background-color: var(--error-bg-subtle);
+  color: var(--error-text);
+}
+[data-slot=badge][data-emphasis=solid][data-tone=default] {
+  border-color: var(--foreground);
+  background-color: var(--foreground);
+  color: var(--background);
+}
+[data-slot=badge][data-emphasis=solid][data-tone=info] {
+  border-color: var(--info-text);
+  background-color: var(--info-text);
+  color: var(--background);
+}
+[data-slot=badge][data-emphasis=solid][data-tone=success] {
+  border-color: var(--success);
+  background-color: var(--success);
+  color: var(--background);
+}
+[data-slot=badge][data-emphasis=solid][data-tone=warning] {
+  border-color: var(--warning);
+  background-color: var(--warning);
+  color: var(--background);
+}
+[data-slot=badge][data-emphasis=solid][data-tone=destructive] {
+  border-color: var(--destructive);
+  background-color: var(--destructive);
+  color: var(--destructive-foreground);
+}
+[data-slot=badge][data-variant=default] {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+[data-slot=badge][data-variant=secondary] {
+  background-color: var(--accent);
+  color: var(--foreground);
+}
+[data-slot=badge][data-variant=destructive] {
+  background-color: var(--error-bg-subtle);
+  color: var(--error-text);
+}
+[data-slot=badge][data-variant=outline] {
+  border-color: var(--border);
+  color: var(--foreground);
+}
+[data-slot=badge][data-variant=ghost] {
+  background-color: transparent;
+}
+[data-slot=badge][data-variant=link] {
+  background-color: transparent;
+  text-decoration-color: currentcolor;
+}
+[data-slot=badge][data-surface=floating] {
+  border-color: var(--background);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--background);
+}
+[data-slot=badge][data-placement=inline] {
+  vertical-align: middle;
+}
+[data-slot=badge][data-text-size=inherit] {
+  font-size: inherit;
+  vertical-align: baseline;
+}
+[data-slot=badge][data-text-size=inherit][data-shape=pill] {
+  height: auto;
+}
+[data-slot=badge][data-placement=top-end] {
+  position: absolute;
+  top: calc(var(--spacing) * -2);
+  right: calc(var(--spacing) * -2);
+  z-index: 10;
+  pointer-events: none;
+}
+[data-slot=badge][data-width=metric] {
+  width: 3rem;
+}
+[data-slot=badge][data-width=compact] {
+  min-width: 1.5rem;
+}
+[data-slot=badge][data-truncate=true] {
+  min-width: 0;
+  flex-shrink: 1;
+}
+[data-slot=badge][data-numeric=true] {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: normal;
+}
+[data-slot=badge-label] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-slot=badge] svg {
+  flex-shrink: 0;
+  pointer-events: none;
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+[data-slot=badge]:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus);
+}
+[data-slot=badge][aria-invalid=true] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklab, var(--destructive) 20%, transparent);
+}
+a:hover > [data-slot=badge][data-variant=default],
+[data-slot=badge][data-variant=default]:is(a:hover) {
+  background-color: color-mix(in oklab, var(--primary) 80%, transparent);
+}

package/dist/entries/button.css

@@ -0,0 +1,422 @@
+/* ../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;
+}