@uva-glass/component-library 1.38.0 → 1.40.0

package/dist/assets/StatusPill.css

@@ -1 +1 @@
-._status-pill_x7rv2_1{align-items:center;border-radius:1.5rem;display:flex;gap:.25rem;padding:.25rem .5rem;width:fit-content}._status-pill__possible_x7rv2_10{background-color:var(--color-mint-cream);color:var(--color-san-felix)}._status-pill__impossible_x7rv2_15{background-color:var(--color-amour);color:var(--color-uva-red-dark)}._status-pill--bar_x7rv2_20{border-radius:0;justify-content:center;padding:.5rem;width:100%}
+._status-pill_1dh6p_1{align-items:center;border-radius:1.5rem;display:flex;gap:.25rem;padding:.25rem .5rem;width:fit-content}._status-pill__possible_1dh6p_10{background-color:var(--color-mint-cream);color:var(--color-san-felix)}._status-pill__impossible_1dh6p_15{background-color:var(--color-amour);color:var(--color-uva-red-dark)}._status-pill__new_1dh6p_20{background-color:var(--color-blue-50);color:var(--color-blue-500)}._status-pill--bar_1dh6p_25{border-radius:0;justify-content:center;padding:.5rem;width:100%}

package/dist/components/ActionList/ActionList.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { IconProps } from 'components/Icon';
+import { UIButtonVariant } from 'types/UserInterface';
+
+export interface ActionListProps {
+    label: string;
+    prefixIcon?: IconProps['name'];
+    iconName?: IconProps['name'];
+    variant?: UIButtonVariant;
+    children: ReactElement | ReactElement[];
+}
+export declare function ActionList({ label, prefixIcon, iconName, variant, children }: ActionListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionList/ActionList.js

@@ -0,0 +1,76 @@
+import { jsxs as k, jsx as c } from "react/jsx-runtime";
+import { c as T } from "../../clsx-OuTLNxxd.js";
+import { useId as U, useRef as m, Children as w, useState as b, useEffect as D } from "react";
+import { MenuButton as $ } from "../MenuButton/MenuButton.js";
+import { Icon as p } from "../Icon/Icon.js";
+import '../../assets/ActionList.css';const h = {
+  "action-list": "_action-list_1vi7f_1",
+  "action-list--open": "_action-list--open_1vi7f_13",
+  "action-list-container": "_action-list-container_1vi7f_17"
+}, O = -1, s = 1;
+function K({ label: E, prefixIcon: C, iconName: I, variant: L = "secondary", children: a }) {
+  const _ = U(), l = m(null), n = m(null), r = m(null), d = w.count(a), [f, i] = b(O), [u, g] = b(!1);
+  function R() {
+    g(!0), document.addEventListener("click", N, { once: !1, capture: !0 });
+  }
+  function o(e) {
+    var t;
+    e && r.current && !r.current.contains(e.target) || (i(O), g(!1), document.removeEventListener("click", N, { capture: !0 }), (t = l.current) == null || t.focus());
+  }
+  function x() {
+    u ? o() : R();
+  }
+  function y(e) {
+    if (!u) return;
+    if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.code)) {
+      e.preventDefault();
+      return;
+    }
+    e.code === "Tab" && o();
+  }
+  function A(e) {
+    (e.code === "Space" || e.key === "Enter") && (e.target === l.current ? x() : e.key === "Enter" && e.target !== n.current && "firstChild" in e.target && e.target.firstChild.click()), e.code === "Escape" && o(), e.code === "ArrowUp" && i((t) => t === 0 ? d - s : t - s), e.code === "ArrowDown" && i((t) => t === d - s ? 0 : t + s), e.code === "Home" && i(0), e.code === "End" && i(d - s);
+  }
+  const N = (e) => {
+    const { target: t } = e;
+    !t || !r.current || r.current.contains(t) || o();
+  };
+  return D(() => {
+    if (f < 0 || !n.current) return;
+    const e = n.current.children.item(f);
+    e && e.focus();
+  }, [f]), D(() => {
+    !n.current || !n.current.hasChildNodes() || Array.from(n.current.children).filter((e) => e.nodeType === Node.ELEMENT_NODE && e.hasChildNodes()).forEach((e) => {
+      Array.from(e.children).filter((t) => t.nodeType === Node.ELEMENT_NODE).forEach((t) => {
+        t.setAttribute("tabIndex", "-1");
+      });
+    });
+  }, [a]), /* @__PURE__ */ k("div", { className: h["action-list-container"], ref: r, children: [
+    /* @__PURE__ */ k($, { onClick: x, onKeyDown: y, onKeyUp: A, buttonRef: l, variant: L, children: [
+      C && /* @__PURE__ */ c(p, { size: 24, name: C }),
+      E,
+      I ? /* @__PURE__ */ c(p, { size: 24, name: I }) : /* @__PURE__ */ c(p, { size: 16, name: u ? "CheveronUp" : "CheveronDown" })
+    ] }),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        "aria-activedescendant": `${_}-child-${f}`,
+        "aria-label": E,
+        className: T(h["action-list"], {
+          [h["action-list--open"]]: u
+        }),
+        onClickCapture: o,
+        onKeyDown: y,
+        onKeyUp: A,
+        ref: n,
+        role: "menu",
+        tabIndex: -1,
+        children: w.map(a, (e, t) => /* @__PURE__ */ c("div", { role: "menuitem", tabIndex: -1, children: e }, `${_}-child-${t}`))
+      }
+    )
+  ] });
+}
+export {
+  K as ActionList
+};
+//# sourceMappingURL=ActionList.js.map

package/dist/components/ActionList/ActionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionList.js","sources":["../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Children, useEffect, useId, useRef, useState } from 'react';\n\nimport type { KeyboardEvent, ReactElement, MouseEvent as ReactMouseEvent } from 'react';\nimport type { IconProps } from 'components/Icon';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './ActionList.module.css';\n\nimport { MenuButton } from 'components/MenuButton';\nimport { Icon } from 'components/Icon';\n\nexport interface ActionListProps {\n  label: string;\n  prefixIcon?: IconProps['name'];\n  iconName?: IconProps['name'];\n  variant?: UIButtonVariant;\n  children: ReactElement | ReactElement[];\n}\n\nconst inactiveIndex = -1;\nconst indexIncrement = 1;\n\nexport function ActionList({ label, prefixIcon, iconName, variant = 'secondary', children }: ActionListProps) {\n  const listId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const numberOfChildren = Children.count(children);\n\n  const [activeIndex, setActiveIndex] = useState(inactiveIndex);\n  const [isOpen, setIsOpen] = useState(false);\n\n  function open() {\n    setIsOpen(true);\n\n    document.addEventListener('click', onClickOutside, { once: false, capture: true });\n  }\n\n  function close(event?: ReactMouseEvent<HTMLDivElement>) {\n    // When a click occurs on an element that is not an immediate descendant of the action list container\n    // (can happen when a modal window is triggered from a button in the action list), the setIsOpen state\n    // handler should not be called, because this causes a re-render of the entire component and can lead\n    // to undesired effects, like a select element closing immediately after it has been clicked.\n    if (event && containerRef.current && !containerRef.current.contains(event.target as Node)) {\n      return;\n    }\n\n    setActiveIndex(inactiveIndex);\n    setIsOpen(false);\n\n    document.removeEventListener('click', onClickOutside, { capture: true });\n\n    triggerRef.current?.focus();\n  }\n\n  function toggle() {\n    if (isOpen) close();\n    else open();\n  }\n\n  function onKeyDown(event: KeyboardEvent) {\n    if (!isOpen) return;\n\n    const eventPreventCodes = ['ArrowUp', 'ArrowDown', 'Home', 'End'];\n\n    if (eventPreventCodes.includes(event.code)) {\n      // prevent page from scrolling when navigating through items in list\n      event.preventDefault();\n      return;\n    }\n\n    if (event.code === 'Tab') {\n      close();\n    }\n  }\n\n  function onKeyUp(event: KeyboardEvent) {\n    if (event.code === 'Space' || event.key === 'Enter') {\n      if (event.target === triggerRef.current) {\n        toggle();\n      } else if (event.key === 'Enter' && event.target !== listRef.current) {\n        if ('firstChild' in event.target) {\n          const firstChild = event.target.firstChild as HTMLButtonElement;\n\n          firstChild.click();\n        }\n      }\n    }\n\n    if (event.code === 'Escape') close();\n\n    if (event.code === 'ArrowUp') {\n      setActiveIndex((prevState) => {\n        if (prevState === 0) return numberOfChildren - indexIncrement;\n\n        return prevState - indexIncrement;\n      });\n    }\n\n    if (event.code === 'ArrowDown') {\n      setActiveIndex((prevState) => {\n        if (prevState === numberOfChildren - indexIncrement) return 0;\n\n        return prevState + indexIncrement;\n      });\n    }\n\n    if (event.code === 'Home') {\n      setActiveIndex(0);\n    }\n\n    if (event.code === 'End') {\n      setActiveIndex(numberOfChildren - indexIncrement);\n    }\n  }\n\n  const onClickOutside = (event: MouseEvent) => {\n    const { target } = event;\n\n    if (!target || !containerRef.current) return;\n\n    if (!containerRef.current.contains(target as Node)) {\n      close();\n    }\n  };\n\n  useEffect(() => {\n    if (activeIndex < 0 || !listRef.current) return;\n\n    const listItem = listRef.current.children.item(activeIndex);\n\n    if (listItem) {\n      (listItem as HTMLDivElement).focus();\n    }\n  }, [activeIndex]);\n\n  useEffect(() => {\n    if (!listRef.current || !listRef.current.hasChildNodes()) return;\n\n    Array.from(listRef.current.children)\n      .filter((overlayChild) => overlayChild.nodeType === Node.ELEMENT_NODE && overlayChild.hasChildNodes())\n      .forEach((overlayChild) => {\n        Array.from(overlayChild.children)\n          .filter((childOfChild) => childOfChild.nodeType === Node.ELEMENT_NODE)\n          .forEach((childOfChild) => {\n            // internal children may be buttons and can get focus when tab is pressed; preventing those elements\n            // from getting focus so that list can be tabbed over and traversed with arrow keys\n            childOfChild.setAttribute('tabIndex', '-1');\n          });\n      });\n  }, [children]);\n\n  return (\n    <div className={styles['action-list-container']} ref={containerRef}>\n      <MenuButton onClick={toggle} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={triggerRef} variant={variant}>\n        {prefixIcon && <Icon size={24} name={prefixIcon} />}\n        {label}\n        {iconName ? (\n          <Icon size={24} name={iconName} />\n        ) : (\n          <Icon size={16} name={isOpen ? 'CheveronUp' : 'CheveronDown'} />\n        )}\n      </MenuButton>\n      <div\n        aria-activedescendant={`${listId}-child-${activeIndex}`}\n        aria-label={label}\n        className={clsx(styles['action-list'], {\n          [styles['action-list--open']]: isOpen,\n        })}\n        onClickCapture={close}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        ref={listRef}\n        role=\"menu\"\n        tabIndex={-1}\n      >\n        {Children.map(children, (child, index) => (\n          <div key={`${listId}-child-${index}`} role=\"menuitem\" tabIndex={-1}>\n            {child}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":["inactiveIndex","indexIncrement","ActionList","label","prefixIcon","iconName","variant","children","listId","useId","triggerRef","useRef","listRef","containerRef","numberOfChildren","Children","activeIndex","setActiveIndex","useState","isOpen","setIsOpen","open","onClickOutside","close","event","_a","toggle","onKeyDown","onKeyUp","prevState","target","useEffect","listItem","overlayChild","childOfChild","styles","jsxs","MenuButton","jsx","Icon","clsx","child","index"],"mappings":"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"}

package/dist/components/ActionList/ActionList.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+import { ActionListProps } from './ActionList';
+
+declare const _default: Meta<ActionListProps>;
+export default _default;
+export declare const ActionListExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ActionListProps>;

package/dist/components/ActionList/ActionList.stories.js

@@ -0,0 +1,29 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ActionList as i } from "./ActionList.js";
+const a = {
+  title: "Atoms/ActionList",
+  component: i,
+  argTypes: {
+    variant: {
+      options: ["primary", "secondary", "destructive-primary", "destructive-secondary", "blank", "blank-icon"],
+      control: { type: "radio" }
+    }
+  }
+}, o = (n) => /* @__PURE__ */ t("div", { style: { marginLeft: "5rem", width: "40px" }, children: /* @__PURE__ */ t(i, { ...n }) }), e = {
+  label: "",
+  variant: "blank-icon",
+  iconName: "EllipsisVertical",
+  children: [
+    /* @__PURE__ */ t("button", { type: "button", children: "Action 1" }, "1"),
+    /* @__PURE__ */ t("button", { type: "button", children: "Action 2" }, "2"),
+    /* @__PURE__ */ t("button", { type: "button", children: "Action 3" }, "3")
+  ]
+}, r = o.bind({});
+r.args = {
+  ...e
+};
+export {
+  r as ActionListExample,
+  a as default
+};
+//# sourceMappingURL=ActionList.stories.js.map

package/dist/components/ActionList/ActionList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionList.stories.js","sources":["../../../src/components/ActionList/ActionList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { ActionListProps } from './ActionList';\n\nimport { ActionList } from './ActionList';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/ActionList',\n  component: ActionList,\n  argTypes: {\n    variant: {\n      options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank', 'blank-icon'],\n      control: { type: 'radio' },\n    },\n  },\n} as Meta<ActionListProps>;\n\nconst Template: StoryFn<ActionListProps> = (args) => (\n  <div style={{ marginLeft: '5rem', width: '40px' }}>\n    <ActionList {...args} />\n  </div>\n);\n\nconst defaultArgs: Partial<ActionListProps> = {\n  label: '',\n  variant: 'blank-icon',\n  iconName: 'EllipsisVertical',\n  children: [\n    <button key=\"1\" type=\"button\">\n      Action 1\n    </button>,\n    <button key=\"2\" type=\"button\">\n      Action 2\n    </button>,\n    <button key=\"3\" type=\"button\">\n      Action 3\n    </button>,\n  ],\n};\n\nexport const ActionListExample = Template.bind({});\nActionListExample.args = {\n  ...defaultArgs,\n};\n"],"names":["ActionList_stories","ActionList","Template","args","jsx","defaultArgs","ActionListExample"],"mappings":";;AAMA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,SAAS,YAAY;AAAA,MACvG,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF;AACF,GAEMC,IAAqC,CAACC,MACzC,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,YAAY,QAAQ,OAAO,OACvC,GAAA,UAAA,gBAAAA,EAACH,GAAY,EAAA,GAAGE,GAAM,EACxB,CAAA,GAGIE,IAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,IACP,gBAAAD,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,IACC,gBAAAA,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,IACC,gBAAAA,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,EACF;AACF,GAEaE,IAAoBJ,EAAS,KAAK,EAAE;AACjDI,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;"}

package/dist/components/ActionList/index.d.ts

@@ -0,0 +1 @@
+export * from './ActionList';

package/dist/components/ActionList/index.js

@@ -0,0 +1,5 @@
+import { ActionList as i } from "./ActionList.js";
+export {
+  i as ActionList
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ActionList/index.js.map

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

package/dist/components/Button/Button.js

@@ -1,30 +1,23 @@
-import { jsx as b } from "react/jsx-runtime";
-import { c as _ } from "../../clsx-OuTLNxxd.js";
-import { forwardRef as a } from "react";
-import '../../assets/Button.css';const i = "_button_gc28t_3", t = {
-  button: i,
-  "button--blank": "_button--blank_gc28t_37",
-  "button--primary": "_button--primary_gc28t_54",
-  "button--secondary": "_button--secondary_gc28t_70",
-  "button--destructive-primary": "_button--destructive-primary_gc28t_86",
-  "button--destructive-secondary": "_button--destructive-secondary_gc28t_104",
-  "button--wide-column": "_button--wide-column_gc28t_122"
-}, p = a((o, n) => {
-  const { children: r, type: u = "button", variant: c, displayColumn: e = !1, ...s } = o;
-  return /* @__PURE__ */ b(
+import { jsx as u } from "react/jsx-runtime";
+import { c as f } from "../../clsx-OuTLNxxd.js";
+import { forwardRef as i } from "react";
+import { s as t } from "../../Button.module-DfLXeuUK.js";
+const d = i((o, r) => {
+  const { children: s, type: n = "button", variant: e, displayColumn: m = !1, ...a } = o;
+  return /* @__PURE__ */ u(
     "button",
     {
-      ...s,
-      type: u,
-      ref: n,
-      className: _(t.button, t[`button--${c}`], {
-        [t["button--wide-column"]]: e
+      ...a,
+      type: n,
+      ref: r,
+      className: f(t.button, t[`button--${e}`], {
+        [t["button--wide-column"]]: m
       }),
-      children: r
+      children: s
     }
   );
 });
 export {
-  p as Button
+  d as Button
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type UIButtonVariant = 'primary' | 'secondary' | 'destructive-primary' | 'destructive-secondary' | 'blank';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {\n  variant: UIButtonVariant;\n  children: ReactNode;\n  displayColumn?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const { children, type = 'button', variant, displayColumn = false, ...restProps } = props;\n\n  return (\n    <button\n      {...restProps}\n      type={type}\n      ref={forwardedRef}\n      className={clsx(styles['button'], styles[`button--${variant}`], {\n        [styles['button--wide-column']]: displayColumn,\n      })}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["Button","forwardRef","props","forwardedRef","children","type","variant","displayColumn","restProps","jsx","clsx","styles"],"mappings":";;;;;;;;;;;GAeaA,IAASC,EAA2C,CAACC,GAAOC,MAAiB;AAClF,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,eAAAC,IAAgB,IAAO,GAAGC,EAAc,IAAAN;AAGlF,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,MAAAH;AAAA,MACA,KAAKF;AAAA,MACL,WAAWO,EAAKC,EAAO,QAAWA,EAAO,WAAWL,CAAO,EAAE,GAAG;AAAA,QAC9D,CAACK,EAAO,qBAAqB,CAAC,GAAGJ;AAAA,MAAA,CAClC;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type UIButtonVariant = 'primary' | 'secondary' | 'destructive-primary' | 'destructive-secondary' | 'blank';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {\n  variant: UIButtonVariant;\n  children: ReactNode;\n  displayColumn?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const { children, type = 'button', variant, displayColumn = false, ...restProps } = props;\n\n  return (\n    <button\n      {...restProps}\n      type={type}\n      ref={forwardedRef}\n      className={clsx(styles['button'], styles[`button--${variant}`], {\n        [styles['button--wide-column']]: displayColumn,\n      })}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["Button","forwardRef","props","forwardedRef","children","type","variant","displayColumn","restProps","jsx","clsx","styles"],"mappings":";;;;AAeO,MAAMA,IAASC,EAA2C,CAACC,GAAOC,MAAiB;AAClF,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,eAAAC,IAAgB,IAAO,GAAGC,EAAc,IAAAN;AAGlF,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,MAAAH;AAAA,MACA,KAAKF;AAAA,MACL,WAAWO,EAAKC,EAAO,QAAWA,EAAO,WAAWL,CAAO,EAAE,GAAG;AAAA,QAC9D,CAACK,EAAO,qBAAqB,CAAC,GAAGJ;AAAA,MAAA,CAClC;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/Button/Button.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as o, Fragment as s, jsx as t } from "react/jsx-runtime";
-import { f as l } from "../../index-CPfft0rG.js";
+import { f as l } from "../../index-0Faxlks_.js";
 import { Button as e } from "./Button.js";
 const u = {
   title: "Atoms/Button",

package/dist/components/Checkbox/Checkbox.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { f as m } from "../../index-CPfft0rG.js";
+import { f as m } from "../../index-0Faxlks_.js";
 import { Checkbox as e } from "./Checkbox.js";
 import { FormField as i } from "../FormField/FormField.js";
 import { Label as n } from "../Label/Label.js";

package/dist/components/CourseCard/CourseCard.d.ts

@@ -0,0 +1,33 @@
+interface Offering {
+    academicYear: number;
+    courseId: string;
+    id: string;
+    offeringNumber: number;
+    periods: number[];
+    maxPeriods: number;
+}
+interface Name {
+    EN: string;
+    NL: string;
+}
+interface Courses {
+    code: string;
+    credits: number;
+    departmentId: string;
+    id: string;
+    level: string;
+    name: Name;
+    offerings: Offering[];
+    programmeId: string;
+    isNew: boolean;
+}
+export interface CourseCardProps {
+    course: Courses;
+    localeTags: Record<string, Record<'NL' | 'EN', string>>;
+    currentLanguage: 'NL' | 'EN';
+    actions?: Record<string, string>[];
+    onActionClick: ({ action, id }: Record<string, string>) => void;
+    onClick?: (id: string) => void;
+}
+export declare const CourseCard: ({ course, localeTags, currentLanguage, actions, onClick }: CourseCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CourseCard/CourseCard.js

@@ -0,0 +1,50 @@
+import { jsxs as f, jsx as c } from "react/jsx-runtime";
+import { c as C } from "../../clsx-OuTLNxxd.js";
+import { CourseCardHeader as p } from "./CourseCardHeader/CourseCardHeader.js";
+import { CourseCardOffering as v } from "./CourseCardOffering/CourseCardOffering.js";
+import '../../assets/CourseCard.css';const s = {
+  "course-container": "_course-container_j1mva_3",
+  "course-container--clickable": "_course-container--clickable_j1mva_12",
+  "course__instance-container": "_course__instance-container_j1mva_18"
+}, N = ({ course: i, localeTags: n, currentLanguage: e, actions: t, onClick: o }) => {
+  const a = i.offerings, r = typeof o == "function", d = () => {
+    r && o(i.id);
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: C(s["course-container"], r && s["course-container--clickable"]),
+      ...o && { onClick: d },
+      children: [
+        /* @__PURE__ */ c(
+          p,
+          {
+            id: i.id,
+            code: i.code,
+            name: i.name[e],
+            credits: i.credits,
+            actions: t,
+            localeTags: n,
+            currentLanguage: e,
+            isNew: i.isNew ? n["is-new"][e] : void 0,
+            onActionClick: console.log
+          }
+        ),
+        /* @__PURE__ */ c("div", { className: s["course__instance-container"], children: a.map(({ id: m, periods: _, maxPeriods: l }) => /* @__PURE__ */ c(
+          v,
+          {
+            periods: _,
+            currentLanguage: e,
+            localeTags: n,
+            maxPeriods: l
+          },
+          m
+        )) })
+      ]
+    }
+  );
+};
+export {
+  N as CourseCard
+};
+//# sourceMappingURL=CourseCard.js.map

package/dist/components/CourseCard/CourseCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseCard.js","sources":["../../../src/components/CourseCard/CourseCard.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './CourseCard.module.css';\nimport { CourseCardHeader } from './CourseCardHeader';\nimport { CourseCardOffering } from './CourseCardOffering';\n\ninterface Offering {\n  academicYear: number;\n  courseId: string;\n  id: string;\n  offeringNumber: number;\n  periods: number[];\n  maxPeriods: number;\n}\n\ninterface Name {\n  EN: string;\n  NL: string;\n}\n\ninterface Courses {\n  code: string;\n  credits: number;\n  departmentId: string;\n  id: string;\n  level: string;\n  name: Name;\n  offerings: Offering[];\n  programmeId: string;\n  isNew: boolean;\n}\n\nexport interface CourseCardProps {\n  course: Courses;\n  localeTags: Record<string, Record<'NL' | 'EN', string>>;\n  currentLanguage: 'NL' | 'EN';\n  actions?: Record<string, string>[];\n  onActionClick: ({ action, id }: Record<string, string>) => void;\n  onClick?: (id: string) => void;\n}\n\nexport const CourseCard = ({ course, localeTags, currentLanguage, actions, onClick }: CourseCardProps) => {\n  const offerings = course.offerings;\n  const isClickable = typeof onClick === 'function';\n\n  const handleOnClick = () => {\n    if (isClickable) onClick(course.id);\n  };\n\n  return (\n    <div\n      className={clsx(styles['course-container'], isClickable && styles['course-container--clickable'])}\n      {...(onClick && { onClick: handleOnClick })}\n    >\n      <CourseCardHeader\n        id={course.id}\n        code={course.code}\n        name={course.name[currentLanguage]}\n        credits={course.credits}\n        actions={actions}\n        localeTags={localeTags}\n        currentLanguage={currentLanguage}\n        isNew={course.isNew ? localeTags['is-new'][currentLanguage] : undefined}\n        onActionClick={console.log}\n      />\n      <div className={styles['course__instance-container']}>\n        {offerings.map(({ id, periods, maxPeriods }) => (\n          <CourseCardOffering\n            periods={periods}\n            key={id}\n            currentLanguage={currentLanguage}\n            localeTags={localeTags}\n            maxPeriods={maxPeriods}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["CourseCard","course","localeTags","currentLanguage","actions","onClick","offerings","isClickable","handleOnClick","jsxs","clsx","styles","jsx","CourseCardHeader","id","periods","maxPeriods","CourseCardOffering"],"mappings":";;;;;;;;GAyCaA,IAAa,CAAC,EAAE,QAAAC,GAAQ,YAAAC,GAAY,iBAAAC,GAAiB,SAAAC,GAAS,SAAAC,QAA+B;AACxG,QAAMC,IAAYL,EAAO,WACnBM,IAAc,OAAOF,KAAY,YAEjCG,IAAgB,MAAM;AACtB,IAAAD,KAAqBF,EAAAJ,EAAO,EAAE;AAAA,EAAA;AAIlC,SAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,kBAAkB,GAAGJ,KAAeI,EAAO,6BAA6B,CAAC;AAAA,MAC/F,GAAIN,KAAW,EAAE,SAASG,EAAc;AAAA,MAEzC,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAIZ,EAAO;AAAA,YACX,MAAMA,EAAO;AAAA,YACb,MAAMA,EAAO,KAAKE,CAAe;AAAA,YACjC,SAASF,EAAO;AAAA,YAChB,SAAAG;AAAA,YACA,YAAAF;AAAA,YACA,iBAAAC;AAAA,YACA,OAAOF,EAAO,QAAQC,EAAW,QAAQ,EAAEC,CAAe,IAAI;AAAA,YAC9D,eAAe,QAAQ;AAAA,UAAA;AAAA,QACzB;AAAA,QACC,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GAChD,UAAUL,EAAA,IAAI,CAAC,EAAE,IAAAQ,GAAI,SAAAC,GAAS,YAAAC,EAC7B,MAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAAF;AAAA,YAEA,iBAAAZ;AAAA,YACA,YAAAD;AAAA,YACA,YAAAc;AAAA,UAAA;AAAA,UAHKF;AAAA,QAKR,CAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/CourseCard/CourseCard.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { CourseCardProps } from './CourseCard';
+
+declare const _default: Meta<CourseCardProps>;
+export default _default;
+export declare const CourseCardExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CourseCardProps>;
+export declare const WithMultipleCourseCards: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CourseCardProps>;