@jackbernnie/hiyf 0.2.0 → 0.3.0

package/AGENTS.md

@@ -1,8 +1,8 @@
 # Building UI with `@jackbernnie/hiyf`
 
 > Instructions for AI coding agents (Claude Code, Codex, Cursor, …). This project
-> uses the **hiyf** design system with its **lockdown** lint. Build UI using
-> **only** this system — off-system code fails the build on purpose.
+> uses the **hiyf** AI design protocol (a locked design system) with its **lockdown**
+> lint. Build UI using **only** this system — off-system code fails the build on purpose.
 
 ## The three rules (these fail `npm run build`)
 
@@ -93,7 +93,7 @@ hatch. A few key APIs:
 Full catalog — actions: ButtonGroup, Input, InputGroup, InputOTP, Textarea, Select,
 NativeSelect, Combobox, Checkbox, Switch, Slider, Toggle, ToggleGroup, RadioGroup,
 Label, Field. Feedback/display: Status, Badge, Alert, Card, Progress, Skeleton,
-Spinner, Avatar, Kbd, Empty, Toaster. Layout/data: Separator, AspectRatio,
+Spinner, Avatar, Image, Kbd, Empty, Toaster. Layout/data: Separator, AspectRatio,
 ScrollArea, Table, Carousel, Grid, GridItem. Navigation: Tabs, Accordion,
 Collapsible, Breadcrumb, Pagination, Command, NavigationMenu, Menubar. Overlays:
 Dialog, AlertDialog, Sheet, Drawer, Popover, HoverCard, Tooltip, DropdownMenu,
@@ -118,6 +118,26 @@ import { Home01Icon, Search01Icon } from '@jackbernnie/hiyf/icons'
 `size`: `xs s m l xl`. `color` defaults to `current` (inherits text color, so
 icons inside buttons just work); other values: `muted accent success warning danger`.
 
+## Images
+
+Raw `<img>` fails the build — render images through `<Image>`:
+
+```tsx
+import { Image } from '@jackbernnie/hiyf'
+
+<Image src="/logo.png" alt="Logo" width={120} height={32} radius="m" fit="contain" />
+```
+
+`radius`: `none s m l xl full`. `fit`: `cover contain fill none`. `alt` is required
+(pass `""` for purely decorative images).
+
+## A note on `<Box>` vs `<Text>` className
+
+`<Box>` accepts `className` for standard utility classes (`flex`, `items-center`).
+`<Text>` does NOT — it is closed; a `className` on it is dropped and the lint flags
+it. Put layout on a `<Box>` wrapper; use Text props (`variant`, `color`, `align`,
+`truncate`, `monospace`) for everything else.
+
 ## When something you need doesn't exist
 
 Work through this in order. **Don't get stuck, and don't expand the design system

package/README.md

@@ -1,8 +1,8 @@
 # @jackbernnie/hiyf
 
-**human-in-your-face** — a personal, LLM-safe design system: the full shadcn/ui
-component set as a robust base, themed neutral, and closed down so the only
-expressible choices are correct ones.
+**human-in-your-face** — an AI design protocol (a locked, LLM-safe design system):
+the full shadcn/ui component set as a robust base, themed neutral, and closed down
+so the only expressible choices are correct ones.
 
 ```bash
 npm install @jackbernnie/hiyf

package/dist/components/Image.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Image — the closed, sanctioned way to render an image asset.
+ *
+ * Raw <img> fails the lockdown lint (it is an off-system escape hatch). This is
+ * its one home: every image on screen goes through here. There is no
+ * className/style escape hatch — size with width/height, shape with radius,
+ * control object-fit with fit.
+ */
+declare const RADIUS: {
+    readonly none: "rounded-none";
+    readonly s: "rounded-sm";
+    readonly m: "rounded-md";
+    readonly l: "rounded-lg";
+    readonly xl: "rounded-xl";
+    readonly full: "rounded-full";
+};
+declare const FIT: {
+    readonly cover: "object-cover";
+    readonly contain: "object-contain";
+    readonly fill: "object-fill";
+    readonly none: "object-none";
+};
+export type ImageRadius = keyof typeof RADIUS;
+export type ImageFit = keyof typeof FIT;
+export type ImageProps = {
+    src: string;
+    /** Always required — describe the image, or pass "" for decorative images. */
+    alt: string;
+    width?: number;
+    height?: number;
+    radius?: ImageRadius;
+    fit?: ImageFit;
+    loading?: 'lazy' | 'eager';
+};
+export declare function Image({ src, alt, width, height, radius, fit, loading, }: ImageProps): import("react").JSX.Element;
+export {};

package/dist/components/Image.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../lib/utils.js';
+
+const RADIUS = {
+  none: "rounded-none",
+  s: "rounded-sm",
+  m: "rounded-md",
+  l: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full"
+};
+const FIT = {
+  cover: "object-cover",
+  contain: "object-contain",
+  fill: "object-fill",
+  none: "object-none"
+};
+function Image({
+  src,
+  alt,
+  width,
+  height,
+  radius = "none",
+  fit = "cover",
+  loading = "lazy"
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      width,
+      height,
+      loading,
+      className: cn("inline-block max-w-full", RADIUS[radius], FIT[fit])
+    }
+  );
+}
+
+export { Image };

package/dist/index.d.ts

@@ -60,6 +60,8 @@ export { Spinner } from './components/Spinner';
 export type { SpinnerProps } from './components/Spinner';
 export { Avatar } from './components/Avatar';
 export type { AvatarProps } from './components/Avatar';
+export { Image } from './components/Image';
+export type { ImageProps, ImageRadius, ImageFit } from './components/Image';
 export { Kbd } from './components/Kbd';
 export type { KbdProps } from './components/Kbd';
 export { Empty } from './components/Empty';

package/dist/index.js

@@ -29,6 +29,7 @@ export { Progress } from './components/Progress.js';
 export { Skeleton } from './components/Skeleton.js';
 export { Spinner } from './components/Spinner.js';
 export { Avatar } from './components/Avatar.js';
+export { Image } from './components/Image.js';
 export { Kbd } from './components/Kbd.js';
 export { Empty } from './components/Empty.js';
 export { Toaster } from './components/Toaster.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jackbernnie/hiyf",
-  "version": "0.2.0",
-  "description": "human-in-your-face — a personal, LLM-safe design system. Forked from Polar's Orbit (Apache-2.0).",
+  "version": "0.3.0",
+  "description": "human-in-your-face — an AI design protocol (a locked, LLM-safe design system). Forked from Polar's Orbit (Apache-2.0).",
   "license": "Apache-2.0",
   "type": "module",
   "sideEffects": [