@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/attachment.css

@@ -0,0 +1,211 @@
+/* @auvyx/ui attachment | order 48 */
+@layer components {
+  .attachment-group {
+      display: flex;
+      min-width: 0;
+      flex-wrap: wrap;
+    }
+  .attachment {
+      position: relative;
+      display: flex;
+      max-width: 100%;
+      min-width: 0;
+      flex-shrink: 0;
+      align-items: center;
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      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));
+      &[data-orientation='vertical'] {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      > figure {
+        position: relative;
+        margin: 0;
+        display: flex;
+        aspect-ratio: 1 / 1;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        & svg {
+          pointer-events: none;
+        }
+        > img {
+          aspect-ratio: 1 / 1;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+      > div:not([data-actions]) {
+        max-width: 100%;
+        min-width: 0;
+        flex: 1;
+        > :is(strong, a, span):first-child {
+          display: block;
+          max-width: 100%;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        > :is(small, p) {
+          margin: 0;
+          display: block;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        > a:first-child::after {
+          position: absolute;
+          inset: 0;
+          z-index: 10;
+          --tw-content: '';
+          content: var(--tw-content);
+        }
+      }
+      > [data-actions] {
+        position: relative;
+        z-index: 20;
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+      }
+      &[data-orientation='vertical'] > [data-actions] {
+        position: absolute;
+      }
+    }
+}
+
+@layer components {
+  .attachment-group {
+      gap: calc(var(--spacing) * 3);
+      padding-block: var(--spacing);
+    }
+  .attachment {
+      width: fit-content;
+      min-width: calc(var(--spacing) * 40);
+      gap: calc(var(--spacing) * 2);
+      border-radius: var(--auvyx-r-card);
+      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);
+      &:focus-within {
+        --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);
+      }
+      &:focus-within {
+        --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);
+        }
+      }
+    }
+  .attachment:has(> div:not([data-actions])) {
+      padding-inline: calc(var(--spacing) * 2.5);
+      padding-block: calc(var(--spacing) * 2);
+    }
+  .attachment:not(:has(> div:not([data-actions]))) {
+      padding: calc(var(--spacing) * 2);
+    }
+  .attachment:has(a) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+          }
+        }
+      }
+    }
+  .attachment[data-state='idle'] {
+      --tw-border-style: dashed;
+      border-style: dashed;
+    }
+  .attachment[data-state='error'] {
+      border-color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
+      }
+    }
+  .attachment > figure {
+      width: calc(var(--spacing) * 10);
+      border-radius: var(--auvyx-r-surface);
+      background-color: var(--color-muted);
+      color: var(--color-foreground);
+      & svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+  .attachment[data-state='error'] > figure {
+      background-color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      }
+      color: var(--color-destructive);
+    }
+  .attachment > figure:has(> img) {
+      opacity: 60%;
+    }
+  .attachment:is([data-state='idle'], [data-state='done'], :not([data-state])) > figure:has(> img) {
+      opacity: 100%;
+    }
+  .attachment > div:not([data-actions]) {
+      --tw-leading: var(--leading-tight);
+      line-height: var(--leading-tight);
+    }
+  .attachment > div:not([data-actions]) > :first-child {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  .attachment > div:not([data-actions]) > :is(small, p) {
+      margin-top: calc(var(--spacing) * 0.5);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      color: var(--color-muted-foreground);
+    }
+  .attachment[data-state='error'] > div:not([data-actions]) > :is(small, p) {
+      color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-destructive) 80%, transparent);
+      }
+    }
+  .attachment[data-size='sm'] {
+      gap: calc(var(--spacing) * 2.5);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  .attachment[data-size='sm'] > figure {
+      width: calc(var(--spacing) * 8);
+    }
+  .attachment[data-size='xs'] {
+      gap: calc(var(--spacing) * 1.5);
+      border-radius: var(--auvyx-r-surface);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  .attachment[data-size='xs'] > figure {
+      width: calc(var(--spacing) * 7);
+      border-radius: var(--auvyx-r-control);
+    }
+  .attachment[data-orientation='vertical'] {
+      width: calc(var(--spacing) * 30);
+      min-width: 0;
+    }
+  .attachment[data-orientation='vertical'] > figure {
+      width: 100%;
+    }
+  .attachment[data-orientation='vertical'] > div:not([data-actions]) {
+      padding-inline: var(--spacing);
+    }
+  .attachment[data-orientation='vertical'] > [data-actions] {
+      inset-inline-end: calc(var(--spacing) * 3);
+      top: calc(var(--spacing) * 3);
+      gap: var(--spacing);
+    }
+}

package/dist/ui/avatar.css

@@ -0,0 +1,204 @@
+/* @auvyx/ui avatar | order 3 */
+@layer components {
+  .avatar {
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 0;
+      appearance: none;
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+      background-color: transparent;
+      padding: 0;
+      vertical-align: middle;
+      --tw-outline-style: none;
+      outline-style: none;
+      -webkit-user-select: none;
+      user-select: none;
+      &::after {
+        content: var(--tw-content);
+        position: absolute;
+      }
+      &::after {
+        content: var(--tw-content);
+        inset: 0;
+      }
+      &::after {
+        content: var(--tw-content);
+        border-radius: inherit;
+      }
+      &::after {
+        content: var(--tw-content);
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+      }
+      &::after {
+        content: var(--tw-content);
+        border-color: var(--color-border);
+      }
+      &::after {
+        content: var(--tw-content);
+        mix-blend-mode: darken;
+      }
+      &: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);
+        }
+      }
+      &:is(html.dark *) {
+        &::after {
+          content: var(--tw-content);
+          mix-blend-mode: lighten;
+        }
+      }
+    }
+  .avatar > img {
+      position: absolute;
+      inset: 0;
+      aspect-ratio: 1 / 1;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      object-fit: cover;
+    }
+  .avatar > span:not(.avatar-badge) {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      border-radius: inherit;
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  .avatar[data-size='sm'] > span:not(.avatar-badge) {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  .avatar > .avatar-badge {
+      position: absolute;
+      inset-inline-end: calc(var(--spacing) * 0);
+      bottom: 0;
+      z-index: 10;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: calc(infinity * 1px);
+      background-blend-mode: color;
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  .avatar[data-size='sm'] > .avatar-badge {
+      width: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 2);
+      &>svg {
+        display: none;
+      }
+    }
+  .avatar > .avatar-badge {
+      width: calc(var(--spacing) * 2.5);
+      height: calc(var(--spacing) * 2.5);
+      &>svg {
+        width: calc(var(--spacing) * 2);
+        height: calc(var(--spacing) * 2);
+      }
+    }
+  .avatar[data-size='lg'] > .avatar-badge {
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 3);
+      &>svg {
+        width: calc(var(--spacing) * 2);
+        height: calc(var(--spacing) * 2);
+      }
+    }
+  .avatar-group {
+      display: flex;
+      :where(& > :not(:last-child)) {
+        --tw-space-x-reverse: 0;
+        margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
+        margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
+      }
+    }
+  .avatar-group > .avatar, .avatar-group > [data-count] {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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-background);
+    }
+  .avatar-group > [data-count] {
+      position: relative;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+    }
+}
+
+@layer components {
+  .avatar {
+      border-radius: calc(infinity * 1px);
+      &::after {
+        content: var(--tw-content);
+        border-radius: inherit;
+      }
+    }
+  .avatar {
+      width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 8);
+    }
+  .avatar[data-size='sm'] {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+    }
+  .avatar[data-size='lg'] {
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+    }
+  .avatar > span:not(.avatar-badge) {
+      border-radius: inherit;
+      background-color: var(--color-muted);
+      color: var(--color-muted-foreground);
+    }
+  .avatar > img {
+      border-radius: inherit;
+    }
+  .avatar > .avatar-badge {
+      background-color: var(--color-primary);
+      color: var(--color-primary-foreground);
+      --tw-ring-color: var(--color-background);
+    }
+  .avatar-group > [data-count] {
+      width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 8);
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-muted);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+      &>svg {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+  .avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+      &>svg {
+        width: calc(var(--spacing) * 3);
+        height: calc(var(--spacing) * 3);
+      }
+    }
+  .avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+      &>svg {
+        width: calc(var(--spacing) * 5);
+        height: calc(var(--spacing) * 5);
+      }
+    }
+}

package/dist/ui/badge.css

@@ -0,0 +1,183 @@
+/* @auvyx/ui badge | order 4 */
+@layer components {
+  .badge {
+      display: inline-flex;
+      width: fit-content;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      white-space: nowrap;
+      &: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);
+        }
+      }
+      &[aria-invalid="true"] {
+        border-color: var(--color-destructive);
+      }
+      &[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);
+        }
+      }
+      &: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);
+          }
+        }
+      }
+      &>svg {
+        pointer-events: none;
+      }
+    }
+}
+
+@layer components {
+  .badge {
+      height: calc(var(--spacing) * 5);
+      gap: var(--spacing);
+      border-radius: var(--radius-4xl);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: transparent;
+      padding-inline: calc(var(--spacing) * 2);
+      padding-block: calc(var(--spacing) * 0.5);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      &>svg {
+        width: calc(var(--spacing) * 3) !important;
+        height: calc(var(--spacing) * 3) !important;
+      }
+    }
+  .badge:not([data-variant]), .badge[data-variant='primary'] {
+      background-color: var(--color-primary);
+      color: var(--color-primary-foreground);
+      &:is(a) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-primary);
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+            }
+          }
+        }
+      }
+    }
+  .badge[data-variant='secondary'] {
+      background-color: var(--color-secondary);
+      color: var(--color-secondary-foreground);
+      &:is(a) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-secondary);
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
+            }
+          }
+        }
+      }
+    }
+  .badge[data-variant='outline'] {
+      border-color: var(--color-border);
+      color: var(--color-foreground);
+      &:is(a) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-muted);
+          }
+        }
+      }
+      &:is(a) {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--color-muted-foreground);
+          }
+        }
+      }
+    }
+  .badge[data-variant='destructive'] {
+      background-color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      }
+      color: var(--color-destructive);
+      &:focus-visible {
+        --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);
+        }
+      }
+      &:is(html.dark *) {
+        background-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        }
+      }
+      &:is(html.dark *) {
+        &:focus-visible {
+          --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(a) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-destructive);
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+            }
+          }
+        }
+      }
+    }
+  .badge[data-variant='ghost'] {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-muted-foreground);
+        }
+      }
+      &:is(html.dark *) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-muted);
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+            }
+          }
+        }
+      }
+    }
+  .badge[data-variant='link'] {
+      color: var(--color-primary);
+      text-underline-offset: 4px;
+      &:hover {
+        @media (hover: hover) {
+          text-decoration-line: underline;
+        }
+      }
+    }
+}