@nous-research/ui 0.14.0 → 0.14.2

package/README.md

@@ -13,6 +13,22 @@ import the global styles in your app's root css file:
 @import '@nous-research/ui/styles/globals.css';
 ```
 
+`globals.css` includes the design-system tokens, utilities, component styles,
+and default `--font-*` variable values, but does not register font files.
+Import the optional font stylesheet first if your app wants CSS-managed
+`@font-face` declarations:
+
+```css
+@import 'tailwindcss';
+@import '@nous-research/ui/styles/fonts.css';
+@import '@nous-research/ui/styles/globals.css';
+```
+
+Next.js apps should prefer `next/font/local` with the exported
+`@nous-research/ui/fonts/*` files and map them to the same `--font-*`
+variables. Apps can also provide their own `--font-*` variables while keeping
+the design-system utilities from `globals.css`.
+
 ## usage
 
 everything exports from the top level export:

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { BlendMode, useBlendMode, withBlendMode } from './ui/components/blend-mo
 export type { BlendModeProps } from './ui/components/blend-mode';
 export { Blink } from './ui/components/blink';
 export { Button } from './ui/components/button';
+export { Checkbox } from './ui/components/checkbox';
 export { CommandBlock, CopyButton } from './ui/components/command-block';
 export { Cursor } from './ui/components/cursor';
 export { DropdownMenu } from './ui/components/dropdown-menu';

package/dist/index.js

@@ -5,6 +5,7 @@ export { NousGirlBadge } from "./ui/components/badges/nous-girl.js";
 export { BlendMode, useBlendMode, withBlendMode } from "./ui/components/blend-mode.js";
 export { Blink } from "./ui/components/blink.js";
 export { Button } from "./ui/components/button.js";
+export { Checkbox } from "./ui/components/checkbox.js";
 export { CommandBlock, CopyButton } from "./ui/components/command-block.js";
 export { Cursor } from "./ui/components/cursor.js";
 export { DropdownMenu } from "./ui/components/dropdown-menu.js";

package/dist/ui/build.css

@@ -1,3 +1,4 @@
 @import "tailwindcss";
 @source "../";
+@import "./fonts.css";
 @import "./globals.css";

package/dist/ui/components/checkbox.d.ts

@@ -0,0 +1,2 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/ui/components/checkbox.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { forwardRef } from "react";
+import { cn } from "../../utils/index.js";
+import { CheckIcon } from "./icons/check.js";
+export const Checkbox = forwardRef(function Checkbox2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      className: cn(
+        "peer flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center border transition-colors outline-none",
+        "focus-visible:ring-1 focus-visible:ring-midground/30",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=unchecked]:border-midground/20 data-[state=unchecked]:bg-background",
+        "data-[state=unchecked]:hover:border-midground/30",
+        "data-[state=checked]:border-midground/30 data-[state=checked]:bg-midground/15",
+        "data-[state=indeterminate]:border-midground/30 data-[state=indeterminate]:bg-midground/15",
+        className
+      ),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3 text-midground" }) })
+    }
+  );
+});

package/dist/ui/components/icons/check.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare function CheckIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/ui/components/icons/check.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+export function CheckIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { fill: "none", viewBox: "0 0 12 12", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M10.28 2.22a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L1.72 6.28a.75.75 0 1 1 1.06-1.06L4.5 6.94l4.72-4.72a.75.75 0 0 1 1.06 0Z",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }
+  ) });
+}

package/dist/ui/components/icons/index.d.ts

@@ -1,4 +1,5 @@
 export * from './arrow';
+export * from './check';
 export * from './chevron';
 export * from './discord';
 export * from './eye';

package/dist/ui/components/icons/index.js

@@ -1,4 +1,5 @@
 export * from "./arrow.js";
+export * from "./check.js";
 export * from "./chevron.js";
 export * from "./discord.js";
 export * from "./eye.js";

package/dist/ui/globals.css

@@ -1,5 +1,4 @@
 @source ".";
-@import './fonts.css';
 @import './components/fit-text/fit-text.css' layer(components);
 @import './components/grid/grid.css' layer(components);
 @import './components/modal/modal.css' layer(components);
@@ -145,6 +144,11 @@
   --foreground: color-mix(in srgb, #fff 100%, transparent);
   --foreground-base: #fff;
   --foreground-alpha: 1;
+  --font-sans: 'Collapse', sans-serif;
+  --font-mono: 'Courier Prime', monospace;
+  --font-rules-compressed: 'Rules Compressed', sans-serif;
+  --font-rules-expanded: 'Rules Expanded', sans-serif;
+  --font-mondwest: 'Mondwest', sans-serif;
   --vsq: calc(0.5vw + 0.5vh);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nous-research/ui",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "type": "module",
   "license": "MIT",
   "sideEffects": [
@@ -35,6 +35,7 @@
     },
     "./fonts/*": "./dist/fonts/*",
     "./assets/*": "./dist/assets/*",
+    "./styles/fonts.css": "./dist/ui/fonts.css",
     "./styles/globals.css": "./dist/ui/globals.css"
   },
   "scripts": {
@@ -49,6 +50,7 @@
   },
   "dependencies": {
     "@nanostores/react": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "nanostores": "^1.3.0",