@typlog/ui 0.12.2 → 0.13.0

package/components/pagination.css

@@ -1,279 +0,0 @@
-.ui-Button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  vertical-align: top;
-  font-style: normal;
-  font-weight: var(--button-font-weight);
-  text-align: center;
-  white-space: nowrap;
-  height: var(--button-height);
-  padding-left: var(--button-padding-x);
-  padding-right: var(--button-padding-x);
-}
-.ui-Button:where(.r-variant-ghost) {
-  --button-font-weight: var(--font-weight-regular);
-}
-.ui-Button:where(:not(.r-variant-ghost)) {
-  --button-font-weight: var(--font-weight-medium);
-}
-.ui-Button:where([data-disabled]) {
-  cursor: not-allowed;
-}
-.ui-Button:where(.r-size-1) {
-  gap: var(--space-1);
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  border-radius: max(var(--radius-1), var(--radius-full));
-  --button-height: var(--space-5);
-  --button-padding-x: var(--space-2);
-}
-.ui-Button:where(.r-size-1):where(.r-variant-ghost) {
-  --button-ghost-padding-y: var(--space-1);
-}
-.ui-Button:where(.r-size-2) {
-  gap: var(--space-2);
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-  border-radius: max(var(--radius-2), var(--radius-full));
-  --button-height: var(--space-6);
-  --button-padding-x: var(--space-3);
-}
-.ui-Button:where(.r-size-2):where(.r-variant-ghost) {
-  gap: var(--space-1);
-  --button-padding-x: var(--space-2);
-  --button-ghost-padding-y: var(--space-1);
-}
-.ui-Button:where(.r-size-3) {
-  gap: var(--space-3);
-  font-size: var(--font-size-3);
-  line-height: var(--line-height-3);
-  letter-spacing: var(--letter-spacing-3);
-  border-radius: max(var(--radius-3), var(--radius-full));
-  --button-height: var(--space-7);
-  --button-padding-x: var(--space-4);
-}
-.ui-Button:where(.r-size-3):where(.r-variant-ghost) {
-  gap: var(--space-2);
-  --button-padding-x: var(--space-3);
-  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
-}
-.ui-Button:where(.r-size-4) {
-  gap: var(--space-3);
-  font-size: var(--font-size-4);
-  line-height: var(--line-height-4);
-  letter-spacing: var(--letter-spacing-4);
-  border-radius: max(var(--radius-4), var(--radius-full));
-  --button-height: var(--space-8);
-  --button-padding-x: var(--space-5);
-}
-.ui-Button:where(.r-size-4):where(.r-variant-ghost) {
-  gap: var(--space-2);
-  --button-padding-x: var(--space-4);
-  --button-ghost-padding-y: var(--space-2);
-}
-
-/* solid */
-.ui-root {
-  --button-solid-active-filter: brightness(0.92) saturate(1.1);
-  --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
-}
-:is(.dark, .dark-theme) .ui-root {
-  --button-solid-active-filter: brightness(1.08);
-  --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
-}
-.ui-Button:where(.r-variant-solid) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-solid):where(:hover) {
-    background-color: var(--accent-10);
-}
-}
-.ui-Button:where(.r-variant-solid):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-Button:where(.r-variant-solid):where(:active) {
-  background-color: var(--accent-10);
-  filter: var(--button-solid-active-filter);
-}
-.ui-Button:where(.r-variant-solid):where(.r-high-contrast) {
-  background-color: var(--accent-12);
-  color: var(--gray-1);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-solid):where(.r-high-contrast:hover) {
-    background-color: var(--accent-12);
-    filter: var(--button-solid-high-contrast-hover-filter);
-}
-}
-.ui-Button:where(.r-variant-solid):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
-  outline: none;
-  filter: none;
-}
-
-/* soft / ghost */
-.ui-Button:where(.r-variant-soft, .r-variant-ghost) {
-  color: var(--accent-a11);
-}
-.ui-Button:where(.r-variant-soft, .r-variant-ghost):where(.r-high-contrast) {
-  color: var(--accent-12);
-}
-.ui-Button:where(.r-variant-soft) {
-  background-color: var(--accent-a3);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-soft):where(:hover) {
-    background-color: var(--accent-a4);
-}
-}
-.ui-Button:where(.r-variant-soft):where(:focus-visible) {
-  outline: 2px solid var(--accent-8);
-  outline-offset: -1px;
-}
-.ui-Button:where(.r-variant-soft):where(:active) {
-  background-color: var(--accent-a5);
-}
-.ui-Button:where(.r-variant-soft):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
-}
-.ui-Button:where(.r-variant-ghost) {
-  padding: var(--button-ghost-padding-y) var(--button-padding-x);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-ghost):where(:hover) {
-    background-color: var(--accent-a3);
-}
-}
-.ui-Button:where(.r-variant-ghost):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: -1px;
-}
-.ui-Button:where(.r-variant-ghost):where(:active) {
-  background-color: var(--accent-a4);
-}
-.ui-Button:where(.r-variant-ghost):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: transparent;
-}
-
-/* classic */
-.ui-Button:where(.r-variant-classic) {
-  box-shadow: var(--shadow-2);
-  background-color: var(--color-background);
-}
-.ui-Button:where(.r-variant-classic):where(.r-high-contrast) {
-  color: var(--gray-12);
-  box-shadow: 0 0 0 1px var(--gray-a6), 0 1px 1px 0 var(--black-a4), 0 2px 1px -1px var(--black-a2), 0 1px 3px 0 var(--black-a1);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-classic):where(:hover) {
-    color: var(--accent-a11);
-    background-color: var(--gray-a2);
-}
-.ui-Button:where(.r-variant-classic):where(.r-high-contrast):where(:hover) {
-    color: var(--accent-12);
-}
-}
-.ui-Button:where(.r-variant-classic):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-Button:where(.r-variant-classic):where(:active:not([data-disabled])) {
-  box-shadow: var(--shadow-1);
-}
-.ui-Button:where(.r-variant-classic):where([data-disabled]) {
-  color: var(--gray-a10);
-  background-color: var(--gray-a2);
-}
-
-/* outline */
-.ui-Button:where(.r-variant-outline) {
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
-  color: var(--accent-a11);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-outline):where(:hover) {
-    background-color: var(--accent-a2);
-}
-}
-.ui-Button:where(.r-variant-outline):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: -1px;
-}
-.ui-Button:where(.r-variant-outline):where(.r-high-contrast) {
-  box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
-  color: var(--accent-12);
-}
-.ui-Button:where(.r-variant-outline):where(:active) {
-  background-color: var(--accent-a4);
-}
-.ui-Button:where(.r-variant-outline):where([data-disabled]) {
-  color: var(--gray-a8);
-  box-shadow: inset 0 0 0 1px var(--gray-a7);
-  background-color: transparent;
-}
-
-/* surface */
-.ui-Button:where(.r-variant-surface) {
-  background-color: var(--accent-surface);
-  box-shadow: inset 0 0 0 1px var(--accent-a7);
-  color: var(--accent-a11);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-surface):where(:hover) {
-    box-shadow: inset 0 0 0 1px var(--accent-a8);
-}
-}
-.ui-Button:where(.r-variant-surface):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: -1px;
-}
-.ui-Button:where(.r-variant-surface):where(.r-high-contrast) {
-  color: var(--accent-12);
-}
-.ui-Button:where(.r-variant-surface):where(:active) {
-  background-color: var(--accent-a4);
-}
-.ui-Button:where(.r-variant-surface):where([data-disabled]) {
-  color: var(--gray-a8);
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
-  background-color: var(--gray-a2);
-}
-
-.ui-Button.ui-IconButton {
-  height: var(--button-height);
-  width: var(--button-height);
-  padding: 0;
-}
-
-.ui-Pagination {
-  display: flex;
-  align-items: center;
-}
-.ui-Pagination:where(.r-size-1) {
-  gap: var(--space-1);
-}
-.ui-Pagination:where(.r-size-2) {
-  gap: var(--space-2);
-}
-.ui-Pagination:where(.r-size-3) {
-  gap: var(--space-3);
-}
-.ui-Pagination:where(.r-size-4) {
-  gap: var(--space-4);
-}
-.ui-Pagination:where(.r-variant-ghost) {
-  gap: 0;
-}

package/components/popover.css

@@ -1,58 +0,0 @@
-@media (prefers-reduced-motion: no-preference) {
-.ui-PopperContent {
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-}
-.ui-PopperContent:where([data-state='open']) {
-    animation-duration: 160ms;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='top']) {
-    animation-name: ui-slide-from-top, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='bottom']) {
-    animation-name: ui-slide-from-bottom, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='left']) {
-    animation-name: ui-slide-from-left, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='right']) {
-    animation-name: ui-slide-from-right, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='closed']) {
-    animation-duration: 100ms;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='top']) {
-    animation-name: ui-slide-from-top, ui-fade-out;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='bottom']) {
-    animation-name: ui-slide-from-bottom, ui-fade-out;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='left']) {
-    animation-name: ui-slide-from-left, ui-fade-out;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='right']) {
-    animation-name: ui-slide-from-right, ui-fade-out;
-}
-}
-
-@layer components {
-.ui-PopoverPopup {
-    background-color: var(--color-panel-solid);
-    box-shadow: var(--shadow-5);
-    min-width: var(--reka-popover-trigger-width);
-    max-width: var(--reka-popover-content-available-width);
-    outline: 0;
-    overflow: auto;
-    position: relative;
-    box-sizing: border-box;
-    transform-origin: var(--reka-popover-content-transform-origin);
-    padding: var(--popover-popup-padding);
-}
-}
-.ui-PopoverPopup:where(.r-size-1) {
-  border-radius: var(--radius-4);
-  --popover-popup-padding: var(--space-2);
-}
-.ui-PopoverPopup:where(.r-size-2) {
-  border-radius: var(--radius-5);
-  --popover-popup-padding: var(--space-4);
-}

package/components/quota.css

@@ -1,14 +0,0 @@
-
-.ui-Quota {
-  position: relative;
-  overflow: hidden;
-  border-radius: var(--radius-full);
-  width: 100%;
-  height: var(--space-2);
-  background-color: var(--slate-4);
-}
-.ui-QuotaValue {
-  border-radius: var(--radius-full);
-  width: 100%;
-  height: 100%;
-}

package/components/radio.css

@@ -1,264 +0,0 @@
-.ui-RadioBase {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  cursor: default;
-  width: var(--radio-size);
-  height: var(--radio-size);
-  border: none;
-  box-shadow: none;
-}
-.ui-RadioBase:where(.r-size-1) {
-  --radio-size: calc(var(--space-4) * 0.875);
-}
-.ui-RadioBase:where(.r-size-2) {
-  --radio-size: var(--space-4);
-}
-.ui-RadioBase:where(.r-size-3) {
-  --radio-size: calc(var(--space-4) * 1.25);
-}
-.ui-RadioBase:checked {
-  /* reset for tailwind */
-  background-image: none;
-}
-.ui-RadioBase:focus {
-  /* reset for tailwind */
-  box-shadow: none;
-}
-.ui-RadioBase:where(:focus-visible) {
-  outline: none;
-}
-.ui-RadioBase:where(:disabled, [data-disabled]) {
-  cursor: not-allowed;
-}
-.ui-RadioBase::before {
-  content: '';
-  display: block;
-  height: var(--radio-size);
-  width: var(--radio-size);
-  border-radius: 100%;
-}
-.ui-RadioBase::after {
-  pointer-events: none;
-  position: absolute;
-  height: var(--radio-size);
-  width: var(--radio-size);
-  border-radius: 100%;
-  /* Scale via transform to achieve perfect sub-pixel positioning */
-  transform: scale(0.4);
-}
-.ui-RadioBase:where(:checked, [data-state='checked'])::after {
-  content: '';
-}
-.ui-RadioBase:where(:focus-visible)::before {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:not(:checked), [data-state='unchecked'])::before,
-.ui-RadioBase:where(.r-variant-surface):where(:not(:checked), [data-state='unchecked'])::before {
-  background-color: var(--color-surface);
-  box-shadow: inset 0 0 0 1px var(--gray-a7);
-}
-:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:checked, [data-state='checked'])::before,
-.ui-RadioBase:where(.r-variant-surface):where(:checked, [data-state='checked'])::before {
-  background-color: var(--accent-indicator);
-}
-:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase::after,
-.ui-RadioBase:where(.r-variant-surface)::after {
-  background-color: var(--accent-contrast);
-}
-:where(.ui-RadioGroupRoot.r-variant-surface.r-high-contrast) .ui-RadioBase:where(:checked, [data-state='checked'])::before,
-.ui-RadioBase:where(.r-variant-surface.r-high-contrast):where(:checked, [data-state='checked'])::before {
-  background-color: var(--accent-12);
-}
-:where(.ui-RadioGroupRoot.r-variant-surface.r-high-contrast) .ui-RadioBase::after,
-.ui-RadioBase:where(.r-variant-surface.r-high-contrast)::after {
-  background-color: var(--accent-1);
-}
-:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:disabled, [data-disabled])::before,
-.ui-RadioBase:where(.r-variant-surface):where(:disabled, [data-disabled])::before {
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
-  background-color: var(--gray-a3);
-}
-:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:disabled, [data-disabled])::after,
-.ui-RadioBase:where(.r-variant-surface):where(:disabled, [data-disabled])::after {
-  background-color: var(--gray-a8);
-}
-:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase::before,
-.ui-RadioBase:where(.r-variant-soft)::before {
-  background-color: var(--accent-a4);
-}
-:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase::after,
-.ui-RadioBase:where(.r-variant-soft)::after {
-  background-color: var(--accent-a11);
-}
-:where(.ui-RadioGroupRoot.r-variant-soft.r-high-contrast) .ui-RadioBase::after,
-.ui-RadioBase:where(.r-variant-soft.r-high-contrast)::after {
-  background-color: var(--accent-12);
-}
-:where(.ui-RadioGroupRoot.r-variant-soft:focus-visible) .ui-RadioBase::before,
-.ui-RadioBase:where(.r-variant-soft:focus-visible)::before {
-  outline-color: var(--accent-a8);
-}
-:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase:where(:disabled, [data-disabled])::before,
-.ui-RadioBase:where(.r-variant-soft):where(:disabled, [data-disabled])::before {
-  background-color: var(--gray-a3);
-}
-:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase:where(:disabled, [data-disabled])::after,
-.ui-RadioBase:where(.r-variant-soft):where(:disabled, [data-disabled])::after {
-  background-color: var(--gray-a8);
-}
-
-.ui-Radio {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-}
-
-.ui-RadioGroupRoot:where(.r-size-1) {
-  --radio-size: calc(var(--space-4) * 0.875);
-}
-.ui-RadioGroupRoot:where(.r-size-2) {
-  --radio-size: var(--space-4);
-}
-.ui-RadioGroupRoot:where(.r-size-3) {
-  --radio-size: calc(var(--space-4) * 1.25);
-}
-
-@layer components {
-.ui-RadioGroupItem {
-    display: inline-flex;
-    align-items: center;
-    gap: .5em;
-    width: -moz-fit-content;
-    width: fit-content;
-}
-}
-
-.ui-RadioCardsRoot:where(.r-size-1) {
-  --card-padding: var(--space-3);
-  --card-border-radius: max(var(--radius-4), var(--radius-full));
-}
-.ui-RadioCardsRoot:where(.r-size-2) {
-  --card-padding: var(--space-4);
-  --card-border-radius: max(var(--radius-4), var(--radius-full));
-}
-.ui-RadioCardsRoot:where(.r-size-3) {
-  --card-padding: var(--space-5);
-  --card-border-radius: max(var(--radius-5), var(--radius-full));
-}
-@layer components {
-.ui-BaseCard {
-    display: block;
-    position: relative;
-    overflow: hidden;
-    font-style: normal;
-    text-align: start;
-    box-sizing: border-box;
-    border-radius: var(--card-border-radius);
-    padding: var(--card-padding);
-    border-color: var(--card-border-color, var(--gray-a5));
-    border-width: var(--card-border-width, 1px);
-    border-style: solid;
-    width: 100%;
-}
-}
-.ui-BaseCard:where(:-moz-any-link, button, label):where(:hover) {
-  --card-border-color: var(--gray-a7);
-}
-.ui-BaseCard:where(:any-link, button, label):where(:hover) {
-  --card-border-color: var(--gray-a7);
-}
-.ui-BaseCard:where(:-moz-any-link, button, label):where(:focus-visible) {
-  --card-border-color: var(--focus-8);
-  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-.ui-BaseCard:where(:any-link, button, label):where(:focus-visible) {
-  --card-border-color: var(--focus-8);
-  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-
-.ui-RadioCardsItem {
-  height: 100%;
-}
-.ui-RadioCardsItem:where([data-state="checked"]) {
-  --card-border-color: var(--accent-10);
-  box-shadow: 0 0 0 1px var(--accent-10);
-}
-
-@layer components {
-.ui-RadioTabsRoot {
-    display: inline-flex;
-    width: -moz-fit-content;
-    width: fit-content;
-    align-items: center;
-    box-sizing: border-box;
-    padding: var(--radio-tabs-list-padding);
-    border-radius: var(--radio-tabs-list-radius);
-    font-size: var(--radio-tabs-font-size);
-}
-}
-.ui-RadioTabsRoot:where(.r-size-1) {
-  --radio-tabs-font-size: var(--font-size-1);
-  --radio-tabs-list-padding: var(--space-1);
-  --radio-tabs-list-radius: max(var(--radius-2), var(--radius-full));
-  --radio-tabs-item-padding: 3px 6px;
-  --radio-tabs-item-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-RadioTabsRoot:where(.r-size-2) {
-  --radio-tabs-font-size: var(--font-size-2);
-  --radio-tabs-list-padding: var(--space-1);
-  --radio-tabs-list-radius: max(var(--radius-3), var(--radius-full));
-  --radio-tabs-item-padding: 4px 8px;
-  --radio-tabs-item-radius: max(var(--radius-2), var(--radius-full));
-}
-.ui-RadioTabsRoot:where(.r-variant-surface) {
-  background-color: var(--accent-surface);
-  box-shadow: inset 0 0 0 1px var(--accent-a7);
-}
-.ui-RadioTabsRoot:where(.r-variant-classic) {
-  background-color: var(--accent-a3);
-}
-.ui-RadioTabsRoot:where(.r-variant-soft) {
-  background-color: var(--accent-a3);
-}
-
-.ui-RadioTabsItem {
-  display: inline-flex;
-  flex-grow: 1;
-  justify-content: center;
-  align-items: center;
-  color: var(--gray-a11);
-  padding: var(--radio-tabs-item-padding);
-  border-radius: var(--radio-tabs-item-radius);
-}
-.ui-RadioTabsItem:where([data-state="unchecked"]) {
-  letter-spacing: var(--tab-inactive-letter-spacing);
-  word-spacing: var(--tab-inactive-word-spacing);
-}
-.ui-RadioTabsItem:where([data-state="checked"]) {
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--tab-active-letter-spacing);
-  word-spacing: var(--tab-active-word-spacing);
-}
-.ui-RadioTabsRoot:where(.r-variant-classic) :where(.ui-RadioTabsItem[data-state="checked"]) {
-  color: var(--gray-12);
-  background-color: var(--color-background);
-  box-shadow: var(--shadow-2);
-}
-.ui-RadioTabsRoot:where(.r-variant-soft) :where(.ui-RadioTabsItem[data-state="checked"]),
-.ui-RadioTabsRoot:where(.r-variant-surface) :where(.ui-RadioTabsItem[data-state="checked"]) {
-  color: var(--accent-a11);
-  background-color: var(--accent-a3);
-}
-@media (hover: hover) {
-:where(.ui-RadioTabsRoot.r-variant-classic) .ui-RadioTabsItem:where(:hover) {
-    color: var(--gray-12);
-}
-:where(.ui-RadioTabsRoot.r-variant-classic) .ui-RadioTabsItem:where(:hover) {
-    color: var(--gray-12);
-}
-}