@bikdotai/bik-component-library 0.0.246 → 0.0.247

package/dist/cjs/components/buttonGroup/ButtonGroup.d.ts

@@ -15,5 +15,8 @@ export interface ButtonGroupProps {
     activeButtonId?: string;
     buttonGroup: Array<ButtonGroupInterface>;
     size: 'small' | 'medium' | 'large';
+    matchParentWidth?: boolean;
+    borderRadius?: string;
+    buttonStyle?: React.CSSProperties;
 }
 export declare const ButtonGroup: React.FC<ButtonGroupProps>;

package/dist/cjs/components/buttonGroup/ButtonGroup.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime"),t=require("react"),e=require("../TypographyStyle.js"),n=require("../../constants/Theme.js"),o=require("./ButtonGroupStyle.js");exports.ButtonGroup=s=>{const[r,c]=t.useState(void 0);t.useEffect((()=>{c((null==s?void 0:s.activeButtonId)||void 0)}),[null==s?void 0:s.activeButtonId]);return i.jsx(o.ButtonGroupStyle,Object.assign({className:"button-group",width:s.width||"100%",gap:null==s?void 0:s.gap,size:null==s?void 0:s.size},{children:s.buttonGroup.map((t=>{const u=null==t?void 0:t.icon;return i.jsxs(o.Button,Object.assign({className:"button",isActive:r===t.id,onClick:()=>(i=>{c(i.id),s.onButtonClick(i.id)})(t),iconPosition:null==s?void 0:s.iconPosition,size:null==s?void 0:s.size},{children:[(null==s?void 0:s.iconPosition)&&u&&i.jsx("div",Object.assign({className:"button__image"},{children:i.jsx(u,{color:r===t.id?n.COLORS.background.inverseLight:n.COLORS.content.secondary,width:(null==s?void 0:s.iconWidth)||"18px",height:(null==s?void 0:s.iconHeight)||"18px"})})),i.jsx("div",Object.assign({className:"button__name"},{children:i.jsx(e.BodySecondary,Object.assign({style:{color:r===t.id?n.COLORS.background.inverseLight:n.COLORS.content.secondary}},{children:t.title}))}))]}),t.id)}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),i=require("react"),e=require("../TypographyStyle.js"),n=require("../../constants/Theme.js"),o=require("./ButtonGroupStyle.js");exports.ButtonGroup=s=>{const[r,d]=i.useState(void 0);i.useEffect((()=>{d((null==s?void 0:s.activeButtonId)||void 0)}),[null==s?void 0:s.activeButtonId]);return t.jsx(o.ButtonGroupStyle,Object.assign({className:"button-group",width:s.width||"100%",gap:null==s?void 0:s.gap,size:null==s?void 0:s.size},{children:s.buttonGroup.map((i=>{var u,l;const c=null==i?void 0:i.icon;return t.jsxs(o.Button,Object.assign({style:s.buttonStyle,borderRadius:null!==(u=s.borderRadius)&&void 0!==u?u:"4px",matchParentWidth:null===(l=s.matchParentWidth)||void 0===l||l,className:"button",isActive:r===i.id,onClick:()=>(t=>{d(t.id),s.onButtonClick(t.id)})(i),iconPosition:null==s?void 0:s.iconPosition,size:null==s?void 0:s.size},{children:[(null==s?void 0:s.iconPosition)&&c&&t.jsx("div",Object.assign({className:"button__image"},{children:t.jsx(c,{color:r===i.id?n.COLORS.background.inverseLight:n.COLORS.content.secondary,width:(null==s?void 0:s.iconWidth)||"18px",height:(null==s?void 0:s.iconHeight)||"18px"})})),t.jsx("div",Object.assign({className:"button__name"},{children:t.jsx(e.BodySecondary,Object.assign({style:{color:r===i.id?n.COLORS.background.inverseLight:n.COLORS.content.secondary}},{children:i.title}))}))]}),i.id)}))}))};

package/dist/cjs/components/buttonGroup/ButtonGroupStyle.d.ts

@@ -5,6 +5,8 @@ export declare const ButtonGroupStyle: import("styled-components").StyledCompone
 }, never>;
 export declare const Button: import("styled-components").StyledComponent<"div", any, {
     isActive: boolean;
+    matchParentWidth: boolean;
+    borderRadius: string;
     iconPosition?: "left" | "right" | "top" | undefined;
     size: 'small' | 'medium' | 'large';
 }, never>;

package/dist/cjs/components/buttonGroup/ButtonGroupStyle.js

@@ -7,12 +7,12 @@
 `,s=o.default.div`
 	display: flex;
 	flex-direction: ${e=>(null==e?void 0:e.iconPosition)&&"top"!==e.iconPosition?"left"===e.iconPosition?"row":"row-reverse":"column"};
-	flex: 1;
+	flex: ${e=>(null==e?void 0:e.matchParentWidth)?1:"unset"};
 	height: 100%;
 	background: ${e=>(null==e?void 0:e.isActive)?i.COLORS.background.brandLight:i.COLORS.surface.subdued};
 	border: 1px solid
 		${e=>(null==e?void 0:e.isActive)?i.COLORS.background.inverseLight:i.COLORS.stroke.primary};
-	border-radius: 4px;
+	border-radius: ${e=>null==e?void 0:e.borderRadius};
 	align-items: center;
 	justify-content: center;
 	padding: ${e=>(null==e?void 0:e.size)?n[e.size]:"8px 10px"};

package/dist/esm/components/buttonGroup/ButtonGroup.d.ts

@@ -15,5 +15,8 @@ export interface ButtonGroupProps {
     activeButtonId?: string;
     buttonGroup: Array<ButtonGroupInterface>;
     size: 'small' | 'medium' | 'large';
+    matchParentWidth?: boolean;
+    borderRadius?: string;
+    buttonStyle?: React.CSSProperties;
 }
 export declare const ButtonGroup: React.FC<ButtonGroupProps>;

package/dist/esm/components/buttonGroup/ButtonGroup.js

@@ -1 +1 @@
-import{jsx as i,jsxs as o}from"react/jsx-runtime";import{useState as t,useEffect as n}from"react";import{BodySecondary as e}from"../TypographyStyle.js";import{COLORS as s}from"../../constants/Theme.js";import{ButtonGroupStyle as c,Button as l}from"./ButtonGroupStyle.js";const d=d=>{const[r,a]=t(void 0);n((()=>{a((null==d?void 0:d.activeButtonId)||void 0)}),[null==d?void 0:d.activeButtonId]);return i(c,Object.assign({className:"button-group",width:d.width||"100%",gap:null==d?void 0:d.gap,size:null==d?void 0:d.size},{children:d.buttonGroup.map((t=>{const n=null==t?void 0:t.icon;return o(l,Object.assign({className:"button",isActive:r===t.id,onClick:()=>(i=>{a(i.id),d.onButtonClick(i.id)})(t),iconPosition:null==d?void 0:d.iconPosition,size:null==d?void 0:d.size},{children:[(null==d?void 0:d.iconPosition)&&n&&i("div",Object.assign({className:"button__image"},{children:i(n,{color:r===t.id?s.background.inverseLight:s.content.secondary,width:(null==d?void 0:d.iconWidth)||"18px",height:(null==d?void 0:d.iconHeight)||"18px"})})),i("div",Object.assign({className:"button__name"},{children:i(e,Object.assign({style:{color:r===t.id?s.background.inverseLight:s.content.secondary}},{children:t.title}))}))]}),t.id)}))}))};export{d as ButtonGroup};
+import{jsx as i,jsxs as t}from"react/jsx-runtime";import{useState as o,useEffect as n}from"react";import{BodySecondary as e}from"../TypographyStyle.js";import{COLORS as d}from"../../constants/Theme.js";import{ButtonGroupStyle as l,Button as s}from"./ButtonGroupStyle.js";const r=r=>{const[c,a]=o(void 0);n((()=>{a((null==r?void 0:r.activeButtonId)||void 0)}),[null==r?void 0:r.activeButtonId]);return i(l,Object.assign({className:"button-group",width:r.width||"100%",gap:null==r?void 0:r.gap,size:null==r?void 0:r.size},{children:r.buttonGroup.map((o=>{var n,l;const u=null==o?void 0:o.icon;return t(s,Object.assign({style:r.buttonStyle,borderRadius:null!==(n=r.borderRadius)&&void 0!==n?n:"4px",matchParentWidth:null===(l=r.matchParentWidth)||void 0===l||l,className:"button",isActive:c===o.id,onClick:()=>(i=>{a(i.id),r.onButtonClick(i.id)})(o),iconPosition:null==r?void 0:r.iconPosition,size:null==r?void 0:r.size},{children:[(null==r?void 0:r.iconPosition)&&u&&i("div",Object.assign({className:"button__image"},{children:i(u,{color:c===o.id?d.background.inverseLight:d.content.secondary,width:(null==r?void 0:r.iconWidth)||"18px",height:(null==r?void 0:r.iconHeight)||"18px"})})),i("div",Object.assign({className:"button__name"},{children:i(e,Object.assign({style:{color:c===o.id?d.background.inverseLight:d.content.secondary}},{children:o.title}))}))]}),o.id)}))}))};export{r as ButtonGroup};

package/dist/esm/components/buttonGroup/ButtonGroupStyle.d.ts

@@ -5,6 +5,8 @@ export declare const ButtonGroupStyle: import("styled-components").StyledCompone
 }, never>;
 export declare const Button: import("styled-components").StyledComponent<"div", any, {
     isActive: boolean;
+    matchParentWidth: boolean;
+    borderRadius: string;
     iconPosition?: "left" | "right" | "top" | undefined;
     size: 'small' | 'medium' | 'large';
 }, never>;

package/dist/esm/components/buttonGroup/ButtonGroupStyle.js

@@ -7,12 +7,12 @@ import i from"styled-components";import{COLORS as e}from"../../constants/Theme.j
 `,l=i.div`
 	display: flex;
 	flex-direction: ${i=>(null==i?void 0:i.iconPosition)&&"top"!==i.iconPosition?"left"===i.iconPosition?"row":"row-reverse":"column"};
-	flex: 1;
+	flex: ${i=>(null==i?void 0:i.matchParentWidth)?1:"unset"};
 	height: 100%;
 	background: ${i=>(null==i?void 0:i.isActive)?e.background.brandLight:e.surface.subdued};
 	border: 1px solid
 		${i=>(null==i?void 0:i.isActive)?e.background.inverseLight:e.stroke.primary};
-	border-radius: 4px;
+	border-radius: ${i=>null==i?void 0:i.borderRadius};
 	align-items: center;
 	justify-content: center;
 	padding: ${i=>(null==i?void 0:i.size)?o[i.size]:"8px 10px"};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.246",
+	"version": "0.0.247",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",