@tcn/ui 0.3.1 → 0.3.2

package/dist/typography/headline/headline.js.map

@@ -1 +1 @@
-{"version":3,"file":"headline.js","sources":["../../../src/typography/headline/headline.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './headline.module.css';\n\nexport interface HeadlineOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type HeadlineProps = WithDetailedHTMLProps<HeadlineOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Headline({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: HeadlineProps) {\n  let As: React.ElementType;\n\n  if (size === 'lg') {\n    As = 'h1';\n  } else if (size === 'md') {\n    As = 'h2';\n  } else {\n    As = 'h3';\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['headline'], 'headline', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Headline","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","As","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAS;AAAA,EACvB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAkB;AAChB,MAAIC;AAEJ,SAAIb,MAAS,OACXa,IAAK,OACIb,MAAS,OAClBa,IAAK,OAELA,IAAK,MAGHF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,UAAa,YAAYX,CAAS;AAAA,MACzD,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"headline.js","sources":["../../../src/typography/headline/headline.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './headline.module.css';\n\nexport interface HeadlineOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type HeadlineProps = WithDetailedHTMLProps<HeadlineOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Headline({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: HeadlineProps) {\n  let As: React.ElementType;\n\n  if (size === 'lg') {\n    As = 'h1';\n  } else if (size === 'md') {\n    As = 'h2';\n  } else {\n    As = 'h3';\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['headline'], className, 'tcn-headline')}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Headline","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","As","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAS;AAAA,EACvB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAkB;AAChB,MAAIC;AAEJ,SAAIb,MAAS,OACXa,IAAK,OACIb,MAAS,OAClBa,IAAK,OAELA,IAAK,MAGHF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,UAAaX,GAAW,cAAc;AAAA,MAC7D,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/typography/subheadline/subheadline.js

@@ -1,11 +1,11 @@
-import { jsx as p } from "react/jsx-runtime";
-import { clsx as u } from "clsx";
-import { s as c } from "../../subheadline.module-C-v7zMkQ.js";
+import { jsx as g } from "react/jsx-runtime";
+import { clsx as p } from "clsx";
+import { s as u } from "../../subheadline.module-C-v7zMkQ.js";
 function j({
-  size: e = "md",
+  size: n = "md",
   emphasis: l = "normal",
   hierarchy: o = "primary",
-  color: n,
+  color: e,
   children: s,
   className: t,
   style: i = {},
@@ -14,18 +14,18 @@ function j({
   padBottom: f,
   padTop: m,
   pad: h,
-  selectable: g = !0
+  selectable: c = !0
 }) {
   let a;
-  return e === "lg" ? a = "h3" : e === "md" ? a = "h4" : a = "h5", h && (i.padding = h), r && (i.paddingInlineStart = r), d && (i.paddingInlineEnd = d), m && (i.paddingTop = m), f && (i.paddingBottom = f), n && (i.color = n), /* @__PURE__ */ p(
+  return n === "lg" ? a = "h3" : n === "md" ? a = "h4" : a = "h5", h && (i.padding = h), r && (i.paddingInlineStart = r), d && (i.paddingInlineEnd = d), m && (i.paddingTop = m), f && (i.paddingBottom = f), e && (i.color = e), /* @__PURE__ */ g(
     a,
     {
       "data-hierarchy": o,
       "data-emphasis": l,
-      "data-selectable": g,
-      className: u(c.subheadline, "subheadline", t),
+      "data-selectable": c,
+      className: p(u.subheadline, t, "tcn-subheadline"),
       style: i,
-      "data-size": e,
+      "data-size": n,
       children: s
     }
   );

package/dist/typography/subheadline/subheadline.js.map

@@ -1 +1 @@
-{"version":3,"file":"subheadline.js","sources":["../../../src/typography/subheadline/subheadline.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './subheadline.module.css';\n\nexport interface SubheadlineOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type SubheadlineProps = WithDetailedHTMLProps<\n  SubheadlineOwnProps,\n  'h3' | 'h4' | 'h5'\n>;\n\nexport function Subheadline({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: SubheadlineProps) {\n  let As: React.ElementType;\n\n  if (size === 'lg') {\n    As = 'h3';\n  } else if (size === 'md') {\n    As = 'h4';\n  } else {\n    As = 'h5';\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['subheadline'], 'subheadline', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Subheadline","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","As","jsx","clsx","styles"],"mappings":";;;AAyBO,SAASA,EAAY;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAqB;AACnB,MAAIC;AAEJ,SAAIb,MAAS,OACXa,IAAK,OACIb,MAAS,OAClBa,IAAK,OAELA,IAAK,MAGHF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,aAAgB,eAAeX,CAAS;AAAA,MAC/D,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"subheadline.js","sources":["../../../src/typography/subheadline/subheadline.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './subheadline.module.css';\n\nexport interface SubheadlineOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type SubheadlineProps = WithDetailedHTMLProps<\n  SubheadlineOwnProps,\n  'h3' | 'h4' | 'h5'\n>;\n\nexport function Subheadline({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: SubheadlineProps) {\n  let As: React.ElementType;\n\n  if (size === 'lg') {\n    As = 'h3';\n  } else if (size === 'md') {\n    As = 'h4';\n  } else {\n    As = 'h5';\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['subheadline'], className, 'tcn-subheadline')}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Subheadline","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","As","jsx","clsx","styles"],"mappings":";;;AAyBO,SAASA,EAAY;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAqB;AACnB,MAAIC;AAEJ,SAAIb,MAAS,OACXa,IAAK,OACIb,MAAS,OAClBa,IAAK,OAELA,IAAK,MAGHF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,aAAgBX,GAAW,iBAAiB;AAAA,MACnE,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/typography/title/title.js

@@ -5,27 +5,27 @@ import '../../title.css';const I = "_title_64bd0fd", T = { title: I }, N = x(fun
   size: n = "md",
   emphasis: m = "normal",
   hierarchy: c = "primary",
-  color: e,
+  color: r,
   children: p,
   className: g,
   style: i = {},
-  padStart: r,
+  padStart: e,
   padEnd: a,
   padBottom: f,
-  padTop: l,
-  pad: d,
+  padTop: d,
+  pad: l,
   selectable: h = !0,
   as: o
 }, s) {
   let t = o;
-  return o == null && (n === "lg" ? t = "h1" : n === "md" ? t = "h2" : t = "h3"), d && (i.padding = d), r && (i.paddingInlineStart = r), a && (i.paddingInlineEnd = a), l && (i.paddingTop = l), f && (i.paddingBottom = f), e && (i.color = e), /* @__PURE__ */ u(
+  return o == null && (n === "lg" ? t = "h1" : n === "md" ? t = "h2" : t = "h3"), l && (i.padding = l), e && (i.paddingInlineStart = e), a && (i.paddingInlineEnd = a), d && (i.paddingTop = d), f && (i.paddingBottom = f), r && (i.color = r), /* @__PURE__ */ u(
     t,
     {
       ref: s,
       "data-hierarchy": c,
       "data-emphasis": m,
       "data-selectable": h,
-      className: b(T.title, "title", "tcn-typography", "tcn-title", g),
+      className: b(T.title, g, "tcn-typography", "tcn-title"),
       style: i,
       "data-size": n,
       children: p

package/dist/typography/title/title.js.map

@@ -1 +1 @@
-{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(\n  {\n    size = 'md',\n    emphasis = 'normal',\n    hierarchy = 'primary',\n    color,\n    children,\n    className,\n    style = {},\n    padStart,\n    padEnd,\n    padBottom,\n    padTop,\n    pad,\n    selectable = true,\n    as,\n  },\n  ref\n) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      ref={ref}\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['title'], 'title', 'tcn-typography', 'tcn-title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["Title","forwardRef","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","ref","As","jsx","clsx","styles"],"mappings":";;;8CAuBaA,IAAQC,EAA2C,SAC9D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,IAAAC;AACF,GACAC,GACA;AACA,MAAIC,IAAwBF;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXe,IAAK,OACIf,MAAS,OAClBe,IAAK,OAELA,IAAK,OAILJ,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAa;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWK,EAAKC,EAAO,OAAU,SAAS,kBAAkB,aAAab,CAAS;AAAA,MAClF,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(\n  {\n    size = 'md',\n    emphasis = 'normal',\n    hierarchy = 'primary',\n    color,\n    children,\n    className,\n    style = {},\n    padStart,\n    padEnd,\n    padBottom,\n    padTop,\n    pad,\n    selectable = true,\n    as,\n  },\n  ref\n) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      ref={ref}\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['title'], className, 'tcn-typography', 'tcn-title')}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["Title","forwardRef","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","ref","As","jsx","clsx","styles"],"mappings":";;;8CAuBaA,IAAQC,EAA2C,SAC9D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,IAAAC;AACF,GACAC,GACA;AACA,MAAIC,IAAwBF;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXe,IAAK,OACIf,MAAS,OAClBe,IAAK,OAELA,IAAK,OAILJ,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAa;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWK,EAAKC,EAAO,OAAUb,GAAW,kBAAkB,WAAW;AAAA,MACzE,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/unit_input.css

@@ -1 +1 @@
-._unit-input_4bd8bc8{position:relative;opacity:1}._unit-input-flex-box_8db2f9b{z-index:inherit}._unit-input-number_c95f85a{padding-inline-end:8px}._unit-input-number_c95f85a,._unit-input-select_1bbbad9{position:relative;z-index:1}._unit-input-number_c95f85a:focus,._unit-input-select_1bbbad9:focus{z-index:2}
+@layer tcn-system{:where(._unit-input_4bd8bc8){position:relative;opacity:1}:where(._unit-input-flex-box_8db2f9b){z-index:inherit}:where(._unit-input-number_c95f85a){padding-inline-end:8px}:where(._unit-input-number_c95f85a),:where(._unit-input-select_1bbbad9){position:relative;z-index:1}:where(._unit-input-number_c95f85a:focus),:where(._unit-input-select_1bbbad9:focus){z-index:2}}

package/dist/utility_bar.css

@@ -1 +1 @@
-._utility-bar_3a92315{width:100%;min-height:0}
+@layer tcn-system{:where(._utility-bar_3a92315){width:100%;min-height:0}}

package/dist/v_body.css

@@ -1 +1 @@
-._v-body_d8f1917{min-height:0;flex-grow:1;width:100%}
+@layer tcn-system{._v-body_d8f1917{min-height:0;flex-grow:1;width:100%}}

package/dist/window.css

@@ -1 +1 @@
-._window_7610fdb{position:relative;box-sizing:border-box}
+@layer tcn-system{:where(._window_7610fdb){position:relative;box-sizing:border-box}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -134,8 +134,8 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "react-color": "^2.19.3",
-    "@tcn/icons": "2.2.0",
-    "@tcn/state": "1.1.0"
+    "@tcn/icons": "2.2.1",
+    "@tcn/state": "1.1.1"
   },
   "scripts": {
     "build": "vite build",

package/src/actions/__docs__/actions.mdx

@@ -7,14 +7,26 @@ import { Gallery } from './components/gallery';
 
 # Actions
 
-Interactive elements that trigger operations or set configuration for application tooling.
+Interactive elements that triggers an action, or event. For example submitting a form, closing a modal, or deleting an entity.
+
+- [Actions](#actions)
+  - [Button](#button)
+  - [Utility (Slim Button)](#utility)
+  - [Button Group](#button-group)
 
 ## Button
 
-Relaxed, text based actions for high level page decisions (Cancel, Save, etc.)
+Relaxed, text based actions for high level page, or surface decisions (Cancel, Save, etc.)
 
 <Gallery minColumnWidth="350px">
 
+<Showcase
+  title="Baseline"
+  description="The default, out-of-the-box button with no additional props."
+  of={ActionStories.ButtonBaselineShowcase}
+  width="180px"
+/>
+
 <Showcase
   title="Hierarchy"
   description="Visually indicates the importance of an action and its relationship to other actions. A primary action should be limited to one per surface."
@@ -93,6 +105,13 @@ Compact, icon-based actions.  Used as re-usable tooling for item rows, utility b
 
 <Gallery>
 
+<Showcase
+  title="Baseline"
+  description="The default, out-of-the-box utility button with no additional props."
+  of={ActionStories.SlimButtonBaselineShowcase}
+  width="180px"
+/>
+
 <Showcase
   title="Hierarchy"
   description="Visually indicates the importance of an action and its relationship to other actions. A primary action should be limited to one per surface."
@@ -129,3 +148,47 @@ Compact, icon-based actions.  Used as re-usable tooling for item rows, utility b
 />
 
 </Gallery>
+
+## Button Group
+
+Visually grouped and styled buttons for closely related actions. The `hierarchy` and `size` props set on the ButtonGroup are automatically inherited by all child Button elements, ensuring visual consistency without needing to configure each button individually.
+
+<Gallery minColumnWidth="380px">
+
+<Showcase
+  title="Baseline"
+  description="The default, out-of-the-box button group with no additional props."
+  of={ActionStories.ButtonGroupBaselineShowcase}
+/>
+
+<Showcase
+  title="Hierarchy"
+  description="Set hierarchy on the parent ButtonGroup to style all child buttons uniformly. Individual buttons do not need hierarchy props—they inherit from the group."
+  of={ActionStories.ButtonGroupHierarchy}
+/>
+
+<Showcase
+  title="Size"
+  description="Set size on the parent ButtonGroup to control all child button sizes uniformly. Individual buttons inherit the group's size automatically."
+  of={ActionStories.ButtonGroupSizes}
+/>
+
+<Showcase
+  title="Disabled"
+  description="Individual buttons within a group can be disabled while others remain active."
+  of={ActionStories.ButtonGroupDisabled}
+/>
+
+<Showcase
+  title="Severity"
+  description="Severity can still be set on individual buttons within a group if a specific action should be elevated."
+  of={ActionStories.ButtonGroupSeverity}
+/>
+
+<Showcase
+  title="With Icons"
+  description="Buttons within groups can contain icons, either standalone or combined with text."
+  of={ActionStories.ButtonGroupWithIcons}
+/>
+
+</Gallery>

package/src/actions/__docs__/actions.stories.tsx

@@ -4,6 +4,7 @@ import { VStack } from '../../stacks/v_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { Button } from '../button/button/button.js';
 import { SlimButton } from '../button/slim_button/slim_button.js';
+import { ButtonGroup } from '../button/button_group/button_group.js';
 import { SearchIcon } from '@tcn/icons/search_icon.js';
 import { PlusIcon } from '@tcn/icons/plus_icon.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
@@ -83,6 +84,18 @@ const severityOptions: { name: string; severity: ActionSeverity }[] = [
   },
 ];
 
+// ============================================================================
+// BASELINE
+// ============================================================================
+
+export const ButtonBaselineShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <Button>Baseline</Button>
+    </HStack>
+  ),
+};
+
 // ============================================================================
 // HIERARCHY EXAMPLES
 // ============================================================================
@@ -220,8 +233,22 @@ export const FullWidth: Story = {
 
 export const SeverityShowcase: Story = {
   render: () => (
-    <HStack vAlign="center">
-      <VStack gap="12px" vAlign="center" width="200px">
+    <HStack vAlign="center" gap="12px">
+      <VStack gap="12px" vAlign="center" width="120px">
+        {severityOptions.map(({ name, severity }) => (
+          <Button key={name} hierarchy="tertiary" severity={severity} width="100%">
+            {name}
+          </Button>
+        ))}
+      </VStack>
+      <VStack gap="12px" vAlign="center" width="120px">
+        {severityOptions.map(({ name, severity }) => (
+          <Button key={name} hierarchy="secondary" severity={severity} width="100%">
+            {name}
+          </Button>
+        ))}
+      </VStack>
+      <VStack gap="12px" vAlign="center" width="120px">
         {severityOptions.map(({ name, severity }) => (
           <Button key={name} hierarchy="primary" severity={severity} width="100%">
             {name}
@@ -236,6 +263,16 @@ export const SeverityShowcase: Story = {
 // SLIM BUTTON EXAMPLES
 // ============================================================================
 
+export const SlimButtonBaselineShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <SlimButton>
+        <SearchIcon />
+      </SlimButton>
+    </HStack>
+  ),
+};
+
 export const SlimButtonHierarchy: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
@@ -307,3 +344,138 @@ export const SlimButtonSeverity: Story = {
     </HStack>
   ),
 };
+
+// ============================================================================
+// BUTTON GROUP EXAMPLES
+// ============================================================================
+
+export const ButtonGroupBaselineShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <ButtonGroup>
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+    </HStack>
+  ),
+};
+
+export const ButtonGroupHierarchy: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup hierarchy="tertiary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupSeverity: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup hierarchy="tertiary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="dangerous">Dangerous</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="cautious">Cautious</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="tertiary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="neutral">Neutral</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="suggested">Suggested</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="encouraged">Encouraged</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupSizes: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup size="sm">
+        <Button>Small</Button>
+        <Button>Group</Button>
+      </ButtonGroup>
+      <ButtonGroup size="md">
+        <Button>Medium</Button>
+        <Button>Group</Button>
+      </ButtonGroup>
+      <ButtonGroup size="lg">
+        <Button>Large</Button>
+        <Button>Group</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupDisabled: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup hierarchy="tertiary">
+        <Button>Active</Button>
+        <Button disabled>Disabled</Button>
+        <Button>Active</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>Active</Button>
+        <Button disabled>Disabled</Button>
+        <Button>Active</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <Button>Active</Button>
+        <Button disabled>Disabled</Button>
+        <Button>Active</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupWithIcons: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup>
+        <Button>
+          First
+          <Spacer width="6px" />
+          <PlusIcon />
+        </Button>
+        <Button>
+          Second
+          <Spacer width="6px" />
+          <SearchIcon />
+        </Button>
+        <Button>
+          Third
+          <Spacer width="6px" />
+          <PlusIcon />
+        </Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};

package/src/actions/button/__stories__/button_group.stories.tsx

@@ -4,6 +4,11 @@ import { Spacer } from '../../../stacks/spacer.js';
 import React from 'react';
 import { Button } from '../button/button.js';
 import { ButtonGroup } from '../button_group/button_group.js';
+import { SlimButton } from '../slim_button/slim_button.js';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { VStack } from '../../../stacks/v_stack.js';
 
 export default {
   title: 'Actions/Button Group',
@@ -104,3 +109,61 @@ export function PrimaryCustomColor() {
     </ButtonGroup>
   );
 }
+
+export function SlimButtonGroup() {
+  return (
+    <VStack gap="12px">
+      <ButtonGroup hierarchy="tertiary">
+        <SlimButton>
+          <CrossIcon />
+        </SlimButton>
+        <SlimButton>
+          <SearchIcon />
+        </SlimButton>
+        <SlimButton>
+          <PlusIcon />
+        </SlimButton>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <SlimButton>
+          <CrossIcon />
+        </SlimButton>
+        <SlimButton>
+          <SearchIcon />
+        </SlimButton>
+        <SlimButton>
+          <PlusIcon />
+        </SlimButton>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <SlimButton>
+          <CrossIcon />
+        </SlimButton>
+        <SlimButton>
+          <SearchIcon />
+        </SlimButton>
+        <SlimButton>
+          <PlusIcon />
+        </SlimButton>
+      </ButtonGroup>
+    </VStack>
+  );
+}
+
+export function MixedTesting() {
+  return (
+    <ButtonGroup hierarchy="primary">
+      <SlimButton>
+        <SearchIcon />
+      </SlimButton>
+      <SlimButton>
+        <PlusIcon />
+      </SlimButton>
+      <Button>
+        Third
+        <Spacer width="4px" />
+        <LockTwoIcon />
+      </Button>
+    </ButtonGroup>
+  );
+}

package/src/actions/button/__stories__/select_group.stories.tsx

@@ -4,6 +4,9 @@ import { Spacer } from '../../../stacks/spacer.js';
 import React, { useState } from 'react';
 import { SelectGroup } from '../select_group/select_group.js';
 import { SingleSelectGroup } from '../select_group/single_select_group.js';
+import { TextBoldIcon } from '@tcn/icons/text_bold_icon.js';
+import { TextItalicIcon } from '@tcn/icons/text_italic_icon.js';
+import { TextUnderlineIcon } from '@tcn/icons/text_underline_icon.js';
 
 export default {
   title: 'Actions/Select Group',
@@ -17,14 +20,36 @@ export default {
   },
 };
 
-function useSBSelectGroupState() {
-  const [value, setValue] = useState<string[]>([]);
+function useSBSelectGroupState(initialValue: string[] = []) {
+  const [value, setValue] = useState<string[]>(initialValue);
   const handleChange = (newValue: string[]) => {
     setValue(newValue);
   };
   return { value, setValue, handleChange };
 }
 
+export function Baseline() {
+  const { value, handleChange } = useSBSelectGroupState();
+
+  return (
+    <SelectGroup value={value} onChange={handleChange}>
+      <option value="1" title="First">
+        First
+      </option>
+      <option value="2" title="Second">
+        Second
+      </option>
+      <option value="3" title="Third">
+        <HStack inline width="auto">
+          Third
+          <Spacer width="4px" />
+          <LockTwoIcon />
+        </HStack>
+      </option>
+    </SelectGroup>
+  );
+}
+
 export function FullyDisabled() {
   const { value, handleChange } = useSBSelectGroupState();
 
@@ -70,7 +95,7 @@ export function Multiselect() {
 }
 
 export function Disabled() {
-  const { value, handleChange } = useSBSelectGroupState();
+  const { value, handleChange } = useSBSelectGroupState(['3']);
 
   return (
     <SelectGroup value={value} onChange={handleChange}>
@@ -80,7 +105,7 @@ export function Disabled() {
       <option value="2" disabled title="Second">
         Second
       </option>
-      <option value="3" title="Third">
+      <option value="3" title="Third" disabled>
         <HStack inline width="auto">
           Third
           <Spacer width="4px" />
@@ -154,3 +179,21 @@ export function SingleSelectDisabled() {
     </SingleSelectGroup>
   );
 }
+
+export function SelectUtilityGroup() {
+  const { value, handleChange } = useSBSelectGroupState();
+
+  return (
+    <SelectGroup value={value} onChange={handleChange}>
+      <option value="bold" title="Bold">
+        <TextBoldIcon />
+      </option>
+      <option value="italic" title="Italic">
+        <TextItalicIcon />
+      </option>
+      <option value="underline" title="Underline">
+        <TextUnderlineIcon />
+      </option>
+    </SelectGroup>
+  );
+}

package/src/actions/button/base_button/base_button.module.css

@@ -1,15 +1,17 @@
-.base-button {
-  width: auto;
-  height: auto;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  color: var(--button-text-color, #fff);
-  background-color: var(--button-color, var(--accent-color, #ccc));
-}
+@layer tcn-system {
+  :where(.base-button) {
+    width: auto;
+    height: auto;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    color: var(--tcn-button-text-color, #fff);
+    background-color: var(--tcn-button-color, var(--accent-color, #ccc));
+  }
 
-.base-button[data-width="default"] {
-  width: auto;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
+  :where(.base-button[data-width="default"]) {
+    width: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: auto;
+  }
 }