@bikdotai/bik-component-library 0.0.23-tag.2 → 0.0.23

package/dist/cjs/components/stepper/WorkingStepper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const WorkingStepper: () => JSX.Element;
 export declare enum STEPENUM {
     STEP1 = "STEP1",

package/dist/cjs/components/tag/Tag.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TagProps } from './model';
 export declare const Tag: {
-    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, onTrailingIconClicked, theme, type, variant, }: TagProps): JSX.Element;
+    ({ tagText, LeadingIcon, TrailingIcon, theme, type, variant, }: TagProps): JSX.Element;
     displayName: string;
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../TypographyStyle.js"),r=require("./model.js"),i=require("./Tag.styled.js"),n=require("./themes.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=l(t);const c=t=>{let{tagText:l,LeadingIcon:c,TrailingIcon:o,onLeadingIconClicked:d,onTrailingIconClicked:g,theme:u="light",type:j="neutral",variant:p="regular"}=t,y=l,h=u,m=j;r.ValidTagTypeMap[p][j]||(m="neutral"),"circle"===p&&(h="dark","number"==typeof y&&y>99&&(y="99+"));const b={height:16,width:16,color:n.getTagIconColor(u,m),style:{display:"block"}};return e.jsx(i.Tag,Object.assign({theme:h,type:j,variant:p},{children:e.jsxs("div",Object.assign({className:"container"},{children:[c&&e.jsx("button",Object.assign({className:"icon-leading",onClick:d},{children:s.default.createElement(c,b)})),e.jsx(a.BodyCaption,Object.assign({className:"text"},{children:y})),o&&e.jsx("button",Object.assign({className:"icon-trailing",onClick:g},{children:s.default.createElement(o,b)}))]}))}))};c.displayName="Tag",exports.Tag=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../TypographyStyle.js"),r=require("./model.js"),i=require("./Tag.styled.js"),s=require("./themes.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(t);const c=t=>{let{tagText:n,LeadingIcon:c,TrailingIcon:o,theme:d="light",type:g="neutral",variant:u="regular"}=t,j=n,p=d,y=g;r.ValidTagTypeMap[u][g]||(y="neutral"),"circle"===u&&(p="dark","number"==typeof j&&j>99&&(j="99+"));const h={height:16,width:16,color:s.getTagIconColor(d,y),style:{display:"block"}};return e.jsx(i.Tag,Object.assign({theme:p,type:g,variant:u},{children:e.jsxs("div",Object.assign({className:"container"},{children:[c&&e.jsx("div",Object.assign({className:"icon-trailing"},{children:l.default.createElement(c,h)})),e.jsx(a.BodyCaption,Object.assign({className:"text"},{children:j})),o&&e.jsx("div",Object.assign({className:"icon-leading"},{children:l.default.createElement(o,h)}))]}))}))};c.displayName="Tag",exports.Tag=c;

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

@@ -1,28 +1,26 @@
-"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`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("./themes.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=t(e).default.div`
 	cursor: default;
 	${e=>"regular"===e.variant?"display: block;":""}
 	${e=>"circle"===e.variant&&"height: 20px;"}
 	.container {
 		display: flex;
 		gap: 6px;
-		padding: ${e=>t.getPadding(e.variant)};
+		padding: ${e=>r.getPadding(e.variant)};
 
-		background-color: ${e=>t.getBackgroundColor(e.theme,e.type)};
+		background-color: ${e=>r.getBackgroundColor(e.theme,e.type)};
 
 		border-radius: ${e=>"regular"===e.variant?"4px":"12px"};
 
-		${e=>"light"===e.theme&&`border: 1px solid ${t.generateBorder(e.type)};`}
+		${e=>"light"===e.theme&&`border: 1px solid ${r.generateBorder(e.type)};`}
 
 		.text {
-			color: ${e=>t.getTextColor(e.theme,e.type)};
+			color: ${e=>r.getTextColor(e.theme,e.type)};
 		}
 
 		.icon-trailing {
-			all: unset;
 		}
 
 		.icon-leading {
-			all: unset;
 		}
 	}
 `;exports.Tag=a;

package/dist/cjs/components/tag/model.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { MouseEventHandler } from 'react';
+/// <reference types="react" />
 export type TagTheme = 'light' | 'dark';
 export type TagVariant = 'regular' | 'circle';
 export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey';
@@ -22,7 +21,7 @@ export declare const ValidTagTypeMap: {
         grey: boolean;
     };
 };
-export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
+export interface TagProps {
     /**
      * Set the theme of the Tag
      * @default default light
@@ -39,24 +38,16 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
      */
     variant?: TagVariant;
     /**
-     * The icon component that is the right of the text
+     * The icon component that is the left of the text
      * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
      * @default undefined
      */
     TrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     /**
-     * The left icon on click event, defaults to () => {}
-     */
-    onTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;
-    /**
-     * The icon component that is to the left of the text
+     * The icon component that is to the right of the text
      * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
      * @default undefined
      */
     LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    /**
-     * The right icon on click event, defaults to () => {}
-     */
-    onLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;
     tagText: string | number;
 }

package/dist/esm/components/stepper/WorkingStepper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const WorkingStepper: () => JSX.Element;
 export declare enum STEPENUM {
     STEP1 = "STEP1",

package/dist/esm/components/tag/Tag.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TagProps } from './model';
 export declare const Tag: {
-    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, onTrailingIconClicked, theme, type, variant, }: TagProps): JSX.Element;
+    ({ tagText, LeadingIcon, TrailingIcon, theme, type, variant, }: TagProps): JSX.Element;
     displayName: string;
 };

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import{BodyCaption as a}from"../TypographyStyle.js";import{ValidTagTypeMap as n}from"./model.js";import{Tag as r}from"./Tag.styled.js";import{getTagIconColor as c}from"./themes.js";const o=o=>{let{tagText:l,LeadingIcon:s,TrailingIcon:m,onLeadingIconClicked:g,onTrailingIconClicked:d,theme:p="light",type:h="neutral",variant:j="regular"}=o,y=l,b=p,u=h;n[j][h]||(u="neutral"),"circle"===j&&(b="dark","number"==typeof y&&y>99&&(y="99+"));const f={height:16,width:16,color:c(p,u),style:{display:"block"}};return e(r,Object.assign({theme:b,type:h,variant:j},{children:t("div",Object.assign({className:"container"},{children:[s&&e("button",Object.assign({className:"icon-leading",onClick:g},{children:i.createElement(s,f)})),e(a,Object.assign({className:"text"},{children:y})),m&&e("button",Object.assign({className:"icon-trailing",onClick:d},{children:i.createElement(m,f)}))]}))}))};o.displayName="Tag";export{o as Tag};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import a from"react";import{BodyCaption as r}from"../TypographyStyle.js";import{ValidTagTypeMap as i}from"./model.js";import{Tag as n}from"./Tag.styled.js";import{getTagIconColor as s}from"./themes.js";const c=c=>{let{tagText:l,LeadingIcon:o,TrailingIcon:m,theme:g="light",type:d="neutral",variant:p="regular"}=c,h=l,j=g,y=d;i[p][d]||(y="neutral"),"circle"===p&&(j="dark","number"==typeof h&&h>99&&(h="99+"));const b={height:16,width:16,color:s(g,y),style:{display:"block"}};return e(n,Object.assign({theme:j,type:d,variant:p},{children:t("div",Object.assign({className:"container"},{children:[o&&e("div",Object.assign({className:"icon-trailing"},{children:a.createElement(o,b)})),e(r,Object.assign({className:"text"},{children:h})),m&&e("div",Object.assign({className:"icon-leading"},{children:a.createElement(m,b)}))]}))}))};c.displayName="Tag";export{c as Tag};

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

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

package/dist/esm/components/tag/model.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { MouseEventHandler } from 'react';
+/// <reference types="react" />
 export type TagTheme = 'light' | 'dark';
 export type TagVariant = 'regular' | 'circle';
 export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey';
@@ -22,7 +21,7 @@ export declare const ValidTagTypeMap: {
         grey: boolean;
     };
 };
-export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
+export interface TagProps {
     /**
      * Set the theme of the Tag
      * @default default light
@@ -39,24 +38,16 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
      */
     variant?: TagVariant;
     /**
-     * The icon component that is the right of the text
+     * The icon component that is the left of the text
      * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
      * @default undefined
      */
     TrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     /**
-     * The left icon on click event, defaults to () => {}
-     */
-    onTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;
-    /**
-     * The icon component that is to the left of the text
+     * The icon component that is to the right of the text
      * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
      * @default undefined
      */
     LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    /**
-     * The right icon on click event, defaults to () => {}
-     */
-    onLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;
     tagText: string | number;
 }

package/package.json

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