@xyd-js/components 0.1.0-xyd.1 → 0.1.0-xyd.10

package/dist/views.js

@@ -1 +1,2 @@
-import{R as e}from"./index-BE4Aq8NU.js";var n="hfzpnxu";function a(a){var r=a.header,c=a.body,t=a.footer;return e.createElement("div",{className:n},r,c,t)}var r="h1k4ds7x",c="h1x4dha7",t="broqp2l";a.Body=function(n){var a=n.children,o=n.kind;return e.createElement("div",{className:"\n        ".concat(r,"\n        ").concat("secondary"===o?c:"","\n    ")},e.createElement("div",{className:"\n            ".concat(t,"\n        ")},a))};export{a as HomeView};
+export{H as HomeView}from"./HomeView-CHSb4HL6.js";import"react";
+//# sourceMappingURL=views.js.map

package/dist/views.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/writer.d.ts

@@ -1,11 +1,12 @@
 import React, { ReactElement } from 'react';
 
 interface BadgeProps {
-    children: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
     size?: "sm";
-    kind?: "warning";
+    kind?: "warning" | "info";
 }
-declare function Badge({ children, size, kind }: BadgeProps): React.JSX.Element;
+declare function Badge({ className, children, size, kind }: BadgeProps): React.JSX.Element;
 
 interface BlockquoteProps {
     children: React.ReactNode;
@@ -33,15 +34,20 @@ declare function Code({ children }: CodeProps): React.JSX.Element;
 interface BaseDetailsProps {
     children: React.ReactNode;
     label: string;
+    icon?: React.ReactElement;
+}
+interface TertiaryDetailsProps extends BaseDetailsProps {
+    kind: "tertiary";
+    title: string | React.ReactNode;
 }
 interface SecondaryDetailsProps extends BaseDetailsProps {
     kind: "secondary";
-    title: string;
+    title: string | React.ReactNode;
 }
 interface PrimaryDetailsProps extends BaseDetailsProps {
     kind?: "primary";
 }
-type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps;
+type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps;
 declare function Details(props: DetailsProps): React.JSX.Element;
 
 interface GuideCardProps {
@@ -78,6 +84,18 @@ declare function IconMetrics(): React.JSX.Element;
 declare function IconFunnels(): React.JSX.Element;
 declare function IconCode(): React.JSX.Element;
 declare function IconCustomEvent(): React.JSX.Element;
+declare function IconAlert(): React.JSX.Element;
+declare function IconBrowser(): React.JSX.Element;
+declare function IconREST(): React.JSX.Element;
+declare function IconGraphQL(): React.JSX.Element;
+declare function IconWebhooks(): React.JSX.Element;
+declare function IconJSBrowser(): React.JSX.Element;
+declare function IconJSNode(): React.JSX.Element;
+declare function IconStorybook(): React.JSX.Element;
+declare function IconReactRouter(): React.JSX.Element;
+declare function IconNextJS(): React.JSX.Element;
+declare function IconAppTemplate(): React.JSX.Element;
+declare function IconQuote(): React.JSX.Element;
 
 interface NavLinksProps {
     prev?: {
@@ -112,18 +130,53 @@ interface TableProps {
 }
 declare function Table({ children }: TableProps): React.JSX.Element;
 declare namespace Table {
-    var Th: ({ children }: TableThProps) => React.JSX.Element;
+    var Th: ({ children }: TableThProps$1) => React.JSX.Element;
+    var Tr: ({ children }: TableTrProps$1) => React.JSX.Element;
+    var Td: ({ children }: TableTdProps$1) => React.JSX.Element;
+}
+interface TableThProps$1 {
+    children: React.ReactNode;
+}
+interface TableTrProps$1 {
+    children: React.ReactNode;
+}
+interface TableTdProps$1 {
+    children: React.ReactNode;
+}
+
+interface TableV2Props {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function TableV2({ children, className }: TableV2Props): React.JSX.Element;
+declare namespace TableV2 {
+    var Head: ({ children }: TableHeadProps) => React.JSX.Element;
+    var Th: ({ children, numeric }: TableThProps) => React.JSX.Element;
     var Tr: ({ children }: TableTrProps) => React.JSX.Element;
-    var Td: ({ children }: TableTdProps) => React.JSX.Element;
+    var Td: ({ children, numeric, muted }: TableTdProps) => React.JSX.Element;
+    var Cell: ({ children }: TableCellProps) => React.JSX.Element;
+    var ModelCell: ({ children }: TableModelCellProps) => React.JSX.Element;
+}
+interface TableHeadProps {
+    children: React.ReactNode;
 }
 interface TableThProps {
     children: React.ReactNode;
+    numeric?: boolean;
 }
 interface TableTrProps {
     children: React.ReactNode;
 }
 interface TableTdProps {
     children: React.ReactNode;
+    numeric?: boolean;
+    muted?: boolean;
+}
+interface TableCellProps {
+    children: React.ReactNode;
+}
+interface TableModelCellProps {
+    children: React.ReactNode;
 }
 
 interface TabsProps$1 {
@@ -154,4 +207,5 @@ interface UnderlineNavItemProps {
     href?: string;
 }
 
-export { Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumbs, type BreadcrumbsProps, Callout, type CalloutProps, Code, type CodeProps, Details, type DetailsProps, GuideCard, Heading, type HeadingProps, Hr, type HrProps, IconCode, IconCustomEvent, IconFunnels, IconMetrics, IconSessionReplay, NavLinks, type NavLinksProps, Pre, type PreProps, Steps, type StepsProps, Table, type TableProps, type TableTdProps, type TableThProps, type TableTrProps, Tabs, type TabsProps$1 as TabsProps, UnderlineNav };
+export { Badge, Blockquote, Breadcrumbs, Callout, Code, Details, GuideCard, Heading, Hr, IconAlert, IconAppTemplate, IconBrowser, IconCode, IconCustomEvent, IconFunnels, IconGraphQL, IconJSBrowser, IconJSNode, IconMetrics, IconNextJS, IconQuote, IconREST, IconReactRouter, IconSessionReplay, IconStorybook, IconWebhooks, NavLinks, Pre, Steps, Table, TableV2, Tabs, UnderlineNav };
+export type { BadgeProps, BlockquoteProps, BreadcrumbsProps, CalloutProps, CodeProps, DetailsProps, HeadingProps, HrProps, NavLinksProps, PreProps, StepsProps, TableProps, TableTdProps$1 as TableTdProps, TableThProps$1 as TableThProps, TableTrProps$1 as TableTrProps, TabsProps$1 as TabsProps };

package/dist/writer.js

@@ -1 +1,2 @@
-export{c as Badge,B as Blockquote,b as Callout,C as Code,D as Details,H as Heading,a as Hr,f as IconCode,g as IconCustomEvent,e as IconFunnels,d as IconMetrics,I as IconSessionReplay}from"./index-DMAgLttD.js";import{_ as t}from"./tslib.es6-B1gizQU6.js";import{R as r,r as n}from"./index-BE4Aq8NU.js";import{ArrowRightIcon as s,ArrowLeftIcon as l}from"@radix-ui/react-icons";export{G as GuideCard,S as Steps,T as Table,a as Tabs,U as UnderlineNav}from"./UnderlineNav-DGzjCvkM.js";import"@radix-ui/react-tabs";import"lucide-react";var i="hwgsk4h",m="i1b95bxl",o="i1a3fa93",u="i1dl7ywj";function h(e){var a=e.children,n=t(e,["children"]);return r.createElement("a",Object.assign({},n),a)}function v(e){return r.createElement("div",{className:i},e.items.map((function(t,a){var l=a===e.items.length-1;return r.createElement(n.Fragment,{key:t.href+t.title},a>0&&r.createElement(s,{className:m}),r.createElement("div",{className:"\n                            ".concat(o,"\n                            ").concat(l&&u,"\n                        "),title:t.title},t.href&&!l?r.createElement(h,{href:t.href},t.title):t.title))})))}var p="h1xhrk1",E="l1elq7ab",x="i1mmatje";function N(e){var a=e.children,n=t(e,["children"]);return r.createElement("a",Object.assign({},n),a)}function j(e){return r.createElement("div",{className:p},e.prev?r.createElement(N,{href:e.prev.href,title:e.prev.title,className:E},r.createElement(l,{className:x}),e.prev.title):r.createElement("div",null),e.next&&r.createElement(N,{href:e.next.href,title:e.next.title,className:E},e.next.title,r.createElement(s,{className:x})))}var k="h1vb39qj";function q(e){var t=e.children;return r.createElement("pre",{className:k},t)}export{v as Breadcrumbs,j as NavLinks,q as Pre};
+export{B as Badge,a as Blockquote,C as Callout,b as Code,D as Details,H as Heading,c as Hr,h as IconAlert,r as IconAppTemplate,i as IconBrowser,f as IconCode,g as IconCustomEvent,e as IconFunnels,k as IconGraphQL,m as IconJSBrowser,n as IconJSNode,d as IconMetrics,q as IconNextJS,s as IconQuote,j as IconREST,p as IconReactRouter,I as IconSessionReplay,o as IconStorybook,l as IconWebhooks}from"./index-BbIMmTvo.js";import{_ as t}from"./tslib.es6-CNVK7Xcu.js";import u,{Fragment as _}from"react";import{ArrowRightIcon as v,ArrowLeftIcon as N}from"@radix-ui/react-icons";export{G as GuideCard,S as Steps,T as Table,a as TableV2,b as Tabs,U as UnderlineNav}from"./UnderlineNav-3-KptDYD.js";import"./_rollupPluginBabelHelpers-D0XU6lDu.js";import"@radix-ui/react-tabs";import"lucide-react";function y(e){var s=e.children,r=t(e,["children"]);return u.createElement("a",Object.assign({},r),s)}function E(e){return u.createElement("div",{className:"XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsHost"},e.items.map((function(t,s){var r=s===e.items.length-1;return u.createElement(_,{key:t.href+t.title},s>0&&u.createElement(v,{className:"XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsIcon"}),u.createElement("div",{className:"\n                            ".concat("XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsItem","\n                            ").concat(r&&"XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsItemActive","\n                        "),title:t.title},t.href&&!r?u.createElement(y,{href:t.href},t.title):t.title))})))}var x="XydComponents-Component-writer-NavLinks-NavLinks_styles_ts__NavLinksLink",L="XydComponents-Component-writer-NavLinks-NavLinks_styles_ts__NavLinksIcon";function w(e){var s=e.children,r=t(e,["children"]);return u.createElement("a",Object.assign({},r),s)}function X(e){return u.createElement("div",{className:"XydComponents-Component-writer-NavLinks-NavLinks_styles_ts__NavLinksHost"},e.prev?u.createElement(w,{href:e.prev.href,title:e.prev.title,className:x},u.createElement(N,{className:L}),e.prev.title):u.createElement("div",null),e.next&&u.createElement(w,{href:e.next.href,title:e.next.title,className:x},e.next.title,u.createElement(v,{className:L})))}function R(e){var t=e.children;return u.createElement("pre",{className:"XydComponents-Component-writer-Pre__PreHost"},t)}export{E as Breadcrumbs,X as NavLinks,R as Pre};
+//# sourceMappingURL=writer.js.map

package/dist/writer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"writer.js","sources":["../src/writer/Breadcrumbs/Breadcrumbs.tsx","../src/writer/Breadcrumbs/Breadcrumbs.styles.ts","../src/writer/NavLinks/NavLinks.styles.ts","../src/writer/NavLinks/NavLinks.tsx","../src/writer/Pre/Pre.tsx","../src/writer/Pre/Pre.styles.tsx"],"sourcesContent":["import React, {Fragment} from 'react'\nimport type {ReactElement} from 'react'\nimport {ArrowRightIcon} from '@radix-ui/react-icons'\n\nimport * as cn from './Breadcrumbs.styles'\n\nfunction Anchor({children, ...rest}) {\n    return <a {...rest}>\n        {children}\n    </a>\n}\n\nexport interface BreadcrumbsProps {\n    items: {\n        title: string\n        href?: string\n    }[]\n}\n\nexport function Breadcrumbs(props: BreadcrumbsProps): ReactElement {\n    return (\n        <div className={cn.BreadcrumbsHost}>\n            {props.items.map((item, index) => {\n                const lastActive = index === props.items.length - 1\n\n                return (\n                    <Fragment key={item.href + item.title}>\n                        {index > 0 && <ArrowRightIcon className={cn.BreadcrumbsIcon}/>}\n                        <div className={`\n                            ${cn.BreadcrumbsItem}\n                            ${lastActive && cn.BreadcrumbsItemActive}\n                        `}\n                             title={item.title}\n                        >\n                            {item.href && !lastActive ? (\n                                <Anchor href={item.href}>{item.title}</Anchor>\n                            ) : (\n                                item.title\n                            )}\n                        </div>\n                    </Fragment>\n                )\n            })}\n        </div>\n    )\n}\n","import {css} from \"@linaria/core\";\n\nexport const BreadcrumbsHost = css`\n    display: flex;\n    overflow: hidden;\n    margin-top: 0.375rem;\n    gap: 0.25rem;\n    align-items: center;\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: #6B7280;\n`;\n\nexport const BreadcrumbsIcon = css`\n    shrink: 0;\n    width: 0.875rem;\n`;\n\nexport const BreadcrumbsItem = css`\n    white-space: nowrap;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 300ms;\n`;\n\nexport const BreadcrumbsItemActive = css`\n    color: #000;\n    font-weight: bold;\n`;\n","import {css} from \"@linaria/core\";\nimport colors from \"@livesession/design-system-colors\";\n\nexport const NavLinksHost = css`\n    display: flex;\n    padding-top: 2rem;\n    margin-top: 2rem;\n    margin-bottom: 2rem;\n    justify-content: space-between;\n    align-items: center;\n    border-top-width: 1px;\n    border-color: ${colors.dark32};\n`;\n\nexport const NavLinksLink = css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    font-size: 16px;\n    line-height: 1.5;\n    font-weight: 600;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 300ms;\n    max-width: 50%;\n`;\n\nexport const NavLinksIcon = css`\n    display: inline;\n    height: 1.25rem;\n    flex-shrink: 0;\n`;\n","import React from \"react\"\nimport {ArrowLeftIcon, ArrowRightIcon} from '@radix-ui/react-icons'\n\nimport * as cn from \"./NavLinks.styles\";\n\nfunction Anchor({children, ...rest}) {\n    return <a {...rest}>\n        {children}\n    </a>\n}\n\nexport interface NavLinksProps {\n    prev?: {\n        title: string\n        href: string\n    }\n    next?: {\n        title: string\n        href: string\n    }\n}\n\nexport function NavLinks(props: NavLinksProps) {\n    return (\n        <div className={cn.NavLinksHost}>\n            {props.prev ? (\n                <Anchor\n                    href={props.prev.href}\n                    title={props.prev.title}\n                    className={cn.NavLinksLink}\n                >\n                    <ArrowLeftIcon className={cn.NavLinksIcon}/>\n                    {props.prev.title}\n                </Anchor>\n            ) : <div/>}\n            {props.next && (\n                <Anchor\n                    href={props.next.href}\n                    title={props.next.title}\n                    className={cn.NavLinksLink}\n                >\n                    {props.next.title}\n                    <ArrowRightIcon className={cn.NavLinksIcon}/>\n                </Anchor>\n            )}\n        </div>\n    )\n}\n","import React from \"react\"\n\nimport * as cn from \"./Pre.styles\"\n\nexport interface PreProps {\n    children: React.ReactNode\n}\n\nexport function Pre({children}: PreProps) {\n    return <pre className={cn.PreHost}>\n        {children}\n    </pre>\n}","import {css} from \"@linaria/core\";\n\nexport const PreHost = css`\n    margin-top: 0;\n    border-radius: 6px;\n    padding: 16px;\n    border: 0;\n\n    background-color: rgb(246, 248, 250);\n    overflow: auto;\n`;"],"names":["Anchor","_a","children","rest","__rest","React","createElement","Object","assign","Breadcrumbs","props","className","items","map","item","index","lastActive","length","Fragment","key","href","title","ArrowRightIcon","concat","NavLinksLink","NavLinksIcon","NavLinks","prev","cn","ArrowLeftIcon","next","Pre","_ref"],"mappings":"mxBAMA,SAASA,EAAOC,GAAA,IAACC,EAAkBD,EAAlBC,SAAaC,EAAIC,EAAAH,EAAlB,cACZ,OAAOI,EAAOC,cAAA,IAAAC,OAAAC,OAAA,CAAA,EAAAL,GACTD,EAET,CASM,SAAUO,EAAYC,GACxB,OACIL,EAAKC,cAAA,MAAA,CAAAK,UCVZ,qFDWYD,EAAME,MAAMC,KAAI,SAACC,EAAMC,GACpB,IAAMC,EAAaD,IAAUL,EAAME,MAAMK,OAAS,EAElD,OACIZ,EAAAC,cAACY,EAAQ,CAACC,IAAKL,EAAKM,KAAON,EAAKO,OAC3BN,EAAQ,GAAKV,EAACC,cAAAgB,EAAe,CAAAX,UCXrD,sFDYuBN,EAAAC,cAAA,MAAA,CAAKK,UAASY,iCAAAA,OCLrC,oFDM+C,kCAAAA,OAClBP,GCF7B,0FDGwB,8BACIK,MAAOP,EAAKO,OAEZP,EAAKM,OAASJ,EACXX,EAAAC,cAACN,EAAO,CAAAoB,KAAMN,EAAKM,MAAON,EAAKO,OAE/BP,EAAKO,OAKzB,IAGZ,CE1CO,IAWMG,EAWZ,2EAEYC,EAIZ,2EC1BD,SAASzB,EAAOC,GAAA,IAACC,EAAkBD,EAAlBC,SAAaC,EAAIC,EAAAH,EAAlB,cACZ,OAAOI,EAAOC,cAAA,IAAAC,OAAAC,OAAA,CAAA,EAAAL,GACTD,EAET,CAaM,SAAUwB,EAAShB,GACrB,OACIL,EAAKC,cAAA,MAAA,CAAAK,UDZZ,4ECaYD,EAAMiB,KACHtB,EAACC,cAAAN,EACG,CAAAoB,KAAMV,EAAMiB,KAAKP,KACjBC,MAAOX,EAAMiB,KAAKN,MAClBV,UAAWiB,GAEXvB,EAAAC,cAACuB,EAAc,CAAAlB,UAAWiB,IACzBlB,EAAMiB,KAAKN,OAEhBhB,EAAMC,cAAA,MAAA,MACTI,EAAMoB,MACHzB,EAAAC,cAACN,EAAM,CACHoB,KAAMV,EAAMoB,KAAKV,KACjBC,MAAOX,EAAMoB,KAAKT,MAClBV,UAAWiB,GAEVlB,EAAMoB,KAAKT,MACZhB,EAAAC,cAACgB,EAAc,CAACX,UAAWiB,KAK/C,CCvCgB,SAAAG,EAAGC,GAAqB,IAAnB9B,EAAQ8B,EAAR9B,SACjB,OAAOG,EAAAC,cAAA,MAAA,CAAKK,UCCf,+CDAQT,EAET"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/components",
-  "version": "0.1.0-xyd.1",
+  "version": "0.1.0-xyd.10",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -31,28 +31,29 @@
     },
     "./writer": {
       "import": "./dist/writer.js"
+    },
+    "./coder/themes/*": {
+      "import": "./dist/coder/themes/*"
     }
   },
-  "scripts": {
-    "clean": "rimraf build",
-    "prebuild": "pnpm clean",
-    "build": "rollup -c rollup.config.js"
-  },
   "dependencies": {
+    "@livesession/design-system-colors": "0.0.6-alpha-refactor-and-typo.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-tabs": "^1.1.1",
-    "lucide-react": "^0.447.0",
-    "@linaria/core": "^6.2.0",
-    "codehike": "^1.0.3"
+    "codehike": "^1.0.3",
+    "lucide-react": "^0.447.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "@code-hike/lighter": "^1.0.1",
+    "react": "^19.0.0"
   },
   "devDependencies": {
-    "@babel/preset-typescript": "^7.26.0",
-    "@babel/preset-react": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-flow": "^7.25.9",
+    "@babel/preset-react": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@linaria/atomic": "^6.2.0",
+    "@linaria/core": "^6.2.0",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
@@ -63,12 +64,18 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
     "postcss-import": "^16.1.0",
+    "rimraf": "^3.0.2",
     "rollup": "^4.27.4",
     "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "tsup": "^8.3.0",
-    "rimraf": "^3.0.2"
+    "tsup": "^8.3.0"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "dev": "rollup -c rollup.config.js --watch",
+    "prebuild": "pnpm clean",
+    "clean": "rimraf build"
   }
 }

package/rollup.config.js

@@ -1,5 +1,6 @@
+import fs from 'fs';
+import path from 'path';
 import {fileURLToPath} from 'url';
-import {dirname} from 'path';
 
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
@@ -10,15 +11,30 @@ import babel from '@rollup/plugin-babel';
 import postcss from 'rollup-plugin-postcss';
 import wyw from '@wyw-in-js/rollup';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
 import {createRequire} from 'module';
 
 const require = createRequire(import.meta.url);
-const {dependencies} = require('./package.json', {assert: {type: 'json'}});
+const {
+    dependencies,
+    peerDependencies,
+    devDependencies
+} = require('./package.json', {assert: {type: 'json'}});
 
-const external = Object.keys(dependencies);
+const external = [
+    ...Object.keys(dependencies),
+    ...Object.keys(peerDependencies),
+    ...Object.keys(devDependencies),
+];
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const themesDir = path.resolve(__dirname, 'src/coder/themes');
+const themes = fs.readdirSync(themesDir).reduce((acc, file) => {
+    const themeName = path.basename(file, path.extname(file));
+    acc[`coder/themes/${themeName}`] = path.join(themesDir, file);
+    return acc;
+}, {});
 
 export default [
     {
@@ -31,12 +47,13 @@ export default [
             pages: 'src/pages/index.ts',
             views: 'src/views/index.ts',
             writer: 'writer.ts',
+            ...themes
         },
         output: [
             {
                 dir: 'dist',
                 format: 'esm',
-                sourcemap: false,
+                sourcemap: true,
                 entryFileNames: '[name].js'
             }
         ],
@@ -49,6 +66,25 @@ export default [
                         '@babel/preset-react'
                     ],
                 },
+                classNameSlug: (hash, title, {file}) => {
+                    // Get the full path after 'src/components/'
+                    const pathParts = file.split('/');
+                    const componentsIndex = pathParts.indexOf('src');
+                    if (componentsIndex === -1) return `XydComponents-Component-${title}`;
+
+                    // Get everything after 'components' directory
+                    const componentPath = pathParts
+                        .slice(componentsIndex + 1)
+                        .filter(part => !part.endsWith('.styles.tsx')) // Remove styles.tsx
+                        .join('-');
+
+                    // Use the title as the style name (it's already the variable name)
+                    const styleName = title.replace(/^\$/, ''); // Remove $ prefix if present
+
+                    // TODO: in the future hash + system to override styles for specific components if hash
+                    return `XydComponents-Component-${componentPath}__${styleName}`;
+                    // return `XydComponents-Component-${componentPath}__${styleName}_${hash}`;
+                }
             }),
             postcss({
                 extract: true,
@@ -145,5 +181,14 @@ export default [
         },
         plugins: [dts()],
         external
-    }
+    },
+    ...Object.keys(themes).map(theme => ({
+        input: themes[theme],
+        output: {
+            file: `dist/${theme}.d.ts`,
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    }))
 ];

package/src/brand/Button/Button.styles.tsx

@@ -0,0 +1,31 @@
+import {css} from "@linaria/core";
+
+export const ButtonHost = css`
+    display: inline-block;
+    border: 1px solid transparent;
+    text-align: center;
+    font-weight: 600;
+    white-space: nowrap;
+    border-radius: 20px;
+    padding: 0 20px;
+    line-height: 38px;
+    font-size: 14px;
+    border-color: transparent;
+    color: #3c3c43;
+    background-color: #f7f7f8;
+
+    transition: color .25s, border-color .25s, background-color .25s;
+
+    &:hover {
+        background: #e3e3e6;
+    }
+`;
+
+export const ButtonHostSecondary = css`
+    color: #fff;
+    background-color: rgb(112, 81, 212);
+
+    &:hover {
+        background-color: rgb(95, 59, 211)
+    }
+`; 

package/src/brand/Button/Button.tsx

@@ -1,37 +1,5 @@
 import React from "react";
-import {css} from "@linaria/core";
-
-const $button = {
-    host: css`
-        display: inline-block;
-        border: 1px solid transparent;
-        text-align: center;
-        font-weight: 600;
-        white-space: nowrap;
-        border-radius: 20px;
-        padding: 0 20px;
-        line-height: 38px;
-        font-size: 14px;
-        border-color: transparent;
-        color: #3c3c43;
-        background-color: #f7f7f8;
-
-        transition: color .25s, border-color .25s, background-color .25s;
-
-        &:hover {
-            background: #e3e3e6;
-        }
-    `,
-
-    host$$secondary: css`
-        color: #fff;
-        background-color: rgb(112, 81, 212);
-
-        &:hover {
-            background-color: rgb(95, 59, 211)
-        }
-    `
-}
+import * as cn from "./Button.styles";
 
 export interface ButtonProps {
     children: React.ReactNode
@@ -40,8 +8,8 @@ export interface ButtonProps {
 
 export function Button({children, kind}: ButtonProps) {
     return <button className={`
-        ${$button.host}
-        ${kind === "secondary" && $button.host$$secondary}
+        ${cn.ButtonHost}
+        ${kind === "secondary" && cn.ButtonHostSecondary}
     `}>
         {children}
     </button>

package/src/brand/CTABanner/CTABanner.styles.tsx

@@ -0,0 +1,82 @@
+import {css} from "@linaria/core";
+
+export const CTABannerHost = css`
+    padding: 20px;
+`;
+
+export const CTABannerContainer = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 80px;
+`;
+
+export const CTABannerHero = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 40px;
+`;
+
+export const CTABannerHeadingEffect = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    background: -webkit-linear-gradient(
+            120deg,
+            var(--headingEffect-color-tertiary) 20%,
+            var(--headingEffect-color-tertiary) 30%,
+            var(--headingEffect-color-secondary) 60%,
+            var(--headingEffect-color-primary) 75%,
+            var(--headingEffect-color-primary) 85%
+    );
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: wave 5s infinite;
+    background-size: 200% 200%;
+    background-position: 50% 50%; // Start with all colors visible
+
+    @keyframes wave {
+        0% {
+            background-position: 50% 50%;
+        }
+        50% {
+            background-position: 0% 50%;
+        }
+        100% {
+            background-position: 50% 50%;
+        }
+    }
+`;
+
+export const CTABannerHeadingHost = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+`;
+
+export const CTABannerHeadingTitle = css`
+    font-size: 76px;
+    font-weight: 900;
+    text-align: center;
+    letter-spacing: 3px;
+    margin: 0;
+`;
+
+export const CTABannerHeadingSubtitle = css`
+    color: #3c3c43;
+    font-size: 46px;
+    font-weight: 600;
+    text-align: center;
+`;
+
+export const CTABannerButtonGroupHost = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+`; 

package/src/brand/CTABanner/CTABanner.tsx

@@ -1,127 +1,49 @@
-import React from "react"
-import {css} from "@linaria/core";
+import React from "react";
+import * as cn from "./CTABanner.styles";
 
-const $banner = {
-    host: css`
-        padding: 20px;
-    `,
-    container: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 80px;
-    `,
-    hero: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        gap: 40px;
-    `,
-    headingEffect: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-
-        background: -webkit-linear-gradient(
-                120deg,
-                var(--headingEffect-color-tertiary) 20%,
-                var(--headingEffect-color-tertiary) 30%,
-                var(--headingEffect-color-secondary) 60%,
-                var(--headingEffect-color-primary) 75%,
-                var(--headingEffect-color-primary) 85%
-        );
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-        animation: wave 5s infinite;
-        background-size: 200% 200%;
-        background-position: 50% 50%; // Start with all colors visible
+export interface CTABannerProps {
+    children: React.ReactNode;
+}
 
-        @keyframes wave {
-            0% {
-                background-position: 50% 50%;
-            }
-            50% {
-                background-position: 0% 50%;
-            }
-            100% {
-                background-position: 50% 50%;
-            }
-        }
-    `
+export interface CTABannerHeadingProps {
+    title: string;
+    subtitle: string;
 }
 
-export interface CTABannerProps {
-    children: React.ReactNode
+export interface CTABannerButtonGroupProps {
+    children: React.ReactNode;
 }
 
 export function CTABanner({children}: CTABannerProps) {
-    return <div className={$banner.host}>
-        <div className={$banner.container}>
-            <div className={$banner.hero}>
-                {children}
+    return (
+        <div className={cn.CTABannerHost}>
+            <div className={cn.CTABannerContainer}>
+                <div className={cn.CTABannerHero}>
+                    {children}
+                </div>
             </div>
         </div>
-    </div>
-}
-
-const $heading = {
-    host: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-    `,
-    title: css`
-        font-size: 76px;
-        font-weight: 900;
-        text-align: center;
-        letter-spacing: 3px;
-        margin: 0;
-    `,
-    subtitle: css`
-        color: #3c3c43;
-        font-size: 46px;
-        font-weight: 600;
-        text-align: center;
-    `
+    );
 }
 
-export interface CTABannerHeadingProps {
-    title: string
-    subtitle: string | React.ReactNode
-    headingEffect?: boolean
-}
-
-CTABanner.Heading = function CTABannerHeading({title, subtitle, headingEffect}: CTABannerHeadingProps) {
-    return <div className={$heading.host}>
-        <h1 className={$heading.title}>
-            {
-                headingEffect
-                    ? <span className={$banner.headingEffect}>
-                        {title}
-                      </span>
-                    : title
-            }
-        </h1>
-        <p className={$heading.subtitle}>
-            {subtitle}
-        </p>
-    </div>
+function Heading({title, subtitle}: CTABannerHeadingProps) {
+    return (
+        <div className={cn.CTABannerHeadingHost}>
+            <div className={cn.CTABannerHeadingEffect}>
+                <h1 className={cn.CTABannerHeadingTitle}>{title}</h1>
+            </div>
+            <h2 className={cn.CTABannerHeadingSubtitle}>{subtitle}</h2>
+        </div>
+    );
 }
 
-const $btnGroup = {
-    host: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-    `
+function ButtonGroup({children}: CTABannerButtonGroupProps) {
+    return (
+        <div className={cn.CTABannerButtonGroupHost}>
+            {children}
+        </div>
+    );
 }
 
-CTABanner.ButtonGroup = function CTABannerButtonGroup({children}) {
-    return <div className={$btnGroup.host}>
-        {children}
-    </div>
-}
+CTABanner.Heading = Heading;
+CTABanner.ButtonGroup = ButtonGroup;