@bikdotai/bik-component-library 0.0.723 → 0.0.724
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/tag/Tag.d.ts +1 -1
- package/dist/cjs/components/tag/Tag.js +1 -1
- package/dist/cjs/components/tag/Tag.stories.d.ts +5 -5
- package/dist/cjs/components/tag/model.d.ts +1 -0
- package/dist/esm/components/tag/Tag.d.ts +1 -1
- package/dist/esm/components/tag/Tag.js +1 -1
- package/dist/esm/components/tag/Tag.stories.d.ts +5 -5
- package/dist/esm/components/tag/model.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TagProps } from './model';
|
|
2
2
|
export declare const Tag: {
|
|
3
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),i=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),i=require("react"),n=require("../tooltips/Tooltip.js"),t=require("../TypographyStyle.js"),s=require("./model.js"),r=require("./Tag.styled.js"),a=require("./themes.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=o(i);const l=i=>{let{tagText:o,LeadingIcon:l,TrailingIcon:d,onLeadingIconClicked:g,leadingIconId:j,trailingIconId:p,onTrailingIconClicked:u,theme:x="light",type:m="neutral",variant:b="regular",version:O,cursor:h,alignIcon:y,noBorder:T,tagHtmlText:E,contentPadding:f,leadingIconTooltip:I,trailingIconTooltip:C,tagColor:R,numberOfLines:w}=i,v=o;const N=x;let k=m;s.ValidTagTypeMap[b][m]||(k="neutral"),"circle"===b&&"number"==typeof v&&v>99&&(v="99+");const q={height:"compressed"===b?12:16,width:"compressed"===b?12:16,color:a.getTagIconColor(x,k),style:{display:"block"}};return e.jsxRuntimeExports.jsx(r.Tag,Object.assign({cursor:h,theme:N,type:m,variant:b,version:O,alignIcon:y,noBorder:T,contentPadding:f},{children:e.jsxRuntimeExports.jsxs("div",Object.assign({className:"container"},{children:[l&&(I?e.jsxRuntimeExports.jsx(n.Tooltip,Object.assign({},I,{children:e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:c.default.createElement(l,Object.assign(Object.assign({},q),{id:j||"leading-icon"}))}))})):e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:c.default.createElement(l,Object.assign(Object.assign({},q),{id:j||"leading-icon"}))}))),E&&("ai"===m&&"light"===x?e.jsxRuntimeExports.jsx(t.AiBodyCaption,Object.assign({numberOfLines:w},{children:E})):e.jsxRuntimeExports.jsx(t.BodyCaption,Object.assign({className:"text",numberOfLines:w},{children:E}))),!E&&""!==v&&("ai"===m&&"light"===x?e.jsxRuntimeExports.jsx(t.AiBodyCaption,Object.assign({numberOfLines:w},{children:v})):e.jsxRuntimeExports.jsx(t.BodyCaption,Object.assign({className:"text",color:R,numberOfLines:w},{children:v}))),d&&(C?e.jsxRuntimeExports.jsx(n.Tooltip,Object.assign({},C,{children:e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${p}-wrapper`||"trailing-icon-wrapper"},{children:c.default.createElement(d,Object.assign(Object.assign({},q),{id:p||"trailing-icon"}))}))})):e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${p}-wrapper`||"trailing-icon-wrapper"},{children:c.default.createElement(d,Object.assign(Object.assign({},q),{id:p||"trailing-icon"}))})))]}))}))};l.displayName="Tag",exports.Tag=l;
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
2
2
|
declare const _default: ComponentMeta<{
|
|
3
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
}>;
|
|
6
6
|
export default _default;
|
|
7
7
|
export declare const Default: ComponentStory<{
|
|
8
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
displayName: string;
|
|
10
10
|
}>;
|
|
11
11
|
export declare const WithIcons: ComponentStory<{
|
|
12
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
displayName: string;
|
|
14
14
|
}>;
|
|
15
15
|
export declare const WithIconTooltips: ComponentStory<{
|
|
16
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
displayName: string;
|
|
18
18
|
}>;
|
|
19
19
|
export declare const DarkTheme: ComponentStory<{
|
|
20
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
22
|
}>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TagProps } from './model';
|
|
2
2
|
export declare const Tag: {
|
|
3
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as
|
|
1
|
+
import{j as e}from"../../node_modules/react/jsx-runtime.js";import i from"react";import{Tooltip as n}from"../tooltips/Tooltip.js";import{AiBodyCaption as s,BodyCaption as t}from"../TypographyStyle.js";import{ValidTagTypeMap as a}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:g,TrailingIcon:d,onLeadingIconClicked:m,leadingIconId:j,trailingIconId:p,onTrailingIconClicked:b,theme:O="light",type:h="neutral",variant:u="regular",version:x,cursor:f,alignIcon:I,noBorder:T,tagHtmlText:y,contentPadding:w,leadingIconTooltip:N,trailingIconTooltip:k,tagColor:C,numberOfLines:L}=o,v=l;const E=O;let $=h;a[u][h]||($="neutral"),"circle"===u&&"number"==typeof v&&v>99&&(v="99+");const B={height:"compressed"===u?12:16,width:"compressed"===u?12:16,color:c(O,$),style:{display:"block"}};return e.jsx(r,Object.assign({cursor:f,theme:E,type:h,variant:u,version:x,alignIcon:I,noBorder:T,contentPadding:w},{children:e.jsxs("div",Object.assign({className:"container"},{children:[g&&(N?e.jsx(n,Object.assign({},N,{children:e.jsx("button",Object.assign({className:"icon-leading",onClick:m,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:i.createElement(g,Object.assign(Object.assign({},B),{id:j||"leading-icon"}))}))})):e.jsx("button",Object.assign({className:"icon-leading",onClick:m,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:i.createElement(g,Object.assign(Object.assign({},B),{id:j||"leading-icon"}))}))),y&&("ai"===h&&"light"===O?e.jsx(s,Object.assign({numberOfLines:L},{children:y})):e.jsx(t,Object.assign({className:"text",numberOfLines:L},{children:y}))),!y&&""!==v&&("ai"===h&&"light"===O?e.jsx(s,Object.assign({numberOfLines:L},{children:v})):e.jsx(t,Object.assign({className:"text",color:C,numberOfLines:L},{children:v}))),d&&(k?e.jsx(n,Object.assign({},k,{children:e.jsx("button",Object.assign({className:"icon-trailing",onClick:b,id:`${p}-wrapper`||"trailing-icon-wrapper"},{children:i.createElement(d,Object.assign(Object.assign({},B),{id:p||"trailing-icon"}))}))})):e.jsx("button",Object.assign({className:"icon-trailing",onClick:b,id:`${p}-wrapper`||"trailing-icon-wrapper"},{children:i.createElement(d,Object.assign(Object.assign({},B),{id:p||"trailing-icon"}))})))]}))}))};o.displayName="Tag";export{o as Tag};
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
2
2
|
declare const _default: ComponentMeta<{
|
|
3
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
}>;
|
|
6
6
|
export default _default;
|
|
7
7
|
export declare const Default: ComponentStory<{
|
|
8
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
displayName: string;
|
|
10
10
|
}>;
|
|
11
11
|
export declare const WithIcons: ComponentStory<{
|
|
12
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
displayName: string;
|
|
14
14
|
}>;
|
|
15
15
|
export declare const WithIconTooltips: ComponentStory<{
|
|
16
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
displayName: string;
|
|
18
18
|
}>;
|
|
19
19
|
export declare const DarkTheme: ComponentStory<{
|
|
20
|
-
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
22
|
}>;
|