@uva-glass/component-library 1.25.0 → 1.26.0

package/dist/assets/StatusPill.css

@@ -0,0 +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%}

package/dist/components/StatusPill/StatusPill.d.ts

@@ -0,0 +1,6 @@
+export interface StatusPillProps {
+    status: 'possible' | 'impossible';
+    variant?: 'default' | 'bar';
+    label: string;
+}
+export declare function StatusPill({ status, variant, label }: StatusPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/StatusPill/StatusPill.js

@@ -0,0 +1,32 @@
+import { jsxs as p, jsx as _ } from "react/jsx-runtime";
+import { c as e } from "../../clsx-DB4S2d7J.js";
+import { Icon as a } from "../Icon/Icon.js";
+import '../../assets/StatusPill.css';const l = {
+  "status-pill": "_status-pill_x7rv2_1",
+  "status-pill__possible": "_status-pill__possible_x7rv2_10",
+  "status-pill__impossible": "_status-pill__impossible_x7rv2_15",
+  "status-pill--bar": "_status-pill--bar_x7rv2_20"
+}, o = {
+  possible: "CheckCircleFillMini",
+  impossible: "CrossCircleFillMini"
+};
+function m({ status: s, variant: i = "default", label: t }) {
+  return /* @__PURE__ */ p(
+    "span",
+    {
+      className: e(
+        l["status-pill"],
+        l[`status-pill__${s}`],
+        i !== "default" && l[`status-pill--${i}`]
+      ),
+      children: [
+        /* @__PURE__ */ _(a, { name: o[s], title: s, size: 16 }),
+        t
+      ]
+    }
+  );
+}
+export {
+  m as StatusPill
+};
+//# sourceMappingURL=StatusPill.js.map

package/dist/components/StatusPill/StatusPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.js","sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n  status: 'possible' | 'impossible';\n  variant?: 'default' | 'bar';\n  label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n  possible: 'CheckCircleFillMini',\n  impossible: 'CrossCircleFillMini',\n};\n\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n  return (\n    <span\n      className={clsx(\n        styles['status-pill'],\n        styles[`status-pill__${status}`],\n        variant !== 'default' && styles[`status-pill--${variant}`]\n      )}\n    >\n      <Icon name={iconNameMap[status]!} title={status} size={16} />\n      {label}\n    </span>\n  );\n}\n"],"names":["iconNameMap","StatusPill","status","variant","label","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;GAcMA,IAA6E;AAAA,EACjF,UAAU;AAAA,EACV,YAAY;AACd;AAEO,SAASC,EAAW,EAAE,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,KAA0B;AAEhF,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,aAAa;AAAA,QACpBA,EAAO,gBAAgBL,CAAM,EAAE;AAAA,QAC/BC,MAAY,aAAaI,EAAO,gBAAgBJ,CAAO,EAAE;AAAA,MAC3D;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAK,EAAAC,GAAA,EAAK,MAAMT,EAAYE,CAAM,GAAI,OAAOA,GAAQ,MAAM,IAAI;AAAA,QAC1DE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1,5 @@
+import { StatusPillProps } from './StatusPill';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, StatusPillProps>;
+export default _default;
+export declare const StatusPillExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, StatusPillProps>;

package/dist/components/StatusPill/StatusPill.stories.js

@@ -0,0 +1,17 @@
+import { jsx as t } from "react/jsx-runtime";
+import { StatusPill as l } from "./StatusPill.js";
+import { Container as a } from "../storyComponents/Container/Container.js";
+const n = {
+  title: "Molecules/StatusPill",
+  component: l
+}, e = (s) => /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(l, { ...s }) }), o = e.bind({});
+o.args = {
+  status: "possible",
+  variant: "default",
+  label: "Example Status Pill"
+};
+export {
+  o as StatusPillExample,
+  n as default
+};
+//# sourceMappingURL=StatusPill.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.stories.js","sources":["../../../src/components/StatusPill/StatusPill.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { StatusPillProps } from './StatusPill';\n\nimport { StatusPill } from './StatusPill';\n\nimport { Container } from 'components/storyComponents/Container';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/StatusPill',\n  component: StatusPill,\n} as Meta<StatusPillProps>;\n\nconst Template: StoryFn<StatusPillProps> = (args) => (\n  <Container>\n    <StatusPill {...args} />\n  </Container>\n);\n\nexport const StatusPillExample = Template.bind({});\nStatusPillExample.args = {\n  status: 'possible',\n  variant: 'default',\n  label: 'Example Status Pill',\n};\n"],"names":["StatusPill_stories","StatusPill","Template","args","jsx","Container","StatusPillExample"],"mappings":";;;AAQA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AACb,GAEMC,IAAqC,CAACC,MAC1C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAY,GAAGE,EAAM,CAAA,EACxB,CAAA,GAGWG,IAAoBJ,EAAS,KAAK,EAAE;AACjDI,EAAkB,OAAO;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AACT;"}

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

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

package/dist/components/StatusPill/index.js

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

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

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

package/dist/components/index.d.ts

@@ -24,4 +24,5 @@ export * from './SectionNotification';
 export * from './SelectListbox';
 export * from './SelectListbox/SelectProvider';
 export * from './Spinner';
+export * from './StatusPill';
 export * from './Tooltip';

package/dist/components/index.js

@@ -2,16 +2,16 @@ import { Accordion as t } from "./Accordion/Accordion.js";
 import { AppStatusBar as p } from "./AppStatusBar/AppStatusBar.js";
 import { Backdrop as f } from "./Backdrop/Backdrop.js";
 import { Button as a } from "./Button/Button.js";
-import { ButtonGroup as i } from "./ButtonGroup/ButtonGroup.js";
-import { Card as c } from "./Card/Card.js";
+import { ButtonGroup as n } from "./ButtonGroup/ButtonGroup.js";
+import { Card as u } from "./Card/Card.js";
 import { Checkbox as d } from "./Checkbox/Checkbox.js";
 import { FieldHint as B } from "./FieldHint/FieldHint.js";
-import { FormField as S } from "./FormField/FormField.js";
+import { FormField as M } from "./FormField/FormField.js";
 import { Icon as C } from "./Icon/Icon.js";
 import { IconButton as L } from "./IconButton/IconButton.js";
 import { InfoMessage as g } from "./InfoMessage/InfoMessage.js";
-import { Input as v } from "./Input/Input.js";
-import { InputField as D } from "./InputField/InputField.js";
+import { Input as P } from "./Input/Input.js";
+import { InputField as A } from "./InputField/InputField.js";
 import { Label as R } from "./Label/Label.js";
 import { M as y } from "../MenuLink-CLEqkVVh.js";
 import { MetaDataList as H } from "./MetaDataList/MetaDataList.js";
@@ -24,22 +24,23 @@ import { SectionNotification as U } from "./SectionNotification/SectionNotificat
 import { SelectListbox as W } from "./SelectListbox/SelectListbox.js";
 import { SelectProvider as Y, useSelect as Z } from "./SelectListbox/SelectProvider.js";
 import { Spinner as $ } from "./Spinner/Spinner.js";
-import { Tooltip as ro } from "./Tooltip/Tooltip.js";
+import { StatusPill as ro } from "./StatusPill/StatusPill.js";
+import { Tooltip as eo } from "./Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AppStatusBar,
   f as Backdrop,
   a as Button,
-  i as ButtonGroup,
-  c as Card,
+  n as ButtonGroup,
+  u as Card,
   d as Checkbox,
   B as FieldHint,
-  S as FormField,
+  M as FormField,
   C as Icon,
   L as IconButton,
   g as InfoMessage,
-  v as Input,
-  D as InputField,
+  P as Input,
+  A as InputField,
   R as Label,
   y as MenuLink,
   H as MetaDataList,
@@ -52,7 +53,8 @@ export {
   W as SelectListbox,
   Y as SelectProvider,
   $ as Spinner,
-  ro as Tooltip,
+  ro as StatusPill,
+  eo as Tooltip,
   Z as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/index.js

@@ -2,16 +2,16 @@ import { Accordion as t } from "./components/Accordion/Accordion.js";
 import { AppStatusBar as p } from "./components/AppStatusBar/AppStatusBar.js";
 import { Backdrop as f } from "./components/Backdrop/Backdrop.js";
 import { Button as a } from "./components/Button/Button.js";
-import { ButtonGroup as i } from "./components/ButtonGroup/ButtonGroup.js";
-import { Card as c } from "./components/Card/Card.js";
+import { ButtonGroup as n } from "./components/ButtonGroup/ButtonGroup.js";
+import { Card as u } from "./components/Card/Card.js";
 import { Checkbox as d } from "./components/Checkbox/Checkbox.js";
 import { FieldHint as B } from "./components/FieldHint/FieldHint.js";
-import { FormField as S } from "./components/FormField/FormField.js";
+import { FormField as M } from "./components/FormField/FormField.js";
 import { Icon as C } from "./components/Icon/Icon.js";
 import { IconButton as L } from "./components/IconButton/IconButton.js";
 import { InfoMessage as g } from "./components/InfoMessage/InfoMessage.js";
-import { Input as v } from "./components/Input/Input.js";
-import { InputField as D } from "./components/InputField/InputField.js";
+import { Input as P } from "./components/Input/Input.js";
+import { InputField as A } from "./components/InputField/InputField.js";
 import { Label as R } from "./components/Label/Label.js";
 import { M as y } from "./MenuLink-CLEqkVVh.js";
 import { MetaDataList as H } from "./components/MetaDataList/MetaDataList.js";
@@ -24,22 +24,23 @@ import { SectionNotification as U } from "./components/SectionNotification/Secti
 import { SelectListbox as W } from "./components/SelectListbox/SelectListbox.js";
 import { SelectProvider as Y, useSelect as Z } from "./components/SelectListbox/SelectProvider.js";
 import { Spinner as $ } from "./components/Spinner/Spinner.js";
-import { Tooltip as ro } from "./components/Tooltip/Tooltip.js";
+import { StatusPill as ro } from "./components/StatusPill/StatusPill.js";
+import { Tooltip as eo } from "./components/Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AppStatusBar,
   f as Backdrop,
   a as Button,
-  i as ButtonGroup,
-  c as Card,
+  n as ButtonGroup,
+  u as Card,
   d as Checkbox,
   B as FieldHint,
-  S as FormField,
+  M as FormField,
   C as Icon,
   L as IconButton,
   g as InfoMessage,
-  v as Input,
-  D as InputField,
+  P as Input,
+  A as InputField,
   R as Label,
   y as MenuLink,
   H as MetaDataList,
@@ -52,7 +53,8 @@ export {
   W as SelectListbox,
   Y as SelectProvider,
   $ as Spinner,
-  ro as Tooltip,
+  ro as StatusPill,
+  eo as Tooltip,
   Z as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.25.0",
+  "version": "1.26.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",