jvetrau-ds 0.1.24 → 0.1.25

package/components/card-group/card-group.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./card-group.css');
+var classnames = require('../helpers/classnames');
+
+const CardGroup = ({
+  columns,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames.classnames("card-group", className, {
+    "card-group--auto": columns === void 0,
+    "card-group--columns-1": columns === 1,
+    "card-group--columns-2": columns === 2,
+    "card-group--columns-3": columns === 3,
+    "card-group--columns-4": columns === 4
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var card_group_default = CardGroup;
+
+module.exports = card_group_default;
+//# sourceMappingURL=card-group.cjs.map
+//# sourceMappingURL=card-group.cjs.map

package/components/card-group/card-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/card-group/card-group.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AASA,MAAM,YAAsC,CAAC;AAAA,EAC3C,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,YAAA,EAAc,SAAA,EAAW;AAAA,IAClD,oBAAoB,OAAA,KAAY,MAAA;AAAA,IAChC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY;AAAA,GACtC,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"card-group.cjs","sourcesContent":["import React from 'react';\nimport './card-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface CardGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  columns?: 1 | 2 | 3 | 4;\n}\n\nconst CardGroup: React.FC<CardGroupProps> = ({\n  columns,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('card-group', className, {\n    'card-group--auto': columns === undefined,\n    'card-group--columns-1': columns === 1,\n    'card-group--columns-2': columns === 2,\n    'card-group--columns-3': columns === 3,\n    'card-group--columns-4': columns === 4,\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default CardGroup;"]}

package/components/card-group/card-group.css

@@ -0,0 +1,60 @@
+.card-group {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --card-group-gap: var(--margin-container);
+  --card-group-min-column-width: var(--size-container-width-min);
+
+  display: grid;
+  gap: var(--card-group-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card-group--auto {
+  /* size */
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        min(var(--card-group-min-column-width), 100%),
+        1fr
+      )
+    );
+}
+
+.card-group--columns-1 {
+  /* size */
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.card-group--columns-2 {
+  /* size */
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.card-group--columns-3 {
+  /* size */
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.card-group--columns-4 {
+  /* size */
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+@media (max-width: 720px) {
+  .card-group--columns-2,
+  .card-group--columns-3,
+  .card-group--columns-4 {
+    /* size */
+    grid-template-columns: 1fr;
+  }
+}

package/components/card-group/card-group.d.cts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+interface CardGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: 1 | 2 | 3 | 4;
+}
+declare const CardGroup: React.FC<CardGroupProps>;
+
+export { type CardGroupProps, CardGroup as default };

package/components/card-group/card-group.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+interface CardGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: 1 | 2 | 3 | 4;
+}
+declare const CardGroup: React.FC<CardGroupProps>;
+
+export { type CardGroupProps, CardGroup as default };

package/components/card-group/card-group.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import './card-group.css';
+import { classnames } from '../helpers/classnames';
+
+const CardGroup = ({
+  columns,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("card-group", className, {
+    "card-group--auto": columns === void 0,
+    "card-group--columns-1": columns === 1,
+    "card-group--columns-2": columns === 2,
+    "card-group--columns-3": columns === 3,
+    "card-group--columns-4": columns === 4
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var card_group_default = CardGroup;
+
+export { card_group_default as default };
+//# sourceMappingURL=card-group.js.map
+//# sourceMappingURL=card-group.js.map

package/components/card-group/card-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/card-group/card-group.tsx"],"names":[],"mappings":";;;;AASA,MAAM,YAAsC,CAAC;AAAA,EAC3C,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,YAAA,EAAc,SAAA,EAAW;AAAA,IAClD,oBAAoB,OAAA,KAAY,MAAA;AAAA,IAChC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY;AAAA,GACtC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"card-group.js","sourcesContent":["import React from 'react';\nimport './card-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface CardGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  columns?: 1 | 2 | 3 | 4;\n}\n\nconst CardGroup: React.FC<CardGroupProps> = ({\n  columns,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('card-group', className, {\n    'card-group--auto': columns === undefined,\n    'card-group--columns-1': columns === 1,\n    'card-group--columns-2': columns === 2,\n    'card-group--columns-3': columns === 3,\n    'card-group--columns-4': columns === 4,\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default CardGroup;"]}

package/components/card-group/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var cardGroup = require('./card-group');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var cardGroup__default = /*#__PURE__*/_interopDefault(cardGroup);
+
+
+
+module.exports = cardGroup__default.default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/card-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/card-group/index.d.cts

@@ -0,0 +1,2 @@
+export { CardGroupProps, default } from './card-group.cjs';
+import 'react';

package/components/card-group/index.d.ts

@@ -0,0 +1,2 @@
+export { CardGroupProps, default } from './card-group.js';
+import 'react';

package/components/card-group/index.js

@@ -0,0 +1,3 @@
+export { default } from './card-group';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/card-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/components/index.cjs

@@ -21,6 +21,7 @@ var avatar = require('./avatar/avatar');
 var attach = require('./attach/attach');
 var actionGroup = require('./action-group/action-group');
 var fieldGroup = require('./field-group/field-group');
+var cardGroup = require('./card-group/card-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -45,6 +46,7 @@ var avatar__default = /*#__PURE__*/_interopDefault(avatar);
 var attach__default = /*#__PURE__*/_interopDefault(attach);
 var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
 var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
+var cardGroup__default = /*#__PURE__*/_interopDefault(cardGroup);
 
 
 
@@ -132,5 +134,9 @@ Object.defineProperty(exports, "FieldGroup", {
   enumerable: true,
   get: function () { return fieldGroup__default.default; }
 });
+Object.defineProperty(exports, "CardGroup", {
+  enumerable: true,
+  get: function () { return cardGroup__default.default; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/components/index.d.cts

@@ -19,5 +19,6 @@ export { default as Avatar, AvatarProps } from './avatar/avatar.cjs';
 export { default as Attach, AttachItem, AttachProps } from './attach/attach.cjs';
 export { default as ActionGroup, ActionGroupProps } from './action-group/action-group.cjs';
 export { default as FieldGroup, FieldGroupProps } from './field-group/field-group.cjs';
+export { default as CardGroup, CardGroupProps } from './card-group/card-group.cjs';
 import 'react';
 import '../types-DboVOY__.cjs';

package/components/index.d.ts

@@ -19,5 +19,6 @@ export { default as Avatar, AvatarProps } from './avatar/avatar.js';
 export { default as Attach, AttachItem, AttachProps } from './attach/attach.js';
 export { default as ActionGroup, ActionGroupProps } from './action-group/action-group.js';
 export { default as FieldGroup, FieldGroupProps } from './field-group/field-group.js';
+export { default as CardGroup, CardGroupProps } from './card-group/card-group.js';
 import 'react';
 import '../types-DboVOY__.js';

package/components/index.js

@@ -19,5 +19,6 @@ export { default as Avatar } from './avatar/avatar';
 export { default as Attach } from './attach/attach';
 export { default as ActionGroup } from './action-group/action-group';
 export { default as FieldGroup } from './field-group/field-group';
+export { default as CardGroup } from './card-group/card-group';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/components/panel/panel.css

@@ -38,6 +38,9 @@
   --panel-bg: transparent;
   --panel-color: var(--color-text);
 
+  /* size */
+  justify-content: flex-start;
+
   /* border */
   border-radius: 0;
 }

package/index.cjs

@@ -20,17 +20,19 @@ var card = require('./components/card');
 var panel = require('./components/panel');
 var logo = require('./components/logo');
 var avatar = require('./components/avatar');
+var attach = require('./components/attach');
+var actionGroup = require('./components/action-group');
+var fieldGroup = require('./components/field-group');
+var cardGroup = require('./components/card-group');
 var header = require('./patterns/header');
 var footer = require('./patterns/footer');
 var screenHeader = require('./patterns/screen-header');
 var form = require('./patterns/form');
 var masthead = require('./patterns/masthead');
+var modal = require('./patterns/modal');
 var foundation = require('./layouts/foundation');
 var base = require('./layouts/base');
 var sidebar = require('./layouts/sidebar');
-var attach = require('./components/attach');
-var actionGroup = require('./components/action-group');
-var fieldGroup = require('./components/field-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -54,17 +56,19 @@ var card__default = /*#__PURE__*/_interopDefault(card);
 var panel__default = /*#__PURE__*/_interopDefault(panel);
 var logo__default = /*#__PURE__*/_interopDefault(logo);
 var avatar__default = /*#__PURE__*/_interopDefault(avatar);
+var attach__default = /*#__PURE__*/_interopDefault(attach);
+var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
+var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
+var cardGroup__default = /*#__PURE__*/_interopDefault(cardGroup);
 var header__default = /*#__PURE__*/_interopDefault(header);
 var footer__default = /*#__PURE__*/_interopDefault(footer);
 var screenHeader__default = /*#__PURE__*/_interopDefault(screenHeader);
 var form__default = /*#__PURE__*/_interopDefault(form);
 var masthead__default = /*#__PURE__*/_interopDefault(masthead);
+var modal__default = /*#__PURE__*/_interopDefault(modal);
 var foundation__default = /*#__PURE__*/_interopDefault(foundation);
 var base__default = /*#__PURE__*/_interopDefault(base);
 var sidebar__default = /*#__PURE__*/_interopDefault(sidebar);
-var attach__default = /*#__PURE__*/_interopDefault(attach);
-var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
-var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
 
 
 
@@ -148,6 +152,22 @@ Object.defineProperty(exports, "Avatar", {
   enumerable: true,
   get: function () { return avatar__default.default; }
 });
+Object.defineProperty(exports, "Attach", {
+  enumerable: true,
+  get: function () { return attach__default.default; }
+});
+Object.defineProperty(exports, "ActionGroup", {
+  enumerable: true,
+  get: function () { return actionGroup__default.default; }
+});
+Object.defineProperty(exports, "FieldGroup", {
+  enumerable: true,
+  get: function () { return fieldGroup__default.default; }
+});
+Object.defineProperty(exports, "CardGroup", {
+  enumerable: true,
+  get: function () { return cardGroup__default.default; }
+});
 Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function () { return header__default.default; }
@@ -168,6 +188,10 @@ Object.defineProperty(exports, "Masthead", {
   enumerable: true,
   get: function () { return masthead__default.default; }
 });
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () { return modal__default.default; }
+});
 Object.defineProperty(exports, "LayoutFoundation", {
   enumerable: true,
   get: function () { return foundation__default.default; }
@@ -180,17 +204,5 @@ Object.defineProperty(exports, "LayoutSidebar", {
   enumerable: true,
   get: function () { return sidebar__default.default; }
 });
-Object.defineProperty(exports, "Attach", {
-  enumerable: true,
-  get: function () { return attach__default.default; }
-});
-Object.defineProperty(exports, "ActionGroup", {
-  enumerable: true,
-  get: function () { return actionGroup__default.default; }
-});
-Object.defineProperty(exports, "FieldGroup", {
-  enumerable: true,
-  get: function () { return fieldGroup__default.default; }
-});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/index.d.cts

@@ -18,16 +18,18 @@ export { default as Card, CardProps } from './components/card/card.cjs';
 export { default as Panel, PanelProps } from './components/panel/panel.cjs';
 export { default as Logo, LogoProps } from './components/logo/logo.cjs';
 export { default as Avatar, AvatarProps } from './components/avatar/avatar.cjs';
+export { default as Attach, AttachItem, AttachProps } from './components/attach/attach.cjs';
+export { default as ActionGroup, ActionGroupProps } from './components/action-group/action-group.cjs';
+export { default as FieldGroup, FieldGroupProps } from './components/field-group/field-group.cjs';
+export { default as CardGroup, CardGroupProps } from './components/card-group/card-group.cjs';
 export { default as Header, HeaderProps } from './patterns/header/header.cjs';
 export { default as Footer, FooterProps } from './patterns/footer/footer.cjs';
 export { default as ScreenHeader, ScreenHeaderProps } from './patterns/screen-header/screen-header.cjs';
 export { default as Form, FormProps } from './patterns/form/form.cjs';
 export { default as Masthead, MastheadProps } from './patterns/masthead/masthead.cjs';
+export { default as Modal, ModalProps } from './patterns/modal/modal.cjs';
 export { default as LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth } from './layouts/foundation/foundation.cjs';
 export { default as LayoutBase, LayoutBaseProps } from './layouts/base/base.cjs';
 export { default as LayoutSidebar, LayoutSidebarProps } from './layouts/sidebar/sidebar.cjs';
-export { default as Attach, AttachItem, AttachProps } from './components/attach/attach.cjs';
-export { default as ActionGroup, ActionGroupProps } from './components/action-group/action-group.cjs';
-export { default as FieldGroup, FieldGroupProps } from './components/field-group/field-group.cjs';
 import 'react';
 import './types-DboVOY__.cjs';

package/index.d.ts

@@ -18,16 +18,18 @@ export { default as Card, CardProps } from './components/card/card.js';
 export { default as Panel, PanelProps } from './components/panel/panel.js';
 export { default as Logo, LogoProps } from './components/logo/logo.js';
 export { default as Avatar, AvatarProps } from './components/avatar/avatar.js';
+export { default as Attach, AttachItem, AttachProps } from './components/attach/attach.js';
+export { default as ActionGroup, ActionGroupProps } from './components/action-group/action-group.js';
+export { default as FieldGroup, FieldGroupProps } from './components/field-group/field-group.js';
+export { default as CardGroup, CardGroupProps } from './components/card-group/card-group.js';
 export { default as Header, HeaderProps } from './patterns/header/header.js';
 export { default as Footer, FooterProps } from './patterns/footer/footer.js';
 export { default as ScreenHeader, ScreenHeaderProps } from './patterns/screen-header/screen-header.js';
 export { default as Form, FormProps } from './patterns/form/form.js';
 export { default as Masthead, MastheadProps } from './patterns/masthead/masthead.js';
+export { default as Modal, ModalProps } from './patterns/modal/modal.js';
 export { default as LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth } from './layouts/foundation/foundation.js';
 export { default as LayoutBase, LayoutBaseProps } from './layouts/base/base.js';
 export { default as LayoutSidebar, LayoutSidebarProps } from './layouts/sidebar/sidebar.js';
-export { default as Attach, AttachItem, AttachProps } from './components/attach/attach.js';
-export { default as ActionGroup, ActionGroupProps } from './components/action-group/action-group.js';
-export { default as FieldGroup, FieldGroupProps } from './components/field-group/field-group.js';
 import 'react';
 import './types-DboVOY__.js';

package/index.js

@@ -18,16 +18,18 @@ export { default as Card } from './components/card';
 export { default as Panel } from './components/panel';
 export { default as Logo } from './components/logo';
 export { default as Avatar } from './components/avatar';
+export { default as Attach } from './components/attach';
+export { default as ActionGroup } from './components/action-group';
+export { default as FieldGroup } from './components/field-group';
+export { default as CardGroup } from './components/card-group';
 export { default as Header } from './patterns/header';
 export { default as Footer } from './patterns/footer';
 export { default as ScreenHeader } from './patterns/screen-header';
 export { default as Form } from './patterns/form';
 export { default as Masthead } from './patterns/masthead';
+export { default as Modal } from './patterns/modal';
 export { default as LayoutFoundation } from './layouts/foundation';
 export { default as LayoutBase } from './layouts/base';
 export { default as LayoutSidebar } from './layouts/sidebar';
-export { default as Attach } from './components/attach';
-export { default as ActionGroup } from './components/action-group';
-export { default as FieldGroup } from './components/field-group';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/patterns/index.cjs

@@ -5,6 +5,7 @@ var footer = require('./footer');
 var screenHeader = require('./screen-header');
 var form = require('./form');
 var masthead = require('./masthead');
+var modal = require('./modal');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -13,6 +14,7 @@ var footer__default = /*#__PURE__*/_interopDefault(footer);
 var screenHeader__default = /*#__PURE__*/_interopDefault(screenHeader);
 var form__default = /*#__PURE__*/_interopDefault(form);
 var masthead__default = /*#__PURE__*/_interopDefault(masthead);
+var modal__default = /*#__PURE__*/_interopDefault(modal);
 
 
 
@@ -36,5 +38,9 @@ Object.defineProperty(exports, "Masthead", {
   enumerable: true,
   get: function () { return masthead__default.default; }
 });
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () { return modal__default.default; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/patterns/index.d.cts

@@ -3,4 +3,5 @@ export { default as Footer, FooterProps } from './footer/footer.cjs';
 export { default as ScreenHeader, ScreenHeaderProps } from './screen-header/screen-header.cjs';
 export { default as Form, FormProps } from './form/form.cjs';
 export { default as Masthead, MastheadProps } from './masthead/masthead.cjs';
+export { default as Modal, ModalProps } from './modal/modal.cjs';
 import 'react';

package/patterns/index.d.ts

@@ -3,4 +3,5 @@ export { default as Footer, FooterProps } from './footer/footer.js';
 export { default as ScreenHeader, ScreenHeaderProps } from './screen-header/screen-header.js';
 export { default as Form, FormProps } from './form/form.js';
 export { default as Masthead, MastheadProps } from './masthead/masthead.js';
+export { default as Modal, ModalProps } from './modal/modal.js';
 import 'react';

package/patterns/index.js

@@ -3,5 +3,6 @@ export { default as Footer } from './footer';
 export { default as ScreenHeader } from './screen-header';
 export { default as Form } from './form';
 export { default as Masthead } from './masthead';
+export { default as Modal } from './modal';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/patterns/modal/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var modal = require('./modal');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var modal__default = /*#__PURE__*/_interopDefault(modal);
+
+
+
+module.exports = modal__default.default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/patterns/modal/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/patterns/modal/index.d.cts

@@ -0,0 +1,2 @@
+export { ModalProps, default } from './modal.cjs';
+import 'react';

package/patterns/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalProps, default } from './modal.js';
+import 'react';

package/patterns/modal/index.js

@@ -0,0 +1,3 @@
+export { default } from './modal';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/patterns/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/patterns/modal/modal.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('./modal.css');
+var classnames = require('../../components/helpers/classnames');
+
+const Modal = ({
+  open,
+  onClose,
+  ariaLabel,
+  presentation = "dialog",
+  size = "default",
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  className = "",
+  children,
+  ...props
+}) => {
+  react.useEffect(() => {
+    if (!open || !closeOnEscape) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, closeOnEscape, onClose]);
+  if (!open) {
+    return null;
+  }
+  const classes = classnames.classnames("modal", className, {
+    "modal--wide": size === "wide",
+    "modal--fullscreen": presentation === "fullscreen"
+  });
+  const handleBackdropClick = () => {
+    if (!closeOnBackdrop) {
+      return;
+    }
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      onClick: handleBackdropClick,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "modal__content",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": ariaLabel,
+          onClick: (event) => {
+            event.stopPropagation();
+          },
+          ...props,
+          children
+        }
+      )
+    }
+  );
+};
+var modal_default = Modal;
+
+module.exports = modal_default;
+//# sourceMappingURL=modal.cjs.map
+//# sourceMappingURL=modal.cjs.map

package/patterns/modal/modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":["useEffect","classnames","jsx"],"mappings":";;;;;;;AAeA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,aAAA,EAAe;AAC3B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAyB;AAC9C,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA,OAAA,EAAQ;AAAA,MACV;AAAA,IACF,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAElD,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,aAAa,CAAA;AAAA,IACvD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,aAAA,EAAe,OAAO,CAAC,CAAA;AAEjC,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,OAAA,GAAUC,qBAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,eAAe,IAAA,KAAS,MAAA;AAAA,IACxB,qBAAqB,YAAA,KAAiB;AAAA,GACvC,CAAA;AAED,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,IAAI,CAAC,eAAA,EAAiB;AACpB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,OAAA,EAAS,mBAAA;AAAA,MAET,QAAA,kBAAAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,gBAAA;AAAA,UACV,IAAA,EAAK,QAAA;AAAA,UACL,YAAA,EAAW,MAAA;AAAA,UACX,YAAA,EAAY,SAAA;AAAA,UACZ,OAAA,EAAS,CAAC,KAAA,KAAU;AAClB,YAAA,KAAA,CAAM,eAAA,EAAgB;AAAA,UACxB,CAAA;AAAA,UACC,GAAG,KAAA;AAAA,UAEH;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.cjs","sourcesContent":["import React, { useEffect } from 'react';\nimport './modal.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface ModalProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  open: boolean;\n  onClose: () => void;\n  ariaLabel: string;\n  presentation?: 'dialog' | 'fullscreen';\n  size?: 'default' | 'wide';\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  ariaLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  ...props\n}) => {\n  useEffect(() => {\n    if (!open || !closeOnEscape) {\n      return;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [open, closeOnEscape, onClose]);\n\n  if (!open) {\n    return null;\n  }\n\n  const classes = classnames('modal', className, {\n    'modal--wide': size === 'wide',\n    'modal--fullscreen': presentation === 'fullscreen',\n  });\n\n  const handleBackdropClick = () => {\n    if (!closeOnBackdrop) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <div\n      className={classes}\n      onClick={handleBackdropClick}\n    >\n      <div\n        className=\"modal__content\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        onClick={(event) => {\n          event.stopPropagation();\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Modal;"]}