@lostgradient/cinder 0.4.0 → 0.4.1

package/dist/server/components/color-picker/index.css

@@ -1,134 +0,0 @@
-/* src/components/color-picker/color-picker.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-color-picker {
-    container-type: inline-size;
-    container-name: cinder-color-picker;
-    display: flex;
-    gap: var(--cinder-space-2);
-    --_cinder-color-picker-thumb-border: #fff;
-    --_cinder-color-picker-thumb-shadow-edge: #00000080;
-    --_cinder-color-picker-thumb-shadow-support-light: transparent;
-    --_cinder-color-picker-thumb-shadow-support-dark: #ffffffa6;
-    --_cinder-color-picker-thumb-shadow-support: light-dark(var(--_cinder-color-picker-thumb-shadow-support-light), var(--_cinder-color-picker-thumb-shadow-support-dark));
-    --_cinder-color-picker-thumb-shadow: 0 0 0 1px var(--_cinder-color-picker-thumb-shadow-edge), 0 0 0 2px var(--_cinder-color-picker-thumb-shadow-support);
-    flex-direction: column;
-    width: 100%;
-    max-width: 280px;
-  }
-
-  .cinder-color-picker[data-cinder-disabled] {
-    opacity: .6;
-    cursor: not-allowed;
-  }
-
-  .cinder-color-picker__gradient {
-    position: relative;
-    aspect-ratio: 4 / 3;
-    border-radius: var(--cinder-radius-sm, 4px);
-    --_cinder-color-picker-hue-fill: var(--cinder-color-picker-hue, red);
-    --_cinder-color-picker-value-axis: linear-gradient(to top, #000, transparent);
-    --_cinder-color-picker-saturation-axis: linear-gradient(to right, #fff, transparent);
-    background-color: var(--_cinder-color-picker-hue-fill);
-    background-image: var(--_cinder-color-picker-value-axis), var(--_cinder-color-picker-saturation-axis);
-    touch-action: none;
-    cursor: crosshair;
-    outline: none;
-    width: 100%;
-  }
-
-  .cinder-color-picker__gradient:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  .cinder-color-picker__gradient-handle {
-    position: absolute;
-    border: 2px solid var(--_cinder-color-picker-thumb-border);
-    box-shadow: var(--_cinder-color-picker-thumb-shadow);
-    pointer-events: none;
-    border-radius: 50%;
-    width: 14px;
-    height: 14px;
-    transform: translate(-50%, -50%);
-  }
-
-  .cinder-color-picker__hue, .cinder-color-picker__alpha {
-    position: relative;
-    border-radius: var(--cinder-radius-full);
-    outline: none;
-    touch-action: none;
-    height: 12px;
-  }
-
-  .cinder-color-picker__hue {
-    --_cinder-color-picker-hue-spectrum: linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
-    background: var(--_cinder-color-picker-hue-spectrum);
-  }
-
-  .cinder-color-picker__alpha {
-    background-color: var(--cinder-color-checker-base);
-    background-image: linear-gradient(to right, transparent, var(--cinder-color-picker-base, currentColor)), linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
-    background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;
-    background-size: auto, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
-  }
-
-  .cinder-color-picker__hue:focus-visible, .cinder-color-picker__alpha:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  .cinder-color-picker__hue-thumb, .cinder-color-picker__alpha-thumb {
-    position: absolute;
-    border: 2px solid var(--_cinder-color-picker-thumb-border);
-    box-shadow: var(--_cinder-color-picker-thumb-shadow);
-    pointer-events: none;
-    background: none;
-    border-radius: 50%;
-    width: 14px;
-    height: 14px;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .cinder-color-picker__footer {
-    display: flex;
-    align-items:  center;
-    gap: var(--cinder-space-2);
-  }
-
-  .cinder-color-picker__preview {
-    background-color: var(--cinder-color-picker-preview, transparent);
-    border: 1px solid var(--cinder-border);
-    border-radius: 50%;
-    flex-shrink: 0;
-    width: 24px;
-    height: 24px;
-  }
-
-  .cinder-color-picker__preview[data-cinder-alpha] {
-    background-color: var(--cinder-color-checker-base);
-    background-image: linear-gradient(var(--cinder-color-picker-preview, transparent), var(--cinder-color-picker-preview, transparent)), linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
-    background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;
-    background-size: auto, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
-  }
-
-  .cinder-color-picker__hex-value {
-    font-family: var(--cinder-font-mono, monospace);
-    font-size: var(--cinder-text-xs, .75rem);
-    color: var(--cinder-text-secondary, currentColor);
-    user-select: all;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 1;
-  }
-
-  @media (forced-colors: active) {
-    .cinder-color-picker__gradient:focus, .cinder-color-picker__gradient:focus-visible, .cinder-color-picker__hue:focus, .cinder-color-picker__hue:focus-visible, .cinder-color-picker__alpha:focus, .cinder-color-picker__alpha:focus-visible {
-      outline: 3px solid highlight;
-      outline-offset: 2px;
-    }
-  }
-}

package/dist/server/components/color-swatch-picker/index.css

@@ -1,113 +0,0 @@
-/* src/components/color-swatch-picker/color-swatch-picker.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-color-swatch-picker {
-    display: flex;
-    gap: var(--cinder-space-2);
-    list-style: none;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-  }
-
-  .cinder-color-swatch-picker[data-cinder-layout="stack"] {
-    flex-flow: column;
-  }
-
-  .cinder-color-swatch-picker[data-cinder-size="xs"] {
-    --swatch-size: 16px;
-  }
-
-  .cinder-color-swatch-picker[data-cinder-size="sm"] {
-    --swatch-size: 24px;
-  }
-
-  .cinder-color-swatch-picker[data-cinder-size="md"] {
-    --swatch-size: 32px;
-  }
-
-  .cinder-color-swatch-picker[data-cinder-size="lg"] {
-    --swatch-size: 36px;
-  }
-
-  .cinder-color-swatch-picker[data-cinder-size="xl"] {
-    --swatch-size: 40px;
-  }
-
-  .cinder-color-swatch-picker__swatch {
-    position: relative;
-    display: flex;
-    width: var(--swatch-size, 32px);
-    height: var(--swatch-size, 32px);
-    cursor: pointer;
-    background-color: var(--swatch-color);
-    outline: none;
-    border: none;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items:  center;
-    padding: 0;
-  }
-
-  .cinder-color-swatch-picker[data-cinder-shape="circle"] .cinder-color-swatch-picker__swatch {
-    border-radius: 50%;
-  }
-
-  .cinder-color-swatch-picker[data-cinder-shape="square"] .cinder-color-swatch-picker__swatch {
-    border-radius: var(--cinder-radius-sm);
-  }
-
-  .cinder-color-swatch-picker__swatch[data-cinder-alpha] {
-    background-color: var(--cinder-color-checker-base);
-    background-image: linear-gradient(var(--swatch-color), var(--swatch-color)), linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
-    background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;
-    background-size: auto, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
-  }
-
-  .cinder-color-swatch-picker__swatch: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, transparent), 0 0 0 calc(var(--cinder-ring-offset, 2px)  + var(--cinder-ring-width, 2px)) var(--cinder-ring-color, currentColor);
-    z-index: 1;
-  }
-
-  @media (forced-colors: active) {
-    .cinder-color-swatch-picker__swatch:focus-visible {
-      outline: 3px solid highlight;
-      outline-offset: 2px;
-    }
-  }
-
-  .cinder-color-swatch-picker__swatch[data-cinder-disabled] {
-    cursor: not-allowed;
-    opacity: .4;
-  }
-
-  .cinder-color-swatch-picker[aria-disabled="true"] {
-    opacity: .6;
-    cursor: not-allowed;
-  }
-
-  .cinder-color-swatch-picker[aria-disabled="true"] .cinder-color-swatch-picker__swatch {
-    cursor: not-allowed;
-  }
-
-  .cinder-color-swatch-picker__indicator {
-    display: flex;
-    pointer-events: none;
-    width: max(12px, calc(var(--swatch-size, 32px) * .6));
-    height: max(12px, calc(var(--swatch-size, 32px) * .6));
-    justify-content: center;
-    align-items:  center;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .cinder-color-swatch-picker__swatch {
-      transition: transform var(--cinder-duration-fast, .12s) var(--cinder-ease-standard, ease);
-    }
-
-    .cinder-color-swatch-picker:not([aria-disabled="true"]) .cinder-color-swatch-picker__swatch:hover:not([data-cinder-disabled]), .cinder-color-swatch-picker:not([aria-disabled="true"]) .cinder-color-swatch-picker__swatch:focus-visible:not([data-cinder-disabled]) {
-      transform: scale(1.06);
-    }
-  }
-}

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

@@ -1,180 +0,0 @@
-/* src/components/combobox/combobox.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-combobox {
-    position: relative;
-    display: flex;
-    gap: var(--cinder-space-1-5);
-    flex-direction: column;
-  }
-
-  .cinder-combobox__label {
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-medium);
-    color: var(--cinder-text);
-  }
-
-  .cinder-combobox__label[data-disabled] {
-    color: var(--cinder-text-disabled);
-  }
-
-  .cinder-combobox__control {
-    position: relative;
-  }
-
-  .cinder-combobox__input {
-    display: block;
-    padding: var(--cinder-space-1-5) var(--cinder-space-3);
-    font-size: var(--cinder-text-sm);
-    font-family: inherit;
-    line-height: var(--cinder-leading-normal);
-    color: var(--cinder-text);
-    background: var(--cinder-surface-raised);
-    border: 1px solid var(--cinder-border);
-    border-radius: var(--cinder-radius-md);
-    appearance: none;
-    transition: border-color var(--cinder-duration-fast) var(--cinder-ease-standard), box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
-    width: 100%;
-    min-height: 2.25rem;
-  }
-
-  @media (hover: hover) {
-    .cinder-combobox__input:hover:not(:disabled) {
-      border-color: var(--cinder-border-strong);
-    }
-  }
-
-  .cinder-combobox__input:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  .cinder-combobox__input[aria-invalid="true"] {
-    border-color: var(--cinder-danger);
-  }
-
-  .cinder-combobox__input:disabled {
-    background: var(--cinder-surface-inset);
-    color: var(--cinder-text-disabled);
-    border-color: var(--cinder-border-muted);
-    cursor: not-allowed;
-  }
-
-  .cinder-combobox__panel {
-    margin: var(--cinder-space-1) 0 0 0;
-    padding: var(--cinder-space-1);
-    max-inline-size: min(32rem, calc(100vw - var(--cinder-space-4)));
-    min-inline-size: 0;
-  }
-
-  .cinder-combobox__listbox {
-    list-style: none;
-    overflow-y: auto;
-    max-height: 16rem;
-    margin: 0;
-    padding: 0;
-  }
-
-  .cinder-combobox__option {
-    display: flex;
-    align-items:  center;
-    gap: var(--cinder-space-2);
-    padding: var(--cinder-space-1-5) var(--cinder-space-3);
-    border-radius: var(--cinder-radius-sm);
-    cursor: pointer;
-    font-size: var(--cinder-text-sm);
-    color: var(--cinder-text);
-  }
-
-  .cinder-combobox__option-avatar {
-    border-radius: var(--cinder-radius-full);
-    object-fit: cover;
-    flex: none;
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .cinder-combobox__option-text {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .cinder-combobox__option-label {
-    line-height: inherit;
-  }
-
-  .cinder-combobox__option-description {
-    font-size: var(--cinder-text-xs);
-    color: var(--cinder-text-muted);
-    line-height: var(--cinder-leading-snug);
-  }
-
-  .cinder-combobox__option[data-cinder-active] {
-    background: var(--cinder-surface-hover);
-  }
-
-  .cinder-combobox__option[aria-selected="true"] {
-    font-weight: var(--cinder-font-medium);
-    color: var(--cinder-accent-text);
-  }
-
-  .cinder-combobox__option[aria-disabled="true"] {
-    color: var(--cinder-text-disabled);
-    cursor: not-allowed;
-  }
-
-  .cinder-combobox__empty {
-    position: absolute;
-    margin: var(--cinder-space-1) 0 0 0;
-    padding: var(--cinder-space-3);
-    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-muted);
-    text-align: center;
-    z-index: var(--cinder-z-popover);
-    top: 100%;
-    left: 0;
-    right: 0;
-  }
-
-  .cinder-combobox__empty:not([data-cinder-active]) {
-    visibility: hidden;
-    overflow: hidden;
-    border: none;
-    height: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  .cinder-combobox__description {
-    font-size: var(--cinder-text-xs);
-    line-height: var(--cinder-leading-normal);
-    color: var(--cinder-text-muted);
-    margin: 0;
-  }
-
-  .cinder-combobox__error {
-    font-size: var(--cinder-text-xs);
-    line-height: var(--cinder-leading-normal);
-    color: var(--cinder-danger);
-    margin: 0;
-  }
-
-  .cinder-combobox__error:not([data-cinder-error]) {
-    position: absolute;
-    visibility: hidden;
-    overflow: hidden;
-    height: 0;
-  }
-
-  @media (forced-colors: active) {
-    .cinder-combobox__input:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
-      outline-offset: 3px;
-    }
-  }
-}

package/dist/server/components/command-item/index.css

@@ -1,90 +0,0 @@
-/* src/components/command-item/command-item.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-command-item {
-    position: relative;
-    display: flex;
-    align-items:  center;
-    gap: var(--cinder-space-3);
-    overflow: hidden;
-    padding: var(--cinder-space-2-5) var(--cinder-space-5);
-    cursor: pointer;
-    font-size: var(--cinder-text-base);
-    color: var(--cinder-text);
-    user-select: none;
-    transition: background-color var(--cinder-duration-fast) var(--cinder-ease-standard), color var(--cinder-duration-fast) var(--cinder-ease-standard);
-    border-radius: 0;
-    min-block-size: 2.75rem;
-    margin: 0;
-  }
-
-  .cinder-command-item[data-cinder-active] {
-    background: var(--cinder-accent);
-    color: var(--cinder-accent-contrast);
-    box-shadow: inset 0 0 0 1px var(--cinder-accent-contrast);
-  }
-
-  @media (forced-colors: active) {
-    .cinder-command-item[data-cinder-active] {
-      color: highlighttext;
-      box-shadow: none;
-      outline: 2px solid highlight;
-      outline-offset: -2px;
-      background: highlight;
-    }
-  }
-
-  .cinder-command-item[data-cinder-disabled] {
-    opacity: .45;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .cinder-command-item__leading {
-    display: inline-flex;
-    border-radius: var(--cinder-radius-md);
-    background: color-mix(in oklch, currentColor 10%, transparent);
-    color: var(--cinder-text-muted);
-    flex-shrink: 0;
-    justify-content: center;
-    align-items:  center;
-    block-size: 2rem;
-    inline-size: 2rem;
-  }
-
-  .cinder-command-item[data-cinder-active] .cinder-command-item__leading {
-    color: currentColor;
-  }
-
-  .cinder-command-item__content {
-    display: flex;
-    gap: var(--cinder-space-0-5);
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .cinder-command-item__description {
-    color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-xs);
-    line-height: var(--cinder-leading-normal);
-  }
-
-  .cinder-command-item[data-cinder-active] .cinder-command-item__description {
-    color: currentColor;
-  }
-
-  .cinder-command-item__trailing {
-    display: inline-flex;
-    color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-xs);
-    flex-shrink: 0;
-    align-items:  center;
-    margin-inline-start: auto;
-  }
-
-  .cinder-command-item[data-cinder-active] .cinder-command-item__trailing {
-    color: currentColor;
-  }
-}

package/dist/server/components/command-menu/index.css

@@ -1,131 +0,0 @@
-/* src/components/command-item/command-item.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-command-item {
-    position: relative;
-    display: flex;
-    align-items:  center;
-    gap: var(--cinder-space-3);
-    overflow: hidden;
-    padding: var(--cinder-space-2-5) var(--cinder-space-5);
-    cursor: pointer;
-    font-size: var(--cinder-text-base);
-    color: var(--cinder-text);
-    user-select: none;
-    transition: background-color var(--cinder-duration-fast) var(--cinder-ease-standard), color var(--cinder-duration-fast) var(--cinder-ease-standard);
-    border-radius: 0;
-    min-block-size: 2.75rem;
-    margin: 0;
-  }
-
-  .cinder-command-item[data-cinder-active] {
-    background: var(--cinder-accent);
-    color: var(--cinder-accent-contrast);
-    box-shadow: inset 0 0 0 1px var(--cinder-accent-contrast);
-  }
-
-  @media (forced-colors: active) {
-    .cinder-command-item[data-cinder-active] {
-      color: highlighttext;
-      box-shadow: none;
-      outline: 2px solid highlight;
-      outline-offset: -2px;
-      background: highlight;
-    }
-  }
-
-  .cinder-command-item[data-cinder-disabled] {
-    opacity: .45;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .cinder-command-item__leading {
-    display: inline-flex;
-    border-radius: var(--cinder-radius-md);
-    background: color-mix(in oklch, currentColor 10%, transparent);
-    color: var(--cinder-text-muted);
-    flex-shrink: 0;
-    justify-content: center;
-    align-items:  center;
-    block-size: 2rem;
-    inline-size: 2rem;
-  }
-
-  .cinder-command-item[data-cinder-active] .cinder-command-item__leading {
-    color: currentColor;
-  }
-
-  .cinder-command-item__content {
-    display: flex;
-    gap: var(--cinder-space-0-5);
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .cinder-command-item__description {
-    color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-xs);
-    line-height: var(--cinder-leading-normal);
-  }
-
-  .cinder-command-item[data-cinder-active] .cinder-command-item__description {
-    color: currentColor;
-  }
-
-  .cinder-command-item__trailing {
-    display: inline-flex;
-    color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-xs);
-    flex-shrink: 0;
-    align-items:  center;
-    margin-inline-start: auto;
-  }
-
-  .cinder-command-item[data-cinder-active] .cinder-command-item__trailing {
-    color: currentColor;
-  }
-}
-
-/* src/components/command-menu/command-menu.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-command-menu {
-    position: fixed;
-    z-index: var(--cinder-z-popover);
-    box-sizing: border-box;
-    min-inline-size: min(20rem, calc(100vw - var(--cinder-space-4)));
-    max-inline-size: min(28rem, calc(100vw - var(--cinder-space-4)));
-    max-block-size: min(20rem, calc(100vh - var(--cinder-space-4)));
-    padding: var(--cinder-space-2) 0;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    list-style: none;
-    border: 1px solid var(--cinder-border);
-    border-radius: var(--cinder-radius-md);
-    background: var(--cinder-surface-raised);
-    color: var(--cinder-text);
-    box-shadow: var(--cinder-shadow-lg, 0 10px 15px #00000026);
-    margin: 0;
-  }
-
-  .cinder-command-menu__listbox {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .cinder-command-menu[data-cinder-position-ready="false"] {
-    visibility: hidden;
-  }
-
-  .cinder-command-menu__empty {
-    padding: var(--cinder-space-6) var(--cinder-space-4);
-    color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-sm);
-    text-align: center;
-  }
-}