cleanplate 0.0.1

package/.storybook/cleanplate-theme.js

@@ -0,0 +1,41 @@
+// .storybook/YourTheme.js
+
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "light",
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: "monospace",
+
+  brandTitle: "My custom Storybook",
+  brandUrl: "https://cleanplate.sivadass.in",
+  brandImage:
+    "https://f005.backblazeb2.com/file/sivadass-cloud/cleanplate-logo.svg",
+  brandTarget: "_self",
+
+  //
+  colorPrimary: "#3A10E5",
+  colorSecondary: "#585C6D",
+
+  // UI
+  appBg: "#ffffff",
+  appContentBg: "#ffffff",
+  appBorderColor: "#585C6D",
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: "#10162F",
+  textInverseColor: "#ffffff",
+
+  // Toolbar default and active colors
+  barTextColor: "#9E9E9E",
+  barSelectedColor: "#585C6D",
+  barBg: "#ffffff",
+
+  // Form colors
+  inputBg: "#ffffff",
+  inputBorder: "#10162F",
+  inputTextColor: "#10162F",
+  inputBorderRadius: 2,
+});

package/.storybook/main.js

@@ -0,0 +1,21 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  core: {
+    builder: "@storybook/builder-vite", // 👈 The builder enabled here.
+  },
+};
+export default config;

package/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import cleanplateTheme from "./cleanplate-theme";
+
+addons.setConfig({
+  theme: cleanplateTheme,
+});

package/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/LICENSE

@@ -0,0 +1,121 @@
+Creative Commons Legal Code
+
+CC0 1.0 Universal
+
+    CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
+    LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
+    ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
+    INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
+    REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
+    PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
+    THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
+    HEREUNDER.
+
+Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator
+and subsequent owner(s) (each and all, an "owner") of an original work of
+authorship and/or a database (each, a "Work").
+
+Certain owners wish to permanently relinquish those rights to a Work for
+the purpose of contributing to a commons of creative, cultural and
+scientific works ("Commons") that the public can reliably and without fear
+of later claims of infringement build upon, modify, incorporate in other
+works, reuse and redistribute as freely as possible in any form whatsoever
+and for any purposes, including without limitation commercial purposes.
+These owners may contribute to the Commons to promote the ideal of a free
+culture and the further production of creative, cultural and scientific
+works, or to gain reputation or greater distribution for their Work in
+part through the use and efforts of others.
+
+For these and/or other purposes and motivations, and without any
+expectation of additional consideration or compensation, the person
+associating CC0 with a Work (the "Affirmer"), to the extent that he or she
+is an owner of Copyright and Related Rights in the Work, voluntarily
+elects to apply CC0 to the Work and publicly distribute the Work under its
+terms, with knowledge of his or her Copyright and Related Rights in the
+Work and the meaning and intended legal effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+protected by copyright and related or neighboring rights ("Copyright and
+Related Rights"). Copyright and Related Rights include, but are not
+limited to, the following:
+
+  i. the right to reproduce, adapt, distribute, perform, display,
+     communicate, and translate a Work;
+ ii. moral rights retained by the original author(s) and/or performer(s);
+iii. publicity and privacy rights pertaining to a person's image or
+     likeness depicted in a Work;
+ iv. rights protecting against unfair competition in regards to a Work,
+     subject to the limitations in paragraph 4(a), below;
+  v. rights protecting the extraction, dissemination, use and reuse of data
+     in a Work;
+ vi. database rights (such as those arising under Directive 96/9/EC of the
+     European Parliament and of the Council of 11 March 1996 on the legal
+     protection of databases, and under any national implementation
+     thereof, including any amended or successor version of such
+     directive); and
+vii. other similar, equivalent or corresponding rights throughout the
+     world based on applicable law or treaty, and any national
+     implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention
+of, applicable law, Affirmer hereby overtly, fully, permanently,
+irrevocably and unconditionally waives, abandons, and surrenders all of
+Affirmer's Copyright and Related Rights and associated claims and causes
+of action, whether now known or unknown (including existing as well as
+future claims and causes of action), in the Work (i) in all territories
+worldwide, (ii) for the maximum duration provided by applicable law or
+treaty (including future time extensions), (iii) in any current or future
+medium and for any number of copies, and (iv) for any purpose whatsoever,
+including without limitation commercial, advertising or promotional
+purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
+member of the public at large and to the detriment of Affirmer's heirs and
+successors, fully intending that such Waiver shall not be subject to
+revocation, rescission, cancellation, termination, or any other legal or
+equitable action to disrupt the quiet enjoyment of the Work by the public
+as contemplated by Affirmer's express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason
+be judged legally invalid or ineffective under applicable law, then the
+Waiver shall be preserved to the maximum extent permitted taking into
+account Affirmer's express Statement of Purpose. In addition, to the
+extent the Waiver is so judged Affirmer hereby grants to each affected
+person a royalty-free, non transferable, non sublicensable, non exclusive,
+irrevocable and unconditional license to exercise Affirmer's Copyright and
+Related Rights in the Work (i) in all territories worldwide, (ii) for the
+maximum duration provided by applicable law or treaty (including future
+time extensions), (iii) in any current or future medium and for any number
+of copies, and (iv) for any purpose whatsoever, including without
+limitation commercial, advertising or promotional purposes (the
+"License"). The License shall be deemed effective as of the date CC0 was
+applied by Affirmer to the Work. Should any part of the License for any
+reason be judged legally invalid or ineffective under applicable law, such
+partial invalidity or ineffectiveness shall not invalidate the remainder
+of the License, and in such case Affirmer hereby affirms that he or she
+will not (i) exercise any of his or her remaining Copyright and Related
+Rights in the Work or (ii) assert any associated claims and causes of
+action with respect to the Work, in either case contrary to Affirmer's
+express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+
+ a. No trademark or patent rights held by Affirmer are waived, abandoned,
+    surrendered, licensed or otherwise affected by this document.
+ b. Affirmer offers the Work as-is and makes no representations or
+    warranties of any kind concerning the Work, express, implied,
+    statutory or otherwise, including without limitation warranties of
+    title, merchantability, fitness for a particular purpose, non
+    infringement, or the absence of latent or other defects, accuracy, or
+    the present or absence of errors, whether or not discoverable, all to
+    the greatest extent permissible under applicable law.
+ c. Affirmer disclaims responsibility for clearing rights of other persons
+    that may apply to the Work or any use thereof, including without
+    limitation any person's Copyright and Related Rights in the Work.
+    Further, Affirmer disclaims responsibility for obtaining any necessary
+    consents, permissions or other rights required for any use of the
+    Work.
+ d. Affirmer understands and acknowledges that Creative Commons is not a
+    party to this document and has no duty or obligation with respect to
+    this CC0 or use of the Work.

package/README.md

@@ -0,0 +1,17 @@
+# cleanplate
+
+CleanPlate - Headless React UI Framework
+
+### Components
+
+- Button
+- Typography
+- Badge
+- AppShell
+- Form Controls
+- Icon
+- Modal
+
+### Documentation & Demo
+
+Storybook playground is available at [https://cleanplate.sivadass.in](https://cleanplate.sivadass.in)

package/dist/index.es.js

@@ -0,0 +1 @@
+function e(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}e(".cp-typography{color:red;font-family:inherit;font-size:inherit;line-height:1.5}");e(".cp-app-shell{color:orange;font-family:inherit;font-size:inherit;line-height:1.5}");e(".cp-button{border:1px solid #ccc;border-radius:8px;cursor:pointer;font-family:inherit;font-size:inherit;height:44px;padding:0 16px}");e(".cp-icon{color:red;font-family:inherit;font-size:inherit;line-height:1.5}");e(".cp-badge{color:red;font-family:inherit;font-size:inherit;line-height:1.5}");e(".cp-form-field{font-family:inherit;font-size:inherit;margin-bottom:16px}.cp-form-label{color:#999;display:block;margin-bottom:8px}.cp-form-control{border:1px solid #ccc;border-radius:8px;height:44px;padding:0 16px}.cp-textarea-field textarea{min-height:88px;padding:16px}");

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";function e(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}e(".cp-typography{color:red;font-family:inherit;font-size:inherit;line-height:1.5}");e(".cp-app-shell{color:orange;font-family:inherit;font-size:inherit;line-height:1.5}");e(".cp-button{border:1px solid #ccc;border-radius:8px;cursor:pointer;font-family:inherit;font-size:inherit;height:44px;padding:0 16px}");e(".cp-icon{color:red;font-family:inherit;font-size:inherit;line-height:1.5}");e(".cp-badge{color:red;font-family:inherit;font-size:inherit;line-height:1.5}");e(".cp-form-field{font-family:inherit;font-size:inherit;margin-bottom:16px}.cp-form-label{color:#999;display:block;margin-bottom:8px}.cp-form-control{border:1px solid #ccc;border-radius:8px;height:44px;padding:0 16px}.cp-textarea-field textarea{min-height:88px;padding:16px}");

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "cleanplate",
+  "version": "0.0.1",
+  "description": "CleanPlate - A Headless React UI Framework",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "scripts": {
+    "storybook": "storybook dev -p 6001",
+    "build-storybook": "storybook build",
+    "build-package": "rollup -c"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sivadass/cleanplate.git"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "headless"
+  ],
+  "author": "Sivadass N",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sivadass/cleanplate/issues"
+  },
+  "homepage": "https://github.com/sivadass/cleanplate#readme",
+  "devDependencies": {
+    "@babel/preset-react": "^7.23.3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^7.5.3"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,39 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import terser from "@rollup/plugin-terser";
+import external from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
+import { babel } from "@rollup/plugin-babel";
+// import packageJson from "./package.json";
+
+// const packageJson = require("./package.json");
+
+export default {
+  input: "src/index.js",
+  output: [
+    {
+      file: "dist/index.js",
+      format: "cjs",
+    },
+    {
+      file: "dist/index.es.js",
+      format: "es",
+      exports: "named",
+    },
+  ],
+  plugins: [
+    external(),
+    resolve(),
+    commonjs(),
+    postcss({
+      plugins: [],
+      minimize: true,
+    }),
+    babel({
+      exclude: "node_modules/**",
+      presets: ["@babel/preset-react"],
+      babelHelpers: "bundled",
+    }),
+    terser(),
+  ],
+};

package/src/components/app-shell/AppShell.jsx

@@ -0,0 +1,7 @@
+import "./styles.css";
+
+const AppShell = ({ children }) => {
+  return <div className="cp-app-shell">{children}</div>;
+};
+
+export default AppShell;

package/src/components/app-shell/index.js

@@ -0,0 +1 @@
+export * from "./AppShell.jsx";

package/src/components/app-shell/styles.css

@@ -0,0 +1,6 @@
+.cp-app-shell {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+  color: orange;
+}

package/src/components/badge/Badge.jsx

@@ -0,0 +1,7 @@
+import "./styles.css";
+
+const Badge = ({ label }) => {
+  return <p className="cp-badge">{label}</p>;
+};
+
+export default Badge;

package/src/components/badge/index.js

@@ -0,0 +1 @@
+export * from "./Badge.jsx";

package/src/components/badge/styles.css

@@ -0,0 +1,6 @@
+.cp-badge {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+  color: red;
+}

package/src/components/button/Button.jsx

@@ -0,0 +1,7 @@
+import "./styles.css";
+
+const Button = ({ children }) => {
+  return <button className="cp-button">{children}</button>;
+};
+
+export default Button;

package/src/components/button/index.js

@@ -0,0 +1 @@
+export * from "./Button.jsx";

package/src/components/button/styles.css

@@ -0,0 +1,9 @@
+.cp-button {
+  font-family: inherit;
+  font-size: inherit;
+  border-radius: 8px;
+  height: 44px;
+  padding: 0 16px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}

package/src/components/form-controls/Input.jsx

@@ -0,0 +1,36 @@
+import "./styles.css";
+
+const Input = ({
+  name,
+  id,
+  onChange,
+  defaultValue,
+  value,
+  label = "",
+  isDisabled = false,
+  type = "text",
+  className = "",
+}) => {
+  const fieldWrapperClassName = `cp-form-field cp-input-field ${className}`;
+  return (
+    <div className={fieldWrapperClassName}>
+      {label && <label className="cp-form-label">{label}</label>}
+      <input
+        className="cp-form-control"
+        type={type}
+        disabled={isDisabled}
+        name={name}
+        id={id}
+        defaultValue={defaultValue}
+        value={value}
+        onChange={(e) => {
+          if (onChange) {
+            onChange(e);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default Input;

package/src/components/form-controls/TextArea.jsx

@@ -0,0 +1,36 @@
+import "./styles.css";
+
+const TextArea = ({
+  name,
+  id,
+  onChange,
+  defaultValue,
+  value,
+  label = "",
+  isDisabled = false,
+  type = "text",
+  className = "",
+}) => {
+  const fieldWrapperClassName = `cp-form-field cp-textarea-field ${className}`;
+  return (
+    <div className={fieldWrapperClassName}>
+      {label && <label className="cp-form-label">{label}</label>}
+      <textarea
+        className="cp-form-control"
+        type={type}
+        disabled={isDisabled}
+        name={name}
+        id={id}
+        defaultValue={defaultValue}
+        value={value}
+        onChange={(e) => {
+          if (onChange) {
+            onChange(e);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default TextArea;

package/src/components/form-controls/index.js

@@ -0,0 +1,2 @@
+export * from "./Input.jsx";
+export * from "./TextArea.jsx";

package/src/components/form-controls/styles.css

@@ -0,0 +1,22 @@
+.cp-form-field {
+  font-family: inherit;
+  font-size: inherit;
+  margin-bottom: 16px;
+}
+
+.cp-form-label {
+  display: block;
+  margin-bottom: 8px;
+  color: #999;
+}
+.cp-form-control {
+  height: 44px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  padding: 0 16px;
+}
+
+.cp-textarea-field textarea {
+  min-height: 88px;
+  padding: 16px;
+}

package/src/components/icon/Icon.jsx

@@ -0,0 +1,8 @@
+import "./styles.css";
+
+const Icon = ({ name = "" }) => {
+  const iconName = `cp-icon ${name}`;
+  return <i className={iconName} />;
+};
+
+export default Icon;

package/src/components/icon/index.js

@@ -0,0 +1 @@
+export * from "./Icon.jsx";

package/src/components/icon/styles.css

@@ -0,0 +1,6 @@
+.cp-icon {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+  color: red;
+}

package/src/components/modal/Modal.jsx

@@ -0,0 +1,7 @@
+import "./styles.css";
+
+const Modal = ({ children }) => {
+  return <p className="cp-modal">{children}</p>;
+};
+
+export default Modal;

package/src/components/modal/index.js

@@ -0,0 +1 @@
+export * from "./Modal.jsx";

package/src/components/modal/styles.css

@@ -0,0 +1,6 @@
+.cp-modal {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+  color: red;
+}

package/src/components/typography/Typography.jsx

@@ -0,0 +1,22 @@
+import "./styles.css";
+
+const Typography = ({ children, variant }) => {
+  switch (variant) {
+    case "h1":
+      return <h1 className="cp-typography">{children}</h1>;
+    case "h2":
+      return <h2 className="cp-typography">{children}</h2>;
+    case "h3":
+      return <h3 className="cp-typography">{children}</h3>;
+    case "h4":
+      return <h4 className="cp-typography">{children}</h4>;
+    case "h5":
+      return <h5 className="cp-typography">{children}</h5>;
+    case "h6":
+      return <h6 className="cp-typography">{children}</h6>;
+    default:
+      return <p className="cp-typography">{children}</p>;
+  }
+};
+
+export default Typography;

package/src/components/typography/index.js

@@ -0,0 +1 @@
+export * from "./Typography.jsx";

package/src/components/typography/styles.css

@@ -0,0 +1,6 @@
+.cp-typography {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+  color: red;
+}

package/src/index.js

@@ -0,0 +1,6 @@
+export * from "./components/typography/index";
+export * from "./components/app-shell/index";
+export * from "./components/button/index";
+export * from "./components/icon/index";
+export * from "./components/badge/index";
+export * from "./components/form-controls/index";

package/src/stories/button.stories.jsx

@@ -0,0 +1,12 @@
+import Button from "../components/button/Button";
+
+const meta = {
+  component: Button,
+};
+
+export const Default = {
+  name: "Primary",
+  render: () => <Button>Save</Button>,
+};
+
+export default meta;

package/src/stories/icon.stories.jsx

@@ -0,0 +1,13 @@
+import Icon from "../components/icon/Icon";
+
+const meta = {
+  component: Icon,
+};
+
+export const Default = {
+  name: "Default",
+  description: "Name of the icon",
+  render: () => <Icon name="text" />,
+};
+
+export default meta;

package/src/stories/typography.stories.jsx

@@ -0,0 +1,36 @@
+import Typography from "../components/typography/Typography";
+
+const meta = {
+  component: Typography,
+};
+
+export const H1 = {
+  name: "Title - H1",
+  render: () => <Typography variant="h1">Hello world!</Typography>,
+};
+
+export const H2 = {
+  render: () => <Typography variant="h2">Hello world!</Typography>,
+};
+
+export const H3 = {
+  render: () => <Typography variant="h3">Hello world!</Typography>,
+};
+
+export const H4 = {
+  render: () => <Typography variant="h4">Hello world!</Typography>,
+};
+
+export const H5 = {
+  render: () => <Typography variant="h5">Hello world!</Typography>,
+};
+
+export const H6 = {
+  render: () => <Typography variant="h6">Hello world!</Typography>,
+};
+
+export const Paragraph = {
+  render: () => <Typography>Hello world!</Typography>,
+};
+
+export default meta;

package/website/assets/images/cleanplate-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path fill="#222" d="M61.543 19.703A32 32 0 1 1 31.989 0c4.23-.012 8.42.828 12.32 2.469a2.286 2.286 0 0 1 1.234 2.994 2.286 2.286 0 0 1-2.994 1.211A27.429 27.429 0 1 0 57.314 21.44a2.285 2.285 0 1 1 4.229-1.737ZM43.417 9.143a6.857 6.857 0 0 0 6.857-6.857 2.286 2.286 0 0 1 4.572 0 6.857 6.857 0 0 0 6.857 6.857 2.286 2.286 0 1 1 0 4.571 6.857 6.857 0 0 0-6.857 6.857 2.286 2.286 0 1 1-4.572 0 6.857 6.857 0 0 0-6.857-6.857 2.285 2.285 0 1 1 0-4.571Zm6.857 2.286c.867.65 1.636 1.42 2.286 2.285.65-.866 1.42-1.636 2.286-2.285a11.433 11.433 0 0 1-2.286-2.286c-.65.866-1.42 1.636-2.286 2.286Zm0 20.571a18.286 18.286 0 1 1-36.572 0 18.286 18.286 0 0 1 36.572 0Zm-4.571 0a13.715 13.715 0 1 0-27.43 0 13.715 13.715 0 0 0 27.43 0Z"/></svg>

package/website/assets/images/cleanplate-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="166" height="32" fill="none"><path fill="#222" d="M30.771 9.851A16 16 0 1 1 15.994.001c2.116-.007 4.21.413 6.16 1.233a1.143 1.143 0 0 1 .617 1.497 1.143 1.143 0 0 1-1.497.606 13.714 13.714 0 1 0 7.383 7.383 1.143 1.143 0 0 1 2.114-.869Zm-9.062-5.28a3.428 3.428 0 0 0 3.428-3.428 1.143 1.143 0 1 1 2.286 0A3.428 3.428 0 0 0 30.85 4.57a1.143 1.143 0 1 1 0 2.286 3.428 3.428 0 0 0-3.428 3.429 1.143 1.143 0 0 1-2.286 0 3.428 3.428 0 0 0-3.428-3.429 1.143 1.143 0 0 1 0-2.286Zm3.428 1.143c.433.325.818.71 1.143 1.143.325-.433.71-.818 1.143-1.143a5.714 5.714 0 0 1-1.143-1.143c-.325.434-.71.818-1.143 1.143Zm0 10.286A9.143 9.143 0 1 1 6.85 16a9.143 9.143 0 0 1 18.287 0Zm-2.286 0a6.857 6.857 0 1 0-13.714 0 6.857 6.857 0 0 0 13.714 0Z"/><path fill="#000" d="M60.315 13h-2.113a4.394 4.394 0 0 0-1.782-2.761 4.776 4.776 0 0 0-1.457-.716 5.82 5.82 0 0 0-1.67-.239c-1.057 0-2.015.267-2.873.801-.852.534-1.53 1.321-2.037 2.361-.5 1.04-.75 2.315-.75 3.827 0 1.511.25 2.787.75 3.826.506 1.04 1.185 1.827 2.037 2.361.858.534 1.816.801 2.873.801.58 0 1.136-.08 1.67-.238a4.888 4.888 0 0 0 1.457-.708 4.477 4.477 0 0 0 1.781-2.77h2.114a7.038 7.038 0 0 1-.869 2.395 6.544 6.544 0 0 1-1.568 1.799 6.867 6.867 0 0 1-2.105 1.116c-.773.256-1.6.384-2.48.384-1.489 0-2.813-.364-3.972-1.091-1.16-.727-2.071-1.762-2.736-3.102-.665-1.341-.997-2.932-.997-4.773 0-1.841.332-3.432.997-4.773.665-1.34 1.577-2.375 2.736-3.102 1.16-.728 2.483-1.091 3.972-1.091.88 0 1.707.128 2.48.383.778.256 1.48.631 2.105 1.125a6.428 6.428 0 0 1 1.568 1.79c.42.699.71 1.497.87 2.395Zm5.154-5.455V25h-2.01V7.545h2.01Zm9.173 17.728c-1.261 0-2.35-.279-3.264-.835-.91-.563-1.611-1.347-2.105-2.353-.489-1.011-.733-2.187-.733-3.528 0-1.341.244-2.523.733-3.546.494-1.028 1.181-1.83 2.062-2.403.887-.58 1.92-.87 3.103-.87.681 0 1.355.114 2.02.341.664.228 1.27.597 1.815 1.108.545.506.98 1.177 1.304 2.012.324.835.486 1.864.486 3.085v.852H69.972v-1.738h8.045c0-.739-.148-1.398-.443-1.977a3.34 3.34 0 0 0-1.245-1.373c-.533-.335-1.164-.502-1.891-.502-.802 0-1.495.198-2.08.596a3.925 3.925 0 0 0-1.338 1.534 4.507 4.507 0 0 0-.469 2.028v1.16c0 .988.17 1.826.511 2.514.347.682.827 1.201 1.44 1.56.615.352 1.328.528 2.14.528.529 0 1.006-.074 1.432-.222.432-.153.804-.38 1.116-.681.313-.307.554-.688.725-1.142l1.943.545a4.309 4.309 0 0 1-1.031 1.738c-.483.495-1.08.881-1.79 1.16-.71.272-1.509.409-2.395.409Zm12.332.034c-.83 0-1.582-.156-2.258-.469a3.876 3.876 0 0 1-1.61-1.372c-.399-.602-.597-1.33-.597-2.182 0-.75.147-1.358.443-1.824.295-.471.69-.84 1.184-1.108a6.224 6.224 0 0 1 1.637-.596 19.926 19.926 0 0 1 1.815-.324c.796-.102 1.44-.18 1.935-.23.5-.057.863-.15 1.09-.282.234-.13.35-.358.35-.681v-.069c0-.84-.23-1.494-.69-1.96-.455-.466-1.145-.699-2.071-.699-.96 0-1.713.21-2.259.631-.545.42-.929.87-1.15 1.347l-1.91-.682c.341-.796.796-1.415 1.364-1.858a5.109 5.109 0 0 1 1.875-.938 7.78 7.78 0 0 1 2.011-.272c.421 0 .904.05 1.45.153a4.635 4.635 0 0 1 1.593.605c.517.307.946.77 1.287 1.39.341.619.511 1.448.511 2.488V25h-2.01v-1.773h-.103c-.137.284-.364.588-.682.912-.318.324-.742.6-1.27.827-.528.227-1.173.34-1.935.34Zm.307-1.807c.796 0 1.466-.156 2.012-.469.55-.312.965-.716 1.244-1.21a3.084 3.084 0 0 0 .426-1.56v-1.84c-.085.102-.273.195-.562.28-.284.08-.614.151-.99.214-.368.057-.73.108-1.082.153-.346.04-.627.074-.843.102a7.678 7.678 0 0 0-1.466.333c-.449.148-.813.372-1.091.673-.273.296-.41.699-.41 1.21 0 .7.26 1.228.776 1.586.523.352 1.185.528 1.986.528Zm11.376-6.375V25h-2.011V11.91h1.943v2.044h.17a3.74 3.74 0 0 1 1.398-1.602c.625-.409 1.432-.613 2.42-.613.887 0 1.662.181 2.327.545.665.358 1.182.903 1.551 1.636.37.728.554 1.648.554 2.762V25h-2.011v-8.182c0-1.028-.267-1.83-.801-2.403-.534-.58-1.267-.87-2.199-.87-.642 0-1.216.14-1.722.418a2.99 2.99 0 0 0-1.184 1.219c-.29.534-.435 1.182-.435 1.943Zm12.3 7.875V7.545h5.898c1.369 0 2.489.248 3.358.742.875.489 1.523 1.15 1.943 1.986.421.835.631 1.767.631 2.795 0 1.029-.21 1.963-.631 2.804-.415.841-1.057 1.512-1.926 2.012-.869.494-1.983.741-3.341.741h-4.227V16.75h4.159c.938 0 1.69-.162 2.259-.486.568-.324.98-.761 1.235-1.312.262-.557.392-1.185.392-1.884 0-.699-.13-1.324-.392-1.875-.255-.551-.67-.983-1.244-1.295-.574-.318-1.335-.478-2.284-.478h-3.716V25h-2.114ZM127.93 7.545V25h-2.011V7.545h2.011Zm7.537 17.762c-.83 0-1.583-.156-2.259-.469a3.88 3.88 0 0 1-1.611-1.372c-.397-.602-.596-1.33-.596-2.182 0-.75.147-1.358.443-1.824a3.12 3.12 0 0 1 1.185-1.108 6.213 6.213 0 0 1 1.636-.596 19.899 19.899 0 0 1 1.815-.324 82.224 82.224 0 0 1 1.935-.23c.5-.057.864-.15 1.091-.282.233-.13.349-.358.349-.681v-.069c0-.84-.23-1.494-.69-1.96-.455-.466-1.145-.699-2.071-.699-.96 0-1.713.21-2.259.631-.545.42-.929.87-1.15 1.347l-1.909-.682c.341-.796.795-1.415 1.363-1.858a5.112 5.112 0 0 1 1.875-.938 7.788 7.788 0 0 1 2.012-.272c.42 0 .903.05 1.449.153a4.63 4.63 0 0 1 1.593.605c.517.307.946.77 1.287 1.39.341.619.512 1.448.512 2.488V25h-2.012v-1.773h-.102c-.136.284-.364.588-.682.912-.318.324-.741.6-1.27.827-.528.227-1.173.34-1.934.34Zm.306-1.807c.796 0 1.466-.156 2.012-.469.551-.312.966-.716 1.244-1.21a3.085 3.085 0 0 0 .426-1.56v-1.84c-.085.102-.272.195-.562.28-.284.08-.614.151-.989.214-.369.057-.73.108-1.082.153-.347.04-.628.074-.844.102a7.682 7.682 0 0 0-1.466.333c-.449.148-.812.372-1.091.673-.273.296-.409.699-.409 1.21 0 .7.259 1.228.776 1.586.522.352 1.184.528 1.985.528Zm15.058-11.59v1.704h-6.784v-1.705h6.784Zm-4.807-3.137h2.012V21.25c0 .568.082.994.247 1.278.17.279.386.466.647.563.267.09.549.136.844.136.222 0 .404-.011.546-.034l.341-.068.409 1.807a4.116 4.116 0 0 1-.571.153 4.21 4.21 0 0 1-.929.085 4.05 4.05 0 0 1-1.671-.366 3.315 3.315 0 0 1-1.346-1.116c-.353-.5-.529-1.131-.529-1.892V8.773Zm13.181 16.5c-1.262 0-2.35-.279-3.265-.835-.909-.563-1.61-1.347-2.105-2.353-.488-1.011-.733-2.187-.733-3.528 0-1.341.245-2.523.733-3.546.495-1.028 1.182-1.83 2.063-2.403.886-.58 1.92-.87 3.102-.87.682 0 1.355.114 2.02.341.665.228 1.27.597 1.815 1.108.546.506.98 1.177 1.304 2.012.324.835.486 1.864.486 3.085v.852h-10.091v-1.738h8.046c0-.739-.148-1.398-.444-1.977a3.332 3.332 0 0 0-1.244-1.373c-.534-.335-1.165-.502-1.892-.502-.801 0-1.494.198-2.08.596a3.933 3.933 0 0 0-1.338 1.534 4.513 4.513 0 0 0-.468 2.028v1.16c0 .988.17 1.826.511 2.514.347.682.827 1.201 1.44 1.56.614.352 1.327.528 2.14.528a4.35 4.35 0 0 0 1.431-.222 3.07 3.07 0 0 0 1.117-.681c.312-.307.554-.688.724-1.142l1.943.545a4.301 4.301 0 0 1-1.031 1.738 5.02 5.02 0 0 1-1.79 1.16c-.71.272-1.508.409-2.394.409Z"/></svg>

package/website/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="icon" href="./favicon.ico" />
+    <title>CleanPlate - React UI Framework</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <main>
+      <div class="container">
+        <a href="/index.html" title="CleanPlate">
+          <img
+            class="logo"
+            src="./assets/images/cleanplate-logo.svg"
+            alt="CleanPlate"
+          />
+        </a>
+        <h1>React UI Framework</h1>
+        <p>Coming soon!</p>
+      </div>
+    </main>
+    <footer>
+      <p>
+        <span>
+          &copy; 2024 <a href="/index.html">CleanPlate</a> - React UI Framework
+        </span>
+        <span> | </span>
+        <span>
+          Made with ❤️ by <a href="https://sivadass.in">Sivadass</a>
+        </span>
+      </p>
+    </footer>
+  </body>
+</html>

package/website/style.css

@@ -0,0 +1,42 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  text-align: center;
+}
+
+main {
+  display: flex;
+  min-height: calc(100vh - 64px);
+  align-items: center;
+  justify-content: center;
+  padding: 0 32px;
+}
+
+a {
+  text-decoration: none;
+  color: #4099ff;
+}
+
+.logo {
+  display: block;
+  width: 100%;
+  max-width: 300px;
+  margin: 0 auto 32px auto;
+}
+
+h1 {
+  margin-bottom: 16px;
+}
+
+footer {
+  margin: 16px 0;
+  height: 32px;
+  line-height: 32px;
+  font-size: 14px;
+}