diff --git a/docs/src/styles/components/fieldset/with-checkbox.css b/docs/src/styles/components/fieldset/with-checkbox.css index e69de29..2edc7d3 100644 --- a/docs/src/styles/components/fieldset/with-checkbox.css +++ b/docs/src/styles/components/fieldset/with-checkbox.css @@ -0,0 +1,79 @@ +.fieldset-withcheckbox [data-part="root"] { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; + border: 1px solid var(--demo-border); + border-radius: 0.75rem; + background: var(--demo-bg-popover); +} + +.fieldset-withcheckbox [data-part="legend"] { + font-size: 1rem; + font-weight: 600; + color: var(--demo-neutral-fg); +} + +.fieldset-withcheckbox [data-part="helperText"] { + font-size: 0.75rem; + line-height: 1rem; + color: var(--demo-neutral-fg-muted); +} + +.fieldset-withcheckbox [data-part="errorText"] { + font-size: 0.75rem; + line-height: 1rem; + color: var(--demo-error); +} + +.fieldset-withcheckbox [data-part="root"] [data-part="root"] { + padding: 0; + border: none; + background: transparent; +} + +.fieldset-withcheckbox [data-scope="checkbox"][data-part="root"] { + display: inline-flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + user-select: none; + font-size: 0.875rem; + line-height: 1.25rem; + color: var(--demo-neutral-fg); +} + +.fieldset-withcheckbox [data-scope="checkbox"][data-part="control"] { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 1.25rem; + height: 1.25rem; + border: 1.5px solid var(--demo-border-emphasized); + border-radius: 0.25rem; + background: var(--demo-bg-checkbox); + transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; +} + +.fieldset-withcheckbox [data-scope="checkbox"][data-part="control"][data-state="checked"] { + background: var(--demo-coral-solid); + border-color: var(--demo-coral-solid); + color: var(--demo-coral-contrast); +} + +.fieldset-withcheckbox [data-scope="checkbox"][data-part="indicator"] { + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; +} + +.fieldset-withcheckbox [data-scope="checkbox"][data-part="indicator"][hidden] { + display: flex; + visibility: hidden; +} + +.fieldset-withcheckbox [data-scope="checkbox"][data-part="label"] { + font-weight: 500; +} diff --git a/packages/react/src/components/fieldset/examples/WithCheckbox.tsx b/packages/react/src/components/fieldset/examples/WithCheckbox.tsx new file mode 100644 index 0000000..db3e83c --- /dev/null +++ b/packages/react/src/components/fieldset/examples/WithCheckbox.tsx @@ -0,0 +1,24 @@ +import { Checkbox } from '~/components/checkbox' +import { Field } from '~/components/field' +import { Fieldset } from '../index' + +export function WithCheckbox() { + return ( +