@typlog/ui 0.10.1 → 0.11.0

package/dist/components/table.css

@@ -0,0 +1,198 @@
+
+.ui-root {
+  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
+}
+.ui-ScrollArea {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+.ui-ScrollAreaViewport {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  outline: 2px solid var(--focus-8);
+  outline-offset: -2px;
+}
+.ui-ScrollAreaViewport:where(:has(.ui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
+  overscroll-behavior-x: contain;
+}
+.ui-ScrollAreaScrollbar {
+  display: flex;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  touch-action: none;
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
+  flex-direction: column;
+  width: var(--scrollarea-scrollbar-size);
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
+  flex-direction: row;
+  height: var(--scrollarea-scrollbar-size);
+}
+.ui-ScrollAreaThumb {
+  position: relative;
+}
+.ui-ScrollAreaThumb::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-width: var(--space-4);
+  min-height: var(--space-4);
+}
+.ui-ScrollAreaScrollbar:where([data-size="1"]) {
+  --scrollarea-scrollbar-size: var(--space-1);
+  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-ScrollAreaScrollbar:where([data-size="2"]) {
+  --scrollarea-scrollbar-size: var(--space-2);
+  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-ScrollAreaScrollbar:where([data-size="3"]) {
+  --scrollarea-scrollbar-size: var(--space-3);
+  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-ScrollAreaScrollbar {
+  background-color: var(--gray-a3);
+  border-radius: var(--scrollarea-scrollbar-border-radius);
+  animation-duration: 120ms;
+  animation-timing-function: ease-out;
+}
+.ui-ScrollAreaScrollbar:where([data-state='visible']) {
+  animation-name: ui-fade-in;
+}
+.ui-ScrollAreaScrollbar:where([data-state='hidden']) {
+  animation-name: ui-fade-out;
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
+  margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
+  margin-bottom: var(--scrollarea-scrollbar-horizontal-margin-bottom);
+  margin-left: var(--scrollarea-scrollbar-horizontal-margin-left);
+  margin-right: var(--scrollarea-scrollbar-horizontal-margin-right);
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
+  margin-top: var(--scrollarea-scrollbar-vertical-margin-top);
+  margin-bottom: var(--scrollarea-scrollbar-vertical-margin-bottom);
+  margin-left: var(--scrollarea-scrollbar-vertical-margin-left);
+  margin-right: var(--scrollarea-scrollbar-vertical-margin-right);
+}
+.ui-ScrollAreaThumb {
+  background-color: var(--gray-a8);
+  border-radius: inherit;
+  transition: background-color 100ms;
+}
+.ui-ScrollAreaThumb:hover {
+  background-color: var(--gray-a9);
+}
+
+.ui-TableContent {
+  --table-row-background-color: transparent;
+  --table-row-box-shadow: inset 0 -1px var(--gray-a5);
+
+  width: 100%;
+  text-align: left;
+  vertical-align: top;
+  border-collapse: collapse;
+  border-radius: calc(var(--table-border-radius) - 1px);
+  border-spacing: 0;
+  box-sizing: border-box;
+
+  /* Makes "height: 100%" work on content inside cells */
+  height: 0;
+}
+.ui-TableContent tr {
+  color: var(--gray-12);
+}
+.ui-TableContent td,
+.ui-TableContent th {
+  background-color: var(--table-row-background-color);
+  box-shadow: var(--table-row-box-shadow);
+  box-sizing: border-box;
+  padding: var(--table-cell-padding);
+  min-height: var(--table-cell-min-height);
+}
+.ui-TableContent thead th {
+  font-weight: var(--font-weight-semibold);
+}
+.ui-TableContent tbody th {
+  font-weight: var(--font-weight-regular);
+}
+.ui-TableContent button {
+  vertical-align: middle;
+}
+.ui-Table[data-size="1"] {
+  --table-border-radius: var(--radius-3);
+  --table-cell-padding: var(--space-2);
+  --table-cell-min-height: calc(36px * var(--scaling));
+}
+.ui-Table[data-size="1"] .ui-TableContent {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+}
+.ui-Table[data-size="2"] {
+  --table-border-radius: var(--radius-4);
+  --table-cell-padding: var(--space-3);
+  --table-cell-min-height: calc(44px * var(--scaling));
+}
+.ui-Table[data-size="2"] .ui-TableContent {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+}
+.ui-Table[data-size="3"] {
+  --table-border-radius: var(--radius-4);
+  --table-cell-padding: var(--space-3) var(--space-4);
+  --table-cell-min-height: var(--space-8);
+}
+.ui-Table[data-size="3"] .ui-TableContent {
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+}
+.ui-Table:where([data-variant="surface"]) {
+  box-sizing: border-box;
+  border: 1px solid var(--gray-a5);
+  border-radius: var(--table-border-radius);
+  background-color: var(--color-panel);
+  -webkit-backdrop-filter: var(--backdrop-filter-panel);
+          backdrop-filter: var(--backdrop-filter-panel);
+  background-clip: padding-box;
+  position: relative;
+}
+@supports (box-shadow: 0 0 0 1px color-mix(in oklab, white, black)) {
+.ui-Table:where([data-variant="surface"]) {
+    border-color: color-mix(in oklab, var(--gray-a5), var(--gray-6));
+}
+}
+.ui-Table:where([data-variant="surface"]) .ui-TableContent {
+  overflow: hidden;
+}
+.ui-Table:where([data-variant="surface"]) thead {
+  --table-row-background-color: var(--gray-a2);
+}
+.ui-Table:where([data-variant="surface"]) tbody :where(tr:last-child) {
+  --table-row-box-shadow: none;
+}
+.ui-Table:where([data-variant="ghost"]) {
+  --scrollarea-scrollbar-horizontal-margin-left: 0;
+  --scrollarea-scrollbar-horizontal-margin-right: 0;
+}

package/dist/components/tabs.css

@@ -0,0 +1,122 @@
+
+.ui-TabList {
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  overflow-x: auto;
+  white-space: nowrap;
+  font-style: normal;
+  scrollbar-width: none;
+  box-shadow: inset 0 -1px 0 0 var(--gray-a5);
+}
+.ui-TabsIndicator {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  transition-property: width, transform;
+  transition-duration: 300ms;
+  width: var(--reka-tabs-indicator-size);
+  background-color: var(--accent-indicator);
+  transform: translateX(var(--reka-tabs-indicator-position));
+}
+.ui-TabList::-webkit-scrollbar {
+  display: none;
+}
+.ui-TabList:where(.r-size-1) {
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  --tab-height: var(--space-6);
+  --tab-padding-x: var(--space-1);
+  --tab-inner-padding-x: var(--space-1);
+  --tab-inner-height: var(--space-5);
+  --tab-inner-border-radius: var(--radius-1);
+}
+.ui-TabList:where(.r-size-2) {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+  --tab-height: var(--space-7);
+  --tab-padding-x: var(--space-2);
+  --tab-inner-padding-x: var(--space-2);
+  --tab-inner-height: calc(var(--space-6) - var(--space-1));
+  --tab-inner-border-radius: var(--radius-2);
+}
+:where(.ui-TabList.r-high-contrast) .ui-TabsIndicator {
+  background-color: var(--accent-12);
+}
+
+.ui-root {
+  --tab-active-letter-spacing: -0.01em;
+  --tab-active-word-spacing: 0em;
+  --tab-inactive-letter-spacing: 0em;
+  --tab-inactive-word-spacing: 0em;
+}
+.ui-TabTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  box-sizing: border-box;
+  height: var(--tab-height);
+  padding-left: var(--tab-padding-x);
+  padding-right: var(--tab-padding-x);
+  color: var(--gray-a11);
+  outline: none;
+}
+.ui-TabTrigger:disabled {
+  color: var(--gray-a8);
+  border-color: currentColor;
+}
+.ui-TabTriggerInner,
+.ui-TabTriggerInnerHidden {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--tab-inner-height);
+  padding-left: var(--tab-inner-padding-x);
+  padding-right: var(--tab-inner-padding-x);
+  border-radius: var(--tab-inner-border-radius);
+}
+.ui-TabTriggerInner {
+  position: absolute;
+}
+:where(.ui-TabTrigger[data-state='inactive']) .ui-TabTriggerInner {
+  letter-spacing: var(--tab-inactive-letter-spacing);
+  word-spacing: var(--tab-inactive-word-spacing);
+}
+:where(.ui-TabTrigger[data-state='active']) .ui-TabTriggerInner {
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--tab-active-letter-spacing);
+  word-spacing: var(--tab-active-word-spacing);
+}
+.ui-TabTriggerInnerHidden {
+  visibility: hidden;
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--tab-active-letter-spacing);
+  word-spacing: var(--tab-active-word-spacing);
+}
+@media (hover: hover) {
+.ui-TabTrigger:where(:hover) {
+    color: var(--gray-12);
+}
+.ui-TabTrigger:where(:not(:disabled):hover) :where(.ui-TabTriggerInner) {
+    background-color: var(--gray-a3);
+}
+.ui-TabTrigger:where(:focus-visible:hover) :where(.ui-TabTriggerInner) {
+    background-color: var(--accent-a3);
+}
+}
+.ui-TabTrigger:where([data-state='active']) {
+  color: var(--gray-12);
+}
+.ui-TabTrigger:where(:focus-visible) :where(.ui-TabTriggerInner) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -2px;
+}

package/dist/components/toggle.css

@@ -0,0 +1,188 @@
+
+.ui-Toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+  flex-shrink: 0;
+  width: var(--toggle-size);
+  height: var(--toggle-size);
+}
+.ui-Toggle:where(.r-size-1) {
+  border-radius: max(var(--radius-1), var(--radius-full));
+  --toggle-size: var(--space-5);
+}
+.ui-Toggle:where(.r-size-2) {
+  border-radius: max(var(--radius-2), var(--radius-full));
+  --toggle-size: var(--space-6);
+}
+.ui-Toggle:where(.r-size-3) {
+  border-radius: max(var(--radius-3), var(--radius-full));
+  --toggle-size: var(--space-7);
+}
+
+/** soft */
+.ui-Toggle:where(.r-variant-soft) {
+  background-color: var(--color-panel-translucent);
+  box-shadow: var(--shadow-2);
+}
+@media (hover: hover) {
+.ui-Toggle:where(.r-variant-soft):where(:hover) {
+    background-color: var(--accent-a2);
+}
+}
+.ui-Toggle:where(.r-variant-soft):where(:focus-visible) {
+  outline: 2px solid var(--accent-8);
+  outline-offset: -1px;
+}
+.ui-Toggle:where(.r-variant-soft):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+.ui-Toggle:where(.r-variant-soft):where([data-state="on"]) {
+  background-color: var(--accent-a3);
+  box-shadow: var(--shadow-1);
+}
+
+/** solid & ghost*/
+.ui-Toggle:where(.r-variant-solid) {
+  background-color: var(--color-panel-solid);
+  box-shadow: var(--shadow-2);
+}
+@media (hover: hover) {
+.ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(:hover) {
+    background-color: var(--accent-a3);
+}
+}
+.ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-Toggle:where(.r-variant-solid):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+.ui-Toggle:where(.r-variant-ghost):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: transparent;
+}
+.ui-Toggle:where(.r-variant-solid):where([data-state="on"]) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+  box-shadow: var(--shadow-1);
+}
+.ui-Toggle:where(.r-variant-ghost):where([data-state="on"]) {
+  background-color: var(--accent-a3);
+  box-shadow: var(--shadow-1);
+}
+.ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(.r-high-contrast):where([data-state="on"]) {
+  background-color: var(--accent-12);
+  color: var(--gray-1);
+}
+
+.ui-ToggleGroupRoot {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+  flex-shrink: 0;
+  height: var(--toggle-size);
+}
+.ui-ToggleGroupRoot:where(.r-size-1) {
+  --toggle-radius: max(var(--radius-1), var(--radius-full));
+  --toggle-size: var(--space-5);
+}
+.ui-ToggleGroupRoot:where(.r-size-2) {
+  --toggle-radius: max(var(--radius-2), var(--radius-full));
+  --toggle-size: var(--space-6);
+}
+.ui-ToggleGroupRoot:where(.r-size-3) {
+  --toggle-radius: max(var(--radius-3), var(--radius-full));
+  --toggle-size: var(--space-7);
+}
+.ui-ToggleGroupRoot:where(.r-variant-solid) {
+  border-radius: var(--toggle-radius);
+  background-color: var(--color-panel-solid);
+  box-shadow: var(--shadow-2);
+}
+.ui-ToggleGroupRoot:where(.r-variant-soft) {
+  border-radius: var(--toggle-radius);
+  background-color: var(--color-panel-translucent);
+  box-shadow: var(--shadow-2);
+}
+.ui-ToggleGroupRoot:where(.r-variant-ghost) {
+  gap: calc(var(--space-1) / 2);
+}
+
+.ui-ToggleGroupItem {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+  flex-shrink: 0;
+  width: var(--toggle-size);
+  height: var(--toggle-size);
+}
+.ui-ToggleGroupItem:where(:first-child) {
+  border-top-left-radius: var(--toggle-radius);
+  border-bottom-left-radius: var(--toggle-radius);
+}
+.ui-ToggleGroupItem:where(:last-child) {
+  border-top-right-radius: var(--toggle-radius);
+  border-bottom-right-radius: var(--toggle-radius);
+}
+.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem) {
+  border-radius: var(--toggle-radius);
+}
+
+/** soft */
+@media (hover: hover) {
+.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem:hover) {
+    background-color: var(--accent-a2);
+}
+}
+.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem:focus-visible) {
+  outline: 2px solid var(--accent-8);
+  outline-offset: -1px;
+}
+.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem[data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem[data-state="on"]) {
+  background-color: var(--accent-a4);
+}
+
+/** solid & ghost */
+@media (hover: hover) {
+.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-ghost) :where(.ui-ToggleGroupItem:hover) {
+    background-color: var(--accent-a3);
+}
+}
+.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-ghost) :where(.ui-ToggleGroupItem:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem[data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-disabled]) {
+  color: var(--gray-a8);
+  background-color: transparent;
+}
+.ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem[data-state="on"]) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+  box-shadow: var(--shadow-1);
+}
+.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-state="on"]) {
+  background-color: var(--accent-a4);
+}
+.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-ghost):where(.r-high-contrast) :where(.ui-ToggleGroupItem[data-state="on"]) {
+  background-color: var(--accent-12);
+  color: var(--gray-1);
+}

package/dist/components/tooltip.css

@@ -0,0 +1,37 @@
+
+.ui-Tooltip {
+  box-sizing: border-box;
+  padding: var(--space-1) var(--space-2);
+  background-color: var(--gray-12);
+  border-radius: var(--radius-2);
+  transform-origin: var(--reka-tooltip-content-transform-origin);
+  animation-duration: 140ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+@media (prefers-reduced-motion: no-preference) {
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='top']) {
+    animation-name: ui-slide-from-top, ui-fade-in;
+}
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='bottom']) {
+    animation-name: ui-slide-from-bottom, ui-fade-in;
+}
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='left']) {
+    animation-name: ui-slide-from-left, ui-fade-in;
+}
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='right']) {
+    animation-name: ui-slide-from-right, ui-fade-in;
+}
+}
+.ui-TooltipText {
+  color: var(--gray-1);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default;
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+}
+.ui-TooltipArrow {
+  fill: var(--gray-12);
+}