@prokodo/ui 0.1.13 → 0.1.14

package/README.md

@@ -168,6 +168,8 @@ export default function GalleryPage() {
 | Calendly            |               ✅               |                 ✅                 |
 | Card                |               ✅               |                 ✅                 |
 | Carousel            |               ✅               |                 ✅                 |
+| Checkbox            |               ✅               |                 ✅                 |
+| CheckboxGroup       |               ✅               |                 ✅                 |
 | Chip                |               ✅               |                 ✅                 |
 | DatePicker          |               ✅               |                 ✅                 |
 | Dialog              |               ✅               |                 ✅                 |

package/dist/components/button/Button.css

@@ -155,29 +155,58 @@ html[data-theme=dark] .prokodo-Button {
   border-radius: 1.5rem;
   border-radius: 1.5rem;
 }
-.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
-  color: #FFFFFF !important;
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
-.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
-  color: var(--color-black);
+.prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-bg-primary {
   background: var(--gradient-background-primary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-primary {
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-inherit {
+  color: var(--color-grey-900);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
 }
 .prokodo-Button--has-bg-secondary {
   background: var(--gradient-background-secondary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-secondary {
+  color: #FFFFFF;
 }
 .prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--is-disabled, html[data-theme=dark] .prokodo-Button--has-bg-info {
+  color: var(--color-grey-700);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-success {
+  color: #000000;
 }
 .prokodo-Button--has-bg-warning {
   background: var(--gradient-background-warning);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
   background: none;
@@ -233,7 +262,7 @@ html[data-theme=dark] .prokodo-Button {
 .prokodo-Button--has-variant-outlined {
   position: relative;
   background: none;
-  color: var(--color-black) !important;
+  color: var(--color-black);
 }
 .prokodo-Button--has-variant-outlined::before {
   content: "";
@@ -254,6 +283,66 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
+.prokodo-Button--has-variant-outlined--has-outline-inherit {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-inherit::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary::before {
+  background: var(--gradient-border-4);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary::before {
+  background: var(--gradient-border-2);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info::before {
+  background: var(--gradient-border-info);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-info {
+  color: #FFFFFF;
+}
+.prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-success::before {
+  background: var(--gradient-border-success);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-success);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning::before {
+  background: var(--gradient-border-warning);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-warning);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error::before {
+  background: var(--gradient-border-error);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-error);
+}
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
   display: flex;
   align-items: center;
@@ -272,6 +361,26 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
 }
 .prokodo-Button--is-disabled {
   cursor: default;
+  box-shadow: none;
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+.prokodo-Button--is-disabled::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--is-disabled:hover {
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled {
+  color: var(--color-grey-600);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled::before {
+  background: linear-gradient(112deg, var(--color-grey-300) 0%, var(--color-grey-500) 100%);
 }
 .prokodo-Button__title {
   display: flex;
@@ -315,6 +424,5 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   width: 100%;
 }
 .prokodo-Button__content--icon-only {
-  padding: 0.5rem;
   border-radius: 2000rem;
 }

package/dist/components/button/Button.module.css

@@ -155,29 +155,58 @@ html[data-theme=dark] .prokodo-Button {
   border-radius: 1.5rem;
   border-radius: 1.5rem;
 }
-.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
-  color: #FFFFFF !important;
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
-.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
-  color: var(--color-black);
+.prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-bg-primary {
   background: var(--gradient-background-primary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-primary {
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-inherit {
+  color: var(--color-grey-900);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
 }
 .prokodo-Button--has-bg-secondary {
   background: var(--gradient-background-secondary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-secondary {
+  color: #FFFFFF;
 }
 .prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--is-disabled, html[data-theme=dark] .prokodo-Button--has-bg-info {
+  color: var(--color-grey-700);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-success {
+  color: #000000;
 }
 .prokodo-Button--has-bg-warning {
   background: var(--gradient-background-warning);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
   background: none;
@@ -233,7 +262,7 @@ html[data-theme=dark] .prokodo-Button {
 .prokodo-Button--has-variant-outlined {
   position: relative;
   background: none;
-  color: var(--color-black) !important;
+  color: var(--color-black);
 }
 .prokodo-Button--has-variant-outlined::before {
   content: "";
@@ -254,6 +283,66 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
+.prokodo-Button--has-variant-outlined--has-outline-inherit {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-inherit::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary::before {
+  background: var(--gradient-border-4);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary::before {
+  background: var(--gradient-border-2);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info::before {
+  background: var(--gradient-border-info);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-info {
+  color: #FFFFFF;
+}
+.prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-success::before {
+  background: var(--gradient-border-success);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-success);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning::before {
+  background: var(--gradient-border-warning);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-warning);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error::before {
+  background: var(--gradient-border-error);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-error);
+}
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
   display: flex;
   align-items: center;
@@ -272,6 +361,26 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
 }
 .prokodo-Button--is-disabled {
   cursor: default;
+  box-shadow: none;
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+.prokodo-Button--is-disabled::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--is-disabled:hover {
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled {
+  color: var(--color-grey-600);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled::before {
+  background: linear-gradient(112deg, var(--color-grey-300) 0%, var(--color-grey-500) 100%);
 }
 .prokodo-Button__title {
   display: flex;
@@ -315,6 +424,5 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   width: 100%;
 }
 .prokodo-Button__content--icon-only {
-  padding: 0.5rem;
   border-radius: 2000rem;
 }

package/dist/components/button/Button.module.scss.js

@@ -2,10 +2,11 @@ const styles = {
   "prokodo-Button": "prokodo-Button",
   "prokodo-Button--has-bg-primary": "prokodo-Button--has-bg-primary",
   "prokodo-Button--has-bg-secondary": "prokodo-Button--has-bg-secondary",
-  "prokodo-Button--has-bg-info": "prokodo-Button--has-bg-info",
-  "prokodo-Button--has-bg-error": "prokodo-Button--has-bg-error",
   "prokodo-Button--has-bg-success": "prokodo-Button--has-bg-success",
   "prokodo-Button--has-bg-warning": "prokodo-Button--has-bg-warning",
+  "prokodo-Button--has-bg-info": "prokodo-Button--has-bg-info",
+  "prokodo-Button--has-bg-error": "prokodo-Button--has-bg-error",
+  "prokodo-Button--has-bg-inherit": "prokodo-Button--has-bg-inherit",
   "prokodo-Button--is-disabled": "prokodo-Button--is-disabled",
   "prokodo-Button--has-text-inherit": "prokodo-Button--has-text-inherit",
   "prokodo-Button--has-text-primary": "prokodo-Button--has-text-primary",
@@ -15,6 +16,13 @@ const styles = {
   "prokodo-Button--has-text-warning": "prokodo-Button--has-text-warning",
   "prokodo-Button--has-text-error": "prokodo-Button--has-text-error",
   "prokodo-Button--has-variant-outlined": "prokodo-Button--has-variant-outlined",
+  "prokodo-Button--has-variant-outlined--has-outline-inherit": "prokodo-Button--has-variant-outlined--has-outline-inherit",
+  "prokodo-Button--has-variant-outlined--has-outline-primary": "prokodo-Button--has-variant-outlined--has-outline-primary",
+  "prokodo-Button--has-variant-outlined--has-outline-secondary": "prokodo-Button--has-variant-outlined--has-outline-secondary",
+  "prokodo-Button--has-variant-outlined--has-outline-info": "prokodo-Button--has-variant-outlined--has-outline-info",
+  "prokodo-Button--has-variant-outlined--has-outline-success": "prokodo-Button--has-variant-outlined--has-outline-success",
+  "prokodo-Button--has-variant-outlined--has-outline-warning": "prokodo-Button--has-variant-outlined--has-outline-warning",
+  "prokodo-Button--has-variant-outlined--has-outline-error": "prokodo-Button--has-variant-outlined--has-outline-error",
   "prokodo-Button--has-image": "prokodo-Button--has-image",
   "prokodo-Button--has-icon": "prokodo-Button--has-icon",
   "prokodo-Button--icon-only": "prokodo-Button--icon-only",

package/dist/components/button/Button.view.js

@@ -52,6 +52,7 @@ const ButtonView = /* @__PURE__ */ __name(({
         "has-icon": !Boolean(isIconOnly) && isString(iconProps == null ? void 0 : iconProps.name),
         [`has-variant-${variant}`]: true,
         [`has-bg-${color}`]: variant === "contained",
+        [`has-variant-${variant}--has-outline-${color}`]: variant === "outlined",
         [`has-text-${color}`]: variant === "text",
         "is-disabled": Boolean(disabled),
         ...iconMod

package/dist/components/checkbox/Checkbox.client.js

@@ -0,0 +1,42 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect, useCallback } from "react";
+import { CheckboxView } from "./Checkbox.view.js";
+function CheckboxClient(props) {
+  const { checked: controlledChecked, defaultChecked, onChange } = props;
+  const [isChecked, setIsChecked] = useState(
+    controlledChecked ?? defaultChecked ?? false
+  );
+  useEffect(() => {
+    if (typeof controlledChecked === "boolean") {
+      setIsChecked(controlledChecked);
+    }
+  }, [controlledChecked]);
+  const handleChange = useCallback(
+    (event) => {
+      const nextChecked = event.target.checked;
+      if (typeof controlledChecked !== "boolean") {
+        setIsChecked(nextChecked);
+      }
+      onChange == null ? void 0 : onChange(event, nextChecked);
+    },
+    [controlledChecked, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    CheckboxView,
+    {
+      ...props,
+      checked: void 0,
+      defaultChecked: void 0,
+      isChecked,
+      onChangeInternal: handleChange
+    }
+  );
+}
+__name(CheckboxClient, "CheckboxClient");
+const CheckboxClient$1 = memo(CheckboxClient);
+export {
+  CheckboxClient$1 as default
+};