natxocc/sigpro-ui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update Docs

Browse Source
This commit is contained in:
natxocc
2026-03-31 19:28:26 +02:00
parent 3619239b9d
commit 80f1be6f07
3 changed files with 1087 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
docs/components/radio.md
View File

@@ -1,6 +1,6 @@
# Radio
Radio button component with label, tooltip support, and reactive group selection.
Radio button component with label, tooltip support, and reactive group selection. All radios in the same group share a common `name` attribute for proper HTML semantics.
## Tag
@@ -11,8 +11,9 @@ Radio button component with label, tooltip support, and reactive group selection
| Prop | Type | Default | Description |
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
| `label` | `string` | `-` | Label text for the radio button |
| `value` | `string \| Signal<string>` | `-` | Selected value (for group) |
| `value` | `string \| Signal<string>` | `-` | Selected value signal for the group |
| `radioValue` | `string` | `-` | Value of this radio button |
| `name` | `string` | `-` | Group name (all radios in group should share this) |
| `tooltip` | `string` | `-` | Tooltip text on hover |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
@@ -36,18 +37,21 @@ const BasicDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Option 1',
name: 'basic-group',
value: selected,
radioValue: 'option1',
onclick: () => selected('option1')
}),
Radio({
label: 'Option 2',
name: 'basic-group',
value: selected,
radioValue: 'option2',
onclick: () => selected('option2')
}),
Radio({
label: 'Option 3',
name: 'basic-group',
value: selected,
radioValue: 'option3',
onclick: () => selected('option3')
@@ -74,6 +78,7 @@ const TooltipDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Light mode',
name: 'theme-group',
value: selected,
radioValue: 'light',
tooltip: 'Light theme with white background',
@@ -81,6 +86,7 @@ const TooltipDemo = () => {
}),
Radio({
label: 'Dark mode',
name: 'theme-group',
value: selected,
radioValue: 'dark',
tooltip: 'Dark theme with black background',
@@ -107,12 +113,14 @@ const DisabledDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Enabled option',
name: 'disabled-group',
value: selected,
radioValue: 'enabled',
onclick: () => selected('enabled')
}),
Radio({
label: 'Disabled option (cannot select)',
name: 'disabled-group',
value: selected,
radioValue: 'disabled',
disabled: true,
@@ -144,9 +152,9 @@ const ReactiveDemo = () => {
];
const colors = [
{ value: 'blue', label: 'Blue', class: 'text-blue-600' },
{ value: 'green', label: 'Green', class: 'text-green-600' },
{ value: 'red', label: 'Red', class: 'text-red-600' }
{ value: 'blue', label: 'Blue' },
{ value: 'green', label: 'Green' },
{ value: 'red', label: 'Red' }
];
return Div({ class: 'flex flex-col gap-4' }, [
@@ -154,6 +162,7 @@ const ReactiveDemo = () => {
Div({ class: 'flex gap-4' }, sizes.map(s =>
Radio({
label: s.label,
name: 'size-group',
value: size,
radioValue: s.value,
onclick: () => size(s.value)
@@ -163,6 +172,7 @@ const ReactiveDemo = () => {
Div({ class: 'flex gap-4' }, colors.map(c =>
Radio({
label: c.label,
name: 'color-group',
value: color,
radioValue: c.value,
onclick: () => color(c.value)
@@ -199,18 +209,21 @@ const PaymentDemo = () => {
Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: '💳 Credit Card',
name: 'payment-group',
value: method,
radioValue: 'credit',
onclick: () => method('credit')
}),
Radio({
label: '🏦 Bank Transfer',
name: 'payment-group',
value: method,
radioValue: 'bank',
onclick: () => method('bank')
}),
Radio({
label: '📱 Digital Wallet',
name: 'payment-group',
value: method,
radioValue: 'wallet',
onclick: () => method('wallet')
@@ -250,6 +263,7 @@ const VariantsDemo = () => {
Div({ class: 'flex gap-4' }, [
Radio({
label: 'Option A',
name: 'primary-group',
value: primary,
radioValue: 'primary1',
class: 'radio-primary',
@@ -257,6 +271,7 @@ const VariantsDemo = () => {
}),
Radio({
label: 'Option B',
name: 'primary-group',
value: primary,
radioValue: 'primary2',
class: 'radio-primary',
@@ -269,6 +284,7 @@ const VariantsDemo = () => {
Div({ class: 'flex gap-4' }, [
Radio({
label: 'Option A',
name: 'secondary-group',
value: secondary,
radioValue: 'secondary1',
class: 'radio-secondary',
@@ -276,6 +292,7 @@ const VariantsDemo = () => {
}),
Radio({
label: 'Option B',
name: 'secondary-group',
value: secondary,
radioValue: 'secondary2',
class: 'radio-secondary',
@@ -288,6 +305,7 @@ const VariantsDemo = () => {
Div({ class: 'flex gap-4' }, [
Radio({
label: 'Option A',
name: 'accent-group',
value: accent,
radioValue: 'accent1',
class: 'radio-accent',
@@ -295,6 +313,7 @@ const VariantsDemo = () => {
}),
Radio({
label: 'Option B',
name: 'accent-group',
value: accent,
radioValue: 'accent2',
class: 'radio-accent',
@@ -338,6 +357,7 @@ const DynamicDemo = () => {
Div({ class: 'flex gap-4' }, [
Radio({
label: 'Cars',
name: 'category-group',
value: category,
radioValue: 'cars',
onclick: () => {
@@ -347,6 +367,7 @@ const DynamicDemo = () => {
}),
Radio({
label: 'Colors',
name: 'category-group',
value: category,
radioValue: 'colors',
onclick: () => {
@@ -361,6 +382,7 @@ const DynamicDemo = () => {
options[category()].map(opt =>
Radio({
label: opt.label,
name: 'dynamic-option-group',
value: selected,
radioValue: opt.value,
onclick: () => selected(opt.value)
@@ -388,18 +410,21 @@ $mount(DynamicDemo, '#demo-dynamic');
return Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Option 1',
name: 'basic-group',
value: selected,
radioValue: 'option1',
onclick: () => selected('option1')
}),
Radio({
label: 'Option 2',
name: 'basic-group',
value: selected,
radioValue: 'option2',
onclick: () => selected('option2')
}),
Radio({
label: 'Option 3',
name: 'basic-group',
value: selected,
radioValue: 'option3',
onclick: () => selected('option3')
@@ -419,6 +444,7 @@ $mount(DynamicDemo, '#demo-dynamic');
return Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Light mode',
name: 'theme-group',
value: selected,
radioValue: 'light',
tooltip: 'Light theme with white background',
@@ -426,6 +452,7 @@ $mount(DynamicDemo, '#demo-dynamic');
}),
Radio({
label: 'Dark mode',
name: 'theme-group',
value: selected,
radioValue: 'dark',
tooltip: 'Dark theme with black background',
@@ -445,12 +472,14 @@ $mount(DynamicDemo, '#demo-dynamic');
return Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Enabled option',
name: 'disabled-group',
value: selected,
radioValue: 'enabled',
onclick: () => selected('enabled')
}),
Radio({
label: 'Disabled option (cannot select)',
name: 'disabled-group',
value: selected,
radioValue: 'disabled',
disabled: true,
@@ -475,9 +504,9 @@ $mount(DynamicDemo, '#demo-dynamic');
];
const colors = [
{ value: 'blue', label: 'Blue', class: 'text-blue-600' },
{ value: 'green', label: 'Green', class: 'text-green-600' },
{ value: 'red', label: 'Red', class: 'text-red-600' }
{ value: 'blue', label: 'Blue' },
{ value: 'green', label: 'Green' },
{ value: 'red', label: 'Red' }
];
return Div({ class: 'flex flex-col gap-4' }, [
@@ -485,6 +514,7 @@ $mount(DynamicDemo, '#demo-dynamic');
Div({ class: 'flex gap-4' }, sizes.map(s =>
Radio({
label: s.label,
name: 'size-group',
value: size,
radioValue: s.value,
onclick: () => size(s.value)
@@ -494,6 +524,7 @@ $mount(DynamicDemo, '#demo-dynamic');
Div({ class: 'flex gap-4' }, colors.map(c =>
Radio({
label: c.label,
name: 'color-group',
value: color,
radioValue: c.value,
onclick: () => color(c.value)
@@ -523,18 +554,21 @@ $mount(DynamicDemo, '#demo-dynamic');
Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: '💳 Credit Card',
name: 'payment-group',
value: method,
radioValue: 'credit',
onclick: () => method('credit')
}),
Radio({
label: '🏦 Bank Transfer',
name: 'payment-group',
value: method,
radioValue: 'bank',
onclick: () => method('bank')
}),
Radio({
label: '📱 Digital Wallet',
name: 'payment-group',
value: method,
radioValue: 'wallet',
onclick: () => method('wallet')
@@ -567,6 +601,7 @@ $mount(DynamicDemo, '#demo-dynamic');
Div({ class: 'flex gap-4' }, [
Radio({
label: 'Option A',
name: 'primary-group',
value: primary,
radioValue: 'primary1',
class: 'radio-primary',
@@ -574,6 +609,7 @@ $mount(DynamicDemo, '#demo-dynamic');
}),
Radio({
label: 'Option B',
name: 'primary-group',
value: primary,
radioValue: 'primary2',
class: 'radio-primary',
@@ -586,6 +622,7 @@ $mount(DynamicDemo, '#demo-dynamic');
Div({ class: 'flex gap-4' }, [
Radio({
label: 'Option A',
name: 'secondary-group',
value: secondary,
radioValue: 'secondary1',
class: 'radio-secondary',
@@ -593,6 +630,7 @@ $mount(DynamicDemo, '#demo-dynamic');
}),
Radio({
label: 'Option B',
name: 'secondary-group',
value: secondary,
radioValue: 'secondary2',
class: 'radio-secondary',
@@ -605,6 +643,7 @@ $mount(DynamicDemo, '#demo-dynamic');
Div({ class: 'flex gap-4' }, [
Radio({
label: 'Option A',
name: 'accent-group',
value: accent,
radioValue: 'accent1',
class: 'radio-accent',
@@ -612,6 +651,7 @@ $mount(DynamicDemo, '#demo-dynamic');
}),
Radio({
label: 'Option B',
name: 'accent-group',
value: accent,
radioValue: 'accent2',
class: 'radio-accent',
@@ -648,6 +688,7 @@ $mount(DynamicDemo, '#demo-dynamic');
Div({ class: 'flex gap-4' }, [
Radio({
label: 'Cars',
name: 'category-group',
value: category,
radioValue: 'cars',
onclick: () => {
@@ -657,6 +698,7 @@ $mount(DynamicDemo, '#demo-dynamic');
}),
Radio({
label: 'Colors',
name: 'category-group',
value: category,
radioValue: 'colors',
onclick: () => {
@@ -671,6 +713,7 @@ $mount(DynamicDemo, '#demo-dynamic');
options[category()].map(opt =>
Radio({
label: opt.label,
name: 'dynamic-option-group',
value: selected,
radioValue: opt.value,
onclick: () => selected(opt.value)