11 | {children}
12 |
13 | );
14 | };
15 |
16 | export default Label;
17 |
--------------------------------------------------------------------------------
/src/Icons/jsx/LanguageJa.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | const SvgLanguageJa = (props: React.SVGProps-
11 | {children}
12 |
11 | {children}
12 |
13 | );
14 | };
15 |
16 | export default DialogActions;
17 |
--------------------------------------------------------------------------------
/src/DialogContent/DialogContent.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLAttributes } from 'react';
2 | import cx from 'clsx';
3 |
4 | export interface DialogContentProps extends HTMLAttributes
11 | {children}
12 |
13 | );
14 | };
15 |
16 | export default DialogContent;
17 |
--------------------------------------------------------------------------------
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 |
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 |
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 |
--------------------------------------------------------------------------------
/src/Icons/jsx/CheckIcon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | const SvgCheckIcon = (props: React.SVGProps
14 | {children}
15 |
16 | );
17 | };
18 |
19 | export default FormRow;
20 |
--------------------------------------------------------------------------------
/src/Icons/jsx/ExternalIcon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | const SvgExternalIcon = (props: React.SVGProps
10 | {iconKeys.map((iconKey, index) => {
11 | const Component = icons[iconKey];
12 | return ;
13 | })}
14 |
15 | )
16 | }
17 |
18 | export default IconsGrid;
19 |
--------------------------------------------------------------------------------
/src/Icons/svg/search_icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/docs/radio.mdx:
--------------------------------------------------------------------------------
1 | import { Radio, FormRow } from '../../src/ui';
2 |
3 | # Radio
4 |
5 |
12 |
15 | );
16 | };
17 |
18 | export default DialogIcon;
19 |
--------------------------------------------------------------------------------
/src/Icons/svg/business_icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Icons/jsx/BusinessIcon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | const SvgBusinessIcon = (props: React.SVGProps
14 | ●●●●
15 | {!short && ●●●●}
16 | {!short && ●●●●}
17 | {digits || '●●●●'}
18 |
19 | );
20 | };
21 |
22 | export default CardMask;
23 |
--------------------------------------------------------------------------------
/src/Icons/svg/device_active_icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Icons/jsx/CopyIcon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | const SvgCopyIcon = (props: React.SVGProps
6 | Panel Content
7 | Panel Content
8 | Panel as Link
9 | Outline Panel
10 |
11 |
12 | ```
13 |
16 |
22 | );
23 |
24 | export default Layout;
25 |
--------------------------------------------------------------------------------
/src/Icons/svg/download_icon.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
1 | name: "CodeQL Code Checks"
2 |
3 | on:
4 | push:
5 | branches: [ "master" ]
6 | pull_request:
7 | branches: [ "master" ]
8 |
9 | jobs:
10 | analyze:
11 | name: Analyze
12 | runs-on: ubuntu-latest
13 | permissions:
14 | actions: read
15 | contents: read
16 | security-events: write
17 |
18 | strategy:
19 | fail-fast: false
20 | matrix:
21 | language: [ 'javascript' ]
22 |
23 | steps:
24 | - name: Checkout repository
25 | uses: actions/checkout@v3
26 |
27 | - name: Initialize CodeQL
28 | uses: github/codeql-action/init@v2
29 | with:
30 | languages: ${{ matrix.language }}
31 |
32 | - name: Perform CodeQL Analysis
33 | uses: github/codeql-action/analyze@v2
34 |
--------------------------------------------------------------------------------
/pages/docs/index.mdx:
--------------------------------------------------------------------------------
1 | # Installation
2 | ##### Install with npm:
3 | ```bash
4 | npm install --save @macpaw/macpaw-ui
5 | ```
6 |
7 | ##### or with yarn:
8 | ```bash
9 | yarn add @macpaw/macpaw-ui
10 | ```
11 |
12 | ##### And import stylesheets manually:
13 | ```js
14 | import '@macpaw/macpaw-ui/lib/ui.css'
15 | ```
16 |
17 | ## Adding new Icons
18 | - Add Component's JSX and styles to [src/%ComponentName%](https://github.com/MacPaw/macpaw-ui/tree/master/src) directory
19 | - Import Component's JS, styles to [ui.js](https://github.com/MacPaw/macpaw-ui/blob/master/src/ui.js) and [ui.scss](https://github.com/MacPaw/macpaw-ui/blob/master/src/ui.scss) correspondingly
20 | - Add document page in:
21 | ```
22 | /pages/%component-name%.mdx
23 | ```
24 |
25 | ## Requirements
26 | - Node 20+
27 | - npm 10+
28 | - React.js 19.2+
29 |
30 |
--------------------------------------------------------------------------------
/src/Icons/jsx/DeviceActiveIcon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | const SvgDeviceActiveIcon = (props: React.SVGProps
19 | {children}
20 |
21 |
20 | {icon &&
24 | );
25 | };
26 |
27 | export default Banner;
28 |
--------------------------------------------------------------------------------
/src/Icons/jsx/MenuIcon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | const SvgMenuIcon = (props: React.SVGProps{icon}
}
21 | {children}
22 | {action && {action}
}
23 | Default
7 |Disabled
12 |Error
17 |With handler
22 |With Label
27 |Default
33 |Disabled
38 |Error
43 |With handler
48 |With Label
53 |
14 | {tokens.map((line, i) => (
15 |
16 | {line.map((token, key) => (
17 |
18 | ))}
19 |
20 | ))}
21 |
22 | )}
23 | {
23 | if (event.key === 'Enter') onTrigger(event);
24 | }}
25 | {...other}
26 | >
27 | {children}
28 |
29 | );
30 | };
31 |
32 | export default AccordionTrigger;
33 |
--------------------------------------------------------------------------------
/src/Grid/Grid.tsx:
--------------------------------------------------------------------------------
1 | import React, { ElementType, ReactNode } from 'react';
2 | import Panel, { PanelProps } from '../Panel/Panel';
3 |
4 | interface Grid extends PanelProps {
5 | icon?: ReactNode;
6 | action?: ReactNode;
7 | notification?: ReactNode;
8 | component?: ReactNode;
9 | }
10 |
11 | const Grid: React.FC
21 | {icon &&
25 | {notification && {icon}
}
22 | {children}
23 | {action}
24 | {notification}
}
26 |
10 |
11 | MacPaw UI Kit
12 |
13 |
33 | );
34 | };
35 |
36 | export default Navigation;
37 |
--------------------------------------------------------------------------------
/src/DropdownItem/DropdownItem.tsx:
--------------------------------------------------------------------------------
1 | import React, { ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
2 | import cx from 'clsx';
3 |
4 | export interface DropdownItem extends ButtonHTMLAttributes
14 |
19 | Installation
20 |
21 | {[...pages].sort().map((link) => (
22 |
28 | {link.replaceAll("-", " ")}
29 |
30 | ))}
31 |
32 |
31 | {children}
32 |
33 | );
34 | };
35 |
36 | export default TabList;
37 |
--------------------------------------------------------------------------------
/src/Icons/jsx/UserIcon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | const SvgUserIcon = (props: React.SVGProps
6 |
23 |
24 | ```
25 |
15 |
32 |
33 | );
34 | };
35 |
36 | export default Loader;
37 |
--------------------------------------------------------------------------------
/internal/HomePage/HomePage.js:
--------------------------------------------------------------------------------
1 | import styles from './homePage.module.css';
2 | import Button from '../../src/Button/Button';
3 | import Link from 'next/link';
4 |
5 | export default function HomePage() {
6 | return (
7 |
8 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/internal/Palette/Palette.module.css:
--------------------------------------------------------------------------------
1 | .palette {
2 | display: grid;
3 | grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
4 | column-gap: 32px;
5 | row-gap: 32px;
6 | }
7 |
8 | .palette:not(:last-child) {
9 | margin-bottom: 64px;
10 | }
11 |
12 | .paletteCell {
13 | border-radius: 20px;
14 | height: 100px;
15 | overflow: hidden;
16 | }
17 |
18 | .paletteColor {
19 | height: 100%;
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | }
24 |
25 | .paletteText {
26 | margin-top: 6px;
27 | font-size: 12px;
28 | font-weight: 600;
29 | text-align: center;
30 | }
31 |
32 | .paletteGradients {
33 | grid-template-columns: 1fr 1fr;
34 | }
35 |
36 | .paletteGradients .paletteCell {
37 | display: flex;
38 | }
39 |
40 | .paletteGradients .paletteColor {
41 | width: 160px;
42 | }
43 |
44 | .paletteGradient {
45 | position: relative;
46 | flex: 1;
47 | min-width: 300px;
48 | }
49 |
50 | .paletteGradientColor {
51 | position: absolute;
52 | top: 50%;
53 | transform: translateY(-50%);
54 | }
55 |
56 | .paletteGradientColor:first-child {
57 | left: 48px;
58 | }
59 |
60 | .paletteGradientColor:last-child {
61 | right: 48px;
62 | }
63 |
64 | @media screen and (max-width: 1024px) {
65 | .paletteGradients {
66 | grid-template-columns: 1fr;
67 | overflow: scroll;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/Dialog/Dialog.scss:
--------------------------------------------------------------------------------
1 | .dialog {
2 | display: flex;
3 | flex-direction: column;
4 | position: relative;
5 | width: 100%;
6 | margin: auto;
7 | max-width: 736px;
8 | max-height: 100%;
9 | background: #f7f7f7;
10 | border-radius: 20px;
11 |
12 | @include mobile {
13 | height: 100%;
14 | max-width: none;
15 | max-height: none;
16 | border-radius: 0;
17 | }
18 |
19 | &-root {
20 | position: fixed;
21 | z-index: 9000;
22 | top: 0;
23 | left: 0;
24 | bottom: 0;
25 | right: 0;
26 | padding: 16px;
27 | display: flex;
28 | align-items: center;
29 | justify-content: center;
30 |
31 | @include mobile {
32 | padding: 0;
33 | }
34 | }
35 |
36 | &-overlay {
37 | position: fixed;
38 | top: 0;
39 | left: 0;
40 | bottom: 0;
41 | right: 0;
42 | background-color: rgba(218, 218, 218, .72);
43 |
44 | &:focus {
45 | outline: none;
46 | }
47 | }
48 |
49 | &-close {
50 | display: inline-flex;
51 | position: absolute;
52 | left: 6px;
53 | top: 6px;
54 | padding: 12px;
55 | border-radius: 20px;
56 | border: none;
57 | background: none;
58 | cursor: pointer;
59 | outline: none;
60 |
61 | &:focus {
62 | box-shadow: 0 0 0 3px var(--color-outline);
63 | }
64 | }
65 |
66 | >form {
67 | display: contents;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/pages/docs/table.mdx:
--------------------------------------------------------------------------------
1 | import { Table, TableRow } from '../../src/ui';
2 |
3 | # Table
4 |
5 |
9 |
36 |
10 |
35 | MacPaw UI
11 | 12 | With MacPaw's UI Library, you're not just building interfaces; 13 | you're crafting experiences. 14 | 15 |
16 |
17 |
18 |
19 |
20 |
28 | }
29 | >
30 | Github
31 |
32 |
33 |
34 | | Date | 9 |Description | 10 |Status | 11 |Amount | 12 |Sep 4, 2020 | 17 |Payment | 18 |Successful | 19 |$20.00 | 20 |Sep 4, 2020 | 23 |Payment | 24 |Successful | 25 |$20.00 | 26 |
|---|
| Date | 35 |Description | 36 |Status | 37 |Amount | 38 |Sep 4, 2020 | 43 |Payment | 44 |Successful | 45 |$20.00 | 46 |Sep 4, 2020 | 49 |Payment | 50 |Successful | 51 |$20.00 | 52 |
|---|
10 |
18 | 
19 |
20 | }
21 | position="right"
22 | className={styles.dropdown}
23 | >
24 |
30 | Installation
31 |
32 | {[...pages].sort().map((link) => (
33 |
40 | {link.replaceAll("-", " ")}
41 |
42 | ))}
43 |
44 |
45 | );
46 | };
47 |
48 | export default MobileNavigation;
49 |
--------------------------------------------------------------------------------
/src/Table/Table.scss:
--------------------------------------------------------------------------------
1 | .table {
2 | border-collapse: separate;
3 | border-spacing: 0;
4 | width: 100%;
5 | font-size: 14px;
6 |
7 | th, td {
8 | padding: 32px 18px;
9 |
10 | &:first-child,
11 | &:last-child {
12 | border-bottom: none;
13 | width: 36px;
14 | }
15 |
16 | &:nth-child(2) {
17 | padding-left: 0;
18 | }
19 |
20 | &:nth-last-child(2) {
21 | padding-right: 0;
22 | }
23 | }
24 |
25 | th {
26 | padding-bottom: 16px;
27 | font-size: 12px;
28 | font-weight: 400;
29 | color: var(--color-black-48);
30 | text-align: left;
31 | }
32 |
33 | td {
34 | border-bottom: 2px solid var(--color-black-08);
35 | }
36 |
37 | tr:last-child {
38 | td {
39 | border-bottom: none;
40 | }
41 | }
42 |
43 | tbody {
44 | td {
45 | &:first-child {
46 | border-left: 2px solid var(--color-black-08);
47 | }
48 | &:last-child {
49 | border-right: 2px solid var(--color-black-08);
50 | }
51 | }
52 | tr {
53 | &:first-child td {
54 | border-top: 2px solid var(--color-black-08);
55 | &:first-child {
56 | border-top-left-radius: 50px;
57 | }
58 | &:last-child {
59 | border-top-right-radius: 50px;
60 | }
61 | }
62 | &:last-child td {
63 | border-bottom: 2px solid var(--color-black-08);
64 | &:first-child {
65 | border-bottom-left-radius: 50px;
66 | }
67 | &:last-child {
68 | border-bottom-right-radius: 50px;
69 | }
70 | }
71 | }
72 | }
73 | }
--------------------------------------------------------------------------------
/src/Icons/svg/help_icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/docs/typography.mdx:
--------------------------------------------------------------------------------
1 | import { Label } from '../../src/ui';
2 |
3 | # Typography
4 |
5 |
11 |
12 |
15 |
19 |
20 | }
21 | position="right"
22 | className={styles.dropdown}
23 | >
24 | H1 Title 40px
6 |H2 Title 32px
7 |H3 Title 24px
8 |H4 Title 20px
9 |H5 Title 16px
10 |H6 Title 14px
11 | 12 | ``` 13 |H1 Title 40px
14 |H2 Title 32px
15 |H3 Title 24px
16 |H4 Title 20px
17 |H5 Title 16px
18 |H6 Title 14px
19 | ``` 20 | 21 | ## Subtitle 22 | 23 |H2 Subtitle 32px
24 |H3 Subtitle 24px
25 |H4 Subtitle 20px
26 | 27 | ``` 28 |H2 Subtitle 32px
29 |H3 Subtitle 24px
30 |H4 Subtitle 20px
31 | ``` 32 | 33 | ## Paragraph 34 | 35 |p1 The quick brown fox jumps over the lazy dog. 1234567890 18px
36 |p2 The quick brown fox jumps over the lazy dog. 1234567890 16px
37 |p3 The quick brown fox jumps over the lazy dog. 1234567890 14px
38 |p4 The quick brown fox jumps over the lazy dog. 1234567890 12px
39 | 40 | ``` 41 |p1 The quick brown fox jumps over the lazy dog. 1234567890 18px
42 |p2 The quick brown fox jumps over the lazy dog. 1234567890 16px
43 |p3 The quick brown fox jumps over the lazy dog. 1234567890 14px
44 |p4 The quick brown fox jumps over the lazy dog. 1234567890 12px
45 | ``` 46 | 47 | ## Label 48 | 49 | 50 | 51 | ``` 52 | 53 | ``` 54 | -------------------------------------------------------------------------------- /internal/Palette/Palette.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Palette.module.css'; 3 | 4 | const getTextColor = (value) => { 5 | const darkText = [ 6 | '--color-white', 7 | '--color-attention', 8 | ]; 9 | return darkText.includes(value) ? '#000' : '#fff'; 10 | }; 11 | 12 | export default function Palette ({ items }) { 13 | const withGradients = items.find((item) => item.gradient); 14 | 15 | return ( 16 |
17 | {items.map((item) => {
18 | const { name, color, gradient } = item;
19 | const colorStyle = {
20 | backgroundColor: `var(${color[0]})`,
21 | color: getTextColor(color[0]),
22 | };
23 | let gradientStyle;
24 | if (gradient) {
25 | gradientStyle = {
26 | backgroundImage: `var(${gradient[0]})`,
27 | };
28 | }
29 | return (
30 |
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/src/Switch/Switch.scss:
--------------------------------------------------------------------------------
1 | .switch {
2 | display: inline-flex;
3 | position: relative;
4 | user-select: none;
5 | align-items: center;
6 |
7 | &.-error {
8 | color: var(--color-error);
9 |
10 | .switch-track {
11 | box-shadow: 0 0 0 2px var(--color-error);
12 | }
13 | }
14 |
15 | input {
16 | position: absolute;
17 | opacity: 0;
18 | z-index: 1;
19 | cursor: pointer;
20 | width: 106%;
21 | height: 106%;
22 | margin: 0;
23 | left: -3%;
24 | top: -3%;
25 |
26 | &:checked + .switch-track {
27 | background-color: var(--color-primary);
28 | }
29 |
30 | &:checked + .switch-track .switch-thumb {
31 | transform: translateX(16px);
32 | }
33 |
34 | &:focus + .switch-track {
35 | border-color: var(--color-secondary);
36 | box-shadow: 0 0 0 3px var(--color-outline);
37 | }
38 |
39 | &[disabled] {
40 | cursor: not-allowed;
41 | }
42 |
43 | &[disabled] + .switch-track {
44 | background-color: var(--color-black-16);
45 | }
46 | }
47 |
48 | .switch-track {
49 | width: 32px;
50 | height: 16px;
51 | border-radius: 10px;
52 | background-color: var(--color-black-16);
53 | position: relative;
54 | display: inline-flex;
55 | transition: 0.1s background-color ease-in-out;
56 |
57 | & + * {
58 | margin-left: 8px;
59 | }
60 | }
61 |
62 | .switch-thumb {
63 | width: 12px;
64 | height: 12px;
65 | border-radius: 50%;
66 | background-color: var(--color-white);
67 | display: inline-flex;
68 | margin: 2px;
69 | transform: translateX(0);
70 | transition: 0.1s transform ease-in-out;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "@macpaw/eslint-config-react",
4 | "@macpaw/eslint-config-typescript",
5 | "@macpaw/eslint-config-prettier"
6 | ],
7 | "rules": {
8 | "no-param-reassign": [2, { "props": true, "ignorePropertyModificationsForRegex": ["(R|r)ef"] }],
9 | "no-multiple-empty-lines": [2, { "max": 1, "maxBOF": 0, "maxEOF": 0 }],
10 | "import/order": [2, {
11 | "alphabetize": {
12 | "order": "asc",
13 | "caseInsensitive": true
14 | },
15 | "pathGroups": [
16 | {
17 | "pattern": "react",
18 | "group": "builtin",
19 | "position": "before"
20 | },
21 | {
22 | "pattern": "react*",
23 | "group": "builtin"
24 | },
25 | {
26 | "pattern": "@macpaw/**",
27 | "group": "internal",
28 | "position": "before"
29 | },
30 | {
31 | "pattern": "*.sass",
32 | "group": "index",
33 | "position": "after"
34 | }
35 | ],
36 | "pathGroupsExcludedImportTypes": ["react"],
37 | "groups": [
38 | "builtin",
39 | "external",
40 | "internal",
41 | "parent",
42 | "sibling",
43 | "index",
44 | "object",
45 | "type"
46 | ]
47 | }],
48 | "@typescript-eslint/no-explicit-any": 2,
49 | "no-magic-numbers": 0,
50 | "@typescript-eslint/no-magic-numbers": [
51 | 2,
52 | {
53 | "ignore": [0, 1],
54 | "ignoreEnums": true,
55 | "ignoreNumericLiteralTypes": true,
56 | "ignoreTypeIndexes": true
57 | }
58 | ],
59 | "import/no-cycle": 2,
60 | "react/react-in-jsx-scope": 0
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/Pagination/Pagination.scss:
--------------------------------------------------------------------------------
1 | .pagination {
2 | display: flex;
3 | width: fit-content;
4 | margin: 36px auto;
5 | padding-top: 14px;
6 | line-height: 1;
7 | font-size: 16px;
8 |
9 | &-page {
10 | display: inline-flex;
11 | margin: 0 2px;
12 | width: 48px;
13 | height: 48px;
14 | align-items: center;
15 | justify-content: center;
16 | border-radius: 50%;
17 | color: var(--color-black);
18 | text-decoration: none;
19 | box-shadow: inset 0 0 0 2px transparent;
20 | transition: .1s ease-in-out box-shadow;
21 |
22 | &:not(.-disabled):hover {
23 | box-shadow: inset 0 0 0 2px var(--color-black-16);
24 | }
25 |
26 | &.-active {
27 | background: var(--color-black);
28 | color: var(--color-white);
29 | font-weight: 900;
30 | }
31 | }
32 |
33 | &-nav {
34 | display: inline-flex;
35 | align-items: center;
36 | color: var(--color-black);
37 | text-decoration: none;
38 |
39 | &:first-child {
40 | margin-right: 16px;
41 | }
42 |
43 | &:last-child {
44 | margin-left: 16px;
45 | }
46 |
47 | svg {
48 | transition: .2s ease-in-out transform;
49 | }
50 |
51 | &.-prev {
52 | &:not(.-disabled):hover svg {
53 | transform: translateX(-4px);
54 | }
55 |
56 | svg {
57 | margin-right: 12px;
58 | }
59 | }
60 |
61 | &.-next {
62 | &:not(.-disabled):hover svg {
63 | transform: rotate(180deg) translateX(-4px);
64 | }
65 |
66 | svg {
67 | margin-left: 12px;
68 | transform: rotate(180deg);
69 | }
70 | }
71 |
72 | &.-disabled {
73 | pointer-events: none;
74 | opacity: .5;
75 | }
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/Grid/Grid.scss:
--------------------------------------------------------------------------------
1 | .grid {
2 | @include mobile {
3 | padding: 0 2px 2px;
4 | }
5 |
6 | &-layout {
7 | position: relative;
8 | display: flex;
9 | @include mobile {
10 | padding-top: 48px;
11 | flex-direction: column;
12 | align-items: stretch;
13 | }
14 | }
15 |
16 | &-rows {
17 | flex: 1;
18 | display: flex;
19 | flex-direction: column;
20 | }
21 |
22 | &-icon {
23 | margin-right: 32px;
24 | display: inline-flex;
25 | align-self: flex-start;
26 | @include mobile {
27 | position: absolute;
28 | top: 8px;
29 | left: 12px;
30 | }
31 |
32 | picture, img, svg {
33 | width: 80px;
34 | height: 80px;
35 | vertical-align: top;
36 | @include mobile {
37 | width: 32px;
38 | height: 32px;
39 | }
40 | }
41 | }
42 |
43 | &-action {
44 | margin-top: 16px;
45 | margin-left: 32px;
46 | width: 48px;
47 | height: 48px;
48 | align-self: flex-start;
49 | display: flex;
50 | justify-content: center;
51 | align-items: center;
52 | @include mobile {
53 | position: absolute;
54 | top: 0;
55 | right: 0;
56 | margin: 0;
57 | }
58 | }
59 |
60 | &-notification {
61 | &:not(:empty) {
62 | margin-top: 24px;
63 | @include mobile {
64 | margin-top: 2px;
65 | }
66 | }
67 | }
68 |
69 | .label {
70 | @include mobile {
71 | width: 30%;
72 | margin-bottom: 0;
73 | margin-right: 8px;
74 | flex-shrink: 0;
75 | }
76 | }
77 |
78 | .banner {
79 | @include mobile {
80 | margin-left: -2px;
81 | margin-right: -2px;
82 | margin-bottom: -2px;
83 | border-radius: 0 0 24px 24px;
84 | }
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/src/LanguageSwitcher/LanguageSwitcher.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLAttributes } from 'react';
2 | import cx from 'clsx';
3 | import DropdownIcon from '../Icons/jsx/DropdownIcon';
4 | import LanguageIcon from '../LanguageIcon/LanguageIcon';
5 |
6 | const LocaleNames = {
7 | en: 'English',
8 | de: 'Deutsch',
9 | es: 'Español',
10 | fr: 'Français',
11 | it: 'Italiano',
12 | ja: '日本語',
13 | ko: '한국어',
14 | nl: 'Dutch',
15 | pl: 'Polski',
16 | pt: 'Português do Brasil',
17 | tr: 'Turkish',
18 | uk: 'Українська',
19 | zh: '繁體中文',
20 | };
21 |
22 | export type SupportedLocale = keyof typeof LocaleNames;
23 |
24 | const getLocaleName = (locale: SupportedLocale) => {
25 | return LocaleNames[locale] || '';
26 | };
27 |
28 | export interface LanguageSwitcherProps extends HTMLAttributes
31 |
44 | );
45 | })}
46 |
32 |
42 |
33 | {color[1] ?? ''}
34 |
35 | {gradient && (
36 |
37 |
40 | )}
41 | {gradient[1]}
38 | {gradient[2]}
39 | {name}
43 |
38 |
51 | );
52 | };
53 |
54 | export default LanguageSwitcher;
55 |
--------------------------------------------------------------------------------
/src/Typography/Typography.scss:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
3 | font-size: 16px;
4 | line-height: 1.75;
5 | color: var(--color-black);
6 | }
7 |
8 | a {
9 | color: var(--color-secondary);
10 | text-decoration: none;
11 | }
12 |
13 | b, strong {
14 | font-weight: 600;
15 | }
16 |
17 | /* heading */
18 |
19 | h1, .h1,
20 | h2, .h2,
21 | h3, .h3,
22 | h4, .h4,
23 | h5, .h5,
24 | h6, .h6 {
25 | line-height: 1.5;
26 | margin: 0 0 0.5em;
27 | }
28 |
29 | h1, .h1 {
30 | font-size: 40px;
31 | font-weight: 700;
32 | }
33 |
34 | h2, .h2 {
35 | font-size: 32px;
36 | font-weight: 700;
37 | margin-bottom: 0.25em;
38 | }
39 |
40 | h3, .h3 {
41 | font-size: 24px;
42 | font-weight: 700;
43 | }
44 |
45 | h4, .h4 {
46 | font-size: 20px;
47 | font-weight: 700;
48 | }
49 |
50 | h5, .h5 {
51 | font-size: 16px;
52 | font-weight: 600;
53 | }
54 |
55 | h6, .h6 {
56 | font-size: 14px;
57 | font-weight: 600;
58 | }
59 |
60 | /* sub-title */
61 |
62 | .subtitle-h2,
63 | .subtitle-h3,
64 | .subtitle-h4 {
65 | line-height: 1.5;
66 | font-weight: 400;
67 | margin: 0 0 0.5em;
68 | }
69 |
70 | .subtitle-h2 {
71 | font-size: 32px;
72 | }
73 |
74 | .subtitle-h3 {
75 | font-size: 24px;
76 | }
77 |
78 | .subtitle-h4 {
79 | font-size: 20px;
80 | }
81 |
82 | /* paragraph */
83 |
84 | .p1, .p2, .p3, .p4 {
85 | line-height: 1.5;
86 | font-weight: 400;
87 | }
88 |
89 | .p1 {
90 | font-size: 18px;
91 | }
92 |
93 | .p2 {
94 | font-size: 16px;
95 | }
96 |
97 | .p3 {
98 | font-size: 14px;
99 | }
100 |
101 | .p4 {
102 | font-size: 12px;
103 | }
104 |
--------------------------------------------------------------------------------
/src/ui.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
2 | @import '~react-toastify/dist/ReactToastify.min.css';
3 | @import './helpers.scss';
4 | @import './Normalize/Normalize.scss';
5 | @import './Breadcrumbs/Breadcrumbs.scss';
6 | @import './Banner/Banner.scss';
7 | @import './Button/Button.scss';
8 | @import './CardMask/CardMask.scss';
9 | @import './Colors/Colors.scss';
10 | @import './Checkbox/Checkbox.scss';
11 | @import './Dialog/Dialog.scss';
12 | @import './DialogActions/DialogActions.scss';
13 | @import './DialogContent/DialogContent.scss';
14 | @import './DialogIcon/DialogIcon.scss';
15 | @import './Dropdown/Dropdown.scss';
16 | @import './DropdownItem/DropdownItem.scss';
17 | @import './FormRow/FormRow.scss';
18 | @import './Grid/Grid.scss';
19 | @import './MacPawLogo/MacPawLogo.scss';
20 | @import './GridCell/GridCell.scss';
21 | @import './GridRow/GridRow.scss';
22 | @import './Input/Input.scss';
23 | @import './Hint/Hint.scss';
24 | @import './Label/Label.scss';
25 | @import './LanguageSwitcher/LanguageSwitcher.scss';
26 | @import './Layout/Layout.scss';
27 | @import './Loader/Loader.scss';
28 | @import './Multiselect/Multiselect.scss';
29 | @import './Notification/Notification.scss';
30 | @import './Pagination/Pagination.scss';
31 | @import './Panel/Panel.scss';
32 | @import './Radio/Radio.scss';
33 | @import './Select/Select.scss';
34 | @import './Tag/Tag.scss';
35 | @import './TagList/TagList.scss';
36 | @import './Table/Table.scss';
37 | @import './Tooltip/Tooltip.scss';
38 | @import './Typography/Typography.scss';
39 | @import './TagInput/TagInput.scss';
40 | @import './Switch/Switch.scss';
41 | @import './Clipboard/Clipboard.scss';
42 | @import './LanguageIcon/LanguageIcon.scss';
43 | @import './DatePicker/DatePicker.scss';
44 |
--------------------------------------------------------------------------------
/src/Icons/svg/payment_ideal.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/ModalLauncher/ModalLauncher.tsx:
--------------------------------------------------------------------------------
1 | import React, { LazyExoticComponent, Suspense } from 'react';
2 | import isEmpty from 'lodash.isempty';
3 | import Dialog from '../Dialog/Dialog';
4 | import { Maybe } from '../types';
5 | import { useModalLauncherContext } from './ModalLauncherContext';
6 | import { ModalItem } from './types';
7 |
8 | type ModalBodyComponent =
9 | | Maybe{getLocaleName(currentLanguage)}
40 |
49 |
50 |
59 | );
60 | };
61 |
62 | export default Dialog;
63 |
--------------------------------------------------------------------------------
/src/Clipboard/Clipboard.tsx:
--------------------------------------------------------------------------------
1 | import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
2 | import { CheckCircleIcon, CopyIcon as CopyIconUi } from '../Icons/jsx';
3 | import Tooltip from '../Tooltip/Tooltip';
4 | import { InputValueType } from '../types';
5 |
6 | interface ClipboardProps {
7 | copy?: React.ReactElement | string;
8 | element: MutableRefObject
51 | {children}
52 | {withCloseButton && (
53 |
56 | )}
57 |
58 | {canBeCopied ?
52 | );
53 | };
54 |
55 | export default Clipboard;
56 |
--------------------------------------------------------------------------------
/src/Notification/Notification.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from 'react';
2 | import { ToastContainer, toast, cssTransition } from 'react-toastify';
3 | import Button from '../Button/Button';
4 | import BlockIcon from '../Icons/jsx/BlockIcon';
5 | import CheckIcon from '../Icons/jsx/CheckIcon';
6 | import CloseIcon from '../Icons/jsx/CloseIcon';
7 |
8 | type NotificationType = 'success' | 'error';
9 |
10 | interface Notification {
11 | type: NotificationType;
12 | }
13 |
14 | const transition = cssTransition({
15 | enter: 'notificationIn',
16 | exit: 'notificationOut',
17 | collapseDuration: 750,
18 | });
19 |
20 | const CloseButton = ({ closeToast }: { closeToast?: () => void }) => (
21 |
24 | );
25 |
26 | const Notification: FC
29 | {type === 'success' &&
32 | {children}
33 |
34 | );
35 |
36 | const NotificationsContainer: FC
39 | {children}
40 |
41 | {isOpen && (
42 |
43 |
61 | )}
62 |
63 | );
64 | };
65 |
66 | export default Tooltip;
67 |
--------------------------------------------------------------------------------
/.github/actions/publish/action.yml:
--------------------------------------------------------------------------------
1 | name: "Publish package to registry"
2 | description: "Publishes the package to the registry"
3 | inputs:
4 | node-version:
5 | description: "The version of Node.js to use"
6 | required: true
7 | node-cache:
8 | description: "The cache key to use for caching Node.js"
9 | required: false
10 | package-manager:
11 | description: "The package manager to use"
12 | required: false
13 | default: "npm"
14 | registry-url:
15 | description: "The registry URL to use"
16 | required: false
17 | artifact-name:
18 | description: "The name of the artifact to download"
19 | required: false
20 | default: "package-artifact"
21 | scope:
22 | description: "The scope to use"
23 | required: false
24 | default: ""
25 | auth-token:
26 | description: "The auth token to use (for private dependencies only, not required for OIDC publishing)"
27 | required: false
28 | use-public-flag:
29 | description: "Whether to use the public flag"
30 | required: false
31 | default: false
32 |
33 | runs:
34 | using: composite
35 | steps:
36 | - name: Prepare node
37 | uses: ./.github/actions/prepare-node
38 | with:
39 | node-version: ${{ inputs.node-version }}
40 | cache: ${{ inputs.node-cache }}
41 | registry-url: ${{ inputs.registry-url }}
42 | install-dependencies: false
43 | scope: ${{ inputs.scope }}
44 |
45 | - name: Download artifact
46 | uses: actions/download-artifact@v4
47 | with:
48 | name: ${{ inputs.artifact-name }}
49 |
50 | - name: Unpack artifact
51 | shell: bash
52 | run: tar xf artifact.tar.gz
53 |
54 | - name: Update npm for trusted publishing support
55 | shell: bash
56 | run: npm install -g npm@latest
57 |
58 | - name: Publish
59 | shell: bash
60 | run: |
61 | if [ "${{ inputs.use-public-flag }}" = "true" ]; then
62 | npm publish --access public
63 | else
64 | npm publish
65 | fi
66 | env:
67 | NODE_AUTH_TOKEN: ${{ inputs.auth-token }}
68 |
--------------------------------------------------------------------------------
/.github/actions/prepare-packages/action.yml:
--------------------------------------------------------------------------------
1 | name: "Prepare packages"
2 | description: "Builds and packs the packages for release"
3 | inputs:
4 | node-version:
5 | description: 'The version of Node.js to use'
6 | required: true
7 | node-cache:
8 | description: 'The cache key to use for caching Node.js'
9 | required: false
10 | package-manager:
11 | description: 'The package manager to use'
12 | required: false
13 | default: 'npm'
14 | registry-url:
15 | description: 'The registry URL to use'
16 | required: false
17 | artifact-name:
18 | description: 'The name of the artifact to upload'
19 | required: false
20 | default: 'package-artifact'
21 | artifact-retention-days:
22 | description: 'The number of days to retain the artifact'
23 | required: false
24 | default: 1
25 | build-command:
26 | description: 'The command to use to build the package'
27 | required: false
28 | default: 'build'
29 |
30 | runs:
31 | using: composite
32 | steps:
33 | - name: Prepare node
34 | uses: ./.github/actions/prepare-node
35 | id: prepare-node
36 | with:
37 | node-version: ${{ inputs.node-version }}
38 | node-cache: ${{ inputs.node-cache }}
39 | package-manager: ${{ inputs.package-manager }}
40 | registry-url: ${{ inputs.registry-url }}
41 |
42 | - name: Install dependencies
43 | shell: bash
44 | run: ${{ inputs.package-manager }} install
45 |
46 | - name: Build
47 | shell: bash
48 | run: |
49 | if [ "${{ inputs.package-manager }}" = "npm" ]; then
50 | npm run ${{ inputs.build-command }}
51 | else
52 | ${{ inputs.package-manager }} ${{ inputs.build-command }}
53 | fi
54 |
55 | - name: Pack artifact
56 | shell: bash
57 | run: tar -czf /tmp/artifact.tar.gz .
58 |
59 | - name: Upload artifact
60 | uses: actions/upload-artifact@v4
61 | with:
62 | name: ${{ inputs.artifact-name }}
63 | path: /tmp/artifact.tar.gz
64 | retention-days: ${{ inputs.artifact-retention-days }}
65 |
--------------------------------------------------------------------------------
/pages/docs/tag.mdx:
--------------------------------------------------------------------------------
1 | import { Tag, TagList } from '../../src/ui';
2 |
3 | # Tag
4 |
5 |
58 | {content}
59 |
60 |
15 |
16 |
17 |
18 | Tab 1
19 |
20 |
21 | Tab 2
22 |
23 |
24 |
25 |
26 |
28 |
29 |
31 |
32 |
33 |
34 |
35 |
36 | ```
37 | Tab 1 content
27 | Tab 2 content
30 |
38 |
39 |
40 |
41 | Tab 1
42 |
43 |
44 | Tab 2
45 |
46 |
47 |
48 |
49 |
51 |
52 |
54 |
55 |
56 |
57 | ```
58 |
59 | ## Hooks
60 |
61 | ### useTabsContext
62 |
63 | You can use **useTabsContext** hook to get access to the tabs context.
64 | You should wrap your components with **TabsProvider** to use this hook.
65 |
66 | ```
67 | const MyComponent = () => {
68 | const { activeTab, setActiveTab } = useTabsContext();
69 |
70 | return (
71 | // ...
72 | );
73 | };
74 |
75 | const ComponentWithTabs = () => (
76 | Tab 1 content
50 | Tab 2 content
53 |