@godxjp/ui 19.5.0 → 19.6.0

package/dist/components/general/typography.d.ts

@@ -5,7 +5,9 @@ export type { TextProp, TextProp as TextProps, HeadingProp, HeadingProp as Headi
  * font-medium text-muted-foreground">`.
  */
 export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
-    as?: "span" | "p" | "div" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";
+    as?: "span" | "p" | "div" | "a" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";
+    asChild?: import("../../props/index.js").AsChildProp;
+    link?: boolean;
     size?: import("../../props/index.js").TextSizeProp;
     tone?: import("../../props/index.js").TextToneProp;
     weight?: import("../../props/index.js").FontWeightProp;
@@ -15,6 +17,10 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     tabular?: boolean;
     mono?: boolean;
     htmlFor?: string;
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    download?: React.AnchorHTMLAttributes<HTMLAnchorElement>["download"];
 } & React.RefAttributes<HTMLElement>>;
 /**
  * Heading — h1..h4 sized from the `--heading-h*` tokens. `level` sets both the size token and the

package/dist/components/general/typography.js

@@ -3,16 +3,21 @@ import { cn } from "../../lib/utils.js";
 const Text = React.forwardRef(
   ({
     as = "span",
+    asChild = false,
     size = "sm",
-    tone = "default",
+    // `link` is an affordance, not a colour: it only moves the DEFAULT tone, so
+    // `link tone="destructive"` is a destructive link rather than an argument between two rules.
+    tone,
     weight = "regular",
     align,
     truncate,
     clamp,
     tabular,
     mono,
+    link,
     className,
     style,
+    children,
     ...props
   }, ref) => {
     const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
@@ -28,11 +33,11 @@ const Text = React.forwardRef(
         );
       }
     }
-    return React.createElement(as, {
-      ref,
+    const typography = {
       "data-slot": "text",
       "data-size": size,
-      "data-tone": tone,
+      "data-tone": tone ?? (link ? "primary" : "default"),
+      "data-link": link ? "" : void 0,
       "data-weight": weight,
       "data-align": align,
       "data-truncate": truncate && clampLines === void 0 ? "" : void 0,
@@ -42,7 +47,17 @@ const Text = React.forwardRef(
       "data-mono": mono ? "" : void 0,
       className: cn("ui-text", className),
       ...props
-    });
+    };
+    if (asChild) {
+      const child = React.Children.only(children);
+      return React.cloneElement(child, {
+        ...typography,
+        ...child.props,
+        ref,
+        className: cn(typography.className, child.props.className)
+      });
+    }
+    return React.createElement(as, { ref, ...typography }, children);
   }
 );
 Text.displayName = "Text";

package/dist/props/components/general.prop.d.ts

@@ -4,7 +4,25 @@ import type { ActivityAnnounceProp, ActivityVariantProp, AsChildProp, ButtonSize
 /** @see Text — typographic primitive; replaces hand-rolled `<span className="text-[13px] …">`. */
 export type TextProp = Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
     /** Render element. Default `span`. */
-    as?: "span" | "p" | "div" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";
+    as?: "span" | "p" | "div" | "a" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";
+    /**
+     * Render the typography onto the child element instead of emitting one — for a router link
+     * (`<Text asChild link><Link href=…>…</Link></Text>`). The child owns the element and its
+     * navigation; Text owns the type step, tone, weight and truncation.
+     */
+    asChild?: AsChildProp;
+    /**
+     * This text IS a link: underline on hover and on keyboard focus, at the token underline offset,
+     * and the focus mark every other interactive element draws.
+     *
+     * It is an AFFORDANCE, not a colour — `tone` still owns the colour and simply defaults to
+     * `primary` here, so a destructive link (`link tone="destructive"`) reads destructive and still
+     * underlines. Use this INSTEAD of `className="text-primary hover:underline"`, and instead of
+     * `Button variant="link"` whenever the link sits in running content: `.ui-button` is a control
+     * box (`white-space: nowrap`, `flex-shrink: 0`, a `--control-height` tier and inline padding),
+     * so in a table cell it cannot wrap and cannot share the cell's line height.
+     */
+    link?: boolean;
     /** Size from the type scale — never an arbitrary px. Default `sm` (base). */
     size?: TextSizeProp;
     /** Semantic colour intent. Default `default` (foreground). */
@@ -24,6 +42,18 @@ export type TextProp = Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
     /** Monospace family (codes, ids). */
     mono?: boolean;
     htmlFor?: string;
+    /**
+     * Anchor attributes, for `as="a"` (and for the `<a>` a router link supplies under `asChild`).
+     *
+     * Declared explicitly rather than by widening the base to `AnchorHTMLAttributes`, and for the
+     * same reason `htmlFor` is declared explicitly for `as="label"`: the element union is the
+     * contract, so each polymorphic branch names the attributes it actually accepts instead of every
+     * span silently offering an `href` it will never render.
+     */
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    download?: React.AnchorHTMLAttributes<HTMLAnchorElement>["download"];
 };
 /** @see Heading — h1..h4 sized from the `--heading-h*` tokens. */
 export type HeadingProp = Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> & {

package/dist/styles/focus-ring.css

@@ -23,6 +23,7 @@
     .ui-carousel-dot,
     .ui-rating-star,
     a.ui-list-row,
+    .ui-text[data-link],
     .sb-nav-item,
     .sb-user,
     .tb-icon-btn
@@ -65,6 +66,7 @@
       .ui-carousel-dot,
       .ui-rating-star,
       a.ui-list-row,
+      .ui-text[data-link],
       .sb-nav-item,
       .sb-user,
       .tb-icon-btn
@@ -81,7 +83,13 @@
   }
 
   :root[data-focus-outline="on"]
-    :is(.ui-input, .ui-control, .ui-control-multiline, .ui-control-trigger, .ui-tag-input):focus-visible,
+    :is(
+      .ui-input,
+      .ui-control,
+      .ui-control-multiline,
+      .ui-control-trigger,
+      .ui-tag-input
+    ):focus-visible,
   :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
   :root[data-focus-outline="on"] .ui-tag-input:focus-within,
   :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,

package/dist/styles/text-layout.css

@@ -107,6 +107,17 @@
     overflow: hidden;
     min-width: 0;
   }
+
+  [data-slot="text"][data-link] {
+    text-decoration-line: none;
+    text-underline-offset: var(--text-link-underline-offset);
+    text-decoration-thickness: var(--text-link-underline-width);
+  }
+  [data-slot="text"][data-link]:hover,
+  [data-slot="text"][data-link]:focus-visible {
+    text-decoration-line: underline;
+  }
+
   [data-slot="text"][data-tabular] {
     font-variant-numeric: tabular-nums;
   }

package/dist/tokens/base.css

@@ -31,3 +31,4 @@
 @import "./components/legal-document.css";
 @import "./components/error-surface.css";
 @import "./components/activity.css";
+@import "./components/text.css";

package/dist/tokens/components/text.css

@@ -0,0 +1,7 @@
+
+:root {
+
+  --text-link-underline-offset: 0.2em;
+
+  --text-link-underline-width: auto;
+}

package/docs/general/typography.tsx

@@ -1,5 +1,17 @@
 import { Button, Heading, Text } from "@godxjp/ui/general";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@godxjp/ui/data-display";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -146,6 +158,77 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Links in running content</CardTitle>
+            <CardDescription>
+              link は色ではなく「これはリンクである」という手がかりです。ホバーだけでなく
+              キーボードフォーカスでも下線が出るため、hover: だけのユーティリティでは
+              届かない利用者にも伝わります。色は tone のままなので、tone=&quot;destructive&quot;
+              のリンクは destructive のまま下線を引きます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" gap="md" wrap align="center">
+                <Text as="a" href="#typography" link>
+                  既定 · tone は primary
+                </Text>
+                <Text as="a" href="#typography" link tone="destructive">
+                  取り消す
+                </Text>
+                <Text as="a" href="#typography" link size="xs" tone="muted">
+                  すべての通知を見る
+                </Text>
+              </Flex>
+
+              {/* The case Button variant="link" cannot serve. `.ui-button` is a control box —
+               * white-space: nowrap, flex-shrink: 0, a --control-height tier and inline padding —
+               * so in a cell it neither wraps to a second line nor shares the row's line box.
+               * `<Text link>` is text, so it does both. */}
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>キー</TableHead>
+                    <TableHead>件名</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell>
+                      <Text size="xs" mono tone="muted">
+                        PKG-128
+                      </Text>
+                    </TableCell>
+                    <TableCell>
+                      <Text as="a" href="#typography" link>
+                        ログイン画面の余白が狭く、パスワード再設定リンクが本文と重なって見える
+                      </Text>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>
+                      <Text size="xs" mono tone="muted">
+                        PKG-129
+                      </Text>
+                    </TableCell>
+                    <TableCell>
+                      <Text as="a" href="#typography" link>
+                        請求書PDFの明細行
+                      </Text>
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+
+              <Text size="xs" tone="muted">
+                アクション（送信・展開）にはリンク風の Button variant=&quot;link&quot;
+                を使います。本文の中のリンクは Text link です。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "19.5.0",
-  "godxUiMcp": "19.5.0",
+  "version": "19.6.0",
+  "godxUiMcp": "19.6.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",