@eloisallena/web_components 1.0.3 → 1.0.6

package/dist/component/stories/index.d.ts

@@ -0,0 +1 @@
+export { LandingLayout } from './LandingLayout';

package/dist/component/stories/index.js

@@ -0,0 +1 @@
+export { LandingLayout } from './LandingLayout';

package/dist/component/table/Ctable.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface CtableProps {
+    children?: React.ReactNode;
+    style?: string;
+    maxRows?: number;
+}
+export declare const Ctable: React.FC<CtableProps>;
+export {};

package/dist/component/table/Ctable.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Ctable = ({ children, style, maxRows = 5, }) => {
+    return (_jsx("div", { className: `
+        w-full
+        overflow-hidden
+        rounded-md
+        bg-white
+       shadow-lg
+        ${style || ""}
+      `, children: _jsx("div", { className: "overflow-auto", style: {
+                maxHeight: `${maxRows * 56}px`,
+            }, children: _jsx("table", { className: "w-full border-separate border-spacing-0", children: children }) }) }));
+};

package/dist/component/table/TableBody.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface TableBodyProps {
+    children?: React.ReactNode;
+    style?: string;
+}
+export declare const TableBody: React.FC<TableBodyProps>;
+export {};

package/dist/component/table/TableBody.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TableBody = ({ children, style }) => {
+    return _jsx("tbody", { className: style, children: children });
+};

package/dist/component/table/TableCell.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface TableCellProps {
+    children: React.ReactNode;
+    align?: string;
+    style?: string;
+}
+export declare const TableCell: React.FC<TableCellProps>;
+export {};

package/dist/component/table/TableCell.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TableCell = ({ children, align = "left", style, }) => {
+    return (_jsx("td", { className: `
+        px-4 
+        py-3
+        text-sm
+        ${align === "center" ? "text-center" : ""}
+        ${align === "right" ? "text-right" : ""}
+        ${align === "left" ? "text-left" : ""}
+        ${style || ""}
+      `, children: children }));
+};

package/dist/component/table/TableHead.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { TableHeadCell } from "./types";
+interface TableHeadProps {
+    rowData: TableHeadCell[];
+}
+export declare const TableHead: React.FC<TableHeadProps>;
+export {};

package/dist/component/table/TableHead.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { alignment } from "./alignment";
+export const TableHead = ({ rowData }) => {
+    return (_jsx("thead", { children: _jsx("tr", { className: "\r\n          sticky\r\n          top-0\r\n          z-10\r\n          bg-white\r\n        ", children: rowData.map((cell) => (_jsx("th", { className: `
+              px-3 sm:px-4 md:px-6
+              py-2 md:py-4
+              text-xs sm:text-sm
+              text-gray
+              font-semibold
+
+              border-b
+              border-light-gray
+              ${alignment[cell.align || "left"]}
+              ${cell.style || ""}
+            `, children: cell.value }, cell.key))) }) }));
+};

package/dist/component/table/TableRow.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TableRowCell } from "./types";
+interface TableRowProps {
+    rowData: TableRowCell[];
+    style?: string;
+}
+export declare const TableRow: React.FC<TableRowProps>;
+export {};

package/dist/component/table/TableRow.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { alignment } from "./alignment";
+export const TableRow = ({ rowData, style }) => {
+    return (_jsx("tr", { className: `
+
+        transition-colors
+        hover:bg-gray-50
+          [&:last-child_td]:border-b-0
+
+       
+        ${style || ""}
+      `, children: rowData.map((cell) => (_jsx("td", { className: `
+            px-3 sm:px-4 md:px-6
+            py-2 md:py-4
+            text-xs sm:text-sm
+            text-gray
+            whitespace-nowrap
+
+            border-b
+            border-light-gray
+          
+        
+            
+            ${alignment[cell.align || "left"]}
+            ${cell.style || ""}
+          `, children: cell.value }, cell.key))) }));
+};

package/dist/component/table/alignment.d.ts

@@ -0,0 +1,5 @@
+export declare const alignment: {
+    readonly left: "text-left";
+    readonly center: "text-center";
+    readonly right: "text-right";
+};

package/dist/component/table/alignment.js

@@ -0,0 +1,5 @@
+export const alignment = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+};

package/dist/component/table/index.d.ts

@@ -0,0 +1,5 @@
+export { Ctable } from "./Ctable";
+export { TableHead } from "./TableHead";
+export { TableBody } from "./TableBody";
+export { TableRow } from "./TableRow";
+export { TableCell } from "./TableCell";

package/dist/component/table/index.js

@@ -0,0 +1,5 @@
+export { Ctable } from "./Ctable";
+export { TableHead } from "./TableHead";
+export { TableBody } from "./TableBody";
+export { TableRow } from "./TableRow";
+export { TableCell } from "./TableCell";

package/dist/component/table/types.d.ts

@@ -0,0 +1,13 @@
+export interface TableHeadCell {
+    key: number;
+    name: string;
+    value: string;
+    align?: "left" | "center" | "right";
+    style?: string;
+}
+export interface TableRowCell {
+    key: number;
+    value: string;
+    align?: "left" | "center" | "right";
+    style?: string;
+}

package/dist/component/table/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,2 +1,26 @@
-export * from './src/index.js'
-export {}
+export { Button } from './component/button';
+export { Card } from './component/card';
+export { Cfooter } from './component/footer';
+export { FooterIcon } from './component/footer';
+export { FooterBottom } from './component/footer';
+export { FooterContact } from './component/footer';
+export { QuickLink } from './component/footer';
+export { Cform } from './component/form';
+export { Cheader } from './component/header';
+export { Icon } from './component/header';
+export { Drawer } from './component/header';
+export { SearchBar } from './component/header';
+export { NavBar } from './component/header';
+export { Modal } from './component/modal';
+export { TextField } from "./component/input";
+export { CheckBox } from "./component/input";
+export { Select } from "./component/input";
+export { Section } from './component/section';
+export { Loader } from './component/spinner';
+export { LandingLayout } from './component/stories';
+export { Ctable } from './component/table';
+export { TableBody } from './component/table';
+export { TableCell } from './component/table';
+export { TableHead } from './component/table';
+export { TableRow } from './component/table';
+export { Breadcrumbs } from './component/breadcrumbs';

package/dist/index.js

@@ -0,0 +1,26 @@
+export { Button } from './component/button';
+export { Card } from './component/card';
+export { Cfooter } from './component/footer';
+export { FooterIcon } from './component/footer';
+export { FooterBottom } from './component/footer';
+export { FooterContact } from './component/footer';
+export { QuickLink } from './component/footer';
+export { Cform } from './component/form';
+export { Cheader } from './component/header';
+export { Icon } from './component/header';
+export { Drawer } from './component/header';
+export { SearchBar } from './component/header';
+export { NavBar } from './component/header';
+export { Modal } from './component/modal';
+export { TextField } from "./component/input";
+export { CheckBox } from "./component/input";
+export { Select } from "./component/input";
+export { Section } from './component/section';
+export { Loader } from './component/spinner';
+export { LandingLayout } from './component/stories';
+export { Ctable } from './component/table';
+export { TableBody } from './component/table';
+export { TableCell } from './component/table';
+export { TableHead } from './component/table';
+export { TableRow } from './component/table';
+export { Breadcrumbs } from './component/breadcrumbs';

package/dist/themes/tailwind.css

@@ -0,0 +1,47 @@
+@import "tailwindcss";
+
+@theme {
+  --color-*: initial;
+  --color-blue: oklch(0.4462 0.1768 263.73);
+  --color-green: oklch(0.3958 0.134172 142.6114);
+  --color-red: oklch(0.4594 0.1885 29.23);
+  --color-light-orange: oklch(0.792 0.1228 68.65);
+  --color-light-blue: oklch(0.7889 0.0903 269.59);
+  --color-light-green: oklch(0.757 0.193 143.64);
+  --color-light-red: oklch(0.7978 0.1161 19.96);
+  --color-white: oklch(0.9608 0.0058 264.53);
+  --color-black: oklch(0.2221 0 0);
+  --color-light-black: oklch(0.2876 0.0203 260.62);
+  --color-gray: oklch(0.4276 0 0);
+  --color-light-gray: oklch(0.7826 0 0);
+
+  --color-primary-button: oklch(0.2876 0.0203 260.62);
+  --color-secondary-button: oklch(0.2876 0.0203 260.62);
+  --color-restore-button: oklch(0.2876 0.0203 260.62);
+  --color-delete-button: oklch(0.2876 0.0203 260.62);
+  --color-disabled-button: oklch(0.2876 0.0203 260.62);
+
+  --color-primary: oklch(0.2876 0.0203 260.62);
+}
+@layer base {
+  [data-mode="light"] {
+    @apply bg-white text-black;
+    --color-primary-button: oklch(0.4462 0.1768 263.73);
+    --color-secondary-button: oklch(0.3946 0.0271 256.81);
+    --color-restore-button: oklch(0.3958 0.134172 142.6114);
+    --color-delete-button: oklch(0.4594 0.1885 29.23);
+    --color-disabled-button: oklch(0.4276 0 0);
+
+    --color-primary: oklch(1 0 0);
+  }
+  [data-mode="dark"] {
+    @apply bg-light-black text-white;
+    --color-primary-button: oklch(0.7769 0.0911 250.52);
+    --color-secondary-button: oklch(0.8188 0.0167 206.42);
+    --color-restore-button: oklch(0.757 0.193 143.64);
+    --color-delete-button: oklch(0.7978 0.1161 19.96);
+    --color-disabled-button: oklch(0.7826 0 0);
+
+    --color-primary: oklch(0.2221 0 0);
+  }
+}