Skip to content

Commit 11f7e5a

Browse files
chore: generate
1 parent 38b406f commit 11f7e5a

44 files changed

Lines changed: 354 additions & 543 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

packages/ui/src/v2/components/accordion-v2.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
1616
overflow: hidden;
1717

18-
font-family: var(--font-family-sans), 'Inter', system-ui, sans-serif;
18+
font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
1919
color: var(--accordion-v2-fg);
2020

2121
-webkit-font-smoothing: antialiased;

packages/ui/src/v2/components/accordion-v2.stories.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,9 @@ export const NoChevron = {
161161
<AccordionV2.Header>
162162
<AccordionV2.Trigger hideChevron>Trigger without chevron</AccordionV2.Trigger>
163163
</AccordionV2.Header>
164-
<AccordionV2.Content>Pass <code>hideChevron</code> on the trigger.</AccordionV2.Content>
164+
<AccordionV2.Content>
165+
Pass <code>hideChevron</code> on the trigger.
166+
</AccordionV2.Content>
165167
</AccordionV2.Item>
166168
<AccordionV2.Item value="y">
167169
<AccordionV2.Header>

packages/ui/src/v2/components/accordion-v2.tsx

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,7 @@ export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.C
2626

2727
function AccordionV2Root(props: ParentProps<AccordionV2Props>) {
2828
const [s, r] = splitProps(props, ["class", "classList"])
29-
return (
30-
<Kobalte
31-
{...r}
32-
data-component="accordion-v2"
33-
classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
34-
/>
35-
)
29+
return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
3630
}
3731

3832
function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
@@ -49,11 +43,7 @@ function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
4943
function AccordionV2Header(props: ParentProps<AccordionV2HeaderProps>) {
5044
const [s, r] = splitProps(props, ["class", "classList", "children"])
5145
return (
52-
<Kobalte.Header
53-
{...r}
54-
data-slot="accordion-v2-header"
55-
classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
56-
>
46+
<Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
5747
{s.children}
5848
</Kobalte.Header>
5949
)

packages/ui/src/v2/components/basic-tool-v2.stories.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,9 @@ export const NoChildren = {
9191
export const CustomTrigger = {
9292
render: () => (
9393
<BasicToolV2
94-
trigger={<span style={{ color: "#161616", "font-size": "13px", "font-weight": "440" }}>Custom trigger content</span>}
94+
trigger={
95+
<span style={{ color: "#161616", "font-size": "13px", "font-weight": "440" }}>Custom trigger content</span>
96+
}
9597
>
9698
Expandable detail for custom trigger.
9799
</BasicToolV2>

packages/ui/src/v2/components/basic-tool-v2.tsx

Lines changed: 9 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import { Collapsible } from "@kobalte/core/collapsible"
2-
import {
3-
type ComponentProps,
4-
type JSX,
5-
For,
6-
Show,
7-
createMemo,
8-
splitProps,
9-
} from "solid-js"
2+
import { type ComponentProps, type JSX, For, Show, createMemo, splitProps } from "solid-js"
103
import { DiffChanges } from "./diff-changes-v2"
114
import { TextShimmerV2 } from "./text-shimmer-v2"
125
import "./basic-tool-v2.css"
@@ -39,10 +32,7 @@ export interface BasicToolV2TriggerTitle {
3932
}
4033

4134
const isTriggerTitle = (val: unknown): val is BasicToolV2TriggerTitle =>
42-
typeof val === "object" &&
43-
val !== null &&
44-
"title" in val &&
45-
(typeof Node === "undefined" || !(val instanceof Node))
35+
typeof val === "object" && val !== null && "title" in val && (typeof Node === "undefined" || !(val instanceof Node))
4636

4737
export interface BasicToolV2Props extends Omit<ComponentProps<"div">, "children" | "title"> {
4838
trigger: BasicToolV2TriggerTitle | JSX.Element
@@ -95,23 +85,18 @@ export function BasicToolV2(props: BasicToolV2Props) {
9585
[local.class ?? ""]: !!local.class,
9686
}}
9787
>
98-
<Collapsible.Trigger
99-
as="div"
100-
role="button"
101-
data-slot="basic-tool-v2-trigger"
102-
>
88+
<Collapsible.Trigger as="div" role="button" data-slot="basic-tool-v2-trigger">
10389
<div data-slot="basic-tool-v2-labels">
104-
<Show
105-
when={isTriggerTitle(local.trigger) && local.trigger}
106-
fallback={local.trigger as JSX.Element}
107-
>
90+
<Show when={isTriggerTitle(local.trigger) && local.trigger} fallback={local.trigger as JSX.Element}>
10891
{(title) => (
10992
<>
11093
<span data-slot="basic-tool-v2-title">
11194
<TextShimmerV2 text={title().title} active={pending()} />
11295
</span>
11396
<Show when={!pending() && title().subtitle}>
114-
<span data-slot="basic-tool-v2-sep" aria-hidden="true">·</span>
97+
<span data-slot="basic-tool-v2-sep" aria-hidden="true">
98+
·
99+
</span>
115100
<span
116101
data-slot="basic-tool-v2-subtitle"
117102
style={local.onSubtitleClick ? { cursor: "pointer" } : undefined}
@@ -126,20 +111,14 @@ export function BasicToolV2(props: BasicToolV2Props) {
126111
</span>
127112
</Show>
128113
<Show when={!pending() && title().args?.length}>
129-
<For each={title().args}>
130-
{(arg) => (
131-
<span data-slot="basic-tool-v2-arg">{arg}</span>
132-
)}
133-
</For>
114+
<For each={title().args}>{(arg) => <span data-slot="basic-tool-v2-arg">{arg}</span>}</For>
134115
</Show>
135116
<Show when={!pending() && title().changes}>
136117
<span data-slot="basic-tool-v2-diff">
137118
<DiffChanges changes={title().changes!} />
138119
</span>
139120
</Show>
140-
<Show when={!pending() && title().action}>
141-
{(action) => action()}
142-
</Show>
121+
<Show when={!pending() && title().action}>{(action) => action()}</Show>
143122
</>
144123
)}
145124
</Show>

packages/ui/src/v2/components/button-v2.css

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,14 +102,22 @@
102102

103103
[data-component="button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
104104
background-image:
105-
linear-gradient(90deg, var(--overlay-simple-overlay-contrast-hover) 0%, var(--overlay-simple-overlay-contrast-hover) 100%),
105+
linear-gradient(
106+
90deg,
107+
var(--overlay-simple-overlay-contrast-hover) 0%,
108+
var(--overlay-simple-overlay-contrast-hover) 100%
109+
),
106110
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
107111
linear-gradient(90deg, var(--background-bg-contrast) 0%, var(--background-bg-contrast) 100%);
108112
}
109113

110114
[data-component="button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
111115
background-image:
112-
linear-gradient(90deg, var(--overlay-simple-overlay-contrast-pressed) 0%, var(--overlay-simple-overlay-contrast-pressed) 100%),
116+
linear-gradient(
117+
90deg,
118+
var(--overlay-simple-overlay-contrast-pressed) 0%,
119+
var(--overlay-simple-overlay-contrast-pressed) 100%
120+
),
113121
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
114122
linear-gradient(90deg, var(--background-bg-contrast) 0%, var(--background-bg-contrast) 100%);
115123
}

packages/ui/src/v2/components/button-v2.stories.tsx

Lines changed: 14 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ButtonV2 } from "./button-v2";
1+
import { ButtonV2 } from "./button-v2"
22

33
const docs = `### Overview
44
Button v2 with three visual variants and two sizes.
@@ -12,7 +12,7 @@ Button v2 with three visual variants and two sizes.
1212
### States
1313
- default, hover, pressed, focus, disabled.
1414
- State selectors are available via pseudo-classes and \`[data-state]\`.
15-
`;
15+
`
1616

1717
export default {
1818
title: "UI V2/Button",
@@ -46,9 +46,9 @@ export default {
4646
options: ["normal", "large"],
4747
},
4848
},
49-
};
49+
}
5050

51-
export const Playground = {};
51+
export const Playground = {}
5252

5353
export const Variants = {
5454
render: () => (
@@ -65,7 +65,7 @@ export const Variants = {
6565
<ButtonV2 variant="ghost">Ghost</ButtonV2>
6666
</div>
6767
),
68-
};
68+
}
6969

7070
export const Sizes = {
7171
render: () => (
@@ -88,7 +88,7 @@ export const Sizes = {
8888
</ButtonV2>
8989
</div>
9090
),
91-
};
91+
}
9292

9393
export const Icon = {
9494
render: () => (
@@ -100,40 +100,21 @@ export const Icon = {
100100
"flex-wrap": "wrap",
101101
}}
102102
>
103-
<ButtonV2
104-
variant="neutral"
105-
size="normal"
106-
icon="plus"
107-
>
103+
<ButtonV2 variant="neutral" size="normal" icon="plus">
108104
Normal
109105
</ButtonV2>
110-
<ButtonV2
111-
variant="contrast"
112-
size="large"
113-
icon="plus"
114-
>
106+
<ButtonV2 variant="contrast" size="large" icon="plus">
115107
Large
116108
</ButtonV2>
117109
</div>
118110
),
119-
};
111+
}
120112

121113
export const AllStates = {
122114
render: () => {
123-
const variants = [
124-
"neutral",
125-
"contrast",
126-
"ghost",
127-
] as const;
128-
const states = [
129-
"default",
130-
"hover",
131-
"pressed",
132-
"focus",
133-
"disabled",
134-
] as const;
135-
const toTitleCase = (value: string) =>
136-
value.charAt(0).toUpperCase() + value.slice(1);
115+
const variants = ["neutral", "contrast", "ghost"] as const
116+
const states = ["default", "hover", "pressed", "focus", "disabled"] as const
117+
const toTitleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)
137118
return (
138119
<div style={{ display: "grid", gap: "12px" }}>
139120
{variants.map((variant) => (
@@ -161,6 +142,6 @@ export const AllStates = {
161142
</div>
162143
))}
163144
</div>
164-
);
145+
)
165146
},
166-
};
147+
}

packages/ui/src/v2/components/checkbox-v2.css

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,7 @@
6262
border: none;
6363
box-shadow: inset 0 0 0 0.5px var(--border-border-strong);
6464

65-
background:
66-
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
67-
var(--background-bg-base);
65+
background: linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
6866
transition:
6967
background 170ms ease-out,
7068
opacity 170ms ease-out,
@@ -135,18 +133,15 @@
135133
[data-slot="checkbox-v2-control"] {
136134
background:
137135
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
138-
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
139-
var(--background-bg-base);
136+
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
140137
}
141138

142139
[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
143140
opacity: 0.5;
144141
}
145142

146143
[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
147-
background:
148-
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
149-
var(--background-bg-accent);
144+
background: linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
150145
}
151146

152147
[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
@@ -155,8 +150,7 @@
155150
[data-slot="checkbox-v2-control"] {
156151
background:
157152
linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
158-
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
159-
var(--background-bg-accent);
153+
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
160154
}
161155

162156
[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))

packages/ui/src/v2/components/checkbox-v2.stories.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,7 @@ export const States = {
8686
<CheckboxV2 name="s4" disabled label="Disabled" />
8787
<CheckboxV2 name="s5" disabled defaultChecked label="Checked disabled" />
8888
<CheckboxV2 name="s6" disabled indeterminate label="Indeterminate disabled" />
89-
<CheckboxV2
90-
name="s7"
91-
label="Invalid"
92-
description="Must be checked."
93-
required
94-
validationState="invalid"
95-
/>
89+
<CheckboxV2 name="s7" label="Invalid" description="Must be checked." required validationState="invalid" />
9690
</div>
9791
),
9892
}

packages/ui/src/v2/components/checkbox-v2.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,7 @@ export function CheckboxV2(props: CheckboxV2Props) {
5454
<div data-slot="checkbox-v2-text">
5555
<span data-slot="checkbox-v2-label-text">{local.label}</span>
5656
<Show when={local.description}>
57-
{(description) => (
58-
<span data-slot="checkbox-v2-description">{description()}</span>
59-
)}
57+
{(description) => <span data-slot="checkbox-v2-description">{description()}</span>}
6058
</Show>
6159
</div>
6260
</Kobalte.Label>

0 commit comments

Comments
 (0)