@fangxinyan/lumina 0.1.2 → 0.1.3

package/dist/Typography-NKPWTJCV.css

@@ -0,0 +1,235 @@
+/* ============================================================================
+ * Typography
+ * ========================================================================== */
+
+.typo-root {
+  font-family: var(--font-sans);
+  color: var(--fg);
+  line-height: 1.7;
+  font-size: 14px;
+}
+.typo-root > * + * { margin-top: 0.85em; }
+.typo-root .typo-title + .typo-paragraph,
+.typo-root .typo-paragraph + .typo-paragraph { margin-top: 1em; }
+.typo-root .typo-title { margin-top: 1.2em; }
+.typo-root > .typo-title:first-child { margin-top: 0; }
+
+/* ---- Base ---- */
+.typo {
+  color: var(--fg);
+  font-family: var(--font-sans);
+  word-wrap: break-word;
+}
+
+/* Semantic colors */
+.typo.secondary { color: var(--fg-muted); }
+.typo.success   { color: var(--success); }
+.typo.warning   { color: var(--warning); }
+.typo.danger    { color: var(--danger); }
+.typo.disabled  { color: var(--fg-subtle); cursor: not-allowed; user-select: none; }
+
+/* Decorations */
+.typo.strong    { font-weight: 600; }
+.typo.italic    { font-style: italic; }
+.typo.underline { text-decoration: underline; text-underline-offset: 3px; }
+.typo.del       { text-decoration: line-through; text-decoration-thickness: 1.5px; }
+
+/* mark / code / kbd render their own elements; we still color the shell */
+.typo mark {
+  background: color-mix(in oklch, var(--warning) 35%, transparent);
+  color: inherit;
+  padding: 0 3px;
+  border-radius: 3px;
+}
+
+.typo code {
+  font-family: var(--font-mono);
+  font-size: 0.88em;
+  padding: 1px 6px;
+  border-radius: 5px;
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-in-sm);
+  color: var(--accent-ink);
+  margin: 0 2px;
+}
+
+.typo kbd {
+  font-family: var(--font-mono);
+  font-size: 0.82em;
+  padding: 1px 7px;
+  border-radius: 5px;
+  background: var(--bg-raised);
+  box-shadow: var(--neu-flat);
+  border: 1px solid var(--border);
+  color: var(--fg);
+  margin: 0 2px;
+  line-height: 1.4;
+  display: inline-block;
+}
+
+/* ---- Title ---- */
+.typo-title {
+  display: block;
+  font-family: var(--font-display);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  color: var(--fg);
+  margin: 0;
+}
+.typo-title.h1 { font-size: 32px; letter-spacing: -0.02em; }
+.typo-title.h2 { font-size: 26px; letter-spacing: -0.015em; }
+.typo-title.h3 { font-size: 21px; }
+.typo-title.h4 { font-size: 17px; }
+.typo-title.h5 { font-size: 14px; }
+
+/* ---- Paragraph ---- */
+.typo-paragraph {
+  display: block;
+  font-size: 14px;
+  line-height: 1.75;
+  margin: 0;
+  color: var(--fg);
+}
+
+/* ---- Text ---- */
+.typo-text { font-size: inherit; line-height: inherit; }
+
+/* ---- Link ---- */
+.typo-link {
+  color: var(--accent-ink);
+  text-decoration: none;
+  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
+  cursor: pointer;
+  text-underline-offset: 3px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.typo-link:hover { color: var(--accent); text-decoration: underline; }
+.typo-link:focus-visible {
+  outline: 2px solid var(--accent-glow);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.typo-link.disabled {
+  color: var(--fg-subtle);
+  cursor: not-allowed;
+  pointer-events: none;
+  text-decoration: none;
+}
+.typo-link-ext {
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.7;
+  transform: rotate(-45deg);
+  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
+}
+.typo-link:hover .typo-link-ext { opacity: 1; transform: rotate(-45deg) translateX(1px); }
+
+/* ---- Action affordances (copy / edit) ---- */
+.typo-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin-left: 6px;
+  border-radius: 7px;
+  cursor: pointer;
+  color: var(--fg-subtle);
+  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
+  vertical-align: middle;
+  user-select: none;
+}
+.typo-action:hover {
+  color: var(--accent-ink);
+  background: var(--bg);
+  box-shadow: var(--neu-flat);
+}
+.typo-action:focus-visible {
+  outline: 2px solid var(--accent-glow);
+  outline-offset: 1px;
+}
+.typo-copy.copied { color: var(--success); }
+
+/* Editable text trigger overlays */
+.typo-edit-text-trigger {
+  cursor: text;
+  border-radius: 4px;
+  transition: background var(--dur-fast) var(--ease);
+  padding: 0 2px;
+  margin: 0 -2px;
+}
+.typo-edit-text-trigger:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); }
+
+/* ---- Editor (input / textarea) ---- */
+.typo.editing { display: block; }
+.typo-editor {
+  font: inherit;
+  color: inherit;
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-in);
+  border: none;
+  outline: none;
+  width: 100%;
+  border-radius: var(--r-sm);
+  padding: 6px 12px;
+  resize: none;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: inherit;
+  font-family: inherit;
+}
+.typo-editor:focus {
+  box-shadow: var(--neu-in), 0 0 0 3px var(--accent-glow);
+}
+
+/* ---- Ellipsis ---- */
+.typo.ellipsis {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+.typo.ellipsis-multi {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  /* WebkitLineClamp set inline by component */
+}
+
+/* Block-level (paragraph/title) keeps block layout for clamp container */
+.typo-paragraph.ellipsis,
+.typo-title.ellipsis {
+  display: block;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.typo-paragraph.ellipsis-multi,
+.typo-title.ellipsis-multi {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.typo-expand {
+  margin-left: 4px;
+  color: var(--accent-ink);
+  cursor: pointer;
+  font-size: 0.92em;
+  user-select: none;
+}
+.typo-expand:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
+
+/* In dark mode, mark needs slightly higher contrast */
+[data-theme="dark"] .typo mark {
+  background: color-mix(in oklch, var(--warning) 30%, transparent);
+  color: var(--fg);
+}

package/dist/Typography.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var chunk5WF6M47X_cjs = require('./chunk-5WF6M47X.cjs');
+require('./chunk-YVO7XO4W.cjs');
+
+
+
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function () { return chunk5WF6M47X_cjs.Link; }
+});
+Object.defineProperty(exports, "Paragraph", {
+  enumerable: true,
+  get: function () { return chunk5WF6M47X_cjs.Paragraph; }
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function () { return chunk5WF6M47X_cjs.Text; }
+});
+Object.defineProperty(exports, "Title", {
+  enumerable: true,
+  get: function () { return chunk5WF6M47X_cjs.Title; }
+});
+Object.defineProperty(exports, "Typography", {
+  enumerable: true,
+  get: function () { return chunk5WF6M47X_cjs.Typography; }
+});
+//# sourceMappingURL=Typography.cjs.map
+//# sourceMappingURL=Typography.cjs.map

package/dist/Typography.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Typography.cjs"}

package/dist/Typography.d.cts

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { IconName } from './Icon.cjs';
+
+type TypographyType = "secondary" | "success" | "warning" | "danger";
+interface CopyableConfig {
+    /** Text to copy. Defaults to the rendered children string. */
+    text?: string;
+    /** Fired after a successful copy. */
+    onCopy?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /** Custom icons `[default, copied]`. */
+    icon?: [React.ReactNode, React.ReactNode];
+    /** Custom tooltip text `[default, copied]`. Pass `false` to disable. */
+    tooltips?: [React.ReactNode, React.ReactNode] | false;
+    /** Format/MIME hint when calling `navigator.clipboard.write` is not used. */
+    format?: "text/plain" | "text/html";
+}
+interface EditableConfig {
+    /** Controlled editing flag. Omit for uncontrolled (click icon to start). */
+    editing?: boolean;
+    /** Text shown in the editor; falls back to `children` string. */
+    text?: string;
+    /** Fired with the new value when the user confirms. */
+    onChange?: (value: string) => void;
+    /** Fired when the user cancels (Escape or blur without confirm). */
+    onCancel?: () => void;
+    /** Fired when editing starts. */
+    onStart?: () => void;
+    /** Fired when editing ends (regardless of save/cancel). */
+    onEnd?: () => void;
+    /** Maximum input length. */
+    maxLength?: number;
+    /** Auto resize textarea. `true` = autosize; or pass row bounds. */
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    /** What triggers entering edit mode. Defaults to `["icon"]`. */
+    triggerType?: Array<"icon" | "text">;
+    /** Override the edit icon. */
+    icon?: React.ReactNode;
+    /** Tooltip text on the trigger icon. Pass `false` to disable. */
+    tooltip?: React.ReactNode | false;
+    /** Use a single-line input instead of textarea. */
+    enterIcon?: React.ReactNode;
+}
+interface EllipsisConfig {
+    /** Number of rows to clamp at. Defaults to 1. */
+    rows?: number;
+    /** Show an "Expand" affordance after clamping. */
+    expandable?: boolean;
+    /** Custom expand-button label. */
+    symbol?: React.ReactNode;
+    /** Fired on expand. */
+    onExpand?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Show full text in a `title` attribute. */
+    tooltip?: boolean | React.ReactNode;
+    /** Optional suffix that should always remain visible (e.g. an em-dash author). */
+    suffix?: string;
+}
+interface BaseTypographyProps {
+    /** Semantic color. */
+    type?: TypographyType;
+    /** Render disabled (muted + not selectable). */
+    disabled?: boolean;
+    /** Highlight with mark background. */
+    mark?: boolean;
+    /** Render as inline `<code>`. */
+    code?: boolean;
+    /** Render as keyboard key `<kbd>`. */
+    keyboard?: boolean;
+    /** Underline. */
+    underline?: boolean;
+    /** Strikethrough. */
+    delete?: boolean;
+    /** Bold. */
+    strong?: boolean;
+    /** Italic. */
+    italic?: boolean;
+    /** Add a copy button. Pass an object to customize. */
+    copyable?: boolean | CopyableConfig;
+    /** Add an edit button. Pass an object to customize. */
+    editable?: boolean | EditableConfig;
+    /** Truncate to N rows with optional expand affordance. */
+    ellipsis?: boolean | EllipsisConfig;
+    /** Extra class names. */
+    className?: string;
+    /** Inline style. */
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+type TitleLevel = 1 | 2 | 3 | 4 | 5;
+interface TitleProps extends BaseTypographyProps {
+    /** Heading level — 1..5. Defaults to 1. */
+    level?: TitleLevel;
+}
+/**
+ * `Typography.Title` — semantic heading.
+ *
+ * @example
+ * <Title level={2} copyable>章节标题</Title>
+ */
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLElement>>;
+interface TextProps extends BaseTypographyProps {
+    /** Force the rendered tag (default `<span>`). */
+    as?: keyof JSX.IntrinsicElements;
+}
+/**
+ * `Typography.Text` — inline text with semantic / decorative variants.
+ *
+ * @example
+ * <Text type="success" strong>成功</Text>
+ * <Text code>npm install</Text>
+ * <Text copyable>可复制内容</Text>
+ */
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+interface ParagraphProps extends BaseTypographyProps {
+}
+/**
+ * `Typography.Paragraph` — block paragraph with the same decorations as `Text`.
+ *
+ * @example
+ * <Paragraph ellipsis={{ rows: 3, expandable: true }}>{long}</Paragraph>
+ */
+declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
+interface LinkProps extends BaseTypographyProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseTypographyProps | "type"> {
+    href?: string;
+    /** Add the leading external icon. */
+    external?: boolean;
+    /** Override the external icon. */
+    externalIcon?: IconName;
+}
+/**
+ * `Typography.Link` — styled `<a>` that participates in the same decoration
+ * system as `Text`. Adds a small `arrow` for `external` links.
+ *
+ * @example
+ * <Link href="https://example.com" external>外部链接</Link>
+ */
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+interface TypographyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+interface TypographyComponent extends React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLDivElement>> {
+    Title: typeof Title;
+    Text: typeof Text;
+    Paragraph: typeof Paragraph;
+    Link: typeof Link;
+}
+declare const Typography: TypographyComponent;
+
+export { type BaseTypographyProps, type CopyableConfig, type EditableConfig, type EllipsisConfig, Link, type LinkProps, Paragraph, type ParagraphProps, Text, type TextProps, Title, type TitleLevel, type TitleProps, Typography, type TypographyProps, type TypographyType };

package/dist/Typography.d.ts

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { IconName } from './Icon.js';
+
+type TypographyType = "secondary" | "success" | "warning" | "danger";
+interface CopyableConfig {
+    /** Text to copy. Defaults to the rendered children string. */
+    text?: string;
+    /** Fired after a successful copy. */
+    onCopy?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /** Custom icons `[default, copied]`. */
+    icon?: [React.ReactNode, React.ReactNode];
+    /** Custom tooltip text `[default, copied]`. Pass `false` to disable. */
+    tooltips?: [React.ReactNode, React.ReactNode] | false;
+    /** Format/MIME hint when calling `navigator.clipboard.write` is not used. */
+    format?: "text/plain" | "text/html";
+}
+interface EditableConfig {
+    /** Controlled editing flag. Omit for uncontrolled (click icon to start). */
+    editing?: boolean;
+    /** Text shown in the editor; falls back to `children` string. */
+    text?: string;
+    /** Fired with the new value when the user confirms. */
+    onChange?: (value: string) => void;
+    /** Fired when the user cancels (Escape or blur without confirm). */
+    onCancel?: () => void;
+    /** Fired when editing starts. */
+    onStart?: () => void;
+    /** Fired when editing ends (regardless of save/cancel). */
+    onEnd?: () => void;
+    /** Maximum input length. */
+    maxLength?: number;
+    /** Auto resize textarea. `true` = autosize; or pass row bounds. */
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    /** What triggers entering edit mode. Defaults to `["icon"]`. */
+    triggerType?: Array<"icon" | "text">;
+    /** Override the edit icon. */
+    icon?: React.ReactNode;
+    /** Tooltip text on the trigger icon. Pass `false` to disable. */
+    tooltip?: React.ReactNode | false;
+    /** Use a single-line input instead of textarea. */
+    enterIcon?: React.ReactNode;
+}
+interface EllipsisConfig {
+    /** Number of rows to clamp at. Defaults to 1. */
+    rows?: number;
+    /** Show an "Expand" affordance after clamping. */
+    expandable?: boolean;
+    /** Custom expand-button label. */
+    symbol?: React.ReactNode;
+    /** Fired on expand. */
+    onExpand?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Show full text in a `title` attribute. */
+    tooltip?: boolean | React.ReactNode;
+    /** Optional suffix that should always remain visible (e.g. an em-dash author). */
+    suffix?: string;
+}
+interface BaseTypographyProps {
+    /** Semantic color. */
+    type?: TypographyType;
+    /** Render disabled (muted + not selectable). */
+    disabled?: boolean;
+    /** Highlight with mark background. */
+    mark?: boolean;
+    /** Render as inline `<code>`. */
+    code?: boolean;
+    /** Render as keyboard key `<kbd>`. */
+    keyboard?: boolean;
+    /** Underline. */
+    underline?: boolean;
+    /** Strikethrough. */
+    delete?: boolean;
+    /** Bold. */
+    strong?: boolean;
+    /** Italic. */
+    italic?: boolean;
+    /** Add a copy button. Pass an object to customize. */
+    copyable?: boolean | CopyableConfig;
+    /** Add an edit button. Pass an object to customize. */
+    editable?: boolean | EditableConfig;
+    /** Truncate to N rows with optional expand affordance. */
+    ellipsis?: boolean | EllipsisConfig;
+    /** Extra class names. */
+    className?: string;
+    /** Inline style. */
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+type TitleLevel = 1 | 2 | 3 | 4 | 5;
+interface TitleProps extends BaseTypographyProps {
+    /** Heading level — 1..5. Defaults to 1. */
+    level?: TitleLevel;
+}
+/**
+ * `Typography.Title` — semantic heading.
+ *
+ * @example
+ * <Title level={2} copyable>章节标题</Title>
+ */
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLElement>>;
+interface TextProps extends BaseTypographyProps {
+    /** Force the rendered tag (default `<span>`). */
+    as?: keyof JSX.IntrinsicElements;
+}
+/**
+ * `Typography.Text` — inline text with semantic / decorative variants.
+ *
+ * @example
+ * <Text type="success" strong>成功</Text>
+ * <Text code>npm install</Text>
+ * <Text copyable>可复制内容</Text>
+ */
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+interface ParagraphProps extends BaseTypographyProps {
+}
+/**
+ * `Typography.Paragraph` — block paragraph with the same decorations as `Text`.
+ *
+ * @example
+ * <Paragraph ellipsis={{ rows: 3, expandable: true }}>{long}</Paragraph>
+ */
+declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
+interface LinkProps extends BaseTypographyProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseTypographyProps | "type"> {
+    href?: string;
+    /** Add the leading external icon. */
+    external?: boolean;
+    /** Override the external icon. */
+    externalIcon?: IconName;
+}
+/**
+ * `Typography.Link` — styled `<a>` that participates in the same decoration
+ * system as `Text`. Adds a small `arrow` for `external` links.
+ *
+ * @example
+ * <Link href="https://example.com" external>外部链接</Link>
+ */
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+interface TypographyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+interface TypographyComponent extends React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLDivElement>> {
+    Title: typeof Title;
+    Text: typeof Text;
+    Paragraph: typeof Paragraph;
+    Link: typeof Link;
+}
+declare const Typography: TypographyComponent;
+
+export { type BaseTypographyProps, type CopyableConfig, type EditableConfig, type EllipsisConfig, Link, type LinkProps, Paragraph, type ParagraphProps, Text, type TextProps, Title, type TitleLevel, type TitleProps, Typography, type TypographyProps, type TypographyType };

package/dist/Typography.js

@@ -0,0 +1,4 @@
+export { Link, Paragraph, Text, Title, Typography } from './chunk-GZGZR4FT.js';
+import './chunk-GEYMWUW6.js';
+//# sourceMappingURL=Typography.js.map
+//# sourceMappingURL=Typography.js.map

package/dist/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Typography.js"}