@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/switch.css

@@ -0,0 +1,156 @@
+/* @auvyx/ui switch | order 31 */
+@layer components {
+  .field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'] {
+      display: inline-flex;
+      flex-shrink: 0;
+      appearance: none;
+      align-items: center;
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      --tw-outline-style: none;
+      outline-style: none;
+      &:disabled {
+        cursor: not-allowed;
+      }
+      &:disabled {
+        opacity: 50%;
+      }
+      &::before {
+        content: var(--tw-content);
+        pointer-events: none;
+      }
+      &::before {
+        content: var(--tw-content);
+        display: block;
+      }
+      &::before {
+        content: var(--tw-content);
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
+      }
+      &::before {
+        content: var(--tw-content);
+        transition-property: transform, translate, scale, rotate;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
+      &::before {
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+    }
+}
+
+@layer components {
+  .field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'] {
+      border-radius: calc(infinity * 1px);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: transparent;
+      --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);
+      &:not(*:checked) {
+        background-color: var(--color-input);
+      }
+      &:checked {
+        background-color: var(--color-primary);
+      }
+      &: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-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);
+        }
+      }
+      &:is(html.dark *) {
+        &:not(*:checked) {
+          background-color: var(--color-input);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-input) 80%, transparent);
+          }
+        }
+      }
+      &: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'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm']) {
+      height: 18.4px;
+      width: 32px;
+    }
+  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'])[data-size='sm'] {
+      height: 14px;
+      width: 24px;
+    }
+  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-background);
+    }
+  html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before {
+      background-color: var(--color-foreground);
+    }
+  html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before {
+      background-color: var(--color-primary-foreground);
+    }
+  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm']):before {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'])[data-size='sm']:before {
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 3);
+    }
+  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:not([data-size='sm']):before {
+      --tw-translate-x: calc(100% - 2px);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked[data-size='sm']:before {
+      --tw-translate-x: calc(100% - 2px);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):dir(rtl):checked:not([data-size='sm']):before {
+      --tw-translate-x: calc(calc(100% - 2px) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):dir(rtl):checked[data-size='sm']:before {
+      --tw-translate-x: calc(calc(100% - 2px) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before {
+      --tw-translate-x: 0;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+}

package/dist/ui/table.css

@@ -0,0 +1,157 @@
+/* @auvyx/ui table | order 32 */
+@layer components {
+  .table-container {
+      position: relative;
+      width: 100%;
+      overflow-x: auto;
+    }
+  .table {
+      width: 100%;
+      caption-side: bottom;
+      thead {
+        & tr {
+          border-bottom-style: var(--tw-border-style);
+          border-bottom-width: 1px;
+        }
+      }
+      tbody {
+        & tr:last-child {
+          border-style: var(--tw-border-style);
+          border-width: 0px;
+        }
+      }
+      tfoot {
+        border-top-style: var(--tw-border-style);
+        border-top-width: 1px;
+        --tw-font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-medium);
+        &>tr {
+          &:last-child {
+            border-bottom-style: var(--tw-border-style);
+            border-bottom-width: 0px;
+          }
+        }
+      }
+      tr {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-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-state="selected"] {
+          background-color: var(--color-muted);
+        }
+      }
+      th {
+        vertical-align: middle;
+        --tw-font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-medium);
+        white-space: nowrap;
+        &:has([role=checkbox]) {
+          padding-inline-end: 0;
+        }
+        &>[role=checkbox] {
+          --tw-translate-y: 2px;
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+      }
+      td {
+        vertical-align: middle;
+        white-space: nowrap;
+        &:has([role=checkbox]) {
+          padding-inline-end: 0;
+        }
+        &>[role=checkbox] {
+          --tw-translate-y: 2px;
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+      }
+    }
+}
+
+@layer components {
+  .table-container {
+      position: relative;
+      width: 100%;
+      overflow-x: auto;
+    }
+  .table {
+      width: 100%;
+      caption-side: bottom;
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  .table thead {
+      & tr {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 1px;
+      }
+    }
+  .table tbody {
+      & tr:last-child {
+        border-style: var(--tw-border-style);
+        border-width: 0px;
+      }
+    }
+  .table tfoot {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+      background-color: var(--color-muted);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      }
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      &>tr {
+        &:last-child {
+          border-bottom-style: var(--tw-border-style);
+          border-bottom-width: 0px;
+        }
+      }
+    }
+  .table tr {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-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));
+      &: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);
+          }
+        }
+      }
+      &[data-state="selected"] {
+        background-color: var(--color-muted);
+      }
+    }
+  .table th {
+      height: calc(var(--spacing) * 10);
+      padding-inline: calc(var(--spacing) * 2);
+      text-align: start;
+      vertical-align: middle;
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      white-space: nowrap;
+      color: var(--color-foreground);
+      &:has([role=checkbox]) {
+        padding-inline-end: 0;
+      }
+    }
+  .table td {
+      padding: calc(var(--spacing) * 2);
+      vertical-align: middle;
+      white-space: nowrap;
+      &:has([role=checkbox]) {
+        padding-inline-end: 0;
+      }
+    }
+  .table caption {
+      margin-top: calc(var(--spacing) * 4);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+    }
+}

package/dist/ui/tabs.css

@@ -0,0 +1,240 @@
+/* @auvyx/ui tabs | order 33 */
+@layer components {
+  .tabs {
+      display: flex;
+      &:has(> [role='tablist'][aria-orientation='horizontal']), &:not(:has(> [role='tablist'][aria-orientation='vertical'])) {
+        flex-direction: column;
+      }
+      &:has(> [role='tablist'][aria-orientation='vertical']) {
+        flex-direction: row;
+      }
+      > [role='tablist'] {
+        display: inline-flex;
+        width: fit-content;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-muted-foreground);
+        &[aria-orientation='vertical'] {
+          height: fit-content;
+          flex-direction: column;
+        }
+        > [role='tab'] {
+          position: relative;
+          display: inline-flex;
+          flex: 1;
+          align-items: center;
+          justify-content: center;
+          white-space: nowrap;
+          transition-property: all;
+          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+          transition-duration: var(--tw-duration, var(--default-transition-duration));
+          --tw-outline-style: none;
+          outline-style: none;
+          &:disabled {
+            pointer-events: none;
+          }
+          &:disabled {
+            opacity: 50%;
+          }
+          &[aria-disabled="true"] {
+            pointer-events: none;
+          }
+          &[aria-disabled="true"] {
+            opacity: 50%;
+          }
+          & svg {
+            pointer-events: none;
+          }
+          & svg {
+            flex-shrink: 0;
+          }
+        }
+      }
+      > [role='tabpanel'] {
+        flex: 1;
+        --tw-outline-style: none;
+        outline-style: none;
+      }
+    }
+}
+
+@layer components {
+  .tabs {
+      gap: calc(var(--spacing) * 2);
+    }
+  .tabs > [role='tablist'] {
+      height: calc(var(--spacing) * 9);
+      border-radius: var(--radius-lg);
+      padding: 3px;
+    }
+  .tabs > [role='tablist']:not([data-variant='line']) {
+      background-color: var(--color-muted);
+    }
+  .tabs > [role='tablist'][data-variant='line'] {
+      gap: var(--spacing);
+      border-radius: 0;
+      background-color: transparent;
+    }
+  .tabs > [role='tablist'][aria-orientation='vertical'] {
+      height: fit-content;
+    }
+  .tabs > [role='tablist'] > [role='tab'] {
+      gap: calc(var(--spacing) * 1.5);
+      border-radius: var(--radius-md);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: transparent;
+      padding-inline: calc(var(--spacing) * 2);
+      padding-block: var(--spacing);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-foreground);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-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);
+        }
+      }
+      &:focus-visible {
+        outline-style: var(--tw-outline-style);
+        outline-width: 1px;
+      }
+      &:focus-visible {
+        outline-color: var(--color-ring);
+      }
+      &:is(html.dark *) {
+        color: var(--color-muted-foreground);
+      }
+      &:is(html.dark *) {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--color-foreground);
+          }
+        }
+      }
+      & svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+      &::after {
+        content: var(--tw-content);
+        position: absolute;
+      }
+      &::after {
+        content: var(--tw-content);
+        background-color: var(--color-foreground);
+      }
+      &::after {
+        content: var(--tw-content);
+        opacity: 0%;
+      }
+      &::after {
+        content: var(--tw-content);
+        transition-property: opacity;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
+    }
+  .tabs > [role='tablist'][aria-orientation='vertical'] > [role='tab'] {
+      width: 100%;
+      justify-content: flex-start;
+    }
+  .tabs > [role='tablist'][data-variant='line'][aria-orientation='horizontal'] > [role='tab'] {
+      background-color: transparent;
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      &::after {
+        content: var(--tw-content);
+        inset-inline: 0;
+      }
+      &::after {
+        content: var(--tw-content);
+        bottom: -5px;
+      }
+      &::after {
+        content: var(--tw-content);
+        height: calc(var(--spacing) * 0.5);
+      }
+    }
+  .tabs > [role='tablist'][data-variant='line'][aria-orientation='vertical'] > [role='tab'] {
+      background-color: transparent;
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      &::after {
+        content: var(--tw-content);
+        inset-block: 0;
+      }
+      &::after {
+        content: var(--tw-content);
+        inset-inline-end: -4px;
+      }
+      &::after {
+        content: var(--tw-content);
+        width: calc(var(--spacing) * 0.5);
+      }
+    }
+  .tabs > [role='tablist']:not([data-variant='line']) > [role='tab'][aria-selected='true'] {
+      background-color: var(--color-background);
+      color: var(--color-foreground);
+      --tw-shadow: var(--shadow-sm, 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+      &:is(html.dark *) {
+        border-color: var(--color-input);
+      }
+      &: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 *) {
+        color: var(--color-foreground);
+      }
+    }
+  .tabs > [role='tablist'][data-variant='line'] > [role='tab'][aria-selected='true'] {
+      background-color: transparent;
+      color: var(--color-foreground);
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      &::after {
+        content: var(--tw-content);
+        opacity: 100%;
+      }
+      &:is(html.dark *) {
+        border-color: transparent;
+      }
+      &:is(html.dark *) {
+        background-color: transparent;
+      }
+      &:is(html.dark *) {
+        color: var(--color-foreground);
+      }
+    }
+  .tabs > [role='tablist'] > [role='tab']:has(> svg:first-child) {
+      padding-inline-start: calc(var(--spacing) * 1.5);
+    }
+  .tabs > [role='tablist'] > [role='tab']:has(> svg:last-child) {
+      padding-inline-end: calc(var(--spacing) * 1.5);
+    }
+  .tabs > [role='tabpanel'] {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+}