@jackbernnie/hiyf 0.1.4 → 0.1.6

package/AGENTS.md

@@ -52,6 +52,11 @@ import { Box, Text } from '@jackbernnie/hiyf'
 
 `<Text>` renders all text. Pick a `variant` (a role), never a raw size.
 
+`Card` already has its own padding — drop content straight in (`<Card padding="md">…`),
+no inner wrapper needed. To make cards fill a row and stretch to equal heights,
+put them in `<Box flexDirection="row" gap="l">` and give each `flexGrow={1}` (sizing
+is the layout's job; the card's padding is fixed).
+
 ## Token vocabulary (the entire allowed set)
 
 | Prop | Tokens |

package/dist/components/Chart.d.ts

@@ -13,5 +13,10 @@ export interface ChartProps {
      * @default 'md'
      */
     height?: "sm" | "md" | "lg";
+    /**
+     * Show a legend mapping each series to its color.
+     * @default true when there is more than one category
+     */
+    legend?: boolean;
 }
-export declare function Chart({ type, data, index, categories, height, }: ChartProps): React.JSX.Element;
+export declare function Chart({ type, data, index, categories, height, legend, }: ChartProps): React.JSX.Element;

package/dist/components/Chart.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { LineChart, Line, BarChart, Bar, AreaChart, Area, CartesianGrid, XAxis } from 'recharts';
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from './ui/chart.js';
+import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from './ui/chart.js';
 
 const CHART_COLORS = [
   "var(--chart-1)",
@@ -20,8 +20,10 @@ function Chart({
   data,
   index,
   categories,
-  height = "md"
+  height = "md",
+  legend
 }) {
+  const showLegend = legend ?? categories.length > 1;
   const config = Object.fromEntries(
     categories.map((cat, i) => [
       cat,
@@ -36,12 +38,14 @@ function Chart({
   const grid = /* @__PURE__ */ jsx(CartesianGrid, { vertical: false });
   const xAxis = /* @__PURE__ */ jsx(XAxis, { dataKey: index, tickLine: false, axisLine: false });
   const tooltip = /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) });
+  const legendNode = showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null;
   let chart;
   if (type === "line") {
     chart = /* @__PURE__ */ jsxs(LineChart, { ...commonProps, children: [
       grid,
       xAxis,
       tooltip,
+      legendNode,
       categories.map((cat) => /* @__PURE__ */ jsx(
         Line,
         {
@@ -59,6 +63,7 @@ function Chart({
       grid,
       xAxis,
       tooltip,
+      legendNode,
       categories.map((cat) => /* @__PURE__ */ jsx(
         Bar,
         {
@@ -74,6 +79,7 @@ function Chart({
       grid,
       xAxis,
       tooltip,
+      legendNode,
       categories.map((cat) => /* @__PURE__ */ jsx(
         Area,
         {

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/components/ui/chart.js

@@ -181,6 +181,54 @@ function ChartTooltipContent({
     }
   );
 }
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart();
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      ),
+      children: payload.filter((item) => item.type !== "none").map((item, index) => {
+        const key = `${nameKey ?? item.dataKey ?? "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+            ),
+            children: [
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: item.color
+                  }
+                }
+              ),
+              itemConfig?.label
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+}
 function getPayloadConfigFromPayload(config, payload, key) {
   if (typeof payload !== "object" || payload === null) {
     return void 0;
@@ -195,4 +243,4 @@ function getPayloadConfigFromPayload(config, payload, key) {
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
-export { ChartContainer, ChartStyle, ChartTooltip, ChartTooltipContent };
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackbernnie/hiyf",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "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",
@@ -64,6 +64,7 @@
     "recharts": "^3.8.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
+    "tslib": "^2.8.0",
     "vaul": "^1.1.2"
   },
   "devDependencies": {

package/src/theme.css

@@ -141,11 +141,11 @@
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
   --radius: 0.75rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
@@ -176,11 +176,11 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);