@heyramzi/ui 1.53.0 → 1.54.0

package/src/tokens/primitives.css

@@ -0,0 +1,223 @@
+/* The bits-ui state variants every primitive in `./shadcn` is written against.
+ *
+ * bits-ui v2 writes `data-checked` / `data-open` and v1 wrote
+ * `data-state="checked"`, so each variant matches both and a component does not
+ * have to know which it is talking to. They live here rather than in a
+ * consumer's stylesheet because the classes that need them ship in this
+ * package: an app that defines only the palette would render a switch that
+ * never moves. */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+@layer base {
+  /* One ring for the whole kit. `:where` keeps it at specificity zero on top of
+     the layer, so a control that needs a different ring writes one and wins. */
+  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
+    outline: none;
+    box-shadow: var(--ring-focus);
+  }
+
+  /* The accent at a low alpha, not the browser blue, because a selected word is
+     the one moment the palette shows up inside running text. */
+  ::selection {
+    background: color-mix(in oklab, var(--ring-color) 24%, transparent);
+  }
+
+  /* A default macOS overlay scrollbar paints a black bar on a dark panel. Track
+     transparent, thumb on the line token, so it belongs to whatever surface it
+     is over. The border is what insets the thumb without a second element. */
+  :where(html) {
+    scrollbar-color: var(--color-border, var(--border)) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-clip: padding-box;
+    border-radius: 999px;
+    background-color: var(--color-border, var(--border));
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-muted-foreground, var(--muted-foreground));
+    }
+  }
+}
+
+@layer components {
+  /* Three moves the kit repeats. They are classes rather than tokens because a
+     component wants one name, not four declarations, and because the reduced
+     motion guard then lives in one place instead of in every component.
+
+     Namespaced `t-` to match the transitions-dev snippets, which these sit
+     beside rather than duplicate. */
+
+  /* A control that reads as a key: it travels down a pixel under the finger.
+     The travel is what sells it, because a colour change alone reads as a hover
+     state, not as a press. */
+  .t-press {
+    transition:
+      background-color var(--duration-quick) var(--ease-smooth-out),
+      border-color var(--duration-quick) var(--ease-smooth-out),
+      color var(--duration-quick) var(--ease-smooth-out),
+      box-shadow var(--duration-quick) var(--ease-smooth-out),
+      transform var(--duration-micro) var(--ease-smooth-out);
+  }
+
+  .t-press:active:not(:disabled, [aria-disabled="true"]) {
+    transform: translateY(1px);
+  }
+
+  /* A card that answers the pointer. It rises by a pixel and gains the next
+     step of elevation, so the hover reads as the card coming forward rather
+     than as its border changing colour. */
+  .t-lift {
+    transition:
+      box-shadow var(--duration-fast) var(--ease-smooth-out),
+      transform var(--duration-fast) var(--ease-smooth-out);
+  }
+
+  /* Only where a pointer hovers: on a phone a tap would leave the card lifted. */
+  @media (hover: hover) and (pointer: fine) {
+    .t-lift:hover {
+      transform: translateY(-1px);
+      box-shadow: var(--elev-raised);
+    }
+  }
+
+  /* A surface arriving. The open carries the distance, the scale and the blur;
+     the close drops all three and takes less time, per the open/close
+     asymmetry rule in transitions-dev. */
+  .t-enter {
+    animation: t-enter var(--duration-fast) var(--ease-smooth-out) both;
+  }
+
+  .t-exit {
+    animation: t-exit var(--duration-quick) var(--ease-smooth-out) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-press,
+    .t-lift {
+      transition: none;
+    }
+
+    .t-press:active {
+      transform: none;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .t-lift:hover {
+        transform: none;
+      }
+    }
+
+    .t-enter,
+    .t-exit {
+      animation-duration: 1ms;
+    }
+  }
+}
+
+@keyframes t-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--distance-micro)) scale(var(--scale-medium));
+    filter: blur(var(--blur-small));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+}
+
+/* A mark confirming a state that has already changed: it arrives after the box
+   it sits in, so it grows into place instead of fading. */
+@keyframes t-check {
+  from {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes t-exit {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: scale(var(--scale-tiny));
+  }
+}

package/scripts/relative-imports.mjs

@@ -1,39 +0,0 @@
-// Rewrites every `#src/` and `#scripts/` specifier to a relative path, in place, before publish.
-// WHY: Vite cannot resolve a package's own `#` imports inside node_modules (ai-doc/references/publishing-packages.md).
-// It edits the source tree, so only scripts/release.sh runs it, right before `pnpm publish`, and restores the tree after.
-// It is not a `build` script: `pnpm -r build` would rewrite the working tree.
-import { readdir, readFile, writeFile } from "node:fs/promises";
-import { dirname, join, relative, resolve } from "node:path";
-
-const root = resolve(import.meta.dirname, "..");
-const targets = { src: join(root, "src"), scripts: join(root, "scripts") };
-const TEXT = /\.(ts|js|mjs|svelte|css)$/;
-const SPECIFIER = /(["'`])#(src|scripts)\/([^"'`]+)\1/g;
-
-async function* walk(dir) {
-  for (const entry of await readdir(dir, { withFileTypes: true })) {
-    if (entry.name === "node_modules") continue;
-    const full = join(dir, entry.name);
-    if (entry.isDirectory()) yield* walk(full);
-    else if (TEXT.test(entry.name)) yield full;
-  }
-}
-
-let files = 0;
-let specifiers = 0;
-for (const dir of Object.values(targets)) {
-  for await (const file of walk(dir)) {
-    const text = await readFile(file, "utf8");
-    const next = text.replace(SPECIFIER, (_, quote, base, rest) => {
-      specifiers++;
-      let rel = relative(dirname(file), join(targets[base], rest));
-      if (!rel.startsWith(".")) rel = `./${rel}`;
-      return `${quote}${rel}${quote}`;
-    });
-    if (next !== text) {
-      await writeFile(file, next);
-      files++;
-    }
-  }
-}
-console.log(`relative-imports: ${specifiers} specifiers in ${files} files`);