@asteby/metacore-theme 0.3.0 → 2.12.2

package/README.md

@@ -9,6 +9,14 @@ Ships the canonical Metacore visual language:
 - Font families (`Inter`, `Lora`, `IBM Plex Mono`)
 - `@theme inline` block mapping tokens to Tailwind v4 utilities
 
+## Stability
+
+Stable as of v1.0. The token names, CSS variable contract (`--primary`,
+`--background`, `--sidebar-*`, ...), `themeConfig` shape and the public
+exports below follow semver. Internal `oklch` values may shift in minor
+releases when the palette is re-tuned; if your UI depends on exact color
+values, pin to a minor range.
+
 ## Install
 
 ```bash
@@ -65,6 +73,10 @@ import { themeConfig } from '@asteby/metacore-theme/preset'
 Apply the `.dark` class to `<html>` or any ancestor. A `@custom-variant dark` is
 registered so Tailwind utilities like `dark:bg-card` work out of the box.
 
+The bundled `<ThemeProvider>` (light/dark/system, cookie-persisted) is the
+recommended entry; consumer apps can drop their local copies and use
+`useTheme()` for the toggle UI.
+
 ## License
 
 Apache-2.0

package/dist/provider.d.ts

@@ -12,7 +12,7 @@ export type ThemeProviderState = {
     setTheme: (theme: Theme) => void;
     resetTheme: () => void;
 };
-export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react").JSX.Element;
 export declare function useTheme(): ThemeProviderState;
 export {};
 //# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AACxC,KAAK,aAAa,GAAG,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAM7C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,KAAK,CAAA;IACnB,aAAa,EAAE,aAAa,CAAA;IAC5B,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAgCD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAA4B,EAC5B,UAAgC,GACjC,EAAE,kBAAkB,2CAuDpB;AAGD,wBAAgB,QAAQ,IAAI,kBAAkB,CAI7C"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AACxC,KAAK,aAAa,GAAG,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAM7C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,KAAK,CAAA;IACnB,aAAa,EAAE,aAAa,CAAA;IAC5B,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAgCD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAA4B,EAC5B,UAAgC,GACjC,EAAE,kBAAkB,+BAuDpB;AAGD,wBAAgB,QAAQ,IAAI,kBAAkB,CAI7C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-theme",
-  "version": "0.3.0",
+  "version": "2.12.2",
   "description": "Metacore design tokens + Tailwind 4 preset (oklch, shadows, fonts, dark mode)",
   "license": "Apache-2.0",
   "repository": {
@@ -45,7 +45,7 @@
     "@types/react-dom": "^19.0.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "typescript": "^5.6.0"
+    "typescript": "^6.0.0"
   },
   "publishConfig": {
     "access": "public"

package/styles/index.css

@@ -65,35 +65,34 @@
 }
 
 /* styles.css */
+/*
+ * Sidebar module groups are Radix <Collapsible defaultOpen>, so on mount they
+ * paint with data-state='open' immediately. A keyframe `animation` RUNS on that
+ * initial mount — and because Radix has not yet measured
+ * `--radix-collapsible-content-height` in the first frame, a `slideDown` from
+ * height:0 with `overflow:hidden` and no `animation-fill-mode` could settle the
+ * group at a wrong height, shoving the group below it up and making its items
+ * overlap. This surfaces specifically when returning from a full-screen route
+ * (e.g. the POS) that lives outside the authenticated shell: leaving it remounts
+ * the whole sidebar and re-triggers the mount animation.
+ *
+ * Fix: use a `transition` instead of a keyframe `animation`. A transition does
+ * NOT run on the initial render (there is no prior value to interpolate from),
+ * so a freshly-mounted defaultOpen group simply appears at its correct height —
+ * no measurement race — while genuine open/close toggles still animate.
+ */
 .CollapsibleContent {
   overflow: hidden;
+  height: 0;
 }
 
 .CollapsibleContent[data-state='open'] {
-  animation: slideDown 300ms ease-out;
+  height: var(--radix-collapsible-content-height);
 }
 
-.CollapsibleContent[data-state='closed'] {
-  animation: slideUp 300ms ease-out;
-}
-
-@keyframes slideDown {
-  from {
-    height: 0;
-  }
-
-  to {
-    height: var(--radix-collapsible-content-height);
-  }
-}
-
-@keyframes slideUp {
-  from {
-    height: var(--radix-collapsible-content-height);
-  }
-
-  to {
-    height: 0;
+@media (prefers-reduced-motion: no-preference) {
+  .CollapsibleContent {
+    transition: height 300ms ease-out;
   }
 }