@bikdotai/bik-component-library 1.1.1-beta.12 → 1.1.1-beta.13

package/dist/cjs/components/TablePagination/TablePagination.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DropdownOption } from "../dropdown/type";
+export type TablePaginationProps = {
+    pageSize: 5 | 10 | 20;
+    pageNumber: number;
+    totalRows: number;
+    updatePageNumber: (pageNumber: number) => void;
+    updatePageSize: (option: DropdownOption | DropdownOption[]) => void;
+};
+export declare const TablePagination: React.FC<TablePaginationProps>;

package/dist/cjs/components/TablePagination/TablePagination.styled.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledTablePaginationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPagingContainer: import("styled-components").StyledComponent<"div", any, {
+    active: boolean;
+    isLast?: boolean | undefined;
+}, never>;

package/dist/cjs/components/TablePagination/index.d.ts

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

package/dist/cjs/components/dropdown/Dropdown.d.ts

@@ -5,5 +5,6 @@ export type DropdownProps = OpenDropdownProps & {
     size?: 'default' | 'small';
     disabled?: boolean;
     noErrorHint?: boolean;
+    buttonWidth?: string;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

package/dist/cjs/components/dropdown/Dropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("../../constants/Theme.js"),o=require("../../assets/icons/chevronDown.svg.js"),i=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./DropdownPopover/index.js");function a(){}const u=u=>{var d,c,{placeHolder:p,size:v,onSelect:h,defaultOptions:j,disabled:f,noErrorHint:g}=u,x=e.__rest(u,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const b=null!=v?v:"default",w=t.useRef(),[m,O]=t.useState(null!=j?j:[]);t.useEffect((()=>{var e;const r=[];null===(e=null==x?void 0:x.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&r.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&r.push(e)})),O([...r])}),[x.options]),t.useEffect((()=>{j&&O([...j])}),[j]);const q=m.length?m.map((e=>e.label)).join(", "):void 0;return r.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{height:"small"===b?32:48,width:null!==(d=x.width)&&void 0!==d?d:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:r.jsx(s.DropdownPopover,Object.assign({ref:w,onSelect:function(e){Array.isArray(e)?O([...e]):O([e]),null==h||h(e)},disabled:f},x,{children:r.jsx(i.Input,{noErrorHint:g,state:f?"disabled":"none",value:null!=q?q:"",errorMessage:x.error,variant:b,placeholder:null!=p?p:"Select an option",width:null!==(c=x.width)&&void 0!==c?c:"100%",onChangeText:a,rightIcon:{icon:()=>{var e;return r.jsx(o.default,{style:{transform:(null===(e=null==w?void 0:w.current)||void 0===e?void 0:e.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===b?20:24,height:"small"===b?20:24,color:n.COLORS.content.primary})}}})}))}))};u.displayName="Dropdown",exports.Dropdown=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),n=require("../../constants/Theme.js"),o=require("../../assets/icons/chevronDown.svg.js"),i=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./DropdownPopover/index.js");function a(){}const u=u=>{var d,c,p,{placeHolder:v,size:h,onSelect:j,defaultOptions:f,disabled:g,noErrorHint:b}=u,x=e.__rest(u,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const w=null!=h?h:"default",m=r.useRef(),[O,q]=r.useState(null!=f?f:[]);r.useEffect((()=>{var e;const t=[];null===(e=null==x?void 0:x.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),q([...t])}),[x.options]),r.useEffect((()=>{f&&q([...f])}),[f]);const y=O.length?O.map((e=>e.label)).join(", "):void 0;return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{height:"small"===w?32:48,width:null!==(c=null!==(d=x.buttonWidth)&&void 0!==d?d:x.width)&&void 0!==c?c:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:t.jsx(s.DropdownPopover,Object.assign({ref:m,onSelect:function(e){Array.isArray(e)?q([...e]):q([e]),null==j||j(e)},disabled:g},x,{children:t.jsx(i.Input,{noErrorHint:b,state:g?"disabled":"none",value:null!=y?y:"",errorMessage:x.error,variant:w,placeholder:null!=v?v:"Select an option",width:null!==(p=x.width)&&void 0!==p?p:"100%",onChangeText:a,rightIcon:{icon:()=>{var e;return t.jsx(o.default,{style:{transform:(null===(e=null==m?void 0:m.current)||void 0===e?void 0:e.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===w?20:24,height:"small"===w?20:24,color:n.COLORS.content.primary})}}})}))}))};u.displayName="Dropdown",exports.Dropdown=u;

package/dist/cjs/components/tag/Tag.styled.js

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./themes.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=r(e).default.div`
 	cursor: default;
-	${e=>"regular"===e.variant?"display: block;":""}
-	${e=>"circle"===e.variant&&"height: 20px;"}
+	${e=>"regular"===e.variant?"display: block;\n\t\t     height: 26px;\n\t\t":"height: 20px;"}
 	.container {
 		display: flex;
+		align-items: center;
 		gap: 6px;
 		padding: ${e=>t.getPadding(e.variant)};
 

package/dist/esm/components/TablePagination/TablePagination.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DropdownOption } from "../dropdown/type";
+export type TablePaginationProps = {
+    pageSize: 5 | 10 | 20;
+    pageNumber: number;
+    totalRows: number;
+    updatePageNumber: (pageNumber: number) => void;
+    updatePageSize: (option: DropdownOption | DropdownOption[]) => void;
+};
+export declare const TablePagination: React.FC<TablePaginationProps>;

package/dist/esm/components/TablePagination/TablePagination.styled.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledTablePaginationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPagingContainer: import("styled-components").StyledComponent<"div", any, {
+    active: boolean;
+    isLast?: boolean | undefined;
+}, never>;

package/dist/esm/components/TablePagination/index.d.ts

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

package/dist/esm/components/dropdown/Dropdown.d.ts

@@ -5,5 +5,6 @@ export type DropdownProps = OpenDropdownProps & {
     size?: 'default' | 'small';
     disabled?: boolean;
     noErrorHint?: boolean;
+    buttonWidth?: string;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

package/dist/esm/components/dropdown/Dropdown.js

@@ -1 +1 @@
-import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useRef as t,useState as n,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,m,{placeHolder:h,size:v,onSelect:f,defaultOptions:g,disabled:b,noErrorHint:j}=c,w=o(c,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const x=null!=v?v:"default",y=t(),[H,O]=n(null!=g?g:[]);r((()=>{var o;const e=[];null===(o=null==w?void 0:w.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&e.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&e.push(o)})),O([...e])}),[w.options]),r((()=>{g&&O([...g])}),[g]);const E=H.length?H.map((o=>o.label)).join(", "):void 0;return e(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===x?32:48,width:null!==(u=w.width)&&void 0!==u?u:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:e(d,Object.assign({ref:y,onSelect:function(o){Array.isArray(o)?O([...o]):O([o]),null==f||f(o)},disabled:b},w,{children:e(s,{noErrorHint:j,state:b?"disabled":"none",value:null!=E?E:"",errorMessage:w.error,variant:x,placeholder:null!=h?h:"Select an option",width:null!==(m=w.width)&&void 0!==m?m:"100%",onChangeText:p,rightIcon:{icon:()=>{var o;return e(l,{style:{transform:(null===(o=null==y?void 0:y.current)||void 0===o?void 0:o.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===x?20:24,height:"small"===x?20:24,color:i.content.primary})}}})}))}))};c.displayName="Dropdown";export{c as Dropdown};
+import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useRef as n,useState as e,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,m,h,{placeHolder:v,size:f,onSelect:g,defaultOptions:b,disabled:j,noErrorHint:w}=c,x=o(c,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const y=null!=f?f:"default",H=n(),[O,E]=e(null!=b?b:[]);r((()=>{var o;const t=[];null===(o=null==x?void 0:x.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&t.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&t.push(o)})),E([...t])}),[x.options]),r((()=>{b&&E([...b])}),[b]);const I=O.length?O.map((o=>o.label)).join(", "):void 0;return t(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===y?32:48,width:null!==(m=null!==(u=x.buttonWidth)&&void 0!==u?u:x.width)&&void 0!==m?m:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:t(d,Object.assign({ref:H,onSelect:function(o){Array.isArray(o)?E([...o]):E([o]),null==g||g(o)},disabled:j},x,{children:t(s,{noErrorHint:w,state:j?"disabled":"none",value:null!=I?I:"",errorMessage:x.error,variant:y,placeholder:null!=v?v:"Select an option",width:null!==(h=x.width)&&void 0!==h?h:"100%",onChangeText:p,rightIcon:{icon:()=>{var o;return t(l,{style:{transform:(null===(o=null==H?void 0:H.current)||void 0===o?void 0:o.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===y?20:24,height:"small"===y?20:24,color:i.content.primary})}}})}))}))};c.displayName="Dropdown";export{c as Dropdown};

package/dist/esm/components/tag/Tag.styled.js

@@ -1,20 +1,20 @@
-import e from"styled-components";import{getPadding as r,getBackgroundColor as t,generateBorder as a,getTextColor as i}from"./themes.js";const o=e.div`
+import t from"styled-components";import{getPadding as e,getBackgroundColor as r,generateBorder as i,getTextColor as a}from"./themes.js";const o=t.div`
 	cursor: default;
-	${e=>"regular"===e.variant?"display: block;":""}
-	${e=>"circle"===e.variant&&"height: 20px;"}
+	${t=>"regular"===t.variant?"display: block;\n\t\t     height: 26px;\n\t\t":"height: 20px;"}
 	.container {
 		display: flex;
+		align-items: center;
 		gap: 6px;
-		padding: ${e=>r(e.variant)};
+		padding: ${t=>e(t.variant)};
 
-		background-color: ${e=>t(e.theme,e.type)};
+		background-color: ${t=>r(t.theme,t.type)};
 
-		border-radius: ${e=>"regular"===e.variant?"4px":"12px"};
+		border-radius: ${t=>"regular"===t.variant?"4px":"12px"};
 
-		${e=>"light"===e.theme&&`border: 1px solid ${a(e.type)};`}
+		${t=>"light"===t.theme&&`border: 1px solid ${i(t.type)};`}
 
 		.text {
-			color: ${e=>i(e.theme,e.type)};
+			color: ${t=>a(t.theme,t.type)};
 		}
 
 		.icon-trailing {

package/package.json

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