diff --git a/src/sizing/h.ts b/src/sizing/h.ts index 988ba8a..9e41cd4 100644 --- a/src/sizing/h.ts +++ b/src/sizing/h.ts @@ -31,6 +31,9 @@ const h = { h_72: { height: 288 }, h_80: { height: 320 }, h_96: { height: 384 }, + h_full: { height: '100%' }, + h_half: { height: '50%' }, + h_auto: { height: 'auto' }, // Max-height properties max_0: { maxHeight: 0 }, @@ -98,20 +101,10 @@ const h = { min_80: { minHeight: 320 }, min_96: { minHeight: 384 }, - // Dynamic height function - h_: (value: number | string) => ({ - height: typeof value === 'string' ? value : value, - }), - - // Dynamic max-height function - max_: (value: number | string) => ({ - maxHeight: typeof value === 'string' ? value : value, - }), - - // Dynamic min-height function - min_: (value: number | string) => ({ - minHeight: typeof value === 'string' ? value : value, - }), + // Dynamic height functions + w_: (value: number | string) => ({ height: value }), + max_: (value: number | string) => ({ maxHeight: value }), + min_: (value: number | string) => ({ minHeight: value }), }; export default h; diff --git a/src/sizing/size.ts b/src/sizing/size.ts index d5ce8db..a0aa3d7 100644 --- a/src/sizing/size.ts +++ b/src/sizing/size.ts @@ -31,10 +31,10 @@ const size = { s_80: { width: 320, height: 320 }, s_96: { width: 384, height: 384 }, - // Dynamic size function + // Dynamic size functions s_: (value: number | string) => ({ - width: Number(value), - height: Number(value), + width: value, + height: value, }), }; diff --git a/src/sizing/w.ts b/src/sizing/w.ts index 1cce8c6..e9601ca 100644 --- a/src/sizing/w.ts +++ b/src/sizing/w.ts @@ -31,6 +31,9 @@ const w = { w_72: { width: 288 }, w_80: { width: 320 }, w_96: { width: 384 }, + w_full: { width: '100%' }, + w_half: { width: '50%' }, + w_auto: { width: 'auto' }, // Max-width properties max_0: { maxWidth: 0 }, @@ -98,20 +101,10 @@ const w = { min_80: { minWidth: 320 }, min_96: { minWidth: 384 }, - // Dynamic width function - w_: (value: number | string) => ({ - width: typeof value === 'string' ? value : value, - }), - - // Dynamic max-width function - max_: (value: number | string) => ({ - maxWidth: typeof value === 'string' ? value : value, - }), - - // Dynamic min-width function - min_: (value: number | string) => ({ - minWidth: typeof value === 'string' ? value : value, - }), + // Dynamic width functions + w_: (value: number | string) => ({ width: value }), + max_: (value: number | string) => ({ maxWidth: value }), + min_: (value: number | string) => ({ minWidth: value }), }; export default w;