@jackbernnie/hiyf 0.1.3 → 0.1.5

package/AGENTS.md

@@ -96,6 +96,23 @@ ContextMenu. App shell & data viz: Sidebar, Resizable, Chart.
 
 When unsure of a prop, check the component's TypeScript types — every prop is typed.
 
+## Icons
+
+Icons are standardized on **hugeicons** — they ship with this package. **Do NOT
+add `lucide-react`, `react-icons`, or any other icon library.** Render icons with
+the `Icon` component and import glyphs from the package's `/icons` entry:
+
+```tsx
+import { Icon } from '@jackbernnie/hiyf'
+import { Home01Icon, Search01Icon } from '@jackbernnie/hiyf/icons'
+
+<Icon icon={Home01Icon} />                 // size defaults to s (16px)
+<Icon icon={Search01Icon} size="m" color="muted" />
+```
+
+`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`.
+
 ## When something you need doesn't exist
 
 Work through this in order. **Don't get stuck, and don't expand the design system

package/dist/components/Icon.d.ts

@@ -0,0 +1,42 @@
+import { HugeiconsIcon } from "@hugeicons/react";
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+/**
+ * Icon — the design system's single icon primitive. The whole system is built on
+ * **hugeicons**; this is the on-system way to render one. Import glyphs from
+ * `@jackbernnie/hiyf/icons` (a re-export of @hugeicons/core-free-icons), so there
+ * is no separate install and no reason to reach for lucide or another icon lib.
+ *
+ *   import { Icon } from '@jackbernnie/hiyf'
+ *   import { Home01Icon } from '@jackbernnie/hiyf/icons'
+ *   <Icon icon={Home01Icon} size="s" />
+ *
+ * `size` is a token; `color` is enumerated and defaults to `current` (inherits
+ * the surrounding text color, so icons inside buttons/links just work). No
+ * className/style escape hatch.
+ */
+declare const SIZE: {
+    readonly xs: 12;
+    readonly s: 16;
+    readonly m: 20;
+    readonly l: 24;
+    readonly xl: 32;
+};
+export type IconSize = keyof typeof SIZE;
+declare const iconVariants: (props?: ({
+    color?: "current" | "muted" | "accent" | "danger" | "warning" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconColor = NonNullable<VariantProps<typeof iconVariants>["color"]>;
+export interface IconProps {
+    /** A hugeicons glyph, e.g. imported from `@jackbernnie/hiyf/icons`. */
+    icon: React.ComponentProps<typeof HugeiconsIcon>["icon"];
+    /** Token size. Defaults to `s` (16px) — the common inline size. */
+    size?: IconSize;
+    /** Color intent. Defaults to `current` (inherits surrounding text color). */
+    color?: IconColor;
+    strokeWidth?: number;
+    "aria-label"?: string;
+    "aria-hidden"?: boolean;
+}
+export declare function Icon({ icon, size, color, strokeWidth, ...a11y }: IconProps): React.JSX.Element;
+export {};

package/dist/components/Icon.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { cva } from 'class-variance-authority';
+
+const SIZE = { xs: 12, s: 16, m: 20, l: 24, xl: 32 };
+const iconVariants = cva("shrink-0", {
+  variants: {
+    color: {
+      current: "",
+      muted: "text-muted-foreground",
+      accent: "text-primary",
+      success: "text-emerald-600 dark:text-emerald-400",
+      warning: "text-amber-600 dark:text-amber-400",
+      danger: "text-destructive"
+    }
+  },
+  defaultVariants: { color: "current" }
+});
+function Icon({
+  icon,
+  size = "s",
+  color,
+  strokeWidth = 2,
+  ...a11y
+}) {
+  return /* @__PURE__ */ jsx(
+    HugeiconsIcon,
+    {
+      icon,
+      size: SIZE[size],
+      strokeWidth,
+      className: iconVariants({ color }),
+      ...a11y
+    }
+  );
+}
+
+export { Icon };

package/dist/components/ui/card.js

@@ -12,7 +12,7 @@ function Card({
       "data-slot": "card",
       "data-size": size,
       className: cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card px-(--card-spacing) py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       ),
       ...props
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }) {
     {
       "data-slot": "card-header",
       className: cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
         className
       ),
       ...props
@@ -60,7 +60,7 @@ function CardContent({ className, ...props }) {
     "div",
     {
       "data-slot": "card-content",
-      className: cn("px-(--card-spacing)", className),
+      className: cn(className),
       ...props
     }
   );
@@ -71,7 +71,7 @@ function CardFooter({ className, ...props }) {
     {
       "data-slot": "card-footer",
       className: cn(
-        "flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)",
+        "flex items-center rounded-b-xl [.border-t]:pt-(--card-spacing)",
         className
       ),
       ...props

package/dist/icons.d.ts

@@ -0,0 +1 @@
+export * from "@hugeicons/core-free-icons";

package/dist/icons.js

@@ -0,0 +1 @@
+export * from '@hugeicons/core-free-icons';

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export { GridItem } from './components/GridItem';
 export type { GridItemProps } from './components/GridItem';
 export type { GridLine, GridPlacement } from './utils/grid';
 export { createText } from './primitives/createText';
+export { Icon } from './components/Icon';
+export type { IconProps, IconSize, IconColor } from './components/Icon';
 export { Button } from './components/Button';
 export type { ButtonProps, ButtonIntent, ButtonSize } from './components/Button';
 export { ButtonGroup } from './components/ButtonGroup';

package/dist/index.js

@@ -3,6 +3,7 @@ export { Text } from './components/Text.js';
 export { Grid } from './components/Grid.js';
 export { GridItem } from './components/GridItem.js';
 export { createText } from './primitives/createText.js';
+export { Icon } from './components/Icon.js';
 export { Button } from './components/Button.js';
 export { ButtonGroup } from './components/ButtonGroup.js';
 export { Input } from './components/Input.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackbernnie/hiyf",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "human-in-your-face — a personal, LLM-safe design system. Forked from Polar's Orbit (Apache-2.0).",
   "license": "Apache-2.0",
   "type": "module",
@@ -29,6 +29,10 @@
       "types": "./dist/tokens/tokens.stylex.d.ts",
       "default": "./dist/tokens/tokens.stylex.js"
     },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "default": "./dist/icons.js"
+    },
     "./theme.css": "./src/theme.css",
     "./styles.css": "./dist/stylex.css",
     "./*": {