opui-css 5.4.2 → 6.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +648 -0
- package/MIGRATING-legacy.md +159 -0
- package/MIGRATING.md +1293 -69
- package/README.md +177 -26
- package/astro/index.ts +142 -13
- package/bin/opui-css.mjs +68 -0
- package/components/Accordion/Accordion.astro +6 -33
- package/components/Accordion/Accordion.react.tsx +23 -0
- package/components/Accordion/Accordion.svelte +27 -0
- package/components/Accordion/Accordion.vue +11 -28
- package/components/Accordion/AccordionActions.astro +16 -0
- package/components/Accordion/AccordionActions.react.tsx +15 -0
- package/components/Accordion/AccordionActions.svelte +23 -0
- package/components/Accordion/AccordionActions.vue +18 -0
- package/components/Accordion/AccordionContent.astro +9 -0
- package/components/Accordion/AccordionContent.react.tsx +6 -0
- package/components/Accordion/AccordionContent.svelte +15 -0
- package/components/Accordion/AccordionContent.vue +12 -0
- package/components/Accordion/AccordionSummary.astro +19 -0
- package/components/Accordion/AccordionSummary.react.tsx +30 -0
- package/components/Accordion/AccordionSummary.svelte +24 -0
- package/components/Accordion/AccordionSummary.vue +27 -0
- package/components/Accordion/icons.ts +2 -0
- package/components/Accordion/types.astro.ts +9 -0
- package/components/Accordion/types.react.ts +14 -0
- package/components/Accordion/types.svelte.ts +10 -2
- package/components/Accordion/types.ts +11 -5
- package/components/Accordion/types.vue-props.ts +22 -0
- package/components/Anchor/Anchor.astro +21 -33
- package/components/Anchor/Anchor.react.tsx +38 -0
- package/components/Anchor/Anchor.svelte +47 -0
- package/components/Anchor/Anchor.vue +32 -30
- package/components/Anchor/AnchorContent.astro +17 -0
- package/components/Anchor/AnchorContent.react.tsx +18 -0
- package/components/Anchor/AnchorContent.svelte +23 -0
- package/components/Anchor/AnchorContent.vue +20 -0
- package/components/Anchor/context.astro.ts +4 -0
- package/components/Anchor/context.react.ts +8 -0
- package/components/Anchor/context.svelte.ts +7 -0
- package/components/Anchor/context.vue.ts +4 -0
- package/components/Anchor/root.ts +12 -0
- package/components/Anchor/types.astro.ts +3 -0
- package/components/Anchor/types.react.ts +7 -0
- package/components/Anchor/types.svelte.ts +3 -3
- package/components/Anchor/types.ts +15 -6
- package/components/Anchor/types.vue-props.ts +15 -0
- package/components/Avatar/Avatar.astro +12 -8
- package/components/Avatar/Avatar.react.tsx +34 -0
- package/components/Avatar/Avatar.svelte +39 -0
- package/components/Avatar/Avatar.vue +10 -8
- package/components/Avatar/AvatarGroup.astro +9 -0
- package/components/Avatar/AvatarGroup.react.tsx +12 -0
- package/components/Avatar/AvatarGroup.svelte +15 -0
- package/components/Avatar/AvatarGroup.vue +12 -0
- package/components/Avatar/types.astro.ts +3 -2
- package/components/Avatar/types.react.ts +11 -0
- package/components/Avatar/types.svelte.ts +3 -4
- package/components/Avatar/types.ts +18 -15
- package/components/Avatar/types.vue-props.ts +11 -0
- package/components/Badge/Badge.astro +27 -22
- package/components/Badge/Badge.react.tsx +50 -0
- package/components/Badge/Badge.svelte +48 -0
- package/components/Badge/Badge.vue +15 -19
- package/components/Badge/types.react.ts +6 -0
- package/components/Badge/types.svelte.ts +4 -1
- package/components/Badge/types.ts +3 -3
- package/components/Badge/types.vue-props.ts +7 -0
- package/components/Button/Button.astro +12 -12
- package/components/Button/Button.react.tsx +33 -0
- package/components/Button/Button.svelte +37 -0
- package/components/Button/Button.vue +9 -9
- package/components/Button/types.astro.ts +2 -2
- package/components/Button/types.react.ts +11 -0
- package/components/Button/types.svelte.ts +11 -2
- package/components/Button/types.ts +20 -4
- package/components/Button/types.vue-props.ts +6 -0
- package/components/ButtonGroup/ButtonGroup.astro +7 -3
- package/components/ButtonGroup/ButtonGroup.react.tsx +30 -0
- package/components/ButtonGroup/ButtonGroup.svelte +34 -0
- package/components/ButtonGroup/ButtonGroup.vue +10 -7
- package/components/ButtonGroup/types.react.ts +4 -0
- package/components/ButtonGroup/types.ts +4 -4
- package/components/ButtonGroup/types.vue-props.ts +6 -0
- package/components/Callout/Callout.astro +7 -59
- package/components/Callout/Callout.react.tsx +26 -0
- package/components/Callout/Callout.svelte +32 -0
- package/components/Callout/Callout.vue +8 -48
- package/components/Callout/CalloutContent.astro +9 -0
- package/components/Callout/CalloutContent.react.tsx +6 -0
- package/components/Callout/CalloutContent.svelte +15 -0
- package/components/Callout/CalloutContent.vue +12 -0
- package/components/Callout/CalloutIcon.astro +25 -0
- package/components/Callout/CalloutIcon.react.tsx +26 -0
- package/components/Callout/CalloutIcon.svelte +24 -0
- package/components/Callout/CalloutIcon.vue +25 -0
- package/components/Callout/context.astro.ts +4 -0
- package/components/Callout/context.react.ts +8 -0
- package/components/Callout/context.svelte.ts +7 -0
- package/components/Callout/context.vue.ts +4 -0
- package/components/Callout/icons.ts +23 -0
- package/components/Callout/types.astro.ts +5 -0
- package/components/Callout/types.react.ts +9 -0
- package/components/Callout/types.svelte.ts +5 -3
- package/components/Callout/types.ts +5 -5
- package/components/Callout/types.vue-props.ts +14 -0
- package/components/Card/Card.astro +9 -25
- package/components/Card/Card.react.tsx +15 -0
- package/components/Card/Card.svelte +23 -0
- package/components/Card/Card.vue +10 -20
- package/components/Card/CardActions.astro +16 -0
- package/components/Card/CardActions.react.tsx +15 -0
- package/components/Card/CardActions.svelte +23 -0
- package/components/Card/CardActions.vue +18 -0
- package/components/Card/CardContent.astro +9 -0
- package/components/Card/CardContent.react.tsx +6 -0
- package/components/Card/CardContent.svelte +15 -0
- package/components/Card/CardContent.vue +12 -0
- package/components/Card/CardHeader.astro +9 -0
- package/components/Card/CardHeader.react.tsx +6 -0
- package/components/Card/CardHeader.svelte +15 -0
- package/components/Card/CardHeader.vue +12 -0
- package/components/Card/types.astro.ts +6 -0
- package/components/Card/types.react.ts +10 -0
- package/components/Card/types.svelte.ts +7 -3
- package/components/Card/types.ts +7 -7
- package/components/Card/types.vue-props.ts +17 -0
- package/components/Carousel/Carousel.astro +44 -0
- package/components/Carousel/Carousel.react.tsx +47 -0
- package/components/Carousel/Carousel.svelte +45 -0
- package/components/Carousel/Carousel.vue +44 -0
- package/components/Carousel/types.astro.ts +4 -0
- package/components/Carousel/types.react.ts +4 -0
- package/components/Carousel/types.svelte.ts +4 -0
- package/components/Carousel/types.ts +11 -0
- package/components/Carousel/types.vue-props.ts +6 -0
- package/components/Checkbox/Checkbox.astro +27 -15
- package/components/Checkbox/Checkbox.react.tsx +51 -0
- package/components/Checkbox/Checkbox.svelte +61 -0
- package/components/Checkbox/Checkbox.vue +39 -18
- package/components/Checkbox/CheckboxInput.astro +6 -2
- package/components/Checkbox/CheckboxInput.react.tsx +39 -0
- package/components/Checkbox/CheckboxInput.svelte +34 -0
- package/components/Checkbox/CheckboxInput.vue +29 -11
- package/components/Checkbox/types.astro.ts +2 -3
- package/components/Checkbox/types.react.ts +11 -0
- package/components/Checkbox/types.svelte.ts +8 -4
- package/components/Checkbox/types.ts +8 -4
- package/components/Checkbox/types.vue-props.ts +15 -0
- package/components/Chip/Chip.astro +22 -6
- package/components/Chip/Chip.react.tsx +45 -0
- package/components/Chip/Chip.svelte +45 -0
- package/components/Chip/Chip.vue +16 -9
- package/components/Chip/types.astro.ts +1 -1
- package/components/Chip/types.react.ts +15 -0
- package/components/Chip/types.svelte.ts +6 -4
- package/components/Chip/types.ts +22 -5
- package/components/Chip/types.vue-props.ts +11 -0
- package/components/DescriptionList/DescriptionList.astro +6 -2
- package/components/DescriptionList/DescriptionList.react.tsx +25 -0
- package/components/DescriptionList/DescriptionList.svelte +29 -0
- package/components/DescriptionList/DescriptionList.vue +7 -8
- package/components/DescriptionList/DescriptionListDescription.astro +9 -0
- package/components/DescriptionList/DescriptionListDescription.react.tsx +9 -0
- package/components/DescriptionList/DescriptionListDescription.svelte +15 -0
- package/components/DescriptionList/DescriptionListDescription.vue +15 -0
- package/components/DescriptionList/DescriptionListItem.astro +9 -0
- package/components/DescriptionList/DescriptionListItem.react.tsx +6 -0
- package/components/DescriptionList/DescriptionListItem.svelte +15 -0
- package/components/DescriptionList/{Item.vue → DescriptionListItem.vue} +5 -2
- package/components/DescriptionList/DescriptionListTerm.astro +9 -0
- package/components/DescriptionList/DescriptionListTerm.react.tsx +6 -0
- package/components/DescriptionList/DescriptionListTerm.svelte +15 -0
- package/components/DescriptionList/{Term.vue → DescriptionListTerm.vue} +5 -2
- package/components/DescriptionList/types.astro.ts +3 -3
- package/components/DescriptionList/types.react.ts +10 -0
- package/components/DescriptionList/types.svelte.ts +6 -0
- package/components/DescriptionList/types.ts +3 -1
- package/components/DescriptionList/types.vue-props.ts +12 -0
- package/components/Dialog/Dialog.astro +12 -26
- package/components/Dialog/Dialog.react.tsx +23 -0
- package/components/Dialog/Dialog.svelte +33 -0
- package/components/Dialog/Dialog.vue +13 -23
- package/components/Dialog/DialogContent.astro +9 -0
- package/components/Dialog/DialogContent.react.tsx +6 -0
- package/components/Dialog/DialogContent.svelte +15 -0
- package/components/Dialog/DialogContent.vue +12 -0
- package/components/Dialog/DialogFooter.astro +16 -0
- package/components/Dialog/DialogFooter.react.tsx +15 -0
- package/components/Dialog/DialogFooter.svelte +23 -0
- package/components/Dialog/DialogFooter.vue +18 -0
- package/components/Dialog/DialogHeader.astro +9 -0
- package/components/Dialog/DialogHeader.react.tsx +6 -0
- package/components/Dialog/DialogHeader.svelte +15 -0
- package/components/Dialog/DialogHeader.vue +12 -0
- package/components/Dialog/DialogTitle.astro +14 -0
- package/components/Dialog/DialogTitle.react.tsx +13 -0
- package/components/Dialog/DialogTitle.svelte +23 -0
- package/components/Dialog/DialogTitle.vue +18 -0
- package/components/Dialog/context.astro.ts +4 -0
- package/components/Dialog/context.react.ts +8 -0
- package/components/Dialog/context.svelte.ts +7 -0
- package/components/Dialog/context.vue.ts +4 -0
- package/components/Dialog/types.astro.ts +8 -0
- package/components/Dialog/types.react.ts +12 -0
- package/components/Dialog/types.svelte.ts +11 -3
- package/components/Dialog/types.ts +13 -6
- package/components/Dialog/types.vue-props.ts +24 -0
- package/components/Divider/Divider.astro +29 -7
- package/components/Divider/Divider.react.tsx +36 -0
- package/components/Divider/Divider.svelte +40 -0
- package/components/Divider/Divider.vue +22 -4
- package/components/Divider/types.react.ts +4 -0
- package/components/Divider/types.ts +3 -1
- package/components/Divider/types.vue-props.ts +6 -0
- package/components/Drawer/Drawer.astro +13 -18
- package/components/Drawer/Drawer.react.tsx +40 -0
- package/components/Drawer/Drawer.svelte +50 -0
- package/components/Drawer/Drawer.vue +14 -19
- package/components/Drawer/DrawerContent.astro +9 -0
- package/components/Drawer/DrawerContent.react.tsx +6 -0
- package/components/Drawer/DrawerContent.svelte +15 -0
- package/components/Drawer/DrawerContent.vue +12 -0
- package/components/Drawer/DrawerFooter.astro +9 -4
- package/components/Drawer/DrawerFooter.react.tsx +15 -0
- package/components/Drawer/DrawerFooter.svelte +23 -0
- package/components/Drawer/DrawerFooter.vue +10 -8
- package/components/Drawer/DrawerHeader.astro +18 -10
- package/components/Drawer/DrawerHeader.react.tsx +41 -0
- package/components/Drawer/DrawerHeader.svelte +42 -0
- package/components/Drawer/DrawerHeader.vue +18 -19
- package/components/Drawer/DrawerTitle.astro +14 -0
- package/components/Drawer/DrawerTitle.react.tsx +13 -0
- package/components/Drawer/DrawerTitle.svelte +23 -0
- package/components/Drawer/DrawerTitle.vue +18 -0
- package/components/Drawer/context.astro.ts +4 -0
- package/components/Drawer/context.react.ts +8 -0
- package/components/Drawer/context.svelte.ts +7 -0
- package/components/Drawer/context.vue.ts +4 -0
- package/components/Drawer/icons.ts +2 -0
- package/components/Drawer/types.astro.ts +5 -1
- package/components/Drawer/types.react.ts +13 -0
- package/components/Drawer/types.svelte.ts +6 -5
- package/components/Drawer/types.ts +15 -10
- package/components/Drawer/types.vue-props.ts +24 -0
- package/components/FieldDescription/FieldDescription.astro +1 -1
- package/components/FieldDescription/FieldDescription.react.tsx +6 -0
- package/components/FieldDescription/FieldDescription.svelte +15 -0
- package/components/FieldDescription/FieldDescription.vue +3 -3
- package/components/FieldDescription/types.react.ts +4 -0
- package/components/FieldDescription/types.vue-props.ts +6 -0
- package/components/FieldGroup/FieldGroup.astro +15 -15
- package/components/FieldGroup/FieldGroup.react.tsx +27 -0
- package/components/FieldGroup/FieldGroup.svelte +32 -0
- package/components/FieldGroup/FieldGroup.vue +8 -10
- package/components/FieldGroup/context.astro.ts +4 -0
- package/components/FieldGroup/context.react.ts +8 -0
- package/components/FieldGroup/context.svelte.ts +8 -0
- package/components/FieldGroup/context.vue.ts +4 -0
- package/components/FieldGroup/types.react.ts +4 -0
- package/components/FieldGroup/types.ts +3 -1
- package/components/FieldGroup/types.vue-props.ts +6 -0
- package/components/FieldLegend/FieldLegend.react.tsx +14 -0
- package/components/FieldLegend/FieldLegend.svelte +20 -0
- package/components/FieldLegend/FieldLegend.vue +8 -6
- package/components/FieldLegend/types.react.ts +6 -0
- package/components/FieldLegend/types.svelte.ts +3 -3
- package/components/FieldLegend/types.vue-props.ts +9 -0
- package/components/{FieldSet/FieldSet.astro → Fieldset/Fieldset.astro} +6 -2
- package/components/Fieldset/Fieldset.react.tsx +15 -0
- package/components/Fieldset/Fieldset.svelte +21 -0
- package/components/Fieldset/Fieldset.vue +21 -0
- package/components/Fieldset/types.react.ts +6 -0
- package/components/Fieldset/types.svelte.ts +6 -0
- package/components/Fieldset/types.ts +1 -0
- package/components/Fieldset/types.vue-props.ts +9 -0
- package/components/Form/Form.react.tsx +9 -0
- package/components/Form/Form.svelte +16 -0
- package/components/Form/Form.vue +7 -5
- package/components/Form/types.react.ts +6 -0
- package/components/Form/types.svelte.ts +3 -4
- package/components/Form/types.vue-props.ts +9 -0
- package/components/List/List.astro +3 -3
- package/components/List/List.react.tsx +27 -0
- package/components/List/List.svelte +31 -0
- package/components/List/List.vue +4 -9
- package/components/List/types.react.ts +4 -0
- package/components/List/types.ts +2 -3
- package/components/List/types.vue-props.ts +6 -0
- package/components/ListItem/ListItem.astro +46 -39
- package/components/ListItem/ListItem.react.tsx +65 -0
- package/components/ListItem/ListItem.svelte +80 -0
- package/components/ListItem/ListItem.vue +41 -46
- package/components/ListItem/types.astro.ts +2 -3
- package/components/ListItem/types.react.ts +17 -0
- package/components/ListItem/types.svelte.ts +7 -4
- package/components/ListItem/types.ts +14 -11
- package/components/ListItem/types.vue-props.ts +14 -0
- package/components/Menu/Menu.astro +86 -0
- package/components/Menu/Menu.react.tsx +87 -0
- package/components/Menu/Menu.svelte +71 -0
- package/components/Menu/Menu.vue +76 -0
- package/components/Menu/context.astro.ts +4 -0
- package/components/Menu/context.react.ts +8 -0
- package/components/Menu/context.svelte.ts +7 -0
- package/components/Menu/context.vue.ts +4 -0
- package/components/Menu/types.astro.ts +12 -0
- package/components/Menu/types.react.ts +12 -0
- package/components/Menu/types.svelte.ts +12 -0
- package/components/Menu/types.ts +23 -0
- package/components/Menu/types.vue-props.ts +16 -0
- package/components/Progress/Progress.astro +10 -21
- package/components/Progress/Progress.react.tsx +27 -0
- package/components/Progress/Progress.svelte +30 -0
- package/components/Progress/Progress.vue +17 -21
- package/components/Progress/types.astro.ts +2 -1
- package/components/Progress/types.react.ts +5 -0
- package/components/Progress/types.svelte.ts +2 -1
- package/components/Progress/types.ts +1 -6
- package/components/Progress/types.vue-props.ts +6 -0
- package/components/Radio/Radio.astro +29 -15
- package/components/Radio/Radio.react.tsx +51 -0
- package/components/Radio/Radio.svelte +59 -0
- package/components/Radio/Radio.vue +37 -16
- package/components/Radio/RadioInput.astro +5 -2
- package/components/Radio/RadioInput.react.tsx +10 -0
- package/components/Radio/RadioInput.svelte +27 -0
- package/components/Radio/RadioInput.vue +28 -3
- package/components/Radio/types.astro.ts +2 -1
- package/components/Radio/types.react.ts +11 -0
- package/components/Radio/types.svelte.ts +9 -5
- package/components/Radio/types.ts +9 -4
- package/components/Radio/types.vue-props.ts +15 -0
- package/components/Range/Range.astro +49 -38
- package/components/Range/Range.react.tsx +157 -0
- package/components/Range/Range.svelte +136 -0
- package/components/Range/Range.vue +116 -32
- package/components/Range/types.astro.ts +1 -3
- package/components/Range/types.react.ts +10 -0
- package/components/Range/types.svelte.ts +8 -3
- package/components/Range/types.ts +13 -14
- package/components/Range/types.vue-props.ts +16 -0
- package/components/Range/value.ts +27 -0
- package/components/Select/Select.astro +70 -31
- package/components/Select/Select.react.tsx +124 -0
- package/components/Select/Select.svelte +123 -0
- package/components/Select/Select.vue +108 -36
- package/components/Select/selection.ts +11 -0
- package/components/Select/types.react.ts +6 -0
- package/components/Select/types.svelte.ts +1 -1
- package/components/Select/types.ts +16 -13
- package/components/Select/types.vue-props.ts +20 -0
- package/components/Switch/Switch.astro +22 -26
- package/components/Switch/Switch.react.tsx +63 -0
- package/components/Switch/Switch.svelte +73 -0
- package/components/Switch/Switch.vue +36 -18
- package/components/Switch/SwitchInput.astro +5 -2
- package/components/Switch/SwitchInput.react.tsx +12 -0
- package/components/Switch/SwitchInput.svelte +30 -0
- package/components/Switch/SwitchInput.vue +25 -3
- package/components/Switch/types.astro.ts +4 -2
- package/components/Switch/types.react.ts +11 -0
- package/components/Switch/types.svelte.ts +11 -4
- package/components/Switch/types.ts +9 -6
- package/components/Switch/types.vue-props.ts +17 -0
- package/components/Table/Table.astro +15 -2
- package/components/Table/Table.react.tsx +24 -0
- package/components/Table/Table.svelte +28 -0
- package/components/Table/Table.vue +9 -8
- package/components/Table/TableBody.astro +9 -0
- package/components/Table/TableBody.react.tsx +5 -0
- package/components/Table/TableBody.svelte +9 -0
- package/components/Table/TableBody.vue +12 -0
- package/components/Table/TableCaption.astro +9 -0
- package/components/Table/TableCaption.react.tsx +5 -0
- package/components/Table/TableCaption.svelte +9 -0
- package/components/Table/TableCaption.vue +12 -0
- package/components/Table/TableCell.astro +9 -0
- package/components/Table/TableCell.react.tsx +6 -0
- package/components/Table/TableCell.svelte +16 -0
- package/components/Table/TableCell.vue +12 -0
- package/components/Table/TableColumn.astro +8 -0
- package/components/Table/TableColumn.react.tsx +7 -0
- package/components/Table/TableColumn.svelte +8 -0
- package/components/Table/TableColumn.vue +12 -0
- package/components/Table/TableColumnGroup.astro +9 -0
- package/components/Table/TableColumnGroup.react.tsx +5 -0
- package/components/Table/TableColumnGroup.svelte +9 -0
- package/components/Table/TableColumnGroup.vue +12 -0
- package/components/Table/TableFoot.astro +9 -0
- package/components/Table/TableFoot.react.tsx +5 -0
- package/components/Table/TableFoot.svelte +9 -0
- package/components/Table/TableFoot.vue +12 -0
- package/components/Table/TableHead.astro +9 -0
- package/components/Table/TableHead.react.tsx +5 -0
- package/components/Table/TableHead.svelte +9 -0
- package/components/Table/TableHead.vue +12 -0
- package/components/Table/TableHeaderCell.astro +9 -0
- package/components/Table/TableHeaderCell.react.tsx +10 -0
- package/components/Table/TableHeaderCell.svelte +16 -0
- package/components/Table/TableHeaderCell.vue +12 -0
- package/components/Table/TableRow.astro +9 -0
- package/components/Table/TableRow.react.tsx +5 -0
- package/components/Table/TableRow.svelte +9 -0
- package/components/{DescriptionList/Description.vue → Table/TableRow.vue} +3 -3
- package/components/Table/types.astro.ts +17 -11
- package/components/Table/types.react.ts +22 -0
- package/components/Table/types.svelte.ts +19 -7
- package/components/Table/types.ts +8 -3
- package/components/Table/types.vue-props.ts +28 -0
- package/components/Tabs/Tabs.astro +23 -13
- package/components/Tabs/Tabs.react.tsx +43 -0
- package/components/Tabs/Tabs.svelte +43 -0
- package/components/Tabs/Tabs.vue +19 -9
- package/components/Tabs/TabsItem.astro +16 -28
- package/components/Tabs/TabsItem.react.tsx +47 -0
- package/components/Tabs/TabsItem.svelte +52 -0
- package/components/Tabs/TabsItem.vue +23 -21
- package/components/Tabs/TabsLabel.astro +16 -0
- package/components/Tabs/TabsLabel.react.tsx +17 -0
- package/components/Tabs/TabsLabel.svelte +19 -0
- package/components/Tabs/TabsLabel.vue +16 -0
- package/components/Tabs/TabsPanel.astro +2 -9
- package/components/Tabs/TabsPanel.react.tsx +6 -0
- package/components/Tabs/TabsPanel.svelte +15 -0
- package/components/Tabs/TabsPanel.vue +3 -22
- package/components/Tabs/context.astro.ts +4 -0
- package/components/Tabs/context.react.ts +8 -0
- package/components/Tabs/context.svelte.ts +7 -0
- package/components/Tabs/context.vue.ts +4 -0
- package/components/Tabs/types.astro.ts +5 -3
- package/components/Tabs/types.react.ts +12 -0
- package/components/Tabs/types.svelte.ts +6 -6
- package/components/Tabs/types.ts +10 -8
- package/components/Tabs/types.vue-props.ts +25 -0
- package/components/TextField/TextField.astro +36 -52
- package/components/TextField/TextField.react.tsx +70 -0
- package/components/TextField/TextField.svelte +84 -0
- package/components/TextField/TextField.vue +59 -39
- package/components/TextField/types.astro.ts +1 -3
- package/components/TextField/types.react.ts +12 -0
- package/components/TextField/types.svelte.ts +2 -4
- package/components/TextField/types.ts +11 -25
- package/components/TextField/types.vue-props.ts +21 -0
- package/components/Textarea/Textarea.astro +34 -48
- package/components/Textarea/Textarea.react.tsx +64 -0
- package/components/Textarea/Textarea.svelte +80 -0
- package/components/Textarea/Textarea.vue +55 -31
- package/components/Textarea/types.astro.ts +1 -3
- package/components/Textarea/types.react.ts +8 -0
- package/components/Textarea/types.svelte.ts +1 -9
- package/components/Textarea/types.ts +10 -22
- package/components/Textarea/types.vue-props.ts +20 -0
- package/components/ToggleButton/ToggleButton.astro +14 -14
- package/components/ToggleButton/ToggleButton.react.tsx +57 -0
- package/components/ToggleButton/ToggleButton.svelte +58 -0
- package/components/ToggleButton/ToggleButton.vue +41 -17
- package/components/ToggleButton/types.react.ts +4 -0
- package/components/ToggleButton/types.svelte.ts +0 -2
- package/components/ToggleButton/types.ts +2 -6
- package/components/ToggleButton/types.vue-props.ts +11 -0
- package/components/ToggleGroup/ToggleGroup.astro +16 -18
- package/components/ToggleGroup/ToggleGroup.react.tsx +54 -0
- package/components/ToggleGroup/ToggleGroup.svelte +54 -0
- package/components/ToggleGroup/ToggleGroup.vue +29 -20
- package/components/ToggleGroup/context.astro.ts +5 -0
- package/components/ToggleGroup/context.react.ts +8 -0
- package/components/ToggleGroup/context.svelte.ts +8 -0
- package/components/ToggleGroup/context.vue.ts +4 -0
- package/components/ToggleGroup/selection.ts +12 -0
- package/components/ToggleGroup/types.react.ts +12 -0
- package/components/ToggleGroup/types.svelte.ts +1 -4
- package/components/ToggleGroup/types.ts +11 -9
- package/components/ToggleGroup/types.vue-props.ts +6 -0
- package/components/Tooltip/Tooltip.astro +6 -7
- package/components/Tooltip/Tooltip.react.tsx +24 -0
- package/components/Tooltip/Tooltip.svelte +29 -0
- package/components/Tooltip/Tooltip.vue +7 -8
- package/components/Tooltip/types.react.ts +4 -0
- package/components/Tooltip/types.svelte.ts +1 -4
- package/components/Tooltip/types.ts +2 -8
- package/components/Tooltip/types.vue-props.ts +6 -0
- package/components/content.svelte +9 -0
- package/components/context.astro.ts +15 -0
- package/components/cx.ts +12 -0
- package/components/dev.ts +63 -0
- package/components/group.ts +2 -0
- package/components/id.ts +9 -0
- package/components/style.ts +33 -0
- package/components/tag.ts +6 -0
- package/components/vue.ts +18 -0
- package/core/normalize.css +56 -79
- package/core/palette.css +99 -282
- package/core/utils.css +31 -44
- package/css/compat/avatar.css +7 -0
- package/css/compat/menu.css +20 -0
- package/css/compat.css +3 -0
- package/css/components/accordion.css +123 -59
- package/css/components/anchor.css +21 -8
- package/css/components/avatar.css +57 -17
- package/css/components/badge.css +84 -45
- package/css/components/button-group.css +120 -129
- package/css/components/button.css +326 -116
- package/css/components/callout.css +88 -47
- package/css/components/card.css +181 -63
- package/css/components/carousel.css +399 -0
- package/css/components/checkbox.css +27 -148
- package/css/components/chip.css +175 -52
- package/css/components/choice.css +291 -0
- package/css/components/description-list.css +51 -41
- package/css/components/dialog.css +120 -30
- package/css/components/divider.css +62 -9
- package/css/components/drawer.css +181 -51
- package/css/components/form.css +51 -66
- package/css/components/layout.css +92 -0
- package/css/components/link.css +44 -12
- package/css/components/list.css +252 -135
- package/css/components/menu.css +174 -0
- package/css/components/progress.css +37 -29
- package/css/components/radio.css +32 -141
- package/css/components/range.css +244 -101
- package/css/components/select.css +84 -65
- package/css/components/spinner.css +31 -12
- package/css/components/switch.css +98 -171
- package/css/components/table.css +120 -79
- package/css/components/tabs.css +230 -36
- package/css/components/text-field.css +296 -186
- package/css/components/textarea.css +5 -11
- package/css/components/toggle-button.css +84 -44
- package/css/components/toggle-group.css +62 -32
- package/css/components/tooltip.css +87 -30
- package/css/components/typography.css +519 -298
- package/css/components.css +25 -18
- package/css/imports.css +2 -4
- package/css/js/checkbox.d.ts +3 -0
- package/css/js/checkbox.js +10 -0
- package/css/js/range.d.ts +1 -0
- package/css/js/range.js +44 -0
- package/css/layers.css +2 -0
- package/css/theme.css +729 -103
- package/dist/op.css +12 -237
- package/dist/op.css.map +1 -1
- package/dist/opui.baseline-2023.css +9209 -0
- package/dist/opui.baseline-2023.css.map +1 -0
- package/dist/opui.baseline-2024.css +9209 -0
- package/dist/opui.baseline-2024.css.map +1 -0
- package/dist/opui.baseline-2025.css +9209 -0
- package/dist/opui.baseline-2025.css.map +1 -0
- package/dist/opui.baseline-2026.css +9209 -0
- package/dist/opui.baseline-2026.css.map +1 -0
- package/dist/opui.components.css +5497 -3291
- package/dist/opui.components.css.map +1 -1
- package/dist/opui.css +6616 -4255
- package/dist/opui.css.map +1 -1
- package/dist/opui.no-compat.css +9182 -0
- package/dist/opui.no-compat.css.map +1 -0
- package/env.d.ts +10 -7
- package/open-props.css +10 -1
- package/package.json +63 -17
- package/react/elements.ts +13 -0
- package/react/index.ts +176 -0
- package/skills/opui/SKILL.md +75 -0
- package/skills/opui/references/accordion.md +253 -0
- package/skills/opui/references/anchor.md +213 -0
- package/skills/opui/references/avatar.md +202 -0
- package/skills/opui/references/badge.md +199 -0
- package/skills/opui/references/button-group.md +239 -0
- package/skills/opui/references/button.md +242 -0
- package/skills/opui/references/callout.md +221 -0
- package/skills/opui/references/card.md +222 -0
- package/skills/opui/references/carousel.md +269 -0
- package/skills/opui/references/checkbox.md +241 -0
- package/skills/opui/references/chip.md +135 -0
- package/skills/opui/references/customizing.md +85 -0
- package/skills/opui/references/description-list.md +191 -0
- package/skills/opui/references/dialog.md +301 -0
- package/skills/opui/references/divider.md +112 -0
- package/skills/opui/references/drawer.md +802 -0
- package/skills/opui/references/form.md +260 -0
- package/skills/opui/references/getting-started.md +398 -0
- package/skills/opui/references/index.md +89 -0
- package/skills/opui/references/layout.md +161 -0
- package/skills/opui/references/list.md +216 -0
- package/skills/opui/references/menu.md +248 -0
- package/skills/opui/references/progress.md +114 -0
- package/skills/opui/references/radio.md +234 -0
- package/skills/opui/references/range.md +150 -0
- package/skills/opui/references/select.md +255 -0
- package/skills/opui/references/spinner.md +85 -0
- package/skills/opui/references/switch.md +223 -0
- package/skills/opui/references/table.md +480 -0
- package/skills/opui/references/tabs.md +257 -0
- package/skills/opui/references/text-field.md +167 -0
- package/skills/opui/references/textarea.md +169 -0
- package/skills/opui/references/theming.md +278 -0
- package/skills/opui/references/toggle.md +222 -0
- package/skills/opui/references/tooltip.md +167 -0
- package/skills/opui/references/typography.md +159 -0
- package/svelte/elements.ts +7 -0
- package/svelte/index.ts +177 -0
- package/themes/bootstrap.css +223 -0
- package/themes/brutalist.css +105 -0
- package/themes/m3.css +152 -0
- package/themes/shadcn.css +125 -0
- package/tokens.json +3729 -0
- package/vue/index.ts +136 -15
- package/components/AGENTS.md +0 -247
- package/components/Accordion/types.d.vue.ts +0 -15
- package/components/Accordion/types.solid.ts +0 -6
- package/components/Anchor/types.d.vue.ts +0 -10
- package/components/Anchor/types.solid.ts +0 -6
- package/components/Avatar/types.d.vue.ts +0 -12
- package/components/Avatar/types.solid.ts +0 -11
- package/components/Badge/types.d.vue.ts +0 -10
- package/components/Badge/types.solid.ts +0 -4
- package/components/Button/types.d.vue.ts +0 -10
- package/components/Button/types.solid.ts +0 -8
- package/components/ButtonGroup/types.d.vue.ts +0 -10
- package/components/ButtonGroup/types.solid.ts +0 -4
- package/components/Callout/types.d.vue.ts +0 -10
- package/components/Callout/types.solid.ts +0 -6
- package/components/Card/types.d.vue.ts +0 -10
- package/components/Card/types.solid.ts +0 -6
- package/components/Checkbox/types.d.vue.ts +0 -11
- package/components/Checkbox/types.solid.ts +0 -9
- package/components/Chip/types.d.vue.ts +0 -10
- package/components/Chip/types.solid.ts +0 -10
- package/components/ClassicSelect/ClassicSelect.astro +0 -60
- package/components/ClassicSelect/ClassicSelect.vue +0 -54
- package/components/ClassicSelect/types.astro.ts +0 -8
- package/components/ClassicSelect/types.d.vue.ts +0 -10
- package/components/ClassicSelect/types.solid.ts +0 -5
- package/components/ClassicSelect/types.svelte.ts +0 -5
- package/components/ClassicSelect/types.ts +0 -15
- package/components/DescriptionList/Description.astro +0 -9
- package/components/DescriptionList/Item.astro +0 -9
- package/components/DescriptionList/Term.astro +0 -9
- package/components/DescriptionList/index.ts +0 -12
- package/components/DescriptionList/types.d.vue.ts +0 -10
- package/components/DescriptionList/types.solid.ts +0 -4
- package/components/Dialog/types.d.vue.ts +0 -10
- package/components/Dialog/types.solid.ts +0 -8
- package/components/Divider/types.d.vue.ts +0 -6
- package/components/Divider/types.solid.ts +0 -4
- package/components/Drawer/types.d.vue.ts +0 -31
- package/components/Drawer/types.solid.ts +0 -12
- package/components/FieldDescription/types.d.vue.ts +0 -10
- package/components/FieldDescription/types.solid.ts +0 -5
- package/components/FieldGroup/types.d.vue.ts +0 -12
- package/components/FieldGroup/types.solid.ts +0 -5
- package/components/FieldLegend/types.d.vue.ts +0 -11
- package/components/FieldLegend/types.solid.ts +0 -5
- package/components/FieldSet/FieldSet.vue +0 -18
- package/components/FieldSet/types.d.vue.ts +0 -11
- package/components/FieldSet/types.solid.ts +0 -5
- package/components/FieldSet/types.svelte.ts +0 -8
- package/components/FieldSet/types.ts +0 -5
- package/components/Form/types.d.vue.ts +0 -11
- package/components/Form/types.solid.ts +0 -5
- package/components/IconButton/IconButton.astro +0 -24
- package/components/IconButton/IconButton.vue +0 -24
- package/components/IconButton/types.astro.ts +0 -6
- package/components/IconButton/types.d.vue.ts +0 -10
- package/components/IconButton/types.solid.ts +0 -8
- package/components/IconButton/types.svelte.ts +0 -6
- package/components/IconButton/types.ts +0 -16
- package/components/List/types.d.vue.ts +0 -10
- package/components/List/types.solid.ts +0 -4
- package/components/ListItem/types.d.vue.ts +0 -10
- package/components/ListItem/types.solid.ts +0 -12
- package/components/Progress/types.d.vue.ts +0 -10
- package/components/Progress/types.solid.ts +0 -4
- package/components/Radio/types.d.vue.ts +0 -11
- package/components/Radio/types.solid.ts +0 -9
- package/components/Range/types.d.vue.ts +0 -14
- package/components/Range/types.solid.ts +0 -6
- package/components/Select/types.d.vue.ts +0 -17
- package/components/Select/types.solid.ts +0 -6
- package/components/Switch/types.d.vue.ts +0 -13
- package/components/Switch/types.solid.ts +0 -9
- package/components/Table/Body.astro +0 -11
- package/components/Table/Body.vue +0 -5
- package/components/Table/Cell.astro +0 -11
- package/components/Table/Cell.vue +0 -5
- package/components/Table/Column.astro +0 -12
- package/components/Table/Column.vue +0 -19
- package/components/Table/ColumnGroup.astro +0 -11
- package/components/Table/ColumnGroup.vue +0 -5
- package/components/Table/Head.astro +0 -11
- package/components/Table/Head.vue +0 -5
- package/components/Table/HeaderCell.astro +0 -11
- package/components/Table/HeaderCell.vue +0 -5
- package/components/Table/Row.astro +0 -11
- package/components/Table/Row.vue +0 -5
- package/components/Table/index.ts +0 -20
- package/components/Table/types.d.vue.ts +0 -10
- package/components/Table/types.solid.ts +0 -8
- package/components/Tabs/TabsTab.astro +0 -15
- package/components/Tabs/TabsTab.vue +0 -24
- package/components/Tabs/index.ts +0 -14
- package/components/Tabs/types.d.vue.ts +0 -31
- package/components/Tabs/types.solid.ts +0 -12
- package/components/TextField/types.d.vue.ts +0 -20
- package/components/TextField/types.solid.ts +0 -22
- package/components/Textarea/types.d.vue.ts +0 -19
- package/components/Textarea/types.solid.ts +0 -6
- package/components/Toast/Toast.astro +0 -42
- package/components/Toast/Toast.vue +0 -48
- package/components/ToggleButton/types.d.vue.ts +0 -10
- package/components/ToggleButton/types.solid.ts +0 -7
- package/components/ToggleGroup/types.d.vue.ts +0 -15
- package/components/ToggleGroup/types.solid.ts +0 -4
- package/components/Tooltip/types.d.vue.ts +0 -10
- package/components/Tooltip/types.solid.ts +0 -6
- package/css/components/icon-button.css +0 -139
- package/css/components/text-input.css +0 -68
- package/css/components/toast.css +0 -157
- package/css/js/toast.js +0 -94
- /package/components/{FieldSet → Fieldset}/types.astro.ts +0 -0
package/vue/index.ts
CHANGED
|
@@ -1,32 +1,48 @@
|
|
|
1
1
|
export { default as Accordion } from "../components/Accordion/Accordion.vue"
|
|
2
|
+
export { default as AccordionActions } from "../components/Accordion/AccordionActions.vue"
|
|
3
|
+
export { default as AccordionContent } from "../components/Accordion/AccordionContent.vue"
|
|
4
|
+
export { default as AccordionSummary } from "../components/Accordion/AccordionSummary.vue"
|
|
2
5
|
export { default as Anchor } from "../components/Anchor/Anchor.vue"
|
|
6
|
+
export { default as AnchorContent } from "../components/Anchor/AnchorContent.vue"
|
|
3
7
|
export { default as Avatar } from "../components/Avatar/Avatar.vue"
|
|
8
|
+
export { default as AvatarGroup } from "../components/Avatar/AvatarGroup.vue"
|
|
4
9
|
export { default as Badge } from "../components/Badge/Badge.vue"
|
|
5
10
|
export { default as Button } from "../components/Button/Button.vue"
|
|
6
11
|
export { default as ButtonGroup } from "../components/ButtonGroup/ButtonGroup.vue"
|
|
7
12
|
export { default as Callout } from "../components/Callout/Callout.vue"
|
|
13
|
+
export { default as CalloutContent } from "../components/Callout/CalloutContent.vue"
|
|
14
|
+
export { default as CalloutIcon } from "../components/Callout/CalloutIcon.vue"
|
|
8
15
|
export { default as Card } from "../components/Card/Card.vue"
|
|
16
|
+
export { default as CardActions } from "../components/Card/CardActions.vue"
|
|
17
|
+
export { default as CardContent } from "../components/Card/CardContent.vue"
|
|
18
|
+
export { default as CardHeader } from "../components/Card/CardHeader.vue"
|
|
19
|
+
export { default as Carousel } from "../components/Carousel/Carousel.vue"
|
|
9
20
|
export { default as Checkbox } from "../components/Checkbox/Checkbox.vue"
|
|
10
21
|
export { default as CheckboxInput } from "../components/Checkbox/CheckboxInput.vue"
|
|
11
22
|
export { default as Chip } from "../components/Chip/Chip.vue"
|
|
12
|
-
export { default as ClassicSelect } from "../components/ClassicSelect/ClassicSelect.vue"
|
|
13
|
-
export { default as Description } from "../components/DescriptionList/Description.vue"
|
|
14
23
|
export { default as DescriptionList } from "../components/DescriptionList/DescriptionList.vue"
|
|
15
|
-
export { default as
|
|
16
|
-
export { default as
|
|
24
|
+
export { default as DescriptionListDescription } from "../components/DescriptionList/DescriptionListDescription.vue"
|
|
25
|
+
export { default as DescriptionListItem } from "../components/DescriptionList/DescriptionListItem.vue"
|
|
26
|
+
export { default as DescriptionListTerm } from "../components/DescriptionList/DescriptionListTerm.vue"
|
|
17
27
|
export { default as Dialog } from "../components/Dialog/Dialog.vue"
|
|
28
|
+
export { default as DialogContent } from "../components/Dialog/DialogContent.vue"
|
|
29
|
+
export { default as DialogFooter } from "../components/Dialog/DialogFooter.vue"
|
|
30
|
+
export { default as DialogHeader } from "../components/Dialog/DialogHeader.vue"
|
|
31
|
+
export { default as DialogTitle } from "../components/Dialog/DialogTitle.vue"
|
|
18
32
|
export { default as Divider } from "../components/Divider/Divider.vue"
|
|
19
33
|
export { default as Drawer } from "../components/Drawer/Drawer.vue"
|
|
34
|
+
export { default as DrawerContent } from "../components/Drawer/DrawerContent.vue"
|
|
20
35
|
export { default as DrawerFooter } from "../components/Drawer/DrawerFooter.vue"
|
|
21
36
|
export { default as DrawerHeader } from "../components/Drawer/DrawerHeader.vue"
|
|
37
|
+
export { default as DrawerTitle } from "../components/Drawer/DrawerTitle.vue"
|
|
22
38
|
export { default as FieldDescription } from "../components/FieldDescription/FieldDescription.vue"
|
|
23
39
|
export { default as FieldGroup } from "../components/FieldGroup/FieldGroup.vue"
|
|
24
40
|
export { default as FieldLegend } from "../components/FieldLegend/FieldLegend.vue"
|
|
25
|
-
export { default as
|
|
41
|
+
export { default as Fieldset } from "../components/Fieldset/Fieldset.vue"
|
|
26
42
|
export { default as Form } from "../components/Form/Form.vue"
|
|
27
|
-
export { default as IconButton } from "../components/IconButton/IconButton.vue"
|
|
28
43
|
export { default as List } from "../components/List/List.vue"
|
|
29
44
|
export { default as ListItem } from "../components/ListItem/ListItem.vue"
|
|
45
|
+
export { default as Menu } from "../components/Menu/Menu.vue"
|
|
30
46
|
export { default as Progress } from "../components/Progress/Progress.vue"
|
|
31
47
|
export { default as Radio } from "../components/Radio/Radio.vue"
|
|
32
48
|
export { default as RadioInput } from "../components/Radio/RadioInput.vue"
|
|
@@ -34,21 +50,126 @@ export { default as Range } from "../components/Range/Range.vue"
|
|
|
34
50
|
export { default as Select } from "../components/Select/Select.vue"
|
|
35
51
|
export { default as Switch } from "../components/Switch/Switch.vue"
|
|
36
52
|
export { default as SwitchInput } from "../components/Switch/SwitchInput.vue"
|
|
37
|
-
export { default as TableBody } from "../components/Table/Body.vue"
|
|
38
|
-
export { default as TableCell } from "../components/Table/Cell.vue"
|
|
39
|
-
export { default as TableColumn } from "../components/Table/Column.vue"
|
|
40
|
-
export { default as TableColumnGroup } from "../components/Table/ColumnGroup.vue"
|
|
41
|
-
export { default as TableHead } from "../components/Table/Head.vue"
|
|
42
|
-
export { default as TableHeaderCell } from "../components/Table/HeaderCell.vue"
|
|
43
|
-
export { default as TableRow } from "../components/Table/Row.vue"
|
|
44
53
|
export { default as Table } from "../components/Table/Table.vue"
|
|
54
|
+
export { default as TableBody } from "../components/Table/TableBody.vue"
|
|
55
|
+
export { default as TableCaption } from "../components/Table/TableCaption.vue"
|
|
56
|
+
export { default as TableCell } from "../components/Table/TableCell.vue"
|
|
57
|
+
export { default as TableColumn } from "../components/Table/TableColumn.vue"
|
|
58
|
+
export { default as TableColumnGroup } from "../components/Table/TableColumnGroup.vue"
|
|
59
|
+
export { default as TableFoot } from "../components/Table/TableFoot.vue"
|
|
60
|
+
export { default as TableHead } from "../components/Table/TableHead.vue"
|
|
61
|
+
export { default as TableHeaderCell } from "../components/Table/TableHeaderCell.vue"
|
|
62
|
+
export { default as TableRow } from "../components/Table/TableRow.vue"
|
|
45
63
|
export { default as Tabs } from "../components/Tabs/Tabs.vue"
|
|
46
64
|
export { default as TabsItem } from "../components/Tabs/TabsItem.vue"
|
|
65
|
+
export { default as TabsLabel } from "../components/Tabs/TabsLabel.vue"
|
|
47
66
|
export { default as TabsPanel } from "../components/Tabs/TabsPanel.vue"
|
|
48
|
-
export { default as TabsTab } from "../components/Tabs/TabsTab.vue"
|
|
49
67
|
export { default as Textarea } from "../components/Textarea/Textarea.vue"
|
|
50
68
|
export { default as TextField } from "../components/TextField/TextField.vue"
|
|
51
|
-
export { default as Toast } from "../components/Toast/Toast.vue"
|
|
52
69
|
export { default as ToggleButton } from "../components/ToggleButton/ToggleButton.vue"
|
|
53
70
|
export { default as ToggleGroup } from "../components/ToggleGroup/ToggleGroup.vue"
|
|
54
71
|
export { default as Tooltip } from "../components/Tooltip/Tooltip.vue"
|
|
72
|
+
export { default as TooltipContent } from "../components/Anchor/AnchorContent.vue"
|
|
73
|
+
export type {
|
|
74
|
+
AccordionActionsProps,
|
|
75
|
+
AccordionContentProps,
|
|
76
|
+
Props as AccordionProps,
|
|
77
|
+
AccordionSummaryProps,
|
|
78
|
+
} from "../components/Accordion/types.vue-props"
|
|
79
|
+
export type {
|
|
80
|
+
AnchorContentProps,
|
|
81
|
+
Props as AnchorProps,
|
|
82
|
+
AnchorContentProps as TooltipContentProps,
|
|
83
|
+
} from "../components/Anchor/types.vue-props"
|
|
84
|
+
export type {
|
|
85
|
+
AvatarGroupProps,
|
|
86
|
+
Props as AvatarProps,
|
|
87
|
+
} from "../components/Avatar/types.vue-props"
|
|
88
|
+
export type { Props as BadgeProps } from "../components/Badge/types.vue-props"
|
|
89
|
+
export type { Props as ButtonProps } from "../components/Button/types.vue-props"
|
|
90
|
+
export type { Props as ButtonGroupProps } from "../components/ButtonGroup/types.vue-props"
|
|
91
|
+
export type {
|
|
92
|
+
CalloutContentProps,
|
|
93
|
+
CalloutIconProps,
|
|
94
|
+
Props as CalloutProps,
|
|
95
|
+
} from "../components/Callout/types.vue-props"
|
|
96
|
+
export type {
|
|
97
|
+
CardActionsProps,
|
|
98
|
+
CardContentProps,
|
|
99
|
+
CardHeaderProps,
|
|
100
|
+
Props as CardProps,
|
|
101
|
+
} from "../components/Card/types.vue-props"
|
|
102
|
+
export type { Props as CarouselProps } from "../components/Carousel/types.vue-props"
|
|
103
|
+
export type {
|
|
104
|
+
CheckboxInputProps,
|
|
105
|
+
Props as CheckboxProps,
|
|
106
|
+
} from "../components/Checkbox/types.vue-props"
|
|
107
|
+
export type { Props as ChipProps } from "../components/Chip/types.vue-props"
|
|
108
|
+
export type {
|
|
109
|
+
DescriptionListDescriptionProps,
|
|
110
|
+
DescriptionListItemProps,
|
|
111
|
+
Props as DescriptionListProps,
|
|
112
|
+
DescriptionListTermProps,
|
|
113
|
+
} from "../components/DescriptionList/types.vue-props"
|
|
114
|
+
export type {
|
|
115
|
+
DialogContentProps,
|
|
116
|
+
DialogFooterProps,
|
|
117
|
+
DialogHeaderProps,
|
|
118
|
+
Props as DialogProps,
|
|
119
|
+
DialogTitleProps,
|
|
120
|
+
} from "../components/Dialog/types.vue-props"
|
|
121
|
+
export type { Props as DividerProps } from "../components/Divider/types.vue-props"
|
|
122
|
+
export type {
|
|
123
|
+
DrawerContentProps,
|
|
124
|
+
DrawerFooterProps,
|
|
125
|
+
DrawerHeaderProps,
|
|
126
|
+
Props as DrawerProps,
|
|
127
|
+
DrawerTitleProps,
|
|
128
|
+
} from "../components/Drawer/types.vue-props"
|
|
129
|
+
export type { Props as FieldDescriptionProps } from "../components/FieldDescription/types.vue-props"
|
|
130
|
+
export type { Props as FieldGroupProps } from "../components/FieldGroup/types.vue-props"
|
|
131
|
+
export type { Props as FieldLegendProps } from "../components/FieldLegend/types.vue-props"
|
|
132
|
+
export type { Props as FieldsetProps } from "../components/Fieldset/types.vue-props"
|
|
133
|
+
export type { Props as FormProps } from "../components/Form/types.vue-props"
|
|
134
|
+
export type { Props as ListProps } from "../components/List/types.vue-props"
|
|
135
|
+
export type { Props as ListItemProps } from "../components/ListItem/types.vue-props"
|
|
136
|
+
export type {
|
|
137
|
+
MenuItem,
|
|
138
|
+
Props as MenuProps,
|
|
139
|
+
} from "../components/Menu/types.vue-props"
|
|
140
|
+
export type { Props as ProgressProps } from "../components/Progress/types.vue-props"
|
|
141
|
+
export type {
|
|
142
|
+
RadioInputProps,
|
|
143
|
+
Props as RadioProps,
|
|
144
|
+
} from "../components/Radio/types.vue-props"
|
|
145
|
+
export type { RangeItem } from "../components/Range/types"
|
|
146
|
+
export type { Props as RangeProps } from "../components/Range/types.vue-props"
|
|
147
|
+
export type { SelectItem } from "../components/Select/types"
|
|
148
|
+
export type { Props as SelectProps } from "../components/Select/types.vue-props"
|
|
149
|
+
export type {
|
|
150
|
+
SwitchInputProps,
|
|
151
|
+
Props as SwitchProps,
|
|
152
|
+
} from "../components/Switch/types.vue-props"
|
|
153
|
+
export type {
|
|
154
|
+
TableBodyProps,
|
|
155
|
+
TableCaptionProps,
|
|
156
|
+
TableCellProps,
|
|
157
|
+
TableColumnGroupProps,
|
|
158
|
+
TableColumnProps,
|
|
159
|
+
TableFootProps,
|
|
160
|
+
TableHeaderCellProps,
|
|
161
|
+
TableHeadProps,
|
|
162
|
+
Props as TableProps,
|
|
163
|
+
TableRowProps,
|
|
164
|
+
} from "../components/Table/types.vue-props"
|
|
165
|
+
export type {
|
|
166
|
+
TabsItemProps,
|
|
167
|
+
TabsLabelProps,
|
|
168
|
+
TabsPanelProps,
|
|
169
|
+
Props as TabsProps,
|
|
170
|
+
} from "../components/Tabs/types.vue-props"
|
|
171
|
+
export type { Props as TextareaProps } from "../components/Textarea/types.vue-props"
|
|
172
|
+
export type { Props as TextFieldProps } from "../components/TextField/types.vue-props"
|
|
173
|
+
export type { Props as ToggleButtonProps } from "../components/ToggleButton/types.vue-props"
|
|
174
|
+
export type { Props as ToggleGroupProps } from "../components/ToggleGroup/types.vue-props"
|
|
175
|
+
export type { Props as TooltipProps } from "../components/Tooltip/types.vue-props"
|
package/components/AGENTS.md
DELETED
|
@@ -1,247 +0,0 @@
|
|
|
1
|
-
# UI Component Implementation Guide
|
|
2
|
-
|
|
3
|
-
This guide defines the standards for implementing reusable Astro UI components in this package (`packages/opui/components/<Name>/<Name>.astro`) based on the documentation specs at `src/docs/components/`. Use it as a reference for maintaining consistency and accessibility across the library.
|
|
4
|
-
|
|
5
|
-
**CRITICAL INSTRUCTION**: Always use components from this package (imported via the `@opui/astro` alias) and their corresponding CSS from `packages/opui/css/components/` whenever possible. Avoid writing custom CSS if an existing component or utility can achieve the desired result.
|
|
6
|
-
|
|
7
|
-
## 0. Implementation Checklist
|
|
8
|
-
|
|
9
|
-
When implementing or updating a component, ensure:
|
|
10
|
-
- [ ] **Title Export**: `export const title = "Component Name"` is present.
|
|
11
|
-
- [ ] **Props Type**: Imported `Props` from `./types.astro` (avoid interfaces).
|
|
12
|
-
- [ ] **Sorting**: Props, Destructuring, and Classes are sorted alphabetically.
|
|
13
|
-
- [ ] **Rest Props**: `...rest` is captured and spread onto the root element.
|
|
14
|
-
- [ ] **Class Management**: Used `class:list` for all class manipulations.
|
|
15
|
-
- [ ] **ID Stability**: Used `Astro.locals.$id` for any internal element linking.
|
|
16
|
-
- [ ] **Accessibility**: ARIA labels, roles, and relationships are correctly handled.
|
|
17
|
-
- [ ] **Slot Strategy**: Named slots are used for structural content (icons, actions).
|
|
18
|
-
|
|
19
|
-
---
|
|
20
|
-
|
|
21
|
-
## 1. Frontmatter Structure
|
|
22
|
-
|
|
23
|
-
Every component uses layered type files:
|
|
24
|
-
|
|
25
|
-
- `types.ts` - shared, framework-agnostic props (component-specific only; no `HTMLAttributes`)
|
|
26
|
-
- `types.astro.ts` - Astro props = base + `HTMLAttributes<element>`
|
|
27
|
-
- `types.d.vue.ts` / `types.svelte.ts` / `types.solid.ts` - framework-specific extensions (for merge parity)
|
|
28
|
-
|
|
29
|
-
Every component must follow this exact frontmatter layout:
|
|
30
|
-
|
|
31
|
-
```astro
|
|
32
|
-
---
|
|
33
|
-
import type { Props } from "./types.astro"
|
|
34
|
-
|
|
35
|
-
export const title = "My Component"
|
|
36
|
-
|
|
37
|
-
const {
|
|
38
|
-
class: className,
|
|
39
|
-
disabled,
|
|
40
|
-
label,
|
|
41
|
-
size,
|
|
42
|
-
variant = "outlined",
|
|
43
|
-
...rest
|
|
44
|
-
} = Astro.props
|
|
45
|
-
---
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
### Key Rules:
|
|
49
|
-
- **Alphabetical Sorting**: Sort property definitions in `types.ts` and variables in the destructuring statement.
|
|
50
|
-
- **REST Support**: Use `HTMLAttributes` in `types.astro.ts` and `...rest` in destructuring. Do not add `[key: string]: any` to `types.ts` - native attributes belong in the framework type files.
|
|
51
|
-
- **Title Export**: This is mandatory for documentation generation.
|
|
52
|
-
|
|
53
|
-
---
|
|
54
|
-
|
|
55
|
-
## 2. Component Composition & Tags
|
|
56
|
-
|
|
57
|
-
### Dynamic Elements (Polymorphism)
|
|
58
|
-
For components that can be different HTML elements (e.g., `Button` as `<a>` or `<button>`), use a dynamic `Tag` variable.
|
|
59
|
-
|
|
60
|
-
```astro
|
|
61
|
-
---
|
|
62
|
-
const { as: Tag = Astro.props.href ? "a" : "button", ...rest } = Astro.props
|
|
63
|
-
---
|
|
64
|
-
<Tag {...rest}><slot /></Tag>
|
|
65
|
-
```
|
|
66
|
-
- **Inference**: Default to `"a"` if `href` is present.
|
|
67
|
-
- **Override**: Allow manual override via the `as` prop.
|
|
68
|
-
|
|
69
|
-
### Styling Inheritance
|
|
70
|
-
Components should often inherit styles from others (e.g., `Dialog` looking like a `Card`). Use conditional classes to apply the inherited base class. All library classes are prefixed with `ui-`.
|
|
71
|
-
|
|
72
|
-
```astro
|
|
73
|
-
<dialog class:list={["ui-dialog", { "ui-card": variant }, variant && `ui-${variant}`, className]} {...rest}>
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
---
|
|
77
|
-
|
|
78
|
-
## 3. Class Management
|
|
79
|
-
|
|
80
|
-
Use `class:list` exclusively. Every library-owned class is prefixed with `ui-`; the public prop API stays unprefixed (`<Button size="small" variant="outlined">`) and the component interpolates the prefix when rendering.
|
|
81
|
-
|
|
82
|
-
Follow this order for readability:
|
|
83
|
-
1. **Component Base Class**: The primary CSS class, prefixed (e.g., `"ui-button"`).
|
|
84
|
-
2. **State Objects**: Boolean flags as quoted prefixed keys (e.g., `{ "ui-disabled": disabled }`).
|
|
85
|
-
3. **Variant Props**: Interpolate the prefix from the prop value (e.g., `size && \`ui-${size}\``).
|
|
86
|
-
4. **External Class**: Always include `className` at the end to allow for overrides. Do not prefix `className`.
|
|
87
|
-
|
|
88
|
-
```astro
|
|
89
|
-
<div
|
|
90
|
-
class:list={[
|
|
91
|
-
"ui-chip",
|
|
92
|
-
{
|
|
93
|
-
"ui-multiline": isMultiline,
|
|
94
|
-
},
|
|
95
|
-
size && `ui-${size}`,
|
|
96
|
-
variant && `ui-${variant}`,
|
|
97
|
-
className,
|
|
98
|
-
]}
|
|
99
|
-
>
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
---
|
|
103
|
-
|
|
104
|
-
## 4. Slot Patterns
|
|
105
|
-
|
|
106
|
-
### Default Slots vs Label Props
|
|
107
|
-
For simple text-based components, provide both a `label` prop and a default slot.
|
|
108
|
-
|
|
109
|
-
```astro
|
|
110
|
-
<div class="ui-component">
|
|
111
|
-
{ (label || Astro.slots.has("default")) && (
|
|
112
|
-
<span class="ui-text">
|
|
113
|
-
{label}
|
|
114
|
-
<slot />
|
|
115
|
-
</span>
|
|
116
|
-
)}
|
|
117
|
-
</div>
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
### Named Slots (Icons & Actions)
|
|
121
|
-
Use named slots for specific functional areas. Check for existence before rendering wrapper tags.
|
|
122
|
-
|
|
123
|
-
```astro
|
|
124
|
-
<div class="ui-card">
|
|
125
|
-
{Astro.slots.has("header") && <header><slot name="header" /></header>}
|
|
126
|
-
<slot />
|
|
127
|
-
{Astro.slots.has("actions") && <footer class="ui-actions"><slot name="actions" /></footer>}
|
|
128
|
-
</div>
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
---
|
|
132
|
-
|
|
133
|
-
## 5. Form & Input Patterns
|
|
134
|
-
|
|
135
|
-
### Label Wrapping
|
|
136
|
-
Most inputs should be wrapped in a `<label>` to provide a larger hit area and built-in accessibility.
|
|
137
|
-
|
|
138
|
-
```astro
|
|
139
|
-
<label class:list={["ui-field", { "ui-disabled": disabled }]} data-invalid={error || undefined}>
|
|
140
|
-
<span class="ui-label">{label}</span>
|
|
141
|
-
<input type="text" {...rest} />
|
|
142
|
-
{endText && <span class="ui-end-text">{endText}</span>}
|
|
143
|
-
</label>
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
### End Text & ARIA
|
|
147
|
-
When providing `endText`, use `Astro.locals.$id` to link it to the input via `aria-describedby`.
|
|
148
|
-
|
|
149
|
-
```astro
|
|
150
|
-
---
|
|
151
|
-
const { $id } = Astro.locals
|
|
152
|
-
const helpId = $id("help")
|
|
153
|
-
---
|
|
154
|
-
<input aria-describedby={endText ? helpId : undefined} />
|
|
155
|
-
{endText && <span id={helpId}>{endText}</span>}
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
### Input Attribute Mapping
|
|
159
|
-
Explicitly define and pass through native input attributes in the `Props` type for better IDE support.
|
|
160
|
-
|
|
161
|
-
```astro
|
|
162
|
-
<input
|
|
163
|
-
disabled={disabled}
|
|
164
|
-
name={name}
|
|
165
|
-
required={required}
|
|
166
|
-
type={type}
|
|
167
|
-
value={value}
|
|
168
|
-
{...rest}
|
|
169
|
-
/>
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
### Sub-component Decomposition
|
|
173
|
-
For complex inputs (like `Checkbox` with custom visuals), split the component into a public wrapper (`Checkbox.astro`) and a private raw input (`CheckboxInput.astro`) to keep the root element clean.
|
|
174
|
-
|
|
175
|
-
### Form Structure: FieldSet, FieldLegend, FieldDescription, FieldGroup
|
|
176
|
-
When building forms, follow this nesting order inside a `FieldSet`:
|
|
177
|
-
1. `FieldLegend` - The heading/label for the fieldset
|
|
178
|
-
2. `FieldDescription` - Optional helper text
|
|
179
|
-
3. `FieldGroup` - Wrapper for the actual form controls
|
|
180
|
-
|
|
181
|
-
**Always wrap form elements in a `FieldGroup`**, never place them directly after `FieldLegend` or `FieldDescription`.
|
|
182
|
-
|
|
183
|
-
```astro
|
|
184
|
-
<!-- ✅ Correct -->
|
|
185
|
-
<FieldSet>
|
|
186
|
-
<FieldLegend>Username</FieldLegend>
|
|
187
|
-
<FieldDescription>Enter your preferred username.</FieldDescription>
|
|
188
|
-
<FieldGroup>
|
|
189
|
-
<TextField placeholder="e.g. jdoe" />
|
|
190
|
-
</FieldGroup>
|
|
191
|
-
</FieldSet>
|
|
192
|
-
|
|
193
|
-
<!-- ❌ Incorrect - TextField directly after FieldDescription -->
|
|
194
|
-
<FieldSet>
|
|
195
|
-
<FieldLegend>Username</FieldLegend>
|
|
196
|
-
<FieldDescription>Enter your preferred username.</FieldDescription>
|
|
197
|
-
<TextField placeholder="e.g. jdoe" />
|
|
198
|
-
</FieldSet>
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
---
|
|
202
|
-
|
|
203
|
-
## 6. Identification & Accessibility
|
|
204
|
-
|
|
205
|
-
### Unique IDs
|
|
206
|
-
Always use `Astro.locals.$id` for IDs. This ensures stability across server and client rendering and prevents ID collisions when multiple instances of the same component are on a page.
|
|
207
|
-
|
|
208
|
-
```astro
|
|
209
|
-
const { $id } = Astro.locals
|
|
210
|
-
const fieldId = id || $id("input") // Prefer passed ID if available
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
### Default Icons
|
|
214
|
-
Components like `Callout` or `Toast` should provide default SVG icons within their named slots, while allowing users to override them.
|
|
215
|
-
|
|
216
|
-
```astro
|
|
217
|
-
<slot name="icon">
|
|
218
|
-
{severity === "error" && <svg>...</svg>}
|
|
219
|
-
</slot>
|
|
220
|
-
```
|
|
221
|
-
|
|
222
|
-
---
|
|
223
|
-
|
|
224
|
-
## 7. Data-Driven Components
|
|
225
|
-
|
|
226
|
-
For repetitive structures (DescriptionLists, Menus, Selects), prefer an `items` prop alongside standard slots.
|
|
227
|
-
|
|
228
|
-
```astro
|
|
229
|
-
type Item = { label: string; value: any }
|
|
230
|
-
type Props = { items?: Item[] }
|
|
231
|
-
|
|
232
|
-
<ul>
|
|
233
|
-
{items.map(item => <li>{item.label}</li>)}
|
|
234
|
-
<slot /> <!-- Still allow manual entries -->
|
|
235
|
-
</ul>
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
---
|
|
239
|
-
|
|
240
|
-
## 8. Development Workflow
|
|
241
|
-
|
|
242
|
-
1. **Read the Spec**: Open `src/docs/components/[name].astro` to see required HTML and CSS classes. (Component docs live under `src/docs/components/` now; `src/pages/components/` only contains route shells.)
|
|
243
|
-
2. **Analyze the API**: Check `src/component-api/[name]/` (`Astro.astro` and `HTML.astro`) or `src/component-api/[name]-api.astro` for the documented props.
|
|
244
|
-
3. **Implement**: Follow the checklist in Section 0.
|
|
245
|
-
4. **Verify**: Check that your implementation matches the "HTML" preview in the rendered `Example` for the spec page (`/components/[name]`). For framework-specific behaviour, also verify the Astro variant at `/astro/components/[name]`.
|
|
246
|
-
|
|
247
|
-
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes, Slot } from "vue"
|
|
2
|
-
import type { Props as BaseProps } from "./types"
|
|
3
|
-
|
|
4
|
-
export type Props = BaseProps & {
|
|
5
|
-
class?: HTMLAttributes["class"]
|
|
6
|
-
name?: string
|
|
7
|
-
open?: boolean
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export type Slots = {
|
|
11
|
-
actions?: Slot
|
|
12
|
-
default?: Slot
|
|
13
|
-
marker?: Slot
|
|
14
|
-
summary?: Slot
|
|
15
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes, Slot } from "vue"
|
|
2
|
-
import type { Props as BaseProps, Slots as BaseSlots } from "./types"
|
|
3
|
-
|
|
4
|
-
export type Props = BaseProps & {
|
|
5
|
-
class?: HTMLAttributes["class"]
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export type Slots = BaseSlots<Slot> & {
|
|
9
|
-
default?: Slot
|
|
10
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type * as Base from "./types"
|
|
2
|
-
import type { JSX } from "solid-js"
|
|
3
|
-
|
|
4
|
-
export type Props = Base.Props &
|
|
5
|
-
Base.Slots<JSX.Element> &
|
|
6
|
-
Pick<JSX.ImgHTMLAttributes<HTMLImageElement>, Base.ImageProps> &
|
|
7
|
-
(
|
|
8
|
-
| ({ as?: "div" } & JSX.HTMLAttributes<HTMLDivElement>)
|
|
9
|
-
| ({ as?: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
|
|
10
|
-
| ({ as?: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
|
|
11
|
-
)
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes, Slot } from "vue"
|
|
2
|
-
import type { Props as BaseProps, Slots as BaseSlots } from "./types"
|
|
3
|
-
|
|
4
|
-
export type Props = BaseProps & {
|
|
5
|
-
class?: HTMLAttributes["class"]
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export type Slots = BaseSlots<Slot> & {
|
|
9
|
-
default?: Slot
|
|
10
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes, Slot } from "vue"
|
|
2
|
-
import type { Props as BaseProps, Slots as BaseSlots } from "./types"
|
|
3
|
-
|
|
4
|
-
export type Props = BaseProps & {
|
|
5
|
-
class?: HTMLAttributes["class"]
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export type Slots = BaseSlots<Slot> & {
|
|
9
|
-
default?: Slot
|
|
10
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes, Slot } from "vue"
|
|
2
|
-
import type { Props as BaseProps, Slots as BaseSlots } from "./types"
|
|
3
|
-
|
|
4
|
-
export type Props = BaseProps & {
|
|
5
|
-
class?: HTMLAttributes["class"]
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export type Slots = BaseSlots<Slot> & {
|
|
9
|
-
default?: Slot
|
|
10
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes, Slot } from "vue"
|
|
2
|
-
import type { CheckboxProps as BaseCheckboxProps } from "./types"
|
|
3
|
-
|
|
4
|
-
export type CheckboxProps = BaseCheckboxProps & {
|
|
5
|
-
class?: HTMLAttributes["class"]
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export type Slots = {
|
|
9
|
-
default?: Slot
|
|
10
|
-
"end-text"?: Slot
|
|
11
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type * as Base from "./types"
|
|
2
|
-
import type { JSX } from "solid-js"
|
|
3
|
-
|
|
4
|
-
export type CheckboxInputProps = Base.CheckboxInputProps &
|
|
5
|
-
JSX.InputHTMLAttributes<HTMLInputElement>
|
|
6
|
-
|
|
7
|
-
export type CheckboxProps = Base.CheckboxProps &
|
|
8
|
-
Partial<Base.CheckboxSlots<JSX.Element>> &
|
|
9
|
-
Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size">
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes, Slot } from "vue"
|
|
2
|
-
import type { Props as BaseProps, Slots as BaseSlots } from "./types"
|
|
3
|
-
|
|
4
|
-
export type Props = BaseProps & {
|
|
5
|
-
class?: HTMLAttributes["class"]
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export type Slots = BaseSlots<Slot> & {
|
|
9
|
-
default?: Slot
|
|
10
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type * as Base from "./types"
|
|
2
|
-
import type { JSX } from "solid-js"
|
|
3
|
-
|
|
4
|
-
export type Props = Base.Props &
|
|
5
|
-
Partial<Base.Slots<JSX.Element>> &
|
|
6
|
-
(
|
|
7
|
-
| ({ as?: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
|
|
8
|
-
| ({ as?: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
|
|
9
|
-
| ({ as?: "div" } & JSX.HTMLAttributes<HTMLDivElement>)
|
|
10
|
-
)
|