@pathscale/ui 0.0.162 → 0.0.163

package/dist/tabs/tab.css

@@ -0,0 +1,414 @@
+@layer components {
+  .tab {
+      position: relative;
+      display: inline-flex;
+      cursor: pointer;
+      appearance: none;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      webkit-user-select: none;
+      user-select: none;
+      --tab-p: 0.75rem;
+      --tab-bg: var(--color-base-100);
+      --tab-border-color: var(--color-base-300);
+      --tab-radius-ss: 0;
+      --tab-radius-se: 0;
+      --tab-radius-es: 0;
+      --tab-radius-ee: 0;
+      --tab-order: 0;
+      --tab-radius-min: calc(0.75rem - var(--border));
+      --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min));
+      --tab-radius-grad: #0000 calc(69% - var(--border)),
+        var(--tab-border-color) calc(69% - var(--border) + 0.25px),
+        var(--tab-border-color) 69%,
+        var(--tab-bg) calc(69% + 0.25px);
+      border-color: #0000;
+      order: var(--tab-order);
+      height: var(--tab-height);
+      font-size: 0.875rem;
+      padding-inline: var(--tab-p);
+    }
+
+  @media (hover: hover) {
+    .tab:hover {
+      color: var(--color-base-content);
+    }
+    }
+
+  .tab:is(input[type="radio"]) {
+      min-width: fit-content;
+    }
+
+  .tab:is(input[type="radio"]):after {
+      --tw-content: attr(aria-label);
+      content: var(--tw-content);
+    }
+
+  .tab:is(label) {
+      position: relative;
+    }
+
+  .tab:is(label) input {
+      position: absolute;
+      inset: calc(0.25rem * 0);
+      cursor: pointer;
+      appearance: none;
+      opacity: 0%;
+    }
+
+  .tab:checked + .tab-content,
+    .tab:is(label:has(:checked)) + .tab-content,
+    .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content {
+      display: block;
+    }
+
+  .tab:not( :checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) {
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .tab:not( :checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) {
+      color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+    }
+    }
+
+  .tab:not(input):empty {
+      flex-grow: 1;
+      cursor: default;
+    }
+
+  .tab:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .tab:focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .tab:focus-visible,
+    .tab:is(label:has(:checked:focus-visible)) {
+      outline: 2px solid currentColor;
+      outline-offset: -5px;
+    }
+
+  .tab[disabled] {
+      pointer-events: none;
+      opacity: 40%;
+    }
+
+  .tab-disabled {
+      pointer-events: none;
+      opacity: 40%;
+    }
+
+  .tabs-lift {
+      --tabs-height: auto;
+      --tabs-direction: row;
+    }
+
+  .tabs-lift > .tab {
+      --tab-border: 0 0 var(--border) 0;
+      --tab-radius-ss: var(--tab-radius-limit);
+      --tab-radius-se: var(--tab-radius-limit);
+      --tab-radius-es: 0;
+      --tab-radius-ee: 0;
+      --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p);
+      --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000;
+      --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2);
+      --tab-corner-height: var(--tab-radius-limit);
+      --tab-corner-position: top left, top right;
+      border-width: var(--tab-border);
+      border-start-start-radius: var(--tab-radius-ss);
+      border-start-end-radius: var(--tab-radius-se);
+      border-end-start-radius: var(--tab-radius-es);
+      border-end-end-radius: var(--tab-radius-ee);
+      padding: var(--tab-paddings);
+      border-color: var(--tab-border-colors);
+    }
+
+  .tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ),
+    .tabs-lift > .tab:is(input:checked, label:has(:checked)) {
+      --tab-border: var(--border) var(--border) 0 var(--border);
+      --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
+            var(--tab-border-color);
+      --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border)
+            calc(var(--tab-p) - var(--border));
+      --tab-inset: auto auto 0 auto;
+      --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad));
+      --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad));
+      background-color: var(--tab-bg);
+    }
+
+  .tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):before,
+    .tabs-lift > .tab:is(input:checked, label:has(:checked)):before {
+      z-index: 1;
+      content: "";
+      display: block;
+      position: absolute;
+      width: var(--tab-corner-width);
+      height: var(--tab-corner-height);
+      background-position: var(--tab-corner-position);
+      background-image: var(--radius-start), var(--radius-end);
+      background-size: var(--tab-radius-limit) var(--tab-radius-limit);
+      background-repeat: no-repeat;
+      inset: var(--tab-inset);
+    }
+
+  .tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):first-child:before,
+    .tabs-lift > .tab:is(input:checked, label:has(:checked)):first-child:before {
+      --radius-start: none;
+    }
+
+  [dir="rtl"] .tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):first-child:before,
+    [dir="rtl"] .tabs-lift > .tab:is(input:checked, label:has(:checked)):first-child:before {
+      transform: rotateY(180deg);
+    }
+
+  .tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):last-child:before,
+    .tabs-lift > .tab:is(input:checked, label:has(:checked)):last-child:before {
+      --radius-end: none;
+    }
+
+  [dir="rtl"] .tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):last-child:before,
+    [dir="rtl"] .tabs-lift > .tab:is(input:checked, label:has(:checked)):last-child:before {
+      transform: rotateY(180deg);
+    }
+
+  .tabs-lift:has(> .tab-content) > .tab:first-child:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
+      --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
+              var(--tab-border-color);
+    }
+
+  .tabs-lift > .tab-content {
+      --tabcontent-margin: calc(-1 * var(--border)) 0 0 0;
+      --tabcontent-radius-ss: 0;
+      --tabcontent-radius-se: var(--radius-box);
+      --tabcontent-radius-es: var(--radius-box);
+      --tabcontent-radius-ee: var(--radius-box);
+    }
+
+  .tabs-lift :checked + .tab-content:nth-child(1),
+    .tabs-lift :checked + .tab-content:nth-child(n + 3),
+    .tabs-lift label:has(:checked) + .tab-content:nth-child(1),
+    .tabs-lift label:has(:checked) + .tab-content:nth-child(n + 3),
+    .tabs-lift :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content:nth-child(1),
+    .tabs-lift :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content:nth-child(n + 3) {
+      --tabcontent-radius-ss: var(--radius-box);
+    }
+
+  .tabs-border > .tab {
+      --tab-border-color: #0000 #0000 var(--tab-border-color) #0000;
+      position: relative;
+      border-radius: var(--radius-field);
+    }
+
+  .tabs-border > .tab:before {
+      content: "";
+      background-color: var(--tab-border-color);
+      transition: background-color 0.2s ease;
+      width: 80%;
+      height: 3px;
+      border-radius: var(--radius-field);
+      bottom: 0;
+      left: 10%;
+      position: absolute;
+    }
+
+  .tabs-border > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):before,
+    .tabs-border > .tab:is(input:checked):before,
+    .tabs-border > .tab:is(label:has(:checked)):before {
+      --tab-border-color: currentColor;
+      border-top: 3px solid;
+    }
+
+  .tabs-box {
+      background-color: var(--color-base-200);
+      padding: calc(0.25rem * 1);
+      --tabs-box-radius: calc(3 * var(--radius-field));
+      border-radius: calc( min(var(--tab-height) / 2, var(--radius-field)) + min(0.25rem, var(--tabs-box-radius)) );
+      box-shadow: 0 -0.5px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0.5px oklch(0% 0 0 / calc(var(--depth) * 0.05)) inset;
+    }
+
+  .tabs-box > .tab {
+      border-radius: var(--radius-field);
+      border-style: none;
+    }
+
+  .tabs-box > .tab:focus-visible,
+    .tabs-box > .tab:is(label:has(:checked:focus-visible)) {
+      outline-offset: 2px;
+    }
+
+  .tabs-box > .tab:focus-visible {
+      z-index: 1;
+    }
+
+  .tabs-box > :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ),
+    .tabs-box > :is(input:checked),
+    .tabs-box > :is(label:has(:checked)) {
+      background-color: var(--tab-bg, var(--color-base-100));
+      box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 1px -1px var(--color-neutral), 0 1px 6px -4px var(--color-neutral);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .tabs-box > :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ),
+    .tabs-box > :is(input:checked),
+    .tabs-box > :is(label:has(:checked)) {
+      box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000);
+    }
+    }
+
+  @media (forced-colors: active) {
+    .tabs-box > :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ),
+    .tabs-box > :is(input:checked),
+    .tabs-box > :is(label:has(:checked)) {
+      border: 1px solid;
+    }
+    }
+
+  .tabs-box > .tab-content {
+      margin-top: calc(0.25rem * 1);
+      height: calc(100% - var(--tab-height) + var(--border) - 0.5rem);
+      border-radius: calc( min(var(--tab-height) / 2, var(--radius-field)) + min(0.25rem, var(--tabs-box-radius)) - var(--border) );
+    }
+
+  .tab-content {
+      order: var(--tabcontent-order);
+      display: none;
+      border-color: transparent;
+      --tabcontent-radius-ss: var(--radius-box);
+      --tabcontent-radius-se: var(--radius-box);
+      --tabcontent-radius-es: var(--radius-box);
+      --tabcontent-radius-ee: var(--radius-box);
+      --tabcontent-order: 1;
+      width: 100%;
+      height: calc(100% - var(--tab-height) + var(--border));
+      margin: var(--tabcontent-margin);
+      border-width: var(--border);
+      border-start-start-radius: var(--tabcontent-radius-ss);
+      border-start-end-radius: var(--tabcontent-radius-se);
+      border-end-start-radius: var(--tabcontent-radius-es);
+      border-end-end-radius: var(--tabcontent-radius-ee);
+    }
+
+  .tabs {
+      display: flex;
+      flex-wrap: wrap;
+      --tabs-height: auto;
+      --tabs-direction: row;
+      --tab-height: calc(var(--size-field, 0.25rem) * 10);
+      height: var(--tabs-height);
+      flex-direction: var(--tabs-direction);
+    }
+
+  .tabs-lg {
+      --tab-height: calc(var(--size-field, 0.25rem) * 12);
+    }
+
+  .tabs-lg > .tab {
+      font-size: 1.125rem;
+      --tab-p: 1rem;
+      --tab-radius-min: calc(1.5rem - var(--border));
+    }
+
+  .tabs-md {
+      --tab-height: calc(var(--size-field, 0.25rem) * 10);
+    }
+
+  .tabs-md > .tab {
+      font-size: 0.875rem;
+      --tab-p: 0.75rem;
+      --tab-radius-min: calc(0.75rem - var(--border));
+    }
+
+  .tabs-sm {
+      --tab-height: calc(var(--size-field, 0.25rem) * 8);
+    }
+
+  .tabs-sm > .tab {
+      font-size: 0.875rem;
+      --tab-p: 0.5rem;
+      --tab-radius-min: calc(0.5rem - var(--border));
+    }
+
+  .tabs-xl {
+      --tab-height: calc(var(--size-field, 0.25rem) * 14);
+    }
+
+  .tabs-xl > .tab {
+      font-size: 1.125rem;
+      --tab-p: 1.25rem;
+      --tab-radius-min: calc(2rem - var(--border));
+    }
+
+  .tabs-xs {
+      --tab-height: calc(var(--size-field, 0.25rem) * 6);
+    }
+
+  .tabs-xs > .tab {
+      font-size: 0.75rem;
+      --tab-p: 0.375rem;
+      --tab-radius-min: calc(0.5rem - var(--border));
+    }
+
+  .tabs-top {
+      --tabs-height: auto;
+      --tabs-direction: row;
+    }
+
+  .tabs-top > .tab {
+      --tab-order: 0;
+      --tab-border: 0 0 var(--border) 0;
+      --tab-radius-ss: var(--tab-radius-limit);
+      --tab-radius-se: var(--tab-radius-limit);
+      --tab-radius-es: 0;
+      --tab-radius-ee: 0;
+      --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p);
+      --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000;
+      --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2);
+      --tab-corner-height: var(--tab-radius-limit);
+      --tab-corner-position: top left, top right;
+    }
+
+  .tabs-top > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ),
+    .tabs-top > .tab:is(input:checked),
+    .tabs-top > .tab:is(label:has(:checked)) {
+      --tab-border: var(--border) var(--border) 0 var(--border);
+      --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
+            var(--tab-border-color);
+      --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border)
+            calc(var(--tab-p) - var(--border));
+      --tab-inset: auto auto 0 auto;
+      --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad));
+      --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad));
+    }
+
+  .tabs-top:has(> .tab-content) > .tab:first-child:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
+      --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
+              var(--tab-border-color);
+    }
+
+  .tabs-top > .tab-content {
+      --tabcontent-order: 1;
+      --tabcontent-margin: calc(-1 * var(--border)) 0 0 0;
+      --tabcontent-radius-ss: 0;
+      --tabcontent-radius-se: var(--radius-box);
+      --tabcontent-radius-es: var(--radius-box);
+      --tabcontent-radius-ee: var(--radius-box);
+    }
+
+  .tabs-top :checked + .tab-content:nth-child(1),
+    .tabs-top :checked + .tab-content:nth-child(n + 3),
+    .tabs-top label:has(:checked) + .tab-content:nth-child(1),
+    .tabs-top label:has(:checked) + .tab-content:nth-child(n + 3),
+    .tabs-top :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content:nth-child(1),
+    .tabs-top :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content:nth-child(n + 3) {
+      --tabcontent-radius-ss: var(--radius-box);
+    }
+}

package/dist/textarea/textarea.css

@@ -0,0 +1,191 @@
+@layer components {
+  .textarea {
+      border: var(--border) solid #0000;
+      min-height: calc(0.25rem * 20);
+      flex-shrink: 1;
+      appearance: none;
+      border-radius: var(--radius-field);
+      background-color: var(--color-base-100);
+      padding-block: calc(0.25rem * 2);
+      vertical-align: middle;
+      width: clamp(3rem, 20rem, 100%);
+      padding-inline-start: 0.75rem;
+      padding-inline-end: 0.75rem;
+      font-size: max(var(--font-size, 0.875rem), 0.875rem);
+      touch-action: manipulation;
+      border-color: var(--input-color);
+      box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      --input-color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .textarea {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .textarea {
+      --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  .textarea textarea {
+      appearance: none;
+      background-color: transparent;
+      border: none;
+    }
+
+  .textarea textarea:focus,
+    .textarea textarea:focus-within {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .textarea textarea:focus,
+    .textarea textarea:focus-within {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .textarea:focus,
+    .textarea:focus-within {
+      --input-color: var(--color-base-content);
+      box-shadow: 0 1px var(--input-color);
+      outline: 2px solid var(--input-color);
+      outline-offset: 2px;
+      isolation: isolate;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .textarea:focus,
+    .textarea:focus-within {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
+    }
+    }
+
+  @media (pointer: coarse) {
+    @supports (-webkit-touch-callout: none) {
+    .textarea:focus,
+    .textarea:focus-within {
+      --font-size: 1rem;
+    }
+    }
+    }
+
+  .textarea:has(> textarea[disabled]),
+    .textarea:is(:disabled, [disabled]) {
+      cursor: not-allowed;
+      border-color: var(--color-base-200);
+      background-color: var(--color-base-200);
+      color: var(--color-base-content);
+      box-shadow: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .textarea:has(> textarea[disabled]),
+    .textarea:is(:disabled, [disabled]) {
+      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    }
+    }
+
+  .textarea:has(> textarea[disabled])::placeholder,
+    .textarea:is(:disabled, [disabled])::placeholder {
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .textarea:has(> textarea[disabled])::placeholder,
+    .textarea:is(:disabled, [disabled])::placeholder {
+      color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+    }
+
+  .textarea:has(> textarea[disabled]) > textarea[disabled] {
+      cursor: not-allowed;
+    }
+
+  .textarea-ghost {
+      background-color: transparent;
+      box-shadow: none;
+      border-color: #0000;
+    }
+
+  .textarea-ghost:focus,
+    .textarea-ghost:focus-within {
+      background-color: var(--color-base-100);
+      color: var(--color-base-content);
+      border-color: #0000;
+      box-shadow: none;
+    }
+
+  .textarea-lg {
+      font-size: max(var(--font-size, 1.125rem), 1.125rem);
+    }
+
+  .textarea-md {
+      font-size: max(var(--font-size, 0.875rem), 0.875rem);
+    }
+
+  .textarea-sm {
+      font-size: max(var(--font-size, 0.75rem), 0.75rem);
+    }
+
+  .textarea-xl {
+      font-size: max(var(--font-size, 1.375rem), 1.375rem);
+    }
+
+  .textarea-xs {
+      font-size: max(var(--font-size, 0.6875rem), 0.6875rem);
+    }
+
+  .textarea-accent,
+    .textarea-accent:focus,
+    .textarea-accent:focus-within {
+      --input-color: var(--color-accent);
+    }
+
+  .textarea-error,
+    .textarea-error:focus,
+    .textarea-error:focus-within {
+      --input-color: var(--color-error);
+    }
+
+  .textarea-info,
+    .textarea-info:focus,
+    .textarea-info:focus-within {
+      --input-color: var(--color-info);
+    }
+
+  .textarea-neutral,
+    .textarea-neutral:focus,
+    .textarea-neutral:focus-within {
+      --input-color: var(--color-neutral);
+    }
+
+  .textarea-primary,
+    .textarea-primary:focus,
+    .textarea-primary:focus-within {
+      --input-color: var(--color-primary);
+    }
+
+  .textarea-secondary,
+    .textarea-secondary:focus,
+    .textarea-secondary:focus-within {
+      --input-color: var(--color-secondary);
+    }
+
+  .textarea-success,
+    .textarea-success:focus,
+    .textarea-success:focus-within {
+      --input-color: var(--color-success);
+    }
+
+  .textarea-warning,
+    .textarea-warning:focus,
+    .textarea-warning:focus-within {
+      --input-color: var(--color-warning);
+    }
+}