@brycks/core-front 0.2.8 → 0.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/components/feedback/Drawer/Drawer.cjs +2 -2
  2. package/dist/components/feedback/Drawer/Drawer.cjs.map +1 -1
  3. package/dist/components/feedback/Drawer/Drawer.js +78 -74
  4. package/dist/components/feedback/Drawer/Drawer.js.map +1 -1
  5. package/dist/components/feedback/Modal/Modal.cjs +1 -1
  6. package/dist/components/feedback/Modal/Modal.cjs.map +1 -1
  7. package/dist/components/feedback/Modal/Modal.js +76 -70
  8. package/dist/components/feedback/Modal/Modal.js.map +1 -1
  9. package/dist/components/form/FormLabel/FormLabel.cjs +1 -1
  10. package/dist/components/form/FormLabel/FormLabel.cjs.map +1 -1
  11. package/dist/components/form/FormLabel/FormLabel.js +40 -40
  12. package/dist/components/form/FormLabel/FormLabel.js.map +1 -1
  13. package/dist/components/form/Input/Input.cjs +1 -1
  14. package/dist/components/form/Input/Input.js +13 -13
  15. package/dist/components/primitives/Button/Button.styles.cjs +1 -1
  16. package/dist/components/primitives/Button/Button.styles.cjs.map +1 -1
  17. package/dist/components/primitives/Button/Button.styles.js +24 -24
  18. package/dist/components/primitives/Button/Button.styles.js.map +1 -1
  19. package/dist/components/typography/Heading/Heading.cjs +1 -1
  20. package/dist/components/typography/Heading/Heading.cjs.map +1 -1
  21. package/dist/components/typography/Heading/Heading.js +42 -32
  22. package/dist/components/typography/Heading/Heading.js.map +1 -1
  23. package/dist/components/typography/Text/Text.cjs +1 -1
  24. package/dist/components/typography/Text/Text.cjs.map +1 -1
  25. package/dist/components/typography/Text/Text.js +59 -36
  26. package/dist/components/typography/Text/Text.js.map +1 -1
  27. package/dist/styles.css +1 -1
  28. package/package.json +1 -1
package/dist/components/primitives/Button/Button.styles.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../design-system/primitives/sizing.cjs"),s=require("../../../design-system/primitives/typography.cjs"),h=require("../../../design-system/primitives/transitions.cjs"),g=require("../../../design-system/primitives/opacity.cjs"),v={xs:{height:e.componentHeights.xs,paddingX:e.componentPaddingX.xs,fontSize:s.componentFontSize.xs,iconSize:e.iconSizes.xs,gap:e.componentGap.xs,radius:"var(--brycks-radius-md)"},sm:{height:e.componentHeights.sm,paddingX:e.componentPaddingX.sm,fontSize:s.componentFontSize.sm,iconSize:e.iconSizes.sm,gap:e.componentGap.sm,radius:"var(--brycks-radius-md)"},md:{height:e.componentHeights.md,paddingX:e.componentPaddingX.md,fontSize:s.componentFontSize.md,iconSize:e.iconSizes.md,gap:e.componentGap.md,radius:"var(--brycks-radius-default)"},lg:{height:e.componentHeights.lg,paddingX:e.componentPaddingX.lg,fontSize:s.componentFontSize.lg,iconSize:e.iconSizes.lg,gap:e.componentGap.md,radius:"var(--brycks-radius-lg)"},xl:{height:e.componentHeights.xl,paddingX:e.componentPaddingX.xl,fontSize:s.componentFontSize.xl,iconSize:e.iconSizes.xl,gap:e.componentGap.lg,radius:"var(--brycks-radius-xl)"}},f={primary:{solid:{bg:"var(--brycks-primary-default)",hoverBg:"var(--brycks-primary-hover)",activeBg:"var(--brycks-primary-active)",text:"var(--brycks-primary-foreground)"},outline:{border:"var(--brycks-primary-default)",hoverBg:"var(--brycks-primary-muted)",text:"var(--brycks-primary-default)"},ghost:{hoverBg:"var(--brycks-primary-muted)",text:"var(--brycks-primary-default)"},soft:{bg:"var(--brycks-primary-muted)",hoverBg:"var(--brycks-primary-soft-hover)",text:"var(--brycks-primary-default)"},link:{text:"var(--brycks-primary-default)",hoverText:"var(--brycks-primary-hover)"}},accent:{solid:{bg:"var(--brycks-accent-default)",hoverBg:"var(--brycks-accent-hover)",activeBg:"var(--brycks-accent-active)",text:"var(--brycks-accent-foreground)"},outline:{border:"var(--brycks-accent-default)",hoverBg:"var(--brycks-accent-muted)",text:"var(--brycks-accent-default)"},ghost:{hoverBg:"var(--brycks-accent-muted)",text:"var(--brycks-accent-default)"},soft:{bg:"var(--brycks-accent-muted)",hoverBg:"var(--brycks-accent-soft-hover)",text:"var(--brycks-accent-default)"},link:{text:"var(--brycks-accent-default)",hoverText:"var(--brycks-accent-hover)"}},neutral:{solid:{bg:"var(--brycks-foreground-default)",hoverBg:"var(--brycks-foreground-muted)",activeBg:"var(--brycks-foreground-subtle)",text:"var(--brycks-background-app)"},outline:{border:"var(--brycks-border-strong)",hoverBg:"var(--brycks-background-muted)",text:"var(--brycks-foreground-default)"},ghost:{hoverBg:"var(--brycks-background-muted)",text:"var(--brycks-foreground-default)"},soft:{bg:"var(--brycks-background-muted)",hoverBg:"var(--brycks-background-subtle)",text:"var(--brycks-foreground-default)"},link:{text:"var(--brycks-foreground-default)",hoverText:"var(--brycks-foreground-muted)"}},success:{solid:{bg:"var(--brycks-success-default)",hoverBg:"var(--brycks-success-hover)",activeBg:"var(--brycks-success-hover)",text:"var(--brycks-success-foreground)"},outline:{border:"var(--brycks-success-default)",hoverBg:"var(--brycks-success-muted)",text:"var(--brycks-success-default)"},ghost:{hoverBg:"var(--brycks-success-muted)",text:"var(--brycks-success-default)"},soft:{bg:"var(--brycks-success-muted)",hoverBg:"var(--brycks-success-soft-hover)",text:"var(--brycks-success-default)"},link:{text:"var(--brycks-success-default)",hoverText:"var(--brycks-success-hover)"}},warning:{solid:{bg:"var(--brycks-warning-default)",hoverBg:"var(--brycks-warning-hover)",activeBg:"var(--brycks-warning-hover)",text:"var(--brycks-warning-foreground)"},outline:{border:"var(--brycks-warning-default)",hoverBg:"var(--brycks-warning-muted)",text:"var(--brycks-warning-default)"},ghost:{hoverBg:"var(--brycks-warning-muted)",text:"var(--brycks-warning-default)"},soft:{bg:"var(--brycks-warning-muted)",hoverBg:"var(--brycks-warning-soft-hover)",text:"var(--brycks-warning-default)"},link:{text:"var(--brycks-warning-default)",hoverText:"var(--brycks-warning-hover)"}},error:{solid:{bg:"var(--brycks-error-default)",hoverBg:"var(--brycks-error-hover)",activeBg:"var(--brycks-error-hover)",text:"var(--brycks-error-foreground)"},outline:{border:"var(--brycks-error-default)",hoverBg:"var(--brycks-error-muted)",text:"var(--brycks-error-default)"},ghost:{hoverBg:"var(--brycks-error-muted)",text:"var(--brycks-error-default)"},soft:{bg:"var(--brycks-error-muted)",hoverBg:"var(--brycks-error-soft-hover)",text:"var(--brycks-error-default)"},link:{text:"var(--brycks-error-default)",hoverText:"var(--brycks-error-hover)"}}};function m(b){const{variant:c,intent:u,size:l,fullWidth:k,isIconOnly:d}=b,a=v[l],o=f[u][c],n={display:"inline-flex",alignItems:"center",justifyContent:"center",gap:a.gap,height:a.height,minWidth:d?a.height:void 0,width:k?"100%":void 0,padding:d?0:`0 ${a.paddingX}px`,fontSize:a.fontSize,fontWeight:s.componentFontWeight.medium,fontFamily:"var(--brycks-font-sans)",lineHeight:s.componentLineHeight.none,borderRadius:a.radius,border:"none",outline:"none",cursor:"pointer",userSelect:"none",textDecoration:"none",transition:h.transition.quick,WebkitTapHighlightColor:"transparent"};switch(c){case"solid":{const r=o;Object.assign(n,{backgroundColor:r.bg,color:r.text,boxShadow:"var(--brycks-shadow-xs)"});break}case"outline":{const r=o;Object.assign(n,{backgroundColor:"transparent",color:r.text,border:`1px solid ${r.border}`});break}case"ghost":{Object.assign(n,{backgroundColor:"transparent",color:o.text});break}case"soft":{const r=o;Object.assign(n,{backgroundColor:r.bg,color:r.text});break}case"link":{Object.assign(n,{backgroundColor:"transparent",color:o.text,height:"auto",padding:0,borderRadius:0});break}}const t={};switch(c){case"solid":{const r=o;t.backgroundColor=r.hoverBg,t.boxShadow="var(--brycks-shadow-sm)";break}case"outline":{const r=o;t.backgroundColor=r.hoverBg;break}case"ghost":{const r=o;t.backgroundColor=r.hoverBg;break}case"soft":{const r=o;t.backgroundColor=r.hoverBg;break}case"link":{const r=o;t.color=r.hoverText,t.textDecoration="underline";break}}const i={transform:c!=="link"?`scale(${g.scale.pressed})`:void 0};if(c==="solid"){const r=o;i.backgroundColor=r.activeBg,i.boxShadow="var(--brycks-shadow-xs)"}const y={opacity:g.stateOpacity.disabled,cursor:"not-allowed",pointerEvents:"none"};return{base:n,hover:t,active:i,disabled:y,loading:{cursor:"wait",pointerEvents:"none"}}}exports.getButtonStyles=m;exports.sizeConfig=v;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../design-system/primitives/sizing.cjs"),h=require("../../../design-system/primitives/transitions.cjs"),d=require("../../../design-system/primitives/typography.cjs"),v=require("../../../design-system/primitives/opacity.cjs"),g={xs:{height:e.componentHeights.xs,paddingX:e.componentPaddingX.xs,fontSize:"var(--brycks-fs-ui-xs)",iconSize:e.iconSizes.xs,gap:e.componentGap.xs,radius:"var(--brycks-radius-md)"},sm:{height:e.componentHeights.sm,paddingX:e.componentPaddingX.sm,fontSize:"var(--brycks-fs-ui-sm)",iconSize:e.iconSizes.sm,gap:e.componentGap.sm,radius:"var(--brycks-radius-md)"},md:{height:e.componentHeights.md,paddingX:e.componentPaddingX.md,fontSize:"var(--brycks-fs-ui-md)",iconSize:e.iconSizes.md,gap:e.componentGap.md,radius:"var(--brycks-radius-default)"},lg:{height:e.componentHeights.lg,paddingX:e.componentPaddingX.lg,fontSize:"var(--brycks-fs-ui-lg)",iconSize:e.iconSizes.lg,gap:e.componentGap.md,radius:"var(--brycks-radius-lg)"},xl:{height:e.componentHeights.xl,paddingX:e.componentPaddingX.xl,fontSize:"var(--brycks-fs-ui-xl)",iconSize:e.iconSizes.xl,gap:e.componentGap.lg,radius:"var(--brycks-radius-xl)"}},f={primary:{solid:{bg:"var(--brycks-primary-default)",hoverBg:"var(--brycks-primary-hover)",activeBg:"var(--brycks-primary-active)",text:"var(--brycks-primary-foreground)"},outline:{border:"var(--brycks-primary-default)",hoverBg:"var(--brycks-primary-muted)",text:"var(--brycks-primary-default)"},ghost:{hoverBg:"var(--brycks-primary-muted)",text:"var(--brycks-primary-default)"},soft:{bg:"var(--brycks-primary-muted)",hoverBg:"var(--brycks-primary-soft-hover)",text:"var(--brycks-primary-default)"},link:{text:"var(--brycks-primary-default)",hoverText:"var(--brycks-primary-hover)"}},accent:{solid:{bg:"var(--brycks-accent-default)",hoverBg:"var(--brycks-accent-hover)",activeBg:"var(--brycks-accent-active)",text:"var(--brycks-accent-foreground)"},outline:{border:"var(--brycks-accent-default)",hoverBg:"var(--brycks-accent-muted)",text:"var(--brycks-accent-default)"},ghost:{hoverBg:"var(--brycks-accent-muted)",text:"var(--brycks-accent-default)"},soft:{bg:"var(--brycks-accent-muted)",hoverBg:"var(--brycks-accent-soft-hover)",text:"var(--brycks-accent-default)"},link:{text:"var(--brycks-accent-default)",hoverText:"var(--brycks-accent-hover)"}},neutral:{solid:{bg:"var(--brycks-foreground-default)",hoverBg:"var(--brycks-foreground-muted)",activeBg:"var(--brycks-foreground-subtle)",text:"var(--brycks-background-app)"},outline:{border:"var(--brycks-border-strong)",hoverBg:"var(--brycks-background-muted)",text:"var(--brycks-foreground-default)"},ghost:{hoverBg:"var(--brycks-background-muted)",text:"var(--brycks-foreground-default)"},soft:{bg:"var(--brycks-background-muted)",hoverBg:"var(--brycks-background-subtle)",text:"var(--brycks-foreground-default)"},link:{text:"var(--brycks-foreground-default)",hoverText:"var(--brycks-foreground-muted)"}},success:{solid:{bg:"var(--brycks-success-default)",hoverBg:"var(--brycks-success-hover)",activeBg:"var(--brycks-success-hover)",text:"var(--brycks-success-foreground)"},outline:{border:"var(--brycks-success-default)",hoverBg:"var(--brycks-success-muted)",text:"var(--brycks-success-default)"},ghost:{hoverBg:"var(--brycks-success-muted)",text:"var(--brycks-success-default)"},soft:{bg:"var(--brycks-success-muted)",hoverBg:"var(--brycks-success-soft-hover)",text:"var(--brycks-success-default)"},link:{text:"var(--brycks-success-default)",hoverText:"var(--brycks-success-hover)"}},warning:{solid:{bg:"var(--brycks-warning-default)",hoverBg:"var(--brycks-warning-hover)",activeBg:"var(--brycks-warning-hover)",text:"var(--brycks-warning-foreground)"},outline:{border:"var(--brycks-warning-default)",hoverBg:"var(--brycks-warning-muted)",text:"var(--brycks-warning-default)"},ghost:{hoverBg:"var(--brycks-warning-muted)",text:"var(--brycks-warning-default)"},soft:{bg:"var(--brycks-warning-muted)",hoverBg:"var(--brycks-warning-soft-hover)",text:"var(--brycks-warning-default)"},link:{text:"var(--brycks-warning-default)",hoverText:"var(--brycks-warning-hover)"}},error:{solid:{bg:"var(--brycks-error-default)",hoverBg:"var(--brycks-error-hover)",activeBg:"var(--brycks-error-hover)",text:"var(--brycks-error-foreground)"},outline:{border:"var(--brycks-error-default)",hoverBg:"var(--brycks-error-muted)",text:"var(--brycks-error-default)"},ghost:{hoverBg:"var(--brycks-error-muted)",text:"var(--brycks-error-default)"},soft:{bg:"var(--brycks-error-muted)",hoverBg:"var(--brycks-error-soft-hover)",text:"var(--brycks-error-default)"},link:{text:"var(--brycks-error-default)",hoverText:"var(--brycks-error-hover)"}}};function m(b){const{variant:c,intent:u,size:l,fullWidth:k,isIconOnly:i}=b,s=g[l],o=f[u][c],a={display:"inline-flex",alignItems:"center",justifyContent:"center",gap:s.gap,height:s.height,minWidth:i?s.height:void 0,width:k?"100%":void 0,padding:i?0:`0 ${s.paddingX}px`,fontSize:s.fontSize,fontWeight:d.componentFontWeight.medium,fontFamily:"var(--brycks-font-sans)",lineHeight:d.componentLineHeight.none,borderRadius:s.radius,border:"none",outline:"none",cursor:"pointer",userSelect:"none",textDecoration:"none",transition:h.transition.quick,WebkitTapHighlightColor:"transparent"};switch(c){case"solid":{const r=o;Object.assign(a,{backgroundColor:r.bg,color:r.text,boxShadow:"var(--brycks-shadow-xs)"});break}case"outline":{const r=o;Object.assign(a,{backgroundColor:"transparent",color:r.text,border:`1px solid ${r.border}`});break}case"ghost":{Object.assign(a,{backgroundColor:"transparent",color:o.text});break}case"soft":{const r=o;Object.assign(a,{backgroundColor:r.bg,color:r.text});break}case"link":{Object.assign(a,{backgroundColor:"transparent",color:o.text,height:"auto",padding:0,borderRadius:0});break}}const t={};switch(c){case"solid":{const r=o;t.backgroundColor=r.hoverBg,t.boxShadow="var(--brycks-shadow-sm)";break}case"outline":{const r=o;t.backgroundColor=r.hoverBg;break}case"ghost":{const r=o;t.backgroundColor=r.hoverBg;break}case"soft":{const r=o;t.backgroundColor=r.hoverBg;break}case"link":{const r=o;t.color=r.hoverText,t.textDecoration="underline";break}}const n={transform:c!=="link"?`scale(${v.scale.pressed})`:void 0};if(c==="solid"){const r=o;n.backgroundColor=r.activeBg,n.boxShadow="var(--brycks-shadow-xs)"}const y={opacity:v.stateOpacity.disabled,cursor:"not-allowed",pointerEvents:"none"};return{base:a,hover:t,active:n,disabled:y,loading:{cursor:"wait",pointerEvents:"none"}}}exports.getButtonStyles=m;exports.sizeConfig=g;
2
2
  //# sourceMappingURL=Button.styles.cjs.map
package/dist/components/primitives/Button/Button.styles.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.cjs","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\r\n * Button Component Styles\r\n *\r\n * Apple-inspired button styles with smooth transitions and tactile feedback.\r\n * All values derive from the design system - NO hardcoded values.\r\n *\r\n * @module components/primitives/Button\r\n */\r\n\r\nimport type { CSSProperties } from 'react'\r\nimport type { ButtonVariant, ButtonIntent, ButtonSize } from './Button.types'\r\nimport {\r\n componentHeights,\r\n componentPaddingX,\r\n componentGap,\r\n iconSizes,\r\n componentFontSize,\r\n componentFontWeight,\r\n componentLineHeight,\r\n transition,\r\n stateOpacity,\r\n scale,\r\n} from '../../../design-system'\r\n\r\n/** Size dimension values - derived from design system primitives */\r\nconst sizeConfig: Record<\r\n ButtonSize,\r\n {\r\n height: number\r\n paddingX: number\r\n fontSize: number\r\n iconSize: number\r\n gap: number\r\n radius: string\r\n }\r\n> = {\r\n xs: {\r\n height: componentHeights.xs,\r\n paddingX: componentPaddingX.xs,\r\n fontSize: componentFontSize.xs,\r\n iconSize: iconSizes.xs,\r\n gap: componentGap.xs,\r\n radius: 'var(--brycks-radius-md)',\r\n },\r\n sm: {\r\n height: componentHeights.sm,\r\n paddingX: componentPaddingX.sm,\r\n fontSize: componentFontSize.sm,\r\n iconSize: iconSizes.sm,\r\n gap: componentGap.sm,\r\n radius: 'var(--brycks-radius-md)',\r\n },\r\n md: {\r\n height: componentHeights.md,\r\n paddingX: componentPaddingX.md,\r\n fontSize: componentFontSize.md,\r\n iconSize: iconSizes.md,\r\n gap: componentGap.md,\r\n radius: 'var(--brycks-radius-default)',\r\n },\r\n lg: {\r\n height: componentHeights.lg,\r\n paddingX: componentPaddingX.lg,\r\n fontSize: componentFontSize.lg,\r\n iconSize: iconSizes.lg,\r\n gap: componentGap.md,\r\n radius: 'var(--brycks-radius-lg)',\r\n },\r\n xl: {\r\n height: componentHeights.xl,\r\n paddingX: componentPaddingX.xl,\r\n fontSize: componentFontSize.xl,\r\n iconSize: iconSizes.xl,\r\n gap: componentGap.lg,\r\n radius: 'var(--brycks-radius-xl)',\r\n },\r\n}\r\n\r\n/** Color values for each intent */\r\nconst intentColors: Record<\r\n ButtonIntent,\r\n {\r\n solid: { bg: string; hoverBg: string; activeBg: string; text: string }\r\n outline: { border: string; hoverBg: string; text: string }\r\n ghost: { hoverBg: string; text: string }\r\n soft: { bg: string; hoverBg: string; text: string }\r\n link: { text: string; hoverText: string }\r\n }\r\n> = {\r\n primary: {\r\n solid: {\r\n bg: 'var(--brycks-primary-default)',\r\n hoverBg: 'var(--brycks-primary-hover)',\r\n activeBg: 'var(--brycks-primary-active)',\r\n text: 'var(--brycks-primary-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-primary-default)',\r\n hoverBg: 'var(--brycks-primary-muted)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-primary-muted)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-primary-muted)',\r\n hoverBg: 'var(--brycks-primary-soft-hover)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-primary-default)',\r\n hoverText: 'var(--brycks-primary-hover)',\r\n },\r\n },\r\n accent: {\r\n solid: {\r\n bg: 'var(--brycks-accent-default)',\r\n hoverBg: 'var(--brycks-accent-hover)',\r\n activeBg: 'var(--brycks-accent-active)',\r\n text: 'var(--brycks-accent-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-accent-default)',\r\n hoverBg: 'var(--brycks-accent-muted)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-accent-muted)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-accent-muted)',\r\n hoverBg: 'var(--brycks-accent-soft-hover)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-accent-default)',\r\n hoverText: 'var(--brycks-accent-hover)',\r\n },\r\n },\r\n neutral: {\r\n solid: {\r\n bg: 'var(--brycks-foreground-default)',\r\n hoverBg: 'var(--brycks-foreground-muted)',\r\n activeBg: 'var(--brycks-foreground-subtle)',\r\n text: 'var(--brycks-background-app)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-border-strong)',\r\n hoverBg: 'var(--brycks-background-muted)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-background-muted)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-background-muted)',\r\n hoverBg: 'var(--brycks-background-subtle)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-foreground-default)',\r\n hoverText: 'var(--brycks-foreground-muted)',\r\n },\r\n },\r\n success: {\r\n solid: {\r\n bg: 'var(--brycks-success-default)',\r\n hoverBg: 'var(--brycks-success-hover)',\r\n activeBg: 'var(--brycks-success-hover)',\r\n text: 'var(--brycks-success-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-success-default)',\r\n hoverBg: 'var(--brycks-success-muted)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-success-muted)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-success-muted)',\r\n hoverBg: 'var(--brycks-success-soft-hover)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-success-default)',\r\n hoverText: 'var(--brycks-success-hover)',\r\n },\r\n },\r\n warning: {\r\n solid: {\r\n bg: 'var(--brycks-warning-default)',\r\n hoverBg: 'var(--brycks-warning-hover)',\r\n activeBg: 'var(--brycks-warning-hover)',\r\n text: 'var(--brycks-warning-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-warning-default)',\r\n hoverBg: 'var(--brycks-warning-muted)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-warning-muted)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-warning-muted)',\r\n hoverBg: 'var(--brycks-warning-soft-hover)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-warning-default)',\r\n hoverText: 'var(--brycks-warning-hover)',\r\n },\r\n },\r\n error: {\r\n solid: {\r\n bg: 'var(--brycks-error-default)',\r\n hoverBg: 'var(--brycks-error-hover)',\r\n activeBg: 'var(--brycks-error-hover)',\r\n text: 'var(--brycks-error-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-error-default)',\r\n hoverBg: 'var(--brycks-error-muted)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-error-muted)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-error-muted)',\r\n hoverBg: 'var(--brycks-error-soft-hover)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-error-default)',\r\n hoverText: 'var(--brycks-error-hover)',\r\n },\r\n },\r\n}\r\n\r\nexport interface ButtonStyleProps {\r\n variant: ButtonVariant\r\n intent: ButtonIntent\r\n size: ButtonSize\r\n fullWidth?: boolean\r\n isIconOnly?: boolean\r\n isDisabled?: boolean\r\n isLoading?: boolean\r\n}\r\n\r\nexport function getButtonStyles(props: ButtonStyleProps): {\r\n base: CSSProperties\r\n hover: CSSProperties\r\n active: CSSProperties\r\n disabled: CSSProperties\r\n loading: CSSProperties\r\n} {\r\n const { variant, intent, size, fullWidth, isIconOnly } = props\r\n const sizeValues = sizeConfig[size]\r\n const colors = intentColors[intent][variant]\r\n\r\n // Base styles common to all buttons\r\n const base: CSSProperties = {\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n gap: sizeValues.gap,\r\n height: sizeValues.height,\r\n minWidth: isIconOnly ? sizeValues.height : undefined,\r\n width: fullWidth ? '100%' : undefined,\r\n padding: isIconOnly ? 0 : `0 ${sizeValues.paddingX}px`,\r\n fontSize: sizeValues.fontSize,\r\n fontWeight: componentFontWeight.medium,\r\n fontFamily: 'var(--brycks-font-sans)',\r\n lineHeight: componentLineHeight.none,\r\n borderRadius: sizeValues.radius,\r\n border: 'none',\r\n outline: 'none',\r\n cursor: 'pointer',\r\n userSelect: 'none',\r\n textDecoration: 'none',\r\n transition: transition.quick,\r\n WebkitTapHighlightColor: 'transparent',\r\n }\r\n\r\n // Apply variant-specific base styles\r\n switch (variant) {\r\n case 'solid': {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: solidColors.bg,\r\n color: solidColors.text,\r\n boxShadow: 'var(--brycks-shadow-xs)',\r\n })\r\n break\r\n }\r\n\r\n case 'outline': {\r\n const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: outlineColors.text,\r\n border: `1px solid ${outlineColors.border}`,\r\n })\r\n break\r\n }\r\n\r\n case 'ghost': {\r\n const ghostColors = colors as { hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: ghostColors.text,\r\n })\r\n break\r\n }\r\n\r\n case 'soft': {\r\n const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: softColors.bg,\r\n color: softColors.text,\r\n })\r\n break\r\n }\r\n\r\n case 'link': {\r\n const linkColors = colors as { text: string; hoverText: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: linkColors.text,\r\n height: 'auto',\r\n padding: 0,\r\n borderRadius: 0,\r\n })\r\n break\r\n }\r\n }\r\n\r\n // Hover styles\r\n const hover: CSSProperties = {}\r\n switch (variant) {\r\n case 'solid': {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n hover.backgroundColor = solidColors.hoverBg\r\n hover.boxShadow = 'var(--brycks-shadow-sm)'\r\n break\r\n }\r\n case 'outline': {\r\n const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n hover.backgroundColor = outlineColors.hoverBg\r\n break\r\n }\r\n case 'ghost': {\r\n const ghostColors = colors as { hoverBg: string; text: string }\r\n hover.backgroundColor = ghostColors.hoverBg\r\n break\r\n }\r\n case 'soft': {\r\n const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n hover.backgroundColor = softColors.hoverBg\r\n break\r\n }\r\n case 'link': {\r\n const linkColors = colors as { text: string; hoverText: string }\r\n hover.color = linkColors.hoverText\r\n hover.textDecoration = 'underline'\r\n break\r\n }\r\n }\r\n\r\n // Active/pressed styles\r\n const active: CSSProperties = {\r\n transform: variant !== 'link' ? `scale(${scale.pressed})` : undefined,\r\n }\r\n if (variant === 'solid') {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n active.backgroundColor = solidColors.activeBg\r\n active.boxShadow = 'var(--brycks-shadow-xs)'\r\n }\r\n\r\n // Disabled styles\r\n const disabled: CSSProperties = {\r\n opacity: stateOpacity.disabled,\r\n cursor: 'not-allowed',\r\n pointerEvents: 'none',\r\n }\r\n\r\n // Loading styles\r\n const loading: CSSProperties = {\r\n cursor: 'wait',\r\n pointerEvents: 'none',\r\n }\r\n\r\n return { base, hover, active, disabled, loading }\r\n}\r\n\r\nexport { sizeConfig }\r\n"],"names":["sizeConfig","componentHeights","componentPaddingX","componentFontSize","iconSizes","componentGap","intentColors","getButtonStyles","props","variant","intent","size","fullWidth","isIconOnly","sizeValues","colors","base","componentFontWeight","componentLineHeight","transition","solidColors","outlineColors","softColors","hover","ghostColors","linkColors","active","scale","disabled","stateOpacity"],"mappings":"wUAyBMA,EAUF,CACF,GAAI,CACF,OAAQC,EAAAA,iBAAiB,GACzB,SAAUC,EAAAA,kBAAkB,GAC5B,SAAUC,EAAAA,kBAAkB,GAC5B,SAAUC,EAAAA,UAAU,GACpB,IAAKC,EAAAA,aAAa,GAClB,OAAQ,yBAAA,EAEV,GAAI,CACF,OAAQJ,EAAAA,iBAAiB,GACzB,SAAUC,EAAAA,kBAAkB,GAC5B,SAAUC,EAAAA,kBAAkB,GAC5B,SAAUC,EAAAA,UAAU,GACpB,IAAKC,EAAAA,aAAa,GAClB,OAAQ,yBAAA,EAEV,GAAI,CACF,OAAQJ,EAAAA,iBAAiB,GACzB,SAAUC,EAAAA,kBAAkB,GAC5B,SAAUC,EAAAA,kBAAkB,GAC5B,SAAUC,EAAAA,UAAU,GACpB,IAAKC,EAAAA,aAAa,GAClB,OAAQ,8BAAA,EAEV,GAAI,CACF,OAAQJ,EAAAA,iBAAiB,GACzB,SAAUC,EAAAA,kBAAkB,GAC5B,SAAUC,EAAAA,kBAAkB,GAC5B,SAAUC,EAAAA,UAAU,GACpB,IAAKC,EAAAA,aAAa,GAClB,OAAQ,yBAAA,EAEV,GAAI,CACF,OAAQJ,EAAAA,iBAAiB,GACzB,SAAUC,EAAAA,kBAAkB,GAC5B,SAAUC,EAAAA,kBAAkB,GAC5B,SAAUC,EAAAA,UAAU,GACpB,IAAKC,EAAAA,aAAa,GAClB,OAAQ,yBAAA,CAEZ,EAGMC,EASF,CACF,QAAS,CACP,MAAO,CACL,GAAI,gCACJ,QAAS,8BACT,SAAU,+BACV,KAAM,kCAAA,EAER,QAAS,CACP,OAAQ,gCACR,QAAS,8BACT,KAAM,+BAAA,EAER,MAAO,CACL,QAAS,8BACT,KAAM,+BAAA,EAER,KAAM,CACJ,GAAI,8BACJ,QAAS,mCACT,KAAM,+BAAA,EAER,KAAM,CACJ,KAAM,gCACN,UAAW,6BAAA,CACb,EAEF,OAAQ,CACN,MAAO,CACL,GAAI,+BACJ,QAAS,6BACT,SAAU,8BACV,KAAM,iCAAA,EAER,QAAS,CACP,OAAQ,+BACR,QAAS,6BACT,KAAM,8BAAA,EAER,MAAO,CACL,QAAS,6BACT,KAAM,8BAAA,EAER,KAAM,CACJ,GAAI,6BACJ,QAAS,kCACT,KAAM,8BAAA,EAER,KAAM,CACJ,KAAM,+BACN,UAAW,4BAAA,CACb,EAEF,QAAS,CACP,MAAO,CACL,GAAI,mCACJ,QAAS,iCACT,SAAU,kCACV,KAAM,8BAAA,EAER,QAAS,CACP,OAAQ,8BACR,QAAS,iCACT,KAAM,kCAAA,EAER,MAAO,CACL,QAAS,iCACT,KAAM,kCAAA,EAER,KAAM,CACJ,GAAI,iCACJ,QAAS,kCACT,KAAM,kCAAA,EAER,KAAM,CACJ,KAAM,mCACN,UAAW,gCAAA,CACb,EAEF,QAAS,CACP,MAAO,CACL,GAAI,gCACJ,QAAS,8BACT,SAAU,8BACV,KAAM,kCAAA,EAER,QAAS,CACP,OAAQ,gCACR,QAAS,8BACT,KAAM,+BAAA,EAER,MAAO,CACL,QAAS,8BACT,KAAM,+BAAA,EAER,KAAM,CACJ,GAAI,8BACJ,QAAS,mCACT,KAAM,+BAAA,EAER,KAAM,CACJ,KAAM,gCACN,UAAW,6BAAA,CACb,EAEF,QAAS,CACP,MAAO,CACL,GAAI,gCACJ,QAAS,8BACT,SAAU,8BACV,KAAM,kCAAA,EAER,QAAS,CACP,OAAQ,gCACR,QAAS,8BACT,KAAM,+BAAA,EAER,MAAO,CACL,QAAS,8BACT,KAAM,+BAAA,EAER,KAAM,CACJ,GAAI,8BACJ,QAAS,mCACT,KAAM,+BAAA,EAER,KAAM,CACJ,KAAM,gCACN,UAAW,6BAAA,CACb,EAEF,MAAO,CACL,MAAO,CACL,GAAI,8BACJ,QAAS,4BACT,SAAU,4BACV,KAAM,gCAAA,EAER,QAAS,CACP,OAAQ,8BACR,QAAS,4BACT,KAAM,6BAAA,EAER,MAAO,CACL,QAAS,4BACT,KAAM,6BAAA,EAER,KAAM,CACJ,GAAI,4BACJ,QAAS,iCACT,KAAM,6BAAA,EAER,KAAM,CACJ,KAAM,8BACN,UAAW,2BAAA,CACb,CAEJ,EAYO,SAASC,EAAgBC,EAM9B,CACA,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,KAAAC,EAAM,UAAAC,EAAW,WAAAC,GAAeL,EACnDM,EAAad,EAAWW,CAAI,EAC5BI,EAAST,EAAaI,CAAM,EAAED,CAAO,EAGrCO,EAAsB,CAC1B,QAAS,cACT,WAAY,SACZ,eAAgB,SAChB,IAAKF,EAAW,IAChB,OAAQA,EAAW,OACnB,SAAUD,EAAaC,EAAW,OAAS,OAC3C,MAAOF,EAAY,OAAS,OAC5B,QAASC,EAAa,EAAI,KAAKC,EAAW,QAAQ,KAClD,SAAUA,EAAW,SACrB,WAAYG,EAAAA,oBAAoB,OAChC,WAAY,0BACZ,WAAYC,EAAAA,oBAAoB,KAChC,aAAcJ,EAAW,OACzB,OAAQ,OACR,QAAS,OACT,OAAQ,UACR,WAAY,OACZ,eAAgB,OAChB,WAAYK,EAAAA,WAAW,MACvB,wBAAyB,aAAA,EAI3B,OAAQV,EAAA,CACN,IAAK,QAAS,CACZ,MAAMW,EAAcL,EACpB,OAAO,OAAOC,EAAM,CAClB,gBAAiBI,EAAY,GAC7B,MAAOA,EAAY,KACnB,UAAW,yBAAA,CACZ,EACD,KACF,CAEA,IAAK,UAAW,CACd,MAAMC,EAAgBN,EACtB,OAAO,OAAOC,EAAM,CAClB,gBAAiB,cACjB,MAAOK,EAAc,KACrB,OAAQ,aAAaA,EAAc,MAAM,EAAA,CAC1C,EACD,KACF,CAEA,IAAK,QAAS,CAEZ,OAAO,OAAOL,EAAM,CAClB,gBAAiB,cACjB,MAHkBD,EAGC,IAAA,CACpB,EACD,KACF,CAEA,IAAK,OAAQ,CACX,MAAMO,EAAaP,EACnB,OAAO,OAAOC,EAAM,CAClB,gBAAiBM,EAAW,GAC5B,MAAOA,EAAW,IAAA,CACnB,EACD,KACF,CAEA,IAAK,OAAQ,CAEX,OAAO,OAAON,EAAM,CAClB,gBAAiB,cACjB,MAHiBD,EAGC,KAClB,OAAQ,OACR,QAAS,EACT,aAAc,CAAA,CACf,EACD,KACF,CAAA,CAIF,MAAMQ,EAAuB,CAAA,EAC7B,OAAQd,EAAA,CACN,IAAK,QAAS,CACZ,MAAMW,EAAcL,EACpBQ,EAAM,gBAAkBH,EAAY,QACpCG,EAAM,UAAY,0BAClB,KACF,CACA,IAAK,UAAW,CACd,MAAMF,EAAgBN,EACtBQ,EAAM,gBAAkBF,EAAc,QACtC,KACF,CACA,IAAK,QAAS,CACZ,MAAMG,EAAcT,EACpBQ,EAAM,gBAAkBC,EAAY,QACpC,KACF,CACA,IAAK,OAAQ,CACX,MAAMF,EAAaP,EACnBQ,EAAM,gBAAkBD,EAAW,QACnC,KACF,CACA,IAAK,OAAQ,CACX,MAAMG,EAAaV,EACnBQ,EAAM,MAAQE,EAAW,UACzBF,EAAM,eAAiB,YACvB,KACF,CAAA,CAIF,MAAMG,EAAwB,CAC5B,UAAWjB,IAAY,OAAS,SAASkB,QAAM,OAAO,IAAM,MAAA,EAE9D,GAAIlB,IAAY,QAAS,CACvB,MAAMW,EAAcL,EACpBW,EAAO,gBAAkBN,EAAY,SACrCM,EAAO,UAAY,yBACrB,CAGA,MAAME,EAA0B,CAC9B,QAASC,EAAAA,aAAa,SACtB,OAAQ,cACR,cAAe,MAAA,EASjB,MAAO,CAAE,KAAAb,EAAM,MAAAO,EAAO,OAAAG,EAAQ,SAAAE,EAAU,QALT,CAC7B,OAAQ,OACR,cAAe,MAAA,CAGuB,CAC1C"}
1
+ {"version":3,"file":"Button.styles.cjs","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\r\n * Button Component Styles\r\n *\r\n * Apple-inspired button styles with smooth transitions and tactile feedback.\r\n * All values derive from the design system - NO hardcoded values.\r\n *\r\n * @module components/primitives/Button\r\n */\r\n\r\nimport type { CSSProperties } from 'react'\r\nimport type { ButtonVariant, ButtonIntent, ButtonSize } from './Button.types'\r\nimport {\r\n componentHeights,\r\n componentPaddingX,\r\n componentGap,\r\n iconSizes,\r\n componentFontWeight,\r\n componentLineHeight,\r\n transition,\r\n stateOpacity,\r\n scale,\r\n} from '../../../design-system'\r\n\r\n/**\r\n * Size dimension values - derived from design system primitives\r\n * Uses CSS variables for font sizes to enable dynamic scaling\r\n */\r\nconst sizeConfig: Record<\r\n ButtonSize,\r\n {\r\n height: number\r\n paddingX: number\r\n fontSize: string\r\n iconSize: number\r\n gap: number\r\n radius: string\r\n }\r\n> = {\r\n xs: {\r\n height: componentHeights.xs,\r\n paddingX: componentPaddingX.xs,\r\n fontSize: 'var(--brycks-fs-ui-xs)',\r\n iconSize: iconSizes.xs,\r\n gap: componentGap.xs,\r\n radius: 'var(--brycks-radius-md)',\r\n },\r\n sm: {\r\n height: componentHeights.sm,\r\n paddingX: componentPaddingX.sm,\r\n fontSize: 'var(--brycks-fs-ui-sm)',\r\n iconSize: iconSizes.sm,\r\n gap: componentGap.sm,\r\n radius: 'var(--brycks-radius-md)',\r\n },\r\n md: {\r\n height: componentHeights.md,\r\n paddingX: componentPaddingX.md,\r\n fontSize: 'var(--brycks-fs-ui-md)',\r\n iconSize: iconSizes.md,\r\n gap: componentGap.md,\r\n radius: 'var(--brycks-radius-default)',\r\n },\r\n lg: {\r\n height: componentHeights.lg,\r\n paddingX: componentPaddingX.lg,\r\n fontSize: 'var(--brycks-fs-ui-lg)',\r\n iconSize: iconSizes.lg,\r\n gap: componentGap.md,\r\n radius: 'var(--brycks-radius-lg)',\r\n },\r\n xl: {\r\n height: componentHeights.xl,\r\n paddingX: componentPaddingX.xl,\r\n fontSize: 'var(--brycks-fs-ui-xl)',\r\n iconSize: iconSizes.xl,\r\n gap: componentGap.lg,\r\n radius: 'var(--brycks-radius-xl)',\r\n },\r\n}\r\n\r\n/** Color values for each intent */\r\nconst intentColors: Record<\r\n ButtonIntent,\r\n {\r\n solid: { bg: string; hoverBg: string; activeBg: string; text: string }\r\n outline: { border: string; hoverBg: string; text: string }\r\n ghost: { hoverBg: string; text: string }\r\n soft: { bg: string; hoverBg: string; text: string }\r\n link: { text: string; hoverText: string }\r\n }\r\n> = {\r\n primary: {\r\n solid: {\r\n bg: 'var(--brycks-primary-default)',\r\n hoverBg: 'var(--brycks-primary-hover)',\r\n activeBg: 'var(--brycks-primary-active)',\r\n text: 'var(--brycks-primary-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-primary-default)',\r\n hoverBg: 'var(--brycks-primary-muted)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-primary-muted)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-primary-muted)',\r\n hoverBg: 'var(--brycks-primary-soft-hover)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-primary-default)',\r\n hoverText: 'var(--brycks-primary-hover)',\r\n },\r\n },\r\n accent: {\r\n solid: {\r\n bg: 'var(--brycks-accent-default)',\r\n hoverBg: 'var(--brycks-accent-hover)',\r\n activeBg: 'var(--brycks-accent-active)',\r\n text: 'var(--brycks-accent-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-accent-default)',\r\n hoverBg: 'var(--brycks-accent-muted)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-accent-muted)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-accent-muted)',\r\n hoverBg: 'var(--brycks-accent-soft-hover)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-accent-default)',\r\n hoverText: 'var(--brycks-accent-hover)',\r\n },\r\n },\r\n neutral: {\r\n solid: {\r\n bg: 'var(--brycks-foreground-default)',\r\n hoverBg: 'var(--brycks-foreground-muted)',\r\n activeBg: 'var(--brycks-foreground-subtle)',\r\n text: 'var(--brycks-background-app)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-border-strong)',\r\n hoverBg: 'var(--brycks-background-muted)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-background-muted)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-background-muted)',\r\n hoverBg: 'var(--brycks-background-subtle)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-foreground-default)',\r\n hoverText: 'var(--brycks-foreground-muted)',\r\n },\r\n },\r\n success: {\r\n solid: {\r\n bg: 'var(--brycks-success-default)',\r\n hoverBg: 'var(--brycks-success-hover)',\r\n activeBg: 'var(--brycks-success-hover)',\r\n text: 'var(--brycks-success-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-success-default)',\r\n hoverBg: 'var(--brycks-success-muted)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-success-muted)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-success-muted)',\r\n hoverBg: 'var(--brycks-success-soft-hover)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-success-default)',\r\n hoverText: 'var(--brycks-success-hover)',\r\n },\r\n },\r\n warning: {\r\n solid: {\r\n bg: 'var(--brycks-warning-default)',\r\n hoverBg: 'var(--brycks-warning-hover)',\r\n activeBg: 'var(--brycks-warning-hover)',\r\n text: 'var(--brycks-warning-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-warning-default)',\r\n hoverBg: 'var(--brycks-warning-muted)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-warning-muted)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-warning-muted)',\r\n hoverBg: 'var(--brycks-warning-soft-hover)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-warning-default)',\r\n hoverText: 'var(--brycks-warning-hover)',\r\n },\r\n },\r\n error: {\r\n solid: {\r\n bg: 'var(--brycks-error-default)',\r\n hoverBg: 'var(--brycks-error-hover)',\r\n activeBg: 'var(--brycks-error-hover)',\r\n text: 'var(--brycks-error-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-error-default)',\r\n hoverBg: 'var(--brycks-error-muted)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-error-muted)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-error-muted)',\r\n hoverBg: 'var(--brycks-error-soft-hover)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-error-default)',\r\n hoverText: 'var(--brycks-error-hover)',\r\n },\r\n },\r\n}\r\n\r\nexport interface ButtonStyleProps {\r\n variant: ButtonVariant\r\n intent: ButtonIntent\r\n size: ButtonSize\r\n fullWidth?: boolean\r\n isIconOnly?: boolean\r\n isDisabled?: boolean\r\n isLoading?: boolean\r\n}\r\n\r\nexport function getButtonStyles(props: ButtonStyleProps): {\r\n base: CSSProperties\r\n hover: CSSProperties\r\n active: CSSProperties\r\n disabled: CSSProperties\r\n loading: CSSProperties\r\n} {\r\n const { variant, intent, size, fullWidth, isIconOnly } = props\r\n const sizeValues = sizeConfig[size]\r\n const colors = intentColors[intent][variant]\r\n\r\n // Base styles common to all buttons\r\n const base: CSSProperties = {\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n gap: sizeValues.gap,\r\n height: sizeValues.height,\r\n minWidth: isIconOnly ? sizeValues.height : undefined,\r\n width: fullWidth ? '100%' : undefined,\r\n padding: isIconOnly ? 0 : `0 ${sizeValues.paddingX}px`,\r\n fontSize: sizeValues.fontSize,\r\n fontWeight: componentFontWeight.medium,\r\n fontFamily: 'var(--brycks-font-sans)',\r\n lineHeight: componentLineHeight.none,\r\n borderRadius: sizeValues.radius,\r\n border: 'none',\r\n outline: 'none',\r\n cursor: 'pointer',\r\n userSelect: 'none',\r\n textDecoration: 'none',\r\n transition: transition.quick,\r\n WebkitTapHighlightColor: 'transparent',\r\n }\r\n\r\n // Apply variant-specific base styles\r\n switch (variant) {\r\n case 'solid': {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: solidColors.bg,\r\n color: solidColors.text,\r\n boxShadow: 'var(--brycks-shadow-xs)',\r\n })\r\n break\r\n }\r\n\r\n case 'outline': {\r\n const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: outlineColors.text,\r\n border: `1px solid ${outlineColors.border}`,\r\n })\r\n break\r\n }\r\n\r\n case 'ghost': {\r\n const ghostColors = colors as { hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: ghostColors.text,\r\n })\r\n break\r\n }\r\n\r\n case 'soft': {\r\n const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: softColors.bg,\r\n color: softColors.text,\r\n })\r\n break\r\n }\r\n\r\n case 'link': {\r\n const linkColors = colors as { text: string; hoverText: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: linkColors.text,\r\n height: 'auto',\r\n padding: 0,\r\n borderRadius: 0,\r\n })\r\n break\r\n }\r\n }\r\n\r\n // Hover styles\r\n const hover: CSSProperties = {}\r\n switch (variant) {\r\n case 'solid': {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n hover.backgroundColor = solidColors.hoverBg\r\n hover.boxShadow = 'var(--brycks-shadow-sm)'\r\n break\r\n }\r\n case 'outline': {\r\n const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n hover.backgroundColor = outlineColors.hoverBg\r\n break\r\n }\r\n case 'ghost': {\r\n const ghostColors = colors as { hoverBg: string; text: string }\r\n hover.backgroundColor = ghostColors.hoverBg\r\n break\r\n }\r\n case 'soft': {\r\n const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n hover.backgroundColor = softColors.hoverBg\r\n break\r\n }\r\n case 'link': {\r\n const linkColors = colors as { text: string; hoverText: string }\r\n hover.color = linkColors.hoverText\r\n hover.textDecoration = 'underline'\r\n break\r\n }\r\n }\r\n\r\n // Active/pressed styles\r\n const active: CSSProperties = {\r\n transform: variant !== 'link' ? `scale(${scale.pressed})` : undefined,\r\n }\r\n if (variant === 'solid') {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n active.backgroundColor = solidColors.activeBg\r\n active.boxShadow = 'var(--brycks-shadow-xs)'\r\n }\r\n\r\n // Disabled styles\r\n const disabled: CSSProperties = {\r\n opacity: stateOpacity.disabled,\r\n cursor: 'not-allowed',\r\n pointerEvents: 'none',\r\n }\r\n\r\n // Loading styles\r\n const loading: CSSProperties = {\r\n cursor: 'wait',\r\n pointerEvents: 'none',\r\n }\r\n\r\n return { base, hover, active, disabled, loading }\r\n}\r\n\r\nexport { sizeConfig }\r\n"],"names":["sizeConfig","componentHeights","componentPaddingX","iconSizes","componentGap","intentColors","getButtonStyles","props","variant","intent","size","fullWidth","isIconOnly","sizeValues","colors","base","componentFontWeight","componentLineHeight","transition","solidColors","outlineColors","softColors","hover","ghostColors","linkColors","active","scale","disabled","stateOpacity"],"mappings":"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"}
package/dist/components/primitives/Button/Button.styles.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { componentGap as c, iconSizes as n, componentPaddingX as i, componentHeights as d } from "../../../design-system/primitives/sizing.js";
2
- import { componentFontSize as v, componentLineHeight as f, componentFontWeight as m } from "../../../design-system/primitives/typography.js";
3
- import { transition as x } from "../../../design-system/primitives/transitions.js";
4
- import { stateOpacity as p, scale as B } from "../../../design-system/primitives/opacity.js";
5
- const C = {
2
+ import { transition as h } from "../../../design-system/primitives/transitions.js";
3
+ import { componentLineHeight as f, componentFontWeight as m } from "../../../design-system/primitives/typography.js";
4
+ import { stateOpacity as x, scale as p } from "../../../design-system/primitives/opacity.js";
5
+ const B = {
6
6
  xs: {
7
7
  height: d.xs,
8
8
  paddingX: i.xs,
9
- fontSize: v.xs,
9
+ fontSize: "var(--brycks-fs-ui-xs)",
10
10
  iconSize: n.xs,
11
11
  gap: c.xs,
12
12
  radius: "var(--brycks-radius-md)"
@@ -14,7 +14,7 @@ const C = {
14
14
  sm: {
15
15
  height: d.sm,
16
16
  paddingX: i.sm,
17
- fontSize: v.sm,
17
+ fontSize: "var(--brycks-fs-ui-sm)",
18
18
  iconSize: n.sm,
19
19
  gap: c.sm,
20
20
  radius: "var(--brycks-radius-md)"
@@ -22,7 +22,7 @@ const C = {
22
22
  md: {
23
23
  height: d.md,
24
24
  paddingX: i.md,
25
- fontSize: v.md,
25
+ fontSize: "var(--brycks-fs-ui-md)",
26
26
  iconSize: n.md,
27
27
  gap: c.md,
28
28
  radius: "var(--brycks-radius-default)"
@@ -30,7 +30,7 @@ const C = {
30
30
  lg: {
31
31
  height: d.lg,
32
32
  paddingX: i.lg,
33
- fontSize: v.lg,
33
+ fontSize: "var(--brycks-fs-ui-lg)",
34
34
  iconSize: n.lg,
35
35
  gap: c.md,
36
36
  radius: "var(--brycks-radius-lg)"
@@ -38,12 +38,12 @@ const C = {
38
38
  xl: {
39
39
  height: d.xl,
40
40
  paddingX: i.xl,
41
- fontSize: v.xl,
41
+ fontSize: "var(--brycks-fs-ui-xl)",
42
42
  iconSize: n.xl,
43
43
  gap: c.lg,
44
44
  radius: "var(--brycks-radius-xl)"
45
45
  }
46
- }, w = {
46
+ }, C = {
47
47
  primary: {
48
48
  solid: {
49
49
  bg: "var(--brycks-primary-default)",
@@ -201,16 +201,16 @@ const C = {
201
201
  }
202
202
  }
203
203
  };
204
- function j(l) {
205
- const { variant: a, intent: u, size: k, fullWidth: y, isIconOnly: g } = l, t = C[k], e = w[u][a], s = {
204
+ function X(g) {
205
+ const { variant: a, intent: u, size: l, fullWidth: k, isIconOnly: b } = g, t = B[l], e = C[u][a], s = {
206
206
  display: "inline-flex",
207
207
  alignItems: "center",
208
208
  justifyContent: "center",
209
209
  gap: t.gap,
210
210
  height: t.height,
211
- minWidth: g ? t.height : void 0,
212
- width: y ? "100%" : void 0,
213
- padding: g ? 0 : `0 ${t.paddingX}px`,
211
+ minWidth: b ? t.height : void 0,
212
+ width: k ? "100%" : void 0,
213
+ padding: b ? 0 : `0 ${t.paddingX}px`,
214
214
  fontSize: t.fontSize,
215
215
  fontWeight: m.medium,
216
216
  fontFamily: "var(--brycks-font-sans)",
@@ -221,7 +221,7 @@ function j(l) {
221
221
  cursor: "pointer",
222
222
  userSelect: "none",
223
223
  textDecoration: "none",
224
- transition: x.quick,
224
+ transition: h.quick,
225
225
  WebkitTapHighlightColor: "transparent"
226
226
  };
227
227
  switch (a) {
@@ -297,25 +297,25 @@ function j(l) {
297
297
  break;
298
298
  }
299
299
  }
300
- const b = {
301
- transform: a !== "link" ? `scale(${B.pressed})` : void 0
300
+ const v = {
301
+ transform: a !== "link" ? `scale(${p.pressed})` : void 0
302
302
  };
303
303
  if (a === "solid") {
304
304
  const r = e;
305
- b.backgroundColor = r.activeBg, b.boxShadow = "var(--brycks-shadow-xs)";
305
+ v.backgroundColor = r.activeBg, v.boxShadow = "var(--brycks-shadow-xs)";
306
306
  }
307
- const h = {
308
- opacity: p.disabled,
307
+ const y = {
308
+ opacity: x.disabled,
309
309
  cursor: "not-allowed",
310
310
  pointerEvents: "none"
311
311
  };
312
- return { base: s, hover: o, active: b, disabled: h, loading: {
312
+ return { base: s, hover: o, active: v, disabled: y, loading: {
313
313
  cursor: "wait",
314
314
  pointerEvents: "none"
315
315
  } };
316
316
  }
317
317
  export {
318
- j as getButtonStyles,
319
- C as sizeConfig
318
+ X as getButtonStyles,
319
+ B as sizeConfig
320
320
  };
321
321
  //# sourceMappingURL=Button.styles.js.map
package/dist/components/primitives/Button/Button.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.js","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\r\n * Button Component Styles\r\n *\r\n * Apple-inspired button styles with smooth transitions and tactile feedback.\r\n * All values derive from the design system - NO hardcoded values.\r\n *\r\n * @module components/primitives/Button\r\n */\r\n\r\nimport type { CSSProperties } from 'react'\r\nimport type { ButtonVariant, ButtonIntent, ButtonSize } from './Button.types'\r\nimport {\r\n componentHeights,\r\n componentPaddingX,\r\n componentGap,\r\n iconSizes,\r\n componentFontSize,\r\n componentFontWeight,\r\n componentLineHeight,\r\n transition,\r\n stateOpacity,\r\n scale,\r\n} from '../../../design-system'\r\n\r\n/** Size dimension values - derived from design system primitives */\r\nconst sizeConfig: Record<\r\n ButtonSize,\r\n {\r\n height: number\r\n paddingX: number\r\n fontSize: number\r\n iconSize: number\r\n gap: number\r\n radius: string\r\n }\r\n> = {\r\n xs: {\r\n height: componentHeights.xs,\r\n paddingX: componentPaddingX.xs,\r\n fontSize: componentFontSize.xs,\r\n iconSize: iconSizes.xs,\r\n gap: componentGap.xs,\r\n radius: 'var(--brycks-radius-md)',\r\n },\r\n sm: {\r\n height: componentHeights.sm,\r\n paddingX: componentPaddingX.sm,\r\n fontSize: componentFontSize.sm,\r\n iconSize: iconSizes.sm,\r\n gap: componentGap.sm,\r\n radius: 'var(--brycks-radius-md)',\r\n },\r\n md: {\r\n height: componentHeights.md,\r\n paddingX: componentPaddingX.md,\r\n fontSize: componentFontSize.md,\r\n iconSize: iconSizes.md,\r\n gap: componentGap.md,\r\n radius: 'var(--brycks-radius-default)',\r\n },\r\n lg: {\r\n height: componentHeights.lg,\r\n paddingX: componentPaddingX.lg,\r\n fontSize: componentFontSize.lg,\r\n iconSize: iconSizes.lg,\r\n gap: componentGap.md,\r\n radius: 'var(--brycks-radius-lg)',\r\n },\r\n xl: {\r\n height: componentHeights.xl,\r\n paddingX: componentPaddingX.xl,\r\n fontSize: componentFontSize.xl,\r\n iconSize: iconSizes.xl,\r\n gap: componentGap.lg,\r\n radius: 'var(--brycks-radius-xl)',\r\n },\r\n}\r\n\r\n/** Color values for each intent */\r\nconst intentColors: Record<\r\n ButtonIntent,\r\n {\r\n solid: { bg: string; hoverBg: string; activeBg: string; text: string }\r\n outline: { border: string; hoverBg: string; text: string }\r\n ghost: { hoverBg: string; text: string }\r\n soft: { bg: string; hoverBg: string; text: string }\r\n link: { text: string; hoverText: string }\r\n }\r\n> = {\r\n primary: {\r\n solid: {\r\n bg: 'var(--brycks-primary-default)',\r\n hoverBg: 'var(--brycks-primary-hover)',\r\n activeBg: 'var(--brycks-primary-active)',\r\n text: 'var(--brycks-primary-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-primary-default)',\r\n hoverBg: 'var(--brycks-primary-muted)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-primary-muted)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-primary-muted)',\r\n hoverBg: 'var(--brycks-primary-soft-hover)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-primary-default)',\r\n hoverText: 'var(--brycks-primary-hover)',\r\n },\r\n },\r\n accent: {\r\n solid: {\r\n bg: 'var(--brycks-accent-default)',\r\n hoverBg: 'var(--brycks-accent-hover)',\r\n activeBg: 'var(--brycks-accent-active)',\r\n text: 'var(--brycks-accent-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-accent-default)',\r\n hoverBg: 'var(--brycks-accent-muted)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-accent-muted)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-accent-muted)',\r\n hoverBg: 'var(--brycks-accent-soft-hover)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-accent-default)',\r\n hoverText: 'var(--brycks-accent-hover)',\r\n },\r\n },\r\n neutral: {\r\n solid: {\r\n bg: 'var(--brycks-foreground-default)',\r\n hoverBg: 'var(--brycks-foreground-muted)',\r\n activeBg: 'var(--brycks-foreground-subtle)',\r\n text: 'var(--brycks-background-app)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-border-strong)',\r\n hoverBg: 'var(--brycks-background-muted)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-background-muted)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-background-muted)',\r\n hoverBg: 'var(--brycks-background-subtle)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-foreground-default)',\r\n hoverText: 'var(--brycks-foreground-muted)',\r\n },\r\n },\r\n success: {\r\n solid: {\r\n bg: 'var(--brycks-success-default)',\r\n hoverBg: 'var(--brycks-success-hover)',\r\n activeBg: 'var(--brycks-success-hover)',\r\n text: 'var(--brycks-success-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-success-default)',\r\n hoverBg: 'var(--brycks-success-muted)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-success-muted)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-success-muted)',\r\n hoverBg: 'var(--brycks-success-soft-hover)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-success-default)',\r\n hoverText: 'var(--brycks-success-hover)',\r\n },\r\n },\r\n warning: {\r\n solid: {\r\n bg: 'var(--brycks-warning-default)',\r\n hoverBg: 'var(--brycks-warning-hover)',\r\n activeBg: 'var(--brycks-warning-hover)',\r\n text: 'var(--brycks-warning-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-warning-default)',\r\n hoverBg: 'var(--brycks-warning-muted)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-warning-muted)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-warning-muted)',\r\n hoverBg: 'var(--brycks-warning-soft-hover)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-warning-default)',\r\n hoverText: 'var(--brycks-warning-hover)',\r\n },\r\n },\r\n error: {\r\n solid: {\r\n bg: 'var(--brycks-error-default)',\r\n hoverBg: 'var(--brycks-error-hover)',\r\n activeBg: 'var(--brycks-error-hover)',\r\n text: 'var(--brycks-error-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-error-default)',\r\n hoverBg: 'var(--brycks-error-muted)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-error-muted)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-error-muted)',\r\n hoverBg: 'var(--brycks-error-soft-hover)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-error-default)',\r\n hoverText: 'var(--brycks-error-hover)',\r\n },\r\n },\r\n}\r\n\r\nexport interface ButtonStyleProps {\r\n variant: ButtonVariant\r\n intent: ButtonIntent\r\n size: ButtonSize\r\n fullWidth?: boolean\r\n isIconOnly?: boolean\r\n isDisabled?: boolean\r\n isLoading?: boolean\r\n}\r\n\r\nexport function getButtonStyles(props: ButtonStyleProps): {\r\n base: CSSProperties\r\n hover: CSSProperties\r\n active: CSSProperties\r\n disabled: CSSProperties\r\n loading: CSSProperties\r\n} {\r\n const { variant, intent, size, fullWidth, isIconOnly } = props\r\n const sizeValues = sizeConfig[size]\r\n const colors = intentColors[intent][variant]\r\n\r\n // Base styles common to all buttons\r\n const base: CSSProperties = {\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n gap: sizeValues.gap,\r\n height: sizeValues.height,\r\n minWidth: isIconOnly ? sizeValues.height : undefined,\r\n width: fullWidth ? '100%' : undefined,\r\n padding: isIconOnly ? 0 : `0 ${sizeValues.paddingX}px`,\r\n fontSize: sizeValues.fontSize,\r\n fontWeight: componentFontWeight.medium,\r\n fontFamily: 'var(--brycks-font-sans)',\r\n lineHeight: componentLineHeight.none,\r\n borderRadius: sizeValues.radius,\r\n border: 'none',\r\n outline: 'none',\r\n cursor: 'pointer',\r\n userSelect: 'none',\r\n textDecoration: 'none',\r\n transition: transition.quick,\r\n WebkitTapHighlightColor: 'transparent',\r\n }\r\n\r\n // Apply variant-specific base styles\r\n switch (variant) {\r\n case 'solid': {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: solidColors.bg,\r\n color: solidColors.text,\r\n boxShadow: 'var(--brycks-shadow-xs)',\r\n })\r\n break\r\n }\r\n\r\n case 'outline': {\r\n const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: outlineColors.text,\r\n border: `1px solid ${outlineColors.border}`,\r\n })\r\n break\r\n }\r\n\r\n case 'ghost': {\r\n const ghostColors = colors as { hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: ghostColors.text,\r\n })\r\n break\r\n }\r\n\r\n case 'soft': {\r\n const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: softColors.bg,\r\n color: softColors.text,\r\n })\r\n break\r\n }\r\n\r\n case 'link': {\r\n const linkColors = colors as { text: string; hoverText: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: linkColors.text,\r\n height: 'auto',\r\n padding: 0,\r\n borderRadius: 0,\r\n })\r\n break\r\n }\r\n }\r\n\r\n // Hover styles\r\n const hover: CSSProperties = {}\r\n switch (variant) {\r\n case 'solid': {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n hover.backgroundColor = solidColors.hoverBg\r\n hover.boxShadow = 'var(--brycks-shadow-sm)'\r\n break\r\n }\r\n case 'outline': {\r\n const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n hover.backgroundColor = outlineColors.hoverBg\r\n break\r\n }\r\n case 'ghost': {\r\n const ghostColors = colors as { hoverBg: string; text: string }\r\n hover.backgroundColor = ghostColors.hoverBg\r\n break\r\n }\r\n case 'soft': {\r\n const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n hover.backgroundColor = softColors.hoverBg\r\n break\r\n }\r\n case 'link': {\r\n const linkColors = colors as { text: string; hoverText: string }\r\n hover.color = linkColors.hoverText\r\n hover.textDecoration = 'underline'\r\n break\r\n }\r\n }\r\n\r\n // Active/pressed styles\r\n const active: CSSProperties = {\r\n transform: variant !== 'link' ? `scale(${scale.pressed})` : undefined,\r\n }\r\n if (variant === 'solid') {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n active.backgroundColor = solidColors.activeBg\r\n active.boxShadow = 'var(--brycks-shadow-xs)'\r\n }\r\n\r\n // Disabled styles\r\n const disabled: CSSProperties = {\r\n opacity: stateOpacity.disabled,\r\n cursor: 'not-allowed',\r\n pointerEvents: 'none',\r\n }\r\n\r\n // Loading styles\r\n const loading: CSSProperties = {\r\n cursor: 'wait',\r\n pointerEvents: 'none',\r\n }\r\n\r\n return { base, hover, active, disabled, loading }\r\n}\r\n\r\nexport { sizeConfig }\r\n"],"names":["sizeConfig","componentHeights","componentPaddingX","componentFontSize","iconSizes","componentGap","intentColors","getButtonStyles","props","variant","intent","size","fullWidth","isIconOnly","sizeValues","colors","base","componentFontWeight","componentLineHeight","transition","solidColors","outlineColors","softColors","hover","ghostColors","linkColors","active","scale","disabled","stateOpacity"],"mappings":"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"}
1
+ {"version":3,"file":"Button.styles.js","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\r\n * Button Component Styles\r\n *\r\n * Apple-inspired button styles with smooth transitions and tactile feedback.\r\n * All values derive from the design system - NO hardcoded values.\r\n *\r\n * @module components/primitives/Button\r\n */\r\n\r\nimport type { CSSProperties } from 'react'\r\nimport type { ButtonVariant, ButtonIntent, ButtonSize } from './Button.types'\r\nimport {\r\n componentHeights,\r\n componentPaddingX,\r\n componentGap,\r\n iconSizes,\r\n componentFontWeight,\r\n componentLineHeight,\r\n transition,\r\n stateOpacity,\r\n scale,\r\n} from '../../../design-system'\r\n\r\n/**\r\n * Size dimension values - derived from design system primitives\r\n * Uses CSS variables for font sizes to enable dynamic scaling\r\n */\r\nconst sizeConfig: Record<\r\n ButtonSize,\r\n {\r\n height: number\r\n paddingX: number\r\n fontSize: string\r\n iconSize: number\r\n gap: number\r\n radius: string\r\n }\r\n> = {\r\n xs: {\r\n height: componentHeights.xs,\r\n paddingX: componentPaddingX.xs,\r\n fontSize: 'var(--brycks-fs-ui-xs)',\r\n iconSize: iconSizes.xs,\r\n gap: componentGap.xs,\r\n radius: 'var(--brycks-radius-md)',\r\n },\r\n sm: {\r\n height: componentHeights.sm,\r\n paddingX: componentPaddingX.sm,\r\n fontSize: 'var(--brycks-fs-ui-sm)',\r\n iconSize: iconSizes.sm,\r\n gap: componentGap.sm,\r\n radius: 'var(--brycks-radius-md)',\r\n },\r\n md: {\r\n height: componentHeights.md,\r\n paddingX: componentPaddingX.md,\r\n fontSize: 'var(--brycks-fs-ui-md)',\r\n iconSize: iconSizes.md,\r\n gap: componentGap.md,\r\n radius: 'var(--brycks-radius-default)',\r\n },\r\n lg: {\r\n height: componentHeights.lg,\r\n paddingX: componentPaddingX.lg,\r\n fontSize: 'var(--brycks-fs-ui-lg)',\r\n iconSize: iconSizes.lg,\r\n gap: componentGap.md,\r\n radius: 'var(--brycks-radius-lg)',\r\n },\r\n xl: {\r\n height: componentHeights.xl,\r\n paddingX: componentPaddingX.xl,\r\n fontSize: 'var(--brycks-fs-ui-xl)',\r\n iconSize: iconSizes.xl,\r\n gap: componentGap.lg,\r\n radius: 'var(--brycks-radius-xl)',\r\n },\r\n}\r\n\r\n/** Color values for each intent */\r\nconst intentColors: Record<\r\n ButtonIntent,\r\n {\r\n solid: { bg: string; hoverBg: string; activeBg: string; text: string }\r\n outline: { border: string; hoverBg: string; text: string }\r\n ghost: { hoverBg: string; text: string }\r\n soft: { bg: string; hoverBg: string; text: string }\r\n link: { text: string; hoverText: string }\r\n }\r\n> = {\r\n primary: {\r\n solid: {\r\n bg: 'var(--brycks-primary-default)',\r\n hoverBg: 'var(--brycks-primary-hover)',\r\n activeBg: 'var(--brycks-primary-active)',\r\n text: 'var(--brycks-primary-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-primary-default)',\r\n hoverBg: 'var(--brycks-primary-muted)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-primary-muted)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-primary-muted)',\r\n hoverBg: 'var(--brycks-primary-soft-hover)',\r\n text: 'var(--brycks-primary-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-primary-default)',\r\n hoverText: 'var(--brycks-primary-hover)',\r\n },\r\n },\r\n accent: {\r\n solid: {\r\n bg: 'var(--brycks-accent-default)',\r\n hoverBg: 'var(--brycks-accent-hover)',\r\n activeBg: 'var(--brycks-accent-active)',\r\n text: 'var(--brycks-accent-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-accent-default)',\r\n hoverBg: 'var(--brycks-accent-muted)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-accent-muted)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-accent-muted)',\r\n hoverBg: 'var(--brycks-accent-soft-hover)',\r\n text: 'var(--brycks-accent-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-accent-default)',\r\n hoverText: 'var(--brycks-accent-hover)',\r\n },\r\n },\r\n neutral: {\r\n solid: {\r\n bg: 'var(--brycks-foreground-default)',\r\n hoverBg: 'var(--brycks-foreground-muted)',\r\n activeBg: 'var(--brycks-foreground-subtle)',\r\n text: 'var(--brycks-background-app)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-border-strong)',\r\n hoverBg: 'var(--brycks-background-muted)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-background-muted)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-background-muted)',\r\n hoverBg: 'var(--brycks-background-subtle)',\r\n text: 'var(--brycks-foreground-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-foreground-default)',\r\n hoverText: 'var(--brycks-foreground-muted)',\r\n },\r\n },\r\n success: {\r\n solid: {\r\n bg: 'var(--brycks-success-default)',\r\n hoverBg: 'var(--brycks-success-hover)',\r\n activeBg: 'var(--brycks-success-hover)',\r\n text: 'var(--brycks-success-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-success-default)',\r\n hoverBg: 'var(--brycks-success-muted)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-success-muted)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-success-muted)',\r\n hoverBg: 'var(--brycks-success-soft-hover)',\r\n text: 'var(--brycks-success-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-success-default)',\r\n hoverText: 'var(--brycks-success-hover)',\r\n },\r\n },\r\n warning: {\r\n solid: {\r\n bg: 'var(--brycks-warning-default)',\r\n hoverBg: 'var(--brycks-warning-hover)',\r\n activeBg: 'var(--brycks-warning-hover)',\r\n text: 'var(--brycks-warning-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-warning-default)',\r\n hoverBg: 'var(--brycks-warning-muted)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-warning-muted)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-warning-muted)',\r\n hoverBg: 'var(--brycks-warning-soft-hover)',\r\n text: 'var(--brycks-warning-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-warning-default)',\r\n hoverText: 'var(--brycks-warning-hover)',\r\n },\r\n },\r\n error: {\r\n solid: {\r\n bg: 'var(--brycks-error-default)',\r\n hoverBg: 'var(--brycks-error-hover)',\r\n activeBg: 'var(--brycks-error-hover)',\r\n text: 'var(--brycks-error-foreground)',\r\n },\r\n outline: {\r\n border: 'var(--brycks-error-default)',\r\n hoverBg: 'var(--brycks-error-muted)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n ghost: {\r\n hoverBg: 'var(--brycks-error-muted)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n soft: {\r\n bg: 'var(--brycks-error-muted)',\r\n hoverBg: 'var(--brycks-error-soft-hover)',\r\n text: 'var(--brycks-error-default)',\r\n },\r\n link: {\r\n text: 'var(--brycks-error-default)',\r\n hoverText: 'var(--brycks-error-hover)',\r\n },\r\n },\r\n}\r\n\r\nexport interface ButtonStyleProps {\r\n variant: ButtonVariant\r\n intent: ButtonIntent\r\n size: ButtonSize\r\n fullWidth?: boolean\r\n isIconOnly?: boolean\r\n isDisabled?: boolean\r\n isLoading?: boolean\r\n}\r\n\r\nexport function getButtonStyles(props: ButtonStyleProps): {\r\n base: CSSProperties\r\n hover: CSSProperties\r\n active: CSSProperties\r\n disabled: CSSProperties\r\n loading: CSSProperties\r\n} {\r\n const { variant, intent, size, fullWidth, isIconOnly } = props\r\n const sizeValues = sizeConfig[size]\r\n const colors = intentColors[intent][variant]\r\n\r\n // Base styles common to all buttons\r\n const base: CSSProperties = {\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n gap: sizeValues.gap,\r\n height: sizeValues.height,\r\n minWidth: isIconOnly ? sizeValues.height : undefined,\r\n width: fullWidth ? '100%' : undefined,\r\n padding: isIconOnly ? 0 : `0 ${sizeValues.paddingX}px`,\r\n fontSize: sizeValues.fontSize,\r\n fontWeight: componentFontWeight.medium,\r\n fontFamily: 'var(--brycks-font-sans)',\r\n lineHeight: componentLineHeight.none,\r\n borderRadius: sizeValues.radius,\r\n border: 'none',\r\n outline: 'none',\r\n cursor: 'pointer',\r\n userSelect: 'none',\r\n textDecoration: 'none',\r\n transition: transition.quick,\r\n WebkitTapHighlightColor: 'transparent',\r\n }\r\n\r\n // Apply variant-specific base styles\r\n switch (variant) {\r\n case 'solid': {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: solidColors.bg,\r\n color: solidColors.text,\r\n boxShadow: 'var(--brycks-shadow-xs)',\r\n })\r\n break\r\n }\r\n\r\n case 'outline': {\r\n const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: outlineColors.text,\r\n border: `1px solid ${outlineColors.border}`,\r\n })\r\n break\r\n }\r\n\r\n case 'ghost': {\r\n const ghostColors = colors as { hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: ghostColors.text,\r\n })\r\n break\r\n }\r\n\r\n case 'soft': {\r\n const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n Object.assign(base, {\r\n backgroundColor: softColors.bg,\r\n color: softColors.text,\r\n })\r\n break\r\n }\r\n\r\n case 'link': {\r\n const linkColors = colors as { text: string; hoverText: string }\r\n Object.assign(base, {\r\n backgroundColor: 'transparent',\r\n color: linkColors.text,\r\n height: 'auto',\r\n padding: 0,\r\n borderRadius: 0,\r\n })\r\n break\r\n }\r\n }\r\n\r\n // Hover styles\r\n const hover: CSSProperties = {}\r\n switch (variant) {\r\n case 'solid': {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n hover.backgroundColor = solidColors.hoverBg\r\n hover.boxShadow = 'var(--brycks-shadow-sm)'\r\n break\r\n }\r\n case 'outline': {\r\n const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n hover.backgroundColor = outlineColors.hoverBg\r\n break\r\n }\r\n case 'ghost': {\r\n const ghostColors = colors as { hoverBg: string; text: string }\r\n hover.backgroundColor = ghostColors.hoverBg\r\n break\r\n }\r\n case 'soft': {\r\n const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n hover.backgroundColor = softColors.hoverBg\r\n break\r\n }\r\n case 'link': {\r\n const linkColors = colors as { text: string; hoverText: string }\r\n hover.color = linkColors.hoverText\r\n hover.textDecoration = 'underline'\r\n break\r\n }\r\n }\r\n\r\n // Active/pressed styles\r\n const active: CSSProperties = {\r\n transform: variant !== 'link' ? `scale(${scale.pressed})` : undefined,\r\n }\r\n if (variant === 'solid') {\r\n const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n active.backgroundColor = solidColors.activeBg\r\n active.boxShadow = 'var(--brycks-shadow-xs)'\r\n }\r\n\r\n // Disabled styles\r\n const disabled: CSSProperties = {\r\n opacity: stateOpacity.disabled,\r\n cursor: 'not-allowed',\r\n pointerEvents: 'none',\r\n }\r\n\r\n // Loading styles\r\n const loading: CSSProperties = {\r\n cursor: 'wait',\r\n pointerEvents: 'none',\r\n }\r\n\r\n return { base, hover, active, disabled, loading }\r\n}\r\n\r\nexport { sizeConfig }\r\n"],"names":["sizeConfig","componentHeights","componentPaddingX","iconSizes","componentGap","intentColors","getButtonStyles","props","variant","intent","size","fullWidth","isIconOnly","sizeValues","colors","base","componentFontWeight","componentLineHeight","transition","solidColors","outlineColors","softColors","hover","ghostColors","linkColors","active","scale","disabled","stateOpacity"],"mappings":"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"}
package/dist/components/typography/Heading/Heading.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("react"),c=require("../../../design-system/tokens/typography.cjs"),S=require("../../../utils/styles.cjs"),m={1:"h1",2:"h2",3:"h3",4:"h4",5:"h5",6:"h6",display:"displayMedium",displayLarge:"displayLarge",displaySmall:"displaySmall"};function w(e){const i=e.level??2,a=e.size??i,l=m[a],n=c.textStyles[l],t={fontFamily:n.fontFamily,fontSize:n.fontSize,fontWeight:e.weight?c.fontWeights[e.weight]:n.fontWeight,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing,margin:0};return e.align&&(t.textAlign=e.align),e.color&&(t.color=e.color),e.truncate&&(t.overflow="hidden",t.textOverflow="ellipsis",t.whiteSpace="nowrap"),t}const x=({as:e,level:i=2,className:a,style:l,children:n,testId:t,...o},d)=>{const h=e||`h${i}`,f=w({level:i,...o}),{size:H,weight:b,align:p,color:v,truncate:_,...u}=o;return r.jsx(h,{ref:d,className:S.cx("brycks-heading",`brycks-heading--${i}`,a),style:{...f,...l},"data-testid":t,...u,children:n})},s=y.forwardRef(x);s.displayName="Heading";const z=({size:e="display",...i},a)=>r.jsx(s,{ref:a,level:1,size:e,...i}),g=y.forwardRef(z);g.displayName="Display";exports.Display=g;exports.Heading=s;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),o=require("react"),y=require("../../../design-system/tokens/typography.cjs"),m=require("../../../utils/styles.cjs"),S={1:"h1",2:"h2",3:"h3",4:"h4",5:"h5",6:"h6",display:"displayMedium",displayLarge:"displayLarge",displaySmall:"displaySmall"},b={h1:"var(--brycks-fs-h1)",h2:"var(--brycks-fs-h2)",h3:"var(--brycks-fs-h3)",h4:"var(--brycks-fs-h4)",h5:"var(--brycks-fs-h5)",h6:"var(--brycks-fs-h6)",displayLarge:"var(--brycks-fs-display-lg)",displayMedium:"var(--brycks-fs-display-md)",displaySmall:"var(--brycks-fs-display-sm)"};function v(e){const s=e.level??2,a=e.size??s,l=S[a],i=y.textStyles[l],n=b[l],t={fontFamily:i.fontFamily,fontSize:n,fontWeight:e.weight?y.fontWeights[e.weight]:i.fontWeight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,margin:0};return e.align&&(t.textAlign=e.align),e.color&&(t.color=e.color),e.truncate&&(t.overflow="hidden",t.textOverflow="ellipsis",t.whiteSpace="nowrap"),t}const k=({as:e,level:s=2,className:a,style:l,children:i,testId:n,...t},h)=>{const g=e||`h${s}`,f=v({level:s,...t}),{size:w,weight:x,align:z,color:H,truncate:_,...u}=t;return c.jsx(g,{ref:h,className:m.cx("brycks-heading",`brycks-heading--${s}`,a),style:{...f,...l},"data-testid":n,...u,children:i})},r=o.forwardRef(k);r.displayName="Heading";const p=({size:e="display",...s},a)=>c.jsx(r,{ref:a,level:1,size:e,...s}),d=o.forwardRef(p);d.displayName="Display";exports.Display=d;exports.Heading=r;
2
2
  //# sourceMappingURL=Heading.cjs.map
package/dist/components/typography/Heading/Heading.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Heading.cjs","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["/**\r\n * Heading Component\r\n *\r\n * Semantic heading component with consistent typography styles.\r\n * Maps heading levels (h1-h6) to appropriate visual styles.\r\n */\r\n\r\nimport React, {\r\n forwardRef,\r\n type ElementType,\r\n type ComponentPropsWithRef,\r\n type CSSProperties,\r\n type ReactNode,\r\n type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n fontWeights,\r\n textStyles,\r\n type FontWeight,\r\n} from '../../../design-system/tokens/typography'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\r\n\r\nexport interface HeadingOwnProps {\r\n /** The element type to render */\r\n as?: ElementType\r\n /** Heading level (1-6) - determines semantic element and default styling */\r\n level?: HeadingLevel\r\n /** Visual size override - use a different visual style than the semantic level */\r\n size?: HeadingLevel | 'display' | 'displayLarge' | 'displaySmall'\r\n /** Font weight override */\r\n weight?: FontWeight\r\n /** Text alignment */\r\n align?: CSSProperties['textAlign']\r\n /** Text color (CSS variable or direct value) */\r\n color?: string\r\n /** Whether text should truncate with ellipsis */\r\n truncate?: boolean\r\n /** Custom class name */\r\n className?: string\r\n /** Custom inline styles */\r\n style?: CSSProperties\r\n /** Children */\r\n children?: ReactNode\r\n /** Test ID */\r\n testId?: string\r\n}\r\n\r\nexport type HeadingProps<E extends ElementType = 'h2'> = HeadingOwnProps &\r\n Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps>\r\n\r\ninterface HeadingComponent {\r\n <E extends ElementType = 'h2'>(\r\n props: HeadingProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n ): React.JSX.Element | null\r\n displayName?: string\r\n}\r\n\r\ntype StyleKey =\r\n | 'h1'\r\n | 'h2'\r\n | 'h3'\r\n | 'h4'\r\n | 'h5'\r\n | 'h6'\r\n | 'displayLarge'\r\n | 'displayMedium'\r\n | 'displaySmall'\r\n\r\nconst sizeToStyleMap: Record<NonNullable<HeadingOwnProps['size']>, StyleKey> = {\r\n 1: 'h1',\r\n 2: 'h2',\r\n 3: 'h3',\r\n 4: 'h4',\r\n 5: 'h5',\r\n 6: 'h6',\r\n display: 'displayMedium',\r\n displayLarge: 'displayLarge',\r\n displaySmall: 'displaySmall',\r\n}\r\n\r\nfunction buildHeadingStyles(props: HeadingOwnProps): CSSProperties {\r\n const level = props.level ?? 2\r\n const visualSize = props.size ?? level\r\n const styleKey = sizeToStyleMap[visualSize]\r\n const baseStyles = textStyles[styleKey]\r\n\r\n const styles: CSSProperties = {\r\n fontFamily: baseStyles.fontFamily,\r\n fontSize: baseStyles.fontSize,\r\n fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n lineHeight: baseStyles.lineHeight,\r\n letterSpacing: baseStyles.letterSpacing,\r\n margin: 0,\r\n }\r\n\r\n if (props.align) styles.textAlign = props.align\r\n if (props.color) styles.color = props.color\r\n\r\n if (props.truncate) {\r\n styles.overflow = 'hidden'\r\n styles.textOverflow = 'ellipsis'\r\n styles.whiteSpace = 'nowrap'\r\n }\r\n\r\n return styles\r\n}\r\n\r\nconst HeadingInner = <E extends ElementType = 'h2'>(\r\n { as, level = 2, className, style, children, testId, ...props }: HeadingProps<E>,\r\n ref: React.ForwardedRef<Element>\r\n) => {\r\n const Component = as || (`h${level}` as ElementType)\r\n const headingStyles = buildHeadingStyles({ level, ...props } as HeadingOwnProps)\r\n\r\n // Remove custom props before spreading\r\n const {\r\n size: _size,\r\n weight: _weight,\r\n align: _align,\r\n color: _color,\r\n truncate: _truncate,\r\n ...rest\r\n } = props\r\n\r\n return (\r\n <Component\r\n ref={ref}\r\n className={cx('brycks-heading', `brycks-heading--${level}`, className)}\r\n style={{ ...headingStyles, ...style }}\r\n data-testid={testId}\r\n {...rest}\r\n >\r\n {children}\r\n </Component>\r\n )\r\n}\r\n\r\nexport const Heading = forwardRef(HeadingInner) as HeadingComponent\r\n\r\nHeading.displayName = 'Heading'\r\n\r\n/** Display heading for hero sections */\r\nconst DisplayInner = <E extends ElementType = 'h1'>(\r\n { size = 'display', ...props }: HeadingProps<E>,\r\n ref: React.ForwardedRef<Element>\r\n) => {\r\n return <Heading ref={ref as React.ForwardedRef<HTMLHeadingElement>} level={1} size={size} {...(props as HeadingProps<'h1'>)} />\r\n}\r\n\r\nexport const Display = forwardRef(DisplayInner) as HeadingComponent\r\n\r\nDisplay.displayName = 'Display'\r\n"],"names":["sizeToStyleMap","buildHeadingStyles","props","level","visualSize","styleKey","baseStyles","textStyles","styles","fontWeights","HeadingInner","as","className","style","children","testId","ref","Component","headingStyles","_size","_weight","_align","_color","_truncate","rest","jsx","cx","Heading","forwardRef","DisplayInner","size","Display"],"mappings":"yOAsEMA,EAAyE,CAC7E,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,QAAS,gBACT,aAAc,eACd,aAAc,cAChB,EAEA,SAASC,EAAmBC,EAAuC,CACjE,MAAMC,EAAQD,EAAM,OAAS,EACvBE,EAAaF,EAAM,MAAQC,EAC3BE,EAAWL,EAAeI,CAAU,EACpCE,EAAaC,EAAAA,WAAWF,CAAQ,EAEhCG,EAAwB,CAC5B,WAAYF,EAAW,WACvB,SAAUA,EAAW,SACrB,WAAYJ,EAAM,OAASO,EAAAA,YAAYP,EAAM,MAAM,EAAII,EAAW,WAClE,WAAYA,EAAW,WACvB,cAAeA,EAAW,cAC1B,OAAQ,CAAA,EAGV,OAAIJ,EAAM,QAAOM,EAAO,UAAYN,EAAM,OACtCA,EAAM,QAAOM,EAAO,MAAQN,EAAM,OAElCA,EAAM,WACRM,EAAO,SAAW,SAClBA,EAAO,aAAe,WACtBA,EAAO,WAAa,UAGfA,CACT,CAEA,MAAME,EAAe,CACnB,CAAE,GAAAC,EAAI,MAAAR,EAAQ,EAAG,UAAAS,EAAW,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,GAAGb,CAAA,EACxDc,IACG,CACH,MAAMC,EAAYN,GAAO,IAAIR,CAAK,GAC5Be,EAAgBjB,EAAmB,CAAE,MAAAE,EAAO,GAAGD,EAA0B,EAGzE,CACJ,KAAMiB,EACN,OAAQC,EACR,MAAOC,EACP,MAAOC,EACP,SAAUC,EACV,GAAGC,CAAA,EACDtB,EAEJ,OACEuB,EAAAA,IAACR,EAAA,CACC,IAAAD,EACA,UAAWU,EAAAA,GAAG,iBAAkB,mBAAmBvB,CAAK,GAAIS,CAAS,EACrE,MAAO,CAAE,GAAGM,EAAe,GAAGL,CAAA,EAC9B,cAAaE,EACZ,GAAGS,EAEH,SAAAV,CAAA,CAAA,CAGP,EAEaa,EAAUC,EAAAA,WAAWlB,CAAY,EAE9CiB,EAAQ,YAAc,UAGtB,MAAME,EAAe,CACnB,CAAE,KAAAC,EAAO,UAAW,GAAG5B,CAAA,EACvBc,UAEQW,EAAA,CAAQ,IAAAX,EAAoD,MAAO,EAAG,KAAAc,EAAa,GAAI5B,EAA8B,EAGlH6B,EAAUH,EAAAA,WAAWC,CAAY,EAE9CE,EAAQ,YAAc"}
1
+ {"version":3,"file":"Heading.cjs","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["/**\r\n * Heading Component\r\n *\r\n * Semantic heading component with consistent typography styles.\r\n * Maps heading levels (h1-h6) to appropriate visual styles.\r\n * Uses CSS variables for font sizes to enable dynamic scaling.\r\n */\r\n\r\nimport React, {\r\n forwardRef,\r\n type ElementType,\r\n type ComponentPropsWithRef,\r\n type CSSProperties,\r\n type ReactNode,\r\n type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n fontWeights,\r\n textStyles,\r\n type FontWeight,\r\n} from '../../../design-system/tokens/typography'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\r\n\r\nexport interface HeadingOwnProps {\r\n /** The element type to render */\r\n as?: ElementType\r\n /** Heading level (1-6) - determines semantic element and default styling */\r\n level?: HeadingLevel\r\n /** Visual size override - use a different visual style than the semantic level */\r\n size?: HeadingLevel | 'display' | 'displayLarge' | 'displaySmall'\r\n /** Font weight override */\r\n weight?: FontWeight\r\n /** Text alignment */\r\n align?: CSSProperties['textAlign']\r\n /** Text color (CSS variable or direct value) */\r\n color?: string\r\n /** Whether text should truncate with ellipsis */\r\n truncate?: boolean\r\n /** Custom class name */\r\n className?: string\r\n /** Custom inline styles */\r\n style?: CSSProperties\r\n /** Children */\r\n children?: ReactNode\r\n /** Test ID */\r\n testId?: string\r\n}\r\n\r\nexport type HeadingProps<E extends ElementType = 'h2'> = HeadingOwnProps &\r\n Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps>\r\n\r\ninterface HeadingComponent {\r\n <E extends ElementType = 'h2'>(\r\n props: HeadingProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n ): React.JSX.Element | null\r\n displayName?: string\r\n}\r\n\r\ntype StyleKey =\r\n | 'h1'\r\n | 'h2'\r\n | 'h3'\r\n | 'h4'\r\n | 'h5'\r\n | 'h6'\r\n | 'displayLarge'\r\n | 'displayMedium'\r\n | 'displaySmall'\r\n\r\nconst sizeToStyleMap: Record<NonNullable<HeadingOwnProps['size']>, StyleKey> = {\r\n 1: 'h1',\r\n 2: 'h2',\r\n 3: 'h3',\r\n 4: 'h4',\r\n 5: 'h5',\r\n 6: 'h6',\r\n display: 'displayMedium',\r\n displayLarge: 'displayLarge',\r\n displaySmall: 'displaySmall',\r\n}\r\n\r\n/**\r\n * Maps style keys to CSS variables for font-size\r\n * Uses --brycks-fs-h* for headings and --brycks-fs-display-* for display\r\n */\r\nconst styleKeyToFontSizeVar: Record<StyleKey, string> = {\r\n h1: 'var(--brycks-fs-h1)',\r\n h2: 'var(--brycks-fs-h2)',\r\n h3: 'var(--brycks-fs-h3)',\r\n h4: 'var(--brycks-fs-h4)',\r\n h5: 'var(--brycks-fs-h5)',\r\n h6: 'var(--brycks-fs-h6)',\r\n displayLarge: 'var(--brycks-fs-display-lg)',\r\n displayMedium: 'var(--brycks-fs-display-md)',\r\n displaySmall: 'var(--brycks-fs-display-sm)',\r\n}\r\n\r\nfunction buildHeadingStyles(props: HeadingOwnProps): CSSProperties {\r\n const level = props.level ?? 2\r\n const visualSize = props.size ?? level\r\n const styleKey = sizeToStyleMap[visualSize]\r\n const baseStyles = textStyles[styleKey]\r\n\r\n // Use CSS variables for font-size to enable dynamic scaling\r\n const fontSize = styleKeyToFontSizeVar[styleKey]\r\n\r\n const styles: CSSProperties = {\r\n fontFamily: baseStyles.fontFamily,\r\n fontSize,\r\n fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n lineHeight: baseStyles.lineHeight,\r\n letterSpacing: baseStyles.letterSpacing,\r\n margin: 0,\r\n }\r\n\r\n if (props.align) styles.textAlign = props.align\r\n if (props.color) styles.color = props.color\r\n\r\n if (props.truncate) {\r\n styles.overflow = 'hidden'\r\n styles.textOverflow = 'ellipsis'\r\n styles.whiteSpace = 'nowrap'\r\n }\r\n\r\n return styles\r\n}\r\n\r\nconst HeadingInner = <E extends ElementType = 'h2'>(\r\n { as, level = 2, className, style, children, testId, ...props }: HeadingProps<E>,\r\n ref: React.ForwardedRef<Element>\r\n) => {\r\n const Component = as || (`h${level}` as ElementType)\r\n const headingStyles = buildHeadingStyles({ level, ...props } as HeadingOwnProps)\r\n\r\n // Remove custom props before spreading\r\n const {\r\n size: _size,\r\n weight: _weight,\r\n align: _align,\r\n color: _color,\r\n truncate: _truncate,\r\n ...rest\r\n } = props\r\n\r\n return (\r\n <Component\r\n ref={ref}\r\n className={cx('brycks-heading', `brycks-heading--${level}`, className)}\r\n style={{ ...headingStyles, ...style }}\r\n data-testid={testId}\r\n {...rest}\r\n >\r\n {children}\r\n </Component>\r\n )\r\n}\r\n\r\nexport const Heading = forwardRef(HeadingInner) as HeadingComponent\r\n\r\nHeading.displayName = 'Heading'\r\n\r\n/** Display heading for hero sections */\r\nconst DisplayInner = <E extends ElementType = 'h1'>(\r\n { size = 'display', ...props }: HeadingProps<E>,\r\n ref: React.ForwardedRef<Element>\r\n) => {\r\n return <Heading ref={ref as React.ForwardedRef<HTMLHeadingElement>} level={1} size={size} {...(props as HeadingProps<'h1'>)} />\r\n}\r\n\r\nexport const Display = forwardRef(DisplayInner) as HeadingComponent\r\n\r\nDisplay.displayName = 'Display'\r\n"],"names":["sizeToStyleMap","styleKeyToFontSizeVar","buildHeadingStyles","props","level","visualSize","styleKey","baseStyles","textStyles","fontSize","styles","fontWeights","HeadingInner","as","className","style","children","testId","ref","Component","headingStyles","_size","_weight","_align","_color","_truncate","rest","jsx","cx","Heading","forwardRef","DisplayInner","size","Display"],"mappings":"yOAuEMA,EAAyE,CAC7E,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,QAAS,gBACT,aAAc,eACd,aAAc,cAChB,EAMMC,EAAkD,CACtD,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,aAAc,8BACd,cAAe,8BACf,aAAc,6BAChB,EAEA,SAASC,EAAmBC,EAAuC,CACjE,MAAMC,EAAQD,EAAM,OAAS,EACvBE,EAAaF,EAAM,MAAQC,EAC3BE,EAAWN,EAAeK,CAAU,EACpCE,EAAaC,EAAAA,WAAWF,CAAQ,EAGhCG,EAAWR,EAAsBK,CAAQ,EAEzCI,EAAwB,CAC5B,WAAYH,EAAW,WACvB,SAAAE,EACA,WAAYN,EAAM,OAASQ,EAAAA,YAAYR,EAAM,MAAM,EAAII,EAAW,WAClE,WAAYA,EAAW,WACvB,cAAeA,EAAW,cAC1B,OAAQ,CAAA,EAGV,OAAIJ,EAAM,QAAOO,EAAO,UAAYP,EAAM,OACtCA,EAAM,QAAOO,EAAO,MAAQP,EAAM,OAElCA,EAAM,WACRO,EAAO,SAAW,SAClBA,EAAO,aAAe,WACtBA,EAAO,WAAa,UAGfA,CACT,CAEA,MAAME,EAAe,CACnB,CAAE,GAAAC,EAAI,MAAAT,EAAQ,EAAG,UAAAU,EAAW,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,GAAGd,CAAA,EACxDe,IACG,CACH,MAAMC,EAAYN,GAAO,IAAIT,CAAK,GAC5BgB,EAAgBlB,EAAmB,CAAE,MAAAE,EAAO,GAAGD,EAA0B,EAGzE,CACJ,KAAMkB,EACN,OAAQC,EACR,MAAOC,EACP,MAAOC,EACP,SAAUC,EACV,GAAGC,CAAA,EACDvB,EAEJ,OACEwB,EAAAA,IAACR,EAAA,CACC,IAAAD,EACA,UAAWU,EAAAA,GAAG,iBAAkB,mBAAmBxB,CAAK,GAAIU,CAAS,EACrE,MAAO,CAAE,GAAGM,EAAe,GAAGL,CAAA,EAC9B,cAAaE,EACZ,GAAGS,EAEH,SAAAV,CAAA,CAAA,CAGP,EAEaa,EAAUC,EAAAA,WAAWlB,CAAY,EAE9CiB,EAAQ,YAAc,UAGtB,MAAME,EAAe,CACnB,CAAE,KAAAC,EAAO,UAAW,GAAG7B,CAAA,EACvBe,UAEQW,EAAA,CAAQ,IAAAX,EAAoD,MAAO,EAAG,KAAAc,EAAa,GAAI7B,EAA8B,EAGlH8B,EAAUH,EAAAA,WAAWC,CAAY,EAE9CE,EAAQ,YAAc"}
package/dist/components/typography/Heading/Heading.js CHANGED
@@ -1,8 +1,8 @@
1
- import { jsx as o } from "react/jsx-runtime";
2
- import { forwardRef as c } from "react";
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { forwardRef as o } from "react";
3
3
  import { textStyles as f, fontWeights as m } from "../../../design-system/tokens/typography.js";
4
4
  import { cx as S } from "../../../utils/styles.js";
5
- const u = {
5
+ const b = {
6
6
  1: "h1",
7
7
  2: "h2",
8
8
  3: "h3",
@@ -12,44 +12,54 @@ const u = {
12
12
  display: "displayMedium",
13
13
  displayLarge: "displayLarge",
14
14
  displaySmall: "displaySmall"
15
+ }, v = {
16
+ h1: "var(--brycks-fs-h1)",
17
+ h2: "var(--brycks-fs-h2)",
18
+ h3: "var(--brycks-fs-h3)",
19
+ h4: "var(--brycks-fs-h4)",
20
+ h5: "var(--brycks-fs-h5)",
21
+ h6: "var(--brycks-fs-h6)",
22
+ displayLarge: "var(--brycks-fs-display-lg)",
23
+ displayMedium: "var(--brycks-fs-display-md)",
24
+ displaySmall: "var(--brycks-fs-display-sm)"
15
25
  };
16
- function w(e) {
17
- const i = e.level ?? 2, l = e.size ?? i, a = u[l], n = f[a], t = {
18
- fontFamily: n.fontFamily,
19
- fontSize: n.fontSize,
20
- fontWeight: e.weight ? m[e.weight] : n.fontWeight,
21
- lineHeight: n.lineHeight,
22
- letterSpacing: n.letterSpacing,
26
+ function p(e) {
27
+ const i = e.level ?? 2, a = e.size ?? i, l = b[a], s = f[l], n = v[l], t = {
28
+ fontFamily: s.fontFamily,
29
+ fontSize: n,
30
+ fontWeight: e.weight ? m[e.weight] : s.fontWeight,
31
+ lineHeight: s.lineHeight,
32
+ letterSpacing: s.letterSpacing,
23
33
  margin: 0
24
34
  };
25
35
  return e.align && (t.textAlign = e.align), e.color && (t.color = e.color), e.truncate && (t.overflow = "hidden", t.textOverflow = "ellipsis", t.whiteSpace = "nowrap"), t;
26
36
  }
27
- const z = ({ as: e, level: i = 2, className: l, style: a, children: n, testId: t, ...s }, g) => {
28
- const y = e || `h${i}`, d = w({ level: i, ...s }), {
29
- size: H,
30
- weight: _,
31
- align: b,
32
- color: v,
37
+ const k = ({ as: e, level: i = 2, className: a, style: l, children: s, testId: n, ...t }, c) => {
38
+ const h = e || `h${i}`, d = p({ level: i, ...t }), {
39
+ size: z,
40
+ weight: x,
41
+ align: H,
42
+ color: _,
33
43
  truncate: D,
34
- ...h
35
- } = s;
36
- return /* @__PURE__ */ o(
37
- y,
44
+ ...g
45
+ } = t;
46
+ return /* @__PURE__ */ r(
47
+ h,
38
48
  {
39
- ref: g,
40
- className: S("brycks-heading", `brycks-heading--${i}`, l),
41
- style: { ...d, ...a },
42
- "data-testid": t,
43
- ...h,
44
- children: n
49
+ ref: c,
50
+ className: S("brycks-heading", `brycks-heading--${i}`, a),
51
+ style: { ...d, ...l },
52
+ "data-testid": n,
53
+ ...g,
54
+ children: s
45
55
  }
46
56
  );
47
- }, r = c(z);
48
- r.displayName = "Heading";
49
- const p = ({ size: e = "display", ...i }, l) => /* @__PURE__ */ o(r, { ref: l, level: 1, size: e, ...i }), x = c(p);
50
- x.displayName = "Display";
57
+ }, y = o(k);
58
+ y.displayName = "Heading";
59
+ const u = ({ size: e = "display", ...i }, a) => /* @__PURE__ */ r(y, { ref: a, level: 1, size: e, ...i }), w = o(u);
60
+ w.displayName = "Display";
51
61
  export {
52
- x as Display,
53
- r as Heading
62
+ w as Display,
63
+ y as Heading
54
64
  };
55
65
  //# sourceMappingURL=Heading.js.map
package/dist/components/typography/Heading/Heading.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Heading.js","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["/**\r\n * Heading Component\r\n *\r\n * Semantic heading component with consistent typography styles.\r\n * Maps heading levels (h1-h6) to appropriate visual styles.\r\n */\r\n\r\nimport React, {\r\n forwardRef,\r\n type ElementType,\r\n type ComponentPropsWithRef,\r\n type CSSProperties,\r\n type ReactNode,\r\n type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n fontWeights,\r\n textStyles,\r\n type FontWeight,\r\n} from '../../../design-system/tokens/typography'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\r\n\r\nexport interface HeadingOwnProps {\r\n /** The element type to render */\r\n as?: ElementType\r\n /** Heading level (1-6) - determines semantic element and default styling */\r\n level?: HeadingLevel\r\n /** Visual size override - use a different visual style than the semantic level */\r\n size?: HeadingLevel | 'display' | 'displayLarge' | 'displaySmall'\r\n /** Font weight override */\r\n weight?: FontWeight\r\n /** Text alignment */\r\n align?: CSSProperties['textAlign']\r\n /** Text color (CSS variable or direct value) */\r\n color?: string\r\n /** Whether text should truncate with ellipsis */\r\n truncate?: boolean\r\n /** Custom class name */\r\n className?: string\r\n /** Custom inline styles */\r\n style?: CSSProperties\r\n /** Children */\r\n children?: ReactNode\r\n /** Test ID */\r\n testId?: string\r\n}\r\n\r\nexport type HeadingProps<E extends ElementType = 'h2'> = HeadingOwnProps &\r\n Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps>\r\n\r\ninterface HeadingComponent {\r\n <E extends ElementType = 'h2'>(\r\n props: HeadingProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n ): React.JSX.Element | null\r\n displayName?: string\r\n}\r\n\r\ntype StyleKey =\r\n | 'h1'\r\n | 'h2'\r\n | 'h3'\r\n | 'h4'\r\n | 'h5'\r\n | 'h6'\r\n | 'displayLarge'\r\n | 'displayMedium'\r\n | 'displaySmall'\r\n\r\nconst sizeToStyleMap: Record<NonNullable<HeadingOwnProps['size']>, StyleKey> = {\r\n 1: 'h1',\r\n 2: 'h2',\r\n 3: 'h3',\r\n 4: 'h4',\r\n 5: 'h5',\r\n 6: 'h6',\r\n display: 'displayMedium',\r\n displayLarge: 'displayLarge',\r\n displaySmall: 'displaySmall',\r\n}\r\n\r\nfunction buildHeadingStyles(props: HeadingOwnProps): CSSProperties {\r\n const level = props.level ?? 2\r\n const visualSize = props.size ?? level\r\n const styleKey = sizeToStyleMap[visualSize]\r\n const baseStyles = textStyles[styleKey]\r\n\r\n const styles: CSSProperties = {\r\n fontFamily: baseStyles.fontFamily,\r\n fontSize: baseStyles.fontSize,\r\n fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n lineHeight: baseStyles.lineHeight,\r\n letterSpacing: baseStyles.letterSpacing,\r\n margin: 0,\r\n }\r\n\r\n if (props.align) styles.textAlign = props.align\r\n if (props.color) styles.color = props.color\r\n\r\n if (props.truncate) {\r\n styles.overflow = 'hidden'\r\n styles.textOverflow = 'ellipsis'\r\n styles.whiteSpace = 'nowrap'\r\n }\r\n\r\n return styles\r\n}\r\n\r\nconst HeadingInner = <E extends ElementType = 'h2'>(\r\n { as, level = 2, className, style, children, testId, ...props }: HeadingProps<E>,\r\n ref: React.ForwardedRef<Element>\r\n) => {\r\n const Component = as || (`h${level}` as ElementType)\r\n const headingStyles = buildHeadingStyles({ level, ...props } as HeadingOwnProps)\r\n\r\n // Remove custom props before spreading\r\n const {\r\n size: _size,\r\n weight: _weight,\r\n align: _align,\r\n color: _color,\r\n truncate: _truncate,\r\n ...rest\r\n } = props\r\n\r\n return (\r\n <Component\r\n ref={ref}\r\n className={cx('brycks-heading', `brycks-heading--${level}`, className)}\r\n style={{ ...headingStyles, ...style }}\r\n data-testid={testId}\r\n {...rest}\r\n >\r\n {children}\r\n </Component>\r\n )\r\n}\r\n\r\nexport const Heading = forwardRef(HeadingInner) as HeadingComponent\r\n\r\nHeading.displayName = 'Heading'\r\n\r\n/** Display heading for hero sections */\r\nconst DisplayInner = <E extends ElementType = 'h1'>(\r\n { size = 'display', ...props }: HeadingProps<E>,\r\n ref: React.ForwardedRef<Element>\r\n) => {\r\n return <Heading ref={ref as React.ForwardedRef<HTMLHeadingElement>} level={1} size={size} {...(props as HeadingProps<'h1'>)} />\r\n}\r\n\r\nexport const Display = forwardRef(DisplayInner) as HeadingComponent\r\n\r\nDisplay.displayName = 'Display'\r\n"],"names":["sizeToStyleMap","buildHeadingStyles","props","level","visualSize","styleKey","baseStyles","textStyles","styles","fontWeights","HeadingInner","as","className","style","children","testId","ref","Component","headingStyles","_size","_weight","_align","_color","_truncate","rest","jsx","cx","Heading","forwardRef","DisplayInner","size","Display"],"mappings":";;;;AAsEA,MAAMA,IAAyE;AAAA,EAC7E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS;AAAA,EACT,cAAc;AAAA,EACd,cAAc;AAChB;AAEA,SAASC,EAAmBC,GAAuC;AACjE,QAAMC,IAAQD,EAAM,SAAS,GACvBE,IAAaF,EAAM,QAAQC,GAC3BE,IAAWL,EAAeI,CAAU,GACpCE,IAAaC,EAAWF,CAAQ,GAEhCG,IAAwB;AAAA,IAC5B,YAAYF,EAAW;AAAA,IACvB,UAAUA,EAAW;AAAA,IACrB,YAAYJ,EAAM,SAASO,EAAYP,EAAM,MAAM,IAAII,EAAW;AAAA,IAClE,YAAYA,EAAW;AAAA,IACvB,eAAeA,EAAW;AAAA,IAC1B,QAAQ;AAAA,EAAA;AAGV,SAAIJ,EAAM,UAAOM,EAAO,YAAYN,EAAM,QACtCA,EAAM,UAAOM,EAAO,QAAQN,EAAM,QAElCA,EAAM,aACRM,EAAO,WAAW,UAClBA,EAAO,eAAe,YACtBA,EAAO,aAAa,WAGfA;AACT;AAEA,MAAME,IAAe,CACnB,EAAE,IAAAC,GAAI,OAAAR,IAAQ,GAAG,WAAAS,GAAW,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,GAAGb,EAAA,GACxDc,MACG;AACH,QAAMC,IAAYN,KAAO,IAAIR,CAAK,IAC5Be,IAAgBjB,EAAmB,EAAE,OAAAE,GAAO,GAAGD,GAA0B,GAGzE;AAAA,IACJ,MAAMiB;AAAA,IACN,QAAQC;AAAA,IACR,OAAOC;AAAA,IACP,OAAOC;AAAA,IACP,UAAUC;AAAA,IACV,GAAGC;AAAA,EAAA,IACDtB;AAEJ,SACE,gBAAAuB;AAAA,IAACR;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWU,EAAG,kBAAkB,mBAAmBvB,CAAK,IAAIS,CAAS;AAAA,MACrE,OAAO,EAAE,GAAGM,GAAe,GAAGL,EAAA;AAAA,MAC9B,eAAaE;AAAA,MACZ,GAAGS;AAAA,MAEH,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaa,IAAUC,EAAWlB,CAAY;AAE9CiB,EAAQ,cAAc;AAGtB,MAAME,IAAe,CACnB,EAAE,MAAAC,IAAO,WAAW,GAAG5B,EAAA,GACvBc,wBAEQW,GAAA,EAAQ,KAAAX,GAAoD,OAAO,GAAG,MAAAc,GAAa,GAAI5B,GAA8B,GAGlH6B,IAAUH,EAAWC,CAAY;AAE9CE,EAAQ,cAAc;"}
1
+ {"version":3,"file":"Heading.js","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["/**\r\n * Heading Component\r\n *\r\n * Semantic heading component with consistent typography styles.\r\n * Maps heading levels (h1-h6) to appropriate visual styles.\r\n * Uses CSS variables for font sizes to enable dynamic scaling.\r\n */\r\n\r\nimport React, {\r\n forwardRef,\r\n type ElementType,\r\n type ComponentPropsWithRef,\r\n type CSSProperties,\r\n type ReactNode,\r\n type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n fontWeights,\r\n textStyles,\r\n type FontWeight,\r\n} from '../../../design-system/tokens/typography'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\r\n\r\nexport interface HeadingOwnProps {\r\n /** The element type to render */\r\n as?: ElementType\r\n /** Heading level (1-6) - determines semantic element and default styling */\r\n level?: HeadingLevel\r\n /** Visual size override - use a different visual style than the semantic level */\r\n size?: HeadingLevel | 'display' | 'displayLarge' | 'displaySmall'\r\n /** Font weight override */\r\n weight?: FontWeight\r\n /** Text alignment */\r\n align?: CSSProperties['textAlign']\r\n /** Text color (CSS variable or direct value) */\r\n color?: string\r\n /** Whether text should truncate with ellipsis */\r\n truncate?: boolean\r\n /** Custom class name */\r\n className?: string\r\n /** Custom inline styles */\r\n style?: CSSProperties\r\n /** Children */\r\n children?: ReactNode\r\n /** Test ID */\r\n testId?: string\r\n}\r\n\r\nexport type HeadingProps<E extends ElementType = 'h2'> = HeadingOwnProps &\r\n Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps>\r\n\r\ninterface HeadingComponent {\r\n <E extends ElementType = 'h2'>(\r\n props: HeadingProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n ): React.JSX.Element | null\r\n displayName?: string\r\n}\r\n\r\ntype StyleKey =\r\n | 'h1'\r\n | 'h2'\r\n | 'h3'\r\n | 'h4'\r\n | 'h5'\r\n | 'h6'\r\n | 'displayLarge'\r\n | 'displayMedium'\r\n | 'displaySmall'\r\n\r\nconst sizeToStyleMap: Record<NonNullable<HeadingOwnProps['size']>, StyleKey> = {\r\n 1: 'h1',\r\n 2: 'h2',\r\n 3: 'h3',\r\n 4: 'h4',\r\n 5: 'h5',\r\n 6: 'h6',\r\n display: 'displayMedium',\r\n displayLarge: 'displayLarge',\r\n displaySmall: 'displaySmall',\r\n}\r\n\r\n/**\r\n * Maps style keys to CSS variables for font-size\r\n * Uses --brycks-fs-h* for headings and --brycks-fs-display-* for display\r\n */\r\nconst styleKeyToFontSizeVar: Record<StyleKey, string> = {\r\n h1: 'var(--brycks-fs-h1)',\r\n h2: 'var(--brycks-fs-h2)',\r\n h3: 'var(--brycks-fs-h3)',\r\n h4: 'var(--brycks-fs-h4)',\r\n h5: 'var(--brycks-fs-h5)',\r\n h6: 'var(--brycks-fs-h6)',\r\n displayLarge: 'var(--brycks-fs-display-lg)',\r\n displayMedium: 'var(--brycks-fs-display-md)',\r\n displaySmall: 'var(--brycks-fs-display-sm)',\r\n}\r\n\r\nfunction buildHeadingStyles(props: HeadingOwnProps): CSSProperties {\r\n const level = props.level ?? 2\r\n const visualSize = props.size ?? level\r\n const styleKey = sizeToStyleMap[visualSize]\r\n const baseStyles = textStyles[styleKey]\r\n\r\n // Use CSS variables for font-size to enable dynamic scaling\r\n const fontSize = styleKeyToFontSizeVar[styleKey]\r\n\r\n const styles: CSSProperties = {\r\n fontFamily: baseStyles.fontFamily,\r\n fontSize,\r\n fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n lineHeight: baseStyles.lineHeight,\r\n letterSpacing: baseStyles.letterSpacing,\r\n margin: 0,\r\n }\r\n\r\n if (props.align) styles.textAlign = props.align\r\n if (props.color) styles.color = props.color\r\n\r\n if (props.truncate) {\r\n styles.overflow = 'hidden'\r\n styles.textOverflow = 'ellipsis'\r\n styles.whiteSpace = 'nowrap'\r\n }\r\n\r\n return styles\r\n}\r\n\r\nconst HeadingInner = <E extends ElementType = 'h2'>(\r\n { as, level = 2, className, style, children, testId, ...props }: HeadingProps<E>,\r\n ref: React.ForwardedRef<Element>\r\n) => {\r\n const Component = as || (`h${level}` as ElementType)\r\n const headingStyles = buildHeadingStyles({ level, ...props } as HeadingOwnProps)\r\n\r\n // Remove custom props before spreading\r\n const {\r\n size: _size,\r\n weight: _weight,\r\n align: _align,\r\n color: _color,\r\n truncate: _truncate,\r\n ...rest\r\n } = props\r\n\r\n return (\r\n <Component\r\n ref={ref}\r\n className={cx('brycks-heading', `brycks-heading--${level}`, className)}\r\n style={{ ...headingStyles, ...style }}\r\n data-testid={testId}\r\n {...rest}\r\n >\r\n {children}\r\n </Component>\r\n )\r\n}\r\n\r\nexport const Heading = forwardRef(HeadingInner) as HeadingComponent\r\n\r\nHeading.displayName = 'Heading'\r\n\r\n/** Display heading for hero sections */\r\nconst DisplayInner = <E extends ElementType = 'h1'>(\r\n { size = 'display', ...props }: HeadingProps<E>,\r\n ref: React.ForwardedRef<Element>\r\n) => {\r\n return <Heading ref={ref as React.ForwardedRef<HTMLHeadingElement>} level={1} size={size} {...(props as HeadingProps<'h1'>)} />\r\n}\r\n\r\nexport const Display = forwardRef(DisplayInner) as HeadingComponent\r\n\r\nDisplay.displayName = 'Display'\r\n"],"names":["sizeToStyleMap","styleKeyToFontSizeVar","buildHeadingStyles","props","level","visualSize","styleKey","baseStyles","textStyles","fontSize","styles","fontWeights","HeadingInner","as","className","style","children","testId","ref","Component","headingStyles","_size","_weight","_align","_color","_truncate","rest","jsx","cx","Heading","forwardRef","DisplayInner","size","Display"],"mappings":";;;;AAuEA,MAAMA,IAAyE;AAAA,EAC7E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS;AAAA,EACT,cAAc;AAAA,EACd,cAAc;AAChB,GAMMC,IAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAChB;AAEA,SAASC,EAAmBC,GAAuC;AACjE,QAAMC,IAAQD,EAAM,SAAS,GACvBE,IAAaF,EAAM,QAAQC,GAC3BE,IAAWN,EAAeK,CAAU,GACpCE,IAAaC,EAAWF,CAAQ,GAGhCG,IAAWR,EAAsBK,CAAQ,GAEzCI,IAAwB;AAAA,IAC5B,YAAYH,EAAW;AAAA,IACvB,UAAAE;AAAA,IACA,YAAYN,EAAM,SAASQ,EAAYR,EAAM,MAAM,IAAII,EAAW;AAAA,IAClE,YAAYA,EAAW;AAAA,IACvB,eAAeA,EAAW;AAAA,IAC1B,QAAQ;AAAA,EAAA;AAGV,SAAIJ,EAAM,UAAOO,EAAO,YAAYP,EAAM,QACtCA,EAAM,UAAOO,EAAO,QAAQP,EAAM,QAElCA,EAAM,aACRO,EAAO,WAAW,UAClBA,EAAO,eAAe,YACtBA,EAAO,aAAa,WAGfA;AACT;AAEA,MAAME,IAAe,CACnB,EAAE,IAAAC,GAAI,OAAAT,IAAQ,GAAG,WAAAU,GAAW,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,GAAGd,EAAA,GACxDe,MACG;AACH,QAAMC,IAAYN,KAAO,IAAIT,CAAK,IAC5BgB,IAAgBlB,EAAmB,EAAE,OAAAE,GAAO,GAAGD,GAA0B,GAGzE;AAAA,IACJ,MAAMkB;AAAA,IACN,QAAQC;AAAA,IACR,OAAOC;AAAA,IACP,OAAOC;AAAA,IACP,UAAUC;AAAA,IACV,GAAGC;AAAA,EAAA,IACDvB;AAEJ,SACE,gBAAAwB;AAAA,IAACR;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWU,EAAG,kBAAkB,mBAAmBxB,CAAK,IAAIU,CAAS;AAAA,MACrE,OAAO,EAAE,GAAGM,GAAe,GAAGL,EAAA;AAAA,MAC9B,eAAaE;AAAA,MACZ,GAAGS;AAAA,MAEH,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaa,IAAUC,EAAWlB,CAAY;AAE9CiB,EAAQ,cAAc;AAGtB,MAAME,IAAe,CACnB,EAAE,MAAAC,IAAO,WAAW,GAAG7B,EAAA,GACvBe,wBAEQW,GAAA,EAAQ,KAAAX,GAAoD,OAAO,GAAG,MAAAc,GAAa,GAAI7B,GAA8B,GAGlH8B,IAAUH,EAAWC,CAAY;AAE9CE,EAAQ,cAAc;"}
package/dist/components/typography/Text/Text.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),u=require("../../../utils/styles.cjs"),n=require("../../../design-system/tokens/typography.cjs"),a=require("../../../design-system/tokens/spacing.cjs"),c={body:{element:"p",styles:n.textStyles.bodyDefault},bodyLarge:{element:"p",styles:n.textStyles.bodyLarge},bodySmall:{element:"p",styles:n.textStyles.bodySmall},label:{element:"span",styles:n.textStyles.label},caption:{element:"span",styles:n.textStyles.caption},overline:{element:"span",styles:n.textStyles.overline},code:{element:"code",styles:n.textStyles.code}};function S(e){const i=e.variant??"body",l=c[i].styles,t={fontFamily:l.fontFamily,fontSize:e.size?n.fontSizes[e.size]:l.fontSize,fontWeight:e.weight?n.fontWeights[e.weight]:l.fontWeight,lineHeight:e.leading?n.lineHeights[e.leading]:l.lineHeight,letterSpacing:l.letterSpacing};return"textTransform"in l&&(t.textTransform=l.textTransform),e.align&&(t.textAlign=e.align),e.color&&(t.color=e.color),e.truncate&&(t.overflow="hidden",t.textOverflow="ellipsis",t.whiteSpace="nowrap"),e.lineClamp&&(t.display="-webkit-box",t.WebkitLineClamp=e.lineClamp,t.WebkitBoxOrient="vertical",t.overflow="hidden"),t}const h=({as:e,variant:i="body",className:l,style:t,children:y,testId:g,...s},x)=>{const b=e||c[i].element,f=S({variant:i,...s}),{size:k,weight:z,leading:R,align:_,color:j,truncate:q,lineClamp:O,...m}=s;return o.jsx(b,{ref:x,className:u.cx("brycks-text",`brycks-text--${i}`,l),style:{...f,...t},"data-testid":g,...m,children:y})},w=r.forwardRef(h),d=Object.assign(w,{displayName:"Text"}),C=(e,i)=>o.jsx(d,{...e,ref:i,variant:"code",style:{backgroundColor:"var(--brycks-background-muted)",padding:`${a.spacing[.5]}px ${a.spacing[1.5]}px`,borderRadius:"var(--brycks-radius-sm)",...e.style}}),v=r.forwardRef(C),T=Object.assign(v,{displayName:"Code"});exports.Code=T;exports.Text=d;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),y=require("react"),v=require("../../../utils/styles.cjs"),s=require("../../../design-system/tokens/typography.cjs"),o=require("../../../design-system/tokens/spacing.cjs"),k={body:"var(--brycks-fs-body-md)",bodyLarge:"var(--brycks-fs-body-lg)",bodySmall:"var(--brycks-fs-body-base)",label:"var(--brycks-fs-body-sm)",caption:"var(--brycks-fs-body-xs)",overline:"var(--brycks-fs-body-xs)",code:"var(--brycks-fs-body-sm)"},u={xs:"var(--brycks-fs-body-xs)",sm:"var(--brycks-fs-body-sm)",base:"var(--brycks-fs-body-base)",md:"var(--brycks-fs-body-md)",lg:"var(--brycks-fs-body-lg)",xl:"var(--brycks-fs-h6)","2xl":"var(--brycks-fs-h5)","3xl":"var(--brycks-fs-h4)","4xl":"var(--brycks-fs-h3)","5xl":"var(--brycks-fs-h2)","6xl":"var(--brycks-fs-h1)","7xl":"var(--brycks-fs-display-sm)","8xl":"var(--brycks-fs-display-md)","9xl":"var(--brycks-fs-display-lg)"},c={body:{element:"p",styles:s.textStyles.bodyDefault},bodyLarge:{element:"p",styles:s.textStyles.bodyLarge},bodySmall:{element:"p",styles:s.textStyles.bodySmall},label:{element:"span",styles:s.textStyles.label},caption:{element:"span",styles:s.textStyles.caption},overline:{element:"span",styles:s.textStyles.overline},code:{element:"code",styles:s.textStyles.code}};function S(e){const l=e.variant??"body",a=c[l].styles,r=e.size?u[e.size]:k[l],t={fontFamily:a.fontFamily,fontSize:r,fontWeight:e.weight?s.fontWeights[e.weight]:a.fontWeight,lineHeight:e.leading?s.lineHeights[e.leading]:a.lineHeight,letterSpacing:a.letterSpacing};return"textTransform"in a&&(t.textTransform=a.textTransform),e.align&&(t.textAlign=e.align),e.color&&(t.color=e.color),e.truncate&&(t.overflow="hidden",t.textOverflow="ellipsis",t.whiteSpace="nowrap"),e.lineClamp&&(t.display="-webkit-box",t.WebkitLineClamp=e.lineClamp,t.WebkitBoxOrient="vertical",t.overflow="hidden"),t}const h=({as:e,variant:l="body",className:a,style:r,children:t,testId:d,...n},f)=>{const x=e||c[l].element,g=S({variant:l,...n}),{size:R,weight:_,leading:j,align:p,color:q,truncate:F,lineClamp:O,...m}=n;return i.jsx(x,{ref:f,className:v.cx("brycks-text",`brycks-text--${l}`,a),style:{...g,...r},"data-testid":d,...m,children:t})},w=y.forwardRef(h),b=Object.assign(w,{displayName:"Text"}),C=(e,l)=>i.jsx(b,{...e,ref:l,variant:"code",style:{backgroundColor:"var(--brycks-background-muted)",padding:`${o.spacing[.5]}px ${o.spacing[1.5]}px`,borderRadius:"var(--brycks-radius-sm)",...e.style}}),T=y.forwardRef(C),z=Object.assign(T,{displayName:"Code"});exports.Code=z;exports.Text=b;
2
2
  //# sourceMappingURL=Text.cjs.map