boflow-components 1.0.2 → 1.0.4

package/dist/App.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, Checkbox, Input } from "./components/index.js";
+import { Alert, Button, Checkbox, Input } from "./components/index.js";
 import { ButtonSize } from "./types/index.js";
 const App = ()=>/*#__PURE__*/ jsxs("div", {
         style: {
@@ -180,15 +180,15 @@ const App = ()=>/*#__PURE__*/ jsxs("div", {
                 children: [
                     /*#__PURE__*/ jsx(Button, {
                         size: ButtonSize.Small,
-                        label: "Small Button"
+                        label: "Small Primary"
                     }),
                     /*#__PURE__*/ jsx(Button, {
                         size: ButtonSize.Medium,
-                        label: "Medium Button"
+                        label: "Medium Primary"
                     }),
                     /*#__PURE__*/ jsx(Button, {
                         size: ButtonSize.Big,
-                        label: "Big Button"
+                        label: "Big Primary"
                     }),
                     /*#__PURE__*/ jsx(Button, {
                         size: ButtonSize.Medium,
@@ -300,7 +300,92 @@ const App = ()=>/*#__PURE__*/ jsxs("div", {
                     }),
                     /*#__PURE__*/ jsx(Button, {
                         size: ButtonSize.Medium,
-                        label: "Disabled Button",
+                        label: "Disabled Primary",
+                        disabled: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '1rem',
+                    alignItems: 'center',
+                    marginTop: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        size: ButtonSize.Small,
+                        primary: false,
+                        label: "Small Secondary"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        size: ButtonSize.Medium,
+                        primary: false,
+                        label: "Medium Secondary"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        size: ButtonSize.Big,
+                        primary: false,
+                        label: "Big Secondary"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        size: ButtonSize.Medium,
+                        primary: false,
+                        label: "With Icons",
+                        leftIcon: /*#__PURE__*/ jsxs("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            children: [
+                                /*#__PURE__*/ jsx("title", {
+                                    children: "Arrow Left"
+                                }),
+                                /*#__PURE__*/ jsx("line", {
+                                    x1: "19",
+                                    y1: "12",
+                                    x2: "5",
+                                    y2: "12"
+                                }),
+                                /*#__PURE__*/ jsx("polyline", {
+                                    points: "12 19 5 12 12 5"
+                                })
+                            ]
+                        }),
+                        rightIcon: /*#__PURE__*/ jsxs("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            children: [
+                                /*#__PURE__*/ jsx("title", {
+                                    children: "Arrow Right"
+                                }),
+                                /*#__PURE__*/ jsx("line", {
+                                    x1: "5",
+                                    y1: "12",
+                                    x2: "19",
+                                    y2: "12"
+                                }),
+                                /*#__PURE__*/ jsx("polyline", {
+                                    points: "12 5 19 12 12 19"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        size: ButtonSize.Medium,
+                        primary: false,
+                        label: "Disabled Secondary",
                         disabled: true
                     })
                 ]
@@ -404,6 +489,56 @@ const App = ()=>/*#__PURE__*/ jsxs("div", {
                         ]
                     })
                 ]
+            }),
+            /*#__PURE__*/ jsx("hr", {
+                style: {
+                    borderColor: 'var(--neutral-4)'
+                }
+            }),
+            /*#__PURE__*/ jsx("h1", {
+                children: "Alert Component Examples"
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Alert, {
+                        intent: "default",
+                        title: "Label",
+                        description: "By Jove, my quick study of lexicography won a prize!"
+                    }),
+                    /*#__PURE__*/ jsx(Alert, {
+                        intent: "info",
+                        title: "Label",
+                        description: "By Jove, my quick study of lexicography won a prize!"
+                    }),
+                    /*#__PURE__*/ jsx(Alert, {
+                        intent: "warning",
+                        title: "Label",
+                        description: "By Jove, my quick study of lexicography won a prize!"
+                    }),
+                    /*#__PURE__*/ jsx(Alert, {
+                        intent: "error",
+                        title: "Label",
+                        description: "By Jove, my quick study of lexicography won a prize!"
+                    }),
+                    /*#__PURE__*/ jsx(Alert, {
+                        intent: "success",
+                        title: "Label",
+                        description: "By Jove, my quick study of lexicography won a prize!"
+                    }),
+                    /*#__PURE__*/ jsx("h3", {
+                        children: "Shadow Variant"
+                    }),
+                    /*#__PURE__*/ jsx(Alert, {
+                        variant: "shadow",
+                        intent: "info",
+                        title: "Label (Shadow variant)"
+                    })
+                ]
             })
         ]
     });

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,3 @@
+import type { AlertProps } from '../../types';
+import './alert.scss';
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import "./alert.css";
+const DefaultIcons = {
+    info: /*#__PURE__*/ jsxs("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        role: "img",
+        "aria-label": "info",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Info"
+            }),
+            /*#__PURE__*/ jsx("circle", {
+                cx: "12",
+                cy: "12",
+                r: "10"
+            }),
+            /*#__PURE__*/ jsx("line", {
+                x1: "12",
+                y1: "16",
+                x2: "12",
+                y2: "12"
+            }),
+            /*#__PURE__*/ jsx("line", {
+                x1: "12",
+                y1: "8",
+                x2: "12.01",
+                y2: "8"
+            })
+        ]
+    }),
+    warning: /*#__PURE__*/ jsxs("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        role: "img",
+        "aria-label": "warning",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Warning"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+            }),
+            /*#__PURE__*/ jsx("line", {
+                x1: "12",
+                y1: "9",
+                x2: "12",
+                y2: "13"
+            }),
+            /*#__PURE__*/ jsx("line", {
+                x1: "12",
+                y1: "17",
+                x2: "12.01",
+                y2: "17"
+            })
+        ]
+    }),
+    error: /*#__PURE__*/ jsxs("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        role: "img",
+        "aria-label": "error",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Error"
+            }),
+            /*#__PURE__*/ jsx("circle", {
+                cx: "12",
+                cy: "12",
+                r: "10"
+            }),
+            /*#__PURE__*/ jsx("line", {
+                x1: "12",
+                y1: "8",
+                x2: "12",
+                y2: "12"
+            }),
+            /*#__PURE__*/ jsx("line", {
+                x1: "12",
+                y1: "16",
+                x2: "12.01",
+                y2: "16"
+            })
+        ]
+    }),
+    success: /*#__PURE__*/ jsxs("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        role: "img",
+        "aria-label": "success",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Success"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M22 11.08V12a10 10 0 1 1-5.93-9.14"
+            }),
+            /*#__PURE__*/ jsx("polyline", {
+                points: "22 4 12 14.01 9 11.01"
+            })
+        ]
+    }),
+    default: null
+};
+const CloseIcon = /*#__PURE__*/ jsxs("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    role: "img",
+    "aria-label": "close",
+    children: [
+        /*#__PURE__*/ jsx("line", {
+            x1: "18",
+            y1: "6",
+            x2: "6",
+            y2: "18"
+        }),
+        /*#__PURE__*/ jsx("line", {
+            x1: "6",
+            y1: "6",
+            x2: "18",
+            y2: "18"
+        })
+    ]
+});
+const Alert = /*#__PURE__*/ forwardRef(({ intent = 'default', variant = 'outlined', title, description, icon, action, closable = true, onClose, className = '', ...props }, ref)=>{
+    let renderIcon = icon;
+    if (void 0 === icon) renderIcon = DefaultIcons[intent];
+    const intentClass = `bo-alert--${intent}`;
+    const variantClass = `bo-alert--${variant}`;
+    const layoutClass = description ? "bo-alert--with-description" : 'bo-alert--single-line';
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        className: `bo-alert ${intentClass} ${variantClass} ${layoutClass} ${className}`.trim(),
+        role: "alert",
+        ...props,
+        children: [
+            null !== renderIcon && /*#__PURE__*/ jsx("div", {
+                className: "bo-alert__icon",
+                children: renderIcon
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "bo-alert__content",
+                children: [
+                    title && /*#__PURE__*/ jsx("div", {
+                        className: "bo-alert__title",
+                        children: title
+                    }),
+                    description && /*#__PURE__*/ jsx("div", {
+                        className: "bo-alert__description",
+                        children: description
+                    })
+                ]
+            }),
+            action && /*#__PURE__*/ jsx("div", {
+                className: "bo-alert__action",
+                children: action
+            }),
+            closable && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: "bo-alert__close",
+                onClick: onClose,
+                "aria-label": "Close alert",
+                children: CloseIcon
+            })
+        ]
+    });
+});
+Alert.displayName = 'Alert';
+export { Alert };

package/dist/components/Alert/alert.css

@@ -0,0 +1,167 @@
+.bo-alert {
+  border-radius: 8px;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  font-family: Inter Tight, sans-serif;
+  display: flex;
+}
+
+.bo-alert--single-line {
+  align-items: center;
+}
+
+.bo-alert__icon {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2px;
+  display: flex;
+}
+
+.bo-alert--single-line .bo-alert__icon {
+  margin-top: 0;
+}
+
+.bo-alert__content {
+  flex-direction: column;
+  flex-grow: 1;
+  align-self: center;
+  gap: 4px;
+  display: flex;
+}
+
+.bo-alert__title {
+  color: #0d0d12;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.bo-alert__description {
+  color: #818898;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.bo-alert__action {
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.bo-alert__close {
+  cursor: pointer;
+  color: #0d0d12;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  padding: 2px;
+  transition: background-color .15s;
+  display: flex;
+}
+
+.bo-alert__close:hover {
+  background-color: #0000000d;
+}
+
+.bo-alert__close:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid #131313;
+}
+
+.bo-alert--outlined.bo-alert--default {
+  background-color: #fff;
+  border: 1px solid #dfe1e7;
+}
+
+.bo-alert--outlined.bo-alert--default .bo-alert__icon {
+  color: #0d0d12;
+}
+
+.bo-alert--outlined.bo-alert--error {
+  background-color: #fff0f3;
+  border: 1px solid #ed8296;
+}
+
+.bo-alert--outlined.bo-alert--error .bo-alert__icon {
+  color: #0d0d12;
+}
+
+.bo-alert--outlined.bo-alert--warning {
+  background-color: #fff6e0;
+  border: 1px solid #fcda83;
+}
+
+.bo-alert--outlined.bo-alert--warning .bo-alert__icon {
+  color: #0d0d12;
+}
+
+.bo-alert--outlined.bo-alert--info {
+  background-color: #f0fbff;
+  border: 1px solid #7eddf1;
+}
+
+.bo-alert--outlined.bo-alert--info .bo-alert__icon {
+  color: #0d0d12;
+}
+
+.bo-alert--outlined.bo-alert--success {
+  background-color: #effefa;
+  border: 1px solid #9ee1d4;
+}
+
+.bo-alert--outlined.bo-alert--success .bo-alert__icon {
+  color: #0d0d12;
+}
+
+.bo-alert--shadow {
+  border: 1px solid #0000;
+  box-shadow: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
+}
+
+.bo-alert--shadow.bo-alert--default {
+  background-color: #fff;
+}
+
+.bo-alert--shadow.bo-alert--default .bo-alert__icon {
+  color: #0d0d12;
+}
+
+.bo-alert--shadow.bo-alert--error {
+  background-color: #fff0f3;
+}
+
+.bo-alert--shadow.bo-alert--error .bo-alert__icon {
+  color: #0d0d12;
+}
+
+.bo-alert--shadow.bo-alert--warning {
+  background-color: #fff6e0;
+}
+
+.bo-alert--shadow.bo-alert--warning .bo-alert__icon {
+  color: #0d0d12;
+}
+
+.bo-alert--shadow.bo-alert--info {
+  background-color: #f0fbff;
+}
+
+.bo-alert--shadow.bo-alert--info .bo-alert__icon {
+  color: #0d0d12;
+}
+
+.bo-alert--shadow.bo-alert--success {
+  background-color: #effefa;
+}
+
+.bo-alert--shadow.bo-alert--success .bo-alert__icon {
+  color: #0d0d12;
+}
+

package/dist/components/Button/button.css

@@ -7,7 +7,7 @@
   font-family: Inter Tight, sans-serif;
   font-weight: 500;
   line-height: 1.4;
-  transition: all .2s ease-in-out;
+  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out, box-shadow .2s ease-in-out;
   display: inline-flex;
 }
 
@@ -33,39 +33,63 @@
 }
 
 .bo-button--primary {
-  border: 1px solid var(--primary-500, #131313);
-  background: linear-gradient(180deg, var(--primary-400, #424242) 0%, var(--primary-500, #131313) 100%);
   color: #fff;
+  background-color: #131313;
+  background-image: linear-gradient(#424242 0%, #131313 100%);
+  border: 1px solid #131313;
   border-radius: 10px;
   box-shadow: inset 4px 4px 8px #fff6, 0 0 1px #0000001a, 0 2px 4px #0003;
 }
 
 .bo-button--primary:hover:not(:disabled) {
-  border: 1px solid var(--primary-200, #a1a1a1);
-  background: linear-gradient(180deg, var(--primary-300, #717171) 0%, var(--primary-400, #424242) 100%);
+  background-image: linear-gradient(#717171 0%, #424242 100%);
+  border: 1px solid #a1a1a1;
 }
 
 .bo-button--primary:active:not(:disabled) {
   box-shadow: none;
-  background: #000;
-  border-color: #000;
+  background-color: #1a1b25;
+  background-image: none;
+  border-color: #1a1b25;
   border-radius: 10px;
 }
 
 .bo-button--primary:disabled {
-  background: var(--neutral-4, #eceff3);
-  color: var(--neutral-7, #a4acb9);
+  color: #a4acb9;
   box-shadow: none;
   cursor: not-allowed;
+  background-color: #eceff3;
+  background-image: none;
   border: 1px solid #0000;
   border-radius: 10px;
 }
 
 .bo-button--secondary {
-  color: #333;
-  background-color: #0000;
-  border: none;
+  color: #131313;
+  background: none;
+  border: 1px solid #a4acb9;
   border-radius: 10px;
-  box-shadow: inset 0 0 0 1px #00000026;
+  box-shadow: 0 0 1px #0000001a, 0 2px 4px #0003;
+}
+
+.bo-button--secondary:hover:not(:disabled) {
+  color: #fff;
+  background: #131313;
+  border-color: #131313;
+}
+
+.bo-button--secondary:active:not(:disabled) {
+  color: #fff;
+  box-shadow: none;
+  background: #424242;
+  border-color: #424242;
+}
+
+.bo-button--secondary:disabled {
+  color: #a4acb9;
+  box-shadow: none;
+  cursor: not-allowed;
+  background: #eceff3;
+  border-color: #0000;
 }
 

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
 export { Button } from './Button/Button';
 export { Checkbox } from './Checkbox/Checkbox';
 export { Input } from './Input/Input';
+export { Alert } from './Alert/Alert';

package/dist/components/index.js

@@ -1,4 +1,5 @@
 import { Button } from "./Button/Button.js";
 import { Checkbox } from "./Checkbox/Checkbox.js";
 import { Input } from "./Input/Input.js";
-export { Button, Checkbox, Input };
+import { Alert } from "./Alert/Alert.js";
+export { Alert, Button, Checkbox, Input };

package/dist/types/Alert.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type AlertIntent = 'default' | 'error' | 'warning' | 'info' | 'success';
+export type AlertVariant = 'outlined' | 'shadow';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * The visual intent of the alert
+     * @default 'default'
+     */
+    intent?: AlertIntent;
+    /**
+     * The visual variant of the alert
+     * @default 'outlined'
+     */
+    variant?: AlertVariant;
+    /**
+     * The main title of the alert
+     */
+    title?: ReactNode;
+    /**
+     * Secondary description text
+     */
+    description?: ReactNode;
+    /**
+     * Replace the default intent icon or set to null to remove the icon entirely
+     */
+    icon?: ReactNode;
+    /**
+     * Optional action button or element displayed on the right
+     */
+    action?: ReactNode;
+    /**
+     * Whether the alert can be closed/dismissed
+     * @default true
+     */
+    closable?: boolean;
+    /**
+     * Callback fired when the close button is clicked
+     */
+    onClose?: () => void;
+}

package/dist/types/index.d.ts

@@ -3,3 +3,4 @@ export { ButtonSize } from './Button';
 export type { CheckboxProps } from './Checkbox';
 export type { CheckboxSize } from './Checkbox';
 export type { InputProps } from './Input';
+export type { AlertProps, AlertIntent, AlertVariant } from './Alert';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boflow-components",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "exports": {
     ".": {