@cleartrip/ct-design-checkbox-group 4.0.0-SNAPSHOT-test.0

package/README.md

@@ -0,0 +1,63 @@
+# CheckboxGroup
+
+A group container for multiple checkbox components.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-checkbox-group
+# or
+pnpm add @cleartrip/ct-design-checkbox-group
+```
+
+### Peer dependencies
+
+```bash
+# Required for all targets
+npm install react
+
+# Web only
+npm install react-dom
+
+# React Native only
+npm install react-native
+```
+
+---
+
+## Usage
+
+### Basic
+
+```tsx
+import { CheckboxGroup } from '@cleartrip/ct-design-checkbox-group';
+
+function Example() {
+  return (
+    <CheckboxGroup>
+      {/* Basic usage */}
+    </CheckboxGroup>
+  );
+}
+```
+
+---
+
+## Accessibility
+
+- The component follows accessibility best practices
+- Ensure proper ARIA attributes are provided where needed
+- Test with screen readers to ensure usability
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { CheckboxGroup } from 'yagami/core/components';
++ import { CheckboxGroup } from '@cleartrip/ct-design-checkbox-group';
+```

package/dist/CheckboxGroup.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ContainerRef } from '@cleartrip/ct-design-container';
+import { ICheckboxGroup } from './type';
+declare const CheckboxGroup: React.ForwardRefExoticComponent<ICheckboxGroup & React.RefAttributes<ContainerRef>>;
+export default CheckboxGroup;
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../packages/components/CheckboxGroup/src/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAInE,OAAO,EAAE,cAAc,EAAmB,MAAM,QAAQ,CAAC;AAqBzD,QAAA,MAAM,aAAa,qFA4DlB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/ct-design-checkbox-group.browser.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),o=require("@cleartrip/ct-design-checkbox"),n=require("@cleartrip/ct-design-container"),r=require("@cleartrip/ct-design-typography");const t=require("@cleartrip/ct-design-style-manager").makeStyles(e=>({root:{padding:null==e?void 0:e.spacing[2]},heading:{display:"flex",flexDirection:"column",marginBottom:null==e?void 0:e.spacing[3],color:null==e?void 0:e.color.background.primary},checkboxContainer:{display:"flex",flexDirection:"column",marginBottom:null==e?void 0:e.spacing[3]}})),l=i.forwardRef(({checkboxList:l,heading:c,onClick:a,styleConfig:s,isMulti:d=!0},u)=>{const[g,p]=i.useState([]),{root:h=[],heading:x=[],checkboxContainer:f=[]}=s||{};i.useEffect(()=>{var e;const i=null!==(e=null==l?void 0:l.filter(e=>null==e?void 0:e.checked))&&void 0!==e?e:[];if(!d&&i.length>1)throw new Error("Multiple selected options are not allowed in single selection mode");p(i)},[l,d]);const y=e=>{let i=[...g];const o=i.findIndex(i=>i.id===e.id);o>=0?d?i.splice(o,1):i=[]:d?i.push(e):i=[e],p(i),null==a||a(e,i)};return e.jsxs(n.Container,{ref:u,styleConfig:{root:[null==t?void 0:t.root,...h]},children:[!!c&&("string"==typeof c?e.jsx(r.Typography,{variant:r.TypographyVariant.B2,styleConfig:{root:[null==t?void 0:t.heading,...x]},children:c}):c),null==l?void 0:l.map(i=>{const r=g.some(e=>(null==e?void 0:e.id)===(null==i?void 0:i.id));return e.jsx(n.Container,{styleConfig:{root:[null==t?void 0:t.checkboxContainer,...f]},children:e.jsx(o.Checkbox,Object.assign({},i,{onChange:y,checked:r}))},i.id)})]})});l.displayName="CheckboxGroup",exports.CheckboxGroup=l;
+//# sourceMappingURL=ct-design-checkbox-group.browser.cjs.js.map

package/dist/ct-design-checkbox-group.browser.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-checkbox-group.browser.cjs.js","sources":["../packages/components/CheckboxGroup/src/CheckboxGroup.tsx"],"sourcesContent":[null],"names":["staticCheckboxGroupStyles","makeStyles","theme","root","padding","spacing","heading","display","flexDirection","marginBottom","color","background","primary","checkboxContainer","CheckboxGroup","forwardRef","checkboxList","onClick","styleConfig","isMulti","ref","selectedOptions","setSelectedOptions","useState","customRootStyles","customHeadingStyles","customCheckboxContainerStyles","useEffect","initialSelectedOptions","_a","filter","option","checked","length","Error","handleOptionClick","selectedOption","newSelectedOptions","optionIndex","findIndex","id","splice","push","_jsxs","jsxs","Container","children","_jsx","jsx","Typography","variant","TypographyVariant","B2","map","checkboxOption","isChecked","some","Checkbox","Object","assign","onChange","displayName"],"mappings":"uMAUA,MAAMA,gDAA4BC,WAAYC,IACrC,CACLC,KAAM,CACJC,QAASF,aAAK,EAALA,EAAOG,QAAQ,IAE1BC,QAAS,CACPC,QAAS,OACTC,cAAe,SACfC,aAAcP,aAAK,EAALA,EAAOG,QAAQ,GAC7BK,MAAOR,aAAK,EAALA,EAAOQ,MAAMC,WAAWC,SAEjCC,kBAAmB,CACjBN,QAAS,OACTC,cAAe,SACfC,aAAcP,aAAK,EAALA,EAAOG,QAAQ,OAK7BS,EAAgBC,EAAUA,WAC9B,EAAGC,eAAcV,UAASW,UAASC,cAAaC,WAAU,GAAQC,KAChE,MAAOC,EAAiBC,GAAsBC,EAAQA,SAAoB,KAGxEpB,KAAMqB,EAAmB,GACzBlB,QAASmB,EAAsB,GAC/BZ,kBAAmBa,EAAgC,IACjDR,GAAe,CAAA,EAEnBS,EAAAA,UAAU,WACR,MAAMC,EAA8E,QAArDC,EAAAb,aAAY,EAAZA,EAAcc,OAAQC,GAAWA,aAAM,EAANA,EAAQC,gBAAY,IAAAH,EAAAA,EAAA,GACpF,IAAKV,GAAWS,EAAuBK,OAAS,EAC9C,MAAM,IAAIC,MAAM,sEAElBZ,EAAmBM,IAClB,CAACZ,EAAcG,IAElB,MAAMgB,EAAqBC,IACzB,IAAIC,EAAqB,IAAIhB,GAC7B,MAAMiB,EAAcD,EAAmBE,UAAWR,GAAWA,EAAOS,KAAOJ,EAAeI,IACtFF,GAAe,EACbnB,EAASkB,EAAmBI,OAAOH,EAAa,GAC/CD,EAAqB,GACjBlB,EACTkB,EAAmBK,KAAKN,GAExBC,EAAqB,CAACD,GAExBd,EAAmBe,GACnBpB,SAAAA,EAAUmB,EAAgBC,IAG5B,OACEM,EAAAC,KAACC,YAAS,CAACzB,IAAKA,EAAKF,YAAa,CAAEf,KAAM,CAACH,aAAyB,EAAzBA,EAA2BG,QAASqB,IAC5EsB,SAAA,GAAExC,IACmB,iBAAZA,EACNyC,EAAAC,IAACC,EAAUA,WAAA,CACTC,QAASC,EAAAA,kBAAkBC,GAC3BlC,YAAa,CAAEf,KAAM,CAACH,aAAyB,EAAzBA,EAA2BM,WAAYmB,IAAsBqB,SAElFxC,IACU,GAIhBU,aAAA,EAAAA,EAAcqC,IAAKC,IAClB,MAAMC,EAAYlC,EAAgBmC,KAAMzB,IAAWA,aAAM,EAANA,EAAQS,OAAOc,aAAc,EAAdA,EAAgBd,KAClF,OACEO,EAAAA,IAACF,EAAAA,WAEC3B,YAAa,CAAEf,KAAM,CAACH,aAAA,EAAAA,EAA2Ba,qBAAsBa,IAAgCoB,SAEvGC,EAAAA,IAACU,EAAAA,SAAQC,OAAAC,OAAA,CAAA,EAAKL,EAAgB,CAAAM,SAAUzB,EAAmBH,QAASuB,MAH/DD,EAAed,WAYlC1B,EAAc+C,YAAc"}

package/dist/ct-design-checkbox-group.browser.esm.js

@@ -0,0 +1,2 @@
+import{jsxs as o,jsx as i}from"react/jsx-runtime";import{forwardRef as n,useState as e,useEffect as l}from"react";import{Checkbox as r}from"@cleartrip/ct-design-checkbox";import{Container as t}from"@cleartrip/ct-design-container";import{Typography as c,TypographyVariant as d}from"@cleartrip/ct-design-typography";import{makeStyles as a}from"@cleartrip/ct-design-style-manager";const s=a(o=>({root:{padding:null==o?void 0:o.spacing[2]},heading:{display:"flex",flexDirection:"column",marginBottom:null==o?void 0:o.spacing[3],color:null==o?void 0:o.color.background.primary},checkboxContainer:{display:"flex",flexDirection:"column",marginBottom:null==o?void 0:o.spacing[3]}})),p=n(({checkboxList:n,heading:a,onClick:p,styleConfig:g,isMulti:m=!0},u)=>{const[h,f]=e([]),{root:v=[],heading:x=[],checkboxContainer:y=[]}=g||{};l(()=>{var o;const i=null!==(o=null==n?void 0:n.filter(o=>null==o?void 0:o.checked))&&void 0!==o?o:[];if(!m&&i.length>1)throw new Error("Multiple selected options are not allowed in single selection mode");f(i)},[n,m]);const k=o=>{let i=[...h];const n=i.findIndex(i=>i.id===o.id);n>=0?m?i.splice(n,1):i=[]:m?i.push(o):i=[o],f(i),null==p||p(o,i)};return o(t,{ref:u,styleConfig:{root:[null==s?void 0:s.root,...v]},children:[!!a&&("string"==typeof a?i(c,{variant:d.B2,styleConfig:{root:[null==s?void 0:s.heading,...x]},children:a}):a),null==n?void 0:n.map(o=>{const n=h.some(i=>(null==i?void 0:i.id)===(null==o?void 0:o.id));return i(t,{styleConfig:{root:[null==s?void 0:s.checkboxContainer,...y]},children:i(r,Object.assign({},o,{onChange:k,checked:n}))},o.id)})]})});p.displayName="CheckboxGroup";export{p as CheckboxGroup};
+//# sourceMappingURL=ct-design-checkbox-group.browser.esm.js.map

package/dist/ct-design-checkbox-group.browser.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-checkbox-group.browser.esm.js","sources":["../packages/components/CheckboxGroup/src/CheckboxGroup.tsx"],"sourcesContent":[null],"names":["staticCheckboxGroupStyles","makeStyles","theme","root","padding","spacing","heading","display","flexDirection","marginBottom","color","background","primary","checkboxContainer","CheckboxGroup","forwardRef","checkboxList","onClick","styleConfig","isMulti","ref","selectedOptions","setSelectedOptions","useState","customRootStyles","customHeadingStyles","customCheckboxContainerStyles","useEffect","initialSelectedOptions","_a","filter","option","checked","length","Error","handleOptionClick","selectedOption","newSelectedOptions","optionIndex","findIndex","id","splice","push","_jsxs","Container","children","_jsx","Typography","variant","TypographyVariant","B2","map","checkboxOption","isChecked","some","Checkbox","Object","assign","onChange","displayName"],"mappings":"0XAUA,MAAMA,EAA4BC,EAAYC,IACrC,CACLC,KAAM,CACJC,QAASF,aAAK,EAALA,EAAOG,QAAQ,IAE1BC,QAAS,CACPC,QAAS,OACTC,cAAe,SACfC,aAAcP,aAAK,EAALA,EAAOG,QAAQ,GAC7BK,MAAOR,aAAK,EAALA,EAAOQ,MAAMC,WAAWC,SAEjCC,kBAAmB,CACjBN,QAAS,OACTC,cAAe,SACfC,aAAcP,aAAK,EAALA,EAAOG,QAAQ,OAK7BS,EAAgBC,EACpB,EAAGC,eAAcV,UAASW,UAASC,cAAaC,WAAU,GAAQC,KAChE,MAAOC,EAAiBC,GAAsBC,EAA4B,KAGxEpB,KAAMqB,EAAmB,GACzBlB,QAASmB,EAAsB,GAC/BZ,kBAAmBa,EAAgC,IACjDR,GAAe,CAAA,EAEnBS,EAAU,WACR,MAAMC,EAA8E,QAArDC,EAAAb,aAAY,EAAZA,EAAcc,OAAQC,GAAWA,aAAM,EAANA,EAAQC,gBAAY,IAAAH,EAAAA,EAAA,GACpF,IAAKV,GAAWS,EAAuBK,OAAS,EAC9C,MAAM,IAAIC,MAAM,sEAElBZ,EAAmBM,IAClB,CAACZ,EAAcG,IAElB,MAAMgB,EAAqBC,IACzB,IAAIC,EAAqB,IAAIhB,GAC7B,MAAMiB,EAAcD,EAAmBE,UAAWR,GAAWA,EAAOS,KAAOJ,EAAeI,IACtFF,GAAe,EACbnB,EAASkB,EAAmBI,OAAOH,EAAa,GAC/CD,EAAqB,GACjBlB,EACTkB,EAAmBK,KAAKN,GAExBC,EAAqB,CAACD,GAExBd,EAAmBe,GACnBpB,SAAAA,EAAUmB,EAAgBC,IAG5B,OACEM,EAACC,EAAS,CAACxB,IAAKA,EAAKF,YAAa,CAAEf,KAAM,CAACH,aAAyB,EAAzBA,EAA2BG,QAASqB,IAC5EqB,SAAA,GAAEvC,IACmB,iBAAZA,EACNwC,EAACC,EAAU,CACTC,QAASC,EAAkBC,GAC3BhC,YAAa,CAAEf,KAAM,CAACH,aAAyB,EAAzBA,EAA2BM,WAAYmB,IAAsBoB,SAElFvC,IACU,GAIhBU,aAAA,EAAAA,EAAcmC,IAAKC,IAClB,MAAMC,EAAYhC,EAAgBiC,KAAMvB,IAAWA,aAAM,EAANA,EAAQS,OAAOY,aAAc,EAAdA,EAAgBZ,KAClF,OACEM,EAACF,GAEC1B,YAAa,CAAEf,KAAM,CAACH,aAAA,EAAAA,EAA2Ba,qBAAsBa,IAAgCmB,SAEvGC,EAACS,EAAQC,OAAAC,OAAA,CAAA,EAAKL,EAAgB,CAAAM,SAAUvB,EAAmBH,QAASqB,MAH/DD,EAAeZ,WAYlC1B,EAAc6C,YAAc"}

package/dist/ct-design-checkbox-group.cjs.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ctDesignCheckbox = require('@cleartrip/ct-design-checkbox');
+var ctDesignContainer = require('@cleartrip/ct-design-container');
+var ctDesignTypography = require('@cleartrip/ct-design-typography');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
+
+const staticCheckboxGroupStyles = ctDesignStyleManager.makeStyles((theme) => {
+    return {
+        root: {
+            padding: theme === null || theme === void 0 ? void 0 : theme.spacing[2],
+        },
+        heading: {
+            display: 'flex',
+            flexDirection: 'column',
+            marginBottom: theme === null || theme === void 0 ? void 0 : theme.spacing[3],
+            color: theme === null || theme === void 0 ? void 0 : theme.color.background.primary,
+        },
+        checkboxContainer: {
+            display: 'flex',
+            flexDirection: 'column',
+            marginBottom: theme === null || theme === void 0 ? void 0 : theme.spacing[3],
+        },
+    };
+});
+const CheckboxGroup = react.forwardRef(({ checkboxList, heading, onClick, styleConfig, isMulti = true }, ref) => {
+    const [selectedOptions, setSelectedOptions] = react.useState([]);
+    const { root: customRootStyles = [], heading: customHeadingStyles = [], checkboxContainer: customCheckboxContainerStyles = [], } = styleConfig || {};
+    react.useEffect(() => {
+        var _a;
+        const initialSelectedOptions = (_a = checkboxList === null || checkboxList === void 0 ? void 0 : checkboxList.filter((option) => option === null || option === void 0 ? void 0 : option.checked)) !== null && _a !== void 0 ? _a : [];
+        if (!isMulti && initialSelectedOptions.length > 1) {
+            throw new Error('Multiple selected options are not allowed in single selection mode');
+        }
+        setSelectedOptions(initialSelectedOptions);
+    }, [checkboxList, isMulti]);
+    const handleOptionClick = (selectedOption) => {
+        let newSelectedOptions = [...selectedOptions];
+        const optionIndex = newSelectedOptions.findIndex((option) => option.id === selectedOption.id);
+        if (optionIndex >= 0) {
+            if (isMulti)
+                newSelectedOptions.splice(optionIndex, 1);
+            else
+                newSelectedOptions = [];
+        }
+        else if (isMulti) {
+            newSelectedOptions.push(selectedOption);
+        }
+        else {
+            newSelectedOptions = [selectedOption];
+        }
+        setSelectedOptions(newSelectedOptions);
+        onClick === null || onClick === void 0 ? void 0 : onClick(selectedOption, newSelectedOptions);
+    };
+    return (jsxRuntime.jsxs(ctDesignContainer.Container, { ref: ref, styleConfig: { root: [staticCheckboxGroupStyles === null || staticCheckboxGroupStyles === void 0 ? void 0 : staticCheckboxGroupStyles.root, ...customRootStyles] }, children: [!!heading &&
+                (typeof heading === 'string' ? (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: ctDesignTypography.TypographyVariant.B2, styleConfig: { root: [staticCheckboxGroupStyles === null || staticCheckboxGroupStyles === void 0 ? void 0 : staticCheckboxGroupStyles.heading, ...customHeadingStyles] }, children: heading })) : (heading)), checkboxList === null || checkboxList === void 0 ? void 0 : checkboxList.map((checkboxOption) => {
+                const isChecked = selectedOptions.some((option) => (option === null || option === void 0 ? void 0 : option.id) === (checkboxOption === null || checkboxOption === void 0 ? void 0 : checkboxOption.id));
+                return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticCheckboxGroupStyles === null || staticCheckboxGroupStyles === void 0 ? void 0 : staticCheckboxGroupStyles.checkboxContainer, ...customCheckboxContainerStyles] }, children: jsxRuntime.jsx(ctDesignCheckbox.Checkbox, Object.assign({}, checkboxOption, { onChange: handleOptionClick, checked: isChecked })) }, checkboxOption.id));
+            })] }));
+});
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+exports.CheckboxGroup = CheckboxGroup;
+//# sourceMappingURL=ct-design-checkbox-group.cjs.js.map

package/dist/ct-design-checkbox-group.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-checkbox-group.cjs.js","sources":["../packages/components/CheckboxGroup/src/CheckboxGroup.tsx"],"sourcesContent":[null],"names":["makeStyles","forwardRef","useState","useEffect","_jsxs","Container","_jsx","Typography","TypographyVariant","Checkbox"],"mappings":"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"}

package/dist/ct-design-checkbox-group.esm.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { Checkbox } from '@cleartrip/ct-design-checkbox';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography, TypographyVariant } from '@cleartrip/ct-design-typography';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+const staticCheckboxGroupStyles = makeStyles((theme) => {
+    return {
+        root: {
+            padding: theme === null || theme === void 0 ? void 0 : theme.spacing[2],
+        },
+        heading: {
+            display: 'flex',
+            flexDirection: 'column',
+            marginBottom: theme === null || theme === void 0 ? void 0 : theme.spacing[3],
+            color: theme === null || theme === void 0 ? void 0 : theme.color.background.primary,
+        },
+        checkboxContainer: {
+            display: 'flex',
+            flexDirection: 'column',
+            marginBottom: theme === null || theme === void 0 ? void 0 : theme.spacing[3],
+        },
+    };
+});
+const CheckboxGroup = forwardRef(({ checkboxList, heading, onClick, styleConfig, isMulti = true }, ref) => {
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const { root: customRootStyles = [], heading: customHeadingStyles = [], checkboxContainer: customCheckboxContainerStyles = [], } = styleConfig || {};
+    useEffect(() => {
+        var _a;
+        const initialSelectedOptions = (_a = checkboxList === null || checkboxList === void 0 ? void 0 : checkboxList.filter((option) => option === null || option === void 0 ? void 0 : option.checked)) !== null && _a !== void 0 ? _a : [];
+        if (!isMulti && initialSelectedOptions.length > 1) {
+            throw new Error('Multiple selected options are not allowed in single selection mode');
+        }
+        setSelectedOptions(initialSelectedOptions);
+    }, [checkboxList, isMulti]);
+    const handleOptionClick = (selectedOption) => {
+        let newSelectedOptions = [...selectedOptions];
+        const optionIndex = newSelectedOptions.findIndex((option) => option.id === selectedOption.id);
+        if (optionIndex >= 0) {
+            if (isMulti)
+                newSelectedOptions.splice(optionIndex, 1);
+            else
+                newSelectedOptions = [];
+        }
+        else if (isMulti) {
+            newSelectedOptions.push(selectedOption);
+        }
+        else {
+            newSelectedOptions = [selectedOption];
+        }
+        setSelectedOptions(newSelectedOptions);
+        onClick === null || onClick === void 0 ? void 0 : onClick(selectedOption, newSelectedOptions);
+    };
+    return (jsxs(Container, { ref: ref, styleConfig: { root: [staticCheckboxGroupStyles === null || staticCheckboxGroupStyles === void 0 ? void 0 : staticCheckboxGroupStyles.root, ...customRootStyles] }, children: [!!heading &&
+                (typeof heading === 'string' ? (jsx(Typography, { variant: TypographyVariant.B2, styleConfig: { root: [staticCheckboxGroupStyles === null || staticCheckboxGroupStyles === void 0 ? void 0 : staticCheckboxGroupStyles.heading, ...customHeadingStyles] }, children: heading })) : (heading)), checkboxList === null || checkboxList === void 0 ? void 0 : checkboxList.map((checkboxOption) => {
+                const isChecked = selectedOptions.some((option) => (option === null || option === void 0 ? void 0 : option.id) === (checkboxOption === null || checkboxOption === void 0 ? void 0 : checkboxOption.id));
+                return (jsx(Container, { styleConfig: { root: [staticCheckboxGroupStyles === null || staticCheckboxGroupStyles === void 0 ? void 0 : staticCheckboxGroupStyles.checkboxContainer, ...customCheckboxContainerStyles] }, children: jsx(Checkbox, Object.assign({}, checkboxOption, { onChange: handleOptionClick, checked: isChecked })) }, checkboxOption.id));
+            })] }));
+});
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+export { CheckboxGroup };
+//# sourceMappingURL=ct-design-checkbox-group.esm.js.map

package/dist/ct-design-checkbox-group.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-checkbox-group.esm.js","sources":["../packages/components/CheckboxGroup/src/CheckboxGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/ct-design-checkbox-group.umd.js

@@ -0,0 +1,65 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-checkbox'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-style-manager')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-checkbox', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-style-manager'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemCheckboxGroup = {}, global.jsxRuntime, global.React, global.ctDesignCheckbox, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignStyleManager));
+})(this, (function (exports, jsxRuntime, react, ctDesignCheckbox, ctDesignContainer, ctDesignTypography, ctDesignStyleManager) { 'use strict';
+
+    const staticCheckboxGroupStyles = ctDesignStyleManager.makeStyles((theme) => {
+        return {
+            root: {
+                padding: theme === null || theme === void 0 ? void 0 : theme.spacing[2],
+            },
+            heading: {
+                display: 'flex',
+                flexDirection: 'column',
+                marginBottom: theme === null || theme === void 0 ? void 0 : theme.spacing[3],
+                color: theme === null || theme === void 0 ? void 0 : theme.color.background.primary,
+            },
+            checkboxContainer: {
+                display: 'flex',
+                flexDirection: 'column',
+                marginBottom: theme === null || theme === void 0 ? void 0 : theme.spacing[3],
+            },
+        };
+    });
+    const CheckboxGroup = react.forwardRef(({ checkboxList, heading, onClick, styleConfig, isMulti = true }, ref) => {
+        const [selectedOptions, setSelectedOptions] = react.useState([]);
+        const { root: customRootStyles = [], heading: customHeadingStyles = [], checkboxContainer: customCheckboxContainerStyles = [], } = styleConfig || {};
+        react.useEffect(() => {
+            var _a;
+            const initialSelectedOptions = (_a = checkboxList === null || checkboxList === void 0 ? void 0 : checkboxList.filter((option) => option === null || option === void 0 ? void 0 : option.checked)) !== null && _a !== void 0 ? _a : [];
+            if (!isMulti && initialSelectedOptions.length > 1) {
+                throw new Error('Multiple selected options are not allowed in single selection mode');
+            }
+            setSelectedOptions(initialSelectedOptions);
+        }, [checkboxList, isMulti]);
+        const handleOptionClick = (selectedOption) => {
+            let newSelectedOptions = [...selectedOptions];
+            const optionIndex = newSelectedOptions.findIndex((option) => option.id === selectedOption.id);
+            if (optionIndex >= 0) {
+                if (isMulti)
+                    newSelectedOptions.splice(optionIndex, 1);
+                else
+                    newSelectedOptions = [];
+            }
+            else if (isMulti) {
+                newSelectedOptions.push(selectedOption);
+            }
+            else {
+                newSelectedOptions = [selectedOption];
+            }
+            setSelectedOptions(newSelectedOptions);
+            onClick === null || onClick === void 0 ? void 0 : onClick(selectedOption, newSelectedOptions);
+        };
+        return (jsxRuntime.jsxs(ctDesignContainer.Container, { ref: ref, styleConfig: { root: [staticCheckboxGroupStyles === null || staticCheckboxGroupStyles === void 0 ? void 0 : staticCheckboxGroupStyles.root, ...customRootStyles] }, children: [!!heading &&
+                    (typeof heading === 'string' ? (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: ctDesignTypography.TypographyVariant.B2, styleConfig: { root: [staticCheckboxGroupStyles === null || staticCheckboxGroupStyles === void 0 ? void 0 : staticCheckboxGroupStyles.heading, ...customHeadingStyles] }, children: heading })) : (heading)), checkboxList === null || checkboxList === void 0 ? void 0 : checkboxList.map((checkboxOption) => {
+                    const isChecked = selectedOptions.some((option) => (option === null || option === void 0 ? void 0 : option.id) === (checkboxOption === null || checkboxOption === void 0 ? void 0 : checkboxOption.id));
+                    return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticCheckboxGroupStyles === null || staticCheckboxGroupStyles === void 0 ? void 0 : staticCheckboxGroupStyles.checkboxContainer, ...customCheckboxContainerStyles] }, children: jsxRuntime.jsx(ctDesignCheckbox.Checkbox, Object.assign({}, checkboxOption, { onChange: handleOptionClick, checked: isChecked })) }, checkboxOption.id));
+                })] }));
+    });
+    CheckboxGroup.displayName = 'CheckboxGroup';
+
+    exports.CheckboxGroup = CheckboxGroup;
+
+}));
+//# sourceMappingURL=ct-design-checkbox-group.umd.js.map

package/dist/ct-design-checkbox-group.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-checkbox-group.umd.js","sources":["../packages/components/CheckboxGroup/src/CheckboxGroup.tsx"],"sourcesContent":[null],"names":["makeStyles","forwardRef","useState","useEffect","_jsxs","Container","_jsx","Typography","TypographyVariant","Checkbox"],"mappings":";;;;;;IAUA,MAAM,yBAAyB,GAAGA,+BAAU,CAAC,CAAC,KAAK,KAAI;QACrD,OAAO;IACL,QAAA,IAAI,EAAE;gBACJ,OAAO,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,OAAO,CAAC,CAAC,CAAC;IAC3B,SAAA;IACD,QAAA,OAAO,EAAE;IACP,YAAA,OAAO,EAAE,MAAM;IACf,YAAA,aAAa,EAAE,QAAQ;gBACvB,YAAY,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,OAAO,CAAC,CAAC,CAAC;gBAC/B,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,KAAK,CAAC,UAAU,CAAC,OAAO;IACvC,SAAA;IACD,QAAA,iBAAiB,EAAE;IACjB,YAAA,OAAO,EAAE,MAAM;IACf,YAAA,aAAa,EAAE,QAAQ;gBACvB,YAAY,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,OAAO,CAAC,CAAC,CAAC;IAChC,SAAA;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AAEG,UAAA,aAAa,GAAGC,gBAAU,CAC9B,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;QACvE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAGC,cAAQ,CAAoB,EAAE,CAAC,CAAC;QAE9E,MAAM,EACJ,IAAI,EAAE,gBAAgB,GAAG,EAAE,EAC3B,OAAO,EAAE,mBAAmB,GAAG,EAAE,EACjC,iBAAiB,EAAE,6BAA6B,GAAG,EAAE,GACtD,GAAG,WAAW,IAAI,EAAE,CAAC;QAEtBC,eAAS,CAAC,MAAK;;YACb,MAAM,sBAAsB,GAAG,CAAA,EAAA,GAAA,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZ,YAAY,CAAE,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,OAAO,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,EAAE,CAAC;YACvF,IAAI,CAAC,OAAO,IAAI,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAAE;IACjD,YAAA,MAAM,IAAI,KAAK,CAAC,oEAAoE,CAAC,CAAC;aACvF;YACD,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC7C,KAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5B,IAAA,MAAM,iBAAiB,GAAG,CAAC,cAA+B,KAAI;IAC5D,QAAA,IAAI,kBAAkB,GAAG,CAAC,GAAG,eAAe,CAAC,CAAC;IAC9C,QAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,EAAE,KAAK,cAAc,CAAC,EAAE,CAAC,CAAC;IAC9F,QAAA,IAAI,WAAW,IAAI,CAAC,EAAE;IACpB,YAAA,IAAI,OAAO;IAAE,gBAAA,kBAAkB,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;;oBAClD,kBAAkB,GAAG,EAAE,CAAC;aAC9B;iBAAM,IAAI,OAAO,EAAE;IAClB,YAAA,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;aACzC;iBAAM;IACL,YAAA,kBAAkB,GAAG,CAAC,cAAc,CAAC,CAAC;aACvC;YACD,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;YACvC,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,CAAG,cAAc,EAAE,kBAAkB,CAAC,CAAC;IAChD,KAAC,CAAC;IAEF,IAAA,QACEC,eAAA,CAACC,2BAAS,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,yBAAyB,KAAA,IAAA,IAAzB,yBAAyB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAzB,yBAAyB,CAAE,IAAI,EAAE,GAAG,gBAAgB,CAAC,EAAE,EAC/F,QAAA,EAAA,CAAA,CAAC,CAAC,OAAO;qBACP,OAAO,OAAO,KAAK,QAAQ,IAC1BC,cAAA,CAACC,6BAAU,EAAA,EACT,OAAO,EAAEC,oCAAiB,CAAC,EAAE,EAC7B,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,yBAAyB,KAAA,IAAA,IAAzB,yBAAyB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAzB,yBAAyB,CAAE,OAAO,EAAE,GAAG,mBAAmB,CAAC,EAAE,EAAA,QAAA,EAElF,OAAO,EAAA,CACG,KAEb,OAAO,CACR,CAAC,EACH,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAY,CAAE,GAAG,CAAC,CAAC,cAA+B,KAAI;IACrD,gBAAA,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,EAAE,OAAK,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAd,cAAc,CAAE,EAAE,CAAA,CAAC,CAAC;IACtF,gBAAA,QACEF,cAAC,CAAAD,2BAAS,IAER,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,yBAAyB,KAAA,IAAA,IAAzB,yBAAyB,KAAzB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,yBAAyB,CAAE,iBAAiB,EAAE,GAAG,6BAA6B,CAAC,EAAE,EAAA,QAAA,EAEvGC,eAACG,yBAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,cAAc,EAAE,EAAA,QAAQ,EAAE,iBAAiB,EAAE,OAAO,EAAE,SAAS,IAAI,EAH5E,EAAA,cAAc,CAAC,EAAE,CAIZ,EACZ;iBACH,CAAC,CACQ,EAAA,CAAA,EACZ;IACJ,CAAC,EACD;IAEF,aAAa,CAAC,WAAW,GAAG,eAAe;;;;;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CheckboxGroup } from './CheckboxGroup';
+export * from './type';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../packages/components/CheckboxGroup/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,QAAQ,CAAC"}

package/dist/type.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import type { Styles, TextStyle } from '@cleartrip/ct-design-types';
+import { ICheckboxOption } from '@cleartrip/ct-design-checkbox';
+export type { ICheckboxOption };
+export interface ICheckboxGroup {
+    checkboxList: ICheckboxOption[];
+    isMulti?: boolean;
+    onClick?: (selectedOption: ICheckboxOption, selectedOptionList: ICheckboxOption[]) => void;
+    heading?: ReactNode | string;
+    styleConfig?: {
+        root?: Styles[];
+        heading?: TextStyle[];
+        checkboxContainer?: Styles[];
+    };
+}
+//# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/CheckboxGroup/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,YAAY,EAAE,eAAe,EAAE,CAAC;AAKhC,MAAM,WAAW,cAAc;IAE7B,YAAY,EAAE,eAAe,EAAE,CAAC;IAEhC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,CAAC,cAAc,EAAE,eAAe,EAAE,kBAAkB,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAE3F,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE7B,WAAW,CAAC,EAAE;QAEZ,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAEhB,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;QAEtB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;KAC9B,CAAC;CACH"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@cleartrip/ct-design-checkbox-group",
+  "version": "4.0.0-SNAPSHOT-test.0",
+  "description": "CheckboxGroup Component",
+  "types": "dist/index.d.ts",
+  "main": "./dist/ct-design-checkbox-group.cjs.js",
+  "jsnext:main": "dist/ct-design-checkbox-group.esm.js",
+  "module": "dist/ct-design-checkbox-group.esm.js",
+  "react-native": "src/index.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/ct-design-checkbox-group.d.ts",
+      "import": "./dist/ct-design-checkbox-group.esm.js",
+      "default": "./dist/ct-design-checkbox-group.cjs.js"
+    }
+  },
+  "browser": {
+    "./dist/ct-design-checkbox-group.esm.js": "./dist/ct-design-checkbox-group.browser.esm.js",
+    "./dist/ct-design-checkbox-group.cjs.js": "./dist/ct-design-checkbox-group.browser.cjs.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-container": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-checkbox": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-typography": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-test.0"
+  },
+  "devDependencies": {},
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Cleartrip",
+  "license": "ISC",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch-package": "rollup -c -w",
+    "build-package": "rollup -c",
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish"
+  }
+}

package/src/CheckboxGroup.tsx

@@ -0,0 +1,94 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+
+import { Checkbox } from '@cleartrip/ct-design-checkbox';
+import { Container } from '@cleartrip/ct-design-container';
+import type { ContainerRef } from '@cleartrip/ct-design-container';
+import { Typography, TypographyVariant } from '@cleartrip/ct-design-typography';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+import { ICheckboxGroup, ICheckboxOption } from './type';
+
+const staticCheckboxGroupStyles = makeStyles((theme) => {
+  return {
+    root: {
+      padding: theme?.spacing[2],
+    },
+    heading: {
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: theme?.spacing[3],
+      color: theme?.color.background.primary,
+    },
+    checkboxContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: theme?.spacing[3],
+    },
+  };
+});
+
+const CheckboxGroup = forwardRef<ContainerRef, ICheckboxGroup>(
+  ({ checkboxList, heading, onClick, styleConfig, isMulti = true }, ref) => {
+    const [selectedOptions, setSelectedOptions] = useState<ICheckboxOption[]>([]);
+
+    const {
+      root: customRootStyles = [],
+      heading: customHeadingStyles = [],
+      checkboxContainer: customCheckboxContainerStyles = [],
+    } = styleConfig || {};
+
+    useEffect(() => {
+      const initialSelectedOptions = checkboxList?.filter((option) => option?.checked) ?? [];
+      if (!isMulti && initialSelectedOptions.length > 1) {
+        throw new Error('Multiple selected options are not allowed in single selection mode');
+      }
+      setSelectedOptions(initialSelectedOptions);
+    }, [checkboxList, isMulti]);
+
+    const handleOptionClick = (selectedOption: ICheckboxOption) => {
+      let newSelectedOptions = [...selectedOptions];
+      const optionIndex = newSelectedOptions.findIndex((option) => option.id === selectedOption.id);
+      if (optionIndex >= 0) {
+        if (isMulti) newSelectedOptions.splice(optionIndex, 1);
+        else newSelectedOptions = [];
+      } else if (isMulti) {
+        newSelectedOptions.push(selectedOption);
+      } else {
+        newSelectedOptions = [selectedOption];
+      }
+      setSelectedOptions(newSelectedOptions);
+      onClick?.(selectedOption, newSelectedOptions);
+    };
+
+    return (
+      <Container ref={ref} styleConfig={{ root: [staticCheckboxGroupStyles?.root, ...customRootStyles] }}>
+        {!!heading &&
+          (typeof heading === 'string' ? (
+            <Typography
+              variant={TypographyVariant.B2}
+              styleConfig={{ root: [staticCheckboxGroupStyles?.heading, ...customHeadingStyles] }}
+            >
+              {heading}
+            </Typography>
+          ) : (
+            heading
+          ))}
+        {checkboxList?.map((checkboxOption: ICheckboxOption) => {
+          const isChecked = selectedOptions.some((option) => option?.id === checkboxOption?.id);
+          return (
+            <Container
+              key={checkboxOption.id}
+              styleConfig={{ root: [staticCheckboxGroupStyles?.checkboxContainer, ...customCheckboxContainerStyles] }}
+            >
+              <Checkbox {...checkboxOption} onChange={handleOptionClick} checked={isChecked} />
+            </Container>
+          );
+        })}
+      </Container>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+export default CheckboxGroup;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as CheckboxGroup } from './CheckboxGroup';
+export * from './type';

package/src/type.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+
+import type { Styles, TextStyle } from '@cleartrip/ct-design-types';
+import { ICheckboxOption } from '@cleartrip/ct-design-checkbox';
+
+export type { ICheckboxOption };
+
+/**
+ * Interface representing a group of checkboxes
+ */
+export interface ICheckboxGroup {
+  /** Array of checkbox options to display */
+  checkboxList: ICheckboxOption[];
+  /** Whether multiple checkboxes can be selected */
+  isMulti?: boolean;
+  /** Callback function triggered when a checkbox is clicked */
+  onClick?: (selectedOption: ICheckboxOption, selectedOptionList: ICheckboxOption[]) => void;
+  /** Optional heading to display above the checkbox group */
+  heading?: ReactNode | string;
+  /** Optional style configuration for different parts of the checkbox group */
+  styleConfig?: {
+    /** Styles for the root container element */
+    root?: Styles[];
+    /** Styles for the heading element */
+    heading?: TextStyle[];
+    /** Styles for the container of each checkbox */
+    checkboxContainer?: Styles[];
+  };
+}