@pathscale/ui 0.0.162 → 0.0.163

package/dist/tooltip/tooltip.css

@@ -0,0 +1,198 @@
+@layer components {
+  .tooltip {
+      position: relative;
+      display: inline-block;
+      --tt-bg: var(--color-neutral);
+      --tt-off: calc(100% + 0.5rem);
+      --tt-tail: calc(100% + 1px + 0.25rem);
+    }
+
+  .tooltip > .tooltip-content,
+    .tooltip[data-tip]:before {
+      position: absolute;
+      max-width: 20rem;
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 2);
+      padding-block: calc(0.25rem * 1);
+      text-align: center;
+      white-space: normal;
+      color: var(--color-neutral-content);
+      opacity: 0%;
+      font-size: 0.875rem;
+      line-height: 1.25;
+      background-color: var(--tt-bg);
+      width: max-content;
+      pointer-events: none;
+      z-index: 2;
+      --tw-content: attr(data-tip);
+      content: var(--tw-content);
+    }
+
+  .tooltip:after {
+      opacity: 0%;
+      background-color: var(--tt-bg);
+      content: "";
+      pointer-events: none;
+      width: 0.625rem;
+      height: 0.25rem;
+      display: block;
+      position: absolute;
+      mask-repeat: no-repeat;
+      mask-position: -1px 0;
+      --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
+      mask-image: var(--mask-tooltip);
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .tooltip > .tooltip-content,
+    .tooltip[data-tip]:before,
+    .tooltip:after {
+      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+    }
+    }
+
+  .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open:after,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover:after,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible) > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible):after {
+      opacity: 100%;
+      --tt-pos: 0rem;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open:after,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover:after,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible) > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible):after {
+      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+    }
+    }
+
+  .tooltip > .tooltip-content,
+    .tooltip[data-tip]:before {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+      inset: auto auto var(--tt-off) 50%;
+    }
+
+  .tooltip:after {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+      inset: auto auto var(--tt-tail) 50%;
+    }
+
+  .tooltip-bottom > .tooltip-content,
+    .tooltip-bottom[data-tip]:before {
+      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
+      inset: var(--tt-off) auto auto 50%;
+    }
+
+  .tooltip-bottom:after {
+      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
+      inset: var(--tt-tail) auto auto 50%;
+    }
+
+  .tooltip-left > .tooltip-content,
+    .tooltip-left[data-tip]:before {
+      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
+      inset: 50% var(--tt-off) auto auto;
+    }
+
+  .tooltip-left:after {
+      transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
+      inset: 50% calc(var(--tt-tail) + 1px) auto auto;
+    }
+
+  .tooltip-right > .tooltip-content,
+    .tooltip-right[data-tip]:before {
+      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
+      inset: 50% auto auto var(--tt-off);
+    }
+
+  .tooltip-right:after {
+      transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
+      inset: 50% auto auto calc(var(--tt-tail) + 1px);
+    }
+
+  .tooltip-top > .tooltip-content,
+    .tooltip-top[data-tip]:before {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+      inset: auto auto var(--tt-off) 50%;
+    }
+
+  .tooltip-top:after {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+      inset: auto auto var(--tt-tail) 50%;
+    }
+
+  .tooltip-accent {
+      --tt-bg: var(--color-accent);
+    }
+
+  .tooltip-accent > .tooltip-content,
+    .tooltip-accent[data-tip]:before {
+      color: var(--color-accent-content);
+    }
+
+  .tooltip-error {
+      --tt-bg: var(--color-error);
+    }
+
+  .tooltip-error > .tooltip-content,
+    .tooltip-error[data-tip]:before {
+      color: var(--color-error-content);
+    }
+
+  .tooltip-info {
+      --tt-bg: var(--color-info);
+    }
+
+  .tooltip-info > .tooltip-content,
+    .tooltip-info[data-tip]:before {
+      color: var(--color-info-content);
+    }
+
+  .tooltip-primary {
+      --tt-bg: var(--color-primary);
+    }
+
+  .tooltip-primary > .tooltip-content,
+    .tooltip-primary[data-tip]:before {
+      color: var(--color-primary-content);
+    }
+
+  .tooltip-secondary {
+      --tt-bg: var(--color-secondary);
+    }
+
+  .tooltip-secondary > .tooltip-content,
+    .tooltip-secondary[data-tip]:before {
+      color: var(--color-secondary-content);
+    }
+
+  .tooltip-success {
+      --tt-bg: var(--color-success);
+    }
+
+  .tooltip-success > .tooltip-content,
+    .tooltip-success[data-tip]:before {
+      color: var(--color-success-content);
+    }
+
+  .tooltip-warning {
+      --tt-bg: var(--color-warning);
+    }
+
+  .tooltip-warning > .tooltip-content,
+    .tooltip-warning[data-tip]:before {
+      color: var(--color-warning-content);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.162",
+  "version": "0.0.163",
   "author": "pathscale",
   "repository": {
     "type": "git",
@@ -22,6 +22,27 @@
   "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",
@@ -47,8 +68,9 @@
     "cally": "^0.8.0",
     "clsx": "^2.1.1",
     "cssnano": "^7.0.7",
-    "postcss": "^8.5.4",
+    "postcss": "^8.5.8",
     "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",
@@ -57,7 +79,6 @@
   },
   "dependencies": {
     "@iconify/tailwind4": "^1.2.1",
-    "@pathscale/ui": "^0.0.161",
     "rsbuild-plugin-iconify": "^1.0.3"
   },
   "peerDependencies": {
@@ -84,7 +105,7 @@
     }
   },
   "scripts": {
-    "build": "bun run scripts/check-contracts.ts && rslib build && bun scripts/copy-css.js",
+    "build": "bun run scripts/check-contracts.ts && rslib build",
     "build:watch": "rslib build --watch",
     "dev": "rslib dev",
     "preview": "rslib preview",
@@ -96,6 +117,6 @@
     "playground:build": "cd playground && bun run build",
     "playground:preview": "cd playground && bun run preview"
   },
-  "sideEffects": false,
+  "sideEffects": ["**/*.css"],
   "type": "module"
 }