From e4d9dc508f2f66694900bc908d802e70a7753670 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 8 Oct 2026 16:19:05 +0300 Subject: [PATCH 1/4] feat(radio): update samples --- samples/inputs/radio/disabled/src/index.css | 23 +++- samples/inputs/radio/disabled/src/index.tsx | 31 ++--- .../inputs/radio/interaction-state/ReadMe.md | 56 ++++++++ .../inputs/radio/interaction-state/index.html | 11 ++ .../radio/interaction-state/package.json | 42 ++++++ .../interaction-state/sandbox.config.json | 5 + .../radio/interaction-state/src/index.css | 71 ++++++++++ .../radio/interaction-state/src/index.tsx | 79 +++++++++++ .../radio/interaction-state/tsconfig.json | 44 +++++++ .../radio/interaction-state/vite.config.js | 12 ++ samples/inputs/radio/layout/ReadMe.md | 56 ++++++++ samples/inputs/radio/layout/index.html | 11 ++ samples/inputs/radio/layout/package.json | 42 ++++++ .../inputs/radio/layout/sandbox.config.json | 5 + samples/inputs/radio/layout/src/index.css | 28 ++++ samples/inputs/radio/layout/src/index.tsx | 32 +++++ samples/inputs/radio/layout/tsconfig.json | 44 +++++++ samples/inputs/radio/layout/vite.config.js | 12 ++ samples/inputs/radio/on-off-state/ReadMe.md | 56 ++++++++ samples/inputs/radio/on-off-state/index.html | 11 ++ .../inputs/radio/on-off-state/package.json | 42 ++++++ .../radio/on-off-state/sandbox.config.json | 5 + .../inputs/radio/on-off-state/src/index.css | 23 ++++ .../inputs/radio/on-off-state/src/index.tsx | 24 ++++ .../inputs/radio/on-off-state/tsconfig.json | 44 +++++++ .../inputs/radio/on-off-state/vite.config.js | 12 ++ samples/inputs/radio/orientation/ReadMe.md | 56 ++++++++ samples/inputs/radio/orientation/index.html | 11 ++ samples/inputs/radio/orientation/package.json | 42 ++++++ .../radio/orientation/sandbox.config.json | 5 + .../inputs/radio/orientation/src/index.css | 35 +++++ .../inputs/radio/orientation/src/index.tsx | 32 +++++ .../inputs/radio/orientation/tsconfig.json | 44 +++++++ .../inputs/radio/orientation/vite.config.js | 12 ++ samples/inputs/radio/overview/ReadMe.md | 56 ++++++++ samples/inputs/radio/overview/index.html | 11 ++ samples/inputs/radio/overview/package.json | 42 ++++++ .../inputs/radio/overview/sandbox.config.json | 5 + samples/inputs/radio/overview/src/index.css | 32 +++++ samples/inputs/radio/overview/src/index.tsx | 25 ++++ samples/inputs/radio/overview/tsconfig.json | 44 +++++++ samples/inputs/radio/overview/vite.config.js | 12 ++ samples/inputs/radio/styling/src/index.css | 124 +++++++++++++++++- samples/inputs/radio/styling/src/index.tsx | 46 ++++--- .../inputs/radio/tailwind-styling/ReadMe.md | 56 ++++++++ .../inputs/radio/tailwind-styling/index.html | 11 ++ .../radio/tailwind-styling/package.json | 44 +++++++ .../tailwind-styling/sandbox.config.json | 5 + .../radio/tailwind-styling/src/index.css | 69 ++++++++++ .../radio/tailwind-styling/src/index.tsx | 68 ++++++++++ .../radio/tailwind-styling/tsconfig.json | 44 +++++++ .../radio/tailwind-styling/vite.config.js | 13 ++ 52 files changed, 1721 insertions(+), 44 deletions(-) create mode 100644 samples/inputs/radio/interaction-state/ReadMe.md create mode 100644 samples/inputs/radio/interaction-state/index.html create mode 100644 samples/inputs/radio/interaction-state/package.json create mode 100644 samples/inputs/radio/interaction-state/sandbox.config.json create mode 100644 samples/inputs/radio/interaction-state/src/index.css create mode 100644 samples/inputs/radio/interaction-state/src/index.tsx create mode 100644 samples/inputs/radio/interaction-state/tsconfig.json create mode 100644 samples/inputs/radio/interaction-state/vite.config.js create mode 100644 samples/inputs/radio/layout/ReadMe.md create mode 100644 samples/inputs/radio/layout/index.html create mode 100644 samples/inputs/radio/layout/package.json create mode 100644 samples/inputs/radio/layout/sandbox.config.json create mode 100644 samples/inputs/radio/layout/src/index.css create mode 100644 samples/inputs/radio/layout/src/index.tsx create mode 100644 samples/inputs/radio/layout/tsconfig.json create mode 100644 samples/inputs/radio/layout/vite.config.js create mode 100644 samples/inputs/radio/on-off-state/ReadMe.md create mode 100644 samples/inputs/radio/on-off-state/index.html create mode 100644 samples/inputs/radio/on-off-state/package.json create mode 100644 samples/inputs/radio/on-off-state/sandbox.config.json create mode 100644 samples/inputs/radio/on-off-state/src/index.css create mode 100644 samples/inputs/radio/on-off-state/src/index.tsx create mode 100644 samples/inputs/radio/on-off-state/tsconfig.json create mode 100644 samples/inputs/radio/on-off-state/vite.config.js create mode 100644 samples/inputs/radio/orientation/ReadMe.md create mode 100644 samples/inputs/radio/orientation/index.html create mode 100644 samples/inputs/radio/orientation/package.json create mode 100644 samples/inputs/radio/orientation/sandbox.config.json create mode 100644 samples/inputs/radio/orientation/src/index.css create mode 100644 samples/inputs/radio/orientation/src/index.tsx create mode 100644 samples/inputs/radio/orientation/tsconfig.json create mode 100644 samples/inputs/radio/orientation/vite.config.js create mode 100644 samples/inputs/radio/overview/ReadMe.md create mode 100644 samples/inputs/radio/overview/index.html create mode 100644 samples/inputs/radio/overview/package.json create mode 100644 samples/inputs/radio/overview/sandbox.config.json create mode 100644 samples/inputs/radio/overview/src/index.css create mode 100644 samples/inputs/radio/overview/src/index.tsx create mode 100644 samples/inputs/radio/overview/tsconfig.json create mode 100644 samples/inputs/radio/overview/vite.config.js create mode 100644 samples/inputs/radio/tailwind-styling/ReadMe.md create mode 100644 samples/inputs/radio/tailwind-styling/index.html create mode 100644 samples/inputs/radio/tailwind-styling/package.json create mode 100644 samples/inputs/radio/tailwind-styling/sandbox.config.json create mode 100644 samples/inputs/radio/tailwind-styling/src/index.css create mode 100644 samples/inputs/radio/tailwind-styling/src/index.tsx create mode 100644 samples/inputs/radio/tailwind-styling/tsconfig.json create mode 100644 samples/inputs/radio/tailwind-styling/vite.config.js diff --git a/samples/inputs/radio/disabled/src/index.css b/samples/inputs/radio/disabled/src/index.css index 1f53b8aa05..617174e7da 100644 --- a/samples/inputs/radio/disabled/src/index.css +++ b/samples/inputs/radio/disabled/src/index.css @@ -1,2 +1,23 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.radio-disabled { + display: flex; + align-items: center; + justify-content: center; +} + +.age-question { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.age-title { + color: var(--ig-gray-900); + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); +} diff --git a/samples/inputs/radio/disabled/src/index.tsx b/samples/inputs/radio/disabled/src/index.tsx index 6aa302f281..3917f1a557 100644 --- a/samples/inputs/radio/disabled/src/index.tsx +++ b/samples/inputs/radio/disabled/src/index.tsx @@ -4,26 +4,19 @@ import './index.css'; import { IgrRadio, IgrRadioGroup } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class RadioDisabled extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
-
- - Banana - Mango - Apple - Orange - -
+export default function RadioDisabled(): JSX.Element { + return ( +
+
+ What is your age? + + 18-27 + 28-39 + 40-55 +
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/radio/interaction-state/ReadMe.md b/samples/inputs/radio/interaction-state/ReadMe.md new file mode 100644 index 0000000000..9e525acf7a --- /dev/null +++ b/samples/inputs/radio/interaction-state/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Interaction State feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/radio/interaction-state +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/radio/interaction-state/index.html b/samples/inputs/radio/interaction-state/index.html new file mode 100644 index 0000000000..b89800e274 --- /dev/null +++ b/samples/inputs/radio/interaction-state/index.html @@ -0,0 +1,11 @@ + + + + RadioInteractionState + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/radio/interaction-state/package.json b/samples/inputs/radio/interaction-state/package.json new file mode 100644 index 0000000000..51ea31567f --- /dev/null +++ b/samples/inputs/radio/interaction-state/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-radio-interaction-state", + "description": "This project provides example of Radio Interaction State using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/radio/interaction-state/sandbox.config.json b/samples/inputs/radio/interaction-state/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/radio/interaction-state/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/radio/interaction-state/src/index.css b/samples/inputs/radio/interaction-state/src/index.css new file mode 100644 index 0000000000..7db0b48d79 --- /dev/null +++ b/samples/inputs/radio/interaction-state/src/index.css @@ -0,0 +1,71 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +.radio-states { + display: flex; + align-items: center; + justify-content: center; +} + +.radio-states-grid { + display: grid; + grid-template-columns: repeat(4, auto); + align-items: center; + gap: 1.875rem 3.25rem; +} + +/* The enabled and the invalid rows each share the columns of the whole grid. */ +.radio-states-group { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + align-items: center; + row-gap: 1.875rem; +} + +.radio-states-group + .radio-states-group { + margin-top: 1.25rem; +} + +.radio-states-grid span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; +} + +.column-caption { + text-align: center; +} + +/* The row captions sit closer to the radios than the columns sit to each other. */ +.row-caption { + margin-inline-end: -1.3125rem; +} + +/* Hover can't be turned on from code, so the hover columns take the theme's hover + colors, and the Hover column also shows the ripple of the Material theme. */ +.hover, +.focused-hover { + --fill-color: var(--fill-color-hover); + --label-color: var(--label-color-hover); + --error-color: var(--error-color-hover); +} + +.hover::part(ripple) { + background: var(--empty-color); + opacity: 0.06; +} + +.hover::part(ripple checked) { + background: var(--fill-color); +} + +.hover:state(ig-invalid)::part(ripple) { + background: var(--error-color); +} diff --git a/samples/inputs/radio/interaction-state/src/index.tsx b/samples/inputs/radio/interaction-state/src/index.tsx new file mode 100644 index 0000000000..f115ca99bb --- /dev/null +++ b/samples/inputs/radio/interaction-state/src/index.tsx @@ -0,0 +1,79 @@ +import React, { useEffect, useRef } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrRadio } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const states = [ + { caption: 'Hover', label: 'Daily Updates', className: 'hover' }, + { caption: 'Focused', label: 'Weekly Updates', className: 'focused' }, + { caption: 'Focused & Hover', label: 'Monthly Updates', className: 'focused-hover' }, +]; + +const groups = [ + { + name: 'enabled', + invalid: false, + rows: [ + { caption: 'Enabled / On', checked: true }, + { caption: 'Enabled / Off', checked: false }, + ], + }, + { + name: 'invalid', + invalid: true, + rows: [ + { caption: 'Invalid / On', checked: true }, + { caption: 'Invalid / Off', checked: false }, + ], + }, +]; + +export default function RadioInteractionState(): JSX.Element { + const gridRef = useRef(null); + + useEffect(() => { + const grid = gridRef.current; + // The radios only show their states, so they take no pointer or keyboard input. + grid.setAttribute('inert', ''); + // A keyup is what turns on a radio's keyboard focus ring, so dispatching one + // shows the focused state without moving focus to the radio. + grid.querySelectorAll('.focused, .focused-hover').forEach((radio) => { + radio.dispatchEvent(new KeyboardEvent('keyup')); + }); + }, []); + + return ( +
+
+ + {states.map((state) => ( + {state.caption} + ))} + {groups.map((group) => ( +
+ {group.rows.map((row) => ( + + {row.caption} + {states.map((state) => ( + + {state.label} + + ))} + + ))} +
+ ))} +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/radio/interaction-state/tsconfig.json b/samples/inputs/radio/interaction-state/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/radio/interaction-state/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/radio/interaction-state/vite.config.js b/samples/inputs/radio/interaction-state/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/radio/interaction-state/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/radio/layout/ReadMe.md b/samples/inputs/radio/layout/ReadMe.md new file mode 100644 index 0000000000..a24ec1a851 --- /dev/null +++ b/samples/inputs/radio/layout/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Layout feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/radio/layout +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/radio/layout/index.html b/samples/inputs/radio/layout/index.html new file mode 100644 index 0000000000..9c7511b094 --- /dev/null +++ b/samples/inputs/radio/layout/index.html @@ -0,0 +1,11 @@ + + + + RadioLayout + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/radio/layout/package.json b/samples/inputs/radio/layout/package.json new file mode 100644 index 0000000000..0eaecc5eb2 --- /dev/null +++ b/samples/inputs/radio/layout/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-radio-layout", + "description": "This project provides example of Radio Layout using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/radio/layout/sandbox.config.json b/samples/inputs/radio/layout/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/radio/layout/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/radio/layout/src/index.css b/samples/inputs/radio/layout/src/index.css new file mode 100644 index 0000000000..826ec659f3 --- /dev/null +++ b/samples/inputs/radio/layout/src/index.css @@ -0,0 +1,28 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +.radio-layout { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem 3.75rem; +} + +.radio-layout-item { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.radio-layout-item span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; +} diff --git a/samples/inputs/radio/layout/src/index.tsx b/samples/inputs/radio/layout/src/index.tsx new file mode 100644 index 0000000000..d22b77adff --- /dev/null +++ b/samples/inputs/radio/layout/src/index.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function RadioLayout(): JSX.Element { + return ( +
+
+ Label After + + Yellow + Orange + Purple + +
+
+ + Yellow + Orange + Purple + + Label Before +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/radio/layout/tsconfig.json b/samples/inputs/radio/layout/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/radio/layout/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/radio/layout/vite.config.js b/samples/inputs/radio/layout/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/radio/layout/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/radio/on-off-state/ReadMe.md b/samples/inputs/radio/on-off-state/ReadMe.md new file mode 100644 index 0000000000..80df0d6f1b --- /dev/null +++ b/samples/inputs/radio/on-off-state/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of On Off State feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/radio/on-off-state +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/radio/on-off-state/index.html b/samples/inputs/radio/on-off-state/index.html new file mode 100644 index 0000000000..24450119db --- /dev/null +++ b/samples/inputs/radio/on-off-state/index.html @@ -0,0 +1,11 @@ + + + + RadioOnOffState + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/radio/on-off-state/package.json b/samples/inputs/radio/on-off-state/package.json new file mode 100644 index 0000000000..fa936a9fb0 --- /dev/null +++ b/samples/inputs/radio/on-off-state/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-radio-on-off-state", + "description": "This project provides example of Radio On Off State using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/radio/on-off-state/sandbox.config.json b/samples/inputs/radio/on-off-state/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/radio/on-off-state/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/radio/on-off-state/src/index.css b/samples/inputs/radio/on-off-state/src/index.css new file mode 100644 index 0000000000..663e3504a4 --- /dev/null +++ b/samples/inputs/radio/on-off-state/src/index.css @@ -0,0 +1,23 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.radio-on-off { + display: flex; + align-items: center; + justify-content: center; +} + +.age-question { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.age-title { + color: var(--ig-gray-900); + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); +} diff --git a/samples/inputs/radio/on-off-state/src/index.tsx b/samples/inputs/radio/on-off-state/src/index.tsx new file mode 100644 index 0000000000..0b2c345b83 --- /dev/null +++ b/samples/inputs/radio/on-off-state/src/index.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function RadioOnOffState(): JSX.Element { + return ( +
+
+ What is your age? + + 18-27 + 28-39 + 40-55 + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/radio/on-off-state/tsconfig.json b/samples/inputs/radio/on-off-state/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/radio/on-off-state/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/radio/on-off-state/vite.config.js b/samples/inputs/radio/on-off-state/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/radio/on-off-state/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/radio/orientation/ReadMe.md b/samples/inputs/radio/orientation/ReadMe.md new file mode 100644 index 0000000000..289eb4fae0 --- /dev/null +++ b/samples/inputs/radio/orientation/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Orientation feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/radio/orientation +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/radio/orientation/index.html b/samples/inputs/radio/orientation/index.html new file mode 100644 index 0000000000..a1a7847d6c --- /dev/null +++ b/samples/inputs/radio/orientation/index.html @@ -0,0 +1,11 @@ + + + + RadioOrientation + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/radio/orientation/package.json b/samples/inputs/radio/orientation/package.json new file mode 100644 index 0000000000..1770bd3f4a --- /dev/null +++ b/samples/inputs/radio/orientation/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-radio-orientation", + "description": "This project provides example of Radio Orientation using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/radio/orientation/sandbox.config.json b/samples/inputs/radio/orientation/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/radio/orientation/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/radio/orientation/src/index.css b/samples/inputs/radio/orientation/src/index.css new file mode 100644 index 0000000000..91dfb2f325 --- /dev/null +++ b/samples/inputs/radio/orientation/src/index.css @@ -0,0 +1,35 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.radio-orientation { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + gap: 1.5rem 3.75rem; +} + +.radio-orientation-item { + display: flex; + flex-direction: column; + gap: 1rem; + box-sizing: border-box; + padding: 1rem; +} + +.billing-cycle { + width: 13.9375rem; +} + +.chart-type { + width: 17.1875rem; +} + +.radio-orientation-title { + color: var(--ig-gray-900); + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); +} diff --git a/samples/inputs/radio/orientation/src/index.tsx b/samples/inputs/radio/orientation/src/index.tsx new file mode 100644 index 0000000000..0f64ab02ce --- /dev/null +++ b/samples/inputs/radio/orientation/src/index.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function RadioOrientation(): JSX.Element { + return ( +
+
+ Billing cycle + + Monthly + Annual + Two-year + +
+
+ Chart type + + Line + Bar + Pie + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/radio/orientation/tsconfig.json b/samples/inputs/radio/orientation/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/radio/orientation/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/radio/orientation/vite.config.js b/samples/inputs/radio/orientation/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/radio/orientation/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/radio/overview/ReadMe.md b/samples/inputs/radio/overview/ReadMe.md new file mode 100644 index 0000000000..85304f5d8f --- /dev/null +++ b/samples/inputs/radio/overview/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/radio/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/radio/overview/index.html b/samples/inputs/radio/overview/index.html new file mode 100644 index 0000000000..3a6a0aa56d --- /dev/null +++ b/samples/inputs/radio/overview/index.html @@ -0,0 +1,11 @@ + + + + RadioOverview + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/radio/overview/package.json b/samples/inputs/radio/overview/package.json new file mode 100644 index 0000000000..0021a92ba4 --- /dev/null +++ b/samples/inputs/radio/overview/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-radio-overview", + "description": "This project provides example of Radio Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/radio/overview/sandbox.config.json b/samples/inputs/radio/overview/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/radio/overview/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/radio/overview/src/index.css b/samples/inputs/radio/overview/src/index.css new file mode 100644 index 0000000000..51eb79b8b9 --- /dev/null +++ b/samples/inputs/radio/overview/src/index.css @@ -0,0 +1,32 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.radio-overview { + display: flex; + align-items: center; + justify-content: center; +} + +.feedback-form { + display: flex; + flex-direction: column; + gap: 1rem; + box-sizing: border-box; + width: 22.5rem; + padding: 1rem; +} + +.feedback-title { + color: var(--ig-gray-900); + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); +} + +.feedback-send { + align-self: center; + width: 11.25rem; + margin-top: 1rem; +} diff --git a/samples/inputs/radio/overview/src/index.tsx b/samples/inputs/radio/overview/src/index.tsx new file mode 100644 index 0000000000..19b1e13612 --- /dev/null +++ b/samples/inputs/radio/overview/src/index.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function RadioOverview(): JSX.Element { + return ( +
+
e.preventDefault()}> + Does our app meet your expectations?* + + Exceeds expectations + Meets expectations + Below expectations + + Send +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/radio/overview/tsconfig.json b/samples/inputs/radio/overview/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/radio/overview/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/radio/overview/vite.config.js b/samples/inputs/radio/overview/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/radio/overview/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/radio/styling/src/index.css b/samples/inputs/radio/styling/src/index.css index 238ccdd014..4ff9f0fc78 100644 --- a/samples/inputs/radio/styling/src/index.css +++ b/samples/inputs/radio/styling/src/index.css @@ -1,11 +1,123 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -:root { - --igc-primary-h: 60deg; - --igc-primary-s: 100%; - --igc-primary-l: 25%; + +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +.radio-styling { + display: flex; + align-items: center; + justify-content: center; +} + +.shipping-card { + /* The design's own palette. It is set here instead of coming from the theme, + so the sample keeps its look in every theme. */ + --shipping-surface: #fff; + --shipping-primary: #0176ff; + --shipping-title: #00142b; + --shipping-ink: #002b5c; + --shipping-gray-100: #f3f6fa; + --shipping-gray-300: #d2dbe8; + --shipping-gray-400: #a9b8cc; + --shipping-gray-600: #556c86; + + /* The colors of the hover and focus effects the theme draws around the radio. */ + --ig-radio-fill-color: var(--shipping-primary); + --ig-radio-empty-color: var(--shipping-gray-400); + + box-sizing: border-box; + width: 21.75rem; + border: 1px solid var(--shipping-gray-300); + border-radius: 1rem; + background: var(--shipping-surface); + font-family: aktiv-grotesk, sans-serif; +} + +.shipping-header { + box-sizing: border-box; + height: 3.75rem; + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--shipping-gray-300); +} + +.shipping-title { + color: var(--shipping-title); + font-size: 1rem; + font-weight: 600; + line-height: 1.5rem; + letter-spacing: 0.15px; +} + +.shipping-methods { + gap: 0; + padding: 1rem 1.5rem; +} + +.shipping-method::part(base) { + gap: 0.125rem; +} + +.shipping-method::part(label) { + color: var(--shipping-ink); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.75rem; + font-weight: 600; + line-height: 1rem; + letter-spacing: 0.15px; +} + +.shipping-detail { + color: var(--shipping-gray-600); +} + +.shipping-method[disabled]::part(label), +.shipping-method[disabled] .shipping-detail { + color: var(--shipping-gray-400); +} + +/* The design draws the radio as a 2px ring with a 10px dot in a 40px slot. Each + theme draws the radio its own way, so the whole radio is drawn here. */ +.shipping-method::part(control) { + width: 2.5rem; + min-width: 2.5rem; + height: 2.5rem; + border-radius: 50%; +} + +.shipping-method::part(control)::before, +.shipping-method::part(control)::after { + top: 50%; + left: 50%; + width: 1.25rem; + min-width: 0; + height: 1.25rem; + border-radius: 50%; +} + +/* The ring */ +.shipping-method::part(control)::after { + transform: translate(-50%, -50%); + border: 0.125rem solid var(--shipping-gray-400); + background: var(--shipping-surface); +} + +.shipping-method::part(control checked)::after { + border-color: var(--shipping-primary); +} + +.shipping-method[disabled]::part(control)::after { + border-color: var(--shipping-gray-300); + background: var(--shipping-gray-100); +} + +/* The dot */ +.shipping-method::part(control)::before { + transform: translate(-50%, -50%) scale(0); + border: none; + background: var(--shipping-primary); } -igc-radio::part(control) { - --size: 18px; +.shipping-method::part(control checked)::before { + transform: translate(-50%, -50%) scale(0.5); } diff --git a/samples/inputs/radio/styling/src/index.tsx b/samples/inputs/radio/styling/src/index.tsx index b6304472d3..68c87dcf13 100644 --- a/samples/inputs/radio/styling/src/index.tsx +++ b/samples/inputs/radio/styling/src/index.tsx @@ -1,29 +1,39 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import './index.css'; import { IgrRadio, IgrRadioGroup } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -import './index.css'; - -export default class RadioStyling extends React.Component { - constructor(props: any) { - super(props); - } +const methods = [ + { value: 'standard', name: 'Standard', detail: '(2-4 business days)', checked: true }, + { value: 'express', name: 'Express', detail: '(next day by 6 pm)' }, + { value: 'pickup', name: 'Pickup point', detail: '(400 + locations)' }, + { value: 'same-day', name: 'Same-day', detail: '(not available)', disabled: true }, +]; - public render(): JSX.Element { - return ( -
-
- - Apple - Banana - Mango - Orange - +export default function RadioStyling(): JSX.Element { + return ( +
+
+
+ Shipping method
+ + {methods.map((method) => ( + + {method.name} {method.detail} + + ))} +
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/radio/tailwind-styling/ReadMe.md b/samples/inputs/radio/tailwind-styling/ReadMe.md new file mode 100644 index 0000000000..9c1072b760 --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/radio/tailwind-styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/radio/tailwind-styling/index.html b/samples/inputs/radio/tailwind-styling/index.html new file mode 100644 index 0000000000..1662badcac --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + RadioTailwindStyling + + + +
+ + + diff --git a/samples/inputs/radio/tailwind-styling/package.json b/samples/inputs/radio/tailwind-styling/package.json new file mode 100644 index 0000000000..78a0d07320 --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-radio-tailwind-styling", + "description": "This project provides example of Radio Tailwind Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.1.14", + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "tailwindcss": "^4.1.14", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/radio/tailwind-styling/sandbox.config.json b/samples/inputs/radio/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..20199570e4 --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/radio/tailwind-styling/src/index.css b/samples/inputs/radio/tailwind-styling/src/index.css new file mode 100644 index 0000000000..4cbc6e5209 --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/src/index.css @@ -0,0 +1,69 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +/* Aktiv Grotesk comes first: an @import placed after the Tailwind imports is dropped. */ +@import url("https://use.typekit.net/bng2zgw.css"); +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +@theme { + /* The design's own palette. It lives here instead of coming from the theme + palette, so the sample keeps its colors in every theme. */ + --color-export-primary: #0176ff; + --color-export-primary-strong: #006ae6; + --color-export-tint: #e6f2ff; + --color-export-tint-strong: #cce4ff; + --color-export-title: #00142b; + --color-export-ink: #002b5c; + --color-export-muted: #556c86; + --color-export-divider: #d2dbe8; + --color-export-empty: #a9b8cc; + --color-export-cancel: #616161; +} + +/* The design draws the radio as a 2px ring with a 10px dot in a 40px slot. Each + theme draws the radio its own way, so the whole radio is drawn here. */ +.format-option::part(base) { + gap: 0.125rem; +} + +.format-option::part(control) { + width: 2.5rem; + min-width: 2.5rem; + height: 2.5rem; + border-radius: 50%; +} + +.format-option::part(control)::before, +.format-option::part(control)::after { + top: 50%; + left: 50%; + width: 1.25rem; + min-width: 0; + height: 1.25rem; + border-radius: 50%; +} + +/* The ring */ +.format-option::part(control)::after { + transform: translate(-50%, -50%); + border: 0.125rem solid var(--color-export-empty); + background: white; +} + +.format-option::part(control checked)::after { + border-color: var(--color-export-primary); +} + +/* The dot */ +.format-option::part(control)::before { + transform: translate(-50%, -50%) scale(0); + border: none; + background: var(--color-export-primary); +} + +.format-option::part(control checked)::before { + transform: translate(-50%, -50%) scale(0.5); +} diff --git a/samples/inputs/radio/tailwind-styling/src/index.tsx b/samples/inputs/radio/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..71141c1a7a --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/src/index.tsx @@ -0,0 +1,68 @@ +import React, { useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const formats = [ + { value: 'pdf', label: 'PDF Document' }, + { value: 'xls', label: 'XLS Editable spreadsheet' }, + { value: 'csv', label: 'CSV Raw data, no styling' }, +]; + +const radioLabel = 'text-xs font-semibold leading-4 tracking-[0.15px] text-export-ink'; + +// The base part is styled directly, so the buttons keep the design's look in every theme. +// Without the theme's shadow, the focused button shows an outline instead. +const button = + '[&::part(base)]:h-[30px] [&::part(base)]:min-w-0 [&::part(base)]:px-3 [&::part(base)]:shadow-none ' + + '[&::part(base)]:text-sm [&::part(base)]:font-semibold [&::part(base)]:normal-case [&::part(base)]:leading-4 [&::part(base)]:tracking-[0.75px] ' + + '[&::part(base_focused)]:outline-2 [&::part(base_focused)]:outline-offset-2 [&::part(base_focused)]:outline-export-primary'; + +const cancelButton = + button + ' [&::part(base)]:rounded [&::part(base)]:border-transparent [&::part(base)]:bg-transparent ' + + '[&::part(base)]:text-export-cancel [&::part(base):hover]:bg-export-tint-strong'; + +const exportButton = + button + ' [&::part(base)]:rounded-lg [&::part(base)]:border-export-primary [&::part(base)]:bg-export-primary ' + + '[&::part(base)]:text-white [&::part(base):hover]:border-export-primary-strong [&::part(base):hover]:bg-export-primary-strong'; + +export default function RadioTailwindStyling(): JSX.Element { + const [format, setFormat] = useState('csv'); + + return ( +
+
+
+ Export report + Choose a format to export +
+ + {formats.map((option) => ( + { + if (e.detail.checked) { + setFormat(option.value); + } + }} + > + {option.label} + + ))} + +
+ Cancel + Export as {format.toUpperCase()} +
+
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/radio/tailwind-styling/tsconfig.json b/samples/inputs/radio/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/radio/tailwind-styling/vite.config.js b/samples/inputs/radio/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..4043727956 --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build', + }, + server: { + open: false, + }, +}); From 2884cf5ca6ad7713fbad69263f3c6b82dc46b4f4 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Fri, 9 Oct 2026 11:58:15 +0300 Subject: [PATCH 2/4] fix(radio): add the card background to the form samples Co-Authored-By: Claude Opus 5.5 --- samples/inputs/radio/disabled/src/index.css | 7 +++++++ samples/inputs/radio/on-off-state/src/index.css | 7 +++++++ samples/inputs/radio/orientation/src/index.css | 4 ++++ samples/inputs/radio/overview/src/index.css | 4 ++++ 4 files changed, 22 insertions(+) diff --git a/samples/inputs/radio/disabled/src/index.css b/samples/inputs/radio/disabled/src/index.css index 617174e7da..357b70a451 100644 --- a/samples/inputs/radio/disabled/src/index.css +++ b/samples/inputs/radio/disabled/src/index.css @@ -11,6 +11,13 @@ display: flex; flex-direction: column; gap: 1rem; + + /* The card of the design: white in light themes, a raised surface in dark ones. */ + box-sizing: border-box; + width: 13.9375rem; + padding: 1rem; + border-radius: 0.5rem; + background: var(--ig-surface-50); } .age-title { diff --git a/samples/inputs/radio/on-off-state/src/index.css b/samples/inputs/radio/on-off-state/src/index.css index 663e3504a4..8d0ebc2206 100644 --- a/samples/inputs/radio/on-off-state/src/index.css +++ b/samples/inputs/radio/on-off-state/src/index.css @@ -11,6 +11,13 @@ display: flex; flex-direction: column; gap: 1rem; + + /* The card of the design: white in light themes, a raised surface in dark ones. */ + box-sizing: border-box; + width: 13.9375rem; + padding: 1rem; + border-radius: 0.5rem; + background: var(--ig-surface-50); } .age-title { diff --git a/samples/inputs/radio/orientation/src/index.css b/samples/inputs/radio/orientation/src/index.css index 91dfb2f325..2851e9982c 100644 --- a/samples/inputs/radio/orientation/src/index.css +++ b/samples/inputs/radio/orientation/src/index.css @@ -15,6 +15,10 @@ gap: 1rem; box-sizing: border-box; padding: 1rem; + + /* The card of the design: white in light themes, a raised surface in dark ones. */ + border-radius: 0.5rem; + background: var(--ig-surface-50); } .billing-cycle { diff --git a/samples/inputs/radio/overview/src/index.css b/samples/inputs/radio/overview/src/index.css index 51eb79b8b9..736f2c3ec5 100644 --- a/samples/inputs/radio/overview/src/index.css +++ b/samples/inputs/radio/overview/src/index.css @@ -14,6 +14,10 @@ box-sizing: border-box; width: 22.5rem; padding: 1rem; + + /* The card of the design: white in light themes, a raised surface in dark ones. */ + border-radius: 0.5rem; + background: var(--ig-surface-50); } .feedback-title { From 6a15012425927302aae37ad46cf94d33cd3d5b54 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 15 Oct 2026 15:18:42 +0300 Subject: [PATCH 3/4] fix(radio): apply the design review feedback to the samples --- samples/inputs/radio/disabled/src/index.css | 4 +-- .../radio/interaction-state/src/index.css | 25 +++++++++++++++++++ .../radio/interaction-state/src/index.tsx | 2 +- .../inputs/radio/on-off-state/src/index.css | 4 +-- .../inputs/radio/orientation/src/index.css | 6 +++-- samples/inputs/radio/overview/src/index.css | 4 +-- samples/inputs/radio/overview/src/index.tsx | 2 +- 7 files changed, 37 insertions(+), 10 deletions(-) diff --git a/samples/inputs/radio/disabled/src/index.css b/samples/inputs/radio/disabled/src/index.css index 357b70a451..75756516a2 100644 --- a/samples/inputs/radio/disabled/src/index.css +++ b/samples/inputs/radio/disabled/src/index.css @@ -12,12 +12,12 @@ flex-direction: column; gap: 1rem; - /* The card of the design: white in light themes, a raised surface in dark ones. */ + /* The card of the design, in the surface color of the theme. */ box-sizing: border-box; width: 13.9375rem; padding: 1rem; border-radius: 0.5rem; - background: var(--ig-surface-50); + background: var(--ig-surface-500); } .age-title { diff --git a/samples/inputs/radio/interaction-state/src/index.css b/samples/inputs/radio/interaction-state/src/index.css index 7db0b48d79..ba760d572d 100644 --- a/samples/inputs/radio/interaction-state/src/index.css +++ b/samples/inputs/radio/interaction-state/src/index.css @@ -69,3 +69,28 @@ .hover:state(ig-invalid)::part(ripple) { background: var(--error-color); } + +/* Fluent also draws a dot in an off radio on hover, which no color can show. The docs + set data-igd-theme on the page, so the hover columns draw the dot in the Fluent theme. */ +[data-igd-theme='fluent'] :is(.hover, .focused-hover).off::part(control)::before { + background: light-dark(var(--ig-gray-700), var(--ig-gray-400)); + transform: scale(0.5); +} + +[data-igd-theme='fluent'] :is(.hover, .focused-hover).off:state(ig-invalid)::part(control)::before { + background: var(--ig-error-500); +} + +/* Bootstrap and Indigo darken the ring of an off radio on hover, and Bootstrap darkens + its focus color when the radio is also focused. */ +[data-igd-theme='bootstrap'] :is(.hover, .focused-hover).off:not(:state(ig-invalid))::part(control)::after { + border-color: var(--ig-gray-500); +} + +[data-igd-theme='bootstrap'] .focused-hover.off:not(:state(ig-invalid))::part(control)::after { + border-color: hsl(from var(--ig-primary-200) h calc(s * 1.12) calc(l * 0.82)); +} + +[data-igd-theme='indigo'] :is(.hover, .focused-hover).off:not(:state(ig-invalid))::part(control)::after { + border-color: light-dark(var(--ig-gray-600), hsl(from var(--ig-primary-500-contrast) h s l / 0.8)); +} diff --git a/samples/inputs/radio/interaction-state/src/index.tsx b/samples/inputs/radio/interaction-state/src/index.tsx index f115ca99bb..1b51301e43 100644 --- a/samples/inputs/radio/interaction-state/src/index.tsx +++ b/samples/inputs/radio/interaction-state/src/index.tsx @@ -58,7 +58,7 @@ export default function RadioInteractionState(): JSX.Element { {states.map((state) => ( diff --git a/samples/inputs/radio/on-off-state/src/index.css b/samples/inputs/radio/on-off-state/src/index.css index 8d0ebc2206..1bec03b6aa 100644 --- a/samples/inputs/radio/on-off-state/src/index.css +++ b/samples/inputs/radio/on-off-state/src/index.css @@ -12,12 +12,12 @@ flex-direction: column; gap: 1rem; - /* The card of the design: white in light themes, a raised surface in dark ones. */ + /* The card of the design, in the surface color of the theme. */ box-sizing: border-box; width: 13.9375rem; padding: 1rem; border-radius: 0.5rem; - background: var(--ig-surface-50); + background: var(--ig-surface-500); } .age-title { diff --git a/samples/inputs/radio/orientation/src/index.css b/samples/inputs/radio/orientation/src/index.css index 2851e9982c..bcaee41c06 100644 --- a/samples/inputs/radio/orientation/src/index.css +++ b/samples/inputs/radio/orientation/src/index.css @@ -4,6 +4,8 @@ .radio-orientation { display: flex; flex-wrap: wrap; + /* Centers the row of cards vertically, while the cards stay top-aligned to each other. */ + align-content: center; align-items: flex-start; justify-content: center; gap: 1.5rem 3.75rem; @@ -16,9 +18,9 @@ box-sizing: border-box; padding: 1rem; - /* The card of the design: white in light themes, a raised surface in dark ones. */ + /* The card of the design, in the surface color of the theme. */ border-radius: 0.5rem; - background: var(--ig-surface-50); + background: var(--ig-surface-500); } .billing-cycle { diff --git a/samples/inputs/radio/overview/src/index.css b/samples/inputs/radio/overview/src/index.css index 736f2c3ec5..9a1f24d033 100644 --- a/samples/inputs/radio/overview/src/index.css +++ b/samples/inputs/radio/overview/src/index.css @@ -15,9 +15,9 @@ width: 22.5rem; padding: 1rem; - /* The card of the design: white in light themes, a raised surface in dark ones. */ + /* The card of the design, in the surface color of the theme. */ border-radius: 0.5rem; - background: var(--ig-surface-50); + background: var(--ig-surface-500); } .feedback-title { diff --git a/samples/inputs/radio/overview/src/index.tsx b/samples/inputs/radio/overview/src/index.tsx index 19b1e13612..0ae5f4d4f4 100644 --- a/samples/inputs/radio/overview/src/index.tsx +++ b/samples/inputs/radio/overview/src/index.tsx @@ -8,7 +8,7 @@ export default function RadioOverview(): JSX.Element { return (
e.preventDefault()}> - Does our app meet your expectations?* + Does our app meet your expectations? Exceeds expectations Meets expectations From 5453838a58cbcbff8d43aaaf1e18addd9b8cb186 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Thu, 29 Oct 2026 16:31:44 +0200 Subject: [PATCH 4/4] fix(radio): load the Tailwind styles in the samples browser Same issue as chip/tailwind-styling: the Aktiv Grotesk @import came before the @layer statement, and the samples browser compiles sample CSS through Vite, whose @import handling then drops the Tailwind imports that follow. The sample rendered without its theme or utilities. Put the @layer statement first and the font import right after it, which works there and standalone. Co-Authored-By: Claude Opus 5.5 --- samples/inputs/radio/tailwind-styling/src/index.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/samples/inputs/radio/tailwind-styling/src/index.css b/samples/inputs/radio/tailwind-styling/src/index.css index 4cbc6e5209..bf815c706b 100644 --- a/samples/inputs/radio/tailwind-styling/src/index.css +++ b/samples/inputs/radio/tailwind-styling/src/index.css @@ -1,9 +1,11 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -/* Aktiv Grotesk comes first: an @import placed after the Tailwind imports is dropped. */ -@import url("https://use.typekit.net/bng2zgw.css"); +/* Keep this order. An @import after the Tailwind imports is dropped, and in + the samples browser one before the @layer statement drops the Tailwind + imports, so Aktiv Grotesk goes between them. */ @layer theme, base, components, utilities; +@import url("https://use.typekit.net/bng2zgw.css"); @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); @source "./index.tsx";