@lostgradient/cinder 0.4.0 → 0.4.1

package/dist/server/components/toast-region/index.css

@@ -1,227 +0,0 @@
-/* src/components/toast-region/toast-region.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-toast-region {
-    position: fixed;
-    display: flex;
-    gap: var(--cinder-space-2);
-    z-index: var(--cinder-z-toast);
-    pointer-events: none;
-    flex-direction: column;
-  }
-
-  .cinder-toast-region[data-cinder-position^="top"] {
-    top: var(--cinder-space-4);
-  }
-
-  .cinder-toast-region[data-cinder-position^="bottom"] {
-    bottom: var(--cinder-space-4);
-  }
-
-  .cinder-toast-region[data-cinder-position$="left"] {
-    left: var(--cinder-space-4);
-    align-items:  flex-start;
-  }
-
-  .cinder-toast-region[data-cinder-position$="center"] {
-    align-items:  center;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .cinder-toast-region[data-cinder-position$="right"] {
-    right: var(--cinder-space-4);
-    align-items:  flex-end;
-  }
-
-  .cinder-toast-region__channel {
-    display: flex;
-    gap: var(--cinder-space-2);
-    flex-direction: column;
-  }
-
-  .cinder-toast-region[data-cinder-position^="top"] .cinder-toast-region__channel {
-    flex-direction: column-reverse;
-  }
-
-  .cinder-toast-shell {
-    display: block;
-    max-height: var(--cinder-toast-height, none);
-    opacity: 1;
-    transition: max-height var(--cinder-duration-fast) var(--cinder-ease-standard), opacity var(--cinder-duration-fast) var(--cinder-ease-standard), margin-block var(--cinder-duration-fast) var(--cinder-ease-standard);
-  }
-
-  .cinder-toast-shell[data-cinder-presence="exiting"] {
-    opacity: 0;
-    overflow: hidden;
-    max-height: 0;
-    margin-block: 0;
-  }
-
-  .cinder-toast {
-    pointer-events: auto;
-    position: relative;
-    display: flex;
-    align-items:  flex-start;
-    gap: var(--cinder-space-3);
-    padding: var(--cinder-space-3) var(--cinder-space-4);
-    background: var(--cinder-surface-raised);
-    border: 1px solid var(--cinder-border);
-    border-radius: var(--cinder-radius-md);
-    font-size: var(--cinder-text-sm);
-    color: var(--cinder-text);
-    touch-action: pan-y;
-    transform: translateX(var(--cinder-toast-swipe-x, 0)) translateY(calc(var(--cinder-toast-stack-index, 0) * -2px));
-    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard), opacity var(--cinder-duration-fast) var(--cinder-ease-standard);
-    animation: cinder-toast-in var(--cinder-duration-fast) var(--cinder-ease-decelerate);
-    min-width: 18rem;
-    max-width: 28rem;
-    box-shadow: inset 0 1px light-dark(#0000, oklch(100% 0 0 / .06)), 0 1px 2px oklch(0% 0 0 / .04), 0 4px 12px oklch(0% 0 0 / .08);
-  }
-
-  .cinder-toast[data-cinder-swiping="true"] {
-    user-select: none;
-  }
-
-  @keyframes cinder-toast-in {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes cinder-toast-spinner-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cinder-toast-shell, .cinder-toast, .cinder-toast__spinner {
-      animation: none;
-      transition-duration: 0s;
-    }
-  }
-
-  .cinder-toast[data-cinder-variant]:before {
-    content: "";
-    position: absolute;
-    background: var(--_cinder-toast-accent, transparent);
-    border-start-start-radius: calc(var(--cinder-radius-md)  - 1px);
-    border-end-start-radius: calc(var(--cinder-radius-md)  - 1px);
-    width: 3px;
-    inset-block: 0;
-    inset-inline-start: 0;
-  }
-
-  .cinder-toast[data-cinder-variant="info"] {
-    --_cinder-toast-accent: var(--cinder-info);
-  }
-
-  .cinder-toast[data-cinder-variant="success"] {
-    --_cinder-toast-accent: var(--cinder-success);
-  }
-
-  .cinder-toast[data-cinder-variant="warning"] {
-    --_cinder-toast-accent: var(--cinder-warning);
-  }
-
-  .cinder-toast[data-cinder-variant="danger"] {
-    --_cinder-toast-accent: var(--cinder-danger);
-  }
-
-  .cinder-toast__icon {
-    display: inline-flex;
-    color: var(--_cinder-toast-accent, var(--cinder-text-muted));
-    flex-shrink: 0;
-    align-items:  center;
-    line-height: 0;
-  }
-
-  .cinder-toast__spinner {
-    display: inline-block;
-    width: var(--cinder-spinner-size-sm, 1rem);
-    height: var(--cinder-spinner-size-sm, 1rem);
-    border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
-    color: var(--_cinder-toast-accent, var(--cinder-text-muted));
-    animation: cinder-toast-spinner-spin var(--cinder-duration-spin) linear infinite;
-    border-top-color: currentColor;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .cinder-toast__message {
-    line-height: var(--cinder-leading-normal);
-    flex: auto;
-  }
-
-  .cinder-toast__action {
-    appearance: none;
-    font: inherit;
-    font-weight: var(--cinder-font-medium);
-    color: var(--cinder-accent-text);
-    cursor: pointer;
-    border-radius: var(--cinder-radius-sm);
-    background: none;
-    border: none;
-    padding: 0;
-  }
-
-  .cinder-toast__action:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  .cinder-toast__dismiss {
-    appearance: none;
-    padding: var(--cinder-space-0-5);
-    color: var(--cinder-text-muted);
-    cursor: pointer;
-    border-radius: var(--cinder-radius-sm);
-    display: inline-flex;
-    position: relative;
-    background: none;
-    border: none;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items:  center;
-    margin: 0;
-  }
-
-  .cinder-toast__dismiss svg {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .cinder-toast__dismiss:after {
-    content: "";
-    position: absolute;
-    width: 44px;
-    height: 44px;
-    inset: 50% auto auto 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  @media (hover: hover) {
-    .cinder-toast__dismiss:hover {
-      color: var(--cinder-text);
-      background: var(--cinder-surface-hover);
-    }
-  }
-
-  .cinder-toast__dismiss:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  @media (forced-colors: active) {
-    .cinder-toast__action:focus-visible, .cinder-toast__dismiss:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
-      outline-offset: 3px;
-    }
-  }
-}

package/dist/server/components/toggle/index.css

@@ -1,109 +0,0 @@
-/* src/components/toggle/toggle.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-toggle-field {
-    position: relative;
-    display: inline-flex;
-    align-items:  center;
-    gap: var(--cinder-space-2);
-  }
-
-  .cinder-toggle-field__label {
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-medium);
-    color: var(--cinder-text);
-    cursor: pointer;
-    line-height: 1;
-  }
-
-  .cinder-toggle-field__label[data-disabled] {
-    color: var(--cinder-text-disabled);
-    cursor: not-allowed;
-  }
-
-  .cinder-toggle-field__label[data-hidden] {
-    position: absolute;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-  }
-
-  .cinder-toggle {
-    position: relative;
-    display: inline-flex;
-    box-sizing: border-box;
-    width: var(--cinder-toggle-width, 2.75rem);
-    height: var(--cinder-toggle-height, 1.5rem);
-    border-radius: var(--cinder-radius-full);
-    cursor: pointer;
-    vertical-align: middle;
-    background: var(--cinder-toggle-track-off, var(--cinder-toggle-track-off-resting));
-    transition: background-color var(--cinder-duration-fast, .15s) var(--cinder-ease-standard, ease), box-shadow var(--cinder-duration-fast, .15s) var(--cinder-ease-standard, ease);
-    border: none;
-    flex-shrink: 0;
-    align-items:  center;
-    padding: 0;
-  }
-
-  .cinder-toggle[data-cinder-checked] {
-    background: var(--cinder-toggle-track-on, var(--cinder-accent));
-  }
-
-  .cinder-toggle:focus-visible {
-    outline: var(--cinder-ring-width, 2px) solid transparent;
-    box-shadow: 0 0 0 var(--cinder-ring-offset, 2px) var(--cinder-ring-offset-color, var(--cinder-surface)), 0 0 0 calc(var(--cinder-ring-offset, 2px)  + var(--cinder-ring-width, 2px)) var(--cinder-toggle-ring, var(--cinder-ring-color));
-  }
-
-  @media (forced-colors: active) {
-    .cinder-toggle:focus-visible {
-      outline: var(--cinder-ring-width, 2px) solid ButtonText;
-      outline-offset: 3px;
-    }
-  }
-
-  @media (hover: hover) {
-    .cinder-toggle:hover:not(:disabled) {
-      background: var(--cinder-toggle-track-off-hover, var(--cinder-toggle-track-off-hover-resting));
-    }
-
-    .cinder-toggle[data-cinder-checked]:hover:not(:disabled) {
-      background: var(--cinder-toggle-track-on-hover, var(--cinder-accent-hover));
-    }
-  }
-
-  .cinder-toggle:disabled {
-    cursor: not-allowed;
-    filter: grayscale(.4);
-  }
-
-  .cinder-toggle__thumb {
-    pointer-events: none;
-    position: absolute;
-    display: block;
-    width: var(--cinder-toggle-thumb-size, 1.125rem);
-    height: var(--cinder-toggle-thumb-size, 1.125rem);
-    background: var(--cinder-toggle-thumb-color, #fff);
-    box-shadow: var(--cinder-shadow-sm);
-    transition: transform var(--cinder-duration-fast, .15s) var(--cinder-ease-standard, ease);
-    border-radius: 50%;
-    inset-block-start: 50%;
-    inset-inline-start: .125rem;
-    transform: translate(0, -50%);
-  }
-
-  .cinder-toggle[data-cinder-checked] .cinder-toggle__thumb {
-    transform: translate(var(--cinder-toggle-thumb-travel, 1.375rem), -50%);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cinder-toggle, .cinder-toggle__thumb {
-      transition: none;
-    }
-  }
-}

package/dist/server/components/toolbar/index.css

@@ -1,63 +0,0 @@
-/* src/components/toolbar/toolbar.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-toolbar {
-    display: flex;
-    align-items:  center;
-    gap: var(--cinder-space-2);
-    container-type: inline-size;
-    container-name: cinder-toolbar;
-    flex-wrap: nowrap;
-    min-inline-size: 0;
-  }
-
-  .cinder-toolbar[data-cinder-orientation="vertical"] {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .cinder-toolbar__group {
-    display: flex;
-    align-items:  center;
-    gap: var(--cinder-space-2);
-    flex-wrap: nowrap;
-    min-inline-size: 0;
-  }
-
-  .cinder-toolbar[data-cinder-orientation="vertical"] .cinder-toolbar__group, .cinder-toolbar__group[data-cinder-orientation="vertical"] {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .cinder-toolbar[data-cinder-orientation="horizontal"] > .cinder-toolbar__group + .cinder-toolbar__group:before {
-    content: "";
-    background: var(--cinder-border);
-    flex-shrink: 0;
-    block-size: 1.5rem;
-    inline-size: 1px;
-  }
-
-  .cinder-toolbar[data-cinder-orientation="vertical"] > .cinder-toolbar__group + .cinder-toolbar__group:before {
-    content: "";
-    background: var(--cinder-border);
-    block-size: 1px;
-    inline-size: 100%;
-  }
-
-  .cinder-toolbar__spacer {
-    min-inline-size: var(--cinder-space-2);
-    flex: auto;
-  }
-
-  @container cinder-toolbar (width <= 30rem) {
-    .cinder-toolbar[data-cinder-orientation="horizontal"] {
-      flex-wrap: wrap;
-      align-items: stretch;
-    }
-
-    .cinder-toolbar[data-cinder-orientation="horizontal"] .cinder-toolbar__group {
-      flex-wrap: wrap;
-    }
-  }
-}

package/dist/server/components/tooltip/index.css

@@ -1,50 +0,0 @@
-/* src/components/tooltip/tooltip.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-tooltip-wrapper {
-    display: inline-flex;
-    align-items:  center;
-  }
-
-  .cinder-tooltip {
-    position: fixed;
-    z-index: var(--cinder-z-tooltip, 50);
-    padding: var(--cinder-space-1-5) var(--cinder-space-2-5);
-    border-radius: var(--cinder-radius-md);
-    background: var(--cinder-surface-inverse);
-    color: var(--cinder-text-inverse);
-    border: 1px solid var(--cinder-border-inverse);
-    font-size: var(--cinder-text-xs);
-    line-height: var(--cinder-leading-snug);
-    white-space: nowrap;
-    pointer-events: none;
-    user-select: none;
-    transition: opacity var(--cinder-duration-fast) var(--cinder-ease-standard);
-    max-width: 16rem;
-    top: 0;
-    left: 0;
-  }
-
-  .cinder-tooltip[data-cinder-position-ready="false"] {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  .cinder-tooltip[aria-hidden="false"] {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .cinder-tooltip[aria-hidden="true"] {
-    visibility: hidden;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cinder-tooltip {
-      transition: none;
-    }
-  }
-}

package/dist/server/components/transfer-list/index.css

@@ -1,132 +0,0 @@
-/* src/components/transfer-list/transfer-list.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-transfer-list {
-    container-type: inline-size;
-    container-name: cinder-transfer-list;
-  }
-
-  .cinder-transfer-list__layout {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-    gap: var(--cinder-space-4);
-    align-items: stretch;
-  }
-
-  .cinder-transfer-list__panel {
-    display: grid;
-    grid-template-rows: auto minmax(12rem, 1fr);
-    gap: var(--cinder-space-2);
-    min-inline-size: 0;
-  }
-
-  .cinder-transfer-list__label {
-    color: var(--cinder-text);
-    font-size: var(--cinder-text-sm);
-    font-weight: var(--cinder-font-medium);
-    margin: 0;
-  }
-
-  .cinder-transfer-list__list {
-    padding: var(--cinder-space-2);
-    list-style: none;
-    overflow: auto;
-    border: 1px solid var(--cinder-border-muted);
-    border-radius: var(--cinder-radius-md);
-    background: var(--cinder-surface);
-    min-block-size: 12rem;
-    margin: 0;
-  }
-
-  .cinder-transfer-list__list:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  @media (forced-colors: active) {
-    .cinder-transfer-list__list:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
-      outline-offset: calc(-1 * var(--cinder-ring-width));
-      box-shadow: none;
-    }
-  }
-
-  .cinder-transfer-list__option {
-    padding: var(--cinder-space-2) var(--cinder-space-3);
-    border-radius: var(--cinder-radius-sm);
-    color: var(--cinder-text);
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .cinder-transfer-list__option[data-cinder-active="true"] {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: inset 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
-  }
-
-  .cinder-transfer-list__option[aria-selected="true"] {
-    background: var(--cinder-surface-inset);
-  }
-
-  .cinder-transfer-list__option[aria-disabled="true"] {
-    color: var(--cinder-text-disabled);
-    cursor: not-allowed;
-    opacity: .7;
-  }
-
-  .cinder-transfer-list__empty {
-    padding: var(--cinder-space-3);
-    color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-sm);
-  }
-
-  .cinder-transfer-list__controls {
-    display: flex;
-    justify-content: center;
-    gap: var(--cinder-space-2);
-    flex-direction: column;
-  }
-
-  .cinder-transfer-list__control {
-    padding: var(--cinder-space-1) var(--cinder-space-2);
-    border: 1px solid var(--cinder-border-muted);
-    border-radius: var(--cinder-radius-sm);
-    background: var(--cinder-surface-raised);
-    color: var(--cinder-text);
-    font: inherit;
-    cursor: pointer;
-    min-block-size: 2.25rem;
-    min-inline-size: 2.5rem;
-  }
-
-  .cinder-transfer-list__control:disabled {
-    color: var(--cinder-text-disabled);
-    cursor: not-allowed;
-    opacity: .7;
-  }
-
-  .cinder-transfer-list__control:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  @media (forced-colors: active) {
-    .cinder-transfer-list__control:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
-      outline-offset: 3px;
-      box-shadow: none;
-    }
-  }
-
-  @container cinder-transfer-list (width <= 42rem) {
-    .cinder-transfer-list__layout {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    .cinder-transfer-list__controls {
-      flex-direction: row;
-      flex-wrap: wrap;
-    }
-  }
-}