allaw-ui 0.0.19 → 0.0.293

package/dist/components/atoms/typography/Heading.css

@@ -0,0 +1,68 @@
+@import "../../../styles/colors.css";
+
+.heading {
+  font-family: Poppins;
+  font-style: normal;
+  line-height: normal;
+  text-align: center;
+}
+
+.heading.h1 {
+  font-size: 60px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.heading.h2 {
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: 0.38px;
+}
+
+.heading.h3 {
+  font-size: 28px;
+  font-weight: 600;
+  letter-spacing: 0.28px;
+}
+
+.heading.h4 {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.heading.h5 {
+  font-size: 24px;
+  font-weight: 500;
+}
+
+.heading.h6 {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.heading.h7 {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.heading.color-bleu-allaw {
+  color: var(--bleu-allaw);
+}
+
+.heading.color-mid-grey {
+  color: var(--mid-grey);
+}
+
+.heading.color-dark-grey {
+  color: var(--dark-grey);
+}
+
+.heading.color-noir {
+  color: var(--noir);
+}
+
+.heading.color-pure-white {
+  color: var(--pure-white);
+}
+
+/* Ajoutez d'autres couleurs si nécessaire */

package/dist/components/atoms/typography/Heading.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./Heading.css";
+export interface HeadingProps {
+    variant: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
+    text: React.ReactNode;
+}
+declare const Heading: React.FC<HeadingProps>;
+export default Heading;

package/dist/components/atoms/typography/Heading.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./Heading.css";
+var Heading = function (_a) {
+    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "pure-white" : _b, text = _a.text;
+    return React.createElement("div", { className: "heading ".concat(variant, " color-").concat(color) }, text);
+};
+export default Heading;

package/dist/components/atoms/typography/Paragraph.css

@@ -0,0 +1,43 @@
+@import "../../../styles/colors.css";
+
+.paragraph {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-size: 16px;
+  line-height: normal;
+}
+
+.paragraph.bold {
+  font-weight: 700;
+  color: #f3f3f3;
+}
+
+.paragraph.semiBold {
+  font-weight: 600;
+  color: #f3f3f3;
+}
+
+.paragraph.medium {
+  font-weight: 400;
+  color: var(--Primary-Blanc, #fff);
+}
+
+.paragraph.color-bleu-allaw {
+  color: var(--bleu-allaw);
+}
+
+.paragraph.color-mid-grey {
+  color: var(--mid-grey);
+}
+
+.paragraph.color-dark-grey {
+  color: var(--dark-grey);
+}
+
+.paragraph.color-noir {
+  color: var(--noir);
+}
+
+.paragraph.color-pure-white {
+  color: var(--pure-white);
+}

package/dist/components/atoms/typography/Paragraph.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./Paragraph.css";
+export interface ParagraphProps {
+    variant: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
+    text: string;
+}
+declare const Paragraph: React.FC<ParagraphProps>;
+export default Paragraph;

package/dist/components/atoms/typography/Paragraph.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./Paragraph.css";
+var Paragraph = function (_a) {
+    var variant = _a.variant, color = _a.color, text = _a.text;
+    return (React.createElement("p", { className: "paragraph ".concat(variant, " ").concat(color ? "color-".concat(color) : ""), dangerouslySetInnerHTML: { __html: text } }));
+};
+export default Paragraph;

package/dist/components/atoms/typography/SmallTitle.css

@@ -0,0 +1,53 @@
+@import "../../../styles/colors.css";
+
+.small-title {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  line-height: normal;
+}
+
+.small-title.bold20 {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--Primary-Blanc, #fff);
+}
+
+.small-title.medium32 {
+  font-size: 32px;
+  font-weight: 500;
+  color: var(--Primary-Bleu-Allaw, var(--primary-blue, #25beeb));
+}
+
+.small-title.semiBold12 {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--Primary-Blanc, #fff);
+  line-height: 21px;
+}
+
+.small-title.medium12 {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--Primary-Blanc, #fff);
+  line-height: 21px;
+}
+
+.small-title.color-bleu-allaw {
+  color: var(--bleu-allaw);
+}
+
+.small-title.color-mid-grey {
+  color: var(--mid-grey);
+}
+
+.small-title.color-dark-grey {
+  color: var(--dark-grey);
+}
+
+.small-title.color-noir {
+  color: var(--noir);
+}
+
+.small-title.color-pure-white {
+  color: var(--pure-white);
+}

package/dist/components/atoms/typography/SmallTitle.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./SmallTitle.css";
+export interface SmallTitleProps {
+    variant: "bold20" | "medium32" | "semiBold12" | "medium12";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
+    text: string;
+}
+declare const SmallTitle: React.FC<SmallTitleProps>;
+export default SmallTitle;

package/dist/components/atoms/typography/SmallTitle.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./SmallTitle.css";
+var SmallTitle = function (_a) {
+    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text;
+    return (React.createElement("p", { className: "small-title ".concat(variant, " ").concat(color ? "color-".concat(color) : ""), dangerouslySetInnerHTML: { __html: text } }));
+};
+export default SmallTitle;

package/dist/components/atoms/typography/Subtitle.css

@@ -0,0 +1,40 @@
+@import "../../../styles/colors.css";
+
+.subtitle {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-size: 18px;
+  line-height: normal;
+}
+
+.subtitle.bold {
+  font-weight: 700;
+  color: var(--Primary-Blanc, #fff);
+}
+
+.subtitle.medium {
+  font-weight: 500;
+  color: var(--Primary-Blanc, #fff);
+}
+
+.subtitle.color-bleu-allaw {
+  color: var(--bleu-allaw);
+}
+
+.subtitle.color-mid-grey {
+  color: var(--mid-grey);
+}
+
+.subtitle.color-dark-grey {
+  color: var(--dark-grey);
+}
+
+.subtitle.color-noir {
+  color: var(--noir);
+}
+
+.subtitle.color-pure-white {
+  color: var(--pure-white);
+}
+
+/* Ajoutez d'autres couleurs si nécessaire */

package/dist/components/atoms/typography/Subtitle.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./Subtitle.css";
+export interface SubtitleProps {
+    variant: "bold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
+    text: string;
+}
+declare const Subtitle: React.FC<SubtitleProps>;
+export default Subtitle;

package/dist/components/atoms/typography/Subtitle.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./Subtitle.css";
+var Subtitle = function (_a) {
+    var variant = _a.variant, color = _a.color, text = _a.text;
+    return (React.createElement("p", { className: "subtitle ".concat(variant, " ").concat(color ? "color-".concat(color) : ""), dangerouslySetInnerHTML: { __html: text } }));
+};
+export default Subtitle;

package/dist/components/atoms/typography/TinyInfo.css

@@ -0,0 +1,56 @@
+@import "../../../styles/colors.css";
+
+.tiny-info {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  line-height: normal;
+}
+
+.tiny-info.bold14 {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--Primary-Blanc, #fff);
+  letter-spacing: 0.5px;
+}
+
+.tiny-info.medium14 {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--Primary-Blanc, #fff);
+}
+
+.tiny-info.semiBold12 {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--Primary-Blanc, #fff);
+}
+
+.tiny-info.medium12 {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--Primary-Blanc, #fff);
+}
+
+.tiny-info.color-bleu-allaw {
+  color: var(--bleu-allaw);
+}
+
+.tiny-info.color-mid-grey {
+  color: var(--mid-grey);
+}
+
+.tiny-info.color-dark-grey {
+  color: var(--dark-grey);
+}
+
+.tiny-info.color-noir {
+  color: var(--noir);
+}
+
+.tiny-info.color-pure-white {
+  color: var(--pure-white);
+}
+
+.tiny-info.color-actions-error {
+  color: var(--actions-error);
+}

package/dist/components/atoms/typography/TinyInfo.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./TinyInfo.css";
+export interface TinyInfoProps {
+    variant: "bold14" | "medium14" | "semiBold12" | "medium12";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error";
+    text: string;
+}
+declare const TinyInfo: React.FC<TinyInfoProps>;
+export default TinyInfo;

package/dist/components/atoms/typography/TinyInfo.js

@@ -0,0 +1,8 @@
+import React from "react";
+import "./TinyInfo.css";
+var TinyInfo = function (_a) {
+    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text;
+    return (React.createElement("p", { className: "tiny-info ".concat(variant, " ").concat(color ? "color-".concat(color) : ""), dangerouslySetInnerHTML: { __html: text } }));
+};
+export default TinyInfo;
+TinyInfo.displayName = "TinyInfo";

package/dist/components/atoms/typography/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Heading } from "./Heading";
+export { default as Paragraph } from "./Paragraph";
+export { default as SmallTitle } from "./SmallTitle";
+export { default as Subtitle } from "./Subtitle";
+export { default as TinyInfo } from "./TinyInfo";
+export type { HeadingProps } from "./Heading";
+export type { ParagraphProps } from "./Paragraph";
+export type { SmallTitleProps } from "./SmallTitle";
+export type { SubtitleProps } from "./Subtitle";
+export type { TinyInfoProps } from "./TinyInfo";

package/dist/components/atoms/typography/index.js

@@ -0,0 +1,5 @@
+export { default as Heading } from "./Heading";
+export { default as Paragraph } from "./Paragraph";
+export { default as SmallTitle } from "./SmallTitle";
+export { default as Subtitle } from "./Subtitle";
+export { default as TinyInfo } from "./TinyInfo";

package/dist/components/atoms/uiVariables/BorderRadius.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import "../../../styles/ui-variables/border-radius.css";
+import "./BorderRadiusExample.css";
+import "../../../styles/global.css";
+declare const BorderRadius: React.FC;
+export default BorderRadius;

package/dist/components/atoms/uiVariables/BorderRadius.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "../../../styles/ui-variables/border-radius.css";
+import "./BorderRadiusExample.css";
+import "../../../styles/global.css";
+var BorderRadius = function () {
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "example-card", style: { borderRadius: "var(--border-radius-card)" } }, "Card - 16px"),
+        React.createElement("div", { className: "example-button", style: { borderRadius: "var(--border-radius-buttons)" } }, "Button - 100px"),
+        React.createElement("div", { className: "example-tag", style: { borderRadius: "var(--border-radius-tags)" } }, "Tag - 8px"),
+        React.createElement("div", { className: "example-input", style: { borderRadius: "var(--border-radius-inputs)" } }, "Input - 8px")));
+};
+export default BorderRadius;

package/dist/components/atoms/uiVariables/BorderRadiusExample.css

@@ -0,0 +1,31 @@
+.example-card,
+.example-button,
+.example-tag,
+.example-input {
+  width: 100px;
+  height: 100px;
+  background-color: #cfd5d8;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  color: #333;
+}
+
+.example-card {
+  border-radius: var(--border-radius-card);
+}
+
+.example-button {
+  border-radius: var(--border-radius-buttons);
+}
+
+.example-tag {
+  border-radius: var(--border-radius-tags);
+}
+
+.example-input {
+  border-radius: var(--border-radius-inputs);
+}

package/dist/components/atoms/uiVariables/Shadows.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import "../../../styles/global.css";
+import "../../../styles/ui-variables/shadows.css";
+import "./ShadowsExample.css";
+declare const Shadows: React.FC;
+export default Shadows;

package/dist/components/atoms/uiVariables/Shadows.js

@@ -0,0 +1,11 @@
+import React from "react";
+import "../../../styles/global.css";
+import "../../../styles/ui-variables/shadows.css";
+import "./ShadowsExample.css";
+var Shadows = function () {
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "example-card", style: { boxShadow: "var(--shadow-cartes-rdv)" } }, "Cartes RDV"),
+        React.createElement("div", { className: "example-nav-bar", style: { boxShadow: "var(--shadow-nav-bar)" } }, "Nav_bar_shadow"),
+        React.createElement("div", { className: "example-carte-pro", style: { boxShadow: "var(--shadow-carte-pro)" } }, "Carte pro - Blue Shadow")));
+};
+export default Shadows;

package/dist/components/atoms/uiVariables/ShadowsExample.css

@@ -0,0 +1,27 @@
+.example-card,
+.example-nav-bar,
+.example-carte-pro {
+  width: 100px;
+  height: 100px;
+  background-color: #cfd5d8;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  color: #333;
+  border-radius: 8px;
+}
+
+.example-card {
+  box-shadow: var(--shadow-cartes-rdv);
+}
+
+.example-nav-bar {
+  box-shadow: var(--shadow-nav-bar);
+}
+
+.example-carte-pro {
+  box-shadow: var(--shadow-carte-pro);
+}

package/dist/components/atoms/uiVariables/Strokes.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import "../../../styles/global.css";
+import "../../../styles/ui-variables/stroke.css";
+import "./StrokesExample.css";
+declare const Strokes: React.FC;
+export default Strokes;

package/dist/components/atoms/uiVariables/Strokes.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "../../../styles/global.css";
+import "../../../styles/ui-variables/stroke.css";
+import "./StrokesExample.css";
+var Strokes = function () {
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "example-stroke-default" }, "#25BEEB, 2px"),
+        React.createElement("div", { className: "example-stroke-active" }, "#CFD5D8, 2px")));
+};
+export default Strokes;

package/dist/components/atoms/uiVariables/StrokesExample.css

@@ -0,0 +1,22 @@
+.example-stroke-default,
+.example-stroke-active {
+  width: 100px;
+  height: 100px;
+  background-color: none;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  color: #333;
+  border-radius: 8px;
+}
+
+.example-stroke-default {
+  border: var(--stroke-card-default);
+}
+
+.example-stroke-active {
+  border: var(--stroke-card-active);
+}

package/dist/components/atoms/uiVariables/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BorderRadius } from "./BorderRadius";
+export { default as Shadows } from "./Shadows";
+export { default as Strokes } from "./Strokes";

package/dist/components/atoms/uiVariables/index.js

@@ -0,0 +1,3 @@
+export { default as BorderRadius } from "./BorderRadius";
+export { default as Shadows } from "./Shadows";
+export { default as Strokes } from "./Strokes";