From 231bdbec3a17ce4e00caeb09bf1e79cca311c144 Mon Sep 17 00:00:00 2001 From: doryan Date: Fri, 2 Feb 2024 02:52:36 +0400 Subject: [PATCH] ADDED: Segmented buttons component TODO: Styles for SB component --- app/page.tsx | 14 +- package-lock.json | 219 +++++++++++++++++- src/primitive-components/components.tsx | 1 + .../segmented-buttons/segmented-buttons.tsx | 21 ++ .../segmented-buttons.types.ts | 8 + 5 files changed, 261 insertions(+), 2 deletions(-) create mode 100644 src/primitive-components/segmented-buttons/segmented-buttons.tsx create mode 100644 src/primitive-components/segmented-buttons/segmented-buttons.types.ts diff --git a/app/page.tsx b/app/page.tsx index aa3f03e..fba95c8 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import React, { Fragment } from 'react'; import Fabs from './components/fabs'; import Badges from './components/badges'; import Radios from './components/radios'; @@ -7,6 +7,10 @@ import Switches from './components/switches'; import Checkboxes from './components/checkboxes'; import IconButtons from './components/icon-buttons'; import { TextFields } from './components/text-fields'; +import { + ButtonLayout, + SegmentedButtons, +} from '../src/primitive-components/components'; export default function Page() { return ( @@ -40,6 +44,14 @@ export default function Page() { + + + Segment 1 + + + Segment 1 + + ); diff --git a/package-lock.json b/package-lock.json index 3a2281b..fa2e783 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "google-material-you-ui", + "name": "material-you-react", "lockfileVersion": 3, "requires": true, "packages": { @@ -3322,6 +3322,7 @@ }, "node_modules/npm/node_modules/@colors/colors": { "version": "1.5.0", + "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -3331,6 +3332,7 @@ }, "node_modules/npm/node_modules/@isaacs/cliui": { "version": "8.0.2", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3347,6 +3349,7 @@ }, "node_modules/npm/node_modules/@isaacs/cliui/node_modules/ansi-regex": { "version": "6.0.1", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -3358,11 +3361,13 @@ }, "node_modules/npm/node_modules/@isaacs/cliui/node_modules/emoji-regex": { "version": "9.2.2", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": { "version": "5.1.2", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3379,6 +3384,7 @@ }, "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": { "version": "7.1.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3393,11 +3399,13 @@ }, "node_modules/npm/node_modules/@isaacs/string-locale-compare": { "version": "1.1.0", + "dev": true, "inBundle": true, "license": "ISC" }, "node_modules/npm/node_modules/@npmcli/agent": { "version": "2.2.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3413,6 +3421,7 @@ }, "node_modules/npm/node_modules/@npmcli/arborist": { "version": "7.3.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3459,6 +3468,7 @@ }, "node_modules/npm/node_modules/@npmcli/config": { "version": "8.1.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3477,6 +3487,7 @@ }, "node_modules/npm/node_modules/@npmcli/disparity-colors": { "version": "3.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3488,6 +3499,7 @@ }, "node_modules/npm/node_modules/@npmcli/disparity-colors/node_modules/ansi-styles": { "version": "4.3.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3502,6 +3514,7 @@ }, "node_modules/npm/node_modules/@npmcli/fs": { "version": "3.1.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3513,6 +3526,7 @@ }, "node_modules/npm/node_modules/@npmcli/git": { "version": "5.0.4", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3531,6 +3545,7 @@ }, "node_modules/npm/node_modules/@npmcli/installed-package-contents": { "version": "2.0.2", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3546,6 +3561,7 @@ }, "node_modules/npm/node_modules/@npmcli/map-workspaces": { "version": "3.0.4", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3560,6 +3576,7 @@ }, "node_modules/npm/node_modules/@npmcli/metavuln-calculator": { "version": "7.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3574,6 +3591,7 @@ }, "node_modules/npm/node_modules/@npmcli/name-from-folder": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -3582,6 +3600,7 @@ }, "node_modules/npm/node_modules/@npmcli/node-gyp": { "version": "3.0.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -3590,6 +3609,7 @@ }, "node_modules/npm/node_modules/@npmcli/package-json": { "version": "5.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3607,6 +3627,7 @@ }, "node_modules/npm/node_modules/@npmcli/promise-spawn": { "version": "7.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3618,6 +3639,7 @@ }, "node_modules/npm/node_modules/@npmcli/query": { "version": "3.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3629,6 +3651,7 @@ }, "node_modules/npm/node_modules/@npmcli/run-script": { "version": "7.0.4", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3644,6 +3667,7 @@ }, "node_modules/npm/node_modules/@pkgjs/parseargs": { "version": "0.11.0", + "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -3653,6 +3677,7 @@ }, "node_modules/npm/node_modules/@sigstore/bundle": { "version": "2.1.1", + "dev": true, "inBundle": true, "license": "Apache-2.0", "dependencies": { @@ -3664,6 +3689,7 @@ }, "node_modules/npm/node_modules/@sigstore/core": { "version": "0.2.0", + "dev": true, "inBundle": true, "license": "Apache-2.0", "engines": { @@ -3672,6 +3698,7 @@ }, "node_modules/npm/node_modules/@sigstore/protobuf-specs": { "version": "0.2.1", + "dev": true, "inBundle": true, "license": "Apache-2.0", "engines": { @@ -3680,6 +3707,7 @@ }, "node_modules/npm/node_modules/@sigstore/sign": { "version": "2.2.1", + "dev": true, "inBundle": true, "license": "Apache-2.0", "dependencies": { @@ -3694,6 +3722,7 @@ }, "node_modules/npm/node_modules/@sigstore/tuf": { "version": "2.3.0", + "dev": true, "inBundle": true, "license": "Apache-2.0", "dependencies": { @@ -3706,6 +3735,7 @@ }, "node_modules/npm/node_modules/@sigstore/verify": { "version": "0.1.0", + "dev": true, "inBundle": true, "license": "Apache-2.0", "dependencies": { @@ -3719,6 +3749,7 @@ }, "node_modules/npm/node_modules/@tufjs/canonical-json": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -3727,6 +3758,7 @@ }, "node_modules/npm/node_modules/@tufjs/models": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3739,6 +3771,7 @@ }, "node_modules/npm/node_modules/abbrev": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -3747,6 +3780,7 @@ }, "node_modules/npm/node_modules/agent-base": { "version": "7.1.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3758,6 +3792,7 @@ }, "node_modules/npm/node_modules/aggregate-error": { "version": "3.1.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3770,6 +3805,7 @@ }, "node_modules/npm/node_modules/ansi-regex": { "version": "5.0.1", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -3778,6 +3814,7 @@ }, "node_modules/npm/node_modules/ansi-styles": { "version": "6.2.1", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -3789,16 +3826,19 @@ }, "node_modules/npm/node_modules/aproba": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "ISC" }, "node_modules/npm/node_modules/archy": { "version": "1.0.0", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/are-we-there-yet": { "version": "4.0.2", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -3807,11 +3847,13 @@ }, "node_modules/npm/node_modules/balanced-match": { "version": "1.0.2", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/bin-links": { "version": "4.0.3", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3826,6 +3868,7 @@ }, "node_modules/npm/node_modules/binary-extensions": { "version": "2.2.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -3834,6 +3877,7 @@ }, "node_modules/npm/node_modules/brace-expansion": { "version": "2.0.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3842,6 +3886,7 @@ }, "node_modules/npm/node_modules/builtins": { "version": "5.0.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3850,6 +3895,7 @@ }, "node_modules/npm/node_modules/cacache": { "version": "18.0.2", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -3872,6 +3918,7 @@ }, "node_modules/npm/node_modules/chalk": { "version": "5.3.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -3883,6 +3930,7 @@ }, "node_modules/npm/node_modules/chownr": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -3891,6 +3939,7 @@ }, "node_modules/npm/node_modules/ci-info": { "version": "4.0.0", + "dev": true, "funding": [ { "type": "github", @@ -3905,6 +3954,7 @@ }, "node_modules/npm/node_modules/cidr-regex": { "version": "4.0.3", + "dev": true, "inBundle": true, "license": "BSD-2-Clause", "dependencies": { @@ -3916,6 +3966,7 @@ }, "node_modules/npm/node_modules/clean-stack": { "version": "2.2.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -3924,6 +3975,7 @@ }, "node_modules/npm/node_modules/cli-columns": { "version": "4.0.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3936,6 +3988,7 @@ }, "node_modules/npm/node_modules/cli-table3": { "version": "0.6.3", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3950,6 +4003,7 @@ }, "node_modules/npm/node_modules/clone": { "version": "1.0.4", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -3958,6 +4012,7 @@ }, "node_modules/npm/node_modules/cmd-shim": { "version": "6.0.2", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -3966,6 +4021,7 @@ }, "node_modules/npm/node_modules/color-convert": { "version": "2.0.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3977,11 +4033,13 @@ }, "node_modules/npm/node_modules/color-name": { "version": "1.1.4", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/color-support": { "version": "1.1.3", + "dev": true, "inBundle": true, "license": "ISC", "bin": { @@ -3990,6 +4048,7 @@ }, "node_modules/npm/node_modules/columnify": { "version": "1.6.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4002,16 +4061,19 @@ }, "node_modules/npm/node_modules/common-ancestor-path": { "version": "1.0.1", + "dev": true, "inBundle": true, "license": "ISC" }, "node_modules/npm/node_modules/console-control-strings": { "version": "1.1.0", + "dev": true, "inBundle": true, "license": "ISC" }, "node_modules/npm/node_modules/cross-spawn": { "version": "7.0.3", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4025,6 +4087,7 @@ }, "node_modules/npm/node_modules/cross-spawn/node_modules/which": { "version": "2.0.2", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4039,6 +4102,7 @@ }, "node_modules/npm/node_modules/cssesc": { "version": "3.0.0", + "dev": true, "inBundle": true, "license": "MIT", "bin": { @@ -4050,6 +4114,7 @@ }, "node_modules/npm/node_modules/debug": { "version": "4.3.4", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4066,11 +4131,13 @@ }, "node_modules/npm/node_modules/debug/node_modules/ms": { "version": "2.1.2", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/defaults": { "version": "1.0.4", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4082,6 +4149,7 @@ }, "node_modules/npm/node_modules/diff": { "version": "5.1.0", + "dev": true, "inBundle": true, "license": "BSD-3-Clause", "engines": { @@ -4090,16 +4158,19 @@ }, "node_modules/npm/node_modules/eastasianwidth": { "version": "0.2.0", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/emoji-regex": { "version": "8.0.0", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/encoding": { "version": "0.1.13", + "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -4109,6 +4180,7 @@ }, "node_modules/npm/node_modules/env-paths": { "version": "2.2.1", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -4117,16 +4189,19 @@ }, "node_modules/npm/node_modules/err-code": { "version": "2.0.3", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/exponential-backoff": { "version": "3.1.1", + "dev": true, "inBundle": true, "license": "Apache-2.0" }, "node_modules/npm/node_modules/fastest-levenshtein": { "version": "1.0.16", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -4135,6 +4210,7 @@ }, "node_modules/npm/node_modules/foreground-child": { "version": "3.1.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4150,6 +4226,7 @@ }, "node_modules/npm/node_modules/fs-minipass": { "version": "3.0.3", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4161,6 +4238,7 @@ }, "node_modules/npm/node_modules/function-bind": { "version": "1.1.2", + "dev": true, "inBundle": true, "license": "MIT", "funding": { @@ -4169,6 +4247,7 @@ }, "node_modules/npm/node_modules/gauge": { "version": "5.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4187,6 +4266,7 @@ }, "node_modules/npm/node_modules/glob": { "version": "10.3.10", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4208,16 +4288,19 @@ }, "node_modules/npm/node_modules/graceful-fs": { "version": "4.2.11", + "dev": true, "inBundle": true, "license": "ISC" }, "node_modules/npm/node_modules/has-unicode": { "version": "2.0.1", + "dev": true, "inBundle": true, "license": "ISC" }, "node_modules/npm/node_modules/hasown": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4229,6 +4312,7 @@ }, "node_modules/npm/node_modules/hosted-git-info": { "version": "7.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4240,11 +4324,13 @@ }, "node_modules/npm/node_modules/http-cache-semantics": { "version": "4.1.1", + "dev": true, "inBundle": true, "license": "BSD-2-Clause" }, "node_modules/npm/node_modules/http-proxy-agent": { "version": "7.0.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4257,6 +4343,7 @@ }, "node_modules/npm/node_modules/https-proxy-agent": { "version": "7.0.2", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4269,6 +4356,7 @@ }, "node_modules/npm/node_modules/iconv-lite": { "version": "0.6.3", + "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -4281,6 +4369,7 @@ }, "node_modules/npm/node_modules/ignore-walk": { "version": "6.0.4", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4292,6 +4381,7 @@ }, "node_modules/npm/node_modules/imurmurhash": { "version": "0.1.4", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -4300,6 +4390,7 @@ }, "node_modules/npm/node_modules/indent-string": { "version": "4.0.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -4308,6 +4399,7 @@ }, "node_modules/npm/node_modules/ini": { "version": "4.1.1", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -4316,6 +4408,7 @@ }, "node_modules/npm/node_modules/init-package-json": { "version": "6.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4333,11 +4426,13 @@ }, "node_modules/npm/node_modules/ip": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/ip-regex": { "version": "5.0.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -4349,6 +4444,7 @@ }, "node_modules/npm/node_modules/is-cidr": { "version": "5.0.3", + "dev": true, "inBundle": true, "license": "BSD-2-Clause", "dependencies": { @@ -4360,6 +4456,7 @@ }, "node_modules/npm/node_modules/is-core-module": { "version": "2.13.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4371,6 +4468,7 @@ }, "node_modules/npm/node_modules/is-fullwidth-code-point": { "version": "3.0.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -4379,16 +4477,19 @@ }, "node_modules/npm/node_modules/is-lambda": { "version": "1.0.1", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/isexe": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "ISC" }, "node_modules/npm/node_modules/jackspeak": { "version": "2.3.6", + "dev": true, "inBundle": true, "license": "BlueOak-1.0.0", "dependencies": { @@ -4406,6 +4507,7 @@ }, "node_modules/npm/node_modules/json-parse-even-better-errors": { "version": "3.0.1", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -4414,6 +4516,7 @@ }, "node_modules/npm/node_modules/json-stringify-nice": { "version": "1.1.4", + "dev": true, "inBundle": true, "license": "ISC", "funding": { @@ -4422,6 +4525,7 @@ }, "node_modules/npm/node_modules/jsonparse": { "version": "1.3.1", + "dev": true, "engines": [ "node >= 0.2.0" ], @@ -4430,16 +4534,19 @@ }, "node_modules/npm/node_modules/just-diff": { "version": "6.0.2", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/just-diff-apply": { "version": "5.5.0", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/libnpmaccess": { "version": "8.0.2", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4452,6 +4559,7 @@ }, "node_modules/npm/node_modules/libnpmdiff": { "version": "6.0.6", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4471,6 +4579,7 @@ }, "node_modules/npm/node_modules/libnpmexec": { "version": "7.0.7", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4492,6 +4601,7 @@ }, "node_modules/npm/node_modules/libnpmfund": { "version": "5.0.4", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4503,6 +4613,7 @@ }, "node_modules/npm/node_modules/libnpmhook": { "version": "10.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4515,6 +4626,7 @@ }, "node_modules/npm/node_modules/libnpmorg": { "version": "6.0.2", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4527,6 +4639,7 @@ }, "node_modules/npm/node_modules/libnpmpack": { "version": "6.0.6", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4541,6 +4654,7 @@ }, "node_modules/npm/node_modules/libnpmpublish": { "version": "9.0.4", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4559,6 +4673,7 @@ }, "node_modules/npm/node_modules/libnpmsearch": { "version": "7.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4570,6 +4685,7 @@ }, "node_modules/npm/node_modules/libnpmteam": { "version": "6.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4582,6 +4698,7 @@ }, "node_modules/npm/node_modules/libnpmversion": { "version": "5.0.2", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4597,6 +4714,7 @@ }, "node_modules/npm/node_modules/lru-cache": { "version": "10.1.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -4605,6 +4723,7 @@ }, "node_modules/npm/node_modules/make-fetch-happen": { "version": "13.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4626,6 +4745,7 @@ }, "node_modules/npm/node_modules/minimatch": { "version": "9.0.3", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4640,6 +4760,7 @@ }, "node_modules/npm/node_modules/minipass": { "version": "7.0.4", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -4648,6 +4769,7 @@ }, "node_modules/npm/node_modules/minipass-collect": { "version": "2.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4659,6 +4781,7 @@ }, "node_modules/npm/node_modules/minipass-fetch": { "version": "3.0.4", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4675,6 +4798,7 @@ }, "node_modules/npm/node_modules/minipass-flush": { "version": "1.0.5", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4686,6 +4810,7 @@ }, "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": { "version": "3.3.6", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4697,6 +4822,7 @@ }, "node_modules/npm/node_modules/minipass-json-stream": { "version": "1.0.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4706,6 +4832,7 @@ }, "node_modules/npm/node_modules/minipass-json-stream/node_modules/minipass": { "version": "3.3.6", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4717,6 +4844,7 @@ }, "node_modules/npm/node_modules/minipass-pipeline": { "version": "1.2.4", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4728,6 +4856,7 @@ }, "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": { "version": "3.3.6", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4739,6 +4868,7 @@ }, "node_modules/npm/node_modules/minipass-sized": { "version": "1.0.3", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4750,6 +4880,7 @@ }, "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": { "version": "3.3.6", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4761,6 +4892,7 @@ }, "node_modules/npm/node_modules/minizlib": { "version": "2.1.2", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4773,6 +4905,7 @@ }, "node_modules/npm/node_modules/minizlib/node_modules/minipass": { "version": "3.3.6", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4784,6 +4917,7 @@ }, "node_modules/npm/node_modules/mkdirp": { "version": "1.0.4", + "dev": true, "inBundle": true, "license": "MIT", "bin": { @@ -4795,11 +4929,13 @@ }, "node_modules/npm/node_modules/ms": { "version": "2.1.3", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/mute-stream": { "version": "1.0.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -4808,6 +4944,7 @@ }, "node_modules/npm/node_modules/negotiator": { "version": "0.6.3", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -4816,6 +4953,7 @@ }, "node_modules/npm/node_modules/node-gyp": { "version": "10.0.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -4839,6 +4977,7 @@ }, "node_modules/npm/node_modules/nopt": { "version": "7.2.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4853,6 +4992,7 @@ }, "node_modules/npm/node_modules/normalize-package-data": { "version": "6.0.0", + "dev": true, "inBundle": true, "license": "BSD-2-Clause", "dependencies": { @@ -4867,6 +5007,7 @@ }, "node_modules/npm/node_modules/npm-audit-report": { "version": "5.0.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -4875,6 +5016,7 @@ }, "node_modules/npm/node_modules/npm-bundled": { "version": "3.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4886,6 +5028,7 @@ }, "node_modules/npm/node_modules/npm-install-checks": { "version": "6.3.0", + "dev": true, "inBundle": true, "license": "BSD-2-Clause", "dependencies": { @@ -4897,6 +5040,7 @@ }, "node_modules/npm/node_modules/npm-normalize-package-bin": { "version": "3.0.1", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -4905,6 +5049,7 @@ }, "node_modules/npm/node_modules/npm-package-arg": { "version": "11.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4919,6 +5064,7 @@ }, "node_modules/npm/node_modules/npm-packlist": { "version": "8.0.2", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4930,6 +5076,7 @@ }, "node_modules/npm/node_modules/npm-pick-manifest": { "version": "9.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4944,6 +5091,7 @@ }, "node_modules/npm/node_modules/npm-profile": { "version": "9.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4956,6 +5104,7 @@ }, "node_modules/npm/node_modules/npm-registry-fetch": { "version": "16.1.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4973,6 +5122,7 @@ }, "node_modules/npm/node_modules/npm-user-validate": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "BSD-2-Clause", "engines": { @@ -4981,6 +5131,7 @@ }, "node_modules/npm/node_modules/npmlog": { "version": "7.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -4995,6 +5146,7 @@ }, "node_modules/npm/node_modules/p-map": { "version": "4.0.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5009,6 +5161,7 @@ }, "node_modules/npm/node_modules/pacote": { "version": "17.0.6", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5040,6 +5193,7 @@ }, "node_modules/npm/node_modules/parse-conflict-json": { "version": "3.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5053,6 +5207,7 @@ }, "node_modules/npm/node_modules/path-key": { "version": "3.1.1", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -5061,6 +5216,7 @@ }, "node_modules/npm/node_modules/path-scurry": { "version": "1.10.1", + "dev": true, "inBundle": true, "license": "BlueOak-1.0.0", "dependencies": { @@ -5076,6 +5232,7 @@ }, "node_modules/npm/node_modules/postcss-selector-parser": { "version": "6.0.15", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5088,6 +5245,7 @@ }, "node_modules/npm/node_modules/proc-log": { "version": "3.0.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -5096,6 +5254,7 @@ }, "node_modules/npm/node_modules/promise-all-reject-late": { "version": "1.0.1", + "dev": true, "inBundle": true, "license": "ISC", "funding": { @@ -5104,6 +5263,7 @@ }, "node_modules/npm/node_modules/promise-call-limit": { "version": "3.0.1", + "dev": true, "inBundle": true, "license": "ISC", "funding": { @@ -5112,11 +5272,13 @@ }, "node_modules/npm/node_modules/promise-inflight": { "version": "1.0.1", + "dev": true, "inBundle": true, "license": "ISC" }, "node_modules/npm/node_modules/promise-retry": { "version": "2.0.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5129,6 +5291,7 @@ }, "node_modules/npm/node_modules/promzard": { "version": "1.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5140,6 +5303,7 @@ }, "node_modules/npm/node_modules/qrcode-terminal": { "version": "0.12.0", + "dev": true, "inBundle": true, "bin": { "qrcode-terminal": "bin/qrcode-terminal.js" @@ -5147,6 +5311,7 @@ }, "node_modules/npm/node_modules/read": { "version": "2.1.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5158,6 +5323,7 @@ }, "node_modules/npm/node_modules/read-cmd-shim": { "version": "4.0.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -5166,6 +5332,7 @@ }, "node_modules/npm/node_modules/read-package-json": { "version": "7.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5180,6 +5347,7 @@ }, "node_modules/npm/node_modules/read-package-json-fast": { "version": "3.0.2", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5192,6 +5360,7 @@ }, "node_modules/npm/node_modules/retry": { "version": "0.12.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -5200,12 +5369,14 @@ }, "node_modules/npm/node_modules/safer-buffer": { "version": "2.1.2", + "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/npm/node_modules/semver": { "version": "7.5.4", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5220,6 +5391,7 @@ }, "node_modules/npm/node_modules/semver/node_modules/lru-cache": { "version": "6.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5231,11 +5403,13 @@ }, "node_modules/npm/node_modules/set-blocking": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "ISC" }, "node_modules/npm/node_modules/shebang-command": { "version": "2.0.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5247,6 +5421,7 @@ }, "node_modules/npm/node_modules/shebang-regex": { "version": "3.0.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -5255,6 +5430,7 @@ }, "node_modules/npm/node_modules/signal-exit": { "version": "4.1.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -5266,6 +5442,7 @@ }, "node_modules/npm/node_modules/sigstore": { "version": "2.2.0", + "dev": true, "inBundle": true, "license": "Apache-2.0", "dependencies": { @@ -5282,6 +5459,7 @@ }, "node_modules/npm/node_modules/smart-buffer": { "version": "4.2.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -5291,6 +5469,7 @@ }, "node_modules/npm/node_modules/socks": { "version": "2.7.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5304,6 +5483,7 @@ }, "node_modules/npm/node_modules/socks-proxy-agent": { "version": "8.0.2", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5317,6 +5497,7 @@ }, "node_modules/npm/node_modules/spdx-correct": { "version": "3.2.0", + "dev": true, "inBundle": true, "license": "Apache-2.0", "dependencies": { @@ -5326,11 +5507,13 @@ }, "node_modules/npm/node_modules/spdx-exceptions": { "version": "2.3.0", + "dev": true, "inBundle": true, "license": "CC-BY-3.0" }, "node_modules/npm/node_modules/spdx-expression-parse": { "version": "3.0.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5340,11 +5523,13 @@ }, "node_modules/npm/node_modules/spdx-license-ids": { "version": "3.0.16", + "dev": true, "inBundle": true, "license": "CC0-1.0" }, "node_modules/npm/node_modules/ssri": { "version": "10.0.5", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5356,6 +5541,7 @@ }, "node_modules/npm/node_modules/string-width": { "version": "4.2.3", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5370,6 +5556,7 @@ "node_modules/npm/node_modules/string-width-cjs": { "name": "string-width", "version": "4.2.3", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5383,6 +5570,7 @@ }, "node_modules/npm/node_modules/strip-ansi": { "version": "6.0.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5395,6 +5583,7 @@ "node_modules/npm/node_modules/strip-ansi-cjs": { "name": "strip-ansi", "version": "6.0.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5406,6 +5595,7 @@ }, "node_modules/npm/node_modules/supports-color": { "version": "9.4.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -5417,6 +5607,7 @@ }, "node_modules/npm/node_modules/tar": { "version": "6.2.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5433,6 +5624,7 @@ }, "node_modules/npm/node_modules/tar/node_modules/fs-minipass": { "version": "2.1.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5444,6 +5636,7 @@ }, "node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": { "version": "3.3.6", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5455,6 +5648,7 @@ }, "node_modules/npm/node_modules/tar/node_modules/minipass": { "version": "5.0.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -5463,16 +5657,19 @@ }, "node_modules/npm/node_modules/text-table": { "version": "0.2.0", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/tiny-relative-date": { "version": "1.3.0", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/treeverse": { "version": "3.0.0", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -5481,6 +5678,7 @@ }, "node_modules/npm/node_modules/tuf-js": { "version": "2.2.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5494,6 +5692,7 @@ }, "node_modules/npm/node_modules/unique-filename": { "version": "3.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5505,6 +5704,7 @@ }, "node_modules/npm/node_modules/unique-slug": { "version": "4.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5516,11 +5716,13 @@ }, "node_modules/npm/node_modules/util-deprecate": { "version": "1.0.2", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/validate-npm-package-license": { "version": "3.0.4", + "dev": true, "inBundle": true, "license": "Apache-2.0", "dependencies": { @@ -5530,6 +5732,7 @@ }, "node_modules/npm/node_modules/validate-npm-package-name": { "version": "5.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5541,11 +5744,13 @@ }, "node_modules/npm/node_modules/walk-up-path": { "version": "3.0.1", + "dev": true, "inBundle": true, "license": "ISC" }, "node_modules/npm/node_modules/wcwidth": { "version": "1.0.1", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5554,6 +5759,7 @@ }, "node_modules/npm/node_modules/which": { "version": "4.0.0", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5568,6 +5774,7 @@ }, "node_modules/npm/node_modules/which/node_modules/isexe": { "version": "3.1.1", + "dev": true, "inBundle": true, "license": "ISC", "engines": { @@ -5576,6 +5783,7 @@ }, "node_modules/npm/node_modules/wide-align": { "version": "1.1.5", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5584,6 +5792,7 @@ }, "node_modules/npm/node_modules/wrap-ansi": { "version": "8.1.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5601,6 +5810,7 @@ "node_modules/npm/node_modules/wrap-ansi-cjs": { "name": "wrap-ansi", "version": "7.0.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5617,6 +5827,7 @@ }, "node_modules/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": { "version": "4.3.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5631,6 +5842,7 @@ }, "node_modules/npm/node_modules/wrap-ansi/node_modules/ansi-regex": { "version": "6.0.1", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -5642,11 +5854,13 @@ }, "node_modules/npm/node_modules/wrap-ansi/node_modules/emoji-regex": { "version": "9.2.2", + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": { "version": "5.1.2", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5663,6 +5877,7 @@ }, "node_modules/npm/node_modules/wrap-ansi/node_modules/strip-ansi": { "version": "7.1.0", + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -5677,6 +5892,7 @@ }, "node_modules/npm/node_modules/write-file-atomic": { "version": "5.0.1", + "dev": true, "inBundle": true, "license": "ISC", "dependencies": { @@ -5689,6 +5905,7 @@ }, "node_modules/npm/node_modules/yallist": { "version": "4.0.0", + "dev": true, "inBundle": true, "license": "ISC" }, diff --git a/src/primitive-components/components.tsx b/src/primitive-components/components.tsx index 7e3b841..60736f6 100644 --- a/src/primitive-components/components.tsx +++ b/src/primitive-components/components.tsx @@ -11,3 +11,4 @@ export { Ripples, Ripple } from './ripple/ripple'; export { TextField } from './text-field/text-field'; export { IconButton } from './icon-button/icon-button'; export { ButtonLayout } from './button-layout/button-layout'; +export { SegmentedButtons } from './segmented-buttons/segmented-buttons'; diff --git a/src/primitive-components/segmented-buttons/segmented-buttons.tsx b/src/primitive-components/segmented-buttons/segmented-buttons.tsx new file mode 100644 index 0000000..1f113a3 --- /dev/null +++ b/src/primitive-components/segmented-buttons/segmented-buttons.tsx @@ -0,0 +1,21 @@ +import React, { forwardRef } from 'react'; +import { SegmentedButtonProps } from './segmented-buttons.types'; + +export const SegmentedButtons = forwardRef< + HTMLDivElement, + SegmentedButtonProps +>(({ children, ...props }, ref) => { + if (children.length <= 1) { + console.error('You must build segmented button with 2 or more buttton'); + return <>; + } + + return ( +
+ {children} +
+ ); +}); diff --git a/src/primitive-components/segmented-buttons/segmented-buttons.types.ts b/src/primitive-components/segmented-buttons/segmented-buttons.types.ts new file mode 100644 index 0000000..8912c4a --- /dev/null +++ b/src/primitive-components/segmented-buttons/segmented-buttons.types.ts @@ -0,0 +1,8 @@ +import { HTMLAttributes, ReactElement } from 'react'; + +export interface SegmentedButton { + children?: ReactElement[]; +} + +export type SegmentedButtonProps = SegmentedButton & + HTMLAttributes;