@manakind/manuia-ui 0.2.0

package/dist/goal-card/goal-card.d.ts

@@ -0,0 +1,92 @@
+import { type IconSource } from '@manakind/ui-core';
+import { type GoalCategory } from '../goal-categories';
+import './goal-card.css';
+/** Manuia's goal timeframes, longest horizon first. */
+export type GoalType = '5 Year' | '1 Year' | 'Quarterly' | 'Monthly' | 'Weekly';
+export type GoalStatus = 'Not Started' | 'In Progress' | 'Completed';
+export interface GoalMilestone {
+    id: string;
+    title: string;
+    completed: boolean;
+}
+export interface GoalCardProps {
+    /** Goal title. Rendered as the card's heading. */
+    title: string;
+    /** Optional supporting copy. */
+    description?: string;
+    /** Timeframe. Drives the card's visual tier. */
+    type: GoalType;
+    /** Progress status, shown as a badge. */
+    status: GoalStatus;
+    /**
+     * Glyph for this card's status, supplied by the product so this package
+     * never imports an icon set — same contract as `typeIcon`.
+     *
+     * Strongly recommended. The status badge collapses to the glyph alone on a
+     * narrow card, and without one it collapses to a bare colour chip, which
+     * says nothing to anyone who cannot separate the tints. Pass a glyph whose
+     * outline differs per status, not just its hue.
+     */
+    statusIcon?: IconSource;
+    /** Categories this goal belongs to. */
+    categories?: GoalCategory[];
+    /** How many categories to show before collapsing into `+N more`. */
+    maxVisibleCategories?: number;
+    /** Milestones, rendered as a progress bar plus a checklist. */
+    milestones?: GoalMilestone[];
+    /** Pre-formatted target date. Formatting is the caller's job — this package takes no date dependency. */
+    targetDate?: string;
+    /**
+     * Icon shown beside the timeframe badge.
+     *
+     * Supplied by the product so this package never imports an icon set. The
+     * Humanity Plus apps pass a Lineicons Pro component here.
+     */
+    typeIcon?: IconSource;
+    /** Glyph for a completed milestone. Falls back to a filled dot. */
+    milestoneIcon?: IconSource;
+    /**
+     * Emblem shown on the higher tiers — the product uses a crown for 5 Year,
+     * a shield for 1 Year, and a compass for Quarterly.
+     *
+     * Purely decorative: it is `aria-hidden`, because the timeframe is already
+     * announced as text beside it. Monthly and Weekly carry no emblem, so pass
+     * nothing for those.
+     */
+    emblemIcon?: IconSource;
+    /**
+     * Heading level for the title. Defaults to `h3`.
+     *
+     * A grid of these usually sits under a section heading, so `h3` is right;
+     * override it if the surrounding outline differs.
+     */
+    titleAs?: 'h2' | 'h3' | 'h4';
+    /** Extra class names. */
+    className?: string;
+}
+/**
+ * A Manuia goal, rendered as a card.
+ *
+ * Composes `ui-core`'s `Card`, `Badge`, and `Progress` with Manuia's own
+ * concepts — timeframes, categories, milestones — which is exactly why it
+ * lives in the product package rather than in `ui-core`.
+ *
+ * Longer horizons are given more visual weight ("prestige tiers"). That is a
+ * deliberate product signal, not decoration for its own sake: a five-year goal
+ * should not look like a weekly one.
+ *
+ * The card is styled as interactive but is **not** operable on its own — wrap
+ * it in a link or button so it is reachable by keyboard, exactly as `Card`'s
+ * `interactive` prop documents.
+ *
+ * @remarks
+ * The three highest tiers carry the full prestige treatment — gradient wash,
+ * coloured glow shadow, corner ornament, and emblem — driven by the `ochre`,
+ * `sage`, and `sienna` ramps in `@manakind/manuia-tokens`.
+ *
+ * Those ramp values are interim: generated in OKLCH rather than taken from
+ * designed colours, so the shapes are right and the exact hues are pending a
+ * design pass. See issue #34.
+ */
+export declare function GoalCard({ title, description, type, status, statusIcon, categories, maxVisibleCategories, milestones, targetDate, typeIcon, milestoneIcon, emblemIcon, titleAs, className, }: GoalCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=goal-card.d.ts.map

package/dist/goal-card/goal-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-card.d.ts","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,UAAU,EAEhB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,iBAAiB,CAAC;AAEzB,uDAAuD;AACvD,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhF,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,aAAa,GAAG,WAAW,CAAC;AAErE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,IAAI,EAAE,QAAQ,CAAC;IACf,yCAAyC;IACzC,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uCAAuC;IACvC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,+DAA+D;IAC/D,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,yGAAyG;IACzG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,UAAU,EACV,UAAe,EACf,oBAAwB,EACxB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,UAAU,EACV,OAAc,EACd,SAAS,GACV,EAAE,aAAa,2CA8Gf"}

package/dist/goal-card/goal-card.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Card, CardContent, CardHeader, CardTitle, cx, Icon, Progress, } from '@manakind/ui-core';
+import { GoalCategories } from '../goal-categories';
+import './goal-card.css';
+const STATUS_VARIANT = {
+    'Not Started': 'muted',
+    'In Progress': 'info',
+    Completed: 'success',
+};
+/**
+ * Emblem glyph size per tier, mirroring the product (20 / 16 / 14). The ring
+ * around it is sized in CSS from the tier tokens; this is the icon inside it.
+ */
+const TIER_EMBLEM_ICON_SIZE = {
+    '5 Year': 'lg',
+    '1 Year': 'md',
+    Quarterly: 'sm',
+};
+/** Maps a timeframe to its CSS tier modifier. */
+const TIER_CLASS = {
+    '5 Year': 'legendary',
+    '1 Year': 'epic',
+    Quarterly: 'rare',
+    Monthly: 'common',
+    Weekly: 'plain',
+};
+/**
+ * A Manuia goal, rendered as a card.
+ *
+ * Composes `ui-core`'s `Card`, `Badge`, and `Progress` with Manuia's own
+ * concepts — timeframes, categories, milestones — which is exactly why it
+ * lives in the product package rather than in `ui-core`.
+ *
+ * Longer horizons are given more visual weight ("prestige tiers"). That is a
+ * deliberate product signal, not decoration for its own sake: a five-year goal
+ * should not look like a weekly one.
+ *
+ * The card is styled as interactive but is **not** operable on its own — wrap
+ * it in a link or button so it is reachable by keyboard, exactly as `Card`'s
+ * `interactive` prop documents.
+ *
+ * @remarks
+ * The three highest tiers carry the full prestige treatment — gradient wash,
+ * coloured glow shadow, corner ornament, and emblem — driven by the `ochre`,
+ * `sage`, and `sienna` ramps in `@manakind/manuia-tokens`.
+ *
+ * Those ramp values are interim: generated in OKLCH rather than taken from
+ * designed colours, so the shapes are right and the exact hues are pending a
+ * design pass. See issue #34.
+ */
+export function GoalCard({ title, description, type, status, statusIcon, categories = [], maxVisibleCategories = 3, milestones, targetDate, typeIcon, milestoneIcon, emblemIcon, titleAs = 'h3', className, }) {
+    const completed = milestones?.filter((m) => m.completed).length ?? 0;
+    const total = milestones?.length ?? 0;
+    /*
+     * Three decorative, inert spans are always in the tree, and CSS decides per
+     * tier whether they show: the ornament frame and the four corner marks
+     * (brackets on 5 Year, dots on 1 Year), and the hairline closing the header
+     * band, which is hidden below the top two tiers.
+     *
+     * Rendered unconditionally rather than branched on `type` so the tier
+     * treatment stays entirely in `goal-card.css` — one place to read what a
+     * tier looks like, and no second definition here to drift from it.
+     */
+    return (_jsxs(Card, { interactive: true, className: cx('mui-goal-card', `mui-goal-card--${TIER_CLASS[type]}`, className), children: [_jsx("span", { className: "mui-goal-card__ornament", "aria-hidden": "true" }), _jsxs("span", { className: "mui-goal-card__corners", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsxs(CardHeader, { className: "mui-goal-card__header", children: [_jsxs("div", { className: "mui-goal-card__meta", children: [_jsxs("span", { className: "mui-goal-card__meta-start", children: [emblemIcon && (_jsx("span", { className: "mui-goal-card__emblem", "aria-hidden": "true", children: _jsx(Icon, { source: emblemIcon, size: TIER_EMBLEM_ICON_SIZE[type] ?? 'md', decorative: true }) })), _jsxs("span", { className: "mui-goal-card__type", children: [typeIcon && _jsx(Icon, { source: typeIcon, size: "sm", decorative: true }), type] })] }), _jsx(Badge, { variant: STATUS_VARIANT[status], appearance: "plain", icon: statusIcon, "aria-label": status, children: status })] }), _jsx(GoalCategories, { className: "mui-goal-card__categories", categories: categories, maxVisible: maxVisibleCategories }), _jsx(CardTitle, { as: titleAs, className: "mui-goal-card__title", children: title }), _jsx("span", { className: "mui-goal-card__divider", "aria-hidden": "true" })] }), _jsxs(CardContent, { className: "mui-goal-card__content", children: [_jsx("p", { className: "mui-goal-card__description", children: description || 'No description provided.' }), total > 0 && (_jsxs("div", { className: "mui-goal-card__milestones", children: [_jsx(Progress, { size: "sm", value: completed, max: total, label: _jsx("span", { className: "mui-goal-card__milestones-label", children: "Milestones" }), valueText: `${completed} of ${total}` }), _jsx("ul", { className: "mui-goal-card__milestone-list", children: milestones?.map((milestone) => (_jsxs("li", { className: cx('mui-goal-card__milestone', milestone.completed && 'mui-goal-card__milestone--done'), children: [_jsx("span", { className: "mui-goal-card__milestone-marker", "aria-hidden": "true", children: milestone.completed && milestoneIcon && (_jsx(Icon, { source: milestoneIcon, size: "sm", decorative: true })) }), _jsx("span", { className: "mui-goal-card__milestone-title", children: milestone.title })] }, milestone.id))) })] })), targetDate && (_jsxs("p", { className: "mui-goal-card__target", children: [_jsx("span", { className: "mui-goal-card__target-label", children: "Target:" }), " ", targetDate] }))] })] }));
+}
+//# sourceMappingURL=goal-card.js.map

package/dist/goal-card/goal-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-card.js","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":"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"}

package/dist/goal-card/index.d.ts

@@ -0,0 +1,3 @@
+export type { GoalCardProps, GoalMilestone, GoalStatus, GoalType, } from './goal-card';
+export { GoalCard } from './goal-card';
+//# sourceMappingURL=index.d.ts.map

package/dist/goal-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/goal-card/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,aAAa,EACb,aAAa,EACb,UAAU,EACV,QAAQ,GACT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/goal-card/index.js

@@ -0,0 +1,2 @@
+export { GoalCard } from './goal-card';
+//# sourceMappingURL=index.js.map

package/dist/goal-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/goal-card/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/goal-categories/goal-categories.css

@@ -0,0 +1,51 @@
+@layer components {
+  .mui-goal-categories {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    & .mui-goal-categories__item {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--semantic-space-gap-tight);
+      color: var(--semantic-color-text-muted);
+      font-size: var(--primitives-font-size-sm);
+      white-space: nowrap;
+    }
+
+    /*
+     * `--mui-goal-category` is set per item from the category's stored
+     * colour, falling back to the primary action colour for a category that
+     * has none yet.
+     *
+     * The dot is deliberately NOT load-bearing. A category colour is user
+     * data — any colour at all, including one that matches the card surface —
+     * so no contrast floor can be promised for it, and promising one would be
+     * a claim this component cannot keep. The name sits beside it as text on
+     * the card surface at that surface's own checked contrast, which is what
+     * actually carries the category.
+     *
+     * The ring exists so the dot does not vanish entirely against a
+     * near-surface colour. It is a visibility floor for a decoration, not a
+     * contrast guarantee.
+     */
+    & .mui-goal-categories__dot {
+      flex-shrink: 0;
+      width: var(--component-goal-categories-dot-size);
+      height: var(--component-goal-categories-dot-size);
+      border-radius: var(--semantic-radius-pill);
+      background-color: var(--mui-goal-category, var(--semantic-color-action-primary));
+      box-shadow: 0 0 0 1px var(--semantic-color-border-subtle);
+    }
+
+    /*
+     * No colour override: the overflow item is the same muted text as the
+     * rest, and its lack of a dot already sets it apart. It keeps a class so
+     * tests and products have a hook.
+     */
+  }
+}

package/dist/goal-categories/goal-categories.d.ts

@@ -0,0 +1,55 @@
+import './goal-categories.css';
+export interface GoalCategory {
+    /** Stable identifier. */
+    id: string;
+    /** Display name. Carries the meaning — never rely on the colour alone. */
+    name: string;
+    /**
+     * Resolved CSS colour for this category.
+     *
+     * Category colours are **data, not design tokens** — each category row
+     * stores a colour the user picked, so the value arrives at runtime rather
+     * than from the token pipeline. It is applied through a custom property
+     * rather than an inline `background-color` so the CSS keeps ownership of
+     * how the colour is used.
+     *
+     * Validated before it reaches the style attribute — see `safeColor` and the
+     * comment above it. A value that is not a recognisable CSS colour is ignored.
+     *
+     * When omitted or rejected the dot falls back to the product's primary
+     * action colour.
+     */
+    color?: string;
+}
+export interface GoalCategoriesProps {
+    /** Categories to show. Renders nothing when empty. */
+    categories: GoalCategory[];
+    /**
+     * Show at most this many, then a `+N more`. Omit to show all.
+     *
+     * Normalized before use: truncated toward zero, clamped at zero, and a
+     * non-finite value is treated as "no limit" rather than hiding everything.
+     */
+    maxVisible?: number;
+    /** Extra class names. */
+    className?: string;
+}
+/**
+ * The categories a Manuia goal belongs to, as dotted text.
+ *
+ * A Manuia-specific composition: "a goal belongs to N categories, each with a
+ * user-chosen colour, collapsing after N visible" is a product concept and
+ * does not belong in `ui-core`.
+ *
+ * @remarks
+ * The name is always rendered as text on the card surface, so it inherits
+ * that surface's checked contrast and the grouping survives for anyone who
+ * cannot distinguish the colours. The dot is reinforcement, never the signal.
+ *
+ * This used to be a row of filled pills, which forced the category colour to
+ * be composited to 25% so text could sit on it — no fixed text colour clears
+ * 4.5:1 over an arbitrary user-chosen colour. Moving the colour into a dot
+ * removed the constraint rather than working around it.
+ */
+export declare function GoalCategories({ categories, maxVisible, className }: GoalCategoriesProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=goal-categories.d.ts.map

package/dist/goal-categories/goal-categories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-categories.d.ts","sourceRoot":"","sources":["../../src/goal-categories/goal-categories.tsx"],"names":[],"mappings":"AAEA,OAAO,uBAAuB,CAAC;AA+D/B,MAAM,WAAW,YAAY;IAC3B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,sDAAsD;IACtD,UAAU,EAAE,YAAY,EAAE,CAAC;IAC3B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,mBAAmB,kDA0CxF"}

package/dist/goal-categories/goal-categories.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '@manakind/ui-core';
+import './goal-categories.css';
+/*
+ * The colour arrives from outside the token pipeline, so this component
+ * validates it instead of trusting its caller.
+ *
+ * Two separate reasons, and the second is the one that bites in practice.
+ *
+ * **Injection, on the server.** React escapes HTML, not CSS. For a *custom*
+ * property `react-dom/server` serialises the string into the markup with only
+ * the five HTML entities replaced — the semicolon is not among them — so
+ * `red;position:fixed;inset:0` closes the declaration and the browser parses
+ * the tail as further rules. Enough to cover the page or hide a control.
+ * (React's client path goes through `style.setProperty()`, and CSSOM rejects
+ * a value containing `;`, so this is specifically an SSR exposure.)
+ *
+ * **Invisible dots, everywhere.** A value that is not a colour at all is the
+ * likelier input — a product mapping its own palette names through, say. Once
+ * it is *set*, the `var(--mui-goal-category, …)` fallback in the CSS no longer
+ * applies, and the `background-color` it feeds is invalid at computed-value
+ * time: the dot resolves to transparent rather than falling back. So the guard
+ * admits only real colour syntax; anything else is left unset, which is what
+ * makes the documented fallback actually happen.
+ *
+ * This outlived the pills-to-dots change. The mechanism moved — it was
+ * `color-mix()` going invalid, now it is `background-color` — but "a bad value
+ * silently paints nothing" is a property of the custom-property fallback, not
+ * of whatever consumed it.
+ */
+const CSS_COLOR_FUNCTION = /^(?:rgb|hsl|hwb|lab|lch|oklab|oklch|color)a?\([^;(){}]*\)$/i;
+const CSS_HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+// The CSS named colours. A bare word outside this set is rejected rather than
+// passed through, because an unrecognised keyword is what produces the
+// invalid-colour case above.
+const CSS_NAMED_COLORS = new Set(`aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue
+   blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk
+   crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki
+   darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen
+   darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue
+   dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite
+   gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki
+   lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan
+   lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen
+   lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen
+   magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen
+   mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream
+   mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid
+   palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum
+   powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown
+   seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen
+   steelblue tan teal thistle tomato transparent turquoise violet wheat white whitesmoke
+   yellow yellowgreen`.split(/\s+/));
+function safeColor(color) {
+    const trimmed = color?.trim();
+    if (!trimmed)
+        return undefined;
+    if (CSS_HEX.test(trimmed) || CSS_COLOR_FUNCTION.test(trimmed))
+        return trimmed;
+    return CSS_NAMED_COLORS.has(trimmed.toLowerCase()) ? trimmed : undefined;
+}
+/**
+ * The categories a Manuia goal belongs to, as dotted text.
+ *
+ * A Manuia-specific composition: "a goal belongs to N categories, each with a
+ * user-chosen colour, collapsing after N visible" is a product concept and
+ * does not belong in `ui-core`.
+ *
+ * @remarks
+ * The name is always rendered as text on the card surface, so it inherits
+ * that surface's checked contrast and the grouping survives for anyone who
+ * cannot distinguish the colours. The dot is reinforcement, never the signal.
+ *
+ * This used to be a row of filled pills, which forced the category colour to
+ * be composited to 25% so text could sit on it — no fixed text colour clears
+ * 4.5:1 over an arbitrary user-chosen colour. Moving the colour into a dot
+ * removed the constraint rather than working around it.
+ */
+export function GoalCategories({ categories, maxVisible, className }) {
+    if (categories.length === 0)
+        return null;
+    // Normalized once, because the value feeds both an index operation and
+    // arithmetic and the two coerce differently: `slice` truncates a fractional
+    // end index while the subtraction below keeps it, so `2.5` over three
+    // categories would render two names and offer "+0.5 more". Negatives are
+    // clamped for the same reason in the other direction — `slice` reads them as
+    // an offset from the end, dropping a real category and overcounting the
+    // remainder at once. Zero stays meaningful: it collapses the set into
+    // "+N more". NaN is excluded rather than clamped: it survives both Math
+    // calls, and `slice(0, NaN)` renders nothing while `NaN > 0` suppresses the
+    // overflow item too — the whole list would vanish with no indicator that it
+    // had.
+    const limit = Number.isFinite(maxVisible)
+        ? Math.max(Math.trunc(maxVisible), 0)
+        : undefined;
+    const visible = limit === undefined ? categories : categories.slice(0, limit);
+    const remaining = limit === undefined ? 0 : Math.max(categories.length - limit, 0);
+    return (_jsxs("ul", { className: cx('mui-goal-categories', className), children: [visible.map((category) => {
+                const dot = safeColor(category.color);
+                return (_jsxs("li", { className: "mui-goal-categories__item", style: dot ? { '--mui-goal-category': dot } : undefined, children: [_jsx("span", { className: "mui-goal-categories__dot", "aria-hidden": "true" }), category.name] }, category.id));
+            }), remaining > 0 && (_jsxs("li", { className: "mui-goal-categories__item mui-goal-categories__item--overflow", children: ["+", remaining, " more"] }))] }));
+}
+//# sourceMappingURL=goal-categories.js.map

package/dist/goal-categories/goal-categories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-categories.js","sourceRoot":"","sources":["../../src/goal-categories/goal-categories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,OAAO,uBAAuB,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,kBAAkB,GAAG,6DAA6D,CAAC;AACzF,MAAM,OAAO,GAAG,yDAAyD,CAAC;AAE1E,8EAA8E;AAC9E,uEAAuE;AACvE,6BAA6B;AAC7B,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAC9B;;;;;;;;;;;;;;;;;sBAiBoB,CAAC,KAAK,CAAC,KAAK,CAAC,CAClC,CAAC;AAEF,SAAS,SAAS,CAAC,KAAyB;IAC1C,MAAM,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC;IAC9B,IAAI,CAAC,OAAO;QAAE,OAAO,SAAS,CAAC;IAC/B,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC;QAAE,OAAO,OAAO,CAAC;IAC9E,OAAO,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;AAC3E,CAAC;AAuCD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAuB;IACvF,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,uEAAuE;IACvE,4EAA4E;IAC5E,sEAAsE;IACtE,yEAAyE;IACzE,6EAA6E;IAC7E,wEAAwE;IACxE,sEAAsE;IACtE,wEAAwE;IACxE,4EAA4E;IAC5E,4EAA4E;IAC5E,OAAO;IACP,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC;QACvC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAoB,CAAC,EAAE,CAAC,CAAC;QAC/C,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,OAAO,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,cAAI,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAChD,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACxB,MAAM,GAAG,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACtC,OAAO,CACL,cAEE,SAAS,EAAC,2BAA2B,EACrC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAE,EAAE,qBAAqB,EAAE,GAAG,EAAoB,CAAC,CAAC,CAAC,SAAS,aAE1E,eAAM,SAAS,EAAC,0BAA0B,iBAAa,MAAM,GAAG,EAC/D,QAAQ,CAAC,IAAI,KALT,QAAQ,CAAC,EAAE,CAMb,CACN,CAAC;YACJ,CAAC,CAAC,EACD,SAAS,GAAG,CAAC,IAAI,CAChB,cAAI,SAAS,EAAC,+DAA+D,kBACzE,SAAS,aACR,CACN,IACE,CACN,CAAC;AACJ,CAAC"}

package/dist/goal-categories/index.d.ts

@@ -0,0 +1,3 @@
+export type { GoalCategoriesProps, GoalCategory } from './goal-categories';
+export { GoalCategories } from './goal-categories';
+//# sourceMappingURL=index.d.ts.map

package/dist/goal-categories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/goal-categories/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/goal-categories/index.js

@@ -0,0 +1,2 @@
+export { GoalCategories } from './goal-categories';
+//# sourceMappingURL=index.js.map

package/dist/goal-categories/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/goal-categories/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/goal-tab-trigger/goal-tab-trigger.css

@@ -0,0 +1,10 @@
+@layer components {
+  /*
+   * Set the weight through the contract variable `ui-core`'s trigger reads,
+   * not by out-ranking its `.ds-tabs .ds-tabs__trigger` rule: that would need
+   * a `ds-` class here, which only `ui-core` may use (components.md).
+   */
+  .mui-goal-tab-trigger--empty {
+    --ds-tabs-trigger-font-weight: var(--primitives-font-weight-regular);
+  }
+}

package/dist/goal-tab-trigger/goal-tab-trigger.d.ts

@@ -0,0 +1,11 @@
+import { TabsTrigger } from '@manakind/ui-core';
+import type { ComponentProps } from 'react';
+import './goal-tab-trigger.css';
+export interface GoalTabTriggerProps extends ComponentProps<typeof TabsTrigger> {
+    /** Timeframe label, e.g. `Weekly`. */
+    label: string;
+    /** How many goals fall in this timeframe. */
+    count: number;
+}
+export declare function GoalTabTrigger({ label, count, className, ...props }: GoalTabTriggerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=goal-tab-trigger.d.ts.map

package/dist/goal-tab-trigger/goal-tab-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-tab-trigger.d.ts","sourceRoot":"","sources":["../../src/goal-tab-trigger/goal-tab-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,OAAO,WAAW,CAAC;IAC7E,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;CACf;AA4BD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAmBxF"}

package/dist/goal-tab-trigger/goal-tab-trigger.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, cx, TabsTrigger } from '@manakind/ui-core';
+import './goal-tab-trigger.css';
+/**
+ * A Manuia timeframe tab with its goal count.
+ *
+ * Composes `ui-core`'s `TabsTrigger` and `Badge`. The pairing is product
+ * specific — "a tab that carries a count of the things behind it" is a Manuia
+ * pattern, so it lives here rather than widening `TabsTrigger`.
+ *
+ * The count badge carries an `aria-label`, because a bare number announced
+ * after the label tells a screen reader user nothing. Tabs with no goals are
+ * rendered in a lighter weight, but they stay reachable — the count itself is
+ * the information.
+ */
+/**
+ * Counts stop rendering their true value here and switch to `99+`.
+ *
+ * The cap bounds how wide the badge can get: without it a five-digit count
+ * would stretch the tab arbitrarily. At `99+` the badge widens from a circle
+ * into a pill, which is what every other library does with this case and
+ * costs nothing structurally — the height is pinned, so nothing reflows and
+ * the tab strip keeps its nested radii.
+ *
+ * The cap is display only. The `aria-label` always announces the real
+ * number, so nothing is hidden from a screen reader.
+ */
+const MAX_DISPLAYED_COUNT = 99;
+export function GoalTabTrigger({ label, count, className, ...props }) {
+    const hasGoals = count > 0;
+    const overflows = count > MAX_DISPLAYED_COUNT;
+    return (_jsxs(TabsTrigger, { className: cx('mui-goal-tab-trigger', !hasGoals && 'mui-goal-tab-trigger--empty', className), ...props, children: [_jsx("span", { children: label }), _jsx(Badge, { shape: "circle", variant: hasGoals ? 'success' : 'outline', "aria-label": `${count} ${count === 1 ? 'goal' : 'goals'}`, children: overflows ? `${MAX_DISPLAYED_COUNT}+` : count })] }));
+}
+//# sourceMappingURL=goal-tab-trigger.js.map

package/dist/goal-tab-trigger/goal-tab-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-tab-trigger.js","sourceRoot":"","sources":["../../src/goal-tab-trigger/goal-tab-trigger.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,wBAAwB,CAAC;AAShC;;;;;;;;;;;GAWG;AACH;;;;;;;;;;;GAWG;AACH,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAE/B,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB;IACvF,MAAM,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,KAAK,GAAG,mBAAmB,CAAC;IAE9C,OAAO,CACL,MAAC,WAAW,IACV,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,CAAC,QAAQ,IAAI,6BAA6B,EAAE,SAAS,CAAC,KACxF,KAAK,aAET,yBAAO,KAAK,GAAQ,EACpB,KAAC,KAAK,IACJ,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,gBAC7B,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,YAEvD,SAAS,CAAC,CAAC,CAAC,GAAG,mBAAmB,GAAG,CAAC,CAAC,CAAC,KAAK,GACxC,IACI,CACf,CAAC;AACJ,CAAC"}

package/dist/goal-tab-trigger/index.d.ts

@@ -0,0 +1,3 @@
+export type { GoalTabTriggerProps } from './goal-tab-trigger';
+export { GoalTabTrigger } from './goal-tab-trigger';
+//# sourceMappingURL=index.d.ts.map

package/dist/goal-tab-trigger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/goal-tab-trigger/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/goal-tab-trigger/index.js

@@ -0,0 +1,2 @@
+export { GoalTabTrigger } from './goal-tab-trigger';
+//# sourceMappingURL=index.js.map

package/dist/goal-tab-trigger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/goal-tab-trigger/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `@manakind/manuia-ui` is the Manuia-flavored surface of the Manakind design system.
+ *
+ * It re-exports the shared base components from `@manakind/ui-core` and adds
+ * the Manuia-specific compositions assembled from them.
+ *
+ * The Manuia theme is provided at runtime by importing
+ * `@manakind/manuia-tokens/css/theme` (and the underlying token layers) — see
+ * `.storybook/preview.ts` for the canonical setup.
+ */
+export * from '@manakind/ui-core';
+export * from './goal-card';
+export * from './goal-categories';
+export * from './goal-tab-trigger';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,15 @@
+/**
+ * `@manakind/manuia-ui` is the Manuia-flavored surface of the Manakind design system.
+ *
+ * It re-exports the shared base components from `@manakind/ui-core` and adds
+ * the Manuia-specific compositions assembled from them.
+ *
+ * The Manuia theme is provided at runtime by importing
+ * `@manakind/manuia-tokens/css/theme` (and the underlying token layers) — see
+ * `.storybook/preview.ts` for the canonical setup.
+ */
+export * from '@manakind/ui-core';
+export * from './goal-card';
+export * from './goal-categories';
+export * from './goal-tab-trigger';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@manakind/manuia-ui",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Humanity-Plus/Manakind.git",
+    "directory": "packages/manuia-ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && bunx tsx ../ds-config/scripts/copy-assets.ts src dist .css",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "lint:css": "stylelint --allow-empty-input 'src/**/*.css'",
+    "lint": "biome lint .",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "vr": "playwright test"
+  },
+  "dependencies": {
+    "@manakind/manuia-tokens": "0.2.0",
+    "@manakind/ui-core": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "devDependencies": {
+    "@manakind/ds-config": "*",
+    "@playwright/test": "1.63.0",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-vitest": "10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/browser": "4.1.11",
+    "@vitest/browser-playwright": "4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
+    "jest-axe": "^10.0.0",
+    "jsdom": "^29.1.1",
+    "playwright": "1.63.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "storybook": "^10.3.6",
+    "storybook-addon-pseudo-states": "10.3.6",
+    "stylelint": "^17.9.1",
+    "stylelint-declaration-strict-value": "^1.11.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "vitest": "4.1.11"
+  }
+}