@bikdotai/bik-component-library 0.0.476-beta.1 → 0.0.476-beta.2

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/cjs/components/card-selector/CardSelector.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 export type CardSelectorProps = {
     id: number;
     icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    title: string;
-    subtitle: string;
+    title?: string;
+    subtitle?: string;
     selected: boolean;
     loading?: boolean;
     disabled?: boolean;

package/dist/cjs/components/card-selector/CardSelector.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("../../constants/Theme.js"),t=require("../spinner/Spinner.js"),i=require("../TypographyStyle.js"),r=require("./CardSelector.styled.js");exports.CardSelector=l=>{var d,s;return e.jsx(e.Fragment,{children:e.jsx(r.Container,Object.assign({selected:l.selected,disabled:null!==(d=l.disabled)&&void 0!==d&&d,loading:null!==(s=l.loading)&&void 0!==s&&s,onClick:()=>{l.disabled||l.loading||l.onCardClick(l.id)}},{children:l.loading?e.jsx(r.Loader,{children:e.jsx(t.Spinner,{size:"large"})}):e.jsxs(e.Fragment,{children:[(null==l?void 0:l.icon)&&e.jsx(l.icon,{width:24,color:l.selected?n.COLORS.content.brand:l.disabled?n.COLORS.content.inactive:n.COLORS.content.placeholder}),e.jsxs("div",{children:[e.jsx(i.TitleSmall,Object.assign({style:{color:l.selected?n.COLORS.content.brand:l.disabled?n.COLORS.content.inactive:n.COLORS.content.secondary}},{children:l.title})),e.jsx(i.BodyCaption,Object.assign({style:{color:l.selected?n.COLORS.content.brand:l.disabled?n.COLORS.content.inactive:n.COLORS.content.secondary}},{children:l.subtitle}))]})]})}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),n=require("../spinner/Spinner.js"),i=require("../TypographyStyle.js"),l=require("./CardSelector.styled.js");exports.CardSelector=s=>{var r,d;return e.jsx(e.Fragment,{children:e.jsx(l.Container,Object.assign({style:{alignItems:s.title&&s.subtitle?"flex-start":"center"},selected:s.selected,disabled:null!==(r=s.disabled)&&void 0!==r&&r,loading:null!==(d=s.loading)&&void 0!==d&&d,onClick:()=>{s.disabled||s.loading||s.onCardClick(s.id)}},{children:s.loading?e.jsx(l.Loader,{children:e.jsx(n.Spinner,{size:"large"})}):e.jsxs(e.Fragment,{children:[(null==s?void 0:s.icon)&&e.jsx("div",Object.assign({style:{width:24,height:24}},{children:e.jsx(s.icon,{width:24,color:s.selected?t.COLORS.content.brand:s.disabled?t.COLORS.content.inactive:t.COLORS.content.placeholder})})),e.jsxs("div",{children:[s.title&&e.jsx(i.TitleSmall,Object.assign({style:{color:s.selected?t.COLORS.content.brand:s.disabled?t.COLORS.content.inactive:t.COLORS.content.secondary}},{children:s.title})),s.subtitle&&e.jsx(i.BodyCaption,Object.assign({style:{marginTop:s.title?4:0,color:s.selected?t.COLORS.content.brand:s.disabled?t.COLORS.content.inactive:t.COLORS.content.secondary}},{children:s.subtitle}))]})]})}))})};

package/dist/cjs/components/card-selector/CardSelector.styled.js

@@ -1,17 +1,18 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=d(e);const o=t.default.div`
-	align-items: center;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(e);const o=d.default.div`
+	width: 100%;
 	display: flex;
 	padding: 16px;
 	border-radius: 4px;
 	gap: 12px;
+	justify-content: ${e=>e.loading?"center":"flex-start"};
 	cursor: ${e=>e.disabled||e.loading?"not-allowed":"pointer"};
-	background-color: ${e=>e.selected?r.COLORS.background.brandLight:r.COLORS.surface.subdued};
+	background-color: ${e=>e.selected?t.COLORS.background.brandLight:t.COLORS.surface.subdued};
 	border: 1px solid
-		${e=>e.selected?r.COLORS.content.brand:e.disabled?r.COLORS.stroke.primary:r.COLORS.content.inactive};
+		${e=>e.selected?t.COLORS.content.brand:e.disabled?t.COLORS.stroke.primary:t.COLORS.content.inactive};
 	:hover {
-		background-color: ${e=>e.selected?r.COLORS.background.brandLight:e.disabled||e.loading?r.COLORS.surface.subdued:r.COLORS.surface.hovered};
+		background-color: ${e=>e.selected?t.COLORS.background.brandLight:e.disabled||e.loading?t.COLORS.surface.subdued:t.COLORS.surface.hovered};
 	}
-`,n=t.default.div`
+`,n=d.default.div`
 	display: flex;
 	justify-content: center;
 	align-items: center;

package/dist/cjs/components/card-selector/CardSelectorGroup.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("./CardSelector.js");exports.CardSelectorGroup=l=>e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"vertical"===l.align?"column":"row",gap:l.gap||16}},{children:l.cards.map((r=>e.jsx(i.CardSelector,{id:r.id,icon:r.icon,title:r.title,subtitle:r.subtitle,selected:r.selected,onCardClick:l.onClick,loading:r.loading,disabled:r.disabled},r.id)))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("./CardSelector.js");exports.CardSelectorGroup=l=>e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"vertical"===l.align?"column":"row",gap:l.gap||16}},{children:l.cards.map((t=>e.jsx("div",Object.assign({style:{display:"flex",flex:1}},{children:e.jsx(i.CardSelector,{id:t.id,icon:t.icon,title:t.title,subtitle:t.subtitle,selected:t.selected,onCardClick:l.onClick,loading:t.loading,disabled:t.disabled})}),t.id)))}));

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/card-selector/CardSelector.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 export type CardSelectorProps = {
     id: number;
     icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    title: string;
-    subtitle: string;
+    title?: string;
+    subtitle?: string;
     selected: boolean;
     loading?: boolean;
     disabled?: boolean;

package/dist/esm/components/card-selector/CardSelector.js

@@ -1 +1 @@
-import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{COLORS as i}from"../../constants/Theme.js";import{Spinner as o}from"../spinner/Spinner.js";import{TitleSmall as d,BodyCaption as l}from"../TypographyStyle.js";import{Container as c,Loader as r}from"./CardSelector.styled.js";const s=s=>{var a,b;return e(n,{children:e(c,Object.assign({selected:s.selected,disabled:null!==(a=s.disabled)&&void 0!==a&&a,loading:null!==(b=s.loading)&&void 0!==b&&b,onClick:()=>{s.disabled||s.loading||s.onCardClick(s.id)}},{children:s.loading?e(r,{children:e(o,{size:"large"})}):t(n,{children:[(null==s?void 0:s.icon)&&e(s.icon,{width:24,color:s.selected?i.content.brand:s.disabled?i.content.inactive:i.content.placeholder}),t("div",{children:[e(d,Object.assign({style:{color:s.selected?i.content.brand:s.disabled?i.content.inactive:i.content.secondary}},{children:s.title})),e(l,Object.assign({style:{color:s.selected?i.content.brand:s.disabled?i.content.inactive:i.content.secondary}},{children:s.subtitle}))]})]})}))})};export{s as CardSelector};
+import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{COLORS as i}from"../../constants/Theme.js";import{Spinner as l}from"../spinner/Spinner.js";import{TitleSmall as d,BodyCaption as o}from"../TypographyStyle.js";import{Container as c,Loader as r}from"./CardSelector.styled.js";const s=s=>{var a,b;return e(t,{children:e(c,Object.assign({style:{alignItems:s.title&&s.subtitle?"flex-start":"center"},selected:s.selected,disabled:null!==(a=s.disabled)&&void 0!==a&&a,loading:null!==(b=s.loading)&&void 0!==b&&b,onClick:()=>{s.disabled||s.loading||s.onCardClick(s.id)}},{children:s.loading?e(r,{children:e(l,{size:"large"})}):n(t,{children:[(null==s?void 0:s.icon)&&e("div",Object.assign({style:{width:24,height:24}},{children:e(s.icon,{width:24,color:s.selected?i.content.brand:s.disabled?i.content.inactive:i.content.placeholder})})),n("div",{children:[s.title&&e(d,Object.assign({style:{color:s.selected?i.content.brand:s.disabled?i.content.inactive:i.content.secondary}},{children:s.title})),s.subtitle&&e(o,Object.assign({style:{marginTop:s.title?4:0,color:s.selected?i.content.brand:s.disabled?i.content.inactive:i.content.secondary}},{children:s.subtitle}))]})]})}))})};export{s as CardSelector};

package/dist/esm/components/card-selector/CardSelector.styled.js

@@ -1,9 +1,10 @@
-import e from"styled-components";import{COLORS as d}from"../../constants/Theme.js";const r=e.div`
-	align-items: center;
+import e from"styled-components";import{COLORS as d}from"../../constants/Theme.js";const o=e.div`
+	width: 100%;
 	display: flex;
 	padding: 16px;
 	border-radius: 4px;
 	gap: 12px;
+	justify-content: ${e=>e.loading?"center":"flex-start"};
 	cursor: ${e=>e.disabled||e.loading?"not-allowed":"pointer"};
 	background-color: ${e=>e.selected?d.background.brandLight:d.surface.subdued};
 	border: 1px solid
@@ -11,8 +12,8 @@ import e from"styled-components";import{COLORS as d}from"../../constants/Theme.j
 	:hover {
 		background-color: ${e=>e.selected?d.background.brandLight:e.disabled||e.loading?d.surface.subdued:d.surface.hovered};
 	}
-`,o=e.div`
+`,r=e.div`
 	display: flex;
 	justify-content: center;
 	align-items: center;
-`;export{r as Container,o as Loader};
+`;export{o as Container,r as Loader};

package/dist/esm/components/card-selector/CardSelectorGroup.js

@@ -1 +1 @@
-import{jsx as i}from"react/jsx-runtime";import{CardSelector as e}from"./CardSelector.js";const l=l=>i("div",Object.assign({style:{display:"flex",flexDirection:"vertical"===l.align?"column":"row",gap:l.gap||16}},{children:l.cards.map((t=>i(e,{id:t.id,icon:t.icon,title:t.title,subtitle:t.subtitle,selected:t.selected,onCardClick:l.onClick,loading:t.loading,disabled:t.disabled},t.id)))}));export{l as CardSelectorGroup};
+import{jsx as i}from"react/jsx-runtime";import{CardSelector as e}from"./CardSelector.js";const l=l=>i("div",Object.assign({style:{display:"flex",flexDirection:"vertical"===l.align?"column":"row",gap:l.gap||16}},{children:l.cards.map((t=>i("div",Object.assign({style:{display:"flex",flex:1}},{children:i(e,{id:t.id,icon:t.icon,title:t.title,subtitle:t.subtitle,selected:t.selected,onCardClick:l.onClick,loading:t.loading,disabled:t.disabled})}),t.id)))}));export{l as CardSelectorGroup};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.476-beta.1",
+	"version": "0.0.476-beta.2",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",