@pk-design/react-tailwind 1.4.0 → 1.4.1
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/react-tailwind.cjs.js +8 -10
- package/dist/react-tailwind.cjs.js.map +1 -1
- package/dist/react-tailwind.es.js +8 -10
- package/dist/react-tailwind.es.js.map +1 -1
- package/dist/types/components/Banner/Banner.types.d.ts +2 -1
- package/dist/types/components/Table/Table.types.d.ts +1 -1
- package/package.json +1 -1
|
@@ -244,7 +244,7 @@ const TypeClassMap = {
|
|
|
244
244
|
const Alert = (props) => {
|
|
245
245
|
const { type = 'info', className = '', message, children, removable = false, onRemove = () => { }, ...restProps } = props;
|
|
246
246
|
const Icon = AlertTypeIconMap[type] || SvgInfo;
|
|
247
|
-
return (jsxRuntime.jsxs("div", { className: buildClassName(className, 'flex items-center justify-between rounded-md p-3 text-sm ring-1 ring-inset gap-2', TypeClassMap[type]), ...restProps, children: [jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [jsxRuntime.jsx(Icon, { className: "size-5", "data-testid": `alert-${type}-icon` }), jsxRuntime.jsx("span", { className: "pr-2 inline-flex items-center", children: message || children })] }), removable && (jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Dismiss alert", size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/
|
|
247
|
+
return (jsxRuntime.jsxs("div", { className: buildClassName(className, 'flex items-center justify-between rounded-md p-3 text-sm ring-1 ring-inset gap-2', TypeClassMap[type]), ...restProps, children: [jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [jsxRuntime.jsx(Icon, { className: "size-5", "data-testid": `alert-${type}-icon` }), jsxRuntime.jsx("span", { className: "pr-2 inline-flex items-center", children: message || children })] }), removable && (jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Dismiss alert", size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/10 dark:hover:bg-white/10", onClick: () => onRemove(), "data-testid": "alert-remove-btn", children: jsxRuntime.jsx(SvgX, { className: "size-4.5", "data-testid": "alert-remove-icon" }) }))] }));
|
|
248
248
|
};
|
|
249
249
|
Alert.displayName = 'Alert';
|
|
250
250
|
|
|
@@ -257,7 +257,7 @@ const ThemeClassMap = {
|
|
|
257
257
|
};
|
|
258
258
|
const Badge = React.forwardRef((props, ref) => {
|
|
259
259
|
const { theme = 'info', className = '', children, removable = false, rounded = false, onRemove = () => { }, ...restProps } = props;
|
|
260
|
-
return (jsxRuntime.jsxs(TextContent, { ref: ref, className: buildClassName(className, 'inline-flex items-center pl-3 py-1 text-xs font-medium ring-1 ring-inset', ThemeClassMap[theme], rounded ? 'rounded-full' : 'rounded-md'), "data-testid": `badge-${theme}`, ...restProps, children: [jsxRuntime.jsx(TextContent, { className: "pr-3 inline-flex items-center", children: children }), removable ? (jsxRuntime.jsx(SvgX, { className: "size-5 px-0.5 mr-1 hover:bg-
|
|
260
|
+
return (jsxRuntime.jsxs(TextContent, { ref: ref, className: buildClassName(className, 'inline-flex items-center pl-3 py-1 text-xs font-medium ring-1 ring-inset', ThemeClassMap[theme], rounded ? 'rounded-full' : 'rounded-md'), "data-testid": `badge-${theme}`, ...restProps, children: [jsxRuntime.jsx(TextContent, { className: "pr-3 inline-flex items-center", children: children }), removable ? (jsxRuntime.jsx(SvgX, { className: "size-5 px-0.5 mr-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-sm cursor-pointer", role: "button", tabIndex: 0, "aria-label": "Remove", onClick: () => onRemove(), onKeyDown: (e) => {
|
|
261
261
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
262
262
|
e.preventDefault();
|
|
263
263
|
onRemove();
|
|
@@ -309,13 +309,11 @@ var SvgCircleCheck = function SvgCircleCheck(props) {
|
|
|
309
309
|
};
|
|
310
310
|
|
|
311
311
|
const sizeMap = {
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
9: `size-9`,
|
|
318
|
-
10: `size-10`,
|
|
312
|
+
xs: 'size-4',
|
|
313
|
+
sm: 'size-5',
|
|
314
|
+
md: 'size-6',
|
|
315
|
+
lg: 'size-8',
|
|
316
|
+
xl: 'size-10',
|
|
319
317
|
};
|
|
320
318
|
const IconMap = {
|
|
321
319
|
info: SvgInfo,
|
|
@@ -324,7 +322,7 @@ const IconMap = {
|
|
|
324
322
|
warning: SvgTriangleAlert,
|
|
325
323
|
};
|
|
326
324
|
const Banner = React.forwardRef((props, ref) => {
|
|
327
|
-
const { type = 'info', iconSize =
|
|
325
|
+
const { type = 'info', iconSize = 'sm', children, ...restProps } = props;
|
|
328
326
|
const className = buildClassName('text-sm banner rounded-md flex w-full p-3 items-center', type === 'info' ? 'bg-blue-50 text-blue-700' : '', type === 'error' ? 'bg-red-50 text-red-700' : '', type === 'success' ? 'bg-green-50 text-green-700' : '', type === 'warning' ? 'bg-orange-50 text-orange-700' : '');
|
|
329
327
|
const renderIcon = () => {
|
|
330
328
|
const Icon = IconMap[type];
|