bianic-ui 1.16.0-beta.8 → 2.1.0-beta.0

package/README.md

@@ -1,49 +1,49 @@
-# Bianic 2.0
-
-DLS designed by BIAENERGI
-
-## Installation
-
-### First Installation
-
-`npm i bianic-ui`
-
-## Usage
-
-After Bianic-Ui succesfully installed, you can call the component using JSX tag declaration style ex: `<Alert />`. Futher documentation about component can be access [here](https://ristek.link/bianic-dev-docs)
-
-## Support
-
-If you found any bug, please contact at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
-
-## Contributing
-
-If you're interested in contributing to Bianic-Ui, please contact our team at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
-
-## Change Log
-
-Coming soon
-
-## Development Notes
-
-### Code Convention
-
-- Always separate style with tsx
-- For style config always try to be object with one level
-- Separate config file and component file for more readable code
-- The variable name of style config must be describe what you styling not describe the parameters (or key)
-- Use .tsx only when defining component, just us .ts if no component defined on the file
-- Don't import simulation or any demo to index.ts
-- Update storybook for every change or new component
-
-### Component attribute naming
-
-- Check on html documentation. Always try to use the exisiting html atribute name.
-- If there the attibute not listed on html documentation. You can make it on your own with rules :
-  - Use "is" prefix for boolean
-  - Use "on" prefix for event listener
-
-### Another Notes
-
-- Please assign class `...-primary-black` when need black color. If not assigned system will use #000000 black.
-- Just discuss any concept you had. **Discuss first, Implement later**.
+# Bianic 2.0
+
+DLS designed by BIAENERGI
+
+## Installation
+
+### First Installation
+
+`npm i bianic-ui`
+
+## Usage
+
+After Bianic-Ui succesfully installed, you can call the component using JSX tag declaration style ex: `<Alert />`. Futher documentation about component can be access [here](https://ristek.link/bianic-dev-docs)
+
+## Support
+
+If you found any bug, please contact at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
+
+## Contributing
+
+If you're interested in contributing to Bianic-Ui, please contact our team at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
+
+## Change Log
+
+Coming soon
+
+## Development Notes
+
+### Code Convention
+
+- Always separate style with tsx
+- For style config always try to be object with one level
+- Separate config file and component file for more readable code
+- The variable name of style config must be describe what you styling not describe the parameters (or key)
+- Use .tsx only when defining component, just us .ts if no component defined on the file
+- Don't import simulation or any demo to index.ts
+- Update storybook for every change or new component
+
+### Component attribute naming
+
+- Check on html documentation. Always try to use the exisiting html atribute name.
+- If there the attibute not listed on html documentation. You can make it on your own with rules :
+  - Use "is" prefix for boolean
+  - Use "on" prefix for event listener
+
+### Another Notes
+
+- Please assign class `...-primary-black` when need black color. If not assigned system will use #000000 black.
+- Just discuss any concept you had. **Discuss first, Implement later**.

package/dist/cjs/index.js

@@ -2011,18 +2011,25 @@ Tooltip.defaultProps = {
 Tooltip.defaultProps = {};
 
 var FormLabel = function (_a) {
-    var children = _a.children, className = _a.className, htmlFor = _a.htmlFor, readOnly = _a.readOnly, required = _a.required;
-    var labelClass = readOnly ? 'pointer-events-none' : '';
-    return (React.createElement(Tooltip, { content: "Required", delay: 2000, direction: "right" },
-        React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel text-xs font-semibold ".concat(labelClass, " ").concat(className) },
-            children,
-            required && (React.createElement("span", { className: "p-1 text-bia-coolgrey group-hover/form:text-bia-red group-hover/formlabel:text-bia-red" }, "*")))));
+    var children = _a.children, className = _a.className, htmlFor = _a.htmlFor, readOnly = _a.readOnly, required = _a.required, _b = _a.size, size = _b === void 0 ? 'sm' : _b, _c = _a.fontWeight, fontWeight = _c === void 0 ? 'semibold' : _c;
+    var labelpointer = readOnly ? 'pointer-events-none' : '';
+    var labelSize = size === 'sm' ? 'text-size-sm' : 'text-size-md';
+    var labelFontWeight = fontWeight === 'semibold' ? 'font-semibold' : 'font-normal';
+    var labelClass = "".concat(labelpointer, " ").concat(labelSize, " ").concat(labelFontWeight);
+    var labelContent = (React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel ".concat(labelClass, " ").concat(className) },
+        children,
+        required && (React.createElement("span", { className: "p-1 text-bia-coolgrey group-hover/form:text-bia-red group-hover/formlabel:text-bia-red" }, "*"))));
+    if (required)
+        return (React.createElement(Tooltip, { content: "Required", delay: 2000, direction: "right" }, labelContent));
+    return labelContent;
 };
 FormLabel.defaultProps = {
     className: '',
     htmlFor: undefined,
     required: false,
     readOnly: false,
+    size: 'sm',
+    fontWeight: 'semibold',
 };
 
 function PasswordIcon(_a) {
@@ -4176,11 +4183,11 @@ function Toaster(_a) {
     // Default styles for the toaster based on variant
     var colorStyles = "".concat(colorConfigs[variant], " text-bia-white");
     // Logic for content alignment based on `isHeaderShow`
-    var content = title ? (React.createElement("div", { className: "bianic-content-area flex flex-col gap-[5px]" },
+    var content = title ? (React.createElement("div", { className: "bianic-content-area flex grow flex-col gap-[5px]" },
         React.createElement("div", { className: "bianic-toaster-header-area flex flex-row items-center gap-[5px]" },
             icon && React.createElement("div", { className: "bianic-toaster-icon-area" }, icon),
             React.createElement("div", { className: "bianic-toaster-title-area text-[14px] font-semibold leading-[21px]" }, title)),
-        React.createElement("div", { className: "bianic-toaster-description-area text-[12px] font-normal leading-[134%]" }, children))) : (React.createElement("div", { className: "bianic-toaster-content-area flex flex-row gap-[5px]" },
+        React.createElement("div", { className: "bianic-toaster-description-area text-[12px] font-normal leading-[134%]" }, children))) : (React.createElement("div", { className: "bianic-toaster-content-area flex grow flex-row gap-[5px]" },
         icon && React.createElement("div", { className: "bianic-toaster-icon-area" }, icon),
         React.createElement("div", { className: "bianic-toaster-description-area text-[12px] font-normal leading-[134%]" }, children)));
     return (React.createElement("div", { className: "bianic-toaster flex w-[300px] flex-row gap-[5px] rounded-[5px] py-[10px] shadow-[0px_3px_20px_0px_rgba(0,0,0,0.10)] ".concat(colorStyles) },
@@ -4261,6 +4268,7 @@ exports.FileTree = FileTree;
 exports.FormGroup = FormGroup;
 exports.FormGroupButton = FormGroupButton;
 exports.FormGroupLabel = FormGroupLabel;
+exports.FormLabel = FormLabel;
 exports.Heading = Heading;
 exports.InfoPanel = InfoPanel;
 exports.Link = Link;