@purpurds/container 7.14.0 → 8.1.0

package/dist/container.cjs.js

@@ -2,5 +2,5 @@
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/var c;function _(){return c||(c=1,function(n){(function(){var s={}.hasOwnProperty;function e(){for(var r="",t=0;t<arguments.length;t++){var o=arguments[t];o&&(r=i(r,u.call(this,o)))}return r}function u(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return e.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var t="";for(var o in r)s.call(r,o)&&r[o]&&(t=i(t,this&&this[o]||o));return t}function i(r,t){return t?r?r+" "+t:r+t:r}n.exports?(e.default=e,n.exports=e):window.classNames=e})()}(p)),p.exports}var m=_();const h=d(m),y={"purpur-container":"_purpur-container_1t9gx_1","purpur-container--xs":"_purpur-container--xs_1t9gx_13","purpur-container--sm":"_purpur-container--sm_1t9gx_24","purpur-container--md":"_purpur-container--md_1t9gx_39","purpur-container--lg":"_purpur-container--lg_1t9gx_42","purpur-container--xl":"_purpur-container--xl_1t9gx_45","purpur-container--xxl":"_purpur-container--xxl_1t9gx_48"},v=h.bind(y),S={XS:"xs",SM:"sm",MD:"md",LG:"lg",XL:"xl",XXL:"xxl"},b={DIV:"div",SPAN:"span"},a="purpur-container",l=x.forwardRef(({children:n,className:s,width:e="xxl",element:u="div",...i},r)=>{const t=v([s,a,`${a}--${e}`]);return f.jsx(u,{className:t,ref:r,...i,children:n})});l.displayName="Container";exports.Container=l;exports.Element=b;exports.Width=S;
+*/var a;function _(){return a||(a=1,function(n){(function(){var s={}.hasOwnProperty;function e(){for(var r="",t=0;t<arguments.length;t++){var i=arguments[t];i&&(r=o(r,u.call(this,i)))}return r}function u(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return e.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var t="";for(var i in r)s.call(r,i)&&r[i]&&(t=o(t,this&&this[i]||i));return t}function o(r,t){return t?r?r+" "+t:r+t:r}n.exports?(e.default=e,n.exports=e):window.classNames=e})()}(p)),p.exports}var m=_();const h=d(m),S={"purpur-container":"_purpur-container_1t9gx_1","purpur-container--xs":"_purpur-container--xs_1t9gx_13","purpur-container--sm":"_purpur-container--sm_1t9gx_24","purpur-container--md":"_purpur-container--md_1t9gx_39","purpur-container--lg":"_purpur-container--lg_1t9gx_42","purpur-container--xl":"_purpur-container--xl_1t9gx_45","purpur-container--xxl":"_purpur-container--xxl_1t9gx_48"},v=h.bind(S),y={XS:"xs",SM:"sm",MD:"md",LG:"lg",XL:"xl",XXL:"xxl"},E={ARTICLE:"article",ASIDE:"aside",DIV:"div",FOOTER:"footer",HEADER:"header",MAIN:"main",NAV:"nav",SECTION:"section",SPAN:"span"},c="purpur-container",l=x.forwardRef(({children:n,className:s,width:e="xxl",element:u="div",...o},r)=>{const t=v([s,c,`${c}--${e}`]);return f.jsx(u,{className:t,ref:r,...o,children:n})});l.displayName="Container";exports.Container=l;exports.Element=E;exports.Width=y;
 //# sourceMappingURL=container.cjs.js.map

package/dist/container.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/container.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./container.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport const Width = {\n  XS: \"xs\",\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n  XL: \"xl\",\n  XXL: \"xxl\",\n} as const;\n\nexport type WidthType = (typeof Width)[keyof typeof Width];\n\nexport const Element = {\n  DIV: \"div\",\n  SPAN: \"span\",\n} as const;\n\nexport type ElementType = (typeof Element)[keyof typeof Element];\n\nexport type ContainerProps = Omit<BaseProps, \"children\"> & {\n  children: ReactNode;\n  width?: WidthType;\n  element?: ElementType;\n};\n\nconst rootClassName = \"purpur-container\";\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  ({ children, className, width = \"xxl\", element: Element = \"div\", ...props }, ref) => {\n    const classes = cx([className, rootClassName, `${rootClassName}--${width}`]);\n    return (\n      <Element className={classes} ref={ref} {...props}>\n        {children}\n      </Element>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","Width","Element","rootClassName","Container","forwardRef","children","className","width","props","ref","jsx"],"mappings":";;;;iDAOC,UAAY,CAGZ,IAAIA,EAAS,CAAA,EAAG,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE7D,CAEE,OAAOF,CACT,CAEC,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,SAAU,EAGtB,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,OAAOL,CACT,CAEC,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQV,CAEsCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,UAAiBT,GAOjB,OAAO,WAAaA,CAEtB,gbCtEMU,EAAKC,EAAE,KAAKC,CAAM,EAEXC,EAAQ,CACnB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,KACP,EAIaC,EAAU,CACrB,IAAK,MACL,KAAM,MACR,EAUMC,EAAgB,mBAETC,EAAYC,EAAA,WACvB,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,MAAAC,EAAQ,MAAO,QAASN,EAAU,MAAO,GAAGO,CAAM,EAAGC,IAAQ,CAC7E,MAAArB,EAAUS,EAAG,CAACS,EAAWJ,EAAe,GAAGA,CAAa,KAAKK,CAAK,EAAE,CAAC,EAEzE,OAAAG,EAAA,IAACT,EAAA,CAAQ,UAAWb,EAAS,IAAAqB,EAAW,GAAGD,EACxC,SAAAH,EACH,CAAA,CAGN,EAEAF,EAAU,YAAc","x_google_ignoreList":[0]}
+{"version":3,"file":"container.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/container.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./container.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport const Width = {\n  XS: \"xs\",\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n  XL: \"xl\",\n  XXL: \"xxl\",\n} as const;\n\nexport type WidthType = (typeof Width)[keyof typeof Width];\n\nexport const Element = {\n  ARTICLE: \"article\",\n  ASIDE: \"aside\",\n  DIV: \"div\",\n  FOOTER: \"footer\",\n  HEADER: \"header\",\n  MAIN: \"main\",\n  NAV: \"nav\",\n  SECTION: \"section\",\n  SPAN: \"span\",\n} as const;\n\nexport type ElementType = (typeof Element)[keyof typeof Element];\n\nexport type ContainerProps = Omit<BaseProps, \"children\"> & {\n  children: ReactNode;\n  width?: WidthType;\n  element?: ElementType;\n};\n\nconst rootClassName = \"purpur-container\";\n\nexport const Container = forwardRef<HTMLElement, ContainerProps>(\n  (\n    {\n      children,\n      className,\n      width = \"xxl\",\n      element: ElementTag = \"div\" as React.ElementType,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = cx([className, rootClassName, `${rootClassName}--${width}`]);\n\n    return (\n      <ElementTag className={classes} ref={ref} {...props}>\n        {children}\n      </ElementTag>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","Width","Element","rootClassName","Container","forwardRef","children","className","width","ElementTag","props","ref"],"mappings":";;;;iDAOC,UAAY,CAGZ,IAAIA,EAAS,CAAA,EAAG,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE7D,CAEE,OAAOF,CACT,CAEC,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,SAAU,EAGtB,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,OAAOL,CACT,CAEC,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQV,CAEsCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,UAAiBT,GAOjB,OAAO,WAAaA,CAEtB,gbCtEMU,EAAKC,EAAE,KAAKC,CAAM,EAEXC,EAAQ,CACnB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,KACP,EAIaC,EAAU,CACrB,QAAS,UACT,MAAO,QACP,IAAK,MACL,OAAQ,SACR,OAAQ,SACR,KAAM,OACN,IAAK,MACL,QAAS,UACT,KAAM,MACR,EAUMC,EAAgB,mBAETC,EAAYC,EAAA,WACvB,CACE,CACE,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,MACR,QAASC,EAAa,MACtB,GAAGC,GAELC,IACG,CACG,MAAAtB,EAAUS,EAAG,CAACS,EAAWJ,EAAe,GAAGA,CAAa,KAAKK,CAAK,EAAE,CAAC,EAE3E,aACGC,EAAW,CAAA,UAAWpB,EAAS,IAAAsB,EAAW,GAAGD,EAC3C,SAAAJ,EACH,CAAA,CAGN,EAEAF,EAAU,YAAc","x_google_ignoreList":[0]}

package/dist/container.d.ts

@@ -11,7 +11,14 @@ export declare const Width: {
 };
 export type WidthType = (typeof Width)[keyof typeof Width];
 export declare const Element: {
+    readonly ARTICLE: "article";
+    readonly ASIDE: "aside";
     readonly DIV: "div";
+    readonly FOOTER: "footer";
+    readonly HEADER: "header";
+    readonly MAIN: "main";
+    readonly NAV: "nav";
+    readonly SECTION: "section";
     readonly SPAN: "span";
 };
 export type ElementType = (typeof Element)[keyof typeof Element];
@@ -20,5 +27,5 @@ export type ContainerProps = Omit<BaseProps, "children"> & {
     width?: WidthType;
     element?: ElementType;
 };
-export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=container.d.ts.map

package/dist/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../src/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOxD,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAC;AAE3D,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAEjE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACzD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAIF,eAAO,MAAM,SAAS,oGASrB,CAAC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../src/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOxD,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAC;AAE3D,eAAO,MAAM,OAAO;;;;;;;;;;CAUV,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAEjE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACzD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAIF,eAAO,MAAM,SAAS,iGAmBrB,CAAC"}

package/dist/container.es.js

@@ -9,9 +9,9 @@ var p = { exports: {} };
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var c;
-function _() {
-  return c || (c = 1, function(n) {
+var a;
+function d() {
+  return a || (a = 1, function(n) {
     (function() {
       var s = {}.hasOwnProperty;
       function e() {
@@ -42,8 +42,8 @@ function _() {
     })();
   }(p)), p.exports;
 }
-var d = _();
-const m = /* @__PURE__ */ x(d), h = {
+var _ = d();
+const m = /* @__PURE__ */ x(_), h = {
   "purpur-container": "_purpur-container_1t9gx_1",
   "purpur-container--xs": "_purpur-container--xs_1t9gx_13",
   "purpur-container--sm": "_purpur-container--sm_1t9gx_24",
@@ -51,26 +51,39 @@ const m = /* @__PURE__ */ x(d), h = {
   "purpur-container--lg": "_purpur-container--lg_1t9gx_42",
   "purpur-container--xl": "_purpur-container--xl_1t9gx_45",
   "purpur-container--xxl": "_purpur-container--xxl_1t9gx_48"
-}, v = m.bind(h), g = {
+}, v = m.bind(h), N = {
   XS: "xs",
   SM: "sm",
   MD: "md",
   LG: "lg",
   XL: "xl",
   XXL: "xxl"
-}, N = {
+}, A = {
+  ARTICLE: "article",
+  ASIDE: "aside",
   DIV: "div",
+  FOOTER: "footer",
+  HEADER: "header",
+  MAIN: "main",
+  NAV: "nav",
+  SECTION: "section",
   SPAN: "span"
-}, a = "purpur-container", y = f(
-  ({ children: n, className: s, width: e = "xxl", element: u = "div", ...i }, r) => {
-    const t = v([s, a, `${a}--${e}`]);
+}, c = "purpur-container", S = f(
+  ({
+    children: n,
+    className: s,
+    width: e = "xxl",
+    element: u = "div",
+    ...i
+  }, r) => {
+    const t = v([s, c, `${c}--${e}`]);
     return /* @__PURE__ */ l(u, { className: t, ref: r, ...i, children: n });
   }
 );
-y.displayName = "Container";
+S.displayName = "Container";
 export {
-  y as Container,
-  N as Element,
-  g as Width
+  S as Container,
+  A as Element,
+  N as Width
 };
 //# sourceMappingURL=container.es.js.map

package/dist/container.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/container.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./container.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport const Width = {\n  XS: \"xs\",\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n  XL: \"xl\",\n  XXL: \"xxl\",\n} as const;\n\nexport type WidthType = (typeof Width)[keyof typeof Width];\n\nexport const Element = {\n  DIV: \"div\",\n  SPAN: \"span\",\n} as const;\n\nexport type ElementType = (typeof Element)[keyof typeof Element];\n\nexport type ContainerProps = Omit<BaseProps, \"children\"> & {\n  children: ReactNode;\n  width?: WidthType;\n  element?: ElementType;\n};\n\nconst rootClassName = \"purpur-container\";\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  ({ children, className, width = \"xxl\", element: Element = \"div\", ...props }, ref) => {\n    const classes = cx([className, rootClassName, `${rootClassName}--${width}`]);\n    return (\n      <Element className={classes} ref={ref} {...props}>\n        {children}\n      </Element>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","Width","Element","rootClassName","Container","forwardRef","children","className","width","props","ref","jsx"],"mappings":";;;;;;;;;;;;;;AAOA,KAAC,WAAY;AAGZ,UAAIA,IAAS,CAAA,EAAG;AAEhB,eAASC,IAAc;AAGtB,iBAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,cAAIC,IAAM,UAAUD,CAAC;AACrB,UAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,QAE7D;AAEE,eAAOF;AAAA,MACT;AAEC,eAASI,EAAYF,GAAK;AACzB,YAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,iBAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,YAAI,OAAOA,KAAQ;AAClB,iBAAO;AAGR,YAAI,MAAM,QAAQA,CAAG;AACpB,iBAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,YAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,iBAAOA,EAAI,SAAU;AAGtB,YAAIF,IAAU;AAEd,iBAASK,KAAOH;AACf,UAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,eAAOL;AAAA,MACT;AAEC,eAASG,EAAaG,GAAOC,GAAU;AACtC,eAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,MAQV;AAEC,MAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,YAAiBT,KAOjB,OAAO,aAAaA;AAAA,IAEtB;;;;;;;;;;;;GCtEMU,IAAKC,EAAE,KAAKC,CAAM,GAEXC,IAAQ;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP,GAIaC,IAAU;AAAA,EACrB,KAAK;AAAA,EACL,MAAM;AACR,GAUMC,IAAgB,oBAETC,IAAYC;AAAA,EACvB,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,OAAAC,IAAQ,OAAO,SAASN,IAAU,OAAO,GAAGO,EAAM,GAAGC,MAAQ;AAC7E,UAAArB,IAAUS,EAAG,CAACS,GAAWJ,GAAe,GAAGA,CAAa,KAAKK,CAAK,EAAE,CAAC;AAEzE,WAAA,gBAAAG,EAACT,GAAA,EAAQ,WAAWb,GAAS,KAAAqB,GAAW,GAAGD,GACxC,UAAAH,GACH;AAAA,EAAA;AAGN;AAEAF,EAAU,cAAc;","x_google_ignoreList":[0]}
+{"version":3,"file":"container.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/container.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./container.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport const Width = {\n  XS: \"xs\",\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n  XL: \"xl\",\n  XXL: \"xxl\",\n} as const;\n\nexport type WidthType = (typeof Width)[keyof typeof Width];\n\nexport const Element = {\n  ARTICLE: \"article\",\n  ASIDE: \"aside\",\n  DIV: \"div\",\n  FOOTER: \"footer\",\n  HEADER: \"header\",\n  MAIN: \"main\",\n  NAV: \"nav\",\n  SECTION: \"section\",\n  SPAN: \"span\",\n} as const;\n\nexport type ElementType = (typeof Element)[keyof typeof Element];\n\nexport type ContainerProps = Omit<BaseProps, \"children\"> & {\n  children: ReactNode;\n  width?: WidthType;\n  element?: ElementType;\n};\n\nconst rootClassName = \"purpur-container\";\n\nexport const Container = forwardRef<HTMLElement, ContainerProps>(\n  (\n    {\n      children,\n      className,\n      width = \"xxl\",\n      element: ElementTag = \"div\" as React.ElementType,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = cx([className, rootClassName, `${rootClassName}--${width}`]);\n\n    return (\n      <ElementTag className={classes} ref={ref} {...props}>\n        {children}\n      </ElementTag>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","Width","Element","rootClassName","Container","forwardRef","children","className","width","ElementTag","props","ref"],"mappings":";;;;;;;;;;;;;;AAOA,KAAC,WAAY;AAGZ,UAAIA,IAAS,CAAA,EAAG;AAEhB,eAASC,IAAc;AAGtB,iBAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,cAAIC,IAAM,UAAUD,CAAC;AACrB,UAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,QAE7D;AAEE,eAAOF;AAAA,MACT;AAEC,eAASI,EAAYF,GAAK;AACzB,YAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,iBAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,YAAI,OAAOA,KAAQ;AAClB,iBAAO;AAGR,YAAI,MAAM,QAAQA,CAAG;AACpB,iBAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,YAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,iBAAOA,EAAI,SAAU;AAGtB,YAAIF,IAAU;AAEd,iBAASK,KAAOH;AACf,UAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,eAAOL;AAAA,MACT;AAEC,eAASG,EAAaG,GAAOC,GAAU;AACtC,eAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,MAQV;AAEC,MAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,YAAiBT,KAOjB,OAAO,aAAaA;AAAA,IAEtB;;;;;;;;;;;;GCtEMU,IAAKC,EAAE,KAAKC,CAAM,GAEXC,IAAQ;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP,GAIaC,IAAU;AAAA,EACrB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,SAAS;AAAA,EACT,MAAM;AACR,GAUMC,IAAgB,oBAETC,IAAYC;AAAA,EACvB,CACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,SAASC,IAAa;AAAA,IACtB,GAAGC;AAAA,KAELC,MACG;AACG,UAAAtB,IAAUS,EAAG,CAACS,GAAWJ,GAAe,GAAGA,CAAa,KAAKK,CAAK,EAAE,CAAC;AAE3E,6BACGC,GAAW,EAAA,WAAWpB,GAAS,KAAAsB,GAAW,GAAGD,GAC3C,UAAAJ,GACH;AAAA,EAAA;AAGN;AAEAF,EAAU,cAAc;","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/container",
-  "version": "7.14.0",
+  "version": "8.1.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/container.cjs.js",
   "types": "./dist/container.d.ts",
@@ -16,8 +16,8 @@
   "source": "src/container.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/common-types": "7.14.0",
-    "@purpurds/tokens": "7.14.0"
+    "@purpurds/tokens": "8.1.0",
+    "@purpurds/common-types": "8.1.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^9.0.18",

package/src/container.test.tsx

@@ -3,7 +3,7 @@ import * as matchers from "@testing-library/jest-dom/matchers";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
-import { Container } from "./container";
+import { Container, Element } from "./container";
 
 expect.extend(matchers);
 
@@ -12,4 +12,102 @@ describe("Container", () => {
     render(<Container data-testid="unique">Some text content</Container>);
     expect(screen.getByTestId("unique")).toHaveTextContent("Some text content");
   });
+
+  describe("element types", () => {
+    it("should render as div element by default", () => {
+      render(<Container data-testid="container-default">Content</Container>);
+      const container = screen.getByTestId("container-default");
+      expect(container.tagName.toLowerCase()).toBe("div");
+    });
+
+    it("should render as article element", () => {
+      render(
+        <Container element={Element.ARTICLE} data-testid="container-article">
+          Content
+        </Container>
+      );
+      const container = screen.getByTestId("container-article");
+      expect(container.tagName.toLowerCase()).toBe("article");
+    });
+
+    it("should render as aside element", () => {
+      render(
+        <Container element={Element.ASIDE} data-testid="container-aside">
+          Content
+        </Container>
+      );
+      const container = screen.getByTestId("container-aside");
+      expect(container.tagName.toLowerCase()).toBe("aside");
+    });
+
+    it("should render as div element", () => {
+      render(
+        <Container element={Element.DIV} data-testid="container-div">
+          Content
+        </Container>
+      );
+      const container = screen.getByTestId("container-div");
+      expect(container.tagName.toLowerCase()).toBe("div");
+    });
+
+    it("should render as footer element", () => {
+      render(
+        <Container element={Element.FOOTER} data-testid="container-footer">
+          Content
+        </Container>
+      );
+      const container = screen.getByTestId("container-footer");
+      expect(container.tagName.toLowerCase()).toBe("footer");
+    });
+
+    it("should render as header element", () => {
+      render(
+        <Container element={Element.HEADER} data-testid="container-header">
+          Content
+        </Container>
+      );
+      const container = screen.getByTestId("container-header");
+      expect(container.tagName.toLowerCase()).toBe("header");
+    });
+
+    it("should render as main element", () => {
+      render(
+        <Container element={Element.MAIN} data-testid="container-main">
+          Content
+        </Container>
+      );
+      const container = screen.getByTestId("container-main");
+      expect(container.tagName.toLowerCase()).toBe("main");
+    });
+
+    it("should render as nav element", () => {
+      render(
+        <Container element={Element.NAV} data-testid="container-nav">
+          Content
+        </Container>
+      );
+      const container = screen.getByTestId("container-nav");
+      expect(container.tagName.toLowerCase()).toBe("nav");
+    });
+
+    it("should render as section element", () => {
+      render(
+        <Container element={Element.SECTION} data-testid="container-section">
+          Content
+        </Container>
+      );
+      const container = screen.getByTestId("container-section");
+      expect(container.tagName.toLowerCase()).toBe("section");
+    });
+
+    it("should render as span element", () => {
+      render(
+        <Container element={Element.SPAN} data-testid="container-span">
+          Content
+        </Container>
+      );
+      const container = screen.getByTestId("container-span");
+      expect(container.tagName.toLowerCase()).toBe("span");
+    });
+  });
 });

package/src/container.tsx

@@ -18,7 +18,14 @@ export const Width = {
 export type WidthType = (typeof Width)[keyof typeof Width];
 
 export const Element = {
+  ARTICLE: "article",
+  ASIDE: "aside",
   DIV: "div",
+  FOOTER: "footer",
+  HEADER: "header",
+  MAIN: "main",
+  NAV: "nav",
+  SECTION: "section",
   SPAN: "span",
 } as const;
 
@@ -32,13 +39,23 @@ export type ContainerProps = Omit<BaseProps, "children"> & {
 
 const rootClassName = "purpur-container";
 
-export const Container = forwardRef<HTMLDivElement, ContainerProps>(
-  ({ children, className, width = "xxl", element: Element = "div", ...props }, ref) => {
+export const Container = forwardRef<HTMLElement, ContainerProps>(
+  (
+    {
+      children,
+      className,
+      width = "xxl",
+      element: ElementTag = "div" as React.ElementType,
+      ...props
+    },
+    ref
+  ) => {
     const classes = cx([className, rootClassName, `${rootClassName}--${width}`]);
+
     return (
-      <Element className={classes} ref={ref} {...props}>
+      <ElementTag className={classes} ref={ref} {...props}>
         {children}
-      </Element>
+      </ElementTag>
     );
   }
 );