@televet/kibble-ui 2.1.37 → 2.1.38

package/build/components/RadioButtonGroup/index.d.ts

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

package/build/components/RadioButtonGroup/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("../../button.component-8c8cd059.js"),a=require("../../chakra-ui-button.esm-bd065780.js"),t=require("../../chakra-ui-form-control.esm-6d25b1a4.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../tslib.es6-d6f17add.js"),require("../../icon.component-100b924b.js"),require("../../icons/index.js"),require("../../chakra-ui-layout.esm-6ee578f7.js"),require("../../chakra-ui-system.esm-c70df670.js"),require("../../chakra-ui-icon.esm-9c49b31b.js"),require("../../chakra-ui-hooks.esm-21b313f3.js"),require("../../use-animation-state-5054a9f7.esm-c89cafc4.js"),require("../../chakra-ui-visually-hidden.esm-b758df74.js");var i=o(e);exports.RadioButtonGroup=({label:e,options:o,selected:u,isDisabled:s,onChange:l})=>i.default.createElement(t.FormControl,{w:"100%"},i.default.createElement(t.FormLabel,{fontWeight:"bold"},e),i.default.createElement(a.ButtonGroup,{spacing:0,w:"100%"},o.map(((e,a)=>i.default.createElement(r.Button,{isDisabled:s,width:"100%",key:e.label,onClick:()=>l(e.value),borderRightRadius:a===o.length-1?4:0,borderLeftRadius:0===a?4:0,borderWidth:1,borderColor:u===e.value?"primary.500":"border.default",backgroundColor:u===e.value?"primary.100":"background.default",color:"neutral.900",_hover:{bg:"primary.200"},_active:{bg:"primary.300"}},e.label)))));
+//# sourceMappingURL=index.js.map

package/build/components/RadioButtonGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/RadioButtonGroup/radioButtonGroup.component.tsx"],"sourcesContent":["import React from 'react';\nimport { ButtonGroup, FormControl, FormLabel } from 'chakra';\nimport { Button } from 'components/Button/button.component';\n\ninterface Option<T> {\n  label: string;\n  value: T;\n}\n\nexport interface RadioButtonGroupProps<T> {\n  label: string;\n  options: Option<T>[];\n  selected: T;\n  isDisabled?: boolean;\n  onChange: (value: T) => void;\n}\n\nexport const RadioButtonGroup = <T,>({\n  label,\n  options,\n  selected,\n  isDisabled,\n  onChange,\n}: RadioButtonGroupProps<T>): JSX.Element => {\n  return (\n    <FormControl w=\"100%\">\n      <FormLabel fontWeight=\"bold\">\n        {label}\n      </FormLabel>\n      <ButtonGroup spacing={0} w=\"100%\">\n        {options.map((option, index) => (\n          <Button\n            isDisabled={isDisabled}\n            width=\"100%\"\n            key={option.label}\n            onClick={(): void => onChange(option.value)}\n            borderRightRadius={index === options.length - 1 ? 4 : 0}\n            borderLeftRadius={index === 0 ? 4 : 0}\n            borderWidth={1}\n            borderColor={selected === option.value ? 'primary.500' : 'border.default'}\n            backgroundColor={selected === option.value ? 'primary.100' : 'background.default'}\n            color=\"neutral.900\"\n            _hover={{ bg: 'primary.200' }}\n            _active={{ bg: 'primary.300' }}\n          >\n            {option.label}\n          </Button>\n        ))}\n      </ButtonGroup>\n    </FormControl>\n  );\n};\n"],"names":["label","options","selected","isDisabled","onChange","React","createElement","FormControl","w","FormLabel","fontWeight","ButtonGroup","spacing","map","option","index","Button","width","key","onClick","value","borderRightRadius","length","borderLeftRadius","borderWidth","borderColor","backgroundColor","color","_hover","bg","_active"],"mappings":"sxBAiBgC,EAC9BA,MAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,SAAAA,KAGEC,EAAC,QAAAC,cAAAC,EAAWA,YAAC,CAAAC,EAAE,QACbH,EAAA,QAAAC,cAACG,EAASA,UAAC,CAAAC,WAAW,QACnBV,GAEHK,EAAA,QAAAC,cAACK,EAAWA,YAAA,CAACC,QAAS,EAAGJ,EAAE,QACxBP,EAAQY,KAAI,CAACC,EAAQC,IACpBV,EAAAA,QAAAC,cAACU,EAAAA,OACC,CAAAb,WAAYA,EACZc,MAAM,OACNC,IAAKJ,EAAOd,MACZmB,QAAS,IAAYf,EAASU,EAAOM,OACrCC,kBAAmBN,IAAUd,EAAQqB,OAAS,EAAI,EAAI,EACtDC,iBAA4B,IAAVR,EAAc,EAAI,EACpCS,YAAa,EACbC,YAAavB,IAAaY,EAAOM,MAAQ,cAAgB,iBACzDM,gBAAiBxB,IAAaY,EAAOM,MAAQ,cAAgB,qBAC7DO,MAAM,cACNC,OAAQ,CAAEC,GAAI,eACdC,QAAS,CAAED,GAAI,gBAEdf,EAAOd"}

package/build/components/RadioButtonGroup/radioButtonGroup.argTypes.d.ts

@@ -0,0 +1,3 @@
+import { KibbleArgTypes } from '../../shared/types/storybook';
+import { RadioButtonGroupProps } from './radioButtonGroup.component';
+export declare const RadioButtonGroupArgTypes: KibbleArgTypes<RadioButtonGroupProps<String>>;

package/build/components/RadioButtonGroup/radioButtonGroup.component.d.ts

@@ -0,0 +1,13 @@
+interface Option<T> {
+    label: string;
+    value: T;
+}
+export interface RadioButtonGroupProps<T> {
+    label: string;
+    options: Option<T>[];
+    selected: T;
+    isDisabled?: boolean;
+    onChange: (value: T) => void;
+}
+export declare const RadioButtonGroup: <T>({ label, options, selected, isDisabled, onChange, }: RadioButtonGroupProps<T>) => JSX.Element;
+export {};

package/build/components/RadioButtonGroup/radioButtonGroup.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { RadioButtonGroupProps } from './radioButtonGroup.component';
+declare const _default: {
+    title: string;
+    component: <T>({ label, options, selected, isDisabled, onChange, }: RadioButtonGroupProps<T>) => JSX.Element;
+    argTypes: import("../../shared/types/storybook").KibbleArgTypes<RadioButtonGroupProps<String>>;
+};
+export default _default;
+export declare const RadioButtonGroupPlayground: {
+    (args: RadioButtonGroupProps<string>): JSX.Element;
+    args: RadioButtonGroupProps<string>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@televet/kibble-ui",
-  "version": "2.1.37",
+  "version": "2.1.38",
   "description": "Kibble Design System by Otto",
   "author": "Otto",
   "main": "build/index.js",