@pathscale/ui 0.0.163 → 0.0.164

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.163",
+  "version": "0.0.164",
   "author": "pathscale",
   "repository": {
     "type": "git",
@@ -22,27 +22,6 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./components/*": {
-      "types": "./dist/components/*/index.d.ts",
-      "import": "./dist/components/*/index.js"
-    },
-    "./stores": {
-      "types": "./dist/stores/index.d.ts",
-      "import": "./dist/stores/index.js"
-    },
-    "./motion": {
-      "types": "./dist/motion/index.d.ts",
-      "import": "./dist/motion/index.js"
-    },
-    "./styles/*": "./dist/styles/*",
-    "./dist/styles/*": "./dist/styles/*",
-    "./index.css": "./dist/index.css"
-  },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@felte/solid": "^1.2.11",
@@ -68,9 +47,8 @@
     "cally": "^0.8.0",
     "clsx": "^2.1.1",
     "cssnano": "^7.0.7",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.4",
     "postcss-cli": "^11.0.1",
-    "postcss-selector-parser": "^7.1.1",
     "solid-js": "^1.9.7",
     "svgo": "^3.3.2",
     "tailwind-merge": "^3.3.0",
@@ -79,6 +57,7 @@
   },
   "dependencies": {
     "@iconify/tailwind4": "^1.2.1",
+    "@pathscale/ui": "^0.0.161",
     "rsbuild-plugin-iconify": "^1.0.3"
   },
   "peerDependencies": {
@@ -105,7 +84,7 @@
     }
   },
   "scripts": {
-    "build": "bun run scripts/check-contracts.ts && rslib build",
+    "build": "bun run scripts/check-contracts.ts && rslib build && bun scripts/copy-css.js",
     "build:watch": "rslib build --watch",
     "dev": "rslib dev",
     "preview": "rslib preview",
@@ -117,6 +96,6 @@
     "playground:build": "cd playground && bun run build",
     "playground:preview": "cd playground && bun run preview"
   },
-  "sideEffects": ["**/*.css"],
+  "sideEffects": false,
   "type": "module"
 }

package/dist/accordion/collapse.css

@@ -1,248 +0,0 @@
-@layer components {
-  .collapse-arrow > .collapse-title:after {
-      position: absolute;
-      display: block;
-      height: 0.5rem;
-      width: 0.5rem;
-      transform: translateY(-100%) rotate(45deg);
-      top: 50%;
-      inset-inline-end: 1.4rem;
-      content: "";
-      transform-origin: 75% 75%;
-      box-shadow: 2px 2px;
-      pointer-events: none;
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .collapse-arrow > .collapse-title:after {
-      transition-property: all;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 0.2s;
-    }
-    }
-
-  .collapse-plus > .collapse-title:after {
-      position: absolute;
-      display: block;
-      height: 0.5rem;
-      width: 0.5rem;
-      top: 0.9rem;
-      inset-inline-end: 1.4rem;
-      --tw-content: "+";
-      content: var(--tw-content);
-      pointer-events: none;
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .collapse-plus > .collapse-title:after {
-      transition-property: all;
-      transition-duration: 300ms;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    }
-
-  .collapse {
-      display: grid;
-      position: relative;
-      overflow: hidden;
-      border-radius: var(--radius-box, 1rem);
-      width: 100%;
-      grid-template-rows: max-content 0fr;
-      grid-template-columns: minmax(0, 1fr);
-      isolation: isolate;
-    }
-
-  .collapse:not(td, tr, colgroup) {
-      visibility: revert-layer;
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .collapse {
-      transition: grid-template-rows 0.2s;
-    }
-    }
-
-  .collapse > input:is([type="checkbox"], [type="radio"]) {
-      grid-column-start: 1;
-      grid-row-start: 1;
-      appearance: none;
-      opacity: 0;
-      z-index: 1;
-      width: 100%;
-      padding: 1rem;
-      padding-inline-end: 3rem;
-      min-height: 1lh;
-      transition: background-color 0.2s ease-out;
-    }
-
-  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ),
-    .collapse:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) {
-      grid-template-rows: max-content 1fr;
-    }
-
-  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content,
-    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
-      content-visibility: visible;
-      min-height: fit-content;
-    }
-
-  @supports not (content-visibility: visible) {
-    .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content,
-    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
-      visibility: visible;
-    }
-    }
-
-  .collapse:focus-visible,
-    .collapse:has(> input:is([type="checkbox"], [type="radio"]):focus-visible),
-    .collapse:has(summary:focus-visible) {
-      outline-color: var(--color-base-content);
-      outline-style: solid;
-      outline-width: 2px;
-      outline-offset: 2px;
-    }
-
-  .collapse:not(.collapse-close) > input[type="checkbox"],
-    .collapse:not(.collapse-close) > input[type="radio"]:not(:checked),
-    .collapse:not(.collapse-close) > .collapse-title {
-      cursor: pointer;
-    }
-
-  .collapse[tabindex]:focus:not(.collapse-close, .collapse[open]) > .collapse-title,
-    .collapse[tabindex]:focus-within:not(.collapse-close, .collapse[open]) > .collapse-title {
-      cursor: unset;
-    }
-
-  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > :where(.collapse-content),
-    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
-      padding-bottom: 1rem;
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .collapse:is([open]).collapse-arrow > .collapse-title:after {
-      transform: translateY(-50%) rotate(225deg);
-    }
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .collapse.collapse-open.collapse-arrow > .collapse-title:after {
-      transform: translateY(-50%) rotate(225deg);
-    }
-    }
-
-  .collapse.collapse-open.collapse-plus > .collapse-title:after {
-      --tw-content: "−";
-      content: var(--tw-content);
-    }
-
-  .collapse[tabindex].collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
-    .collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close) > .collapse-title:after {
-      transform: translateY(-50%) rotate(225deg);
-    }
-
-  .collapse.collapse-arrow:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
-      transform: translateY(-50%) rotate(225deg);
-    }
-
-  .collapse[open].collapse-plus > .collapse-title:after {
-      --tw-content: "−";
-      content: var(--tw-content);
-    }
-
-  .collapse[tabindex].collapse-plus:focus:not(.collapse-close) > .collapse-title:after {
-      --tw-content: "−";
-      content: var(--tw-content);
-    }
-
-  .collapse.collapse-plus:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
-      --tw-content: "−";
-      content: var(--tw-content);
-    }
-
-  .collapse:is(details) {
-      width: 100%;
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .collapse:is(details)::details-content {
-      transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out, height 0.2s;
-      height: 0;
-      interpolate-size: allow-keywords;
-    }
-    .collapse:is(details):where([open])::details-content {
-      height: auto;
-    }
-    }
-
-  .collapse:is(details) summary {
-      position: relative;
-      display: block;
-    }
-
-  .collapse:is(details) summary::-webkit-details-marker {
-      display: none;
-    }
-
-  .collapse:is(details) > .collapse-content {
-      content-visibility: visible;
-    }
-
-  .collapse:is(details) summary {
-      outline: none;
-    }
-
-  .collapse-content {
-      grid-column-start: 1;
-      grid-row-start: 1;
-      content-visibility: hidden;
-      grid-column-start: 1;
-      grid-row-start: 2;
-      min-height: 0;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      cursor: unset;
-    }
-
-  @supports not (content-visibility: hidden) {
-    .collapse-content {
-      visibility: hidden;
-    }
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .collapse-content {
-      transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out;
-    }
-    }
-
-  .collapse-open {
-      grid-template-rows: max-content 1fr;
-    }
-
-  .collapse-open > .collapse-content {
-      content-visibility: visible;
-      min-height: fit-content;
-      padding-bottom: 1rem;
-    }
-
-  @supports not (content-visibility: visible) {
-    .collapse-open > .collapse-content {
-      visibility: visible;
-    }
-    }
-
-  .collapse {
-      visibility: collapse;
-    }
-
-  .collapse-title {
-      grid-column-start: 1;
-      grid-row-start: 1;
-      position: relative;
-      width: 100%;
-      padding: 1rem;
-      padding-inline-end: 3rem;
-      min-height: 1lh;
-      transition: background-color 0.2s ease-out;
-    }
-}

package/dist/alert/alert.css

@@ -1,123 +0,0 @@
-@layer components {
-  .alert {
-      border-width: var(--border);
-      border-color: var(--alert-border-color, var(--color-base-200));
-      border-style: solid;
-      --alert-border-color: var(--color-base-200);
-      display: grid;
-      align-items: center;
-      gap: calc(0.25rem * 4);
-      border-radius: var(--radius-box);
-      padding-inline: calc(0.25rem * 4);
-      padding-block: calc(0.25rem * 3);
-      color: var(--color-base-content);
-      background-color: var(--alert-color, var(--color-base-200));
-      justify-content: start;
-      justify-items: start;
-      grid-auto-flow: column;
-      grid-template-columns: auto;
-      text-align: start;
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-      background-size: auto, calc(var(--noise) * 100%);
-      background-image: none, var(--fx-noise);
-      box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
-    }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .alert {
-      box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
-    }
-    }
-
-  .alert:has(:nth-child(2)) {
-      grid-template-columns: auto minmax(auto, 1fr);
-    }
-
-  .alert-horizontal {
-      justify-content: start;
-      justify-items: start;
-      grid-auto-flow: column;
-      grid-template-columns: auto;
-      text-align: start;
-    }
-
-  .alert-horizontal:has(:nth-child(2)) {
-      grid-template-columns: auto minmax(auto, 1fr);
-    }
-
-  .alert-vertical {
-      justify-content: center;
-      justify-items: center;
-      grid-auto-flow: row;
-      grid-template-columns: auto;
-      text-align: center;
-    }
-
-  .alert-vertical:has(:nth-child(2)) {
-      grid-template-columns: auto;
-    }
-
-  .alert-dash {
-      background-color: transparent;
-      color: var(--alert-color);
-      border-style: dashed;
-      box-shadow: none;
-      background-image: none;
-    }
-
-  .alert-outline {
-      background-color: transparent;
-      color: var(--alert-color);
-      box-shadow: none;
-      background-image: none;
-    }
-
-  .alert-soft {
-      color: var(--alert-color, var(--color-base-content));
-      background: var(--alert-color, var(--color-base-content));
-      --alert-border-color: var(--alert-color, var(--color-base-content));
-      box-shadow: none;
-      background-image: none;
-    }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .alert-soft {
-      background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) );
-    }
-    }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .alert-soft {
-      --alert-border-color: color-mix(
-        in oklab,
-        var(--alert-color, var(--color-base-content)) 10%,
-        var(--color-base-100)
-        );
-    }
-    }
-
-  .alert-error {
-      color: var(--color-error-content);
-      --alert-border-color: var(--color-error);
-      --alert-color: var(--color-error);
-    }
-
-  .alert-info {
-      color: var(--color-info-content);
-      --alert-border-color: var(--color-info);
-      --alert-color: var(--color-info);
-    }
-
-  .alert-success {
-      color: var(--color-success-content);
-      --alert-border-color: var(--color-success);
-      --alert-color: var(--color-success);
-    }
-
-  .alert-warning {
-      color: var(--color-warning-content);
-      --alert-border-color: var(--color-warning);
-      --alert-color: var(--color-warning);
-    }
-}

package/dist/avatar/avatar.css

@@ -1,58 +0,0 @@
-@layer components {
-  .avatar-offline:before {
-      content: "";
-      position: absolute;
-      z-index: 1;
-      display: block;
-      border-radius: calc(infinity * 1px);
-      background-color: var(--color-base-300);
-      outline: 2px solid var(--color-base-100);
-      width: 15%;
-      height: 15%;
-      top: 7%;
-      right: 7%;
-    }
-
-  .avatar-online:before {
-      content: "";
-      position: absolute;
-      z-index: 1;
-      display: block;
-      border-radius: calc(infinity * 1px);
-      background-color: var(--color-success);
-      outline: 2px solid var(--color-base-100);
-      width: 15%;
-      height: 15%;
-      top: 7%;
-      right: 7%;
-    }
-
-  .avatar {
-      position: relative;
-      display: inline-flex;
-      vertical-align: middle;
-    }
-
-  .avatar > div {
-      display: block;
-      aspect-ratio: 1 / 1;
-      overflow: hidden;
-    }
-
-  .avatar img {
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-    }
-
-  .avatar-group {
-      display: flex;
-      overflow: hidden;
-    }
-
-  .avatar-group .avatar {
-      overflow: hidden;
-      border-radius: calc(infinity * 1px);
-      border: 4px solid var(--color-base-100);
-    }
-}

package/dist/badge/badge.css

@@ -1,128 +0,0 @@
-@layer components {
-  .badge {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: calc(0.25rem * 2);
-      border-radius: var(--radius-selector);
-      vertical-align: middle;
-      color: var(--badge-fg);
-      border: var(--border) solid var(--badge-color, var(--color-base-200));
-      font-size: 0.875rem;
-      width: fit-content;
-      background-size: auto, calc(var(--noise) * 100%);
-      background-image: none, var(--fx-noise);
-      background-color: var(--badge-bg);
-      --badge-bg: var(--badge-color, var(--color-base-100));
-      --badge-fg: var(--color-base-content);
-      --size: calc(var(--size-selector, 0.25rem) * 6);
-      height: var(--size);
-      padding-inline: calc(var(--size) / 2 - var(--border));
-    }
-
-  .badge-dash {
-      color: var(--badge-color);
-      --badge-bg: #0000;
-      background-image: none;
-      border-color: currentColor;
-      border-style: dashed;
-    }
-
-  .badge-ghost {
-      border-color: var(--color-base-200);
-      background-color: var(--color-base-200);
-      color: var(--color-base-content);
-      background-image: none;
-    }
-
-  .badge-soft {
-      color: var(--badge-color, var(--color-base-content));
-      background-color: var(--badge-color, var(--color-base-content));
-      border-color: var(--badge-color, var(--color-base-content));
-      background-image: none;
-    }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .badge-soft {
-      background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) );
-    }
-    }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .badge-soft {
-      border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) );
-    }
-    }
-
-  .badge-outline {
-      color: var(--badge-color);
-      --badge-bg: #0000;
-      background-image: none;
-      border-color: currentColor;
-    }
-
-  .badge-lg {
-      --size: calc(var(--size-selector, 0.25rem) * 7);
-      font-size: 1rem;
-    }
-
-  .badge-md {
-      --size: calc(var(--size-selector, 0.25rem) * 6);
-      font-size: 0.875rem;
-    }
-
-  .badge-sm {
-      --size: calc(var(--size-selector, 0.25rem) * 5);
-      font-size: 0.75rem;
-    }
-
-  .badge-xl {
-      --size: calc(var(--size-selector, 0.25rem) * 8);
-      font-size: 1.125rem;
-    }
-
-  .badge-xs {
-      --size: calc(var(--size-selector, 0.25rem) * 4);
-      font-size: 0.625rem;
-    }
-
-  .badge-accent {
-      --badge-color: var(--color-accent);
-      --badge-fg: var(--color-accent-content);
-    }
-
-  .badge-error {
-      --badge-color: var(--color-error);
-      --badge-fg: var(--color-error-content);
-    }
-
-  .badge-info {
-      --badge-color: var(--color-info);
-      --badge-fg: var(--color-info-content);
-    }
-
-  .badge-neutral {
-      --badge-color: var(--color-neutral);
-      --badge-fg: var(--color-neutral-content);
-    }
-
-  .badge-primary {
-      --badge-color: var(--color-primary);
-      --badge-fg: var(--color-primary-content);
-    }
-
-  .badge-secondary {
-      --badge-color: var(--color-secondary);
-      --badge-fg: var(--color-secondary-content);
-    }
-
-  .badge-success {
-      --badge-color: var(--color-success);
-      --badge-fg: var(--color-success-content);
-    }
-
-  .badge-warning {
-      --badge-color: var(--color-warning);
-      --badge-fg: var(--color-warning-content);
-    }
-}

package/dist/breadcrumbs/breadcrumbs.css

@@ -1,85 +0,0 @@
-@layer components {
-  .breadcrumbs {
-      max-width: 100%;
-      overflow-x: auto;
-      padding-block: calc(0.25rem * 2);
-    }
-
-  .breadcrumbs > menu,
-    .breadcrumbs > ul,
-    .breadcrumbs > ol {
-      display: flex;
-      min-height: min-content;
-      align-items: center;
-      white-space: nowrap;
-    }
-
-  .breadcrumbs > menu > li,
-    .breadcrumbs > ul > li,
-    .breadcrumbs > ol > li {
-      display: flex;
-      align-items: center;
-    }
-
-  .breadcrumbs > menu > li > *,
-    .breadcrumbs > ul > li > *,
-    .breadcrumbs > ol > li > * {
-      display: flex;
-      cursor: pointer;
-      align-items: center;
-      gap: calc(0.25rem * 2);
-    }
-
-  @media (hover: hover) {
-    .breadcrumbs > menu > li > *:hover,
-    .breadcrumbs > ul > li > *:hover,
-    .breadcrumbs > ol > li > *:hover {
-      text-decoration-line: underline;
-    }
-    }
-
-  .breadcrumbs > menu > li > *:focus,
-    .breadcrumbs > ul > li > *:focus,
-    .breadcrumbs > ol > li > *:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-
-  @media (forced-colors: active) {
-    .breadcrumbs > menu > li > *:focus,
-    .breadcrumbs > ul > li > *:focus,
-    .breadcrumbs > ol > li > *:focus {
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-    }
-    }
-
-  .breadcrumbs > menu > li > *:focus-visible,
-    .breadcrumbs > ul > li > *:focus-visible,
-    .breadcrumbs > ol > li > *:focus-visible {
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
-    }
-
-  .breadcrumbs > menu > li + *:before,
-    .breadcrumbs > ul > li + *:before,
-    .breadcrumbs > ol > li + *:before {
-      content: "";
-      margin-inline-start: calc(0.25rem * 2);
-      margin-inline-end: calc(0.25rem * 3);
-      display: block;
-      height: calc(0.25rem * 1.5);
-      width: calc(0.25rem * 1.5);
-      opacity: 40%;
-      rotate: 45deg;
-      border-top: 1px solid;
-      border-right: 1px solid;
-      background-color: #0000;
-    }
-
-  [dir="rtl"] .breadcrumbs > menu > li + *:before,
-    [dir="rtl"] .breadcrumbs > ul > li + *:before,
-    [dir="rtl"] .breadcrumbs > ol > li + *:before {
-      rotate: -135deg;
-    }
-}