uibee 2.14.0 → 2.16.0

package/dist/src/components/index.d.ts

@@ -24,4 +24,7 @@ export { default as Alert } from './alert/alert';
 export { MenuButton } from './table/menu';
 export { default as Table } from './table/table';
 export { default as Pagination } from './table/pagination';
+export { default as MarkdownRender } from './markdownrender/markdownRender';
 export { default as ConfirmPopup } from './confirm/confirmPopup';
+export { default as SeverityPill } from './vulnerability/severityPill';
+export { default as Toggle } from './layout/toggle';

package/dist/src/components/index.js

@@ -34,5 +34,11 @@ export { default as Alert } from './alert/alert';
 export { MenuButton } from './table/menu';
 export { default as Table } from './table/table';
 export { default as Pagination } from './table/pagination';
+// Markdown
+export { default as MarkdownRender } from './markdownrender/markdownRender';
 // Confirm
 export { default as ConfirmPopup } from './confirm/confirmPopup';
+// Vulnerability
+export { default as SeverityPill } from './vulnerability/severityPill';
+// Layout
+export { default as Toggle } from './layout/toggle';

package/dist/src/components/inputs/shared/fieldWrapper.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import InputLabel from './inputLabel';
 import InputInfo from './inputInfo';
 import InputError from './inputError';
-import ReactMarkdown from 'react-markdown';
+import MarkdownRender from '../../markdownrender/markdownRender';
 export default function FieldWrapper({ label, name, required, info, error, description, textSize = 'sm', children, className, }) {
-    return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: `ml-1 ${textSize === 'sm' ? 'text-sm!' : 'text-base!'}` })), info && _jsx(InputInfo, { info: info })] })), description && (_jsx("p", { className: 'text-sm text-login-100 ml-1 mb-1', children: _jsx(ReactMarkdown, { children: String(description || '') }) })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
+    return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: `ml-1 ${textSize === 'sm' ? 'text-sm!' : 'text-base!'}` })), info && _jsx(InputInfo, { info: info })] })), description && (_jsx("div", { className: 'text-login-100 **:text-xs! ml-1 mb-1', children: _jsx(MarkdownRender, { MDstr: String(description || '') }) })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
 }

package/dist/src/components/inputs/textarea.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import ReactMarkdown from 'react-markdown';
 import { Eye, Pencil } from 'lucide-react';
 import { FieldWrapper } from './shared';
+import MarkdownRender from '../markdownrender/markdownRender';
 function isValidJson(str) {
     try {
         JSON.parse(str);
@@ -18,13 +18,11 @@ export default function Textarea(props) {
     const [preview, setPreview] = useState(false);
     const jsonError = type === 'json' && value ? isValidJson(value) : undefined;
     const displayError = jsonError || error;
+    console.log(value);
     return (_jsx(FieldWrapper, { label: label, name: name, required: textareaProps.required, info: info, description: description, error: displayError, textSize: textSize, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview && (_jsx("div", { className: `
                             w-full rounded-md bg-login-500/50 border border-login-500 
-                            text-login-text 
-                            p-3
-                            prose prose-invert prose-base max-w-none overflow-y-auto
-                            ${error ? 'border-red-500' : ''}
-                        `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: String(value || '') }) })), _jsx("textarea", { ...textareaProps, id: name, name: name, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+                            p-3 overflow-y-auto ${error ? 'border-red-500' : ''}
+                        `, children: _jsx(MarkdownRender, { MDstr: String(value || '') }) })), _jsx("textarea", { ...textareaProps, id: name, name: name, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
                         ${type === 'markdown' && preview ? 'hidden' : ''}
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text placeholder-login-200

package/dist/src/components/layout/toggle.d.ts

@@ -0,0 +1,14 @@
+type ToggleOption<T> = {
+    value: T;
+    label?: string;
+    text?: string;
+    icon?: React.ReactNode;
+};
+type ToggleProps<T> = {
+    value: T;
+    onChange: (value: T) => void;
+    left: ToggleOption<T>;
+    right: ToggleOption<T>;
+};
+export default function Toggle<T>({ value, onChange, left, right, }: ToggleProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/layout/toggle.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Toggle({ value, onChange, left, right, }) {
+    const active = 'bg-login-200 text-login-950 shadow';
+    const idle = 'text-login-200 hover:bg-login-50/10 hover:text-login-50';
+    const base = 'flex items-center justify-center rounded-full transition gap-1';
+    function renderContent(opt) {
+        return (_jsxs(_Fragment, { children: [opt.icon, opt.text && _jsx("span", { children: opt.text })] }));
+    }
+    const isLeftActive = value === left.value;
+    const isRightActive = value === right.value;
+    return (_jsxs("div", { className: 'flex items-center rounded-full border border-login-100/10 bg-login-50/5 p-1', children: [_jsx("button", { type: 'button', onClick: () => onChange(left.value), "aria-label": left.label ?? left.text, "aria-pressed": isLeftActive, className: `${base} px-2 h-7 ${isLeftActive ? active : idle}`, children: renderContent(left) }), _jsx("button", { type: 'button', onClick: () => onChange(right.value), "aria-label": right.label ?? right.text, "aria-pressed": isRightActive, className: `${base} px-2 h-7 ${isRightActive ? active : idle}`, children: renderContent(right) })] }));
+}

package/dist/src/components/markdownrender/markdownRender.d.ts

@@ -0,0 +1,3 @@
+export default function MarkdownRender({ MDstr }: {
+    MDstr: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/markdownrender/markdownRender.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+export default function MarkdownRender({ MDstr }) {
+    return (_jsx("div", { className: 'prose prose-sm prose-custom max-w-none', children: _jsx(Markdown, { components: { h1: ({ ...props }) => _jsx("h2", { ...props }) }, remarkPlugins: [remarkGfm], children: MDstr.replace(/\\n/g, '\n') }) }));
+}

package/dist/src/components/vulnerability/constants.d.ts

@@ -0,0 +1,4 @@
+type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown';
+export declare const severityLabel: Record<SeverityLevel, string>;
+export declare const severityClasses: Record<SeverityLevel, string>;
+export {};

package/dist/src/components/vulnerability/constants.js

@@ -0,0 +1,14 @@
+export const severityLabel = {
+    critical: 'Critical',
+    high: 'High',
+    medium: 'Medium',
+    low: 'Low',
+    unknown: 'Unknown',
+};
+export const severityClasses = {
+    critical: 'border-red-400/25 bg-red-500/10 text-red-200',
+    high: 'border-orange-400/25 bg-orange-500/10 text-orange-200',
+    medium: 'border-amber-400/25 bg-amber-500/10 text-amber-200',
+    low: 'border-sky-400/25 bg-sky-500/10 text-sky-200',
+    unknown: 'border-login-100/10 bg-login-50/5 text-login-200',
+};

package/dist/src/components/vulnerability/severityPill.d.ts

@@ -0,0 +1,8 @@
+type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown';
+type SeverityPillProps = {
+    severity: SeverityLevel;
+    count: number;
+    compact?: boolean;
+};
+export default function SeverityPill({ severity, count, compact }: SeverityPillProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/components/vulnerability/severityPill.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { severityClasses, severityLabel } from './constants';
+export default function SeverityPill({ severity, count, compact = false }) {
+    if (count === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: `rounded-xl border ${compact ? 'px-3 py-2' : 'p-3'} ${severityClasses[severity]}`, children: [_jsx("div", { className: 'text-[11px] font-medium uppercase tracking-[0.18em]', children: severityLabel[severity] }), _jsx("div", { className: `${compact ? 'mt-1 text-sm' : 'mt-2 text-lg'} font-semibold`, children: count })] }));
+}