@scattered-light/loomiere-base-ui 0.0.0-stage → 0.1.0
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 -2
- package/dist/index.d.ts +107 -0
- package/dist/index.js +315 -0
- package/dist/index.js.map +1 -0
- package/dist/styles/components/Accordion.css +120 -0
- package/dist/styles/components/AlertDialog.css +8 -0
- package/dist/styles/components/Autocomplete.css +201 -0
- package/dist/styles/components/Avatar.css +134 -0
- package/dist/styles/components/Button.css +129 -0
- package/dist/styles/components/Checkbox.css +156 -0
- package/dist/styles/components/CheckboxGroup.css +15 -0
- package/dist/styles/components/Collapsible.css +115 -0
- package/dist/styles/components/Combobox.css +484 -0
- package/dist/styles/components/ContextMenu.css +168 -0
- package/dist/styles/components/Dialog.css +145 -0
- package/dist/styles/components/Drawer.css +126 -0
- package/dist/styles/components/Field.css +60 -0
- package/dist/styles/components/Fieldset.css +41 -0
- package/dist/styles/components/Form.css +19 -0
- package/dist/styles/components/Input.css +136 -0
- package/dist/styles/components/Menu.css +148 -0
- package/dist/styles/components/Menubar.css +192 -0
- package/dist/styles/components/Meter.css +59 -0
- package/dist/styles/components/NavigationMenu.css +419 -0
- package/dist/styles/components/NumberField.css +90 -0
- package/dist/styles/components/OTPField.css +62 -0
- package/dist/styles/components/Popover.css +161 -0
- package/dist/styles/components/PreviewCard.css +116 -0
- package/dist/styles/components/Progress.css +76 -0
- package/dist/styles/components/Radio.css +151 -0
- package/dist/styles/components/ScrollArea.css +81 -0
- package/dist/styles/components/Select.css +273 -0
- package/dist/styles/components/Separator.css +27 -0
- package/dist/styles/components/Slider.css +165 -0
- package/dist/styles/components/Switch.css +165 -0
- package/dist/styles/components/Tabs.css +135 -0
- package/dist/styles/components/Toast.css +235 -0
- package/dist/styles/components/Toggle.css +109 -0
- package/dist/styles/components/ToggleGroup.css +20 -0
- package/dist/styles/components/Toolbar.css +61 -0
- package/dist/styles/components/Tooltip.css +59 -0
- package/dist/styles/index.css +52 -0
- package/dist/styles/reset/accessibility.css +65 -0
- package/dist/styles/reset/reset-accessibility.css +110 -0
- package/dist/styles/reset/reset.css +442 -0
- package/package.json +50 -4
package/README.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @scattered-light/loomiere-base-ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[Base UI](https://base-ui.com) components styled by any [Loomiere](../loomiere/README.md) theme. The styles hold no brand: every color, size and font is a `--sl-` variable, so the same components look like whichever theme you load.
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @scattered-light/loomiere-base-ui @base-ui/react @material-symbols/font-400
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
Load a theme, then the component styles:
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import './theme/tokens.css'; // from loomiere build, or @scattered-light/loomiere-mojave/tokens.css
|
|
13
|
+
import './theme/utilities.css';
|
|
14
|
+
import '@scattered-light/loomiere-base-ui/styles.css';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The document reset in styles.css sits in a CSS `reset` layer, so it never undoes a layered framework's styles (Chakra's recipes, Tailwind's utilities) when an app uses both.
|
|
18
|
+
|
|
19
|
+
Use Base UI as usual, with the class names the styles target, or the few wrappers this package exports:
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { Button, Field, Form, Input } from '@scattered-light/loomiere-base-ui';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Base UI version
|
|
26
|
+
|
|
27
|
+
The styles are written against Base UI `baseUi.target` in [package.json](package.json) (1.9.0), and the peer dependency starts there. Every published CSS file names that release in its first line. `npm run check:base-ui` fails if an older Base UI is installed and warns if a newer minor one is.
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as _base_ui_react_field from '@base-ui/react/field';
|
|
3
|
+
import { Button as Button$1 } from '@base-ui/react/button';
|
|
4
|
+
import * as _base_ui_react_input from '@base-ui/react/input';
|
|
5
|
+
import { Input as Input$1 } from '@base-ui/react/input';
|
|
6
|
+
import * as _base_ui_react_fieldset from '@base-ui/react/fieldset';
|
|
7
|
+
import { Fieldset as Fieldset$1 } from '@base-ui/react/fieldset';
|
|
8
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
9
|
+
import { Form as Form$1 } from '@base-ui/react/form';
|
|
10
|
+
import * as _base_ui_react_navigation_menu from '@base-ui/react/navigation-menu';
|
|
11
|
+
import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Base UI [Field](https://base-ui.com/react/components/field) with design-system field classes.
|
|
15
|
+
*/
|
|
16
|
+
declare const Field: {
|
|
17
|
+
Root: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_field.FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
Label: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_field.FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
|
|
19
|
+
Description: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_field.FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
Error: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_field.FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
Control: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_field.FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
22
|
+
Validity: React.FC<_base_ui_react_field.FieldValidityProps>;
|
|
23
|
+
Item: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_field.FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Merge class names (strings, arrays, conditional objects). No external deps.
|
|
28
|
+
*/
|
|
29
|
+
type ClassValue = string | number | boolean | undefined | null | Record<string, boolean | undefined> | ClassValue[];
|
|
30
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
31
|
+
/** Merge a static BEM block with Base UI `className` (string or state callback). */
|
|
32
|
+
declare function cnState<State>(base: string, className: string | ((state: State) => string | undefined) | undefined, state: State): string;
|
|
33
|
+
|
|
34
|
+
type ButtonProps = React.ComponentProps<typeof Button$1> & {
|
|
35
|
+
/** How loud the button is. The brand's roles decide what each level looks like. */
|
|
36
|
+
emphasis?: 'bold' | 'standard' | 'subtle' | 'quiet';
|
|
37
|
+
/** Paint the level in another palette instead of the level's own color (e.g. "secondary", "error"). */
|
|
38
|
+
palette?: string;
|
|
39
|
+
};
|
|
40
|
+
/**
|
|
41
|
+
* Base UI [Button](https://base-ui.com/react/components/button) with design-system `Button` classes.
|
|
42
|
+
* Icon-only buttons must include a visible label for assistive tech (`aria-label` or `aria-labelledby`).
|
|
43
|
+
*/
|
|
44
|
+
declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
45
|
+
|
|
46
|
+
type InputProps = React.ComponentProps<typeof Input$1>;
|
|
47
|
+
/**
|
|
48
|
+
* Base UI [Input](https://base-ui.com/react/components/input) with design-system `Input` classes.
|
|
49
|
+
* Pairs with {@link Field} for labels, validation, and descriptions.
|
|
50
|
+
*/
|
|
51
|
+
declare const Input: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_input.InputProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
52
|
+
|
|
53
|
+
type FieldsetRootProps = React.ComponentProps<typeof Fieldset$1.Root>;
|
|
54
|
+
type FieldsetLegendProps = React.ComponentProps<typeof Fieldset$1.Legend>;
|
|
55
|
+
type FieldsetDescriptionProps = React.ComponentProps<'div'>;
|
|
56
|
+
/** Presentational helper — not a Base UI primitive. */
|
|
57
|
+
declare function FieldsetDescription({ className, ...props }: FieldsetDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
58
|
+
/**
|
|
59
|
+
* Base UI [Fieldset](https://base-ui.com/react/components/fieldset) with design-system classes.
|
|
60
|
+
*/
|
|
61
|
+
declare const Fieldset: {
|
|
62
|
+
Root: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_fieldset.FieldsetRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
|
|
63
|
+
Legend: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_fieldset.FieldsetLegendProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
type FormProps = React.ComponentProps<typeof Form$1>;
|
|
67
|
+
/**
|
|
68
|
+
* Base UI [Form](https://base-ui.com/react/components/form) with design-system `Form` classes.
|
|
69
|
+
*/
|
|
70
|
+
declare const Form: React.ForwardRefExoticComponent<Omit<Form$1.Props<Record<string, any>> & {
|
|
71
|
+
ref?: React.Ref<HTMLFormElement> | undefined;
|
|
72
|
+
}, "ref"> & React.RefAttributes<HTMLFormElement>>;
|
|
73
|
+
type FormActionsProps = React.ComponentProps<'div'>;
|
|
74
|
+
/** Layout helper for primary/secondary actions — not a Base UI primitive. */
|
|
75
|
+
declare function FormActions({ className, ...props }: FormActionsProps): react_jsx_runtime.JSX.Element;
|
|
76
|
+
|
|
77
|
+
type NavigationMenuRootProps = React.ComponentProps<typeof NavigationMenu$1.Root>;
|
|
78
|
+
type NavigationMenuListProps = React.ComponentProps<typeof NavigationMenu$1.List>;
|
|
79
|
+
/**
|
|
80
|
+
* Base UI [Navigation Menu](https://base-ui.com/react/components/navigation-menu) with design-system classes.
|
|
81
|
+
* Prefer `NavigationMenu.Link` with `render={<a />}` (or your router link) for correct semantics.
|
|
82
|
+
*/
|
|
83
|
+
declare const NavigationMenu: {
|
|
84
|
+
Root: React.ForwardRefExoticComponent<Omit<NavigationMenu$1.Root.Props<unknown>, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
85
|
+
List: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
|
|
86
|
+
Item: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
|
|
87
|
+
Content: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
88
|
+
Trigger: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
89
|
+
Icon: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
90
|
+
Portal: React.ForwardRefExoticComponent<Omit<_base_ui_react_navigation_menu.NavigationMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
91
|
+
Positioner: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
92
|
+
Popup: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuPopupProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
93
|
+
Arrow: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
94
|
+
Viewport: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
95
|
+
Link: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
96
|
+
Backdrop: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_navigation_menu.NavigationMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
type FieldRootProps = React.ComponentProps<typeof Field.Root>;
|
|
100
|
+
type FieldLabelProps = React.ComponentProps<typeof Field.Label>;
|
|
101
|
+
type FieldDescriptionProps = React.ComponentProps<typeof Field.Description>;
|
|
102
|
+
type FieldErrorProps = React.ComponentProps<typeof Field.Error>;
|
|
103
|
+
type FieldControlProps = React.ComponentProps<typeof Field.Control>;
|
|
104
|
+
type FieldValidityProps = React.ComponentProps<typeof Field.Validity>;
|
|
105
|
+
type FieldItemProps = React.ComponentProps<typeof Field.Item>;
|
|
106
|
+
|
|
107
|
+
export { Button, type ButtonProps, Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldItemProps, type FieldLabelProps, type FieldRootProps, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, type FieldsetLegendProps, type FieldsetRootProps, Form, FormActions, type FormActionsProps, type FormProps, Input, type InputProps, NavigationMenu, type NavigationMenuListProps, type NavigationMenuRootProps, cn, cnState };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
import * as React6 from 'react';
|
|
2
|
+
import { Button as Button$1 } from '@base-ui/react/button';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
import { Input as Input$1 } from '@base-ui/react/input';
|
|
5
|
+
import { Field as Field$1 } from '@base-ui/react/field';
|
|
6
|
+
import { Fieldset as Fieldset$1 } from '@base-ui/react/fieldset';
|
|
7
|
+
import { Form as Form$1 } from '@base-ui/react/form';
|
|
8
|
+
import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
|
|
9
|
+
|
|
10
|
+
// src/utils/cn.ts
|
|
11
|
+
function cn(...inputs) {
|
|
12
|
+
const out = [];
|
|
13
|
+
for (const input of inputs) {
|
|
14
|
+
if (input == null || input === false) continue;
|
|
15
|
+
if (typeof input === "string" || typeof input === "number") {
|
|
16
|
+
out.push(String(input));
|
|
17
|
+
} else if (Array.isArray(input)) {
|
|
18
|
+
const inner = cn(...input);
|
|
19
|
+
if (inner) out.push(inner);
|
|
20
|
+
} else if (typeof input === "object") {
|
|
21
|
+
for (const [k, v] of Object.entries(input)) {
|
|
22
|
+
if (v) out.push(k);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
return out.join(" ");
|
|
27
|
+
}
|
|
28
|
+
function cnState(base, className, state) {
|
|
29
|
+
return cn(base, typeof className === "function" ? className(state) : className);
|
|
30
|
+
}
|
|
31
|
+
var Button = React6.forwardRef(function Button2({ className, emphasis, palette, ...props }, ref) {
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
Button$1,
|
|
34
|
+
{
|
|
35
|
+
ref,
|
|
36
|
+
"data-emphasis": emphasis,
|
|
37
|
+
"data-color": palette,
|
|
38
|
+
...props,
|
|
39
|
+
className: (state) => cnState("Button", className, state)
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
});
|
|
43
|
+
Button.displayName = "Button";
|
|
44
|
+
var Input = React6.forwardRef(function Input2({ className, ...props }, ref) {
|
|
45
|
+
return /* @__PURE__ */ jsx(Input$1, { ref, ...props, className: (state) => cnState("Input", className, state) });
|
|
46
|
+
});
|
|
47
|
+
Input.displayName = "Input";
|
|
48
|
+
var Root = React6.forwardRef(
|
|
49
|
+
function FieldRoot({ className, ...props }, ref) {
|
|
50
|
+
return /* @__PURE__ */ jsx(
|
|
51
|
+
Field$1.Root,
|
|
52
|
+
{
|
|
53
|
+
ref,
|
|
54
|
+
...props,
|
|
55
|
+
className: (state) => cnState("FieldRoot", className, state)
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
var Label = React6.forwardRef(
|
|
61
|
+
function FieldLabel({ className, ...props }, ref) {
|
|
62
|
+
return /* @__PURE__ */ jsx(
|
|
63
|
+
Field$1.Label,
|
|
64
|
+
{
|
|
65
|
+
ref,
|
|
66
|
+
...props,
|
|
67
|
+
className: (state) => cnState("FieldLabel", className, state)
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
var Description = React6.forwardRef(function FieldDescription({ className, ...props }, ref) {
|
|
73
|
+
return /* @__PURE__ */ jsx(
|
|
74
|
+
Field$1.Description,
|
|
75
|
+
{
|
|
76
|
+
ref,
|
|
77
|
+
...props,
|
|
78
|
+
className: (state) => cnState("FieldDescription", className, state)
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
});
|
|
82
|
+
var Error = React6.forwardRef(
|
|
83
|
+
function FieldError({ className, ...props }, ref) {
|
|
84
|
+
return /* @__PURE__ */ jsx(
|
|
85
|
+
Field$1.Error,
|
|
86
|
+
{
|
|
87
|
+
ref,
|
|
88
|
+
...props,
|
|
89
|
+
className: (state) => cnState("FieldError", className, state)
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
var Control = React6.forwardRef(
|
|
95
|
+
function FieldControl({ className, ...props }, ref) {
|
|
96
|
+
return /* @__PURE__ */ jsx(
|
|
97
|
+
Field$1.Control,
|
|
98
|
+
{
|
|
99
|
+
ref,
|
|
100
|
+
...props,
|
|
101
|
+
className: (state) => cnState("FieldControl", className, state)
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
);
|
|
106
|
+
var Validity = Field$1.Validity;
|
|
107
|
+
var Item = React6.forwardRef(
|
|
108
|
+
function FieldItem({ className, ...props }, ref) {
|
|
109
|
+
return /* @__PURE__ */ jsx(
|
|
110
|
+
Field$1.Item,
|
|
111
|
+
{
|
|
112
|
+
ref,
|
|
113
|
+
...props,
|
|
114
|
+
className: (state) => cnState("", className, state)
|
|
115
|
+
}
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
var Field = {
|
|
120
|
+
Root,
|
|
121
|
+
Label,
|
|
122
|
+
Description,
|
|
123
|
+
Error,
|
|
124
|
+
Control,
|
|
125
|
+
Validity,
|
|
126
|
+
Item
|
|
127
|
+
};
|
|
128
|
+
var Root2 = React6.forwardRef(function FieldsetRoot({ className, ...props }, ref) {
|
|
129
|
+
return /* @__PURE__ */ jsx(
|
|
130
|
+
Fieldset$1.Root,
|
|
131
|
+
{
|
|
132
|
+
ref,
|
|
133
|
+
...props,
|
|
134
|
+
className: (state) => cnState("Fieldset", className, state)
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
});
|
|
138
|
+
var Legend = React6.forwardRef(function FieldsetLegend({ className, ...props }, ref) {
|
|
139
|
+
return /* @__PURE__ */ jsx(
|
|
140
|
+
Fieldset$1.Legend,
|
|
141
|
+
{
|
|
142
|
+
ref,
|
|
143
|
+
...props,
|
|
144
|
+
className: (state) => cnState("FieldsetLegend", className, state)
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
});
|
|
148
|
+
function FieldsetDescription({ className, ...props }) {
|
|
149
|
+
return /* @__PURE__ */ jsx("div", { className: cn("FieldsetDescription", className), ...props });
|
|
150
|
+
}
|
|
151
|
+
var Fieldset = {
|
|
152
|
+
Root: Root2,
|
|
153
|
+
Legend
|
|
154
|
+
};
|
|
155
|
+
var Form = React6.forwardRef(function Form2({ className, ...props }, ref) {
|
|
156
|
+
return /* @__PURE__ */ jsx(Form$1, { ref, ...props, className: (state) => cnState("Form", className, state) });
|
|
157
|
+
});
|
|
158
|
+
Form.displayName = "Form";
|
|
159
|
+
function FormActions({ className, ...props }) {
|
|
160
|
+
return /* @__PURE__ */ jsx("div", { className: cn("FormActions", className), ...props });
|
|
161
|
+
}
|
|
162
|
+
var Root3 = React6.forwardRef(
|
|
163
|
+
function NavigationMenuRoot({ className, ...props }, ref) {
|
|
164
|
+
return /* @__PURE__ */ jsx(
|
|
165
|
+
NavigationMenu$1.Root,
|
|
166
|
+
{
|
|
167
|
+
ref,
|
|
168
|
+
...props,
|
|
169
|
+
className: (state) => cnState("NavigationMenuRoot", className, state)
|
|
170
|
+
}
|
|
171
|
+
);
|
|
172
|
+
}
|
|
173
|
+
);
|
|
174
|
+
var List = React6.forwardRef(
|
|
175
|
+
function NavigationMenuList({ className, ...props }, ref) {
|
|
176
|
+
return /* @__PURE__ */ jsx(
|
|
177
|
+
NavigationMenu$1.List,
|
|
178
|
+
{
|
|
179
|
+
ref,
|
|
180
|
+
...props,
|
|
181
|
+
className: (state) => cnState("NavigationMenuList", className, state)
|
|
182
|
+
}
|
|
183
|
+
);
|
|
184
|
+
}
|
|
185
|
+
);
|
|
186
|
+
var Item2 = React6.forwardRef(
|
|
187
|
+
function NavigationMenuItem({ className, ...props }, ref) {
|
|
188
|
+
return /* @__PURE__ */ jsx(
|
|
189
|
+
NavigationMenu$1.Item,
|
|
190
|
+
{
|
|
191
|
+
ref,
|
|
192
|
+
...props,
|
|
193
|
+
className: (state) => cnState("", className, state)
|
|
194
|
+
}
|
|
195
|
+
);
|
|
196
|
+
}
|
|
197
|
+
);
|
|
198
|
+
var Content = React6.forwardRef(function NavigationMenuContent({ className, ...props }, ref) {
|
|
199
|
+
return /* @__PURE__ */ jsx(
|
|
200
|
+
NavigationMenu$1.Content,
|
|
201
|
+
{
|
|
202
|
+
ref,
|
|
203
|
+
...props,
|
|
204
|
+
className: (state) => cnState("NavigationMenuContent", className, state)
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
});
|
|
208
|
+
var Trigger = React6.forwardRef(function NavigationMenuTrigger({ className, ...props }, ref) {
|
|
209
|
+
return /* @__PURE__ */ jsx(
|
|
210
|
+
NavigationMenu$1.Trigger,
|
|
211
|
+
{
|
|
212
|
+
ref,
|
|
213
|
+
...props,
|
|
214
|
+
className: (state) => cnState("NavigationMenuTrigger", className, state)
|
|
215
|
+
}
|
|
216
|
+
);
|
|
217
|
+
});
|
|
218
|
+
var Icon = React6.forwardRef(
|
|
219
|
+
function NavigationMenuIcon({ className, ...props }, ref) {
|
|
220
|
+
return /* @__PURE__ */ jsx(
|
|
221
|
+
NavigationMenu$1.Icon,
|
|
222
|
+
{
|
|
223
|
+
ref,
|
|
224
|
+
...props,
|
|
225
|
+
className: (state) => cnState("NavigationMenuIcon", className, state)
|
|
226
|
+
}
|
|
227
|
+
);
|
|
228
|
+
}
|
|
229
|
+
);
|
|
230
|
+
var Portal = NavigationMenu$1.Portal;
|
|
231
|
+
var Positioner = React6.forwardRef(function NavigationMenuPositioner({ className, ...props }, ref) {
|
|
232
|
+
return /* @__PURE__ */ jsx(
|
|
233
|
+
NavigationMenu$1.Positioner,
|
|
234
|
+
{
|
|
235
|
+
ref,
|
|
236
|
+
...props,
|
|
237
|
+
className: (state) => cnState("NavigationMenuPositioner", className, state)
|
|
238
|
+
}
|
|
239
|
+
);
|
|
240
|
+
});
|
|
241
|
+
var Popup = React6.forwardRef(
|
|
242
|
+
function NavigationMenuPopup({ className, ...props }, ref) {
|
|
243
|
+
return /* @__PURE__ */ jsx(
|
|
244
|
+
NavigationMenu$1.Popup,
|
|
245
|
+
{
|
|
246
|
+
ref,
|
|
247
|
+
...props,
|
|
248
|
+
className: (state) => cnState("NavigationMenuPopup", className, state)
|
|
249
|
+
}
|
|
250
|
+
);
|
|
251
|
+
}
|
|
252
|
+
);
|
|
253
|
+
var Arrow = React6.forwardRef(
|
|
254
|
+
function NavigationMenuArrow({ className, ...props }, ref) {
|
|
255
|
+
return /* @__PURE__ */ jsx(
|
|
256
|
+
NavigationMenu$1.Arrow,
|
|
257
|
+
{
|
|
258
|
+
ref,
|
|
259
|
+
...props,
|
|
260
|
+
className: (state) => cnState("NavigationMenuArrow", className, state)
|
|
261
|
+
}
|
|
262
|
+
);
|
|
263
|
+
}
|
|
264
|
+
);
|
|
265
|
+
var Viewport = React6.forwardRef(function NavigationMenuViewport({ className, ...props }, ref) {
|
|
266
|
+
return /* @__PURE__ */ jsx(
|
|
267
|
+
NavigationMenu$1.Viewport,
|
|
268
|
+
{
|
|
269
|
+
ref,
|
|
270
|
+
...props,
|
|
271
|
+
className: (state) => cnState("NavigationMenuViewport", className, state)
|
|
272
|
+
}
|
|
273
|
+
);
|
|
274
|
+
});
|
|
275
|
+
var Link = React6.forwardRef(
|
|
276
|
+
function NavigationMenuLink({ className, ...props }, ref) {
|
|
277
|
+
return /* @__PURE__ */ jsx(
|
|
278
|
+
NavigationMenu$1.Link,
|
|
279
|
+
{
|
|
280
|
+
ref,
|
|
281
|
+
...props,
|
|
282
|
+
className: (state) => cnState("NavigationMenuLink", className, state)
|
|
283
|
+
}
|
|
284
|
+
);
|
|
285
|
+
}
|
|
286
|
+
);
|
|
287
|
+
var Backdrop = React6.forwardRef(function NavigationMenuBackdrop({ className, ...props }, ref) {
|
|
288
|
+
return /* @__PURE__ */ jsx(
|
|
289
|
+
NavigationMenu$1.Backdrop,
|
|
290
|
+
{
|
|
291
|
+
ref,
|
|
292
|
+
...props,
|
|
293
|
+
className: (state) => cnState("", className, state)
|
|
294
|
+
}
|
|
295
|
+
);
|
|
296
|
+
});
|
|
297
|
+
var NavigationMenu = {
|
|
298
|
+
Root: Root3,
|
|
299
|
+
List,
|
|
300
|
+
Item: Item2,
|
|
301
|
+
Content,
|
|
302
|
+
Trigger,
|
|
303
|
+
Icon,
|
|
304
|
+
Portal,
|
|
305
|
+
Positioner,
|
|
306
|
+
Popup,
|
|
307
|
+
Arrow,
|
|
308
|
+
Viewport,
|
|
309
|
+
Link,
|
|
310
|
+
Backdrop
|
|
311
|
+
};
|
|
312
|
+
|
|
313
|
+
export { Button, Field, Fieldset, FieldsetDescription, Form, FormActions, Input, NavigationMenu, cn, cnState };
|
|
314
|
+
//# sourceMappingURL=index.js.map
|
|
315
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/cn.ts","../src/components/button.tsx","../src/components/input.tsx","../src/components/field.tsx","../src/components/fieldset.tsx","../src/components/form.tsx","../src/components/navigation-menu.tsx"],"names":["React","Button","BaseButton","React2","Input","jsx","BaseInput","React3","BaseField","Root","React4","BaseFieldset","React5","Form","BaseForm","BaseNavigationMenu","Item"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Merge class names (strings, arrays, conditional objects). No external deps.\n */\ntype ClassValue =\n | string\n | number\n | boolean\n | undefined\n | null\n | Record<string, boolean | undefined>\n | ClassValue[];\n\nexport function cn(...inputs: ClassValue[]): string {\n const out: string[] = [];\n for (const input of inputs) {\n if (input == null || input === false) continue;\n if (typeof input === 'string' || typeof input === 'number') {\n out.push(String(input));\n } else if (Array.isArray(input)) {\n const inner = cn(...input);\n if (inner) out.push(inner);\n } else if (typeof input === 'object') {\n for (const [k, v] of Object.entries(input)) {\n if (v) out.push(k);\n }\n }\n }\n return out.join(' ');\n}\n\n/** Merge a static BEM block with Base UI `className` (string or state callback). */\nexport function cnState<State>(\n base: string,\n className: string | ((state: State) => string | undefined) | undefined,\n state: State,\n): string {\n return cn(base, typeof className === 'function' ? className(state) : className);\n}\n","import * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport { cnState } from '../utils/cn';\n\nexport type ButtonProps = React.ComponentProps<typeof BaseButton> & {\n /** How loud the button is. The brand's roles decide what each level looks like. */\n emphasis?: 'bold' | 'standard' | 'subtle' | 'quiet';\n /** Paint the level in another palette instead of the level's own color (e.g. \"secondary\", \"error\"). */\n palette?: string;\n};\n\n/**\n * Base UI [Button](https://base-ui.com/react/components/button) with design-system `Button` classes.\n * Icon-only buttons must include a visible label for assistive tech (`aria-label` or `aria-labelledby`).\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n { className, emphasis, palette, ...props },\n ref,\n) {\n return (\n <BaseButton\n ref={ref}\n data-emphasis={emphasis}\n data-color={palette}\n {...props}\n className={(state) => cnState('Button', className, state)}\n />\n );\n});\n\nButton.displayName = 'Button';\n","import * as React from 'react';\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { cnState } from '../utils/cn';\n\nexport type InputProps = React.ComponentProps<typeof BaseInput>;\n\n/**\n * Base UI [Input](https://base-ui.com/react/components/input) with design-system `Input` classes.\n * Pairs with {@link Field} for labels, validation, and descriptions.\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n { className, ...props },\n ref,\n) {\n return (\n <BaseInput ref={ref} {...props} className={(state) => cnState('Input', className, state)} />\n );\n});\n\nInput.displayName = 'Input';\n","import * as React from 'react';\nimport { Field as BaseField } from '@base-ui/react/field';\nimport { cnState } from '../utils/cn';\n\nconst Root = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof BaseField.Root>>(\n function FieldRoot({ className, ...props }, ref) {\n return (\n <BaseField.Root\n ref={ref}\n {...props}\n className={(state) => cnState('FieldRoot', className, state)}\n />\n );\n },\n);\n\nconst Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<typeof BaseField.Label>>(\n function FieldLabel({ className, ...props }, ref) {\n return (\n <BaseField.Label\n ref={ref}\n {...props}\n className={(state) => cnState('FieldLabel', className, state)}\n />\n );\n },\n);\n\nconst Description = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof BaseField.Description>\n>(function FieldDescription({ className, ...props }, ref) {\n return (\n <BaseField.Description\n ref={ref}\n {...props}\n className={(state) => cnState('FieldDescription', className, state)}\n />\n );\n});\n\nconst Error = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof BaseField.Error>>(\n function FieldError({ className, ...props }, ref) {\n return (\n <BaseField.Error\n ref={ref}\n {...props}\n className={(state) => cnState('FieldError', className, state)}\n />\n );\n },\n);\n\nconst Control = React.forwardRef<HTMLInputElement, React.ComponentProps<typeof BaseField.Control>>(\n function FieldControl({ className, ...props }, ref) {\n return (\n <BaseField.Control\n ref={ref}\n {...props}\n className={(state) => cnState('FieldControl', className, state)}\n />\n );\n },\n);\n\n/** Only accepts `children` as a render function — no `className` in Base UI’s API. */\nconst Validity = BaseField.Validity;\n\nconst Item = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof BaseField.Item>>(\n function FieldItem({ className, ...props }, ref) {\n return (\n <BaseField.Item\n ref={ref}\n {...props}\n className={(state) => cnState('', className, state)}\n />\n );\n },\n);\n\n/**\n * Base UI [Field](https://base-ui.com/react/components/field) with design-system field classes.\n */\nexport const Field = {\n Root,\n Label,\n Description,\n Error,\n Control,\n Validity,\n Item,\n};\n","import * as React from 'react';\nimport { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport { cn, cnState } from '../utils/cn';\n\nexport type FieldsetRootProps = React.ComponentProps<typeof BaseFieldset.Root>;\nexport type FieldsetLegendProps = React.ComponentProps<typeof BaseFieldset.Legend>;\n\nconst Root = React.forwardRef<HTMLFieldSetElement, FieldsetRootProps>(function FieldsetRoot(\n { className, ...props },\n ref,\n) {\n return (\n <BaseFieldset.Root\n ref={ref}\n {...props}\n className={(state) => cnState('Fieldset', className, state)}\n />\n );\n});\n\nconst Legend = React.forwardRef<HTMLDivElement, FieldsetLegendProps>(function FieldsetLegend(\n { className, ...props },\n ref,\n) {\n return (\n <BaseFieldset.Legend\n ref={ref}\n {...props}\n className={(state) => cnState('FieldsetLegend', className, state)}\n />\n );\n});\n\nexport type FieldsetDescriptionProps = React.ComponentProps<'div'>;\n\n/** Presentational helper — not a Base UI primitive. */\nexport function FieldsetDescription({ className, ...props }: FieldsetDescriptionProps) {\n return <div className={cn('FieldsetDescription', className)} {...props} />;\n}\n\n/**\n * Base UI [Fieldset](https://base-ui.com/react/components/fieldset) with design-system classes.\n */\nexport const Fieldset = {\n Root,\n Legend,\n};\n","import * as React from 'react';\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { cn, cnState } from '../utils/cn';\n\nexport type FormProps = React.ComponentProps<typeof BaseForm>;\n\n/**\n * Base UI [Form](https://base-ui.com/react/components/form) with design-system `Form` classes.\n */\nexport const Form = React.forwardRef<HTMLFormElement, FormProps>(function Form(\n { className, ...props },\n ref,\n) {\n return (\n <BaseForm ref={ref} {...props} className={(state) => cnState('Form', className, state)} />\n );\n});\n\nForm.displayName = 'Form';\n\nexport type FormActionsProps = React.ComponentProps<'div'>;\n\n/** Layout helper for primary/secondary actions — not a Base UI primitive. */\nexport function FormActions({ className, ...props }: FormActionsProps) {\n return <div className={cn('FormActions', className)} {...props} />;\n}\n","import * as React from 'react';\nimport {\n NavigationMenu as BaseNavigationMenu,\n} from '@base-ui/react/navigation-menu';\nimport { cnState } from '../utils/cn';\n\nexport type NavigationMenuRootProps = React.ComponentProps<typeof BaseNavigationMenu.Root>;\nexport type NavigationMenuListProps = React.ComponentProps<typeof BaseNavigationMenu.List>;\n\nconst Root = React.forwardRef<HTMLElement, React.ComponentProps<typeof BaseNavigationMenu.Root>>(\n function NavigationMenuRoot({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Root\n ref={ref}\n {...props}\n className={(state) => cnState('NavigationMenuRoot', className, state)}\n />\n );\n },\n);\n\nconst List = React.forwardRef<HTMLUListElement, React.ComponentProps<typeof BaseNavigationMenu.List>>(\n function NavigationMenuList({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.List\n ref={ref}\n {...props}\n className={(state) => cnState('NavigationMenuList', className, state)}\n />\n );\n },\n);\n\nconst Item = React.forwardRef<HTMLLIElement, React.ComponentProps<typeof BaseNavigationMenu.Item>>(\n function NavigationMenuItem({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Item\n ref={ref}\n {...props}\n className={(state) => cnState('', className, state)}\n />\n );\n },\n);\n\nconst Content = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof BaseNavigationMenu.Content>\n>(function NavigationMenuContent({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Content\n ref={ref}\n {...props}\n className={(state) => cnState('NavigationMenuContent', className, state)}\n />\n );\n});\n\nconst Trigger = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<typeof BaseNavigationMenu.Trigger>\n>(function NavigationMenuTrigger({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Trigger\n ref={ref}\n {...props}\n className={(state) => cnState('NavigationMenuTrigger', className, state)}\n />\n );\n});\n\nconst Icon = React.forwardRef<HTMLSpanElement, React.ComponentProps<typeof BaseNavigationMenu.Icon>>(\n function NavigationMenuIcon({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Icon\n ref={ref}\n {...props}\n className={(state) => cnState('NavigationMenuIcon', className, state)}\n />\n );\n },\n);\n\nconst Portal = BaseNavigationMenu.Portal;\n\nconst Positioner = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof BaseNavigationMenu.Positioner>\n>(function NavigationMenuPositioner({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Positioner\n ref={ref}\n {...props}\n className={(state) => cnState('NavigationMenuPositioner', className, state)}\n />\n );\n});\n\nconst Popup = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof BaseNavigationMenu.Popup>>(\n function NavigationMenuPopup({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Popup\n ref={ref}\n {...props}\n className={(state) => cnState('NavigationMenuPopup', className, state)}\n />\n );\n },\n);\n\nconst Arrow = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof BaseNavigationMenu.Arrow>>(\n function NavigationMenuArrow({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Arrow\n ref={ref}\n {...props}\n className={(state) => cnState('NavigationMenuArrow', className, state)}\n />\n );\n },\n);\n\nconst Viewport = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof BaseNavigationMenu.Viewport>\n>(function NavigationMenuViewport({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Viewport\n ref={ref}\n {...props}\n className={(state) => cnState('NavigationMenuViewport', className, state)}\n />\n );\n});\n\nconst Link = React.forwardRef<HTMLAnchorElement, React.ComponentProps<typeof BaseNavigationMenu.Link>>(\n function NavigationMenuLink({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Link\n ref={ref}\n {...props}\n className={(state) => cnState('NavigationMenuLink', className, state)}\n />\n );\n },\n);\n\nconst Backdrop = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof BaseNavigationMenu.Backdrop>\n>(function NavigationMenuBackdrop({ className, ...props }, ref) {\n return (\n <BaseNavigationMenu.Backdrop\n ref={ref}\n {...props}\n className={(state) => cnState('', className, state)}\n />\n );\n});\n\n/**\n * Base UI [Navigation Menu](https://base-ui.com/react/components/navigation-menu) with design-system classes.\n * Prefer `NavigationMenu.Link` with `render={<a />}` (or your router link) for correct semantics.\n */\nexport const NavigationMenu = {\n Root,\n List,\n Item,\n Content,\n Trigger,\n Icon,\n Portal,\n Positioner,\n Popup,\n Arrow,\n Viewport,\n Link,\n Backdrop,\n};\n"]}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
|
|
2
|
+
/* Accordion - Mojave Theme
|
|
3
|
+
*
|
|
4
|
+
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
5
|
+
* concept (tokens/semantic/disclosure.json); the trigger is the maximize-md heading and
|
|
6
|
+
* the panel is base text. The accordion sits on whatever surface holds it.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
.Accordion {
|
|
10
|
+
width: 100%;
|
|
11
|
+
border-radius: var(--sl-radius-surface);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.AccordionItem {
|
|
15
|
+
border-bottom: var(--sl-stroke-default) solid var(--sl-disclosure-divider-color);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.AccordionItem:last-child {
|
|
19
|
+
border-bottom: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.AccordionHeader {
|
|
23
|
+
margin: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.AccordionTrigger {
|
|
27
|
+
all: unset;
|
|
28
|
+
font-family: var(--sl-font-maximize-md-font-family);
|
|
29
|
+
font-size: var(--sl-font-maximize-md-font-size);
|
|
30
|
+
font-weight: var(--sl-font-maximize-md-font-weight);
|
|
31
|
+
line-height: var(--sl-font-maximize-md-line-height);
|
|
32
|
+
letter-spacing: var(--sl-font-maximize-md-letter-spacing);
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
width: 100%;
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
justify-content: space-between;
|
|
38
|
+
gap: var(--sl-space-4);
|
|
39
|
+
padding: var(--sl-space-4) var(--sl-space-6);
|
|
40
|
+
color: var(--sl-text-primary);
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
transition: background-color var(--sl-disclosure-animation-duration) var(--sl-disclosure-animation-easing);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.AccordionTrigger:hover:not([data-disabled]) {
|
|
46
|
+
background: var(--sl-disclosure-trigger-background-hover);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.AccordionTrigger:active:not([data-disabled]) {
|
|
50
|
+
background: var(--sl-disclosure-trigger-background-active);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.AccordionTrigger:focus-visible {
|
|
54
|
+
outline: var(--sl-focus-outline);
|
|
55
|
+
outline-offset: var(--sl-focus-outline-offset-inset);
|
|
56
|
+
border-radius: var(--sl-radius-item);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.AccordionTrigger[data-disabled] {
|
|
60
|
+
opacity: var(--sl-disclosure-opacity-disabled);
|
|
61
|
+
cursor: not-allowed;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Chevron: a block-leading icon, turning to point up when the panel is open. */
|
|
65
|
+
.AccordionIcon {
|
|
66
|
+
box-sizing: border-box;
|
|
67
|
+
flex-shrink: 0;
|
|
68
|
+
width: var(--sl-icon-size-magnify);
|
|
69
|
+
height: var(--sl-icon-size-magnify);
|
|
70
|
+
display: inline-flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
color: var(--sl-disclosure-icon-color);
|
|
74
|
+
transition: transform var(--sl-disclosure-animation-duration) var(--sl-disclosure-animation-easing);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.AccordionTrigger[data-panel-open] .AccordionIcon {
|
|
78
|
+
transform: rotate(180deg);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Panel: grows to its content's height as it opens. */
|
|
82
|
+
.AccordionPanel {
|
|
83
|
+
height: var(--accordion-panel-height);
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
transition: height var(--sl-disclosure-animation-duration) var(--sl-disclosure-animation-easing);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.AccordionPanel[data-starting-style],
|
|
89
|
+
.AccordionPanel[data-ending-style] {
|
|
90
|
+
height: 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.AccordionContent {
|
|
94
|
+
font-family: var(--sl-font-base-font-family);
|
|
95
|
+
font-size: var(--sl-font-base-font-size);
|
|
96
|
+
font-weight: var(--sl-font-base-font-weight);
|
|
97
|
+
line-height: var(--sl-font-base-line-height);
|
|
98
|
+
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
99
|
+
padding: 0 var(--sl-space-6) var(--sl-space-4);
|
|
100
|
+
color: var(--sl-disclosure-content-color);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Separated: each item is its own card. */
|
|
104
|
+
.Accordion[data-variant='separated'] {
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-direction: column;
|
|
107
|
+
gap: var(--sl-space-2);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.Accordion[data-variant='separated'] .AccordionItem {
|
|
111
|
+
border: var(--sl-stroke-default) solid var(--sl-disclosure-divider-color);
|
|
112
|
+
border-radius: var(--sl-radius-chrome);
|
|
113
|
+
overflow: hidden;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Bordered: one edge around the whole accordion. */
|
|
117
|
+
.Accordion[data-variant='bordered'] {
|
|
118
|
+
border: var(--sl-stroke-default) solid var(--sl-disclosure-divider-color);
|
|
119
|
+
overflow: hidden;
|
|
120
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
|
|
2
|
+
/* Alert Dialog - Mojave Theme
|
|
3
|
+
*
|
|
4
|
+
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
5
|
+
* dialog, so its backdrop, popup, title, description and actions are styled with the
|
|
6
|
+
* dialog's in Dialog.css. Its buttons are .Button elements: the confirming one bold, a
|
|
7
|
+
* cancel quiet, and a destructive one bold with data-color="error".
|
|
8
|
+
*/
|