@alex.radulescu/styled-static 0.2.0 → 0.7.1

package/dist/hash.js

@@ -1,46 +1 @@
-/**
- * Murmurhash2 implementation for generating short, deterministic hashes.
- * Used to create unique class names from CSS content.
- *
- * Based on https://github.com/garycourt/murmurhash-js
- * This is a well-known, fast, non-cryptographic hash function.
- */
-export function hash(str = "") {
-    let l = str.length;
-    let h = l ^ l;
-    let i = 0;
-    let k;
-    while (l >= 4) {
-        k =
-            (str.charCodeAt(i) & 0xff) |
-                ((str.charCodeAt(++i) & 0xff) << 8) |
-                ((str.charCodeAt(++i) & 0xff) << 16) |
-                ((str.charCodeAt(++i) & 0xff) << 24);
-        k =
-            (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
-        k ^= k >>> 24;
-        k =
-            (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
-        h =
-            ((h & 0xffff) * 0x5bd1e995 +
-                ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^
-                k;
-        l -= 4;
-        ++i;
-    }
-    // Handle remaining bytes (1-3) without switch fallthrough
-    if (l >= 3)
-        h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
-    if (l >= 2)
-        h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
-    if (l >= 1) {
-        h ^= str.charCodeAt(i) & 0xff;
-        h =
-            (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
-    }
-    h ^= h >>> 13;
-    h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
-    h ^= h >>> 15;
-    return (h >>> 0).toString(36);
-}
-//# sourceMappingURL=hash.js.map
+function w(f=""){let v=f.length,b=v^v,q=0,d;while(v>=4)d=f.charCodeAt(q)&255|(f.charCodeAt(++q)&255)<<8|(f.charCodeAt(++q)&255)<<16|(f.charCodeAt(++q)&255)<<24,d=(d&65535)*1540483477+(((d>>>16)*1540483477&65535)<<16),d^=d>>>24,d=(d&65535)*1540483477+(((d>>>16)*1540483477&65535)<<16),b=(b&65535)*1540483477+(((b>>>16)*1540483477&65535)<<16)^d,v-=4,++q;if(v>=3)b^=(f.charCodeAt(q+2)&255)<<16;if(v>=2)b^=(f.charCodeAt(q+1)&255)<<8;if(v>=1)b^=f.charCodeAt(q)&255,b=(b&65535)*1540483477+(((b>>>16)*1540483477&65535)<<16);return b^=b>>>13,b=(b&65535)*1540483477+(((b>>>16)*1540483477&65535)<<16),b^=b>>>15,(b>>>0).toString(36)}export{w as hash};

package/dist/index.d.ts

@@ -35,18 +35,28 @@
  *   body { margin: 0; }
  * `;
  *
+ * // Polymorphism with withComponent
+ * import { Link } from 'react-router-dom';
+ * const LinkButton = withComponent(Link, Button);
+ *
  * // Usage
  * <GlobalStyle />
  * <Button>Click me</Button>
- * <Button as="a" href="/link">Link button</Button>
+ * <LinkButton to="/home">Link button</LinkButton>
  * <PrimaryButton className={activeClass}>Active</PrimaryButton>
+ *
+ * // Access className for manual composition
+ * <a className={Button.className} href="/link">Manual link</a>
  * ```
  */
-export type { StyledComponent, StyledFunction, HTMLTag, PropsOf } from './types';
+export type { StyledComponent, StyledFunction, HTMLTag, PropsOf, VariantsConfig, VariantsDefinition, StyledVariantsDefinition, VariantProps, StyledVariantComponent, CssVariantsFunction, Keyframes, } from "./types";
+export { getTheme, setTheme, initTheme, onSystemThemeChange, type InitThemeOptions, } from "./theme";
 /**
- * Create styled React components with zero runtime overhead.
+ * Create styled React components with near-zero runtime overhead.
  * CSS is extracted to static files at build time.
  *
+ * Every styled component exposes a `.className` property for composition.
+ *
  * @example
  * // Style HTML elements
  * const Button = styled.button`
@@ -59,11 +69,11 @@ export type { StyledComponent, StyledFunction, HTMLTag, PropsOf } from './types'
  *   font-weight: bold;
  * `;
  *
- * // Use with `as` prop for polymorphism
- * <Button as="a" href="/link">Click</Button>
+ * // Access className for manual composition
+ * <a className={Button.className} href="/link">Link with button styles</a>
  *
- * // Use transient props (won't reach DOM)
- * <Button $primary={true}>Click</Button>
+ * // Use withComponent for polymorphism
+ * const LinkButton = withComponent(Link, Button);
  */
 export declare const styled: import("./types").StyledFunction;
 /**
@@ -84,6 +94,25 @@ export declare const styled: import("./types").StyledFunction;
  * <Button className={`${activeClass} ${highlightClass}`}>Mixed</Button>
  */
 export declare function css(_strings: TemplateStringsArray, ..._interpolations: never[]): string;
+/**
+ * Create scoped keyframes for animations.
+ * The animation name is hashed to avoid conflicts between components.
+ *
+ * @example
+ * const spin = keyframes`
+ *   from { transform: rotate(0deg); }
+ *   to { transform: rotate(360deg); }
+ * `;
+ *
+ * const Spinner = styled.div`
+ *   animation: ${spin} 1s linear infinite;
+ * `;
+ *
+ * // In CSS output:
+ * // @keyframes ss-abc123 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+ * // .ss-xyz789 { animation: ss-abc123 1s linear infinite; }
+ */
+export declare function keyframes(_strings: TemplateStringsArray, ..._interpolations: never[]): string;
 /**
  * Create global (unscoped) styles.
  * Returns a component that should be rendered once at the root of your app.
@@ -115,4 +144,127 @@ export declare function css(_strings: TemplateStringsArray, ..._interpolations:
  * );
  */
 export declare function createGlobalStyle(_strings: TemplateStringsArray, ..._interpolations: never[]): () => null;
+/**
+ * Utility for conditionally joining class names.
+ * A minimal (~40B) alternative to clsx/classnames.
+ *
+ * @example
+ * // Multiple class names
+ * cx('base', 'active')           // → 'base active'
+ *
+ * // Conditional classes
+ * cx('btn', isActive && 'active') // → 'btn active' or 'btn'
+ *
+ * // With css helper
+ * const activeClass = css`color: blue;`;
+ * cx('btn', isActive && activeClass)
+ *
+ * // Falsy values are filtered
+ * cx('a', null, undefined, false, 'b') // → 'a b'
+ */
+export declare function cx(...args: (string | false | null | undefined)[]): string;
+/**
+ * Create a styled component with variant support.
+ * CSS for base and all variants is extracted at build time.
+ * Variant props are mapped to modifier classes at runtime.
+ *
+ * @example
+ * // With css`` for IDE syntax highlighting (recommended)
+ * const Button = styledVariants({
+ *   component: 'button',
+ *   css: css`
+ *     padding: 0.5rem 1rem;
+ *     border: none;
+ *     border-radius: 4px;
+ *   `,
+ *   variants: {
+ *     color: {
+ *       primary: css`background: blue; color: white;`,
+ *       danger: css`background: red; color: white;`,
+ *     },
+ *     size: {
+ *       sm: css`font-size: 0.875rem;`,
+ *       lg: css`font-size: 1.125rem;`,
+ *     },
+ *   },
+ * });
+ *
+ * // Plain strings also work (no highlighting)
+ * const SimpleButton = styledVariants({
+ *   component: 'button',
+ *   css: `padding: 0.5rem;`,
+ *   variants: { size: { sm: `font-size: 0.875rem;` } },
+ * });
+ *
+ * // Usage - variant props become modifier classes
+ * <Button color="primary" size="lg">Click me</Button>
+ * // Renders: <button class="ss-abc ss-abc--color-primary ss-abc--size-lg">
+ */
+export declare function styledVariants<T extends import("./types").HTMLTag | import("react").ComponentType<any>, V extends import("./types").VariantsConfig>(_config: import("./types").StyledVariantsDefinition<V> & {
+    component: T;
+}): import("./types").StyledVariantComponent<T, V>;
+/**
+ * Create a variant function that returns class strings.
+ * CSS for base and all variants is extracted at build time.
+ * The function maps variant selections to class names at runtime.
+ *
+ * @example
+ * // With css`` for IDE syntax highlighting (recommended)
+ * const buttonCss = cssVariants({
+ *   css: css`
+ *     padding: 0.5rem 1rem;
+ *     border-radius: 4px;
+ *   `,
+ *   variants: {
+ *     color: {
+ *       primary: css`background: blue;`,
+ *       danger: css`background: red;`,
+ *     },
+ *   },
+ * });
+ *
+ * // Usage - returns class string
+ * <div className={buttonCss({ color: 'primary' })}>
+ * // Returns: "ss-xyz ss-xyz--color-primary"
+ *
+ * // Combine with cx
+ * <div className={cx(buttonCss({ color: 'primary' }), isActive && activeClass)}>
+ */
+export declare function cssVariants<V extends import("./types").VariantsConfig>(_config: import("./types").VariantsDefinition<V>): import("./types").CssVariantsFunction<V>;
+/**
+ * Create a component that renders one element with another's styles.
+ * This is a build-time alternative to the runtime `as` prop.
+ *
+ * @param toComponent - The component or HTML tag to render
+ * @param fromComponent - The styled component whose styles to use
+ *
+ * @example
+ * import { Link } from 'react-router-dom';
+ *
+ * const Button = styled.button`
+ *   padding: 1rem;
+ *   background: blue;
+ * `;
+ *
+ * // Create a Link that looks like a Button
+ * const LinkButton = withComponent(Link, Button);
+ *
+ * // Usage
+ * <LinkButton to="/home">Go Home</LinkButton>
+ *
+ * // Can extend further
+ * const PrimaryLinkButton = styled(LinkButton)`
+ *   font-weight: bold;
+ * `;
+ *
+ * @example
+ * // Also works with HTML tags
+ * const ButtonAsAnchor = withComponent('a', Button);
+ * <ButtonAsAnchor href="/link">Click</ButtonAsAnchor>
+ */
+export declare function withComponent<T extends import("./types").HTMLTag | import("react").ComponentType<any>, F extends {
+    className: string;
+}>(_toComponent: T, _fromComponent: F): import("./types").StyledComponent<T> & {
+    className: string;
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAcjF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EAGb,OAAO,SAAS,EAAE,cAAc,CAAC;AAEvC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,GAAG,CACjB,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,eAAe,EAAE,KAAK,EAAE,GAC1B,MAAM,CAER;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,eAAe,EAAE,KAAK,EAAE,GAC1B,MAAM,IAAI,CAEZ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAEH,YAAY,EACV,eAAe,EACf,cAAc,EACd,OAAO,EACP,OAAO,EACP,cAAc,EACd,kBAAkB,EAClB,wBAAwB,EACxB,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACnB,SAAS,GACV,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,KAAK,gBAAgB,GACtB,MAAM,SAAS,CAAC;AAcjB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,MAAM,EAGb,OAAO,SAAS,EAAE,cAAc,CAAC;AAEvC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,GAAG,CACjB,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,eAAe,EAAE,KAAK,EAAE,GAC1B,MAAM,CAER;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CACvB,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,eAAe,EAAE,KAAK,EAAE,GAC1B,MAAM,CAER;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,eAAe,EAAE,KAAK,EAAE,GAC1B,MAAM,IAAI,CAEZ;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAEzE;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,cAAc,CAC5B,CAAC,SAAS,OAAO,SAAS,EAAE,OAAO,GAAG,OAAO,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC,EACxE,CAAC,SAAS,OAAO,SAAS,EAAE,cAAc,EAE1C,OAAO,EAAE,OAAO,SAAS,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG;IAAE,SAAS,EAAE,CAAC,CAAA;CAAE,GACxE,OAAO,SAAS,EAAE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAEhD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,OAAO,SAAS,EAAE,cAAc,EACpE,OAAO,EAAE,OAAO,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAC/C,OAAO,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAE1C;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,aAAa,CAC3B,CAAC,SAAS,OAAO,SAAS,EAAE,OAAO,GAAG,OAAO,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC,EACxE,CAAC,SAAS;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,EAC/B,YAAY,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,GAAG,OAAO,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,CAElG"}

package/dist/index.js

@@ -1,133 +1,8 @@
-/**
- * styled-static
- *
- * Zero-runtime styled components for React 19+ with Vite.
- * CSS is extracted to static files at build time.
- *
- * @example
- * ```tsx
- * import { styled, css, createGlobalStyle } from 'styled-static';
- *
- * // Style HTML elements
- * const Button = styled.button`
- *   padding: 0.5rem 1rem;
- *   background: blue;
- *   color: white;
- *
- *   &:hover {
- *     background: darkblue;
- *   }
- * `;
- *
- * // Extend existing styled components
- * const PrimaryButton = styled(Button)`
- *   font-weight: bold;
- * `;
- *
- * // Get a class name for mixing
- * const activeClass = css`
- *   outline: 2px solid blue;
- * `;
- *
- * // Global styles
- * const GlobalStyle = createGlobalStyle`
- *   * { box-sizing: border-box; }
- *   body { margin: 0; }
- * `;
- *
- * // Usage
- * <GlobalStyle />
- * <Button>Click me</Button>
- * <Button as="a" href="/link">Link button</Button>
- * <PrimaryButton className={activeClass}>Active</PrimaryButton>
- * ```
- */
-function throwConfigError(name) {
-    throw new Error(`${name} was not transformed at build time. ` +
-        `Ensure the styled-static plugin is configured in vite.config.ts:\n\n` +
-        `  import { styledStatic } from 'styled-static/vite';\n` +
-        `  import react from '@vitejs/plugin-react';\n\n` +
-        `  export default defineConfig({\n` +
-        `    plugins: [styledStatic(), react()],\n` +
-        `  });`);
-}
-/**
- * Create styled React components with zero runtime overhead.
- * CSS is extracted to static files at build time.
- *
- * @example
- * // Style HTML elements
- * const Button = styled.button`
- *   padding: 0.5rem 1rem;
- *   background: blue;
- * `;
- *
- * // Extend existing styled components
- * const PrimaryButton = styled(Button)`
- *   font-weight: bold;
- * `;
- *
- * // Use with `as` prop for polymorphism
- * <Button as="a" href="/link">Click</Button>
- *
- * // Use transient props (won't reach DOM)
- * <Button $primary={true}>Click</Button>
- */
-export const styled = new Proxy({}, {
-    get: () => () => throwConfigError('styled'),
-    apply: () => throwConfigError('styled'),
-});
-/**
- * Get a scoped class name for CSS.
- * Useful for conditional classes or mixing with styled components.
- *
- * @example
- * const activeClass = css`
- *   background: blue;
- *   color: white;
- * `;
- *
- * const highlightClass = css`
- *   box-shadow: 0 0 10px yellow;
- * `;
- *
- * <div className={isActive ? activeClass : ''} />
- * <Button className={`${activeClass} ${highlightClass}`}>Mixed</Button>
- */
-export function css(_strings, ..._interpolations) {
-    throwConfigError('css');
-}
-/**
- * Create global (unscoped) styles.
- * Returns a component that should be rendered once at the root of your app.
- * The component renders nothing - CSS is extracted at build time.
- *
- * @example
- * const GlobalStyle = createGlobalStyle`
- *   * {
- *     box-sizing: border-box;
- *   }
- *
- *   body {
- *     margin: 0;
- *     font-family: system-ui, sans-serif;
- *   }
- *
- *   :root {
- *     --color-primary: #3b82f6;
- *     --color-text: #1a1a1a;
- *   }
- * `;
- *
- * // In your app entry point
- * createRoot(document.getElementById('root')!).render(
- *   <StrictMode>
- *     <GlobalStyle />
- *     <App />
- *   </StrictMode>
- * );
- */
-export function createGlobalStyle(_strings, ..._interpolations) {
-    throwConfigError('createGlobalStyle');
-}
-//# sourceMappingURL=index.js.map
+function d(e="data-theme"){if(typeof document>"u")return"light";if(e.startsWith("data-")){let t=e.slice(5);return document.documentElement.dataset[t]||"light"}return document.documentElement.getAttribute(e)||"light"}function i(e,t=!0,a={}){let{storageKey:m="theme",attribute:n="data-theme"}=a;if(typeof document>"u")return;if(n.startsWith("data-")){let u=n.slice(5);document.documentElement.dataset[u]=e}else document.documentElement.setAttribute(n,e);if(t&&typeof localStorage<"u")try{localStorage.setItem(m,e)}catch{}}function l(e={}){let{defaultTheme:t="light",storageKey:a="theme",useSystemPreference:m=!1,attribute:n="data-theme"}=e;if(typeof document>"u")return t;let u=null;if(typeof localStorage<"u")try{u=localStorage.getItem(a)}catch{}if(u)return i(u,!1,{storageKey:a,attribute:n}),u;if(m&&typeof matchMedia<"u")return u=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",i(u,!1,{storageKey:a,attribute:n}),u;return i(t,!1,{storageKey:a,attribute:n}),t}function s(e){if(typeof matchMedia>"u")return()=>{};let t=matchMedia("(prefers-color-scheme: dark)"),a=(m)=>{e(m.matches)};if(t.addEventListener)return t.addEventListener("change",a),()=>t.removeEventListener("change",a);return t.addListener(a),()=>t.removeListener(a)}function c(e){throw Error(`${e} was not transformed at build time. Ensure the styled-static plugin is configured in vite.config.ts:
+
+  import { styledStatic } from 'styled-static/vite';
+  import react from '@vitejs/plugin-react';
+
+  export default defineConfig({
+    plugins: [styledStatic(), react()],
+  });`)}var h=new Proxy({},{get:()=>()=>c("styled"),apply:()=>c("styled")});function f(e,...t){c("css")}function o(e,...t){c("keyframes")}function y(e,...t){c("createGlobalStyle")}function g(...e){return e.filter(Boolean).join(" ")}function b(e){c("styledVariants")}function p(e){c("cssVariants")}function S(e,t){c("withComponent")}export{S as withComponent,b as styledVariants,h as styled,i as setTheme,s as onSystemThemeChange,o as keyframes,l as initTheme,d as getTheme,g as cx,p as cssVariants,f as css,y as createGlobalStyle};

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAIH,SAAS,gBAAgB,CAAC,IAAY;IACpC,MAAM,IAAI,KAAK,CACb,GAAG,IAAI,sCAAsC;QAC3C,sEAAsE;QACtE,wDAAwD;QACxD,iDAAiD;QACjD,mCAAmC;QACnC,2CAA2C;QAC3C,OAAO,CACV,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,EAAW,EAAE;IAC3C,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;IAC3C,KAAK,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;CACxC,CAAqC,CAAC;AAEvC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,GAAG,CACjB,QAA8B,EAC9B,GAAG,eAAwB;IAE3B,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,iBAAiB,CAC/B,QAA8B,EAC9B,GAAG,eAAwB;IAE3B,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AACxC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAgBH,wDAAwD;AACxD,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,mBAAmB,GAEpB,MAAM,SAAS,CAAC;AAEjB,SAAS,gBAAgB,CAAC,IAAY;IACpC,MAAM,IAAI,KAAK,CACb,GAAG,IAAI,sCAAsC;QAC3C,sEAAsE;QACtE,wDAAwD;QACxD,iDAAiD;QACjD,mCAAmC;QACnC,2CAA2C;QAC3C,OAAO,CACV,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,EAAW,EAAE;IAC3C,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;IAC3C,KAAK,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;CACxC,CAAqC,CAAC;AAEvC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,GAAG,CACjB,QAA8B,EAC9B,GAAG,eAAwB;IAE3B,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,SAAS,CACvB,QAA8B,EAC9B,GAAG,eAAwB;IAE3B,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAChC,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,iBAAiB,CAC/B,QAA8B,EAC9B,GAAG,eAAwB;IAE3B,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AACxC,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,EAAE,CAAC,GAAG,IAA2C;IAC/D,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACxC,CAAC;AAED,+EAA+E;AAC/E,eAAe;AACf,+EAA+E;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,UAAU,cAAc,CAI5B,OAAyE;IAEzE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AACrC,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,WAAW,CACzB,OAAgD;IAEhD,gBAAgB,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC;AAED,+EAA+E;AAC/E,mBAAmB;AACnB,+EAA+E;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,aAAa,CAG3B,YAAe,EAAE,cAAiB;IAClC,gBAAgB,CAAC,eAAe,CAAC,CAAC;AACpC,CAAC"}

package/dist/runtime/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * styled-static minimal runtime
+ *
+ * This is the entire runtime for styled-static (~50 bytes minified).
+ * All component creation happens at build time via the Vite plugin.
+ *
+ * ## Why so small?
+ *
+ * The Vite plugin generates inline component functions at build time.
+ * The only runtime operation needed is merging className strings.
+ *
+ * ## The `m` function (merge)
+ *
+ * Merges the styled component's base class with any user-provided className.
+ * Order: base class first, user class last (allows user to override).
+ *
+ * @example
+ * m("ss-btn", undefined)     // → "ss-btn"
+ * m("ss-btn", "custom")      // → "ss-btn custom"
+ * m("ss-btn ss-primary", "") // → "ss-btn ss-primary"
+ */
+/**
+ * Merge base className with user className.
+ * Returns base class if no user class, otherwise combines them.
+ */
+export declare const m: (b: string, u?: string) => string;
+//# sourceMappingURL=index.d.ts.map

package/dist/runtime/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;GAGG;AACH,eAAO,MAAM,CAAC,GAAI,GAAG,MAAM,EAAE,IAAI,MAAM,KAAG,MAA+B,CAAC"}

package/dist/runtime/index.js

@@ -0,0 +1 @@
+var k=(f,h)=>h?`${f} ${h}`:f;export{k as m};

package/dist/runtime/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;GAGG;AACH,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAS,EAAE,CAAU,EAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Theme helpers for styled-static
+ *
+ * Provides simple, framework-agnostic utilities for theme switching.
+ * Uses CSS custom properties with data-theme attribute on documentElement.
+ *
+ * @example
+ * ```tsx
+ * import { initTheme, setTheme, getTheme } from 'styled-static';
+ *
+ * // Initialize on app load
+ * initTheme({ defaultTheme: 'light', useSystemPreference: true });
+ *
+ * // Get current theme
+ * const current = getTheme(); // 'light' | 'dark' | etc.
+ *
+ * // Change theme
+ * setTheme('dark');
+ * setTheme('pokemon', false); // Don't persist to localStorage
+ * ```
+ */
+/**
+ * Options for initializing the theme system.
+ */
+export interface InitThemeOptions {
+    /**
+     * The default theme to use when no stored preference exists.
+     * @default 'light'
+     */
+    defaultTheme?: string;
+    /**
+     * The localStorage key used to persist the theme.
+     * @default 'theme'
+     */
+    storageKey?: string;
+    /**
+     * Whether to use the system's color scheme preference as a fallback.
+     * When enabled, checks `prefers-color-scheme: dark` media query.
+     * @default false
+     */
+    useSystemPreference?: boolean;
+    /**
+     * Custom attribute name to set on documentElement.
+     * @default 'data-theme'
+     */
+    attribute?: string;
+}
+/**
+ * Get the current theme from the document.
+ *
+ * @param attribute - The attribute to read from (default: 'data-theme')
+ * @returns The current theme name, or 'light' if not set
+ *
+ * @example
+ * const theme = getTheme(); // 'light', 'dark', 'pokemon', etc.
+ */
+export declare function getTheme(attribute?: string): string;
+/**
+ * Set the theme on the document and optionally persist to localStorage.
+ *
+ * @param theme - The theme name to set (e.g., 'dark', 'pokemon', 'star-trek')
+ * @param persist - Whether to save to localStorage (default: true)
+ * @param options - Additional options for attribute and storage key
+ *
+ * @example
+ * // Set theme and persist
+ * setTheme('dark');
+ *
+ * // Set theme without persisting (e.g., for preview)
+ * setTheme('pokemon', false);
+ */
+export declare function setTheme(theme: string, persist?: boolean, options?: {
+    storageKey?: string;
+    attribute?: string;
+}): void;
+/**
+ * Initialize the theme system on page load.
+ *
+ * Applies the theme in this priority order:
+ * 1. Stored theme from localStorage
+ * 2. System preference (if `useSystemPreference` is true)
+ * 3. Default theme
+ *
+ * @param options - Configuration options
+ * @returns The theme that was applied
+ *
+ * @example
+ * // Basic usage
+ * initTheme();
+ *
+ * // With system preference detection
+ * initTheme({ useSystemPreference: true });
+ *
+ * // Full configuration
+ * initTheme({
+ *   defaultTheme: 'light',
+ *   storageKey: 'my-app-theme',
+ *   useSystemPreference: true,
+ * });
+ */
+export declare function initTheme(options?: InitThemeOptions): string;
+/**
+ * Subscribe to system theme changes.
+ *
+ * Useful when `useSystemPreference` is enabled and you want to
+ * react to the user changing their OS theme.
+ *
+ * @param callback - Function called when system preference changes
+ * @returns Unsubscribe function
+ *
+ * @example
+ * const unsubscribe = onSystemThemeChange((isDark) => {
+ *   if (!localStorage.getItem('theme')) {
+ *     setTheme(isDark ? 'dark' : 'light', false);
+ *   }
+ * });
+ *
+ * // Later: stop listening
+ * unsubscribe();
+ */
+export declare function onSystemThemeChange(callback: (prefersDark: boolean) => void): () => void;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAKH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,SAAS,SAAe,GAAG,MAAM,CASzD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EACb,OAAO,UAAO,EACd,OAAO,GAAE;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,GACxD,IAAI,CAqBN;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,GAAG,MAAM,CAoChE;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,GACvC,MAAM,IAAI,CAoBZ"}

package/dist/theme.js

@@ -0,0 +1 @@
+function D(v="data-theme"){if(typeof document>"u")return"light";if(v.startsWith("data-")){let q=v.slice(5);return document.documentElement.dataset[q]||"light"}return document.documentElement.getAttribute(v)||"light"}function B(v,q=!0,w={}){let{storageKey:A="theme",attribute:z="data-theme"}=w;if(typeof document>"u")return;if(z.startsWith("data-")){let x=z.slice(5);document.documentElement.dataset[x]=v}else document.documentElement.setAttribute(z,v);if(q&&typeof localStorage<"u")try{localStorage.setItem(A,v)}catch{}}function E(v={}){let{defaultTheme:q="light",storageKey:w="theme",useSystemPreference:A=!1,attribute:z="data-theme"}=v;if(typeof document>"u")return q;let x=null;if(typeof localStorage<"u")try{x=localStorage.getItem(w)}catch{}if(x)return B(x,!1,{storageKey:w,attribute:z}),x;if(A&&typeof matchMedia<"u")return x=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",B(x,!1,{storageKey:w,attribute:z}),x;return B(q,!1,{storageKey:w,attribute:z}),q}function F(v){if(typeof matchMedia>"u")return()=>{};let q=matchMedia("(prefers-color-scheme: dark)"),w=(A)=>{v(A.matches)};if(q.addEventListener)return q.addEventListener("change",w),()=>q.removeEventListener("change",w);return q.addListener(w),()=>q.removeListener(w)}export{B as setTheme,F as onSystemThemeChange,E as initTheme,D as getTheme};

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}