@nuee/registry 0.4.0 → 0.5.0

package/dist/items.js

@@ -1,6 +1,11 @@
 export const registryItems = {
+    heading: {
+        files: ["heading.tsx", "typography.ts"],
+        dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
+        registryDependencies: [],
+    },
     accordion: {
-        files: ["Icon.tsx", "accordion.tsx"],
+        files: ["accordion.tsx"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -35,7 +40,7 @@ export const registryItems = {
         registryDependencies: [],
     },
     breadcrumb: {
-        files: ["Icon.tsx", "breadcrumb.tsx"],
+        files: ["breadcrumb.tsx"],
         dependencies: ["@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -45,7 +50,7 @@ export const registryItems = {
         registryDependencies: [],
     },
     button: {
-        files: ["button.tsx"],
+        files: ["button.tsx", "control-layout.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -59,18 +64,33 @@ export const registryItems = {
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
+    calendar: {
+        files: ["calendar.tsx"],
+        dependencies: ["@daypicker/react", "@nuee/tokens", "@stylexjs/stylex"],
+        registryDependencies: [],
+    },
+    carousel: {
+        files: ["carousel.tsx"],
+        dependencies: [
+            "@nuee/tokens",
+            "@phosphor-icons/react",
+            "@stylexjs/stylex",
+            "embla-carousel-react",
+        ],
+        registryDependencies: ["button"],
+    },
     checkbox: {
-        files: ["Icon.tsx", "checkbox.tsx"],
+        files: ["checkbox.tsx"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
     collapsible: {
-        files: ["Icon.tsx", "collapsible.tsx"],
+        files: ["collapsible.tsx"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
     combobox: {
-        files: ["Icon.tsx", "combobox.tsx"],
+        files: ["combobox.tsx"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -80,17 +100,22 @@ export const registryItems = {
         registryDependencies: ["dropdown-menu"],
     },
     dialog: {
-        files: ["Icon.tsx", "dialog.tsx"],
+        files: ["dialog.tsx"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
+    "date-picker": {
+        files: ["date-picker.tsx"],
+        dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
+        registryDependencies: ["calendar", "popover"],
+    },
     drawer: {
         files: ["drawer.tsx"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
     "dropdown-menu": {
-        files: ["Icon.tsx", "dropdown-menu.tsx"],
+        files: ["dropdown-menu.tsx"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -100,9 +125,9 @@ export const registryItems = {
         registryDependencies: [],
     },
     field: {
-        files: ["field.tsx"],
+        files: ["field.tsx", "typography.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
-        registryDependencies: [],
+        registryDependencies: ["checkbox", "input"],
     },
     "hover-card": {
         files: ["hover-card.tsx"],
@@ -110,7 +135,7 @@ export const registryItems = {
         registryDependencies: [],
     },
     input: {
-        files: ["input.tsx"],
+        files: ["input.tsx", "control-layout.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -125,7 +150,7 @@ export const registryItems = {
         registryDependencies: [],
     },
     "content-row": {
-        files: ["content-row.tsx"],
+        files: ["content-row.tsx", "typography.ts"],
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -135,12 +160,12 @@ export const registryItems = {
         registryDependencies: [],
     },
     label: {
-        files: ["label.tsx"],
+        files: ["label.tsx", "typography.ts"],
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
     link: {
-        files: ["Icon.tsx", "link.tsx"],
+        files: ["link.tsx"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -157,25 +182,20 @@ export const registryItems = {
     message: {
         files: ["message.tsx"],
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
-        registryDependencies: [],
-    },
-    "message-scroller": {
-        files: ["Icon.tsx", "message-scroller.tsx"],
-        dependencies: ["@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
-        registryDependencies: ["button"],
+        registryDependencies: ["avatar", "bubble"],
     },
     "native-select": {
-        files: ["Icon.tsx", "native-select.tsx"],
+        files: ["native-select.tsx"],
         dependencies: ["@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
     "navigation-menu": {
-        files: ["Icon.tsx", "navigation-menu.tsx"],
+        files: ["navigation-menu.tsx"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
     pagination: {
-        files: ["Icon.tsx", "pagination.tsx"],
+        files: ["pagination.tsx"],
         dependencies: ["@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -200,7 +220,7 @@ export const registryItems = {
         registryDependencies: [],
     },
     select: {
-        files: ["Icon.tsx", "select.tsx"],
+        files: ["select.tsx"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -225,10 +245,15 @@ export const registryItems = {
         registryDependencies: [],
     },
     switch: {
-        files: ["switch.tsx"],
+        files: ["switch.tsx", "control-layout.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
+    timeline: {
+        files: ["timeline.tsx"],
+        dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
+        registryDependencies: [],
+    },
     table: {
         files: ["table.tsx"],
         dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
@@ -245,7 +270,7 @@ export const registryItems = {
         registryDependencies: [],
     },
     toast: {
-        files: ["Icon.tsx", "toast.tsx", "toast.stylex.ts"],
+        files: ["toast.tsx", "toast.stylex.ts", "typography.ts"],
         dependencies: ["@base-ui/react", "@nuee/tokens", "@phosphor-icons/react", "@stylexjs/stylex"],
         registryDependencies: [],
     },
@@ -264,9 +289,4 @@ export const registryItems = {
         dependencies: ["@base-ui/react", "@nuee/tokens", "@stylexjs/stylex"],
         registryDependencies: [],
     },
-    typography: {
-        files: ["typography.tsx"],
-        dependencies: ["@nuee/tokens", "@stylexjs/stylex"],
-        registryDependencies: [],
-    },
 };

package/dist/styles/reset.css

@@ -0,0 +1,72 @@
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    min-height: 100%;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+
+  *:not(dialog) {
+    margin: 0;
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.5;
+  }
+
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
+  #root,
+  #__next {
+    isolation: isolate;
+  }
+}

package/dist/tokens/color-palette.stylex.ts

@@ -26,7 +26,7 @@ export const colorPalette = stylex.defineVars({
   primaryContrast: "oklch(24.353% 0 0)",
   primaryContrastDark: "oklch(93.846% 0.0041 121.56)",
   redWeak: "oklch(88.842% 0.0501 22.71)",
-  redWeakDark: "oklch(79.615% 0.1170 24.47 / 24%)",
+  redWeakDark: "oklch(79.615% 0.1170 24.47 / 32%)",
   redMuted: "oklch(82.720% 0.0510 21.28)",
   redMutedDark: "oklch(71.697% 0.1767 23.77)",
   redSolid: "oklch(39.780% 0.1604 22.34)",
@@ -45,7 +45,7 @@ export const colorPalette = stylex.defineVars({
   orangeContrast: "oklch(39.668% 0.0989 54.41)",
   orangeContrastDark: "oklch(87.437% 0.0803 57.28)",
   yellowWeak: "oklch(89.932% 0.0846 84.60)",
-  yellowWeakDark: "oklch(78.635% 0.1457 89.67 / 24%)",
+  yellowWeakDark: "oklch(78.635% 0.1457 89.67 / 32%)",
   yellowMuted: "oklch(82.759% 0.0996 85.33)",
   yellowMutedDark: "oklch(69.931% 0.1403 90)",
   yellowSolid: "oklch(39.679% 0.0811 89.57)",
@@ -55,7 +55,7 @@ export const colorPalette = stylex.defineVars({
   yellowFeedback: "oklch(48.284% 0.0987 90.04)",
   yellowBadge: "oklch(87.026% 0.1672 89.94)",
   greenWeak: "oklch(88.883% 0.0603 141.35)",
-  greenWeakDark: "oklch(77.164% 0.1234 143.03 / 24%)",
+  greenWeakDark: "oklch(77.164% 0.1234 143.03 / 32%)",
   greenMuted: "oklch(82.794% 0.0607 140.55)",
   greenMutedDark: "oklch(68.460% 0.1219 143.49)",
   greenSolid: "oklch(39.780% 0.1319 141.35)",
@@ -74,7 +74,7 @@ export const colorPalette = stylex.defineVars({
   cyanContrast: "oklch(39.727% 0.0705 215.91)",
   cyanContrastDark: "oklch(86.361% 0.0691 217.16)",
   blueWeak: "oklch(88.873% 0.0494 253.08)",
-  blueWeakDark: "oklch(78.788% 0.1067 269.17 / 24%)",
+  blueWeakDark: "oklch(78.788% 0.1067 269.17 / 32%)",
   blueMuted: "oklch(82.782% 0.0497 254.11)",
   blueMutedDark: "oklch(70.325% 0.1529 263.59)",
   blueSolid: "oklch(39.777% 0.1328 255.38)",
@@ -104,6 +104,7 @@ export const colorPalette = stylex.defineVars({
   alphaBlack10: "oklch(0% 0 0 / 10%)",
   alphaBlack20: "oklch(0% 0 0 / 20%)",
   alphaBlack30: "oklch(0% 0 0 / 30%)",
+  alphaBlack40: "oklch(0% 0 0 / 40%)",
   alphaBlack50: "oklch(0% 0 0 / 50%)",
   alphaBlack80: "oklch(0% 0 0 / 80%)",
   alphaWhite5: "oklch(100% 0 0 / 5%)",

package/dist/tokens/semantic.stylex.ts

@@ -6,11 +6,16 @@ export const colorVars = stylex.defineVars({
   bgCanvas: colorPalette.neutral100,
   bgSurface: colorPalette.neutral0,
   bgSurfacePressed: "oklch(97% 0 0)",
+  bgInverse: colorPalette.neutral950,
   bgSubtle: colorPalette.neutral50,
   bgRaised: colorPalette.neutral0,
   bgRaisedPressed: "oklch(97% 0 0)",
+  bgCurrent: colorPalette.alphaBlack6,
+  bgOverlay: colorPalette.alphaBlack40,
+  bgSkeleton: colorPalette.neutral200,
   bgActionPrimary: colorPalette.primarySolid,
   bgActionDestructive: colorPalette.redFeedback,
+  bgMessageOutgoing: colorPalette.primarySolid,
   bgFeedbackInfo: colorPalette.blueWeak,
   bgFeedbackSuccess: colorPalette.greenWeak,
   bgFeedbackWarning: colorPalette.yellowWeak,
@@ -18,10 +23,11 @@ export const colorVars = stylex.defineVars({
   fgPrimary: colorPalette.neutral950,
   fgSecondary: colorPalette.neutral600,
   fgTertiary: colorPalette.neutral500,
-  fgDisabled: colorPalette.alphaBlack50,
+  fgDisabled: colorPalette.neutral500,
   fgInverse: colorPalette.neutral0,
   fgOnActionPrimary: colorPalette.neutral0,
   fgOnActionDestructive: colorPalette.neutral0,
+  fgOnMessageOutgoing: colorPalette.neutral0,
   fgAction: colorPalette.primarySolid,
   fgFeedbackInfo: colorPalette.blueSolid,
   fgFeedbackSuccess: colorPalette.greenFeedback,
@@ -37,16 +43,19 @@ export const colorVars = stylex.defineVars({
   strokeFeedbackError: colorPalette.redMuted,
   interactionDefault: "transparent",
   interactionHover: colorPalette.alphaBlack6,
-  interactionPressed: "oklch(97% 0 0)",
+  // Translucent state layers preserve the underlying surface; press is stronger than hover.
+  interactionPressed: colorPalette.alphaBlack10,
   interactionSolidHover: colorPalette.alphaWhite10,
   interactionSolidPressed: colorPalette.alphaWhite20,
-  interactionSelected: "oklch(97% 0 0)",
+  // Persistent selected surface for segmented controls, matching the explicit light theme.
+  interactionSelected: colorPalette.neutral0,
   interactionDisabled: colorPalette.alphaBlack8,
   interactionFocus: colorPalette.blueBadge,
 });
 
 export const spacingVars = stylex.defineVars({
   space0: "0",
+  space0_5: "0.125rem",
   space1: "0.25rem",
   space2: "0.5rem",
   space3: "0.75rem",
@@ -59,13 +68,19 @@ export const spacingVars = stylex.defineVars({
 });
 
 export const sizeVars = stylex.defineVars({
+  controlXs: "1.5rem",
   controlSm: "2rem",
   controlMd: "2.25rem",
   controlLg: "2.5rem",
+  iconXs: "0.75rem",
   iconSm: "0.875rem",
   iconMd: "1rem",
+  iconLg: "1.25rem",
+  contentXs: "18rem",
   contentSm: "24rem",
   contentMd: "32rem",
+  trackSm: "0.375rem",
+  trackMd: "0.5rem",
   touchTarget: "2.75rem",
   stroke: "0.0625rem",
   focusRing: "0.125rem",
@@ -75,6 +90,7 @@ export const radiusVars = stylex.defineVars({
   sm: "0.375rem",
   md: "0.5rem",
   lg: "0.75rem",
+  xl: "1rem",
   full: "9999px",
 });
 
@@ -84,8 +100,20 @@ export const shadowVars = stylex.defineVars({
   overlay: "0 4px 16px oklch(0% 0 0 / 12%)",
 });
 
+export const layerVars = stylex.defineVars({
+  modalBackdrop: "50",
+  modal: "51",
+  popup: "60",
+  notification: "70",
+});
+
 export const typographyVars = stylex.defineVars({
+  /** @deprecated Use fontFamilyBody or fontFamilyHeading instead. */
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  fontFamilyBody:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  fontFamilyHeading:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
   fontSizeXs: "0.75rem",
   fontSizeSm: "0.875rem",
   fontSizeMd: "1rem",
@@ -99,13 +127,16 @@ export const typographyVars = stylex.defineVars({
 });
 
 export const opacityVars = stylex.defineVars({
-  disabled: "0.8",
+  disabled: "0.6",
 });
 
 export const motionVars = stylex.defineVars({
+  durationInstant: "0.01ms",
   durationFast: "120ms",
   durationNormal: "180ms",
   durationSlow: "240ms",
+  durationLoading: "700ms",
+  durationLoadingReduced: "1.5s",
   easingStandard: "cubic-bezier(0.2, 0, 0, 1)",
   easingEnter: "cubic-bezier(0.16, 1, 0.3, 1)",
   easingExit: "cubic-bezier(0.4, 0, 1, 1)",

package/dist/tokens/themes.stylex.ts

@@ -7,11 +7,16 @@ export const lightColorTheme = stylex.createTheme(colorVars, {
   bgCanvas: colorPalette.neutral100,
   bgSurface: colorPalette.neutral0,
   bgSurfacePressed: "oklch(97% 0 0)",
+  bgInverse: colorPalette.neutral950,
   bgSubtle: colorPalette.neutral50,
   bgRaised: colorPalette.neutral0,
   bgRaisedPressed: "oklch(97% 0 0)",
+  bgCurrent: colorPalette.alphaBlack6,
+  bgOverlay: colorPalette.alphaBlack40,
+  bgSkeleton: colorPalette.neutral200,
   bgActionPrimary: colorPalette.primarySolid,
   bgActionDestructive: colorPalette.redFeedback,
+  bgMessageOutgoing: colorPalette.primarySolid,
   bgFeedbackInfo: colorPalette.blueWeak,
   bgFeedbackSuccess: colorPalette.greenWeak,
   bgFeedbackWarning: colorPalette.yellowWeak,
@@ -19,10 +24,11 @@ export const lightColorTheme = stylex.createTheme(colorVars, {
   fgPrimary: colorPalette.neutral950,
   fgSecondary: colorPalette.neutral600,
   fgTertiary: colorPalette.neutral500,
-  fgDisabled: colorPalette.alphaBlack50,
+  fgDisabled: colorPalette.neutral500,
   fgInverse: colorPalette.neutral0,
   fgOnActionPrimary: colorPalette.neutral0,
   fgOnActionDestructive: colorPalette.neutral0,
+  fgOnMessageOutgoing: colorPalette.neutral0,
   fgAction: colorPalette.primarySolid,
   fgFeedbackInfo: colorPalette.blueSolid,
   fgFeedbackSuccess: colorPalette.greenFeedback,
@@ -38,43 +44,49 @@ export const lightColorTheme = stylex.createTheme(colorVars, {
   strokeFeedbackError: colorPalette.redMuted,
   interactionDefault: "transparent",
   interactionHover: colorPalette.alphaBlack6,
-  interactionPressed: "oklch(97% 0 0)",
+  interactionPressed: colorPalette.alphaBlack10,
   interactionSolidHover: colorPalette.alphaWhite10,
   interactionSolidPressed: colorPalette.alphaWhite20,
-  interactionSelected: "oklch(97% 0 0)",
+  interactionSelected: colorPalette.neutral0,
   interactionDisabled: colorPalette.alphaBlack8,
   interactionFocus: colorPalette.blueBadge,
 });
 
 export const darkColorTheme = stylex.createTheme(colorVars, {
   bgCanvas: colorPalette.neutral950,
-  bgSurface: colorPalette.alphaWhite5,
-  bgSurfacePressed: colorPalette.alphaWhite10,
-  bgSubtle: colorPalette.alphaWhite8,
-  bgRaised: colorPalette.neutral850,
-  bgRaisedPressed: colorPalette.neutral800,
-  bgActionPrimary: colorPalette.primarySolidDark,
+  bgSurface: colorPalette.neutral900,
+  bgSurfacePressed: colorPalette.neutral800,
+  bgInverse: colorPalette.neutral800,
+  bgSubtle: colorPalette.neutral850,
+  bgRaised: colorPalette.neutral800,
+  bgRaisedPressed: colorPalette.neutral700,
+  bgCurrent: colorPalette.alphaWhite8,
+  bgOverlay: colorPalette.alphaBlack40,
+  bgSkeleton: colorPalette.neutral700,
+  bgActionPrimary: colorPalette.neutral100,
   bgActionDestructive: colorPalette.redFeedback,
+  bgMessageOutgoing: colorPalette.neutral100,
   bgFeedbackInfo: colorPalette.blueWeakDark,
   bgFeedbackSuccess: colorPalette.greenWeakDark,
   bgFeedbackWarning: colorPalette.yellowWeakDark,
   bgFeedbackError: colorPalette.redWeakDark,
-  fgPrimary: colorPalette.neutral50,
-  fgSecondary: colorPalette.neutral300,
-  fgTertiary: colorPalette.neutral400,
-  fgDisabled: colorPalette.alphaWhite50,
-  fgInverse: colorPalette.neutral950,
+  fgPrimary: colorPalette.neutral100,
+  fgSecondary: colorPalette.neutral400,
+  fgTertiary: colorPalette.neutral500,
+  fgDisabled: colorPalette.neutral500,
+  fgInverse: colorPalette.neutral200,
   fgOnActionPrimary: colorPalette.neutral950,
-  fgOnActionDestructive: colorPalette.neutral0,
-  fgAction: colorPalette.primaryContrastDark,
+  fgOnActionDestructive: colorPalette.neutral200,
+  fgOnMessageOutgoing: colorPalette.neutral950,
+  fgAction: colorPalette.primarySolidDark,
   fgFeedbackInfo: colorPalette.blueContrastDark,
   fgFeedbackSuccess: colorPalette.greenContrastDark,
   fgFeedbackWarning: colorPalette.yellowContrastDark,
   fgFeedbackError: colorPalette.redContrastDark,
-  strokeDefault: colorPalette.neutral700,
-  strokeStrong: colorPalette.neutral600,
-  strokeFocus: colorPalette.blueSolidDark,
-  strokeAction: colorPalette.primarySolidDark,
+  strokeDefault: colorPalette.neutral800,
+  strokeStrong: colorPalette.neutral700,
+  strokeFocus: colorPalette.blueBadge,
+  strokeAction: colorPalette.neutral100,
   strokeFeedbackInfo: colorPalette.blueMutedDark,
   strokeFeedbackSuccess: colorPalette.greenMutedDark,
   strokeFeedbackWarning: colorPalette.yellowMutedDark,
@@ -84,9 +96,9 @@ export const darkColorTheme = stylex.createTheme(colorVars, {
   interactionPressed: colorPalette.alphaWhite10,
   interactionSolidHover: colorPalette.alphaBlack10,
   interactionSolidPressed: colorPalette.alphaBlack20,
-  interactionSelected: colorPalette.primaryWeakDark,
-  interactionDisabled: colorPalette.alphaWhite10,
-  interactionFocus: colorPalette.blueSolidDark,
+  interactionSelected: colorPalette.neutral800,
+  interactionDisabled: colorPalette.neutral700,
+  interactionFocus: colorPalette.blueBadge,
 });
 
 export const lightShadowTheme = stylex.createTheme(shadowVars, {
@@ -96,7 +108,7 @@ export const lightShadowTheme = stylex.createTheme(shadowVars, {
 });
 
 export const darkShadowTheme = stylex.createTheme(shadowVars, {
-  subtle: "0 1px 4px oklch(0% 0 0 / 50%)",
-  floating: "0 2px 10px oklch(0% 0 0 / 68%)",
-  overlay: "0 4px 16px oklch(0% 0 0 / 80%)",
+  subtle: "0 0 0 1px oklch(100% 0 0 / 6%), 0 1px 4px oklch(0% 0 0 / 36%)",
+  floating: "0 0 0 1px oklch(100% 0 0 / 8%), 0 8px 24px oklch(0% 0 0 / 52%)",
+  overlay: "0 0 0 1px oklch(100% 0 0 / 10%), 0 16px 40px oklch(0% 0 0 / 64%)",
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuee/registry",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@types/node": "^22.20.1",
+    "@types/node": "26.4.1",
     "typescript": "7.0.2"
   },
   "scripts": {

package/dist/items/message-scroller.json

@@ -1,21 +0,0 @@
-{
-  "name": "message-scroller",
-  "primaryExport": "MessageScroller",
-  "files": [
-    {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport { type ComponentProps, type ReactNode, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"./button\";\nimport { Icon } from \"./Icon\";\nimport { colorVars, motionVars, radiusVars, spacingVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { minHeight: 0, overflow: \"hidden\", position: \"relative\" },\n  viewport: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    height: \"100%\",\n    overflowY: \"auto\",\n    overscrollBehavior: \"contain\",\n    scrollBehavior: \"smooth\",\n    scrollbarColor: `${colorVars.strokeStrong} transparent`,\n    \"@media (prefers-reduced-motion: reduce)\": { scrollBehavior: \"auto\" },\n  },\n  action: {\n    borderRadius: radiusVars.full,\n    bottom: spacingVars.space3,\n    left: \"50%\",\n    minWidth: \"2rem\",\n    opacity: 1,\n    position: \"absolute\",\n    transform: \"translateX(-50%)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n  },\n});\n\nexport type MessageScrollerProps = ComponentProps<\"div\"> & {\n  children: ReactNode;\n  /** Keeps the latest message in view when new messages are added. @default true */\n  followOutput?: boolean;\n  scrollLabel?: string;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function MessageScroller({\n  children,\n  followOutput = true,\n  scrollLabel = \"Scroll to latest message\",\n  xstyle,\n  ...props\n}: MessageScrollerProps) {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const [isAtEnd, setIsAtEnd] = useState(true);\n\n  useEffect(() => {\n    if (followOutput && isAtEnd)\n      viewportRef.current?.scrollTo({ top: viewportRef.current.scrollHeight });\n  }, [children, followOutput, isAtEnd]);\n\n  const resolved = stylex.props(styles.root, xstyle);\n  return (\n    <div {...props} {...resolved}>\n      <div\n        ref={viewportRef}\n        {...stylex.props(styles.viewport)}\n        onScroll={(event) => {\n          const target = event.currentTarget;\n          setIsAtEnd(target.scrollHeight - target.scrollTop - target.clientHeight < 4);\n        }}\n      >\n        {children}\n      </div>\n      {!isAtEnd ? (\n        <Button\n          aria-label={scrollLabel}\n          size=\"sm\"\n          variant=\"secondary\"\n          xstyle={styles.action}\n          onClick={() =>\n            viewportRef.current?.scrollTo({\n              behavior: \"smooth\",\n              top: viewportRef.current.scrollHeight,\n            })\n          }\n        >\n          <Icon name=\"arrowDown\" />\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n",
-      "path": "message-scroller.tsx"
-    }
-  ],
-  "dependencies": [
-    "@phosphor-icons/react",
-    "@stylexjs/stylex"
-  ],
-  "registryDependencies": [
-    "button"
-  ]
-}

package/dist/items/typography.json

@@ -1,14 +0,0 @@
-{
-  "name": "typography",
-  "primaryExport": "Typography",
-  "files": [
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport { createElement, type HTMLAttributes } from \"react\";\n\nimport { colorVars, radiusVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { color: colorVars.fgPrimary, fontFamily: typographyVars.fontFamily, margin: 0 },\n  display: {\n    fontSize: \"2rem\",\n    fontWeight: typographyVars.fontWeightSemibold,\n    letterSpacing: \"-0.025em\",\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeXl,\n    fontWeight: typographyVars.fontWeightSemibold,\n    letterSpacing: \"-0.015em\",\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  heading: {\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  body: {\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  label: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  caption: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  code: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    fontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    paddingBlock: spacingVars.space1,\n    paddingInline: spacingVars.space2,\n  },\n});\n\ntype TypographyElement = \"blockquote\" | \"code\" | \"h1\" | \"h2\" | \"h3\" | \"p\" | \"span\";\ntype TypographyVariant = \"body\" | \"caption\" | \"code\" | \"display\" | \"heading\" | \"label\" | \"title\";\n\nconst defaultElementMap: Record<TypographyVariant, TypographyElement> = {\n  body: \"p\",\n  caption: \"span\",\n  code: \"code\",\n  display: \"h1\",\n  heading: \"h3\",\n  label: \"span\",\n  title: \"h2\",\n};\n\nexport type TypographyProps = HTMLAttributes<HTMLElement> & {\n  as?: TypographyElement;\n  variant?: TypographyVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Typography({ as, variant = \"body\", xstyle, ...props }: TypographyProps) {\n  const element = as ?? defaultElementMap[variant];\n  return createElement(element, {\n    ...props,\n    ...stylex.props(styles.root, styles[variant], xstyle),\n  });\n}\n",
-      "path": "typography.tsx"
-    }
-  ],
-  "dependencies": [
-    "@stylexjs/stylex"
-  ],
-  "registryDependencies": []
-}