@jackbernnie/hiyf 0.1.0

package/LICENSE

@@ -0,0 +1,191 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+
+   Copyright 2023 Polar Software Inc
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/NOTICE

@@ -0,0 +1,12 @@
+This project includes code forked from Polar's "Orbit" design system.
+
+  Original source: https://github.com/polarsource/polar
+    (clients/packages/orbit)
+  Original author:  Polar Software Inc.
+  License:          Apache License 2.0 (see LICENSE)
+
+Background on the original design system:
+  https://polar.sh/blog/orbit-llm-safe-design-system
+
+Modifications have been made for use as a standalone, personal design system.
+The original Apache-2.0 license and this attribution are retained as required.

package/README.md

@@ -0,0 +1,47 @@
+# @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.
+
+```bash
+npm install @jackbernnie/hiyf
+npm install -D hiyf-eslint-config   # the "lockdown" rules (recommended)
+```
+
+```css
+/* global CSS — no StyleX/bundler plugin needed; styles ship precompiled */
+@import "tailwindcss";
+@import "@jackbernnie/hiyf/theme.css";    /* design tokens (light/dark) */
+@import "@jackbernnie/hiyf/styles.css";   /* precompiled primitive styles */
+@source "../node_modules/@jackbernnie/hiyf/dist";  /* let Tailwind see the component classes */
+```
+
+```tsx
+import { Box, Text, Button, Card } from '@jackbernnie/hiyf'
+
+<Box flexDirection="column" gap="m" padding="l" backgroundColor="background-card" borderRadius="m">
+  <Text variant="heading-s">Invoices</Text>
+  <Button intent="primary">New invoice</Button>
+</Box>
+```
+
+- **Components** — closed wrappers over shadcn/ui with intent-named, enumerated
+  props and no `className`/`style` escape hatch.
+- **`Box` / `Text` primitives** — token-only props (`padding="l"`,
+  `variant="heading-s"`). Their styles are **precompiled** (StyleX → static CSS
+  at publish time), so consumers need **no StyleX bundler plugin** — just import
+  `@jackbernnie/hiyf/styles.css`.
+- **Theme** — `@jackbernnie/hiyf/theme.css` (neutral radix-vega tokens, light + dark).
+
+Pair with [`hiyf-eslint-config`](https://www.npmjs.com/package/hiyf-eslint-config)
+to make off-system code (raw elements, arbitrary Tailwind, inline styles) **fail
+the build** — which is what makes it safe to generate UI with an LLM.
+
+Ships compiled JS + types + CSS; works in Vite, Next.js (App Router — `'use client'`
+directives are preserved), and any bundler. Full setup: see the repository's
+`USAGE.md`.
+
+## Attribution
+
+Forked from Polar's "Orbit" design system (Apache-2.0). See `LICENSE`/`NOTICE`.

package/dist/components/Accordion.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+/**
+ * Accordion — closed wrapper over shadcn's composable Accordion parts.
+ *
+ * The raw parts accept arbitrary className, free-form children, and any
+ * nesting pattern. This wrapper closes that down by driving the accordion
+ * from a typed `items` data model:
+ *   - `items` is the only way to populate panels; no ad-hoc AccordionItem
+ *     imports needed (or possible) from consumer code.
+ *   - `type` and `collapsible` are the only expressible behaviour knobs,
+ *     matching the Radix root's intent-level props.
+ *   - No `className` or `style` escape hatch on the public API.
+ */
+export interface AccordionItem {
+    /** Unique identifier for the panel; used as the Radix `value`. */
+    value: string;
+    /** Content rendered in the trigger button (text or JSX). */
+    trigger: React.ReactNode;
+    /** Content rendered inside the collapsible panel. */
+    content: React.ReactNode;
+}
+export interface AccordionProps {
+    /** Ordered list of accordion panels. */
+    items: AccordionItem[];
+    /**
+     * Whether one or multiple panels can be open at a time.
+     * Defaults to 'single'.
+     */
+    type?: "single" | "multiple";
+    /**
+     * When `type='single'`, whether the open panel can be collapsed by
+     * clicking its trigger again. Ignored for `type='multiple'`.
+     */
+    collapsible?: boolean;
+    /** Panel value(s) open on first render (uncontrolled). */
+    defaultValue?: string | string[];
+}
+export declare function Accordion({ items, type, collapsible, defaultValue, }: AccordionProps): React.JSX.Element;

package/dist/components/Accordion.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Accordion as Accordion$1, AccordionItem, AccordionTrigger, AccordionContent } from './ui/accordion.js';
+
+function Accordion({
+  items,
+  type = "single",
+  collapsible = false,
+  defaultValue
+}) {
+  if (type === "multiple") {
+    return /* @__PURE__ */ jsx(
+      Accordion$1,
+      {
+        type: "multiple",
+        defaultValue: defaultValue === void 0 ? void 0 : Array.isArray(defaultValue) ? defaultValue : [defaultValue],
+        children: items.map((item) => /* @__PURE__ */ jsxs(AccordionItem, { value: item.value, children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { children: item.trigger }),
+          /* @__PURE__ */ jsx(AccordionContent, { children: item.content })
+        ] }, item.value))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Accordion$1,
+    {
+      type: "single",
+      collapsible,
+      defaultValue: defaultValue === void 0 ? void 0 : Array.isArray(defaultValue) ? defaultValue[0] : defaultValue,
+      children: items.map((item) => /* @__PURE__ */ jsxs(AccordionItem, { value: item.value, children: [
+        /* @__PURE__ */ jsx(AccordionTrigger, { children: item.trigger }),
+        /* @__PURE__ */ jsx(AccordionContent, { children: item.content })
+      ] }, item.value))
+    }
+  );
+}
+
+export { Accordion };

package/dist/components/Alert.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Alert — a closed wrapper over shadcn's Alert primitive.
+ *
+ * shadcn's <Alert> accepts an arbitrary `variant` and `className`, letting any
+ * tone bleed in unchecked. This wrapper closes it:
+ *   - `tone` is named by INTENT (neutral/info/success/warning/danger), not by
+ *     appearance — the same strategy as HIYF's Status chip.
+ *   - A colored left border communicates the tone without arbitrary overrides.
+ *   - NO `className`/`style` escape hatch. Every alert on screen is one of a
+ *     finite, on-brand set of treatments.
+ *   - Need another treatment? Add a `tone` here — a deliberate, reviewable
+ *     change to the design system.
+ */
+declare const alertWrapperVariants: (props?: ({
+    tone?: "danger" | "warning" | "success" | "neutral" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AlertTone = NonNullable<VariantProps<typeof alertWrapperVariants>['tone']>;
+export interface AlertProps {
+    /** Named by intent, not appearance. */
+    tone?: AlertTone;
+    /** Optional heading displayed above the description. */
+    title?: string;
+    /** Alert body / description content. */
+    children: React.ReactNode;
+}
+export declare function Alert({ tone, title, children }: AlertProps): React.JSX.Element;
+export {};

package/dist/components/Alert.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { Alert as Alert$1, AlertTitle, AlertDescription } from './ui/alert.js';
+
+const alertWrapperVariants = cva(
+  "relative w-full border-l-4 [&>div[data-slot=alert]]:border-0 [&>div[data-slot=alert]]:rounded-none",
+  {
+    variants: {
+      tone: {
+        neutral: "border-l-muted-foreground/40",
+        info: "border-l-blue-500",
+        success: "border-l-emerald-500",
+        warning: "border-l-amber-500",
+        danger: "border-l-destructive"
+      }
+    },
+    defaultVariants: { tone: "neutral" }
+  }
+);
+const alertInnerVariants = cva("rounded-none border-0 border-l-0", {
+  variants: {
+    tone: {
+      neutral: "bg-muted/50 text-foreground",
+      info: "bg-blue-500/10 text-blue-700 dark:text-blue-300",
+      success: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+      warning: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
+      danger: "bg-destructive/10 text-destructive"
+    }
+  },
+  defaultVariants: { tone: "neutral" }
+});
+function Alert({ tone = "neutral", title, children }) {
+  return /* @__PURE__ */ jsx("div", { className: alertWrapperVariants({ tone }), children: /* @__PURE__ */ jsxs(Alert$1, { className: alertInnerVariants({ tone }), children: [
+    title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+    /* @__PURE__ */ jsx(AlertDescription, { children })
+  ] }) });
+}
+
+export { Alert };

package/dist/components/AlertDialog.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+/**
+ * AlertDialog — a closed convenience wrapper over the shadcn AlertDialog primitives.
+ *
+ * The raw primitives let callers pass arbitrary className, choose any button
+ * variant, and compose the footer however they like. This wrapper closes that:
+ *   - `tone` maps to intent ('default' or 'danger') instead of exposing raw
+ *     button variants — callers express what the action means, not how it looks.
+ *   - `confirmLabel` / `cancelLabel` drive the two-button footer; no freestyle
+ *     footer slot is offered because alert dialogs have a fixed structural shape.
+ *   - No `className` or `style` escape hatch on any public prop.
+ */
+export interface AlertDialogProps {
+    /** Element that opens the dialog (e.g. a Button). */
+    trigger: React.ReactNode;
+    /** Accessible dialog title. */
+    title: string;
+    /** Explanatory text below the title. */
+    description: string;
+    /** Label for the confirm button; defaults to 'Confirm'. */
+    confirmLabel?: string;
+    /** Label for the cancel button; defaults to 'Cancel'. */
+    cancelLabel?: string;
+    /** Called when the confirm button is clicked. */
+    onConfirm?: () => void;
+    /**
+     * Intent of the confirm action.
+     * 'danger' renders the confirm button in the destructive style to signal
+     * an irreversible or high-risk operation.
+     */
+    tone?: "default" | "danger";
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when the open state should change. */
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function AlertDialog({ trigger, title, description, confirmLabel, cancelLabel, onConfirm, tone, open, onOpenChange, }: AlertDialogProps): React.JSX.Element;

package/dist/components/AlertDialog.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AlertDialog as AlertDialog$1, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from './ui/alert-dialog.js';
+
+function AlertDialog({
+  trigger,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  tone = "default",
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialog$1, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { children: cancelLabel }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            variant: tone === "danger" ? "destructive" : "default",
+            onClick: onConfirm,
+            children: confirmLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+export { AlertDialog };

package/dist/components/AspectRatio.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface AspectRatioProps {
+    /**
+     * Named aspect ratio.
+     * - 'square'   → 1:1
+     * - 'video'    → 16:9
+     * - 'wide'     → 21:9
+     * - 'portrait' → 3:4
+     * Defaults to 'video'.
+     */
+    ratio?: 'square' | 'video' | 'wide' | 'portrait';
+    children: React.ReactNode;
+}
+/** Closed aspect ratio container — no className/style. */
+export declare function AspectRatio({ ratio, children }: AspectRatioProps): React.JSX.Element;

package/dist/components/AspectRatio.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { AspectRatio as AspectRatio$1 } from './ui/aspect-ratio.js';
+
+const RATIO_MAP = {
+  square: 1,
+  video: 16 / 9,
+  wide: 21 / 9,
+  portrait: 3 / 4
+};
+function AspectRatio({ ratio = "video", children }) {
+  return /* @__PURE__ */ jsx(AspectRatio$1, { ratio: RATIO_MAP[ratio], children });
+}
+
+export { AspectRatio };

package/dist/components/Avatar.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/**
+ * Avatar — a closed wrapper over shadcn's Avatar primitive family.
+ *
+ * shadcn's Avatar passes `className` to the root, image, and fallback,
+ * letting consumers override size, shape, and color freely. This wrapper
+ * closes it:
+ *   - `size` is enumerated ('sm'|'md'|'lg') and maps to the ui primitive's
+ *     own `size` data attribute — the only expressible sizes are correct ones.
+ *   - `src`, `alt`, and `fallback` (initials/text) are declared explicitly;
+ *     AvatarImage and AvatarFallback are composed internally.
+ *   - NO `className`/`style` escape hatch. Every avatar on screen is
+ *     one of a finite, on-brand set of treatments.
+ *   - Need another size? Add it to the ui primitive and mirror it here.
+ */
+export interface AvatarProps {
+    /** Image URL. When absent (or on load failure), `fallback` is shown. */
+    src?: string;
+    /** Accessible alt text for the image. */
+    alt?: string;
+    /** Short text (e.g. initials) shown when the image is unavailable. */
+    fallback: string;
+    /** Enumerated size. Defaults to 'md'. */
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function Avatar({ src, alt, fallback, size }: AvatarProps): React.JSX.Element;

package/dist/components/Avatar.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Avatar as Avatar$1, AvatarImage, AvatarFallback } from './ui/avatar.js';
+
+function Avatar({ src, alt, fallback, size = "md" }) {
+  const primitiveSize = size === "md" ? "default" : size;
+  return /* @__PURE__ */ jsxs(Avatar$1, { size: primitiveSize, children: [
+    src && /* @__PURE__ */ jsx(AvatarImage, { src, alt: alt ?? fallback }),
+    /* @__PURE__ */ jsx(AvatarFallback, { children: fallback })
+  ] });
+}
+
+export { Avatar };

package/dist/components/Badge.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export type BadgeTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export interface BadgeProps {
+    /**
+     * Intent of the badge.
+     * - 'neutral'  → muted/secondary style
+     * - 'primary'  → brand/primary style
+     * - 'success'  → green semantic style
+     * - 'warning'  → amber semantic style
+     * - 'danger'   → destructive/red style
+     * - 'info'     → blue semantic style
+     * Defaults to 'neutral'.
+     */
+    tone?: BadgeTone;
+    children: React.ReactNode;
+}
+/** Closed intent-named badge — no className/style. */
+export declare function Badge({ tone, children }: BadgeProps): React.JSX.Element;

package/dist/components/Badge.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { Badge as Badge$1 } from './ui/badge.js';
+
+const TONE_MAP = {
+  neutral: { variant: "secondary" },
+  primary: { variant: "default" },
+  success: { variant: "outline", className: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" },
+  warning: { variant: "outline", className: "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400" },
+  danger: { variant: "destructive" },
+  info: { variant: "outline", className: "border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400" }
+};
+function Badge({ tone = "neutral", children }) {
+  const config = TONE_MAP[tone];
+  return /* @__PURE__ */ jsx(Badge$1, { variant: config.variant, className: config.className, children });
+}
+
+export { Badge };

package/dist/components/Box.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { BoxStyleProps } from '../utils/types';
+type BoxElement = 'div' | 'span' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'header' | 'footer' | 'form' | 'fieldset' | 'label' | 'ul' | 'ol' | 'li';
+type BoxOwnProps<E extends BoxElement = 'div'> = BoxStyleProps & {
+    as?: E;
+    className?: string;
+    children?: React.ReactNode;
+};
+export type BoxProps<E extends BoxElement = 'div'> = BoxOwnProps<E> & Omit<React.ComponentPropsWithoutRef<E>, keyof BoxOwnProps<E>>;
+export declare const Box: <E extends BoxElement = "div">(props: BoxProps<E> & {
+    ref?: React.ForwardedRef<HTMLElement>;
+}) => React.ReactElement | null;
+export {};

package/dist/components/Box.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as stylex from '@stylexjs/stylex';
+import React__default, { useId } from 'react';
+import { BOX_STYLE_PROP_KEYS, resolveBoxStyles } from '../utils/resolvers.js';
+
+const NON_FLEX_DEFAULT_ELEMENTS = /* @__PURE__ */ new Set(["span", "label", "li"]);
+function BoxInner({
+  as,
+  className,
+  children,
+  style: styleProp,
+  ...rest
+}, ref) {
+  const id = useId();
+  const scopeClass = `ds${id.replace(/:/g, "")}`;
+  const Component = as || "div";
+  const styleProps = {};
+  const domProps = {};
+  for (const [key, value] of Object.entries(rest)) {
+    if (BOX_STYLE_PROP_KEYS.has(key)) {
+      styleProps[key] = value;
+    } else {
+      domProps[key] = value;
+    }
+  }
+  if (styleProps.display === void 0 && !NON_FLEX_DEFAULT_ELEMENTS.has(as ?? "div")) {
+    styleProps.display = "flex";
+  }
+  const {
+    stylexStyles,
+    inlineStyle,
+    responsiveCSS
+  } = resolveBoxStyles(styleProps, scopeClass);
+  const sx = stylexStyles.length > 0 ? stylex.props(...stylexStyles) : null;
+  const mergedStyle = {
+    ...sx?.style ?? {},
+    ...inlineStyle,
+    ...styleProp
+  };
+  const hasStyle = Object.keys(mergedStyle).length > 0;
+  const classes = [sx?.className ?? null, responsiveCSS ? scopeClass : null, className].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    responsiveCSS && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: {
+      __html: responsiveCSS
+    } }),
+    /* @__PURE__ */ jsx(Component, { ref, className: classes, style: hasStyle ? mergedStyle : void 0, ...domProps, children })
+  ] });
+}
+const Box = React__default.forwardRef(BoxInner);
+
+export { Box };