@infonomic/uikit 6.0.3 → 6.0.4

package/dist/components/forms/checkbox-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/forms/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgEtD,CAAA"}
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/forms/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgEtD,CAAA"}

package/dist/components/forms/checkbox-group.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import classnames from "classnames";
 import { Checkbox } from "./checkbox.js";
+import checkbox_group_module from "./checkbox-group.module.js";
 const CheckboxGroup = ({ groupName, className, checkBoxClasses, checkBoxes, defaultValues, controlledValue, disabled = false, onChange })=>{
     let initialValue = [];
     if (void 0 !== controlledValue && controlledValue.length > 0) initialValue = controlledValue.split(',');
@@ -29,7 +30,7 @@ const CheckboxGroup = ({ groupName, className, checkBoxClasses, checkBoxes, defa
         onChange?.(s);
     };
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('infonomic-checkbox-group', className),
+        className: classnames('infonomic-checkbox-group', checkbox_group_module["checkbox-group"], className),
         children: checkBoxes.map((cb)=>/*#__PURE__*/ jsx(Checkbox, {
                 id: `${groupName}-${cb.id}`,
                 name: `${groupName}-${cb.id}`,

package/dist/components/forms/checkbox-group.module.css

@@ -0,0 +1,16 @@
+@layer infonomic-base,
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
+
+@layer infonomic-components {
+
+  :global(.infonomic-checkbox-group),
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
+}

package/dist/components/forms/checkbox-group.module.js

@@ -0,0 +1,6 @@
+import "./checkbox-group_module.css";
+const checkbox_group_module = {
+    "checkbox-group": "checkbox-group-Qh9Trn",
+    checkboxGroup: "checkbox-group-Qh9Trn"
+};
+export default checkbox_group_module;

package/dist/components/forms/checkbox-group_module.css

@@ -0,0 +1,10 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  :is(.infonomic-checkbox-group, .checkbox-group-Qh9Trn) {
+    gap: var(--spacing-8);
+    flex-direction: column;
+    display: flex;
+  }
+}
+

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/components/forms/checkbox-group.module.css

@@ -0,0 +1,16 @@
+@layer infonomic-base,
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
+
+@layer infonomic-components {
+
+  :global(.infonomic-checkbox-group),
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
+}

package/src/components/forms/checkbox-group.stories.tsx

@@ -0,0 +1,47 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
+import { useState } from 'react'
+
+import { CheckboxGroup } from './checkbox-group.js'
+
+
+export default {
+  title: 'Components/Forms/CheckboxGroup',
+  component: CheckboxGroup,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  const [checked, setChecked] = useState(false)
+
+  const handleOnClick = (): void => {
+    console.log('clicked')
+    setChecked(!checked)
+  }
+
+  return (
+    <div style={{ maxWidth: '800px', margin: '2rem auto 2rem' }}>
+      <h2 className="text-xl" style={{ marginBottom: '1rem' }}>
+        Checkbox Group
+      </h2>
+      <div className="grid gap-4 grid-cols-3">
+        <div className="control">
+          <CheckboxGroup
+            groupName="roles"
+            // TODO: Nullability of role.name
+            checkBoxes={[
+              { id: 'admin', label: 'Admin' },
+              { id: 'editor', label: 'Editor' },
+              { id: 'viewer', label: 'Viewer' },
+            ]}
+          // onChange={(selected) => {
+          //   handleOnClick(selected)
+          // }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+

package/src/components/forms/checkbox-group.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react'
 import cx from 'classnames'
 
 import { Checkbox } from './checkbox.js'
+import styles from './checkbox-group.module.css'
 
 export interface CheckboxGroupProps {
   groupName: string
@@ -67,7 +68,7 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
   }
 
   return (
-    <div className={cx('infonomic-checkbox-group', className)}>
+    <div className={cx('infonomic-checkbox-group', styles['checkbox-group'], className)}>
       {checkBoxes.map((cb) => (
         <Checkbox
           key={cb.id}