v2.2.0

Author: marta-ko

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-demos
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/pre-commit

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+npx lint-staged

.prettierrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+    singleQuote: true,
+    semi: true,
+    useTabs: false,
+    tabWidth: 2,
+    trailingComma: 'all',
+  };

README.md

@@ -0,0 +1,53 @@
+<div align="center">
+	
+# SVAR React Core | UI Component Library
+
+</div>
+
+<div align="center">
+
+[Website](https://svar.dev/react/core/) • [Getting Started](https://docs.svar.dev/react/core/getting_started/) • [Demos](https://docs.svar.dev/react/core/samples/#/calendar/willow)
+
+</div>
+
+<div align="center">
+
+[![npm](https://img.shields.io/npm/v/@svar-ui/react-core.svg)](https://www.npmjs.com/package/@svar-ui/react-core)
+[![License](https://img.shields.io/github/license/svar-widgets/core)](https://github.com/svar-widgets/core/blob/main/license.txt)
+[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/react-core.svg)](https://www.npmjs.com/package/@svar-ui/react-core)
+
+</div>
+
+**SVAR React Core** is a lightweight, fast, and mobile-friendly React component library that offers 20+ reusable, pre-styled UI components. It includes form controls, popups, date & time pickers, toast notifications, and more. The components are easily customizable and come with built-in light and dark themes.
+
+<div align="center">
+	
+<img src="https://svar.dev/images/github/github-core.png" alt="SVAR Core - React UI Library" style="width: 752px;">
+
+</div>
+
+</br>
+
+Along with the **Core** library, you can use the following SVAR React components to build a unified app interface:
+
+- [Menu](https://github.com/svar-widgets/react-menu) - create basic menu bar, actions or context menu;
+- [Toolbar](https://github.com/svar-widgets/react-toolbar) - create button and icon panels with configurable, responsive layouts;
+- [Tasklist](https://github.com/svar-widgets/react-tasklist) - basic to-do list component to add, edit, check or delete tasks;
+- [Comments](https://github.com/svar-widgets/react-comments) - nice-looking comments section with bubbles or flow views;
+- [File uploader](https://github.com/svar-widgets/react-uploader) - simple file uploader component.
+
+### :hammer_and_wrench: How to Use
+
+To start using the components from the **Core** package, simply import the package and include the desired component in your React file:
+
+```jsx
+import { Button } from "@svar-ui/react-core";
+
+const myComponent => (<Button>Click me</Button>);
+```
+
+See the [getting started guide](https://docs.svar.dev/react/core/getting_started/) to quickly set up and begin using SVAR Core components in your React projects.
+
+### :speech_balloon: Need Help?
+
+[Post an Issue](https://github.com/svar-widgets/react-core/issues/) or use our [community forum](https://forum.svar.dev).

demos/assets/icons/GitHubLogo.svg

@@ -0,0 +1,2 @@
+export { default as GitHubLogoIcon } from './GitHubLogo.svg';
+export { default as LogoIcon } from './Logo.svg';

demos/assets/icons/Logo.svg

@@ -0,0 +1,17 @@
+.demo-box.wx-1n1s96 {
+  padding: 2rem;
+  margin: 2rem 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background: #ffffff;
+}
+
+.demo-box.wx-1n1s96 h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: #374151;
+}
+
+.demo-box.wx-1n1s96 button {
+  margin-right: 1rem;
+}

demos/assets/icons/index.js

@@ -0,0 +1,50 @@
+import { useContext } from 'react';
+import { Button, Segmented, Calendar, context } from '../../src/index';
+
+const Basic = () => {
+  const { showNotice } = useContext(context.helpers);
+
+  const onClick = () => {
+    showNotice({
+      text: 'Button clicked',
+    });
+  };
+
+  return (
+    <>
+      <div className="wx-1n1s96 demo-box">
+        <h3>Buttons</h3>
+        <Button onClick={onClick} type="primary">
+          Primary
+        </Button>{' '}
+        <Button onClick={onClick} type="secondary">
+          Secondary
+        </Button>{' '}
+        <Button onClick={onClick} type="danger">
+          Danger
+        </Button>
+      </div>
+
+      <div className="wx-1n1s96 demo-box">
+        <h3>Segmented</h3>
+        <Segmented
+          value="2"
+          options={[
+            { id: '1', label: 'One' },
+            { id: '2', label: 'Two' },
+            { id: '3', label: 'Three' },
+          ]}
+        ></Segmented>
+      </div>
+
+      <div className="wx-1n1s96 demo-box">
+        <h3>Calendar</h3>
+        <div style={{ width: '280px' }}>
+          <Calendar value={new Date(2025, 4, 1)} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Basic;

demos/cases/Basic.css

@@ -0,0 +1,7 @@
+.demo-box.wx-kfse34 {
+  margin-bottom: 1rem;
+}
+
+.demo-box.wx-kfse34:last-child {
+  margin-bottom: 0;
+}