boflow-components 1.0.0

package/dist/components/Input/Input.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import "./input.css";
+const Input = /*#__PURE__*/ forwardRef(({ label, hint, error, leftIcon, rightIcon, className = '', disabled, value, defaultValue, onChange, ...props }, ref)=>{
+    const defaultId = useId();
+    const id = props.id || defaultId;
+    const hasValue = void 0 !== value ? String(value).length > 0 : void 0 !== defaultValue ? String(defaultValue).length > 0 : false;
+    const wrapperClasses = [
+        'bo-input-wrapper',
+        disabled ? 'bo-input-wrapper--disabled' : '',
+        error ? 'bo-input-wrapper--error' : '',
+        hasValue ? 'bo-input-wrapper--filled' : '',
+        className
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsxs("div", {
+        className: "bo-input-container",
+        children: [
+            label && /*#__PURE__*/ jsx("label", {
+                htmlFor: id,
+                className: `bo-input-label ${disabled ? 'bo-input-label--disabled' : ''}`,
+                children: label
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: wrapperClasses,
+                children: [
+                    leftIcon && /*#__PURE__*/ jsx("div", {
+                        className: "bo-input-prefix",
+                        children: leftIcon
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        id: id,
+                        ref: ref,
+                        className: "bo-input",
+                        disabled: disabled,
+                        value: value,
+                        defaultValue: defaultValue,
+                        onChange: onChange,
+                        ...props
+                    }),
+                    rightIcon && /*#__PURE__*/ jsx("div", {
+                        className: "bo-input-suffix",
+                        children: rightIcon
+                    })
+                ]
+            }),
+            hint && /*#__PURE__*/ jsx("div", {
+                className: `bo-input-hint ${error ? 'bo-input-hint--error' : ''} ${disabled ? 'bo-input-hint--disabled' : ''}`,
+                children: hint
+            })
+        ]
+    });
+});
+Input.displayName = 'Input';
+export { Input };

package/dist/components/Input/input.css

@@ -0,0 +1,106 @@
+.bo-input-container {
+  gap: var(--spacing-2, 8px);
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.bo-input-label {
+  color: var(--neutral-13, #0d0d12);
+  font-family: Inter Tight, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.bo-input-label--disabled {
+  color: var(--neutral-7, #a4acb9);
+}
+
+.bo-input-wrapper {
+  border: 1px solid var(--neutral-5, #dfe1e7);
+  background: var(--neutral-2, #f8fafb);
+  width: 100%;
+  padding: 0 var(--spacing-4, 16px);
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  border-radius: 10px;
+  height: 48px;
+  transition: all .2s ease-in-out;
+  display: flex;
+}
+
+.bo-input-wrapper:hover:not(.bo-input-wrapper--disabled):not(.bo-input-wrapper--error) {
+  border-color: var(--neutral-6, #c1c7d0);
+}
+
+.bo-input-wrapper:focus-within:not(.bo-input-wrapper--disabled):not(.bo-input-wrapper--error) {
+  box-shadow: 0 0 0 1px var(--primary-500, #131313) inset, 0 0 1px 3px #1313131a;
+  border-color: #0000;
+}
+
+.bo-input-wrapper--error {
+  border-color: #0000;
+  box-shadow: inset 0 0 0 1px #ec778d, 0 0 1px 3px #df1c4126;
+}
+
+.bo-input-wrapper--disabled {
+  background: var(--neutral-2, #f8fafb);
+  border-color: var(--neutral-5, #dfe1e7);
+  cursor: not-allowed;
+  opacity: .7;
+}
+
+.bo-input-prefix, .bo-input-suffix {
+  color: var(--neutral-9, #666d80);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.bo-input {
+  width: 100%;
+  height: 100%;
+  color: var(--neutral-9, #666d80);
+  background: none;
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  padding: 0;
+  font-family: Inter Tight, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+}
+
+.bo-input::placeholder {
+  color: var(--neutral-7, #a4acb9);
+}
+
+.bo-input-wrapper--filled .bo-input, .bo-input-wrapper:focus-within:not(.bo-input-wrapper--disabled) .bo-input, .bo-input-wrapper--error .bo-input {
+  color: var(--neutral-13, #0d0d12);
+}
+
+.bo-input-wrapper--disabled .bo-input {
+  color: var(--neutral-7, #a4acb9);
+  cursor: not-allowed;
+}
+
+.bo-input-hint {
+  color: var(--neutral-9, #666d80);
+  font-family: Inter Tight, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.bo-input-hint--error {
+  color: #ec778d;
+}
+
+.bo-input-hint--disabled {
+  color: var(--neutral-7, #a4acb9);
+}
+

package/dist/components/index.d.ts

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

package/dist/components/index.js

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