@nextlyhq/ui 0.0.2-alpha.33 → 0.0.2-alpha.34
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/README.md +26 -17
- package/dist/index.cjs +125 -116
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +13 -13
- package/dist/index.d.ts +13 -13
- package/dist/index.mjs +125 -116
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +2 -0
- package/dist/theme.css +745 -0
- package/docs/plugin-ui-authoring.md +178 -0
- package/package.json +13 -6
package/dist/index.d.cts
CHANGED
|
@@ -133,7 +133,7 @@ declare const FormLabelWithTooltip: react.ForwardRefExoticComponent<FormLabelWit
|
|
|
133
133
|
* - success: Light green background
|
|
134
134
|
* - warning: Light amber background
|
|
135
135
|
* - destructive: Light red background
|
|
136
|
-
* - outline: Transparent background with border border-
|
|
136
|
+
* - outline: Transparent background with border border-border
|
|
137
137
|
*/
|
|
138
138
|
declare const badgeVariants: (props?: ({
|
|
139
139
|
variant?: "default" | "primary" | "destructive" | "outline" | "success" | "warning" | null | undefined;
|
|
@@ -152,11 +152,11 @@ declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_
|
|
|
152
152
|
* - Border radius: 0px (rounded-none)
|
|
153
153
|
* - Padding: 24px (p-6) for header/content, 16px 24px for footer
|
|
154
154
|
* - Shadow: sm (default), md (hover/elevated)
|
|
155
|
-
* - Border: 1px solid border border-
|
|
155
|
+
* - Border: 1px solid border border-border color
|
|
156
156
|
*
|
|
157
157
|
* Variants:
|
|
158
158
|
* - default: Standard card with subtle shadow
|
|
159
|
-
* - interactive: Hover effects for clickable cards (border border-
|
|
159
|
+
* - interactive: Hover effects for clickable cards (border border-border highlight, shadow increase)
|
|
160
160
|
* ⚠️ IMPORTANT: When using the interactive variant, you MUST add appropriate
|
|
161
161
|
* accessibility attributes:
|
|
162
162
|
* - Add role="button" or use an actual <button> wrapper
|
|
@@ -201,8 +201,8 @@ declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElemen
|
|
|
201
201
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
|
|
202
202
|
interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
203
203
|
/**
|
|
204
|
-
* Whether to hide the bottom border border-
|
|
205
|
-
* Default: false (border border-
|
|
204
|
+
* Whether to hide the bottom border border-border separator between header and content.
|
|
205
|
+
* Default: false (border border-border is shown per design spec)
|
|
206
206
|
*/
|
|
207
207
|
noBorder?: boolean;
|
|
208
208
|
}
|
|
@@ -557,9 +557,9 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.C
|
|
|
557
557
|
*
|
|
558
558
|
* Implementation Notes:
|
|
559
559
|
* - Uses Radix UI primitives for robust accessibility
|
|
560
|
-
* - Visual "checked" state achieved via border border-
|
|
561
|
-
* - No inner indicator needed - border border-
|
|
562
|
-
* - Hover state changes border border-
|
|
560
|
+
* - Visual "checked" state achieved via border border-border expansion (border-[5px])
|
|
561
|
+
* - No inner indicator needed - border border-border expansion provides clear visual feedback
|
|
562
|
+
* - Hover state changes border border-border color for better interactivity
|
|
563
563
|
*/
|
|
564
564
|
declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
565
565
|
declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
@@ -595,7 +595,7 @@ type AccordionContentProps = ComponentPropsWithoutRef<typeof Content>;
|
|
|
595
595
|
* Built on Radix UI primitives with WAI-ARIA compliance.
|
|
596
596
|
*
|
|
597
597
|
* Design Specs:
|
|
598
|
-
* - AccordionItem border: 1px bottom border border-
|
|
598
|
+
* - AccordionItem border: 1px bottom border border-border (border-b)
|
|
599
599
|
* - AccordionTrigger padding: 16px vertical (py-4)
|
|
600
600
|
* - AccordionTrigger font: font-medium (500 weight)
|
|
601
601
|
* - AccordionContent padding: 16px bottom, 0 top (pb-4 pt-0)
|
|
@@ -686,7 +686,7 @@ declare const Accordion: react.ForwardRefExoticComponent<(AccordionPrimitive.Acc
|
|
|
686
686
|
* AccordionItem - Container for trigger and content
|
|
687
687
|
*
|
|
688
688
|
* Design Specs:
|
|
689
|
-
* - Border: 1px bottom border border-
|
|
689
|
+
* - Border: 1px bottom border border-border (border-b) for visual separation
|
|
690
690
|
* - Each item represents a collapsible section
|
|
691
691
|
*
|
|
692
692
|
* Accessibility:
|
|
@@ -1021,8 +1021,8 @@ declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tab
|
|
|
1021
1021
|
* - Padding: 6px 16px (px-4 py-2)
|
|
1022
1022
|
* - Font: text-sm (14px), font-medium (500)
|
|
1023
1023
|
* - Transition: 150ms (design system standard)
|
|
1024
|
-
* - Active state: blue text with blue bottom border border-
|
|
1025
|
-
* - Hover: blue text with blue bottom border border-
|
|
1024
|
+
* - Active state: blue text with blue bottom border border-border (2px)
|
|
1025
|
+
* - Hover: blue text with blue bottom border border-border
|
|
1026
1026
|
* - Gmail-inspired clean underline style
|
|
1027
1027
|
*
|
|
1028
1028
|
* Accessibility:
|
|
@@ -1780,7 +1780,7 @@ declare const CommandGroup: react.ForwardRefExoticComponent<Omit<{
|
|
|
1780
1780
|
type CommandSeparatorProps = ComponentPropsWithoutRef<typeof Command$1.Separator>;
|
|
1781
1781
|
/**
|
|
1782
1782
|
* CommandSeparator - Visual divider between command groups.
|
|
1783
|
-
* 1px line with border border-
|
|
1783
|
+
* 1px line with border border-border color, 8px margin top/bottom.
|
|
1784
1784
|
*/
|
|
1785
1785
|
declare const CommandSeparator: react.ForwardRefExoticComponent<Omit<Pick<Pick<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
|
|
1786
1786
|
ref?: React.Ref<HTMLDivElement>;
|
package/dist/index.d.ts
CHANGED
|
@@ -133,7 +133,7 @@ declare const FormLabelWithTooltip: react.ForwardRefExoticComponent<FormLabelWit
|
|
|
133
133
|
* - success: Light green background
|
|
134
134
|
* - warning: Light amber background
|
|
135
135
|
* - destructive: Light red background
|
|
136
|
-
* - outline: Transparent background with border border-
|
|
136
|
+
* - outline: Transparent background with border border-border
|
|
137
137
|
*/
|
|
138
138
|
declare const badgeVariants: (props?: ({
|
|
139
139
|
variant?: "default" | "primary" | "destructive" | "outline" | "success" | "warning" | null | undefined;
|
|
@@ -152,11 +152,11 @@ declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_
|
|
|
152
152
|
* - Border radius: 0px (rounded-none)
|
|
153
153
|
* - Padding: 24px (p-6) for header/content, 16px 24px for footer
|
|
154
154
|
* - Shadow: sm (default), md (hover/elevated)
|
|
155
|
-
* - Border: 1px solid border border-
|
|
155
|
+
* - Border: 1px solid border border-border color
|
|
156
156
|
*
|
|
157
157
|
* Variants:
|
|
158
158
|
* - default: Standard card with subtle shadow
|
|
159
|
-
* - interactive: Hover effects for clickable cards (border border-
|
|
159
|
+
* - interactive: Hover effects for clickable cards (border border-border highlight, shadow increase)
|
|
160
160
|
* ⚠️ IMPORTANT: When using the interactive variant, you MUST add appropriate
|
|
161
161
|
* accessibility attributes:
|
|
162
162
|
* - Add role="button" or use an actual <button> wrapper
|
|
@@ -201,8 +201,8 @@ declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElemen
|
|
|
201
201
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
|
|
202
202
|
interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
203
203
|
/**
|
|
204
|
-
* Whether to hide the bottom border border-
|
|
205
|
-
* Default: false (border border-
|
|
204
|
+
* Whether to hide the bottom border border-border separator between header and content.
|
|
205
|
+
* Default: false (border border-border is shown per design spec)
|
|
206
206
|
*/
|
|
207
207
|
noBorder?: boolean;
|
|
208
208
|
}
|
|
@@ -557,9 +557,9 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.C
|
|
|
557
557
|
*
|
|
558
558
|
* Implementation Notes:
|
|
559
559
|
* - Uses Radix UI primitives for robust accessibility
|
|
560
|
-
* - Visual "checked" state achieved via border border-
|
|
561
|
-
* - No inner indicator needed - border border-
|
|
562
|
-
* - Hover state changes border border-
|
|
560
|
+
* - Visual "checked" state achieved via border border-border expansion (border-[5px])
|
|
561
|
+
* - No inner indicator needed - border border-border expansion provides clear visual feedback
|
|
562
|
+
* - Hover state changes border border-border color for better interactivity
|
|
563
563
|
*/
|
|
564
564
|
declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
565
565
|
declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
@@ -595,7 +595,7 @@ type AccordionContentProps = ComponentPropsWithoutRef<typeof Content>;
|
|
|
595
595
|
* Built on Radix UI primitives with WAI-ARIA compliance.
|
|
596
596
|
*
|
|
597
597
|
* Design Specs:
|
|
598
|
-
* - AccordionItem border: 1px bottom border border-
|
|
598
|
+
* - AccordionItem border: 1px bottom border border-border (border-b)
|
|
599
599
|
* - AccordionTrigger padding: 16px vertical (py-4)
|
|
600
600
|
* - AccordionTrigger font: font-medium (500 weight)
|
|
601
601
|
* - AccordionContent padding: 16px bottom, 0 top (pb-4 pt-0)
|
|
@@ -686,7 +686,7 @@ declare const Accordion: react.ForwardRefExoticComponent<(AccordionPrimitive.Acc
|
|
|
686
686
|
* AccordionItem - Container for trigger and content
|
|
687
687
|
*
|
|
688
688
|
* Design Specs:
|
|
689
|
-
* - Border: 1px bottom border border-
|
|
689
|
+
* - Border: 1px bottom border border-border (border-b) for visual separation
|
|
690
690
|
* - Each item represents a collapsible section
|
|
691
691
|
*
|
|
692
692
|
* Accessibility:
|
|
@@ -1021,8 +1021,8 @@ declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tab
|
|
|
1021
1021
|
* - Padding: 6px 16px (px-4 py-2)
|
|
1022
1022
|
* - Font: text-sm (14px), font-medium (500)
|
|
1023
1023
|
* - Transition: 150ms (design system standard)
|
|
1024
|
-
* - Active state: blue text with blue bottom border border-
|
|
1025
|
-
* - Hover: blue text with blue bottom border border-
|
|
1024
|
+
* - Active state: blue text with blue bottom border border-border (2px)
|
|
1025
|
+
* - Hover: blue text with blue bottom border border-border
|
|
1026
1026
|
* - Gmail-inspired clean underline style
|
|
1027
1027
|
*
|
|
1028
1028
|
* Accessibility:
|
|
@@ -1780,7 +1780,7 @@ declare const CommandGroup: react.ForwardRefExoticComponent<Omit<{
|
|
|
1780
1780
|
type CommandSeparatorProps = ComponentPropsWithoutRef<typeof Command$1.Separator>;
|
|
1781
1781
|
/**
|
|
1782
1782
|
* CommandSeparator - Visual divider between command groups.
|
|
1783
|
-
* 1px line with border border-
|
|
1783
|
+
* 1px line with border border-border color, 8px margin top/bottom.
|
|
1784
1784
|
*/
|
|
1785
1785
|
declare const CommandSeparator: react.ForwardRefExoticComponent<Omit<Pick<Pick<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
|
|
1786
1786
|
ref?: React.Ref<HTMLDivElement>;
|