@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/card.css

@@ -0,0 +1,126 @@
+/* @auvyx/ui card | order 8 */
+@layer components {
+  .card {
+      display: flex;
+      flex-direction: column;
+      > header {
+        container-type: inline-size;
+        container-name: card-header;
+        display: grid;
+        grid-auto-rows: min-content;
+        align-items: flex-start;
+        &:has(>[data-slot=card-action],>.card-action) {
+          grid-template-columns: 1fr auto;
+        }
+        &:has(>p) {
+          grid-template-rows: auto auto;
+        }
+      }
+      > header > :is(h2, h3, [data-title], .card-title) {
+        --tw-leading: 1;
+        line-height: 1;
+      }
+      > header > :is([data-slot='card-action'], .card-action) {
+        grid-column-start: 2;
+        grid-row: span 2 / span 2;
+        grid-row-start: 1;
+        align-self: flex-start;
+        justify-self: flex-end;
+      }
+      > header > menu.card-action {
+        margin: 0;
+        list-style-type: none;
+        padding: 0;
+      }
+      > footer {
+        display: flex;
+        align-items: center;
+      }
+    }
+}
+
+@layer components {
+  .card {
+      overflow: hidden;
+      border-radius: var(--radius-xl);
+      background-color: var(--color-card);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-card-foreground);
+      --tw-shadow: var(--shadow-xs, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)));
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --tw-ring-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+      &:has(>img:first-child) {
+        padding-top: 0;
+      }
+      &>img:first-child {
+        border-top-left-radius: var(--radius-xl);
+        border-top-right-radius: var(--radius-xl);
+      }
+      &>img:last-child {
+        border-bottom-right-radius: var(--radius-xl);
+        border-bottom-left-radius: var(--radius-xl);
+      }
+    }
+  .card {
+      gap: calc(var(--spacing) * 6);
+      padding-block: calc(var(--spacing) * 6);
+    }
+  .card[data-size='sm'] {
+      gap: calc(var(--spacing) * 4);
+      padding-block: calc(var(--spacing) * 4);
+    }
+  .card > header {
+      gap: var(--spacing);
+      border-top-left-radius: var(--radius-xl);
+      border-top-right-radius: var(--radius-xl);
+      padding-inline: calc(var(--spacing) * 6);
+      &:is(.border-b) {
+        padding-bottom: calc(var(--spacing) * 6);
+      }
+    }
+  .card[data-size='sm'] > header {
+      padding-inline: calc(var(--spacing) * 4);
+      &:is(.border-b) {
+        padding-bottom: calc(var(--spacing) * 4);
+      }
+    }
+  .card > header > :is(h2, h3, [data-title], .card-title) {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+      --tw-leading: var(--leading-normal);
+      line-height: var(--leading-normal);
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  .card[data-size='sm'] > header > :is(h2, h3, [data-title], .card-title) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  .card > header > :is(p, [data-description], .card-description) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+    }
+  .card > section {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  .card[data-size='sm'] > section {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  .card > footer {
+      border-bottom-right-radius: var(--radius-xl);
+      border-bottom-left-radius: var(--radius-xl);
+      padding-inline: calc(var(--spacing) * 6);
+      &:is(.border-t) {
+        padding-top: calc(var(--spacing) * 6);
+      }
+    }
+  .card[data-size='sm'] > footer {
+      padding-inline: calc(var(--spacing) * 4);
+      &:is(.border-t) {
+        padding-top: calc(var(--spacing) * 4);
+      }
+    }
+}

package/dist/ui/carousel.css

@@ -0,0 +1,172 @@
+/* @auvyx/ui carousel | order 43 */
+@layer components {
+  .carousel {
+      --per-view: 1;
+      --carousel-gap: 1rem;
+      position: relative;
+      &[data-items='2'] {
+        --per-view: 2;
+      }
+      &[data-items='3'] {
+        --per-view: 3;
+      }
+      &[data-items='4'] {
+        --per-view: 4;
+      }
+      > :is(ol, ul) {
+        margin: 0;
+        display: flex;
+        list-style-type: none;
+        overflow-x: auto;
+        overscroll-behavior-x: contain;
+        padding: 0;
+        gap: var(--carousel-gap);
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        > li {
+          min-width: 0;
+          flex-shrink: 0;
+          flex-grow: 0;
+          flex-basis: calc((100% - var(--carousel-gap) * (var(--per-view) - 1)) / var(--per-view));
+          scroll-snap-align: start;
+        }
+      }
+      &[data-orientation='vertical'] > :is(ol, ul) {
+        flex-direction: column;
+        overflow-x: hidden;
+        overflow-y: auto;
+        block-size: var(--carousel-height, 20rem);
+        scroll-snap-type: y mandatory;
+      }
+      @supports selector(::scroll-button(*)) {
+        &:not([data-orientation='vertical']) {
+          padding-inline: var(--carousel-gutter, 2.75rem);
+        }
+        &[data-orientation='vertical'] {
+          padding-block: var(--carousel-gutter, 2.75rem);
+        }
+      }
+      > :is(ol, ul)::scroll-button(*) {
+        position: absolute;
+        z-index: 10;
+        cursor: pointer;
+      }
+      > :is(ol, ul)::scroll-button(inline-start) {
+        content: '' / 'Previous slide';
+      }
+      > :is(ol, ul)::scroll-button(inline-end) {
+        content: '' / 'Next slide';
+      }
+      &:not([data-orientation='vertical']) > :is(ol, ul) {
+        &::scroll-button(inline-start), &::scroll-button(inline-end) {
+          top: 50%;
+          translate: 0 -50%;
+        }
+        &::scroll-button(inline-start) {
+          inset-inline-start: 0;
+        }
+        &::scroll-button(inline-end) {
+          inset-inline-end: 0;
+        }
+      }
+      &[data-orientation='vertical'] > :is(ol, ul) {
+        &::scroll-button(block-start), &::scroll-button(block-end) {
+          left: 50%;
+          translate: -50% 0;
+        }
+        &::scroll-button(block-start) {
+          content: '' / 'Previous slide';
+          top: 0;
+        }
+        &::scroll-button(block-end) {
+          content: '' / 'Next slide';
+          bottom: 0;
+        }
+      }
+      &[data-markers] > :is(ol, ul) {
+        scroll-marker-group: after;
+        &::scroll-marker-group {
+          display: flex;
+          justify-content: center;
+        }
+        > li::scroll-marker {
+          content: '' / attr(aria-label);
+          cursor: pointer;
+        }
+      }
+    }
+}
+
+@layer components {
+  .carousel > :is(ol, ul)::scroll-button(*) {
+      width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 8);
+      border-radius: calc(infinity * 1px);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-input);
+      background-color: var(--color-background);
+      color: var(--color-foreground);
+      --tw-shadow: var(--shadow-xs, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      transition-property: opacity,background-color;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      background-image: var(--carousel-arrow-icon);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 1rem;
+    }
+  .carousel > :is(ol, ul)::scroll-button(*):hover {
+      background-color: var(--color-muted);
+    }
+  .carousel > :is(ol, ul)::scroll-button(*):focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --tw-ring-color: var(--color-ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+      }
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  .carousel > :is(ol, ul)::scroll-button(*):disabled {
+      cursor: default;
+      opacity: 50%;
+    }
+  .carousel > :is(ol, ul)::scroll-button(inline-start) {
+      --carousel-arrow-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>');
+    }
+  .carousel > :is(ol, ul)::scroll-button(inline-end) {
+      --carousel-arrow-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>');
+    }
+  .carousel > :is(ol, ul)::scroll-button(block-start) {
+      --carousel-arrow-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>');
+    }
+  .carousel > :is(ol, ul)::scroll-button(block-end) {
+      --carousel-arrow-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>');
+    }
+  .carousel[data-markers] > :is(ol, ul)::scroll-marker-group {
+      margin-top: calc(var(--spacing) * 3);
+      gap: calc(var(--spacing) * 1.5);
+    }
+  .carousel[data-markers] > :is(ol, ul) > li::scroll-marker {
+      width: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 2);
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-muted-foreground);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-muted-foreground) 30%, transparent);
+      }
+      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  .carousel[data-markers] > :is(ol, ul) > li::scroll-marker:target-current {
+      background-color: var(--color-foreground);
+    }
+}

package/dist/ui/chart.css

@@ -0,0 +1,130 @@
+/* @auvyx/ui chart | order 9 */
+@layer components {
+  .chart {
+      position: relative;
+      display: flex;
+      aspect-ratio: var(--aspect-video);
+      width: 100%;
+      justify-content: center;
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  .chart > canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  .chart-tooltip {
+      pointer-events: none;
+      position: fixed;
+      z-index: 50;
+      display: grid;
+      min-width: calc(var(--spacing) * 32);
+      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+      --tw-translate-y: calc(var(--spacing) * 2);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+      align-items: flex-start;
+      transition-property: left,top,opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      --tw-duration: 150ms;
+      transition-duration: 150ms;
+      --tw-ease: var(--ease-out);
+      transition-timing-function: var(--ease-out);
+    }
+  .chart-tooltip[hidden] {
+      opacity: 0%;
+    }
+  .chart-tooltip-items {
+      display: grid;
+      gap: calc(var(--spacing) * 1.5);
+    }
+  .chart-tooltip-item {
+      display: flex;
+      width: 100%;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+    }
+  .chart-tooltip-indicator {
+      width: calc(var(--spacing) * 2.5);
+      height: calc(var(--spacing) * 2.5);
+      flex-shrink: 0;
+      border-radius: 2px;
+      background-color: var(--chart-indicator-color);
+    }
+  .chart-legend-indicator {
+      width: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 2);
+      flex-shrink: 0;
+      border-radius: 2px;
+      background-color: var(--chart-indicator-color);
+    }
+  .chart-tooltip-label {
+      --tw-leading: 1;
+      line-height: 1;
+      color: var(--color-muted-foreground);
+    }
+  .chart-tooltip-value {
+      margin-inline-start: auto;
+      font-family: var(--font-mono);
+      --tw-leading: 1;
+      line-height: 1;
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      --tw-numeric-spacing: tabular-nums;
+      font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    }
+  .chart-legend {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--spacing) * 4);
+      padding-top: calc(var(--spacing) * 3);
+    }
+  .chart-legend-item {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 1.5);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  .chart-legend-item[aria-pressed='false'] {
+      opacity: 70%;
+    }
+}
+
+@layer components {
+  .chart {
+      --chart-bar-radius: 6px;
+    }
+  .chart-tooltip {
+      gap: calc(var(--spacing) * 1.5);
+      border-radius: var(--radius-lg);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-border);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
+      }
+      background-color: var(--color-background);
+      padding-inline: calc(var(--spacing) * 2.5);
+      padding-block: calc(var(--spacing) * 1.5);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      color: var(--color-foreground);
+      --tw-shadow: var(--shadow-xl, 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  .chart-tooltip-title {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  .chart-legend-item {
+      color: var(--color-foreground);
+    }
+  .chart-legend-item[aria-pressed='false'] {
+      color: var(--color-muted-foreground);
+    }
+}

package/dist/ui/checkbox.css

@@ -0,0 +1,119 @@
+/* @auvyx/ui checkbox | order 17 */
+@layer components {
+  .field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch']) {
+      position: relative;
+      flex-shrink: 0;
+      appearance: none;
+      --tw-outline-style: none;
+      outline-style: none;
+      &:disabled {
+        cursor: not-allowed;
+      }
+      &:disabled {
+        opacity: 50%;
+      }
+      &:checked:after {
+        display: block;
+        background-color: currentcolor;
+        --tw-content: '';
+        content: var(--tw-content);
+        mask-image: var(--check-icon);
+        mask-size: 0.875rem;
+        mask-position: center;
+        mask-repeat: no-repeat;
+      }
+    }
+}
+
+@layer components {
+  .field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch']) {
+      display: flex;
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-input);
+      --tw-shadow: var(--shadow-xs, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      transition-property: box-shadow;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      &:checked {
+        border-color: var(--color-primary);
+      }
+      &:checked {
+        background-color: var(--color-primary);
+      }
+      &:checked {
+        color: var(--color-primary-foreground);
+      }
+      &:focus-visible {
+        border-color: var(--color-ring);
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+      :where(*[data-disabled="true"]) & {
+        opacity: 50%;
+      }
+      &[aria-invalid="true"] {
+        border-color: var(--color-destructive);
+      }
+      &[aria-invalid="true"] {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &[aria-invalid="true"] {
+        --tw-ring-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        }
+      }
+      &[aria-invalid="true"] {
+        &:checked {
+          border-color: var(--color-primary);
+        }
+      }
+      &:is(html.dark *) {
+        background-color: var(--color-input);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        }
+      }
+      &:is(html.dark *) {
+        &:checked {
+          background-color: var(--color-primary);
+        }
+      }
+      &:is(html.dark *) {
+        &[aria-invalid="true"] {
+          border-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
+          }
+        }
+      }
+      &:is(html.dark *) {
+        &[aria-invalid="true"] {
+          --tw-ring-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          }
+        }
+      }
+    }
+  :is(.field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch'])):checked:after {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+    }
+}