@kennycorrea/ui 0.1.0 → 0.1.1

package/README.md

@@ -83,6 +83,29 @@ load-bearing** — scales define `--gray-*` literally and `base.css` remaps it o
 `grayColor`, so `base.css` must come last. Adding an accent to `ACCENTS` means adding its scale
 in every app that offers it, or it resolves to nothing.
 
+## ⚠ 0.1.0 was broken for any Node consumer
+
+**Fixed in 0.1.1.** The package compiled with `moduleResolution: bundler`, which leaves relative
+imports extensionless in the output — `export * from './atoms'`. Vite resolves that happily, so
+every build passed and the linked `file:../ui` setup never complained. **Node does not support
+directory imports**, so the moment the package was installed from the registry it failed:
+
+    Directory import '…/@kennycorrea/ui/dist/atoms' is not supported
+    resolving ES modules imported from …/@kennycorrea/ui/dist/index.js
+
+It surfaced in the dashboard's Vitest run, which resolves dependencies with Node semantics. A
+bundler-only consumer would never have noticed, which is why it shipped.
+
+The fix is the rule this project already applies in `api/`, whose own brief states it: **an
+explicit `.js` on every relative import**, and `/index.js` for a directory. `tsconfig.json` is now
+`moduleResolution: nodenext`, so `tsc` *refuses* the extensionless form — verified by putting one
+back and watching it error — rather than silently emitting it again.
+
+⚠ **The lesson is about what "the build passes" is worth.** Three apps built, 46 tests passed and
+a browser check confirmed the styling, all while the package was unimportable by Node. Nothing was
+wrong with those checks; they simply all went through the same bundler. The first consumer with
+different resolution semantics found it immediately.
+
 ## Releasing
 
 `npm run build` compiles to `dist/` with type declarations. The version in `package.json` is the

package/dist/atoms/Avatar/Avatar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar as ThemedAvatar } from '@radix-ui/themes';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 /** Two letters from the name, which is all a small circle has room for. */
 function initialsOf(name) {
     if (!name)

package/dist/atoms/Avatar/index.d.ts

@@ -1 +1 @@
-export * from './Avatar';
+export * from './Avatar.js';

package/dist/atoms/Avatar/index.js

@@ -1 +1 @@
-export * from './Avatar';
+export * from './Avatar.js';

package/dist/atoms/Badge/index.d.ts

@@ -1 +1 @@
-export * from './Badge';
+export * from './Badge.js';

package/dist/atoms/Badge/index.js

@@ -1 +1 @@
-export * from './Badge';
+export * from './Badge.js';

package/dist/atoms/Button/Button.d.ts

@@ -1,2 +1,2 @@
-import type { ButtonProps } from './Button.types';
+import type { ButtonProps } from './Button.types.js';
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/atoms/Button/Button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as ThemedButton } from '@radix-ui/themes';
 import { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 /**
  * Upfront's intents, expressed in Radix Themes' variant-and-colour vocabulary.
  *

package/dist/atoms/Button/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Button';
-export * from './Button.types';
+export * from './Button.js';
+export * from './Button.types.js';

package/dist/atoms/Button/index.js

@@ -1,2 +1,2 @@
-export * from './Button';
-export * from './Button.types';
+export * from './Button.js';
+export * from './Button.types.js';

package/dist/atoms/Card/Card.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card as ThemedCard } from '@radix-ui/themes';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 /**
  * Radix Themes' Card, with the padding taken off.
  *

package/dist/atoms/Card/index.d.ts

@@ -1 +1 @@
-export * from './Card';
+export * from './Card.js';

package/dist/atoms/Card/index.js

@@ -1 +1 @@
-export * from './Card';
+export * from './Card.js';

package/dist/atoms/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox as ThemedCheckbox } from '@radix-ui/themes';
 import { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 /**
  * A checkbox, for a list where several answers are true at once.
  *

package/dist/atoms/Checkbox/index.d.ts

@@ -1 +1 @@
-export * from './Checkbox';
+export * from './Checkbox.js';

package/dist/atoms/Checkbox/index.js

@@ -1 +1 @@
-export * from './Checkbox';
+export * from './Checkbox.js';

package/dist/atoms/ContextMenu/index.d.ts

@@ -1 +1 @@
-export * from './ContextMenu';
+export * from './ContextMenu.js';

package/dist/atoms/ContextMenu/index.js

@@ -1 +1 @@
-export * from './ContextMenu';
+export * from './ContextMenu.js';

package/dist/atoms/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog as ThemedDialog } from '@radix-ui/themes';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 /**
  * Themes' dialog, laid out the way Upfront's are: a titled header, a body, and a rule above
  * the actions.

package/dist/atoms/Dialog/index.d.ts

@@ -1 +1 @@
-export * from './Dialog';
+export * from './Dialog.js';

package/dist/atoms/Dialog/index.js

@@ -1 +1 @@
-export * from './Dialog';
+export * from './Dialog.js';

package/dist/atoms/Icon/Icon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 /**
  * The handful of icons this app actually uses, drawn inline.
  *

package/dist/atoms/Icon/index.d.ts

@@ -1 +1 @@
-export * from './Icon';
+export * from './Icon.js';

package/dist/atoms/Icon/index.js

@@ -1 +1 @@
-export * from './Icon';
+export * from './Icon.js';

package/dist/atoms/Input/Input.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextField } from '@radix-ui/themes';
 import { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 const SIZES = { sm: '1', md: '2', lg: '3' };
 export const Input = forwardRef(function Input({ size = 'md', invalid = false, className, ...props }, ref) {
     return (_jsx(TextField.Root, { ref: ref, size: SIZES[size], 

package/dist/atoms/Input/index.d.ts

@@ -1 +1 @@
-export * from './Input';
+export * from './Input.js';

package/dist/atoms/Input/index.js

@@ -1 +1 @@
-export * from './Input';
+export * from './Input.js';

package/dist/atoms/Label/Label.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '@radix-ui/themes';
 import { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 /**
  * Themes' `Text` rendered as a label, so field labels sit on the same type scale as
  * everything else.

package/dist/atoms/Label/index.d.ts

@@ -1 +1 @@
-export * from './Label';
+export * from './Label.js';

package/dist/atoms/Label/index.js

@@ -1 +1 @@
-export * from './Label';
+export * from './Label.js';

package/dist/atoms/Popover/Popover.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover as ThemedPopover } from '@radix-ui/themes';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 /**
  * A popover rather than a dropdown menu: the contents are things to read — the bell feed —
  * not commands to run, and a menu's roving focus would make arrow keys skip past text

package/dist/atoms/Popover/index.d.ts

@@ -1 +1 @@
-export * from './Popover';
+export * from './Popover.js';

package/dist/atoms/Popover/index.js

@@ -1 +1 @@
-export * from './Popover';
+export * from './Popover.js';

package/dist/atoms/Progress/Progress.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Progress as ThemedProgress } from '@radix-ui/themes';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 export function Progress({ value, label, color = 'jade', className }) {
     return (_jsx(ThemedProgress
     // Rounded for the announcement, clamped for both: turnover can genuinely pass its

package/dist/atoms/Progress/index.d.ts

@@ -1 +1 @@
-export * from './Progress';
+export * from './Progress.js';

package/dist/atoms/Progress/index.js

@@ -1 +1 @@
-export * from './Progress';
+export * from './Progress.js';

package/dist/atoms/Select/Select.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as ThemedSelect } from '@radix-ui/themes';
 import { forwardRef } from 'react';
-import { useUiStrings } from '../../strings';
-import { cn } from '../../utils/cn';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
 /**
  * Themes' Select, which is its own styling of the same Radix primitive this used to wrap by
  * hand — the chevron, the popper, the checked item and the scroll buttons all come with it.

package/dist/atoms/Select/index.d.ts

@@ -1 +1 @@
-export * from './Select';
+export * from './Select.js';

package/dist/atoms/Select/index.js

@@ -1 +1 @@
-export * from './Select';
+export * from './Select.js';

package/dist/atoms/Separator/Separator.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Separator as ThemedSeparator } from '@radix-ui/themes';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 export function Separator({ orientation = 'horizontal', className }) {
     return _jsx(ThemedSeparator, { orientation: orientation, size: "4", className: cn(className) });
 }

package/dist/atoms/Separator/index.d.ts

@@ -1 +1 @@
-export * from './Separator';
+export * from './Separator.js';

package/dist/atoms/Separator/index.js

@@ -1 +1 @@
-export * from './Separator';
+export * from './Separator.js';

package/dist/atoms/Spinner/Spinner.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Spinner as ThemedSpinner } from '@radix-ui/themes';
-import { useUiStrings } from '../../strings';
-import { cn } from '../../utils/cn';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
 /**
  * Themes' spinner, wrapped so it still announces itself.
  *

package/dist/atoms/Spinner/index.d.ts

@@ -1 +1 @@
-export * from './Spinner';
+export * from './Spinner.js';

package/dist/atoms/Spinner/index.js

@@ -1 +1 @@
-export * from './Spinner';
+export * from './Spinner.js';

package/dist/atoms/Switch/Switch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Switch as ThemedSwitch } from '@radix-ui/themes';
 import { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 export const Switch = forwardRef(function Switch({ className, ...props }, ref) {
     return _jsx(ThemedSwitch, { ref: ref, size: "2", className: cn(className), ...props });
 });

package/dist/atoms/Switch/index.d.ts

@@ -1 +1 @@
-export * from './Switch';
+export * from './Switch.js';

package/dist/atoms/Switch/index.js

@@ -1 +1 @@
-export * from './Switch';
+export * from './Switch.js';

package/dist/atoms/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextArea } from '@radix-ui/themes';
 import { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 export const Textarea = forwardRef(function Textarea({ invalid = false, className, rows = 3, ...props }, ref) {
     return (_jsx(TextArea, { ref: ref, rows: rows, size: "2", color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('w-full', className), ...props }));
 });

package/dist/atoms/Textarea/index.d.ts

@@ -1 +1 @@
-export * from './Textarea';
+export * from './Textarea.js';

package/dist/atoms/Textarea/index.js

@@ -1 +1 @@
-export * from './Textarea';
+export * from './Textarea.js';

package/dist/atoms/Tooltip/index.d.ts

@@ -1 +1 @@
-export * from './Tooltip';
+export * from './Tooltip.js';

package/dist/atoms/Tooltip/index.js

@@ -1 +1 @@
-export * from './Tooltip';
+export * from './Tooltip.js';

package/dist/atoms/index.d.ts

@@ -1,18 +1,18 @@
-export * from './Avatar';
-export * from './Badge';
-export * from './Button';
-export * from './Card';
-export * from './Checkbox';
-export * from './ContextMenu';
-export * from './Dialog';
-export * from './Icon';
-export * from './Input';
-export * from './Label';
-export * from './Popover';
-export * from './Progress';
-export * from './Select';
-export * from './Separator';
-export * from './Spinner';
-export * from './Switch';
-export * from './Textarea';
-export * from './Tooltip';
+export * from './Avatar/index.js';
+export * from './Badge/index.js';
+export * from './Button/index.js';
+export * from './Card/index.js';
+export * from './Checkbox/index.js';
+export * from './ContextMenu/index.js';
+export * from './Dialog/index.js';
+export * from './Icon/index.js';
+export * from './Input/index.js';
+export * from './Label/index.js';
+export * from './Popover/index.js';
+export * from './Progress/index.js';
+export * from './Select/index.js';
+export * from './Separator/index.js';
+export * from './Spinner/index.js';
+export * from './Switch/index.js';
+export * from './Textarea/index.js';
+export * from './Tooltip/index.js';

package/dist/atoms/index.js

@@ -1,18 +1,18 @@
-export * from './Avatar';
-export * from './Badge';
-export * from './Button';
-export * from './Card';
-export * from './Checkbox';
-export * from './ContextMenu';
-export * from './Dialog';
-export * from './Icon';
-export * from './Input';
-export * from './Label';
-export * from './Popover';
-export * from './Progress';
-export * from './Select';
-export * from './Separator';
-export * from './Spinner';
-export * from './Switch';
-export * from './Textarea';
-export * from './Tooltip';
+export * from './Avatar/index.js';
+export * from './Badge/index.js';
+export * from './Button/index.js';
+export * from './Card/index.js';
+export * from './Checkbox/index.js';
+export * from './ContextMenu/index.js';
+export * from './Dialog/index.js';
+export * from './Icon/index.js';
+export * from './Input/index.js';
+export * from './Label/index.js';
+export * from './Popover/index.js';
+export * from './Progress/index.js';
+export * from './Select/index.js';
+export * from './Separator/index.js';
+export * from './Spinner/index.js';
+export * from './Switch/index.js';
+export * from './Textarea/index.js';
+export * from './Tooltip/index.js';

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export * from './atoms';
-export * from './strings';
-export * from './utils';
+export * from './atoms/index.js';
+export * from './strings.js';
+export * from './utils/index.js';

package/dist/index.js

@@ -1,3 +1,3 @@
-export * from './atoms';
-export * from './strings';
-export * from './utils';
+export * from './atoms/index.js';
+export * from './strings.js';
+export * from './utils/index.js';

package/dist/utils/index.d.ts

@@ -1,2 +1,2 @@
-export * from './cn';
-export * from './theme';
+export * from './cn.js';
+export * from './theme.js';

package/dist/utils/index.js

@@ -1,2 +1,2 @@
-export * from './cn';
-export * from './theme';
+export * from './cn.js';
+export * from './theme.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
   "private": false,
   "type": "module",