@godxjp/ui 16.9.3 → 16.10.0

package/dist/components/data-display/progress.d.ts

@@ -1,7 +1,14 @@
-export type ProgressTone = "success" | "warning";
+export type ProgressTone = "success" | "warning" | "destructive";
 export type ProgressProps = {
     value: number;
     label?: string;
     tone?: ProgressTone;
+    /**
+     * Allow `value` to exceed 100 and render an OVER-CAPACITY fill: the bar caps at 100% width but
+     * gets a diagonal striped overlay + destructive tone, so an over-limit meter (e.g. 252% of a
+     * booked weight) is unmistakably different from a full (100%) one. `aria-valuetext` reports the
+     * real ratio. Off by default — `value` clamps to 100 as before.
+     */
+    over?: boolean;
 };
-export declare function Progress({ value, label, tone }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function Progress({ value, label, tone, over }: ProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/progress.js

@@ -1,19 +1,22 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-function Progress({ value, label, tone = "success" }) {
+function Progress({ value, label, tone, over = false }) {
+  const isOver = over && value > 100;
   const boundedValue = Math.max(0, Math.min(100, value));
+  const effectiveTone = tone ?? (isOver ? "destructive" : "success");
   const labelId = React.useId();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "ui-progress",
-      "data-tone": tone,
+      "data-tone": effectiveTone,
+      "data-over": isOver ? "" : void 0,
       role: "progressbar",
       "aria-valuenow": boundedValue,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuetext": `${boundedValue}%`,
+      "aria-valuetext": `${isOver ? Math.round(value) : boundedValue}%`,
       "aria-labelledby": label ? labelId : void 0,
       "aria-label": label ? void 0 : "Progress",
       children: [

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

@@ -2,3 +2,5 @@ export { Button, buttonVariants } from "./button.js";
 export type { ButtonProps } from "./button.js";
 export { Text, Heading } from "./typography.js";
 export type { TextProps, HeadingProps, TextProp, HeadingProp } from "./typography.js";
+export { Logo } from "./logo.js";
+export type { LogoProps, LogoSize } from "./logo.js";

package/dist/components/general/index.js

@@ -1,8 +1,10 @@
 import { Button, buttonVariants } from "./button.js";
 import { Text, Heading } from "./typography.js";
+import { Logo } from "./logo.js";
 export {
   Button,
   Heading,
+  Logo,
   Text,
   buttonVariants
 };

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+export type LogoSize = "xs" | "sm" | "md" | "lg";
+export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * The brand glyph — a short mark (a letter/initials, default `"g"`) or a custom node such as an
+     * inline `<svg>`. Keep it to 1–2 glyphs; the box is square and centres its content.
+     */
+    glyph?: React.ReactNode;
+    /** Box size tier (tokenised). Default `"md"` (1.75rem). */
+    size?: LogoSize;
+    /**
+     * Accessible name for the mark. When set, the logo is exposed to assistive tech as an image with
+     * this name; when omitted the mark is decorative (`aria-hidden`) — the correct default when a
+     * readable wordmark sits beside it.
+     */
+    label?: string;
+}
+/**
+ * Logo — the product brand-mark box: a glyph on the primary fill. Use it INSTEAD of hand-rolling a
+ * bare span with a fixed square size, a literal radius, and `bg-primary` + type utilities in shell
+ * headers, auth screens, and topbars — that repeats literal size/radius and puts type utilities on
+ * a bare span (rules #45/#46). Size, radius, and per-tier font-size are tokens; the fill reads the
+ * primary role, so a re-themed `--primary` re-tints the mark automatically. Pair with a wordmark for
+ * the full lockup (leave `label` unset so the mark stays decorative and the wordmark carries the
+ * accessible name).
+ */
+export declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/general/logo.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Logo = React.forwardRef(
+  ({ glyph = "g", size = "md", label, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "data-slot": "logo",
+      "data-size": size,
+      className: cn("ui-logo", className),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      ...props,
+      children: glyph
+    }
+  )
+);
+Logo.displayName = "Logo";
+export {
+  Logo
+};

package/dist/styles/data-display-layout.css

@@ -56,6 +56,24 @@
     background: hsl(var(--warning));
   }
 
+  .ui-progress[data-tone="destructive"] .ui-progress-bar {
+    background: hsl(var(--destructive));
+  }
+
+  /* Over-capacity: keep the destructive fill but lay a diagonal hatch over it so an over-limit bar
+   * (value > 100, width still capped at 100%) is visually distinct from a full one. Placed after the
+   * tone rules so background-color wins; background-image carries the stripes. */
+  .ui-progress[data-over] .ui-progress-bar {
+    background-color: hsl(var(--destructive));
+    background-image: repeating-linear-gradient(
+      45deg,
+      hsl(var(--destructive-foreground) / 0.4) 0,
+      hsl(var(--destructive-foreground) / 0.4) 0.3rem,
+      transparent 0.3rem,
+      transparent 0.6rem
+    );
+  }
+
   .ui-progress-label {
     color: hsl(var(--muted-foreground));
     font-size: var(--progress-label-font-size);

package/dist/styles/index.css

@@ -17,6 +17,7 @@
 @import "./shell-layout.css";
 @import "./layout.css";
 @import "./control.css";
+@import "./logo-layout.css";
 @import "./card-layout.css";
 @import "./text-layout.css";
 @import "./table-layout.css";

package/dist/styles/logo-layout.css

@@ -0,0 +1,41 @@
+/*
+ * LOGO — the product brand-mark box (a glyph on the primary fill). Replaces the hand-rolled
+ * `<span aria-hidden className="grid size-7 place-items-center rounded-md bg-primary …">g</span>`
+ * repeated across app shells and topbars (issue #116): size/radius/font-size are tokens (rule #45),
+ * colours read the primary role directly, and the type comes from a semantic class (not utilities
+ * on a bare span, rule #46).
+ */
+@layer components {
+  .ui-logo {
+    display: inline-grid;
+    place-items: center;
+    flex: 0 0 auto;
+    width: var(--logo-size-md);
+    height: var(--logo-size-md);
+    border-radius: var(--logo-radius);
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    font-weight: 700;
+    font-size: var(--logo-font-size-md);
+    line-height: 1;
+    user-select: none;
+  }
+
+  .ui-logo[data-size="xs"] {
+    width: var(--logo-size-xs);
+    height: var(--logo-size-xs);
+    font-size: var(--logo-font-size-xs);
+  }
+
+  .ui-logo[data-size="sm"] {
+    width: var(--logo-size-sm);
+    height: var(--logo-size-sm);
+    font-size: var(--logo-font-size-sm);
+  }
+
+  .ui-logo[data-size="lg"] {
+    width: var(--logo-size-lg);
+    height: var(--logo-size-lg);
+    font-size: var(--logo-font-size-lg);
+  }
+}

package/dist/theme/famgia.service.css

@@ -0,0 +1,43 @@
+/* ───────────────────────────────────────────────────────────────
+ * Famgia service theme — ファムジア株式会社
+ * Re-themes @godxjp/ui via SEMANTIC TOKENS only (no component CSS).
+ * Brand: electric blue #2563EB (primary) + violet #7C3AED (accent gradient).
+ * Import this instead of "@godxjp/ui/styles".
+ * ─────────────────────────────────────────────────────────────── */
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");
+@import "@godxjp/ui/styles";
+
+/* ── Light (default) ── */
+:root {
+  /* Brand primary ramp — electric blue */
+  --primary:          221 83% 53%;  /* #2563EB */
+  --primary-foreground: 0 0% 100%;
+  --primary-hover:    224 71% 48%;  /* #1D4ED8 */
+  --primary-active:   226 71% 40%;  /* #1E40AF */
+  --ring:             221 83% 53%;
+
+  /* Brand-colored text (AA on tint/white) */
+  --text-link:    224 76% 45%;
+  --text-brand:   221 83% 53%;
+  --text-primary: 224 76% 42%;
+
+  /* Signature brand gradient: blue → violet */
+  --gradient-brand: linear-gradient(135deg, hsl(221 83% 53%), hsl(262 83% 58%));
+
+  /* Typography — Inter (Latin/VI) + Noto Sans JP (kana/kanji) */
+  --font-family-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* ── Dark ── lifted blue for contrast */
+.dark {
+  --primary:        221 90% 66%;
+  --primary-foreground: 222 47% 11%;
+  --primary-hover:  221 90% 72%;
+  --primary-active: 221 90% 60%;
+  --ring:           221 90% 66%;
+  --text-link:      221 90% 72%;
+  --text-brand:     221 90% 70%;
+  --text-primary:   221 90% 68%;
+}

package/dist/tokens/base.css

@@ -16,5 +16,6 @@
 @import "./components/navigation.css";
 @import "./components/data-display.css";
 @import "./components/list-row.css";
+@import "./components/logo.css";
 @import "./components/data-entry.css";
 @import "./components/shell.css";

package/dist/tokens/components/logo.css

@@ -0,0 +1,15 @@
+/* Logo component tokens — the product brand-mark box (a glyph on the primary fill), used in the
+ * app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a
+ * service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary
+ * role tokens directly, so a re-themed --primary re-tints the mark automatically. */
+:root {
+  --logo-radius: var(--radius);
+  --logo-size-xs: 1.25rem;
+  --logo-size-sm: 1.5rem;
+  --logo-size-md: 1.75rem;
+  --logo-size-lg: 2.25rem;
+  --logo-font-size-xs: var(--font-size-2xs);
+  --logo-font-size-sm: var(--font-size-xs);
+  --logo-font-size-md: var(--font-size-sm);
+  --logo-font-size-lg: var(--font-size-base);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "16.9.3",
+  "version": "16.10.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,

package/scripts/ui-audit.mjs

@@ -259,7 +259,12 @@ const RULES = [
   {
     id: "raw-intl-date",
     severity: "warn",
-    test: /\.toLocale(?:Date|Time)?String\(\s*\)|new Date\([^)]*\)\.(?:getMonth|getDate|getFullYear)\(\)\s*\+/,
+    // Only the unambiguously-Date methods: `.toLocaleDateString()` / `.toLocaleTimeString()`.
+    // Bare `.toLocaleString()` is excluded on purpose — it is overwhelmingly
+    // `Number.prototype.toLocaleString()` (legit locale number formatting), and matching it
+    // false-flagged every formatted count/amount. A date+time `Date.toLocaleString()` is rare and
+    // still partly covered by the hand-built `new Date(...).getMonth()+` alternative below.
+    test: /\.toLocale(?:Date|Time)String\(\s*\)|new Date\([^)]*\)\.(?:getMonth|getDate|getFullYear)\(\)\s*\+/,
     standard: "ISO 8601 · IANA tz database · ECMA-402 Intl.DateTimeFormat",
     message:
       "Don't hand-build or locale-default dates. Use formatDate from @godxjp/ui/datetime (Intl.DateTimeFormat + IANA timezone + ISO-8601), which respects the AppProvider locale/timezone.",