@bikdotai/bik-component-library 0.0.868-beta.1 → 0.0.868-beta.10

package/dist/esm/components/channel-playground/shell/TestingPlayground.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Shell layout for the channel playground.
  *
@@ -13,25 +12,13 @@
  * step: the modal reads this rather than repeating the number.
  */
 export declare const MODAL_BODY_PADDING = 16;
-export declare const PlaygroundRoot: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const Body: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
+export declare const PlaygroundRoot: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Body: import('styled-components').StyledComponent<"div", any, {}, never>;
 /** The thread and everything directly above it. */
-export declare const MainColumn: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const TopBar: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const TestingOn: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const TopBarActions: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
+export declare const MainColumn: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const TopBar: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const TestingOn: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const TopBarActions: import('styled-components').StyledComponent<"div", any, {}, never>;
 /**
  * The settings — or the traces — column, to the right of the thread.
  *
@@ -39,71 +26,28 @@ export declare const TopBarActions: import('styled-components/dist/types').IStyl
  * cancels the modal's vertical inset and puts it back as padding. Without that the line
  * stops short of the header and the bottom edge.
  */
-export declare const Rail: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
+export declare const Rail: import('styled-components').StyledComponent<"aside", any, {}, never>;
 /** Centred message for a rail with nothing in it yet. */
-export declare const RailPlaceholder: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const Panel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+export declare const RailPlaceholder: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Panel: import('styled-components').StyledComponent<"div", any, {
     $flex: string;
     $plain?: boolean | undefined;
-}>> & string;
-export declare const Scroll: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
+}, never>;
+export declare const Scroll: import('styled-components').StyledComponent<"div", any, {}, never>;
 /**
  * Every label in the rail — the dropdown's included — goes through this, so it matches
  * what `Input`'s own `labelText` renders and the column reads as one set of fields.
  */
-export declare const FieldLabel: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<Omit<import('styled-components').FastOmit<import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+export declare const FieldLabel: import('styled-components').StyledComponent<"div", any, {
     numberOfLines?: number | undefined;
     color?: string | undefined;
-}>, "as" | "forwardedAs"> & {
-    as?: import('styled-components').WebTarget | undefined;
-    forwardedAs?: import('styled-components').WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | (import('react').CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const SectionHeading: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<Omit<import('styled-components').FastOmit<import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const SectionHeading: import('styled-components').StyledComponent<"div", any, {
     numberOfLines?: number | undefined;
     color?: string | undefined;
-}>, "as" | "forwardedAs"> & {
-    as?: import('styled-components').WebTarget | undefined;
-    forwardedAs?: import('styled-components').WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | (import('react').CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const Hint: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<Omit<import('styled-components').FastOmit<import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const Hint: import('styled-components').StyledComponent<"div", any, {
     numberOfLines?: number | undefined;
     color?: string | undefined;
-}>, "as" | "forwardedAs"> & {
-    as?: import('styled-components').WebTarget | undefined;
-    forwardedAs?: import('styled-components').WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | (import('react').CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const FieldWrap: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
+}, never>;
+export declare const FieldWrap: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/esm/components/checkBox/CheckBox.styled.d.ts

@@ -1,13 +1,8 @@
-/// <reference types="react" />
-export declare const CheckboxContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+export declare const CheckboxContainer: import('styled-components').StyledComponent<"div", any, {
     isDisabled?: boolean | undefined;
     enableHover?: boolean | undefined;
-}>> & string;
-export declare const CheckboxIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const CheckboxIcon: import('styled-components').StyledComponent<"div", any, {
     checked: boolean;
     hovered: boolean;
     clicked: boolean;
@@ -15,4 +10,4 @@ export declare const CheckboxIcon: import('styled-components/dist/types').IStyle
     size?: "SMALL" | "DEFAULT" | "XS" | undefined;
     borderColor?: string | undefined;
     activeColor?: string | undefined;
-}>> & string;
+}, never>;

package/dist/esm/components/checkList/CheckList.styled.d.ts

@@ -1,4 +1 @@
-/// <reference types="react" />
-export declare const CheckListStyled: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
+export declare const CheckListStyled: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/esm/components/chip-selector/ChipSelector.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ChipSelectorProps } from './model';
+/**
+ * A single compact, selectable chip.
+ *
+ * Most callers want ChipSelectorGroup, which manages the selection for them.
+ * Use this directly only when the surrounding layout is bespoke.
+ */
+export declare const ChipSelector: React.FC<ChipSelectorProps>;

package/dist/esm/components/chip-selector/ChipSelector.js

@@ -0,0 +1,27 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Chip as l } from "./ChipSelector.styled.js";
+const s = (e) => {
+  const a = e.size ?? "medium", t = e.disabled ?? !1;
+  return /* @__PURE__ */ i(
+    l,
+    {
+      type: "button",
+      selected: e.selected,
+      size: a,
+      width: e.width,
+      disabled: t,
+      "aria-pressed": e.selected,
+      "aria-label": e.ariaLabel ?? e.label,
+      "data-test": e.dataTestId,
+      "data-testid": "chip-selector",
+      onClick: () => {
+        t || e.onSelect(e.value);
+      },
+      children: e.label
+    }
+  );
+};
+export {
+  s as ChipSelector
+};
+//# sourceMappingURL=ChipSelector.js.map

package/dist/esm/components/chip-selector/ChipSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipSelector.js","sources":["../../../../src/components/chip-selector/ChipSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { Chip } from './ChipSelector.styled';\nimport { ChipSelectorProps } from './model';\n\n/**\n * A single compact, selectable chip.\n *\n * Most callers want ChipSelectorGroup, which manages the selection for them.\n * Use this directly only when the surrounding layout is bespoke.\n */\nexport const ChipSelector: React.FC<ChipSelectorProps> = (props) => {\n\tconst size = props.size ?? 'medium';\n\tconst isDisabled = props.disabled ?? false;\n\n\treturn (\n\t\t<Chip\n\t\t\ttype=\"button\"\n\t\t\tselected={props.selected}\n\t\t\tsize={size}\n\t\t\twidth={props.width}\n\t\t\tdisabled={isDisabled}\n\t\t\taria-pressed={props.selected}\n\t\t\taria-label={props.ariaLabel ?? props.label}\n\t\t\tdata-test={props.dataTestId}\n\t\t\tdata-testid=\"chip-selector\"\n\t\t\tonClick={() => {\n\t\t\t\tif (!isDisabled) {\n\t\t\t\t\tprops.onSelect(props.value);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{props.label}\n\t\t</Chip>\n\t);\n};\n"],"names":["ChipSelector","props","size","isDisabled","jsx","Chip"],"mappings":";;AAUO,MAAMA,IAA4C,CAACC,MAAU;AACnE,QAAMC,IAAOD,EAAM,QAAQ,UACrBE,IAAaF,EAAM,YAAY;AAErC,SACC,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,UAAUJ,EAAM;AAAA,MAChB,MAAAC;AAAA,MACA,OAAOD,EAAM;AAAA,MACb,UAAUE;AAAA,MACV,gBAAcF,EAAM;AAAA,MACpB,cAAYA,EAAM,aAAaA,EAAM;AAAA,MACrC,aAAWA,EAAM;AAAA,MACjB,eAAY;AAAA,MACZ,SAAS,MAAM;AACd,QAAKE,KACJF,EAAM,SAASA,EAAM,KAAK;AAAA,MAE5B;AAAA,MAEC,UAAAA,EAAM;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/components/chip-selector/ChipSelector.styled.d.ts

@@ -0,0 +1,10 @@
+import { ChipSize } from './model';
+export declare const Chip: import('styled-components').StyledComponent<"button", any, {
+    selected: boolean;
+    size: ChipSize;
+    width?: number | undefined;
+}, never>;
+export declare const ChipGroup: import('styled-components').StyledComponent<"div", any, {
+    gap: number;
+    wrap: boolean;
+}, never>;

package/dist/esm/components/chip-selector/ChipSelector.styled.js

@@ -0,0 +1,48 @@
+import i from "styled-components";
+import { COLORS as r } from "../../constants/Theme.js";
+const o = {
+  small: "32px",
+  medium: "48px"
+}, t = {
+  small: "0px 8px",
+  medium: "0px 12px"
+}, a = i.button`
+	box-sizing: border-box;
+	height: ${(e) => o[e.size]};
+	${(e) => e.width ? `width: ${e.width}px;` : ""}
+	padding: ${(e) => t[e.size]};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 4px;
+	border: 1px solid
+		${(e) => e.selected ? r.background.inverseLight : r.stroke.primary};
+	background: ${(e) => e.selected ? r.background.brandLight : r.surface.standard};
+	color: ${(e) => e.selected ? r.content.primary : r.content.secondary};
+	font-family: inherit;
+	font-weight: ${(e) => e.selected ? 600 : 400};
+	font-size: 14px;
+	line-height: 20px;
+	cursor: pointer;
+
+	:disabled {
+		cursor: not-allowed;
+		color: ${r.content.inactive};
+		border-color: ${r.stroke.primary};
+		background: ${r.surface.subdued};
+	}
+
+	:hover:not(:disabled) {
+		background: ${(e) => e.selected ? r.background.brandLight : r.surface.hovered};
+	}
+`, p = i.div`
+	display: flex;
+	flex-direction: row;
+	gap: ${(e) => e.gap}px;
+	flex-wrap: ${(e) => e.wrap ? "wrap" : "nowrap"};
+`;
+export {
+  a as Chip,
+  p as ChipGroup
+};
+//# sourceMappingURL=ChipSelector.styled.js.map

package/dist/esm/components/chip-selector/ChipSelector.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipSelector.styled.js","sources":["../../../../src/components/chip-selector/ChipSelector.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ChipSize } from './model';\n\n/** Medium matches the 48px input height so chips align with inputs beside them. */\nconst ChipHeightMapping: Record<ChipSize, string> = {\n\tsmall: '32px',\n\tmedium: '48px',\n};\n\nconst ChipPaddingMapping: Record<ChipSize, string> = {\n\tsmall: '0px 8px',\n\tmedium: '0px 12px',\n};\n\nexport const Chip = styled.button<{\n\tselected: boolean;\n\tsize: ChipSize;\n\twidth?: number;\n}>`\n\tbox-sizing: border-box;\n\theight: ${(props) => ChipHeightMapping[props.size]};\n\t${(props) => (props.width ? `width: ${props.width}px;` : '')}\n\tpadding: ${(props) => ChipPaddingMapping[props.size]};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 4px;\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.selected ? COLORS.background.inverseLight : COLORS.stroke.primary};\n\tbackground: ${(props) =>\n\t\tprops.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tcolor: ${(props) =>\n\t\tprops.selected ? COLORS.content.primary : COLORS.content.secondary};\n\tfont-family: inherit;\n\tfont-weight: ${(props) => (props.selected ? 600 : 400)};\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcursor: pointer;\n\n\t:disabled {\n\t\tcursor: not-allowed;\n\t\tcolor: ${COLORS.content.inactive};\n\t\tborder-color: ${COLORS.stroke.primary};\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\n\t:hover:not(:disabled) {\n\t\tbackground: ${(props) =>\n\t\t\tprops.selected ? COLORS.background.brandLight : COLORS.surface.hovered};\n\t}\n`;\n\nexport const ChipGroup = styled.div<{ gap: number; wrap: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: ${(props) => props.gap}px;\n\tflex-wrap: ${(props) => (props.wrap ? 'wrap' : 'nowrap')};\n`;\n"],"names":["ChipHeightMapping","ChipPaddingMapping","Chip","styled","props","COLORS","ChipGroup"],"mappings":";;AAKA,MAAMA,IAA8C;AAAA,EACnD,OAAO;AAAA,EACP,QAAQ;AACT,GAEMC,IAA+C;AAAA,EACpD,OAAO;AAAA,EACP,QAAQ;AACT,GAEaC,IAAOC,EAAO;AAAA;AAAA,WAMhB,CAACC,MAAUJ,EAAkBI,EAAM,IAAI,CAAC;AAAA,GAChD,CAACA,MAAWA,EAAM,QAAQ,UAAUA,EAAM,KAAK,QAAQ,EAAG;AAAA,YACjD,CAACA,MAAUH,EAAmBG,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMjD,CAACA,MACFA,EAAM,WAAWC,EAAO,WAAW,eAAeA,EAAO,OAAO,OAAO;AAAA,eAC3D,CAACD,MACdA,EAAM,WAAWC,EAAO,WAAW,aAAaA,EAAO,QAAQ,QAAQ;AAAA,UAC/D,CAACD,MACTA,EAAM,WAAWC,EAAO,QAAQ,UAAUA,EAAO,QAAQ,SAAS;AAAA;AAAA,gBAEpD,CAACD,MAAWA,EAAM,WAAW,MAAM,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAO5CC,EAAO,QAAQ,QAAQ;AAAA,kBAChBA,EAAO,OAAO,OAAO;AAAA,gBACvBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,gBAItB,CAACD,MACdA,EAAM,WAAWC,EAAO,WAAW,aAAaA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAI5DC,IAAYH,EAAO;AAAA;AAAA;AAAA,QAGxB,CAACC,MAAUA,EAAM,GAAG;AAAA,cACd,CAACA,MAAWA,EAAM,OAAO,SAAS,QAAS;AAAA;"}

package/dist/esm/components/chip-selector/ChipSelectorGroup.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { ChipSelectorGroupProps } from './model';
+/**
+ * A row or grid of compact selectable chips — weekday pickers, month-date
+ * pickers, and similar cases where options are short and shown all at once.
+ *
+ * The group owns the add/remove logic and reports the whole next selection, so
+ * callers store what they are given instead of repeating toggle code.
+ */
+export declare const ChipSelectorGroup: React.FC<ChipSelectorGroupProps>;

package/dist/esm/components/chip-selector/ChipSelectorGroup.js

@@ -0,0 +1,48 @@
+import { jsx as u } from "react/jsx-runtime";
+import { ChipSelector as m } from "./ChipSelector.js";
+import { ChipGroup as v } from "./ChipSelector.styled.js";
+const s = (e) => {
+  const n = e.multiSelect ?? !0, i = e.allowEmpty ?? !0, d = (t) => {
+    const l = e.value.includes(t);
+    if (!n)
+      return l ? i ? [] : e.value : [t];
+    if (l) {
+      const a = e.value.filter((c) => c !== t);
+      return !a.length && !i ? e.value : a;
+    }
+    return e.options.map((a) => a.value).filter((a) => a === t || e.value.includes(a));
+  }, r = (t) => {
+    const l = d(t);
+    l !== e.value && e.onChange(l);
+  };
+  return /* @__PURE__ */ u(
+    v,
+    {
+      role: "group",
+      "aria-label": e.ariaLabel,
+      gap: e.gap ?? 8,
+      wrap: e.wrap ?? !1,
+      "data-test": e["data-test"],
+      "data-testid": "chip-selector-group",
+      children: e.options.map((t) => /* @__PURE__ */ u(
+        m,
+        {
+          value: t.value,
+          label: t.label,
+          ariaLabel: t.ariaLabel,
+          disabled: t.disabled,
+          selected: e.value.includes(t.value),
+          size: e.size,
+          width: t.fitContent ? void 0 : e.chipWidth,
+          dataTestId: `${e["data-test"] ?? "chip"}-${t.value}`,
+          onSelect: r
+        },
+        t.value
+      ))
+    }
+  );
+};
+export {
+  s as ChipSelectorGroup
+};
+//# sourceMappingURL=ChipSelectorGroup.js.map

package/dist/esm/components/chip-selector/ChipSelectorGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipSelectorGroup.js","sources":["../../../../src/components/chip-selector/ChipSelectorGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { ChipSelector } from './ChipSelector';\nimport { ChipGroup } from './ChipSelector.styled';\nimport { ChipSelectorGroupProps, ChipValue } from './model';\n\n/**\n * A row or grid of compact selectable chips — weekday pickers, month-date\n * pickers, and similar cases where options are short and shown all at once.\n *\n * The group owns the add/remove logic and reports the whole next selection, so\n * callers store what they are given instead of repeating toggle code.\n */\nexport const ChipSelectorGroup: React.FC<ChipSelectorGroupProps> = (props) => {\n\tconst multiSelect = props.multiSelect ?? true;\n\tconst allowEmpty = props.allowEmpty ?? true;\n\n\tconst buildNextValue = (clicked: ChipValue): ChipValue[] => {\n\t\tconst isSelected = props.value.includes(clicked);\n\n\t\tif (!multiSelect) {\n\t\t\t// Re-picking the only selection clears it, unless a value is required.\n\t\t\tif (isSelected) {\n\t\t\t\treturn allowEmpty ? [] : props.value;\n\t\t\t}\n\t\t\treturn [clicked];\n\t\t}\n\n\t\tif (isSelected) {\n\t\t\tconst remaining = props.value.filter((value) => value !== clicked);\n\t\t\treturn !remaining.length && !allowEmpty ? props.value : remaining;\n\t\t}\n\n\t\t// Order by the options given, so the selection reads the way it is shown\n\t\t// rather than in the order the user happened to click.\n\t\treturn props.options\n\t\t\t.map((option) => option.value)\n\t\t\t.filter((value) => value === clicked || props.value.includes(value));\n\t};\n\n\tconst onChipSelected = (clicked: ChipValue) => {\n\t\tconst next = buildNextValue(clicked);\n\t\tif (next !== props.value) {\n\t\t\tprops.onChange(next);\n\t\t}\n\t};\n\n\treturn (\n\t\t<ChipGroup\n\t\t\trole=\"group\"\n\t\t\taria-label={props.ariaLabel}\n\t\t\tgap={props.gap ?? 8}\n\t\t\twrap={props.wrap ?? false}\n\t\t\tdata-test={props['data-test']}\n\t\t\tdata-testid=\"chip-selector-group\"\n\t\t>\n\t\t\t{props.options.map((option) => (\n\t\t\t\t<ChipSelector\n\t\t\t\t\tkey={option.value}\n\t\t\t\t\tvalue={option.value}\n\t\t\t\t\tlabel={option.label}\n\t\t\t\t\tariaLabel={option.ariaLabel}\n\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\tselected={props.value.includes(option.value)}\n\t\t\t\t\tsize={props.size}\n\t\t\t\t\twidth={option.fitContent ? undefined : props.chipWidth}\n\t\t\t\t\tdataTestId={`${props['data-test'] ?? 'chip'}-${option.value}`}\n\t\t\t\t\tonSelect={onChipSelected}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</ChipGroup>\n\t);\n};\n"],"names":["ChipSelectorGroup","props","multiSelect","allowEmpty","buildNextValue","clicked","isSelected","remaining","value","option","onChipSelected","next","jsx","ChipGroup","ChipSelector"],"mappings":";;;AAYO,MAAMA,IAAsD,CAACC,MAAU;AAC7E,QAAMC,IAAcD,EAAM,eAAe,IACnCE,IAAaF,EAAM,cAAc,IAEjCG,IAAiB,CAACC,MAAoC;AAC3D,UAAMC,IAAaL,EAAM,MAAM,SAASI,CAAO;AAE/C,QAAI,CAACH;AAEJ,aAAII,IACIH,IAAa,KAAKF,EAAM,QAEzB,CAACI,CAAO;AAGhB,QAAIC,GAAY;AACf,YAAMC,IAAYN,EAAM,MAAM,OAAO,CAACO,MAAUA,MAAUH,CAAO;AACjE,aAAO,CAACE,EAAU,UAAU,CAACJ,IAAaF,EAAM,QAAQM;AAAA,IACzD;AAIA,WAAON,EAAM,QACX,IAAI,CAACQ,MAAWA,EAAO,KAAK,EAC5B,OAAO,CAACD,MAAUA,MAAUH,KAAWJ,EAAM,MAAM,SAASO,CAAK,CAAC;AAAA,EACrE,GAEME,IAAiB,CAACL,MAAuB;AAC9C,UAAMM,IAAOP,EAAeC,CAAO;AACnC,IAAIM,MAASV,EAAM,SAClBA,EAAM,SAASU,CAAI;AAAA,EAErB;AAEA,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAYZ,EAAM;AAAA,MAClB,KAAKA,EAAM,OAAO;AAAA,MAClB,MAAMA,EAAM,QAAQ;AAAA,MACpB,aAAWA,EAAM,WAAW;AAAA,MAC5B,eAAY;AAAA,MAEX,UAAAA,EAAM,QAAQ,IAAI,CAACQ,MACnB,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UAEA,OAAOL,EAAO;AAAA,UACd,OAAOA,EAAO;AAAA,UACd,WAAWA,EAAO;AAAA,UAClB,UAAUA,EAAO;AAAA,UACjB,UAAUR,EAAM,MAAM,SAASQ,EAAO,KAAK;AAAA,UAC3C,MAAMR,EAAM;AAAA,UACZ,OAAOQ,EAAO,aAAa,SAAYR,EAAM;AAAA,UAC7C,YAAY,GAAGA,EAAM,WAAW,KAAK,MAAM,IAAIQ,EAAO,KAAK;AAAA,UAC3D,UAAUC;AAAA,QAAA;AAAA,QATLD,EAAO;AAAA,MAAA,CAWb;AAAA,IAAA;AAAA,EAAA;AAGJ;"}

package/dist/esm/components/chip-selector/index.d.ts

@@ -0,0 +1,4 @@
+import { ChipSelector } from './ChipSelector';
+import { ChipSelectorGroup } from './ChipSelectorGroup';
+export { ChipSelector, ChipSelectorGroup };
+export * from './model';

package/dist/esm/components/chip-selector/model.d.ts

@@ -0,0 +1,106 @@
+import { default as React } from 'react';
+/** Identifier for a chip. Numbers suit day/date indices, strings suit slugs. */
+export type ChipValue = string | number;
+export type ChipSize = 'small' | 'medium';
+export interface ChipOption {
+    /**
+     * Unique value for this chip, reported back through the group's `onChange`.
+     */
+    value: ChipValue;
+    /**
+     * Text rendered inside the chip. Keep it short — chips are compact by design.
+     */
+    label: string;
+    /**
+     * Accessible name, used when `label` is abbreviated and would not read well
+     * on its own — e.g. "M" for Monday, where several days share a letter.
+     * @default the `label`
+     */
+    ariaLabel?: string;
+    /**
+     * Blocks selection and dims the chip.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sizes this chip to its label, ignoring the group's `chipWidth`. For the odd
+     * long option in an otherwise uniform grid — "Last day of the month" beside
+     * dates 1–31, which would overflow a fixed date-sized chip.
+     * @default false
+     */
+    fitContent?: boolean;
+}
+export interface ChipSelectorProps extends ChipOption {
+    /**
+     * Whether the chip is currently selected.
+     */
+    selected: boolean;
+    /**
+     * Size of the chip. `medium` matches the 48px input height so chips can sit
+     * in a row beside inputs and dropdowns.
+     * @default 'medium'
+     */
+    size?: ChipSize;
+    /**
+     * Fixed width in px. Omit to let the chip size to its content, which is what
+     * variable-length labels need.
+     * @default undefined
+     */
+    width?: number;
+    onSelect: (value: ChipValue) => void;
+    dataTestId?: string;
+}
+export interface ChipSelectorGroupProps {
+    /**
+     * Chips to render, in display order.
+     */
+    options: ChipOption[];
+    /**
+     * Currently selected values. Pass a single-element array for single-select.
+     */
+    value: ChipValue[];
+    /**
+     * Fired with the full next selection, so the caller stores the result
+     * directly rather than reimplementing add/remove on every screen.
+     */
+    onChange: (value: ChipValue[]) => void;
+    /**
+     * Allows more than one chip to be selected at a time. When false, picking a
+     * chip replaces the selection.
+     * @default true
+     */
+    multiSelect?: boolean;
+    /**
+     * Permits clearing the last selected chip. Set false when the caller always
+     * needs at least one value.
+     * @default true
+     */
+    allowEmpty?: boolean;
+    /**
+     * Size applied to every chip in the group.
+     * @default 'medium'
+     */
+    size?: ChipSize;
+    /**
+     * Fixed width in px applied to every chip, for grids that must align — a
+     * day picker looks uneven if "S" and "W" size to their own content.
+     * @default undefined
+     */
+    chipWidth?: number;
+    /**
+     * Gap between chips in px.
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Wraps chips onto multiple lines. Needed for the 31-chip month grid.
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Accessible name for the group as a whole, e.g. "Repeat on".
+     */
+    ariaLabel?: string;
+    'data-test'?: string;
+}
+export type ChipIconProps = React.SVGAttributes<SVGElement>;

package/dist/esm/components/code-block/CodeBlock.styled.d.ts

@@ -1,54 +1,31 @@
-/// <reference types="react" />
-export declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+export declare const Container: import('styled-components').StyledComponent<"div", any, {
     themeMode: 'dark' | 'light';
     maxWidth?: string | undefined;
-}>> & string;
-export declare const Header: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const Header: import('styled-components').StyledComponent<"div", any, {
     themeMode: 'dark' | 'light';
-}>> & string;
-export declare const WindowControls: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const Dot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const WindowControls: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Dot: import('styled-components').StyledComponent<"div", any, {
     color: string;
-}>> & string;
-export declare const TitleSection: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const Title: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const TitleSection: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Title: import('styled-components').StyledComponent<"span", any, {
     themeMode: 'dark' | 'light';
-}>> & string;
-export declare const LanguageBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const LanguageBadge: import('styled-components').StyledComponent<"div", any, {
     bg: string;
     color?: string | undefined;
-}>> & string;
-export declare const CopyButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const CopyButton: import('styled-components').StyledComponent<"button", any, {
     themeMode: 'dark' | 'light';
-}>> & string;
-export declare const CodeContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const CodeContainer: import('styled-components').StyledComponent<"div", any, {
     maxHeight: string;
-}>> & string;
-export declare const LineNumbers: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const LineNumbers: import('styled-components').StyledComponent<"div", any, {
     themeMode: 'dark' | 'light';
-}>> & string;
-export declare const Code: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLPreElement>, HTMLPreElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}, {
+}, never>;
+export declare const Code: import('styled-components').StyledComponent<"pre", any, {
     themeMode: 'dark' | 'light';
-}>> & string;
+}, never>;

package/dist/esm/components/colourInput/ColourInput.styled.d.ts

@@ -1,7 +1,2 @@
-/// <reference types="react" />
-export declare const ColorInputContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const StyledColorInput: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
-    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string;
+export declare const ColorInputContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StyledColorInput: import('styled-components').StyledComponent<"input", any, {}, never>;

package/dist/esm/components/combo-box/ComboBox.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { ComboBoxProps } from './model';
+/**
+ * A text field that can be typed into or picked from a list.
+ *
+ * Sits between Dropdown, whose box is not editable, and Input, which offers no
+ * options. Reach for it when a field has common values worth listing but must
+ * still accept anything valid the user types — a time, a duration, a currency.
+ *
+ * Typing is validated rather than constrained, so a half-finished entry stays in
+ * the box instead of being rewritten on every keystroke; `validate` decides what
+ * is worth committing and `format` tidies the text once the field is left.
+ */
+export declare const ComboBox: React.FC<ComboBoxProps>;
+export default ComboBox;