funuicss 3.8.8 → 3.8.9

package/css/fun.css

@@ -5999,6 +5999,316 @@ color: var(--primary) !important;
 }
 
 
+
+/* form */
+/* Form Component CSS */
+.funui-form {
+  width: 100%;
+}
+
+.funui-form-wrapper {
+  width: 100%;
+  max-width: 100%;
+}
+
+/* Form Labels */
+.funui-form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.funui-form-label.required::after {
+  content: " *";
+  color: var(--danger);
+}
+
+/* Form Fields */
+.funui-form-field {
+  margin-bottom: 1.5rem;
+  width: 100%;
+}
+
+.funui-form-field-error {
+  animation: shake 0.3s ease-in-out;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+/* Checkbox Styles */
+.funui-form-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  user-select: none;
+  padding: 0.5rem 0;
+  transition: all 0.2s ease;
+  width: fit-content;
+  border-radius: 0.375rem;
+}
+
+.funui-form-checkbox:hover {
+  background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.05);
+}
+
+.funui-form-checkbox.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.funui-form-checkbox-box {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--border);
+  border-radius: 0.375rem;
+  background-color: white;
+  position: relative;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.funui-form-checkbox-box:hover {
+  border-color: var(--primary-light);
+}
+
+.funui-form-checkbox-box.checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+}
+
+.funui-form-checkbox-box.checked::after {
+  content: '';
+  position: absolute;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: white;
+  border-radius: 0.125rem;
+  transform: scale(1);
+  transition: transform 0.2s ease;
+}
+
+/* Alternative checkmark style (using SVG-like pseudo-element) */
+.funui-form-checkbox-box.checked.checkmark::after {
+  content: '';
+  width: 0.375rem;
+  height: 0.75rem;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  background-color: transparent;
+  border-radius: 0;
+  transform: rotate(45deg) translate(-1px, -1px);
+  margin-top: -2px;
+}
+
+.funui-form-checkbox-label {
+  font-size: 0.9375rem;
+  color: var(--text);
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.funui-form-checkbox-label.checked {
+  font-weight: 500;
+  color: var(--primary);
+}
+
+.funui-form-checkbox-label.required::after {
+  content: " *";
+  color: var(--danger);
+}
+
+/* Radio Button Styles */
+.funui-form-radio {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  user-select: none;
+  padding: 0.5rem 0;
+  transition: all 0.2s ease;
+  width: fit-content;
+  border-radius: 0.375rem;
+}
+
+.funui-form-radio:hover {
+  background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.05);
+}
+
+.funui-form-radio.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.funui-form-radio-circle {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--border);
+  border-radius: 50%;
+  background-color: white;
+  position: relative;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.funui-form-radio-circle:hover {
+  border-color: var(--primary-light);
+}
+
+.funui-form-radio-circle.checked {
+  border-color: var(--primary);
+}
+
+.funui-form-radio-circle.checked::after {
+  content: '';
+  position: absolute;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: var(--primary);
+  border-radius: 50%;
+  transform: scale(1);
+  transition: transform 0.2s ease;
+}
+
+.funui-form-radio-label {
+  font-size: 0.9375rem;
+  color: var(--text);
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.funui-form-radio-label.checked {
+  font-weight: 500;
+  color: var(--primary);
+}
+
+.funui-form-radio-label.required::after {
+  content: " *";
+  color: var(--danger);
+}
+
+/* Form Groups (for multiple checkboxes/radios) */
+.funui-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.funui-form-group.horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+/* Form States */
+.funui-form-checkbox-box.error,
+.funui-form-radio-circle.error {
+  border-color: var(--danger);
+  animation: pulse-error 1.5s ease-in-out infinite;
+}
+
+.funui-form-checkbox-box.success,
+.funui-form-radio-circle.success {
+  border-color: var(--success);
+}
+
+.funui-form-checkbox-box.warning,
+.funui-form-radio-circle.warning {
+  border-color: var(--warning);
+}
+
+@keyframes pulse-error {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb, 239, 68, 68), 0.4); }
+  50% { box-shadow: 0 0 0 4px rgba(var(--danger-rgb, 239, 68, 68), 0); }
+}
+
+/* Focus States */
+.funui-form-checkbox input[type="checkbox"]:focus + .funui-form-checkbox-box,
+.funui-form-radio input[type="radio"]:focus + .funui-form-radio-circle {
+  outline: 2px solid var(--primary-light);
+  outline-offset: 2px;
+}
+
+/* Compact Variant */
+.funui-form-checkbox.compact,
+.funui-form-radio.compact {
+  padding: 0.25rem 0;
+  gap: 0.5rem;
+}
+
+.funui-form-checkbox.compact .funui-form-checkbox-box,
+.funui-form-radio.compact .funui-form-radio-circle {
+  width: 1rem;
+  height: 1rem;
+}
+
+.funui-form-checkbox.compact .funui-form-checkbox-box.checked::after,
+.funui-form-radio.compact .funui-form-radio-circle.checked::after {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+/* Full Width Variant */
+.funui-form-checkbox.full-width,
+.funui-form-radio.full-width {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background-color: white;
+}
+
+.funui-form-checkbox.full-width:hover,
+.funui-form-radio.full-width:hover {
+  border-color: var(--primary-light);
+  background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.03);
+}
+
+.funui-form-checkbox.full-width.checked,
+.funui-form-radio.full-width.checked {
+  border-color: var(--primary);
+  background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.08);
+}
+
+/* Accessibility */
+.funui-form-checkbox input[type="checkbox"],
+.funui-form-radio input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Form Error States */
+.funui-form-error {
+  padding: 0.75rem;
+  background-color: var(--danger-light);
+  border: 1px solid var(--danger);
+  border-radius: 0.375rem;
+  margin-bottom: 1rem;
+  animation: slideDown 0.3s ease;
+}
+
+
 /* Spinner Animation */
 .spin {
   animation: spin 1s linear infinite;
@@ -6020,6 +6330,7 @@ color: var(--primary) !important;
 }
 
 
+
  
 
 /* Spinner Animation */

package/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Alert } from "./ui/alert/Alert";
 export { default as ThemeProvider } from "./ui/theme/theme";
 export { default as Button } from "./ui/button/Button";
+export { default as Badge } from "./ui/button/Button";
 export { default as Card } from "./ui/card/Card";
 export { default as BreadCrumb } from "./ui/breadcrumb/BreadCrumb";
 export { default as Container } from "./ui/container/Container";
@@ -34,6 +35,7 @@ export { default as Tip } from "./ui/tooltip/Tip";
 export { default as RowFlex } from "./ui/specials/RowFlex";
 export { default as Section } from "./ui/specials/Section";
 export { default as Hr } from "./ui/specials/Hr";
+export { default as Divider } from "./ui/specials/Hr";
 export { default as Circle } from "./ui/specials/Circle";
 export { default as CircleGroup } from "./ui/specials/CircleGroup";
 export { default as FullCenteredPage } from "./ui/specials/FullCenteredPage";

package/index.js

@@ -3,14 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.View = exports.ScrollInView = exports.Accordion = exports.Flex = exports.RichText = exports.Carousel = exports.Video = exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.SearchableInput = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
-exports.GoogleAnalytics = exports.FunGet = exports.useVariables = exports.useAssets = exports.useAssetValue = exports.useAssetType = exports.useAsset = exports.useVariable = exports.Cookie = exports.Form = exports.Empty = exports.Store = exports.Feature = exports.Footer = exports.FileUpload = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = void 0;
+exports.Accordion = exports.Flex = exports.RichText = exports.Carousel = exports.Video = exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Divider = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.SearchableInput = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Badge = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
+exports.GoogleAnalytics = exports.FunGet = exports.useVariables = exports.useAssets = exports.useAssetValue = exports.useAssetType = exports.useAsset = exports.useVariable = exports.Cookie = exports.Form = exports.Empty = exports.Store = exports.Feature = exports.Footer = exports.FileUpload = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = exports.View = exports.ScrollInView = void 0;
 var Alert_1 = require("./ui/alert/Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 var theme_1 = require("./ui/theme/theme");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return __importDefault(theme_1).default; } });
 var Button_1 = require("./ui/button/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+var Button_2 = require("./ui/button/Button");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(Button_2).default; } });
 var Card_1 = require("./ui/card/Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(Card_1).default; } });
 var BreadCrumb_1 = require("./ui/breadcrumb/BreadCrumb");
@@ -77,6 +79,8 @@ var Section_1 = require("./ui/specials/Section");
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(Section_1).default; } });
 var Hr_1 = require("./ui/specials/Hr");
 Object.defineProperty(exports, "Hr", { enumerable: true, get: function () { return __importDefault(Hr_1).default; } });
+var Hr_2 = require("./ui/specials/Hr");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return __importDefault(Hr_2).default; } });
 var Circle_1 = require("./ui/specials/Circle");
 Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return __importDefault(Circle_1).default; } });
 var CircleGroup_1 = require("./ui/specials/CircleGroup");

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.8.8",
+  "version": "3.8.9",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/button/Button.d.ts

@@ -3,12 +3,12 @@ interface ButtonProps {
     color?: string;
     bg?: string;
     funcss?: string;
-    startIcon?: ReactNode;
-    endIcon?: ReactNode;
+    startIcon?: ReactNode | string;
+    endIcon?: ReactNode | string;
     stringPrefix?: string;
     stringSuffix?: string;
-    prefix?: ReactNode;
-    suffix?: ReactNode;
+    prefix?: ReactNode | string;
+    suffix?: ReactNode | string;
     iconSize?: number | string;
     iconLineHeight?: string | number;
     text?: string;