@hilum/ui 2.1.2 → 3.1.0

package/dist/tokens.css

@@ -41,7 +41,7 @@
   --color-destructive: #dc2626;
 
   --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
+  --font-display: Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
 
   --radius-base: 0.5rem;
@@ -201,35 +201,35 @@
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));
 
 @utility display-xl {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 3rem;
   font-weight: 400;
   line-height: 1.15;
 }
 
 @utility display {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 2.25rem;
   font-weight: 400;
   line-height: 1.15;
 }
 
 @utility heading-xl {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 1.875rem;
   font-weight: 400;
   line-height: 1.2;
 }
 
 @utility heading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.2;
 }
 
 @utility subheading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 1.4;

package/dist/tokens.d.ts

@@ -122,37 +122,37 @@ declare const tokens: {
     };
     readonly fontFamily: {
         readonly sans: "Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
-        readonly serif: "\"Instrument Serif\", ui-serif, Georgia, serif";
+        readonly display: "Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
         readonly mono: "ui-monospace, \"SFMono-Regular\", \"Menlo\", \"Consolas\", monospace";
     };
     /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */
     readonly typeScale: {
         readonly "display-xl": {
-            readonly family: "serif";
+            readonly family: "display";
             readonly size: "3rem";
             readonly weight: 400;
             readonly lineHeight: "1.15";
         };
         readonly display: {
-            readonly family: "serif";
+            readonly family: "display";
             readonly size: "2.25rem";
             readonly weight: 400;
             readonly lineHeight: "1.15";
         };
         readonly "heading-xl": {
-            readonly family: "serif";
+            readonly family: "display";
             readonly size: "1.875rem";
             readonly weight: 400;
             readonly lineHeight: "1.2";
         };
         readonly heading: {
-            readonly family: "serif";
+            readonly family: "display";
             readonly size: "1.5rem";
             readonly weight: 400;
             readonly lineHeight: "1.2";
         };
         readonly subheading: {
-            readonly family: "serif";
+            readonly family: "display";
             readonly size: "1.25rem";
             readonly weight: 400;
             readonly lineHeight: "1.4";

package/dist/tokens.js

@@ -1,3 +1,3 @@
-export { tokens } from './chunk-H6JZQWX3.js';
+export { tokens } from './chunk-5JX2YKJM.js';
 //# sourceMappingURL=tokens.js.map
 //# sourceMappingURL=tokens.js.map

package/llms.txt

@@ -17,9 +17,10 @@ Peer dependencies: `react@^19`, `react-dom@^19`, `tailwindcss@^4`
 /* globals.css */
 @import "tailwindcss";
 @import "@hilum/ui/tokens.css";
+@import "@hilum/ui/fonts.css";
 ```
 
-That single import registers all design tokens as CSS custom properties and Tailwind v4 utilities (`bg-brand-primary`, `text-ground-900`, `shadow-natural`, etc.).
+The token import registers all design tokens as CSS custom properties and Tailwind v4 utilities (`bg-brand-primary`, `text-ground-900`, `shadow-natural`, etc.). The font import loads Hilum's self-hosted Inter and Gabarito font files.
 
 ---
 
@@ -103,11 +104,11 @@ Use as Tailwind utilities (e.g. `className="display"`):
 
 | Class | Font | Size | Weight | Usage |
 |---|---|---|---|---|
-| `display-xl` | Instrument Serif | 3rem | 400 | Hero H1 |
-| `display` | Instrument Serif | 2.25rem | 400 | Page H1 |
-| `heading-xl` | Instrument Serif | 1.875rem | 400 | Section headings |
-| `heading` | Instrument Serif | 1.5rem | 400 | Card titles |
-| `subheading` | Inter | 1.25rem | 400 | Subheadings |
+| `display-xl` | Gabarito | 3rem | 400 | Hero H1 |
+| `display` | Gabarito | 2.25rem | 400 | Page H1 |
+| `heading-xl` | Gabarito | 1.875rem | 400 | Section headings |
+| `heading` | Gabarito | 1.5rem | 400 | Card titles |
+| `subheading` | Gabarito | 1.25rem | 400 | Subheadings |
 | `body-lg` | Inter | 1rem | 400 | Large body text |
 | `body` | Inter | 0.875rem | 400 | Default body |
 | `caption` | Inter | 0.75rem | 400 | Metadata, helper text |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "2.1.2",
+  "version": "3.1.0",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@fontsource-variable/inter": "^5.2.8",
-    "@fontsource/instrument-serif": "^5.2.8",
+    "@fontsource/gabarito": "^5.2.8",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "tailwindcss": "^4.2.0",

package/src/components/input-group.tsx

@@ -7,6 +7,8 @@ interface InputGroupProps extends React.InputHTMLAttributes<HTMLInputElement> {
   trailingAddon?: React.ReactNode;
   leadingIcon?: React.ReactNode;
   trailingIcon?: React.ReactNode;
+  trailingAction?: React.ReactNode;
+  trailingActionClassName?: string;
   trailingButton?: React.ReactNode;
   error?: boolean;
   pill?: boolean;
@@ -20,6 +22,8 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
       trailingAddon,
       leadingIcon,
       trailingIcon,
+      trailingAction,
+      trailingActionClassName,
       trailingButton,
       error,
       pill,
@@ -31,7 +35,8 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
   ) => {
     const radius = pill ? "rounded-full" : "rounded-lg";
     const hasLeading = leadingAddon || leadingIcon;
-    const hasTrailing = trailingAddon || trailingIcon || trailingButton || error;
+    const hasInsetTrailing = trailingIcon || trailingAction || error;
+    const hasTrailing = trailingAddon || hasInsetTrailing || trailingButton;
 
     const baseInput = cn(
       "flex h-9 w-full border bg-card body text-foreground placeholder:text-muted-foreground",
@@ -84,16 +89,17 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
                     ? pill
                       ? "rounded-l-full rounded-r-none pl-9 pr-3"
                       : "rounded-l-lg rounded-r-none pl-9 pr-3"
-                    : trailingIcon || error
+                    : hasInsetTrailing
                       ? cn(radius, "pl-9 pr-9")
                       : cn(radius, "pl-9 pr-3")
                   : trailingAddon
                     ? pill
                       ? "rounded-l-full rounded-r-none px-3"
                       : "rounded-l-lg rounded-r-none px-3"
-                    : trailingIcon || error || trailingButton
+                    : hasInsetTrailing
                       ? cn(radius, "pl-3 pr-9")
                       : cn(radius, "px-3"),
+              trailingAction && "pr-14",
               className,
             )}
             {...props}
@@ -108,6 +114,17 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
               )}
             </div>
           )}
+
+          {trailingAction && (
+            <div
+              className={cn(
+                "absolute inset-y-0 right-2 flex items-center",
+                trailingActionClassName,
+              )}
+            >
+              {trailingAction}
+            </div>
+          )}
         </div>
 
         {/* Trailing addon (text) */}

package/src/tokens/tokens.ts

@@ -162,17 +162,17 @@ export const tokens = {
 
   fontFamily: {
     sans: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    serif: '"Instrument Serif", ui-serif, Georgia, serif',
+    display: 'Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
     mono: 'ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace',
   },
 
   /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */
   typeScale: {
-    "display-xl": { family: "serif", size: "3rem", weight: 400, lineHeight: "1.15" },
-    display: { family: "serif", size: "2.25rem", weight: 400, lineHeight: "1.15" },
-    "heading-xl": { family: "serif", size: "1.875rem", weight: 400, lineHeight: "1.2" },
-    heading: { family: "serif", size: "1.5rem", weight: 400, lineHeight: "1.2" },
-    subheading: { family: "serif", size: "1.25rem", weight: 400, lineHeight: "1.4" },
+    "display-xl": { family: "display", size: "3rem", weight: 400, lineHeight: "1.15" },
+    display: { family: "display", size: "2.25rem", weight: 400, lineHeight: "1.15" },
+    "heading-xl": { family: "display", size: "1.875rem", weight: 400, lineHeight: "1.2" },
+    heading: { family: "display", size: "1.5rem", weight: 400, lineHeight: "1.2" },
+    subheading: { family: "display", size: "1.25rem", weight: 400, lineHeight: "1.4" },
     "body-lg": { family: "sans", size: "1rem", weight: 400, lineHeight: "1.625" },
     body: { family: "sans", size: "0.875rem", weight: 400, lineHeight: "1.625" },
     "body-sm": { family: "sans", size: "0.75rem", weight: 500, lineHeight: "1.625" },