@photon-ai/pho-ui 2.11.0 → 2.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/components/badge.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { t as
|
|
2
|
+
import { t as o } from "../chunks/cn-ChIgwEl3.js";
|
|
3
3
|
import { t as a } from "../chunks/resolve-variant-CcD8iG5l.js";
|
|
4
4
|
import "react";
|
|
5
5
|
import { jsx as l } from "react/jsx-runtime";
|
|
@@ -15,6 +15,10 @@ var p = "inline-flex shrink-0 items-center whitespace-nowrap rounded-full font-m
|
|
|
15
15
|
md: {
|
|
16
16
|
classes: "h-6 gap-1 px-2.5 text-xs leading-none",
|
|
17
17
|
description: "Medium — 24px; the default"
|
|
18
|
+
},
|
|
19
|
+
lg: {
|
|
20
|
+
classes: "h-7 gap-1 px-3 text-base leading-none",
|
|
21
|
+
description: "Large — 28px; beside a page title (BasicPage.Title trailing)"
|
|
18
22
|
}
|
|
19
23
|
}, c = {
|
|
20
24
|
gray: {
|
|
@@ -48,19 +52,19 @@ var p = "inline-flex shrink-0 items-center whitespace-nowrap rounded-full font-m
|
|
|
48
52
|
description: "Error — failed, blocked, over limit"
|
|
49
53
|
}
|
|
50
54
|
};
|
|
51
|
-
function g(
|
|
52
|
-
const { color:
|
|
53
|
-
return
|
|
55
|
+
function g(t) {
|
|
56
|
+
const { color: r = "gray", contrast: i = "high", size: n = "md", className: s } = t ?? {}, e = c[r];
|
|
57
|
+
return o(p, a(h, n), i === "low" ? o(d, e?.low) : e?.high, s);
|
|
54
58
|
}
|
|
55
|
-
function x({ color:
|
|
59
|
+
function x({ color: t, contrast: r, size: i, className: n, children: s, ...e }) {
|
|
56
60
|
return /* @__PURE__ */ l("span", {
|
|
57
|
-
className:
|
|
58
|
-
color:
|
|
59
|
-
contrast:
|
|
60
|
-
size:
|
|
61
|
-
}),
|
|
61
|
+
className: o(g({
|
|
62
|
+
color: t,
|
|
63
|
+
contrast: r,
|
|
64
|
+
size: i
|
|
65
|
+
}), n),
|
|
62
66
|
...e,
|
|
63
|
-
children:
|
|
67
|
+
children: s
|
|
64
68
|
});
|
|
65
69
|
}
|
|
66
70
|
x.displayName = "Badge";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge/badge.tsx"],"sourcesContent":["import { type ComponentProps } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/**\n * Design notes (Geist-aligned):\n * - ONE color axis, a tight semantic set (`gray` / `muted` / `brand` /\n * `success` / `warning` / `error`). Untitled UI's `type` triplication\n * (modern / pill / badge-color) is dropped.\n * - TWO contrasts (`high` / `low`, default `high`). High is the solid state\n * fill — the site's \"Most Popular\" pill — pairing each color's ink with\n * flipping on-ink content. Low is the soft accent material: fill and\n * hairline ring derive from `currentColor` at low opacity, so every color\n * shares one recipe.\n * -
|
|
1
|
+
{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge/badge.tsx"],"sourcesContent":["import { type ComponentProps } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/**\n * Design notes (Geist-aligned):\n * - ONE color axis, a tight semantic set (`gray` / `muted` / `brand` /\n * `success` / `warning` / `error`). Untitled UI's `type` triplication\n * (modern / pill / badge-color) is dropped.\n * - TWO contrasts (`high` / `low`, default `high`). High is the solid state\n * fill — the site's \"Most Popular\" pill — pairing each color's ink with\n * flipping on-ink content. Low is the soft accent material: fill and\n * hairline ring derive from `currentColor` at low opacity, so every color\n * shares one recipe.\n * - FOUR sizes (`xs` / `sm` / `md` / `lg`, default `md`). A badge is inherently\n * small; `lg` is the one step up, for a pill seated beside a page title.\n * - The richer Untitled features (dot, icon, avatar, count, dismiss button) are\n * deliberately left out — a dismissible or selectable chip is a Tag, not a\n * Badge, and a badge that triggers an action is a Button.\n */\n\nconst BADGE_BASE =\n \"inline-flex shrink-0 items-center whitespace-nowrap rounded-full font-medium\";\n\n/** Low-contrast material — tint and hairline derived from the color's text token. */\nconst LOW_MATERIAL = \"bg-current/10 ring-1 ring-current/20 ring-inset\";\n\n/**\n * Size axis — fixed heights on a 4px step (16 / 20 / 24 / 28) so the ladder\n * stays proportional. Horizontal padding and type scale with each step;\n * vertical centering comes from `items-center` on the base (no `py`).\n */\nexport const BADGE_SIZES = {\n xs: {\n classes: \"h-4 gap-0.5 px-1.5 text-[10px] leading-none\",\n description: \"Extra small — 16px; inline next to 14px labels (plan chips)\",\n },\n sm: {\n classes: \"h-5 gap-0.5 px-2 text-xs leading-none\",\n description: \"Small — 20px; dense rows, table cells\",\n },\n md: {\n classes: \"h-6 gap-1 px-2.5 text-xs leading-none\",\n description: \"Medium — 24px; the default\",\n },\n lg: {\n classes: \"h-7 gap-1 px-3 text-base leading-none\",\n description: \"Large — 28px; beside a page title (BasicPage.Title trailing)\",\n },\n} satisfies VariantMap;\n\n/**\n * Color axis — a closed semantic set with one recipe per contrast. `high`\n * fills with the state ink (text flips with it per mode); `low` tints text\n * only and lets `LOW_MATERIAL` derive fill and ring from it.\n */\nexport const BADGE_COLORS = {\n gray: {\n high: \"bg-pho-inverse text-pho-inverse\",\n low: \"text-pho-secondary\",\n description: \"Neutral — the low-signal default (solid inverse)\",\n },\n muted: {\n high: \"bg-pho-secondary text-pho-primary\",\n low: \"text-pho-description\",\n description: \"Muted — soft solid surface for quieter labels (Free, Shared)\",\n },\n brand: {\n high: \"bg-pho-brand-solid text-pho-on-brand\",\n low: \"text-pho-brand\",\n description: \"Brand — plan tiers, feature flags, highlights\",\n },\n success: {\n high: \"bg-pho-success-ink text-pho-on-brand\",\n low: \"text-pho-success\",\n description: \"Success — healthy, live, complete\",\n },\n warning: {\n high: \"bg-pho-warning-ink text-pho-on-brand\",\n low: \"text-pho-warning\",\n description: \"Warning — needs attention, degraded\",\n },\n error: {\n high: \"bg-pho-error-ink text-pho-on-brand\",\n low: \"text-pho-error\",\n description: \"Error — failed, blocked, over limit\",\n },\n} satisfies Record<string, { high: string; low: string; description: string }>;\n\nexport type BadgeSize = keyof typeof BADGE_SIZES;\nexport type BadgeColor = keyof typeof BADGE_COLORS;\nexport type BadgeContrast = \"high\" | \"low\";\n\n/** Compose the full class string for a badge — exported for reuse/testing. */\nexport function badgeVariants(opts?: {\n color?: BadgeColor;\n contrast?: BadgeContrast;\n size?: BadgeSize;\n className?: string;\n}): string {\n const {\n color = \"gray\",\n contrast = \"high\",\n size = \"md\",\n className,\n } = opts ?? {};\n const def = BADGE_COLORS[color] as\n (typeof BADGE_COLORS)[BadgeColor] | undefined;\n return cn(\n BADGE_BASE,\n resolveVariant(BADGE_SIZES, size),\n contrast === \"low\" ? cn(LOW_MATERIAL, def?.low) : def?.high,\n className,\n );\n}\n\ninterface BadgeBaseProps {\n /** Semantic color. @default \"gray\" */\n color?: BadgeColor;\n /** Solid state fill (`high`) or the soft currentColor tint (`low`). @default \"high\" */\n contrast?: BadgeContrast;\n /** Size variant. @default \"md\" */\n size?: BadgeSize;\n}\n\nexport interface BadgeProps\n extends BadgeBaseProps, Omit<ComponentProps<\"span\">, keyof BadgeBaseProps> {}\n\n/**\n * Badge — a small, non-interactive status label: a plan tier (`Pro`), a state\n * (`Live`, `Failed`), a count. It's a plain `<span>`, so it never takes focus or\n * handles clicks — for a dismissible or selectable chip reach for a `Tag`, and\n * for a standalone action use a `Button`. Let `color` carry the meaning and keep\n * the label to a word or two.\n */\nexport function Badge({\n color,\n contrast,\n size,\n className,\n children,\n ...props\n}: BadgeProps) {\n return (\n <span\n className={cn(badgeVariants({ color, contrast, size }), className)}\n {...props}\n >\n {children}\n </span>\n );\n}\n\nBadge.displayName = \"Badge\";\n"],"mappings":";;;;;AAqBA,IAAM,IACJ,gFAGI,IAAe,mDAOR,IAAc;AAAA,EACzB,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF,GAOa,IAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AACF;AAOA,SAAgB,EAAc,GAKnB;AACT,QAAM,EACJ,OAAA,IAAQ,QACR,UAAA,IAAW,QACX,MAAA,IAAO,MACP,WAAA,EAAA,IACE,KAAQ,CAAC,GACP,IAAM,EAAa,CAAA;AAEzB,SAAO,EACL,GACA,EAAe,GAAa,CAAI,GAChC,MAAa,QAAQ,EAAG,GAAc,GAAK,GAAG,IAAI,GAAK,MACvD,CACF;AACF;AAqBA,SAAgB,EAAM,EACpB,OAAA,GACA,UAAA,GACA,MAAA,GACA,WAAA,GACA,UAAA,GACA,GAAG,EAAA,GACU;AACb,SACE,gBAAA,EAAC,QAAD;AAAA,IACE,WAAW,EAAG,EAAc;AAAA,MAAE,OAAA;AAAA,MAAO,UAAA;AAAA,MAAU,MAAA;AAAA,IAAK,CAAC,GAAG,CAAS;AAAA,IACjE,GAAI;AAAA,IAEH,UAAA;AAAA,EACG,CAAA;AAEV;AAEA,EAAM,cAAc"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ComponentProps } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* Size axis — fixed heights on a 4px step (16 / 20 / 24) so the ladder
|
|
4
|
-
* proportional. Horizontal padding and type scale with each step;
|
|
5
|
-
* centering comes from `items-center` on the base (no `py`).
|
|
3
|
+
* Size axis — fixed heights on a 4px step (16 / 20 / 24 / 28) so the ladder
|
|
4
|
+
* stays proportional. Horizontal padding and type scale with each step;
|
|
5
|
+
* vertical centering comes from `items-center` on the base (no `py`).
|
|
6
6
|
*/
|
|
7
7
|
export declare const BADGE_SIZES: {
|
|
8
8
|
xs: {
|
|
@@ -17,6 +17,10 @@ export declare const BADGE_SIZES: {
|
|
|
17
17
|
classes: string;
|
|
18
18
|
description: string;
|
|
19
19
|
};
|
|
20
|
+
lg: {
|
|
21
|
+
classes: string;
|
|
22
|
+
description: string;
|
|
23
|
+
};
|
|
20
24
|
};
|
|
21
25
|
/**
|
|
22
26
|
* Color axis — a closed semantic set with one recipe per contrast. `high`
|