@ayseaistudio/ui-components 2.1.1 → 2.2.2

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,17 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    number?: string;
+    size: "large" | "x-small" | "XX-small" | "small" | "medium";
+    color?: "lime" | "grey" | "green" | "galliano" | "red";
+    className?: any;
+}
+export declare const Badge: {
+    ({ number, size, color, className, }: Props): React.JSX.Element;
+    propTypes: {
+        number: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/Badge/Badge.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+export const Badge = ({ number = "1", size, color, className, }) => {
+    return (_jsx("div", { className: `badge ${color} ${size} ${className}`, children: ["large", "medium", "small"].includes(size) && (_jsx("div", { className: "element", children: number })) }));
+};
+Badge.propTypes = {
+    number: PropTypes.string,
+    size: PropTypes.oneOf(["large", "x-small", "XX-small", "small", "medium"]),
+    color: PropTypes.oneOf(["lime", "grey", "green", "galliano", "red"]),
+};

package/dist/Badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge } from "./Badge";

package/dist/Badge/index.js

@@ -0,0 +1 @@
+export { Badge } from "./Badge";

package/dist/Badge/style.css

@@ -0,0 +1,150 @@
+.badge {
+    border-radius: 96px;
+    box-shadow: inset 0px 0px 10px #ffffff40;
+    position: relative;
+  }
+  
+  .badge .element {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    position: relative;
+    text-align: center;
+  }
+  
+  .badge.galliano {
+    background-color: #e6c629;
+    top: 180px;
+  }
+  
+  .badge.large {
+    align-items: center;
+    display: flex;
+    height: 32px;
+    justify-content: center;
+    left: 12px;
+    padding: 6px;
+    width: 32px;
+  }
+  
+  .badge.small {
+    align-items: center;
+    display: flex;
+    height: 14px;
+    justify-content: center;
+    left: 116px;
+    padding: 4px;
+    width: 14px;
+  }
+  
+  .badge.XX-small {
+    height: 6px;
+    left: 186px;
+    width: 6px;
+  }
+  
+  .badge.lime {
+    background-color: #b1e635;
+    top: 68px;
+  }
+  
+  .badge.medium {
+    align-items: center;
+    display: flex;
+    height: 24px;
+    justify-content: center;
+    left: 68px;
+    padding: 4px;
+    width: 24px;
+  }
+  
+  .badge.grey {
+    background-color: #3d3d3d;
+    top: 12px;
+  }
+  
+  .badge.red {
+    background-color: #ff6464;
+    top: 124px;
+  }
+  
+  .badge.x-small {
+    height: 8px;
+    left: 154px;
+    width: 8px;
+  }
+  
+  .badge.green {
+    background-color: #6ed184;
+    top: 236px;
+  }
+  
+  .badge.galliano .element {
+    color: #3d230b;
+  }
+  
+  .badge.large .element {
+    font-family: var(--b3-bold-font-family);
+    font-size: var(--b3-bold-font-size);
+    font-style: var(--b3-bold-font-style);
+    font-weight: var(--b3-bold-font-weight);
+    letter-spacing: var(--b3-bold-letter-spacing);
+    line-height: var(--b3-bold-line-height);
+  }
+  
+  .badge.small .element {
+    font-family: var(--b4-black-font-family);
+    font-size: var(--b4-black-font-size);
+    font-style: var(--b4-black-font-style);
+    font-weight: var(--b4-black-font-weight);
+    letter-spacing: var(--b4-black-letter-spacing);
+    line-height: var(--b4-black-line-height);
+    margin-bottom: -4.00px;
+    margin-top: -6.00px;
+  }
+  
+  .badge.XX-small .element {
+    font-family: var(--b3-bold-font-family);
+    font-size: var(--b3-bold-font-size);
+    font-style: var(--b3-bold-font-style);
+    font-weight: var(--b3-bold-font-weight);
+    letter-spacing: var(--b3-bold-letter-spacing);
+    line-height: var(--b3-bold-line-height);
+  }
+  
+  .badge.lime .element {
+    color: #1d2e05;
+  }
+  
+  .badge.medium .element {
+    font-family: var(--b3-bold-font-family);
+    font-size: var(--b3-bold-font-size);
+    font-style: var(--b3-bold-font-style);
+    font-weight: var(--b3-bold-font-weight);
+    letter-spacing: var(--b3-bold-letter-spacing);
+    line-height: var(--b3-bold-line-height);
+    margin-top: -1.00px;
+  }
+  
+  .badge.grey .element {
+    color: #f1f1f1;
+  }
+  
+  .badge.red .element {
+    color: #fff1f1;
+  }
+  
+  .badge.x-small .element {
+    font-family: var(--b3-bold-font-family);
+    font-size: var(--b3-bold-font-size);
+    font-style: var(--b3-bold-font-style);
+    font-weight: var(--b3-bold-font-weight);
+    letter-spacing: var(--b3-bold-letter-spacing);
+    line-height: var(--b3-bold-line-height);
+  }
+  
+  .badge.green .element {
+    color: #0a2913;
+  }
+  

package/dist/CalendarYearDay/CalendarYearDay.d.ts

@@ -0,0 +1,18 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    size: "large" | "medium";
+    version: "month-day" | "different-month-day";
+    status: "two-task" | "non-task" | "one-task" | "selected" | "focus" | "four-task" | "three-task" | "five-task" | "on-date";
+    className: any;
+    text: string;
+}
+export declare const CalendarYearDay: {
+    ({ size, version, status, className, text, }: Props): React.JSX.Element;
+    propTypes: {
+        size: PropTypes.Requireable<string>;
+        version: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/CalendarYearDay/CalendarYearDay.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+import { Badge } from "../Badge";
+import { TertiaryButton } from "../TertiaryButton";
+import { PrimaryButton } from "../PrimaryButton";
+export const CalendarYearDay = ({ size, version, status, className, text, }) => {
+    const getBadgeCount = () => {
+        switch (status) {
+            case "one-task":
+                return 1;
+            case "two-task":
+                return 2;
+            case "three-task":
+                return 3;
+            case "four-task":
+                return 4;
+            case "five-task":
+                return 5;
+            default:
+                return 0;
+        }
+    };
+    const getTertiaryButtonClass = () => {
+        if (size === "medium") {
+            return ["five-task", "focus", "selected"].includes(status) ? "class-5" : "class-3";
+        }
+        // size === "large"
+        if (status === "selected")
+            return "class-4";
+        if (version === "month-day" && ["five-task", "focus"].includes(status))
+            return "class-4";
+        return "class-3";
+    };
+    const badgeCount = getBadgeCount();
+    const showTertiaryButton = status !== "on-date";
+    const tertiaryButtonClass = getTertiaryButtonClass();
+    return (_jsxs("div", { className: `calendar-year-day ${status} ${version} size-0-${size} ${className}`, children: [showTertiaryButton && (_jsx(TertiaryButton, { className: tertiaryButtonClass, color: "black", size: size === "medium" ? "medium" : "large", status: version === "different-month-day" ? "disabled" : "default", text: text })), badgeCount > 0 && (_jsx("div", { className: "frame", children: Array.from({ length: badgeCount }).map((_, idx) => (_jsx(Badge, { size: "XX-small", color: "grey", className: "instance-node" }, idx))) })), status === "on-date" && (_jsx(PrimaryButton, { className: `${size === "medium" ? "class-5" : "class-4"}`, color: "black", size: size === "medium" ? "medium" : "large", status: "default", text: text }))] }));
+};
+CalendarYearDay.propTypes = {
+    size: PropTypes.oneOf(["large", "medium"]),
+    version: PropTypes.oneOf(["month-day", "different-month-day"]),
+    status: PropTypes.oneOf([
+        "two-task",
+        "non-task",
+        "one-task",
+        "selected",
+        "focus",
+        "four-task",
+        "three-task",
+        "five-task",
+        "on-date",
+    ]),
+};

package/dist/CalendarYearDay/index.d.ts

@@ -0,0 +1 @@
+export { CalendarYearDay } from "./CalendarYearDay";

package/dist/CalendarYearDay/index.js

@@ -0,0 +1 @@
+export { CalendarYearDay } from "./CalendarYearDay";

package/dist/CalendarYearDay/style.css

@@ -0,0 +1,152 @@
+.calendar-year-day {
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+}
+
+.calendar-year-day .class {
+  margin-bottom: -1.00px !important;
+  margin-left: -0.50px !important;
+  margin-right: -0.50px !important;
+  margin-top: -3.00px !important;
+}
+
+.calendar-year-day .class-2 {
+  margin-bottom: -1.00px !important;
+  margin-top: -3.00px !important;
+}
+
+.calendar-year-day .class-3 {
+  align-self: stretch !important;
+  display: flex !important;
+}
+
+.calendar-year-day .class-4 {
+  align-self: stretch !important;
+  display: flex !important;
+  height: 44px !important;
+  left: unset !important;
+  top: unset !important;
+  width: 100% !important;
+}
+
+.calendar-year-day .class-5 {
+  align-self: stretch !important;
+  display: flex !important;
+  height: 36px !important;
+  left: unset !important;
+  top: unset !important;
+  width: 100% !important;
+}
+
+.calendar-year-day .frame {
+  align-items: flex-start;
+  flex: 0 0 auto;
+  gap: 2px;
+  position: relative;
+}
+
+.calendar-year-day.non-task {
+  justify-content: space-around;
+}
+
+.calendar-year-day.focus {
+  border: 1px solid;
+  border-radius: 8px;
+}
+
+.calendar-year-day.on-date {
+  background-color: #e7e7e7;
+  border-radius: 8px;
+}
+
+.calendar-year-day.month-day {
+  display: flex;
+}
+
+.calendar-year-day.size-0-medium {
+  display: flex;
+  width: 36px;
+}
+
+.calendar-year-day.selected {
+  background-color: #e7e7e7;
+  border-radius: 8px;
+}
+
+.calendar-year-day.focus.different-month-day {
+  background-color: #eeeeee;
+  border-color: #b0b0b0;
+}
+
+.calendar-year-day.size-0-medium.one-task {
+  height: 36px;
+}
+
+.calendar-year-day.four-task.size-0-large {
+  height: 44px;
+}
+
+.calendar-year-day.three-task.size-0-medium {
+  height: 36px;
+}
+
+.calendar-year-day.two-task.size-0-large {
+  height: 44px;
+}
+
+.calendar-year-day.focus.month-day {
+  background-color: #e7e7e7;
+  border-color: #888888;
+}
+
+.calendar-year-day.non-task.size-0-large {
+  height: 44px;
+}
+
+.calendar-year-day.three-task.size-0-large {
+  height: 44px;
+}
+
+.calendar-year-day.four-task.size-0-medium {
+  height: 36px;
+}
+
+.calendar-year-day.two-task.size-0-medium {
+  height: 36px;
+}
+
+.calendar-year-day.size-0-large.month-day {
+  width: 44px;
+}
+
+.calendar-year-day.size-0-large.different-month-day {
+  display: inline-flex;
+}
+
+.calendar-year-day.non-task.size-0-medium {
+  height: 36px;
+}
+
+.calendar-year-day.size-0-large.one-task {
+  height: 44px;
+}
+
+.calendar-year-day.focus.size-0-large.different-month-day {
+  height: 44px;
+}
+
+.calendar-year-day.five-task.size-0-large.different-month-day {
+  height: 44px;
+}
+
+.calendar-year-day.size-0-large .frame {
+  display: inline-flex;
+}
+
+.calendar-year-day.size-0-medium .frame {
+  align-self: stretch;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    text?: string;
+    size?: "large" | "x-small" | "medium" | "small";
+    status?: "default" | "selected" | "hover";
+    color?: "mauve" | "lime" | "black" | "blue" | "galliano" | "red";
+    className?: string;
+    fieldClassName?: string;
+    onClick?: () => void;
+}
+export declare const Checkbox: {
+    ({ text, size, status, color, className, fieldClassName, onClick, }: Props): React.JSX.Element;
+    propTypes: {
+        text: PropTypes.Requireable<string>;
+        withText: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useReducer } from "react";
+import "./style.css";
+import { IconCheck } from "@tabler/icons-react";
+export const Checkbox = ({ text, size, status, color, className, fieldClassName, onClick, }) => {
+    const initialState = {
+        size: size ?? "large",
+        status: status ?? "selected",
+        color: color ?? "black",
+    };
+    const [state, dispatch] = useReducer(reducer, initialState);
+    return (_jsxs("div", { className: `checkbox ${state.size} ${state.color} ${state.status} ${className}`, onMouseEnter: () => {
+            dispatch("mouse_enter");
+        }, onMouseLeave: () => {
+            dispatch("mouse_leave");
+        }, onClick: () => {
+            dispatch("click");
+            onClick?.();
+        }, children: [_jsx("div", { className: `field ${fieldClassName}`, children: state.status === "selected" && (_jsx(IconCheck, { className: `${state.size === "large" ? "class" : (state.size === "x-small") ? "class-2" : "class-3"}`, color: ["lime", "mauve"].includes(state.color) ? "#3D3D3D" : "#F1F1F1" })) }), text && _jsx("div", { className: "text", children: text })] }));
+};
+function reducer(state, action) {
+    switch (action) {
+        case "mouse_enter":
+            return state.status === "default" ? { ...state, status: "hover" } : state;
+        case "mouse_leave":
+            return state.status === "hover" ? { ...state, status: "default" } : state;
+        case "click":
+            return { ...state, status: state.status === "selected" ? "default" : "selected" };
+        default:
+            return state;
+    }
+}
+Checkbox.propTypes = {
+    text: PropTypes.string,
+    withText: PropTypes.bool,
+    size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
+    status: PropTypes.oneOf(["default", "selected", "hover"]),
+    color: PropTypes.oneOf(["mauve", "lime", "black", "blue", "galliano", "red"]),
+};

package/dist/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from "./Checkbox";

package/dist/Checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from "./Checkbox";

package/dist/Checkbox/style.css

@@ -0,0 +1,406 @@
+.checkbox {
+  align-items: center;
+  background-color: #f7f7f7;
+  border: 1px solid;
+  border-color: #e7e7e7;
+  display: inline-flex;
+  padding: 6px 8px 6px 6px;
+  position: relative;
+  cursor: pointer;
+}
+
+.checkbox .field {
+  position: relative;
+}
+
+.checkbox .class {
+  height: 20px !important;
+  left: calc(50.00% - 10px) !important;
+  position: absolute !important;
+  top: calc(50.00% - 10px) !important;
+  width: 20px !important;
+}
+
+.checkbox .class-2 {
+  height: 12px !important;
+  left: calc(50.00% - 6px) !important;
+  position: absolute !important;
+  top: calc(50.00% - 6px) !important;
+  width: 12px !important;
+}
+
+.checkbox .class-3 {
+  height: 16px !important;
+  left: calc(50.00% - 8px) !important;
+  position: absolute !important;
+  top: calc(50.00% - 8px) !important;
+  width: 16px !important;
+}
+
+.checkbox .text {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.checkbox.large {
+  border-radius: 16px;
+  gap: 4px;
+}
+
+.checkbox.small {
+  border-radius: 12px;
+  gap: 4px;
+}
+
+.checkbox.medium {
+  border-radius: 12px;
+  gap: 4px;
+}
+
+.checkbox.x-small {
+  border-radius: 8px;
+  gap: 6px;
+}
+
+.checkbox.large .field {
+  border-radius: 12px;
+  height: 30px;
+  width: 30px;
+}
+
+.checkbox.small .field {
+  border-radius: 8px;
+  height: 22px;
+  width: 22px;
+}
+
+.checkbox.default .field {
+  border: 1px solid;
+  box-shadow: inset 0px 0px 4px #0000001a;
+}
+
+.checkbox.medium .field {
+  border-radius: 8px;
+  height: 24px;
+  width: 24px;
+}
+
+.checkbox.selected .field {
+  box-shadow: inset 0px 0px 10px #ffffff40;
+  overflow: hidden;
+}
+
+.checkbox.hover .field {
+  border: 1px solid;
+  box-shadow: inset 0px 0px 4px #0000001a;
+}
+
+.checkbox.x-small .field {
+  border-radius: 4px;
+  height: 18px;
+  width: 18px;
+}
+
+.checkbox.lime.selected .field {
+  background-color: #b1e635;
+}
+
+.checkbox.x-small.selected .field {
+  aspect-ratio: 1;
+}
+
+.checkbox.hover.galliano .field {
+  background-color: #b989151a;
+}
+
+.checkbox.lime.default .field {
+  background-color: #71a30d1a;
+  border-color: #71a30d66;
+}
+
+.checkbox.hover.black .field {
+  background-color: #d1d1d1;
+  border-color: #b0b0b0;
+}
+
+.checkbox.red.default .field {
+  background-color: #ed15151a;
+  border-color: #ed15151a;
+}
+
+.checkbox.default.mauve .field {
+  background-color: #a931ec1a;
+  border-color: #a931ec33;
+}
+
+.checkbox.x-small.hover .field {
+  aspect-ratio: 1;
+}
+
+.checkbox.default.black .field {
+  background-color: #e7e7e7;
+  border-color: #d1d1d1;
+}
+
+.checkbox.galliano.default .field {
+  background-color: #b989151a;
+  border-color: #b989151a;
+}
+
+.checkbox.lime.hover .field {
+  background-color: #71a30d1a;
+}
+
+.checkbox.black.selected .field {
+  background-color: #454545;
+}
+
+.checkbox.galliano.selected .field {
+  background-color: #b98915;
+}
+
+.checkbox.mauve.selected .field {
+  background-color: #cf82fe;
+}
+
+.checkbox.hover.mauve .field {
+  background-color: #a931ec1a;
+}
+
+.checkbox.red.hover .field {
+  background-color: #ed15151a;
+}
+
+.checkbox.red.selected .field {
+  background-color: #ed1515;
+}
+
+.checkbox.medium.blue.selected .field {
+  background-color: #8361f1;
+}
+
+.checkbox.lime.hover.x-small .field {
+  border-color: #71a30d66;
+}
+
+.checkbox.x-small.hover.mauve .field {
+  border-color: #71a30d66;
+}
+
+.checkbox.default.blue.medium .field {
+  background-color: #7240e71a;
+  border-color: #7240e733;
+}
+
+.checkbox.lime.hover.small .field {
+  border-color: #71a30d99;
+}
+
+.checkbox.x-small.hover.blue .field {
+  border-color: #71a30d66;
+}
+
+.checkbox.x-small.red.hover .field {
+  border-color: #71a30d66;
+}
+
+.checkbox.hover.mauve.large .field {
+  border-color: #a931ec66;
+}
+
+.checkbox.hover.red.large .field {
+  border-color: #ed15151a;
+}
+
+.checkbox.lime.default.medium .field {
+  aspect-ratio: 1;
+}
+
+.checkbox.hover.galliano.medium .field {
+  border-color: #b989151a;
+}
+
+.checkbox.default.blue.large .field {
+  background-color: #7240e71a;
+  border-color: #7240e733;
+}
+
+.checkbox.lime.hover.large .field {
+  border-color: #71a30d99;
+}
+
+.checkbox.large.blue.selected .field {
+  background-color: #8361f1;
+}
+
+.checkbox.hover.blue.medium .field {
+  background-color: #7240e71a;
+  border-color: #7240e74c;
+}
+
+.checkbox.hover.small.blue .field {
+  background-color: #ed15151a;
+  border-color: #ed15151a;
+}
+
+.checkbox.x-small.hover.galliano .field {
+  border-color: #71a30d66;
+}
+
+.checkbox.hover.galliano.small .field {
+  border-color: #b989151a;
+}
+
+.checkbox.red.small.hover .field {
+  border-color: #ed15151a;
+}
+
+.checkbox.hover.mauve.medium .field {
+  border-color: #a931ec66;
+}
+
+.checkbox.hover.red.medium .field {
+  border-color: #ed15151a;
+}
+
+.checkbox.default.small.blue .field {
+  background-color: #ed15151a;
+  border-color: #ed15151a;
+}
+
+.checkbox.lime.hover.medium .field {
+  border-color: #71a30d99;
+}
+
+.checkbox.small.blue.selected .field {
+  background-color: #ed1515;
+}
+
+.checkbox.hover.blue.large .field {
+  background-color: #7240e71a;
+  border-color: #7240e74c;
+}
+
+.checkbox.hover.small.mauve .field {
+  border-color: #a931ec66;
+}
+
+.checkbox.hover.galliano.large .field {
+  border-color: #b989151a;
+}
+
+.checkbox.large .text {
+  font-family: var(--b1-medium-font-family);
+  font-size: var(--b1-medium-font-size);
+  font-style: var(--b1-medium-font-style);
+  font-weight: var(--b1-medium-font-weight);
+  letter-spacing: var(--b1-medium-letter-spacing);
+  line-height: var(--b1-medium-line-height);
+}
+
+.checkbox.default .text {
+  color: #888888;
+}
+
+.checkbox.medium .text {
+  font-family: var(--b1-medium-font-family);
+  font-size: var(--b1-medium-font-size);
+  font-style: var(--b1-medium-font-style);
+  font-weight: var(--b1-medium-font-weight);
+  letter-spacing: var(--b1-medium-letter-spacing);
+  line-height: var(--b1-medium-line-height);
+}
+
+.checkbox.selected .text {
+  color: #3d3d3d;
+}
+
+.checkbox.x-small .text {
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+}
+
+.checkbox.galliano.small .text {
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+}
+
+.checkbox.small.blue .text {
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+}
+
+.checkbox.hover.small .text {
+  color: #5d5d5d;
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+}
+
+.checkbox.x-small.hover .text {
+  color: #3d3d3d;
+}
+
+.checkbox.small.mauve .text {
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+}
+
+.checkbox.hover.medium .text {
+  color: #5d5d5d;
+}
+
+.checkbox.hover.large .text {
+  color: #5d5d5d;
+}
+
+.checkbox.small.selected .text {
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+}
+
+.checkbox.small.black .text {
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+}
+
+.checkbox.lime.default.small .text {
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+}

package/dist/Tags/Tags.js

@@ -21,7 +21,7 @@ const getIconColor = (colors, disabled) => {
     }
     return undefined;
 };
-export const Tags = ({ text = "Text", size, colors, version, disabled, className, icon, }) => {
+export const Tags = ({ text, size, colors, version, disabled, className, icon, }) => {
     return (_jsxs("div", { className: `tags ${colors} ${size} ${version} ${className}`, children: [icon && (React.cloneElement(icon, {
                 className: `${["small", "x-small"].includes(size) ? "class" : "class-2"}`,
                 color: getIconColor(colors, disabled)

package/dist/index.d.ts

@@ -15,3 +15,6 @@ export { PlatformsButton } from "./PlatformsButton/PlatformsButton";
 export { PlatformSelector } from "./PlatformSelector/PlatformSelector";
 export { SingleSlider } from "./SingleSlider/SingleSlider";
 export { ProfileButton } from "./ProfileButton/ProfileButton";
+export { Checkbox } from "./Checkbox/Checkbox";
+export { Badge } from "./Badge/Badge";
+export { CalendarYearDay } from "./CalendarYearDay/CalendarYearDay";

package/dist/index.js

@@ -15,3 +15,6 @@ export { PlatformsButton } from "./PlatformsButton/PlatformsButton";
 export { PlatformSelector } from "./PlatformSelector/PlatformSelector";
 export { SingleSlider } from "./SingleSlider/SingleSlider";
 export { ProfileButton } from "./ProfileButton/ProfileButton";
+export { Checkbox } from "./Checkbox/Checkbox";
+export { Badge } from "./Badge/Badge";
+export { CalendarYearDay } from "./CalendarYearDay/CalendarYearDay";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "2.1.1",
+  "version": "2.2.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",