prime-ui-kit 0.7.11 → 0.9.0

package/src/components/tooltip/examples/examples.module.css

@@ -1,67 +1,53 @@
-/* Mirrors playground/snippets/tooltip/snippets.module.css — layout for package examples */
+/* Layout for the Tooltip examples: layout only, text goes through Typography. */
 
-.demoItem {
-  display: grid;
-  gap: var(--prime-sys-spacing-s);
-  justify-items: center;
-}
-
-.rowWrapXlCenter {
+.row {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--prime-sys-spacing-xl);
   align-items: center;
-}
-
-.rowWrapXlJustifyCenter {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--prime-sys-spacing-xl);
   justify-content: center;
+  gap: var(--prime-space-3);
 }
 
-.rowWrapMStretch {
+.column {
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--prime-sys-spacing-m);
-  align-items: stretch;
-}
-
-.controlledStack {
-  display: grid;
-  gap: var(--prime-sys-spacing-l);
-  max-width: 22.5rem;
-}
-
-.surfacePanel {
-  display: grid;
-  gap: var(--prime-sys-spacing-m);
-  justify-items: center;
-  padding: var(--prime-sys-spacing-l);
-  border-radius: var(--prime-sys-radius-m);
-}
-
-.surfaceDefault {
-  background: var(--prime-sys-color-surface-default);
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prime-space-4);
 }
 
-.surfaceRaised {
-  background: var(--prime-sys-color-surface-raised);
-  box-shadow: var(--prime-sys-elevation-shadow-surface);
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-1);
+  padding: var(--prime-space-1);
+  border-radius: var(--prime-radius-l);
+  background: var(--prime-color-card-bg);
+  box-shadow: var(--prime-card-shadow);
 }
 
 .inlineHelpTrigger {
-  margin: 0;
   padding: 0;
-  border: none;
+  border: 0;
   background: none;
-  font: inherit;
   color: inherit;
-  cursor: help;
+  font: inherit;
   text-decoration: underline dotted;
-  text-underline-offset: 2px;
+  text-underline-offset: var(--prime-space-1);
+  cursor: help;
+}
+
+.inlineHelpTrigger:focus-visible {
+  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
+  outline-offset: var(--prime-focus-offset);
+  border-radius: var(--prime-radius-xs);
+}
+
+.disabledWrap {
+  display: inline-flex;
+  border-radius: var(--prime-control-m-radius);
 }
 
-.tooltipContentP {
-  margin: 0;
+.disabledWrap:focus-visible {
+  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
+  outline-offset: var(--prime-focus-offset);
 }

package/src/components/tooltip/examples/long-content.tsx

@@ -1,34 +1,21 @@
-import { Button, Label, Tooltip } from "prime-ui-kit";
-import type * as React from "react";
-
+/** A long hint that wraps at the tooltip max width. Use for a sentence of explanation; anything with actions belongs in a Popover. */
+import { Button, Tooltip } from "prime-ui-kit";
 import styles from "./examples.module.css";
 
-function TooltipDemoItem({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div className={styles.demoItem}>
-      <Label.Root size="s">{label}</Label.Root>
-      {children}
-    </div>
-  );
-}
-
-/** Multi-line body, `size="m"`, theme max-width and wrapping (mirrors `playground/snippets/tooltip/long-content.tsx`). */
 export default function TooltipLongContentExample() {
   return (
-    <TooltipDemoItem label="Long copy, size m">
-      <Tooltip.Provider delayDuration={200}>
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            <Button.Root type="button" variant="neutral" mode="stroke">
-              Details
-            </Button.Root>
-          </Tooltip.Trigger>
-          <Tooltip.Content>
-            Password must be at least 12 characters and include upper and lower case letters and
-            numbers. Do not reuse passwords from other services.
-          </Tooltip.Content>
-        </Tooltip.Root>
-      </Tooltip.Provider>
-    </TooltipDemoItem>
+    <div className={styles.row}>
+      <Tooltip.Root delayDuration={200}>
+        <Tooltip.Trigger>
+          <Button.Root variant="soft" tone="neutral">
+            Требования к паролю
+          </Button.Root>
+        </Tooltip.Trigger>
+        <Tooltip.Content size="l">
+          Не короче 12 символов, буквы разного регистра и цифры. Не используйте пароль от других
+          сервисов.
+        </Tooltip.Content>
+      </Tooltip.Root>
+    </div>
   );
 }

package/src/components/tooltip/examples/side.tsx

@@ -1,69 +1,29 @@
-import { Button, Label, Tooltip } from "prime-ui-kit";
-import type * as React from "react";
-
+/** The four `side` values. `side` is a preference: without room the tooltip flips to the opposite side and shifts away from the viewport edge. */
+import { Button, Tooltip } from "prime-ui-kit";
 import styles from "./examples.module.css";
 
-function TooltipDemoItem({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div className={styles.demoItem}>
-      <Label.Root size="s">{label}</Label.Root>
-      {children}
-    </div>
-  );
-}
+const SIDES = [
+  { side: "top", label: "Сверху" },
+  { side: "bottom", label: "Снизу" },
+  { side: "left", label: "Слева" },
+  { side: "right", label: "Справа" },
+] as const;
 
-/** `side` on `Tooltip.Content`: top, bottom, left, right (mirrors `playground/snippets/tooltip/side.tsx`). */
 export default function TooltipSideExample() {
   return (
-    <>
-      <TooltipDemoItem label="Top">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke">
-                Hover
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content side="top">Content top</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-      <TooltipDemoItem label="Bottom">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke">
-                Hover
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content side="bottom">Content bottom</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-      <TooltipDemoItem label="Left">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke">
-                Hover
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content side="left">Content left</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-      <TooltipDemoItem label="Right">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
+    <Tooltip.Provider delayDuration={200}>
+      <div className={styles.row}>
+        {SIDES.map(({ side, label }) => (
+          <Tooltip.Root key={side}>
             <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke">
-                Hover
+              <Button.Root variant="soft" tone="neutral">
+                {label}
               </Button.Root>
             </Tooltip.Trigger>
-            <Tooltip.Content side="right">Content right</Tooltip.Content>
+            <Tooltip.Content side={side}>side=&quot;{side}&quot;</Tooltip.Content>
           </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-    </>
+        ))}
+      </div>
+    </Tooltip.Provider>
   );
 }

package/src/components/tooltip/examples/sizes.tsx

@@ -1,69 +1,24 @@
-import { Button, Label, Tooltip } from "prime-ui-kit";
-import type * as React from "react";
-
+/** Tooltip.Content at every size tier xs → xl next to buttons of the same size. Pick the tier of the control the tooltip describes. */
+import { Button, Tooltip } from "prime-ui-kit";
 import styles from "./examples.module.css";
 
-function TooltipDemoItem({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div className={styles.demoItem}>
-      <Label.Root size="s">{label}</Label.Root>
-      {children}
-    </div>
-  );
-}
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
-/** All four `Tooltip.Content` sizes on the same trigger button (mirrors `playground/snippets/tooltip/sizes.tsx`). */
 export default function TooltipSizesExample() {
   return (
-    <>
-      <TooltipDemoItem label="Size s">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
-                Hover
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content size="s">Tooltip s</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-      <TooltipDemoItem label="Size m">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
-                Hover
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content size="m">Tooltip m</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-      <TooltipDemoItem label="Size l">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
-                Hover
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content size="l">Tooltip l</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-      <TooltipDemoItem label="Size xl">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
+    <Tooltip.Provider delayDuration={200}>
+      <div className={styles.row}>
+        {SIZES.map((size) => (
+          <Tooltip.Root key={size}>
             <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
-                Hover
+              <Button.Root variant="soft" tone="neutral" size={size}>
+                Размер {size}
               </Button.Root>
             </Tooltip.Trigger>
-            <Tooltip.Content size="xl">Tooltip xl</Tooltip.Content>
+            <Tooltip.Content size={size}>Подсказка размера {size}</Tooltip.Content>
           </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-    </>
+        ))}
+      </div>
+    </Tooltip.Provider>
   );
 }

package/src/components/tooltip/examples/states.tsx

@@ -1,57 +1,45 @@
-import { Button, Label, Tooltip } from "prime-ui-kit";
-import type * as React from "react";
-
+/** Hover / focus trigger, a disabled button wrapped in a focusable span, and an inline term in text. Use to explain why an action is unavailable or what a term means. */
+import { Button, Tooltip, Typography } from "prime-ui-kit";
 import styles from "./examples.module.css";
 
-function Block({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div className={styles.demoItem}>
-      <Label.Root size="s">{label}</Label.Root>
-      {children}
-    </div>
-  );
-}
-
-/** Default trigger, native disabled (tooltip does not open), glossary-style focus trigger (mirrors `playground/snippets/tooltip/states.tsx`). */
 export default function TooltipStatesExample() {
   return (
-    <div className={styles.rowWrapXlJustifyCenter}>
-      <Block label="Default — hover and focus">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke">
-                Save
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content>Send the draft to the server</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </Block>
-      <Block label="Native disabled — hover does not open">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke" disabled>
-                Unavailable
+    <Tooltip.Provider delayDuration={200}>
+      <div className={styles.row}>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            <Button.Root variant="soft" tone="neutral">
+              Наведите или Tab
+            </Button.Root>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Черновик сохранится на сервере</Tooltip.Content>
+        </Tooltip.Root>
+
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {/* biome-ignore lint/a11y/noNoninteractiveTabindex: the wrapper must be focusable to explain the disabled button */}
+            <span className={styles.disabledWrap} tabIndex={0}>
+              <Button.Root variant="soft" tone="neutral" disabled>
+                Опубликовать
               </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content>This copy does not appear on native disabled hover</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </Block>
-      <Block label="Keyboard focus — unstyled term button">
-        <Tooltip.Provider delayDuration={200}>
+            </span>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Заполните обязательные поля, чтобы опубликовать</Tooltip.Content>
+        </Tooltip.Root>
+
+        <Typography.Root variant="body-m" tone="secondary">
+          Конверсия{" "}
           <Tooltip.Root>
             <Tooltip.Trigger>
               <button type="button" className={styles.inlineHelpTrigger}>
-                KPI
+                CR
               </button>
             </Tooltip.Trigger>
-            <Tooltip.Content>Key performance indicator</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </Block>
-    </div>
+            <Tooltip.Content>Доля посетителей, совершивших покупку</Tooltip.Content>
+          </Tooltip.Root>{" "}
+          выросла на 4%
+        </Typography.Root>
+      </div>
+    </Tooltip.Provider>
   );
 }