@fountain-ui/core 3.0.0-alpha.7 → 3.0.0-alpha.8
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.
- package/build/commonjs/hooks/useContentContainerStyle.js +2 -1
- package/build/commonjs/hooks/useContentContainerStyle.js.map +1 -1
- package/build/module/hooks/useContentContainerStyle.js +2 -1
- package/build/module/hooks/useContentContainerStyle.js.map +1 -1
- package/build/typescript/hooks/useContentContainerStyle.d.ts +1 -1
- package/package.json +2 -2
- package/src/hooks/useContentContainerStyle.ts +1 -1
|
@@ -30,7 +30,8 @@ function getPaddingHorizontal(theme, breakpoint) {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
function useContentContainerStyle(
|
|
33
|
+
function useContentContainerStyle() {
|
|
34
|
+
let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
34
35
|
const {
|
|
35
36
|
maxWidth: customMaxWidth,
|
|
36
37
|
styleProvider
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","getPaddingHorizontal","spacing","useContentContainerStyle","config","maxWidth","styleProvider","useTheme","currentBreakpoint","useBreakpointByWidth","additionalStyle","paddingHorizontal","resolvedMaxWidth","css","alignSelf","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointByWidth } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n maxWidth?: number;\n styleProvider?: (theme: Theme) => FountainUiStyle;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {\n switch (breakpoint) {\n case 'lg':\n case 'md':\n return customMaxWidth ?? theme.breakpoints.values[breakpoint];\n default:\n return undefined;\n }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {\n switch (breakpoint) {\n case 'sm':\n return theme.spacing(6);\n default:\n return theme.spacing(4);\n }\n}\n\nexport default function useContentContainerStyle(config: Config): FountainUiStyle {\n const {\n maxWidth: customMaxWidth,\n styleProvider,\n } = config;\n\n const theme = useTheme();\n\n const currentBreakpoint = useBreakpointByWidth();\n\n const additionalStyle = styleProvider?.(theme);\n\n const maxWidth = getMaxWidth(theme, currentBreakpoint, customMaxWidth);\n const paddingHorizontal = getPaddingHorizontal(theme, currentBreakpoint);\n\n const resolvedMaxWidth = typeof maxWidth === 'number' ? maxWidth + paddingHorizontal * 2 : undefined;\n\n return css([\n {\n alignSelf: 'center',\n maxWidth: resolvedMaxWidth,\n paddingHorizontal,\n width: '100%',\n },\n additionalStyle,\n ]);\n};\n"],"mappings":";;;;;;;AACA;;AACA;;AAUA,SAASA,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAA2DC,cAA3D,EAAwG;EACpG,QAAQD,UAAR;IACI,KAAK,IAAL;IACA,KAAK,IAAL;MACI,OAAOC,cAAc,IAAIF,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBH,UAAzB,CAAzB;;IACJ;MACI,OAAOI,SAAP;EALR;AAOH;;AAED,SAASC,oBAAT,CAA8BN,KAA9B,EAA4CC,UAA5C,EAA4E;EACxE,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAEc,SAASC,wBAAT,
|
|
1
|
+
{"version":3,"names":["getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","getPaddingHorizontal","spacing","useContentContainerStyle","config","maxWidth","styleProvider","useTheme","currentBreakpoint","useBreakpointByWidth","additionalStyle","paddingHorizontal","resolvedMaxWidth","css","alignSelf","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointByWidth } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n maxWidth?: number;\n styleProvider?: (theme: Theme) => FountainUiStyle;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {\n switch (breakpoint) {\n case 'lg':\n case 'md':\n return customMaxWidth ?? theme.breakpoints.values[breakpoint];\n default:\n return undefined;\n }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {\n switch (breakpoint) {\n case 'sm':\n return theme.spacing(6);\n default:\n return theme.spacing(4);\n }\n}\n\nexport default function useContentContainerStyle(config: Config = {}): FountainUiStyle {\n const {\n maxWidth: customMaxWidth,\n styleProvider,\n } = config;\n\n const theme = useTheme();\n\n const currentBreakpoint = useBreakpointByWidth();\n\n const additionalStyle = styleProvider?.(theme);\n\n const maxWidth = getMaxWidth(theme, currentBreakpoint, customMaxWidth);\n const paddingHorizontal = getPaddingHorizontal(theme, currentBreakpoint);\n\n const resolvedMaxWidth = typeof maxWidth === 'number' ? maxWidth + paddingHorizontal * 2 : undefined;\n\n return css([\n {\n alignSelf: 'center',\n maxWidth: resolvedMaxWidth,\n paddingHorizontal,\n width: '100%',\n },\n additionalStyle,\n ]);\n};\n"],"mappings":";;;;;;;AACA;;AACA;;AAUA,SAASA,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAA2DC,cAA3D,EAAwG;EACpG,QAAQD,UAAR;IACI,KAAK,IAAL;IACA,KAAK,IAAL;MACI,OAAOC,cAAc,IAAIF,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBH,UAAzB,CAAzB;;IACJ;MACI,OAAOI,SAAP;EALR;AAOH;;AAED,SAASC,oBAAT,CAA8BN,KAA9B,EAA4CC,UAA5C,EAA4E;EACxE,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAEc,SAASC,wBAAT,GAAwE;EAAA,IAAtCC,MAAsC,uEAArB,EAAqB;EACnF,MAAM;IACFC,QAAQ,EAAER,cADR;IAEFS;EAFE,IAGFF,MAHJ;EAKA,MAAMT,KAAK,GAAG,IAAAY,iBAAA,GAAd;EAEA,MAAMC,iBAAiB,GAAG,IAAAC,4BAAA,GAA1B;EAEA,MAAMC,eAAe,GAAGJ,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGX,KAAH,CAArC;EAEA,MAAMU,QAAQ,GAAGX,WAAW,CAACC,KAAD,EAAQa,iBAAR,EAA2BX,cAA3B,CAA5B;EACA,MAAMc,iBAAiB,GAAGV,oBAAoB,CAACN,KAAD,EAAQa,iBAAR,CAA9C;EAEA,MAAMI,gBAAgB,GAAG,OAAOP,QAAP,KAAoB,QAApB,GAA+BA,QAAQ,GAAGM,iBAAiB,GAAG,CAA9D,GAAkEX,SAA3F;EAEA,OAAO,IAAAa,YAAA,EAAI,CACP;IACIC,SAAS,EAAE,QADf;IAEIT,QAAQ,EAAEO,gBAFd;IAGID,iBAHJ;IAIII,KAAK,EAAE;EAJX,CADO,EAOPL,eAPO,CAAJ,CAAP;AASH;;AAAA"}
|
|
@@ -22,7 +22,8 @@ function getPaddingHorizontal(theme, breakpoint) {
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
export default function useContentContainerStyle(
|
|
25
|
+
export default function useContentContainerStyle() {
|
|
26
|
+
let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
26
27
|
const {
|
|
27
28
|
maxWidth: customMaxWidth,
|
|
28
29
|
styleProvider
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useBreakpointByWidth","css","useTheme","getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","getPaddingHorizontal","spacing","useContentContainerStyle","config","maxWidth","styleProvider","currentBreakpoint","additionalStyle","paddingHorizontal","resolvedMaxWidth","alignSelf","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointByWidth } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n maxWidth?: number;\n styleProvider?: (theme: Theme) => FountainUiStyle;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {\n switch (breakpoint) {\n case 'lg':\n case 'md':\n return customMaxWidth ?? theme.breakpoints.values[breakpoint];\n default:\n return undefined;\n }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {\n switch (breakpoint) {\n case 'sm':\n return theme.spacing(6);\n default:\n return theme.spacing(4);\n }\n}\n\nexport default function useContentContainerStyle(config: Config): FountainUiStyle {\n const {\n maxWidth: customMaxWidth,\n styleProvider,\n } = config;\n\n const theme = useTheme();\n\n const currentBreakpoint = useBreakpointByWidth();\n\n const additionalStyle = styleProvider?.(theme);\n\n const maxWidth = getMaxWidth(theme, currentBreakpoint, customMaxWidth);\n const paddingHorizontal = getPaddingHorizontal(theme, currentBreakpoint);\n\n const resolvedMaxWidth = typeof maxWidth === 'number' ? maxWidth + paddingHorizontal * 2 : undefined;\n\n return css([\n {\n alignSelf: 'center',\n maxWidth: resolvedMaxWidth,\n paddingHorizontal,\n width: '100%',\n },\n additionalStyle,\n ]);\n};\n"],"mappings":"AACA,SAASA,oBAAT,QAAqC,qBAArC;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAUA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAA2DC,cAA3D,EAAwG;EACpG,QAAQD,UAAR;IACI,KAAK,IAAL;IACA,KAAK,IAAL;MACI,OAAOC,cAAc,IAAIF,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBH,UAAzB,CAAzB;;IACJ;MACI,OAAOI,SAAP;EALR;AAOH;;AAED,SAASC,oBAAT,CAA8BN,KAA9B,EAA4CC,UAA5C,EAA4E;EACxE,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAED,eAAe,SAASC,wBAAT,
|
|
1
|
+
{"version":3,"names":["useBreakpointByWidth","css","useTheme","getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","getPaddingHorizontal","spacing","useContentContainerStyle","config","maxWidth","styleProvider","currentBreakpoint","additionalStyle","paddingHorizontal","resolvedMaxWidth","alignSelf","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointByWidth } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n maxWidth?: number;\n styleProvider?: (theme: Theme) => FountainUiStyle;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {\n switch (breakpoint) {\n case 'lg':\n case 'md':\n return customMaxWidth ?? theme.breakpoints.values[breakpoint];\n default:\n return undefined;\n }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {\n switch (breakpoint) {\n case 'sm':\n return theme.spacing(6);\n default:\n return theme.spacing(4);\n }\n}\n\nexport default function useContentContainerStyle(config: Config = {}): FountainUiStyle {\n const {\n maxWidth: customMaxWidth,\n styleProvider,\n } = config;\n\n const theme = useTheme();\n\n const currentBreakpoint = useBreakpointByWidth();\n\n const additionalStyle = styleProvider?.(theme);\n\n const maxWidth = getMaxWidth(theme, currentBreakpoint, customMaxWidth);\n const paddingHorizontal = getPaddingHorizontal(theme, currentBreakpoint);\n\n const resolvedMaxWidth = typeof maxWidth === 'number' ? maxWidth + paddingHorizontal * 2 : undefined;\n\n return css([\n {\n alignSelf: 'center',\n maxWidth: resolvedMaxWidth,\n paddingHorizontal,\n width: '100%',\n },\n additionalStyle,\n ]);\n};\n"],"mappings":"AACA,SAASA,oBAAT,QAAqC,qBAArC;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAUA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAA2DC,cAA3D,EAAwG;EACpG,QAAQD,UAAR;IACI,KAAK,IAAL;IACA,KAAK,IAAL;MACI,OAAOC,cAAc,IAAIF,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBH,UAAzB,CAAzB;;IACJ;MACI,OAAOI,SAAP;EALR;AAOH;;AAED,SAASC,oBAAT,CAA8BN,KAA9B,EAA4CC,UAA5C,EAA4E;EACxE,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAED,eAAe,SAASC,wBAAT,GAAwE;EAAA,IAAtCC,MAAsC,uEAArB,EAAqB;EACnF,MAAM;IACFC,QAAQ,EAAER,cADR;IAEFS;EAFE,IAGFF,MAHJ;EAKA,MAAMT,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMc,iBAAiB,GAAGhB,oBAAoB,EAA9C;EAEA,MAAMiB,eAAe,GAAGF,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGX,KAAH,CAArC;EAEA,MAAMU,QAAQ,GAAGX,WAAW,CAACC,KAAD,EAAQY,iBAAR,EAA2BV,cAA3B,CAA5B;EACA,MAAMY,iBAAiB,GAAGR,oBAAoB,CAACN,KAAD,EAAQY,iBAAR,CAA9C;EAEA,MAAMG,gBAAgB,GAAG,OAAOL,QAAP,KAAoB,QAApB,GAA+BA,QAAQ,GAAGI,iBAAiB,GAAG,CAA9D,GAAkET,SAA3F;EAEA,OAAOR,GAAG,CAAC,CACP;IACImB,SAAS,EAAE,QADf;IAEIN,QAAQ,EAAEK,gBAFd;IAGID,iBAHJ;IAIIG,KAAK,EAAE;EAJX,CADO,EAOPJ,eAPO,CAAD,CAAV;AASH;AAAA"}
|
|
@@ -4,4 +4,4 @@ export interface Config {
|
|
|
4
4
|
maxWidth?: number;
|
|
5
5
|
styleProvider?: (theme: Theme) => FountainUiStyle;
|
|
6
6
|
}
|
|
7
|
-
export default function useContentContainerStyle(config
|
|
7
|
+
export default function useContentContainerStyle(config?: Config): FountainUiStyle;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.8",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "f6fe4622d416a43686b16ed2f883c166bb91c9f9"
|
|
71
71
|
}
|
|
@@ -29,7 +29,7 @@ function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
export default function useContentContainerStyle(config: Config): FountainUiStyle {
|
|
32
|
+
export default function useContentContainerStyle(config: Config = {}): FountainUiStyle {
|
|
33
33
|
const {
|
|
34
34
|
maxWidth: customMaxWidth,
|
|
35
35
|
styleProvider,
|