clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-05-24 13:25:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: generate

Browse Source
This commit is contained in:
opencode-agent[bot]
2026-05-20 06:41:26 +00:00
parent 38b406fb35
commit 11f7e5a1b0
44 changed files with 354 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/src/v2/components/accordion-v2.css
View File

@@ -15,7 +15,7 @@
box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
overflow: hidden;
font-family: var(--font-family-sans), 'Inter', system-ui, sans-serif;
font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
color: var(--accordion-v2-fg);
-webkit-font-smoothing: antialiased;

4
packages/ui/src/v2/components/accordion-v2.stories.tsx
View File

@@ -161,7 +161,9 @@ export const NoChevron = {
<AccordionV2.Header>
<AccordionV2.Trigger hideChevron>Trigger without chevron</AccordionV2.Trigger>
</AccordionV2.Header>
<AccordionV2.Content>Pass <code>hideChevron</code> on the trigger.</AccordionV2.Content>
<AccordionV2.Content>
Pass <code>hideChevron</code> on the trigger.
</AccordionV2.Content>
</AccordionV2.Item>
<AccordionV2.Item value="y">
<AccordionV2.Header>

14
packages/ui/src/v2/components/accordion-v2.tsx
View File

@@ -26,13 +26,7 @@ export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.C
function AccordionV2Root(props: ParentProps<AccordionV2Props>) {
const [s, r] = splitProps(props, ["class", "classList"])
return (
<Kobalte
{...r}
data-component="accordion-v2"
classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
/>
)
return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
}
function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
@@ -49,11 +43,7 @@ function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
function AccordionV2Header(props: ParentProps<AccordionV2HeaderProps>) {
const [s, r] = splitProps(props, ["class", "classList", "children"])
return (
<Kobalte.Header
{...r}
data-slot="accordion-v2-header"
classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
>
<Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
{s.children}
</Kobalte.Header>
)

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

@@ -91,7 +91,9 @@ export const NoChildren = {
export const CustomTrigger = {
render: () => (
<BasicToolV2
trigger={<span style={{ color: "#161616", "font-size": "13px", "font-weight": "440" }}>Custom trigger content</span>}
trigger={
<span style={{ color: "#161616", "font-size": "13px", "font-weight": "440" }}>Custom trigger content</span>
}
>
Expandable detail for custom trigger.
</BasicToolV2>

39
packages/ui/src/v2/components/basic-tool-v2.tsx
View File

@@ -1,12 +1,5 @@
import { Collapsible } from "@kobalte/core/collapsible"
import {
type ComponentProps,
type JSX,
For,
Show,
createMemo,
splitProps,
} from "solid-js"
import { type ComponentProps, type JSX, For, Show, createMemo, splitProps } from "solid-js"
import { DiffChanges } from "./diff-changes-v2"
import { TextShimmerV2 } from "./text-shimmer-v2"
import "./basic-tool-v2.css"
@@ -39,10 +32,7 @@ export interface BasicToolV2TriggerTitle {
}
const isTriggerTitle = (val: unknown): val is BasicToolV2TriggerTitle =>
typeof val === "object" &&
val !== null &&
"title" in val &&
(typeof Node === "undefined" || !(val instanceof Node))
typeof val === "object" && val !== null && "title" in val && (typeof Node === "undefined" || !(val instanceof Node))
export interface BasicToolV2Props extends Omit<ComponentProps<"div">, "children" | "title"> {
trigger: BasicToolV2TriggerTitle | JSX.Element
@@ -95,23 +85,18 @@ export function BasicToolV2(props: BasicToolV2Props) {
[local.class ?? ""]: !!local.class,
}}
>
<Collapsible.Trigger
as="div"
role="button"
data-slot="basic-tool-v2-trigger"
>
<Collapsible.Trigger as="div" role="button" data-slot="basic-tool-v2-trigger">
<div data-slot="basic-tool-v2-labels">
<Show
when={isTriggerTitle(local.trigger) && local.trigger}
fallback={local.trigger as JSX.Element}
>
<Show when={isTriggerTitle(local.trigger) && local.trigger} fallback={local.trigger as JSX.Element}>
{(title) => (
<>
<span data-slot="basic-tool-v2-title">
<TextShimmerV2 text={title().title} active={pending()} />
</span>
<Show when={!pending() && title().subtitle}>
<span data-slot="basic-tool-v2-sep" aria-hidden="true">·</span>
<span data-slot="basic-tool-v2-sep" aria-hidden="true">
·
</span>
<span
data-slot="basic-tool-v2-subtitle"
style={local.onSubtitleClick ? { cursor: "pointer" } : undefined}
@@ -126,20 +111,14 @@ export function BasicToolV2(props: BasicToolV2Props) {
</span>
</Show>
<Show when={!pending() && title().args?.length}>
<For each={title().args}>
{(arg) => (
<span data-slot="basic-tool-v2-arg">{arg}</span>
)}
</For>
<For each={title().args}>{(arg) => <span data-slot="basic-tool-v2-arg">{arg}</span>}</For>
</Show>
<Show when={!pending() && title().changes}>
<span data-slot="basic-tool-v2-diff">
<DiffChanges changes={title().changes!} />
</span>
</Show>
<Show when={!pending() && title().action}>
{(action) => action()}
</Show>
<Show when={!pending() && title().action}>{(action) => action()}</Show>
</>
)}
</Show>

12
packages/ui/src/v2/components/button-v2.css
View File

@@ -102,14 +102,22 @@
[data-component="button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
background-image:
linear-gradient(90deg, var(--overlay-simple-overlay-contrast-hover) 0%, var(--overlay-simple-overlay-contrast-hover) 100%),
linear-gradient(
90deg,
var(--overlay-simple-overlay-contrast-hover) 0%,
var(--overlay-simple-overlay-contrast-hover) 100%
),
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
linear-gradient(90deg, var(--background-bg-contrast) 0%, var(--background-bg-contrast) 100%);
}
[data-component="button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
background-image:
linear-gradient(90deg, var(--overlay-simple-overlay-contrast-pressed) 0%, var(--overlay-simple-overlay-contrast-pressed) 100%),
linear-gradient(
90deg,
var(--overlay-simple-overlay-contrast-pressed) 0%,
var(--overlay-simple-overlay-contrast-pressed) 100%
),
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
linear-gradient(90deg, var(--background-bg-contrast) 0%, var(--background-bg-contrast) 100%);
}

47
packages/ui/src/v2/components/button-v2.stories.tsx
View File

@@ -1,4 +1,4 @@
import { ButtonV2 } from "./button-v2";
import { ButtonV2 } from "./button-v2"
const docs = `### Overview
Button v2 with three visual variants and two sizes.
@@ -12,7 +12,7 @@ Button v2 with three visual variants and two sizes.
### States
- default, hover, pressed, focus, disabled.
- State selectors are available via pseudo-classes and \`[data-state]\`.
`;
`
export default {
title: "UI V2/Button",
@@ -46,9 +46,9 @@ export default {
options: ["normal", "large"],
},
},
};
}
export const Playground = {};
export const Playground = {}
export const Variants = {
render: () => (
@@ -65,7 +65,7 @@ export const Variants = {
<ButtonV2 variant="ghost">Ghost</ButtonV2>
</div>
),
};
}
export const Sizes = {
render: () => (
@@ -88,7 +88,7 @@ export const Sizes = {
</ButtonV2>
</div>
),
};
}
export const Icon = {
render: () => (
@@ -100,40 +100,21 @@ export const Icon = {
"flex-wrap": "wrap",
}}
>
<ButtonV2
variant="neutral"
size="normal"
icon="plus"
>
<ButtonV2 variant="neutral" size="normal" icon="plus">
Normal
</ButtonV2>
<ButtonV2
variant="contrast"
size="large"
icon="plus"
>
<ButtonV2 variant="contrast" size="large" icon="plus">
Large
</ButtonV2>
</div>
),
};
}
export const AllStates = {
render: () => {
const variants = [
"neutral",
"contrast",
"ghost",
] as const;
const states = [
"default",
"hover",
"pressed",
"focus",
"disabled",
] as const;
const toTitleCase = (value: string) =>
value.charAt(0).toUpperCase() + value.slice(1);
const variants = ["neutral", "contrast", "ghost"] as const
const states = ["default", "hover", "pressed", "focus", "disabled"] as const
const toTitleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)
return (
<div style={{ display: "grid", gap: "12px" }}>
{variants.map((variant) => (
@@ -161,6 +142,6 @@ export const AllStates = {
</div>
))}
</div>
);
)
},
};
}

14
packages/ui/src/v2/components/checkbox-v2.css
View File

@@ -62,9 +62,7 @@
border: none;
box-shadow: inset 0 0 0 0.5px var(--border-border-strong);
background:
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
background: linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
transition:
background 170ms ease-out,
opacity 170ms ease-out,
@@ -135,8 +133,7 @@
[data-slot="checkbox-v2-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
}
[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
@@ -144,9 +141,7 @@
}
[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
background:
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
var(--background-bg-accent);
background: linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
}
[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
@@ -155,8 +150,7 @@
[data-slot="checkbox-v2-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
var(--background-bg-accent);
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
}
[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))

8
packages/ui/src/v2/components/checkbox-v2.stories.tsx
View File

@@ -86,13 +86,7 @@ export const States = {
<CheckboxV2 name="s4" disabled label="Disabled" />
<CheckboxV2 name="s5" disabled defaultChecked label="Checked disabled" />
<CheckboxV2 name="s6" disabled indeterminate label="Indeterminate disabled" />
<CheckboxV2
name="s7"
label="Invalid"
description="Must be checked."
required
validationState="invalid"
/>
<CheckboxV2 name="s7" label="Invalid" description="Must be checked." required validationState="invalid" />
</div>
),
}

4
packages/ui/src/v2/components/checkbox-v2.tsx
View File

@@ -54,9 +54,7 @@ export function CheckboxV2(props: CheckboxV2Props) {
<div data-slot="checkbox-v2-text">
<span data-slot="checkbox-v2-label-text">{local.label}</span>
<Show when={local.description}>
{(description) => (
<span data-slot="checkbox-v2-description">{description()}</span>
)}
{(description) => <span data-slot="checkbox-v2-description">{description()}</span>}
</Show>
</div>
</Kobalte.Label>

8
packages/ui/src/v2/components/dialog-v2.css
View File

@@ -64,23 +64,23 @@
[data-slot="dialog-title"] {
margin: 0;
font-family: 'Inter', var(--font-family-sans);
font-family: "Inter", var(--font-family-sans);
font-weight: 530;
font-size: 15px;
line-height: 100%;
letter-spacing: -0.13px;
color: var(--text-text-base);
font-variation-settings: 'slnt' 0;
font-variation-settings: "slnt" 0;
}
[data-slot="dialog-description"] {
font-family: 'Inter', var(--font-family-sans);
font-family: "Inter", var(--font-family-sans);
font-weight: 440;
font-size: 13px;
line-height: 100%;
letter-spacing: -0.04px;
color: var(--text-text-muted);
font-variation-settings: 'slnt' 0;
font-variation-settings: "slnt" 0;
}
[data-slot="dialog-close-button"] {

6
packages/ui/src/v2/components/dialog-v2.stories.tsx
View File

@@ -103,7 +103,11 @@ export const CustomAction = {
<Dialog
title="Custom action"
description="Dialog with a custom header action"
action={<ButtonV2 variant="neutral" size="small">Help</ButtonV2>}
action={
<ButtonV2 variant="neutral" size="small">
Help
</ButtonV2>
}
>
Dialog body content.
</Dialog>

40
packages/ui/src/v2/components/dialog-v2.tsx
View File

@@ -17,27 +17,14 @@ export function DialogFooter(props: ParentProps) {
}
export function Dialog(props: DialogProps) {
const [local] = splitProps(props, [
"title",
"description",
"action",
"size",
"class",
"classList",
"fit",
"children",
])
const [local] = splitProps(props, ["title", "description", "action", "size", "class", "classList", "fit", "children"])
const title = children(() => local.title)
const description = children(() => local.description)
const action = children(() => local.action)
const hasHeader = () => title() || action()
return (
<div
data-component="dialog"
data-fit={local.fit ? true : undefined}
data-size={local.size || "normal"}
>
<div data-component="dialog" data-fit={local.fit ? true : undefined} data-size={local.size || "normal"}>
<div data-slot="dialog-container">
<Kobalte.Content
data-slot="dialog-content"
@@ -58,19 +45,26 @@ export function Dialog(props: DialogProps) {
<Show when={hasHeader()}>
<div data-slot="dialog-header">
<div data-slot="dialog-title-group">
<Show when={title()}>
{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}
</Show>
<Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
<Show when={description()}>
{(d) => (
<Kobalte.Description data-slot="dialog-description">{d()}</Kobalte.Description>
)}
{(d) => <Kobalte.Description data-slot="dialog-description">{d()}</Kobalte.Description>}
</Show>
</div>
<Show when={action()}>{(a) => a()}</Show>
<Kobalte.CloseButton data-slot="dialog-close-button" aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436" stroke="#808080" stroke-linejoin="round" />
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436"
stroke="#808080"
stroke-linejoin="round"
/>
</svg>
</Kobalte.CloseButton>
</div>

7
packages/ui/src/v2/components/field-v2.stories.tsx
View File

@@ -125,12 +125,7 @@ export const Controlled = {
<Field>
<Field.Label>Amount</Field.Label>
<Field.Control>
<TextInputV2
placeholder="0.00"
value={value()}
onInput={(e) => setValue(e.currentTarget.value)}
numeric
/>
<TextInputV2 placeholder="0.00" value={value()} onInput={(e) => setValue(e.currentTarget.value)} numeric />
</Field.Control>
<Field.Suffix>{value() ? `Entered: ${value()}` : "Suffix"}</Field.Suffix>
</Field>

14
packages/ui/src/v2/components/field-v2.tsx
View File

@@ -82,10 +82,7 @@ function FieldV2Root(props: ParentProps<FieldV2Props>) {
const root = rootRef
if (!root) return
const control = root.querySelector(CONTROL_SELECTOR) as
| HTMLInputElement
| HTMLTextAreaElement
| null
const control = root.querySelector(CONTROL_SELECTOR) as HTMLInputElement | HTMLTextAreaElement | null
if (!control) return
const shell = control.closest(
@@ -142,14 +139,7 @@ function FieldV2Root(props: ParentProps<FieldV2Props>) {
function FieldLabelInfoIcon() {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
fill-rule="evenodd"
clip-rule="evenodd"

13
packages/ui/src/v2/components/inline-input-v2.css
View File

@@ -10,9 +10,7 @@
border-radius: 6px;
outline: 1px solid transparent;
outline-offset: 0;
background:
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
box-shadow: var(--elevation-button-neutral);
flex: none;
align-self: stretch;
@@ -30,8 +28,7 @@
[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
}
[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within)
@@ -177,11 +174,13 @@
outline: none;
}
[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
[data-component="inline-input-v2"]
[data-slot="inline-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
background-color: var(--overlay-simple-overlay-hover);
}
[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
[data-component="inline-input-v2"]
[data-slot="inline-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
background-color: var(--overlay-simple-overlay-pressed);
}

4
packages/ui/src/v2/components/keybind-v2.css
View File

@@ -53,14 +53,14 @@
padding: 0px;
flex: 1 1 auto;
align-self: stretch;
font-family: 'Inter', var(--font-family-sans), var(--sans), system-ui, sans-serif;
font-family: "Inter", var(--font-family-sans), var(--sans), system-ui, sans-serif;
font-style: normal;
font-weight: 530;
font-size: 11px;
line-height: 100%;
text-align: center;
letter-spacing: 0.05px;
font-variation-settings: 'slnt' 0;
font-variation-settings: "slnt" 0;
user-select: none;
}

4
packages/ui/src/v2/components/line-comment-v2.css
View File

@@ -154,9 +154,7 @@
resize: vertical;
border: 1px solid var(--border-border-base);
border-radius: 6px;
background:
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
font-family: inherit;
font-size: 13px;
font-style: normal;

6
packages/ui/src/v2/components/line-comment-v2.stories.tsx
View File

@@ -1,10 +1,6 @@
// @ts-nocheck
import { createSignal } from "solid-js"
import {
LineCommentEditorV2,
LineCommentV2,
LineCommentV2OverflowIcon,
} from "./line-comment-v2"
import { LineCommentEditorV2, LineCommentV2, LineCommentV2OverflowIcon } from "./line-comment-v2"
const docs = `### Overview
Line comment **display** and **editor** cards aligned with OpenCode line-comment specs (raised \`#FAFAFA\` surface, footer line context, \`ButtonV2\` neutral + contrast actions).

15
packages/ui/src/v2/components/line-comment-v2.tsx
View File

@@ -47,16 +47,13 @@ export function LineCommentV2(props: LineCommentV2Props) {
<div data-slot="line-comment-v2-text">{local.comment}</div>
<div data-slot="line-comment-v2-meta">{local.selection}</div>
</div>
<Show when={local.actions}>
{(actions) => <div data-slot="line-comment-v2-tools">{actions()}</div>}
</Show>
<Show when={local.actions}>{(actions) => <div data-slot="line-comment-v2-tools">{actions()}</div>}</Show>
</div>
</div>
)
}
export interface LineCommentEditorV2Props
extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
/** Visible field label above the textarea (default: “Comment”). */
heading?: JSX.Element | string
value: string
@@ -147,13 +144,7 @@ export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
<ButtonV2 type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
{local.cancelLabel ?? "Cancel"}
</ButtonV2>
<ButtonV2
type="button"
size="normal"
variant="contrast"
disabled={!canSubmit()}
onClick={submit}
>
<ButtonV2 type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
{local.submitLabel ?? "Comment"}
</ButtonV2>
</div>

8
packages/ui/src/v2/components/menu-v2.css
View File

@@ -11,7 +11,7 @@
box-shadow: var(--elevation-floating);
outline: none;
font-family: var(--font-family-sans), 'Inter', system-ui, sans-serif;
font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -52,8 +52,8 @@
cursor: default;
user-select: none;
font-family: var(--font-family-sans), 'Inter', system-ui, sans-serif;
font-variation-settings: 'slnt' 0;
font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
font-variation-settings: "slnt" 0;
font-variant-numeric: tabular-nums;
color: var(--menu-v2-fg);
@@ -164,7 +164,7 @@
height: 28px;
padding: 0 12px;
font-family: var(--font-family-sans), 'Inter', system-ui, sans-serif;
font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
font-size: 11px;
font-weight: 530;
line-height: 100%;

23
packages/ui/src/v2/components/menu-v2.tsx
View File

@@ -18,14 +18,7 @@ const ChevronRight: Component = () => (
)
const CheckMark: Component = () => (
<svg
width="14"
height="14"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M3.53564 8.17857L6.39279 11.75L12.4642 4.25"
stroke="currentColor"
@@ -46,12 +39,8 @@ function ItemBody(
return (
<>
<span data-slot="menu-v2-item-content">{props.children}</span>
<Show when={props.shortcut}>
{(shortcut) => <span data-slot="menu-v2-item-shortcut">{shortcut()}</span>}
</Show>
<Show when={props.badge}>
{(badge) => <span data-slot="menu-v2-item-badge">{badge()}</span>}
</Show>
<Show when={props.shortcut}>{(shortcut) => <span data-slot="menu-v2-item-shortcut">{shortcut()}</span>}</Show>
<Show when={props.badge}>{(badge) => <span data-slot="menu-v2-item-badge">{badge()}</span>}</Show>
{props.trailing}
</>
)
@@ -65,11 +54,7 @@ export interface MenuV2ItemProps extends ComponentProps<typeof DropdownMenu.Item
function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
return (
<DropdownMenu.Item
{...r}
data-component="menu-v2-item"
classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
>
<DropdownMenu.Item {...r} data-component="menu-v2-item" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
<ItemBody shortcut={s.shortcut} badge={s.badge}>
{s.children}
</ItemBody>

13
packages/ui/src/v2/components/radio-v2.css
View File

@@ -91,9 +91,7 @@
border: none;
box-shadow: inset 0 0 0 0.5px var(--border-border-strong);
background:
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
background: linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
transition:
background 170ms ease-out,
opacity 170ms ease-out,
@@ -112,8 +110,7 @@
[data-slot="radio-v2-item-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
}
&:where([data-disabled]) [data-slot="radio-v2-item-control"] {
@@ -122,16 +119,14 @@
&:where([data-checked]) [data-slot="radio-v2-item-control"] {
background:
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
var(--background-bg-accent);
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
}
&:where([data-checked]):where(:hover):where(:not([data-disabled], [data-readonly]))
[data-slot="radio-v2-item-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
var(--background-bg-accent);
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
}
&:where([data-checked][data-disabled]) [data-slot="radio-v2-item-control"] {

8
packages/ui/src/v2/components/radio-v2.stories.tsx
View File

@@ -45,12 +45,7 @@ export const Controlled = {
const [value, setValue] = createSignal("weekly")
return (
<div style={{ display: "grid", gap: "12px" }}>
<RadioGroupV2
label="Controlled"
value={value()}
onChange={(v) => setValue(v)}
name="controlled-frequency"
>
<RadioGroupV2 label="Controlled" value={value()} onChange={(v) => setValue(v)} name="controlled-frequency">
<RadioItemV2 value="daily" label="Daily" />
<RadioItemV2 value="weekly" label="Weekly" />
<RadioItemV2 value="never" label="Never" />
@@ -95,4 +90,3 @@ export const States = {
</div>
),
}

9
packages/ui/src/v2/components/radio-v2.tsx
View File

@@ -28,9 +28,7 @@ export function RadioGroupV2(props: RadioGroupV2Props) {
)}
</Show>
<Show when={local.description}>
{(description) => (
<Kobalte.Description data-slot="radio-v2-description">{description()}</Kobalte.Description>
)}
{(description) => <Kobalte.Description data-slot="radio-v2-description">{description()}</Kobalte.Description>}
</Show>
<div data-slot="radio-v2-items">{local.children}</div>
<Kobalte.ErrorMessage data-slot="radio-v2-error" />
@@ -65,13 +63,10 @@ export function RadioItemV2(props: RadioItemV2Props) {
<div data-slot="radio-v2-item-text">
<span data-slot="radio-v2-item-label-text">{local.label}</span>
<Show when={local.description}>
{(description) => (
<span data-slot="radio-v2-item-description">{description()}</span>
)}
{(description) => <span data-slot="radio-v2-item-description">{description()}</span>}
</Show>
</div>
</Kobalte.ItemLabel>
</Kobalte.Item>
)
}

32
packages/ui/src/v2/components/segmented-control-v2.tsx
View File

@@ -59,7 +59,7 @@ export function SegmentedControlV2(props: SegmentedControlV2Props) {
const [internal, setInternal] = createSignal<string | null>(local.defaultValue ?? null)
const selected = createMemo(() => (isControlled() ? local.value ?? null : internal()))
const selected = createMemo(() => (isControlled() ? (local.value ?? null) : internal()))
const setSelected = (next: string | null) => {
if (!isControlled()) setInternal(next)
@@ -78,9 +78,9 @@ export function SegmentedControlV2(props: SegmentedControlV2Props) {
const focusNext = (from: HTMLButtonElement, direction: 1 | -1) => {
const root = from.closest(`[data-slot="segmented-control-v2"]`)
if (!root) return
const buttons = Array.from(root.querySelectorAll<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]`)).filter(
(b) => !b.disabled,
)
const buttons = Array.from(
root.querySelectorAll<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]`),
).filter((b) => !b.disabled)
const i = buttons.indexOf(from)
const next = buttons[i + direction]
next?.focus()
@@ -134,7 +134,15 @@ function invokeButtonHandler<E extends Event>(
export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
const merged = mergeProps({ disabled: false }, props)
const [local, rest] = splitProps(merged, ["class", "classList", "children", "value", "disabled", "onClick", "onKeyDown"])
const [local, rest] = splitProps(merged, [
"class",
"classList",
"children",
"value",
"disabled",
"onClick",
"onKeyDown",
])
const ctx = useSegmentedControlContext()
const pressed = createMemo(() => ctx.selected() === local.value)
@@ -151,25 +159,29 @@ export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
invokeButtonHandler(local.onKeyDown, e)
if (e.defaultPrevented || disabled()) return
const t = e.currentTarget
if (e.key === "ArrowRight") {
e.preventDefault()
ctx.focusNext(t, 1)
} else if (e.key === "ArrowLeft") {
e.preventDefault()
ctx.focusNext(t, -1)
}
}
// accessibility stuff
else if (e.key === "Home") {
e.preventDefault()
const root = t.closest(`[data-slot="segmented-control-v2"]`)
const first = root?.querySelector<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]:not(:disabled)`)
const first = root?.querySelector<HTMLButtonElement>(
`button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
)
first?.focus()
} else if (e.key === "End") {
e.preventDefault()
const root = t.closest(`[data-slot="segmented-control-v2"]`)
const buttons = root?.querySelectorAll<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]:not(:disabled)`)
const buttons = root?.querySelectorAll<HTMLButtonElement>(
`button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
)
const last = buttons?.[buttons.length - 1]
last?.focus()
}

16
packages/ui/src/v2/components/select-v2.css
View File

@@ -46,9 +46,7 @@
border-radius: 6px;
outline: 1px solid transparent;
outline-offset: 0;
background:
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
box-shadow: var(--elevation-button-neutral);
flex: none;
align-self: stretch;
@@ -63,11 +61,12 @@
padding: 0 8px 0 0;
}
[data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not([data-expanded]) {
[data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
[data-expanded]
) {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
}
[data-component="select-v2"]:where(:focus-within):not([data-disabled], [data-invalid]),
@@ -189,6 +188,9 @@
color: var(--menu-v2-accent);
}
[data-slot="select-v2-listbox"] [data-component="menu-v2-item"]:not([data-selected]) [data-slot="menu-v2-item-indicator"] svg {
[data-slot="select-v2-listbox"]
[data-component="menu-v2-item"]:not([data-selected])
[data-slot="menu-v2-item-indicator"]
svg {
visibility: hidden;
}

25
packages/ui/src/v2/components/select-v2.tsx
View File

@@ -1,12 +1,5 @@
import { Select as Kobalte } from "@kobalte/core/select"
import {
Show,
createMemo,
onCleanup,
splitProps,
type ComponentProps,
type JSX,
} from "solid-js"
import { Show, createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
import "./select-v2.css"
function groupOptions<T>(options: T[], groupBy?: (x: T) => string): { category: string; options: T[] }[] {
@@ -49,14 +42,7 @@ const CheckSmall = () => (
export type SelectV2Props<T> = Omit<
ComponentProps<typeof Kobalte<T, { category: string; options: T[] }>>,
| "value"
| "onChange"
| "children"
| "options"
| "itemComponent"
| "sectionComponent"
| "defaultValue"
| "multiple"
"value" | "onChange" | "children" | "options" | "itemComponent" | "sectionComponent" | "defaultValue" | "multiple"
> & {
placeholder?: string
options: T[]
@@ -163,7 +149,7 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
</Kobalte.Item>
)}
onChange={(next) => {
const v = next == null ? null : (Array.isArray(next) ? (next[0] as T) ?? null : (next as T))
const v = next == null ? null : Array.isArray(next) ? ((next[0] as T) ?? null) : (next as T)
local.onSelect?.(v)
stop()
}}
@@ -199,10 +185,7 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
</span>
</Kobalte.Trigger>
<Kobalte.Portal>
<Kobalte.Content
data-component="menu-v2-content"
data-slot="select-v2-content"
>
<Kobalte.Content data-component="menu-v2-content" data-slot="select-v2-content">
<Kobalte.Listbox data-slot="select-v2-listbox" />
</Kobalte.Content>
</Kobalte.Portal>

24
packages/ui/src/v2/components/switch-v2.css
View File

@@ -29,8 +29,7 @@
border-radius: 4px;
border: none;
background:
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%),
var(--background-bg-layer-03);
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%), var(--background-bg-layer-03);
box-shadow: var(--elevation-switch-off);
transition:
background 90ms ease-out,
@@ -46,7 +45,11 @@
border-radius: 2px;
border: 0.5px solid var(--overlay-gradient-depth-overlay-depth-top);
background:
linear-gradient(180deg, var(--overlay-gradient-depth-overlay-depth-top) 0%, var(--overlay-gradient-depth-overlay-depth-bot) 100%),
linear-gradient(
180deg,
var(--overlay-gradient-depth-overlay-depth-top) 0%,
var(--overlay-gradient-depth-overlay-depth-bot) 100%
),
var(--grey-200);
box-shadow: var(--elevation-elements);
transition:
@@ -87,8 +90,7 @@
&:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%),
var(--background-bg-layer-03);
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%), var(--background-bg-layer-03);
}
&:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
@@ -103,8 +105,7 @@
&[data-checked] [data-slot="switch-control"] {
background:
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%),
var(--background-bg-accent);
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%), var(--background-bg-accent);
box-shadow: var(--elevation-switch-on);
}
@@ -112,15 +113,18 @@
transform: translateX(8px);
border-radius: 2px;
background:
linear-gradient(180deg, var(--overlay-gradient-depth-overlay-depth-top) 0%, var(--overlay-gradient-depth-overlay-depth-bot) 100%),
linear-gradient(
180deg,
var(--overlay-gradient-depth-overlay-depth-top) 0%,
var(--overlay-gradient-depth-overlay-depth-bot) 100%
),
var(--grey-300);
}
&[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%),
var(--background-bg-accent);
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%), var(--background-bg-accent);
}
&[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {

21
packages/ui/src/v2/components/tabs-v2.css
View File

@@ -128,16 +128,19 @@
padding: 6px;
}
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not([data-selected]) {
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not([data-selected]) {
color: var(--text-text-base);
}
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
border-bottom-color: var(--text-text-faint);
color: var(--text-text-base);
}
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"]:not(:has([data-selected])) {
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:not(:has([data-selected])) {
color: var(--text-text-muted);
}
@@ -157,13 +160,15 @@
border: 0.5px solid transparent;
}
[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
background-color: var(--background-bg-layer-01);
color: var(--text-text-base);
border: 0.5px solid var(--border-border-muted);
}
[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
background-color: var(--background-bg-layer-02);
color: var(--text-text-base);
border: 0.5px solid var(--border-border-muted);
@@ -205,11 +210,13 @@
padding: 0 6px;
}
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
[data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
color: var(--text-text-base);
}
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
[data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
background-color: var(--background-bg-layer-02);
color: var(--text-text-base);
border: 0.5px solid var(--border-border-muted);

4
packages/ui/src/v2/components/tabs-v2.stories.tsx
View File

@@ -80,10 +80,10 @@ export const Settings = {
</mod.TabsV2.Trigger>
</mod.TabsV2.List>
<mod.TabsV2.Content value="general">
<p class="text-[12px] text-[#5c5c5c] mx-4 my-3.5">General settings</p>
<p class="text-[12px] text-[#5c5c5c] mx-4 my-3.5">General settings</p>
</mod.TabsV2.Content>
<mod.TabsV2.Content value="appearance">
<p class="text-[12px] text-[#5c5c5c] mx-4 my-3.5">Appearance settings</p>
<p class="text-[12px] text-[#5c5c5c] mx-4 my-3.5">Appearance settings</p>
</mod.TabsV2.Content>
</mod.TabsV2>
),

6
packages/ui/src/v2/components/tabs-v2.tsx
View File

@@ -69,11 +69,7 @@ function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
}
}}
>
<Kobalte.Trigger
{...rest}
data-slot="tabs-v2-trigger"
data-value={props.value}
>
<Kobalte.Trigger {...rest} data-slot="tabs-v2-trigger" data-value={props.value}>
<span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
{split.children}
<Show when={split.subtext}>

13
packages/ui/src/v2/components/text-input-v2.css
View File

@@ -11,9 +11,7 @@
border-radius: 6px;
outline: 1px solid transparent;
outline-offset: 0;
background:
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
box-shadow: var(--elevation-button-neutral);
flex: none;
align-self: stretch;
@@ -30,8 +28,7 @@
[data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
}
[data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
@@ -107,11 +104,13 @@
outline: none;
}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
[data-component="text-input-v2"]
[data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
background-color: var(--overlay-simple-overlay-hover);
}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
[data-component="text-input-v2"]
[data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
background-color: var(--overlay-simple-overlay-pressed);
}

6
packages/ui/src/v2/components/text-input-v2.stories.tsx
View File

@@ -82,11 +82,7 @@ export const Controlled = {
const [value, setValue] = createSignal("Controlled value")
return (
<div style={{ display: "grid", gap: "12px" }}>
<TextInputV2
value={value()}
onInput={(e) => setValue(e.currentTarget.value)}
placeholder="Type here…"
/>
<TextInputV2 value={value()} onInput={(e) => setValue(e.currentTarget.value)} placeholder="Type here…" />
<div
style={{
"font-family": "var(--font-family-sans)",

11
packages/ui/src/v2/components/text-shimmer-v2.stories.tsx
View File

@@ -52,7 +52,16 @@ export const Inactive = {
export const WithOffset = {
render: () => (
<div style={{ display: "flex", "flex-direction": "column", gap: "8px", "font-size": "13px", "font-weight": "440", "font-family": "Inter, system-ui, sans-serif" }}>
<div
style={{
display: "flex",
"flex-direction": "column",
gap: "8px",
"font-size": "13px",
"font-weight": "440",
"font-family": "Inter, system-ui, sans-serif",
}}
>
<TextShimmerV2 text="First line" active={true} offset={0} />
<TextShimmerV2 text="Second line" active={true} offset={5} />
<TextShimmerV2 text="Third line" active={true} offset={10} />

7
packages/ui/src/v2/components/textarea-v2.css
View File

@@ -10,9 +10,7 @@
border-radius: 6px;
outline: 1px solid transparent;
outline-offset: 0;
background:
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
box-shadow: var(--elevation-button-neutral);
flex: none;
align-self: stretch;
@@ -25,8 +23,7 @@
[data-component="textarea-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
var(--background-bg-base);
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
}
[data-component="textarea-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {

6
packages/ui/src/v2/components/textarea-v2.stories.tsx
View File

@@ -63,11 +63,7 @@ export const Controlled = {
const [value, setValue] = createSignal("Controlled value")
return (
<div style={{ display: "grid", gap: "12px", width: "280px" }}>
<TextareaV2
value={value()}
onInput={(e) => setValue(e.currentTarget.value)}
placeholder="Type here…"
/>
<TextareaV2 value={value()} onInput={(e) => setValue(e.currentTarget.value)} placeholder="Type here…" />
<div
style={{
"font-family": "var(--font-family-sans)",

8
packages/ui/src/v2/components/textarea-v2.tsx
View File

@@ -7,13 +7,7 @@ export interface TextareaV2Props extends ComponentProps<"textarea"> {
}
export function TextareaV2(props: TextareaV2Props) {
const [local, textareaProps] = splitProps(props, [
"class",
"classList",
"invalid",
"disabled",
"rows",
])
const [local, textareaProps] = splitProps(props, ["class", "classList", "invalid", "disabled", "rows"])
return (
<div

2
packages/ui/src/v2/components/toast-v2.css
View File

@@ -55,7 +55,6 @@
animation: toastV2PopOut 100ms ease-in forwards;
}
[data-slot="toast-v2-header"] {
display: flex;
align-items: flex-start;
@@ -177,7 +176,6 @@
display: block;
}
}
}
@keyframes toastV2PopIn {

88
packages/ui/src/v2/components/toast-v2.stories.tsx
View File

@@ -1,5 +1,5 @@
import * as mod from "./toast-v2";
import { ButtonV2 } from "./button-v2";
import * as mod from "./toast-v2"
import { ButtonV2 } from "./button-v2"
const docs = `### Overview
Toast notifications with optional icons, actions, and progress.
@@ -24,7 +24,7 @@ Use brief titles/descriptions; limit actions to 1-2.
### Theming/tokens
- Uses \`data-component="toast-v2"\` and slot data attributes.
`;
`
export default {
title: "UI V2/Toast",
@@ -40,7 +40,7 @@ export default {
},
},
},
};
}
export const AllExamples = {
render: () => (
@@ -54,21 +54,12 @@ export const AllExamples = {
title: "Download started...",
description: "23% · 2 min left",
icon: (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.5554 10.4453V13.5564H11.7777H4.22211C3.23989 13.5564 2.44434 13.5564 2.44434 13.5564V10.4453"
stroke="var(--icon-icon-base)"
/>
<path
d="M4.88867 6L7.99978 9.11111L11.1109 6"
stroke="var(--icon-icon-base)"
/>
<path d="M4.88867 6L7.99978 9.11111L11.1109 6" stroke="var(--icon-icon-base)" />
<path d="M8 9.11198V2.44531" stroke="var(--icon-icon-base)" />
</svg>
),
@@ -93,21 +84,12 @@ export const AllExamples = {
title: "Saved",
description: "Your changes are stored",
icon: (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.00011 14.4436C11.5593 14.4436 14.4446 11.5583 14.4446 7.99913C14.4446 4.43996 11.5593 1.55469 8.00011 1.55469C4.44094 1.55469 1.55566 4.43996 1.55566 7.99913C1.55566 11.5583 4.44094 14.4436 8.00011 14.4436Z"
stroke="#198B43"
/>
<path
d="M5.11133 8.22135L7.11133 10.4436L10.8891 5.55469"
stroke="#198B43"
/>
<path d="M5.11133 8.22135L7.11133 10.4436L10.8891 5.55469" stroke="#198B43" />
</svg>
),
})
@@ -122,49 +104,15 @@ export const AllExamples = {
mod.showToastV2({
title: "Saving...",
icon: (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="8.75" y="5.25" width="2" height="2" fill="#3A3A3A" />
<rect x="8.75" y="8.75" width="2" height="2" fill="#3A3A3A" />
<rect x="8.75" y="12.25" width="2" height="2" fill="#3A3A3A" />
<rect x="5.25" y="12.25" width="2" height="2" fill="#3A3A3A" />
<rect
opacity="0.3"
x="5.25"
y="1.75"
width="2"
height="2"
fill="#3A3A3A"
/>
<rect
opacity="0.3"
x="5.25"
y="5.25"
width="2"
height="2"
fill="#3A3A3A"
/>
<rect
opacity="0.3"
x="5.25"
y="8.75"
width="2"
height="2"
fill="#3A3A3A"
/>
<rect
opacity="0.3"
x="8.75"
y="1.75"
width="2"
height="2"
fill="#3A3A3A"
/>
<rect opacity="0.3" x="5.25" y="1.75" width="2" height="2" fill="#3A3A3A" />
<rect opacity="0.3" x="5.25" y="5.25" width="2" height="2" fill="#3A3A3A" />
<rect opacity="0.3" x="5.25" y="8.75" width="2" height="2" fill="#3A3A3A" />
<rect opacity="0.3" x="8.75" y="1.75" width="2" height="2" fill="#3A3A3A" />
</svg>
),
persistent: true,
@@ -181,13 +129,7 @@ export const AllExamples = {
title: "Unsaved changes",
description: "You have made 4 edits...",
icon: (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 6.33334V8.99392M7.78099 10.9934H8.23448M8 2L1.5 13H14.5L8 2Z"
stroke="#CB9F34"
@@ -206,4 +148,4 @@ export const AllExamples = {
</ButtonV2>
</div>
),
};
}

6
packages/ui/src/v2/components/toast-v2.tsx
View File

@@ -59,11 +59,7 @@ function ToastV2Actions(props: ComponentProps<"div">) {
function ToastV2CloseButton(props: ToastCloseButtonProps & ComponentProps<"button">) {
return (
<Kobalte.CloseButton
data-slot="toast-v2-close-button"
aria-label="Dismiss"
{...props}
>
<Kobalte.CloseButton data-slot="toast-v2-close-button" aria-label="Dismiss" {...props}>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4.25 11.75L11.75 4.25" stroke="#FAFAFA" />
<path d="M11.75 11.75L4.25 4.25" stroke="#FAFAFA" />

14
packages/ui/src/v2/components/tool-error-card-v2.tsx
View File

@@ -1,11 +1,5 @@
import { Collapsible } from "@kobalte/core/collapsible"
import {
type ComponentProps,
type JSX,
Show,
createMemo,
splitProps,
} from "solid-js"
import { type ComponentProps, type JSX, Show, createMemo, splitProps } from "solid-js"
import "./tool-error-card-v2.css"
function BanIcon() {
@@ -129,11 +123,7 @@ export function ToolErrorCardV2(props: ToolErrorCardV2Props) {
[local.class ?? ""]: !!local.class,
}}
>
<Collapsible.Trigger
as="div"
role="button"
data-slot="tool-error-card-trigger"
>
<Collapsible.Trigger as="div" role="button" data-slot="tool-error-card-trigger">
<span data-slot="tool-error-card-icon-wrap">
<Show when={local.loading} fallback={<BanIcon />}>
<LoaderIcon />

8
packages/ui/src/v2/components/tooltip-v2.stories.tsx
View File

@@ -59,7 +59,13 @@ export const WithKeybind = {
export const Path = {
render: () => (
<div style={{ padding: "80px", display: "flex", "justify-content": "center" }}>
<TooltipV2 value={<>Components <span style={{ color: "var(--text-text-faint)" }}>/</span> Tooltip</>}>
<TooltipV2
value={
<>
Components <span style={{ color: "var(--text-text-faint)" }}>/</span> Tooltip
</>
}
>
<span>Hover me</span>
</TooltipV2>
</div>

274
packages/ui/src/v2/styles/colors.css
View File

@@ -1,171 +1,171 @@
@layer theme {
:root {
/* ── Grey ── */
--v2-grey-100: #FFFFFFFF;
--v2-grey-200: #FAFAFAFF;
--v2-grey-300: #EEEEEEFF;
--v2-grey-400: #D4D4D4FF;
--v2-grey-500: #AEAEAEFF;
--v2-grey-600: #808080FF;
--v2-grey-700: #5C5C5CFF;
--v2-grey-800: #3A3A3AFF;
--v2-grey-900: #242424FF;
--v2-grey-1000: #161616FF;
--v2-grey-1100: #080808FF;
--v2-grey-1200: #000000FF;
--v2-grey-100: #ffffffff;
--v2-grey-200: #fafafaff;
--v2-grey-300: #eeeeeeff;
--v2-grey-400: #d4d4d4ff;
--v2-grey-500: #aeaeaeff;
--v2-grey-600: #808080ff;
--v2-grey-700: #5c5c5cff;
--v2-grey-800: #3a3a3aff;
--v2-grey-900: #242424ff;
--v2-grey-1000: #161616ff;
--v2-grey-1100: #080808ff;
--v2-grey-1200: #000000ff;
/* ── Alpha Dark ── */
--v2-alpha-dark-100: #000000FF;
--v2-alpha-dark-90: #000000E5;
--v2-alpha-dark-80: #000000CC;
--v2-alpha-dark-70: #000000B2;
--v2-alpha-dark-100: #000000ff;
--v2-alpha-dark-90: #000000e5;
--v2-alpha-dark-80: #000000cc;
--v2-alpha-dark-70: #000000b2;
--v2-alpha-dark-60: #00000099;
--v2-alpha-dark-50: #00000080;
--v2-alpha-dark-40: #00000066;
--v2-alpha-dark-30: #0000004D;
--v2-alpha-dark-24: #0000003D;
--v2-alpha-dark-30: #0000004d;
--v2-alpha-dark-24: #0000003d;
--v2-alpha-dark-20: #00000033;
--v2-alpha-dark-16: #00000029;
--v2-alpha-dark-14: #00000024;
--v2-alpha-dark-12: #0000001F;
--v2-alpha-dark-10: #0000001A;
--v2-alpha-dark-12: #0000001f;
--v2-alpha-dark-10: #0000001a;
--v2-alpha-dark-8: #00000014;
--v2-alpha-dark-6: #0000000F;
--v2-alpha-dark-4: #0000000A;
--v2-alpha-dark-6: #0000000f;
--v2-alpha-dark-4: #0000000a;
--v2-alpha-dark-2: #00000005;
--v2-alpha-dark-0: #00000000;
/* ── Alpha Light ── */
--v2-alpha-light-100: #FFFFFFFF;
--v2-alpha-light-90: #FFFFFFE5;
--v2-alpha-light-80: #FFFFFFCC;
--v2-alpha-light-70: #FFFFFFB2;
--v2-alpha-light-60: #FFFFFF99;
--v2-alpha-light-50: #FFFFFF80;
--v2-alpha-light-40: #FFFFFF66;
--v2-alpha-light-30: #FFFFFF4D;
--v2-alpha-light-24: #FFFFFF3D;
--v2-alpha-light-20: #FFFFFF33;
--v2-alpha-light-16: #FFFFFF29;
--v2-alpha-light-14: #FFFFFF24;
--v2-alpha-light-12: #FFFFFF1F;
--v2-alpha-light-10: #FFFFFF1A;
--v2-alpha-light-8: #FFFFFF14;
--v2-alpha-light-6: #FFFFFF0F;
--v2-alpha-light-4: #FFFFFF0A;
--v2-alpha-light-2: #FFFFFF05;
--v2-alpha-light-0: #FFFFFF00;
--v2-alpha-light-100: #ffffffff;
--v2-alpha-light-90: #ffffffe5;
--v2-alpha-light-80: #ffffffcc;
--v2-alpha-light-70: #ffffffb2;
--v2-alpha-light-60: #ffffff99;
--v2-alpha-light-50: #ffffff80;
--v2-alpha-light-40: #ffffff66;
--v2-alpha-light-30: #ffffff4d;
--v2-alpha-light-24: #ffffff3d;
--v2-alpha-light-20: #ffffff33;
--v2-alpha-light-16: #ffffff29;
--v2-alpha-light-14: #ffffff24;
--v2-alpha-light-12: #ffffff1f;
--v2-alpha-light-10: #ffffff1a;
--v2-alpha-light-8: #ffffff14;
--v2-alpha-light-6: #ffffff0f;
--v2-alpha-light-4: #ffffff0a;
--v2-alpha-light-2: #ffffff05;
--v2-alpha-light-0: #ffffff00;
/* ── Red ── */
--v2-red-100: #FCECEBFF;
--v2-red-200: #F6D5D3FF;
--v2-red-300: #F2BBB7FF;
--v2-red-400: #F29B96FF;
--v2-red-500: #F17471FF;
--v2-red-600: #F1484FFF;
--v2-red-700: #D92E3CFF;
--v2-red-800: #B82D35FF;
--v2-red-900: #97252BFF;
--v2-red-1000: #7A1F23FF;
--v2-red-1100: #5F1A1CFF;
--v2-red-1200: #461516FF;
--v2-red-100: #fcecebff;
--v2-red-200: #f6d5d3ff;
--v2-red-300: #f2bbb7ff;
--v2-red-400: #f29b96ff;
--v2-red-500: #f17471ff;
--v2-red-600: #f1484fff;
--v2-red-700: #d92e3cff;
--v2-red-800: #b82d35ff;
--v2-red-900: #97252bff;
--v2-red-1000: #7a1f23ff;
--v2-red-1100: #5f1a1cff;
--v2-red-1200: #461516ff;
/* ── Orange ── */
--v2-orange-100: #FDF2EDFF;
--v2-orange-200: #FFE7DCFF;
--v2-orange-300: #FFD8C6FF;
--v2-orange-400: #FFC1A4FF;
--v2-orange-500: #FFA478FF;
--v2-orange-600: #FF8648FF;
--v2-orange-700: #EE7330FF;
--v2-orange-800: #D16427FF;
--v2-orange-900: #B35624FF;
--v2-orange-1000: #954C27FF;
--v2-orange-1100: #723D22FF;
--v2-orange-1200: #5A2C14FF;
--v2-orange-100: #fdf2edff;
--v2-orange-200: #ffe7dcff;
--v2-orange-300: #ffd8c6ff;
--v2-orange-400: #ffc1a4ff;
--v2-orange-500: #ffa478ff;
--v2-orange-600: #ff8648ff;
--v2-orange-700: #ee7330ff;
--v2-orange-800: #d16427ff;
--v2-orange-900: #b35624ff;
--v2-orange-1000: #954c27ff;
--v2-orange-1100: #723d22ff;
--v2-orange-1200: #5a2c14ff;
/* ── Yellow ── */
--v2-yellow-100: #FEFAECFF;
--v2-yellow-200: #FCEFD0FF;
--v2-yellow-300: #F7E5B5FF;
--v2-yellow-400: #F3DA9BFF;
--v2-yellow-500: #F2CF76FF;
--v2-yellow-600: #F6C251FF;
--v2-yellow-700: #E7AF36FF;
--v2-yellow-800: #CB9F34FF;
--v2-yellow-900: #AC8833FF;
--v2-yellow-1000: #8E7231FF;
--v2-yellow-1100: #68552BFF;
--v2-yellow-1200: #4B4025FF;
--v2-yellow-100: #fefaecff;
--v2-yellow-200: #fcefd0ff;
--v2-yellow-300: #f7e5b5ff;
--v2-yellow-400: #f3da9bff;
--v2-yellow-500: #f2cf76ff;
--v2-yellow-600: #f6c251ff;
--v2-yellow-700: #e7af36ff;
--v2-yellow-800: #cb9f34ff;
--v2-yellow-900: #ac8833ff;
--v2-yellow-1000: #8e7231ff;
--v2-yellow-1100: #68552bff;
--v2-yellow-1200: #4b4025ff;
/* ── Green ── */
--v2-green-100: #E7F9EAFF;
--v2-green-200: #D0F0D5FF;
--v2-green-300: #B8E9C1FF;
--v2-green-400: #96E3A6FF;
--v2-green-500: #6BD586FF;
--v2-green-600: #49C970FF;
--v2-green-700: #2EAF5AFF;
--v2-green-800: #198B43FF;
--v2-green-900: #1D783CFF;
--v2-green-1000: #196130FF;
--v2-green-1100: #164C26FF;
--v2-green-1200: #14361DFF;
--v2-green-100: #e7f9eaff;
--v2-green-200: #d0f0d5ff;
--v2-green-300: #b8e9c1ff;
--v2-green-400: #96e3a6ff;
--v2-green-500: #6bd586ff;
--v2-green-600: #49c970ff;
--v2-green-700: #2eaf5aff;
--v2-green-800: #198b43ff;
--v2-green-900: #1d783cff;
--v2-green-1000: #196130ff;
--v2-green-1100: #164c26ff;
--v2-green-1200: #14361dff;
/* ── Cyan ── */
--v2-cyan-100: #E2F7FBFF;
--v2-cyan-200: #C4EDF4FF;
--v2-cyan-300: #A3E4EFFF;
--v2-cyan-400: #65D9EBFF;
--v2-cyan-500: #00C5DFFF;
--v2-cyan-600: #00ABCFFF;
--v2-cyan-700: #0096B8FF;
--v2-cyan-800: #007D9BFF;
--v2-cyan-900: #006C85FF;
--v2-cyan-1000: #005A6EFF;
--v2-cyan-1100: #004756FF;
--v2-cyan-1200: #00353FFF;
--v2-cyan-100: #e2f7fbff;
--v2-cyan-200: #c4edf4ff;
--v2-cyan-300: #a3e4efff;
--v2-cyan-400: #65d9ebff;
--v2-cyan-500: #00c5dfff;
--v2-cyan-600: #00abcfff;
--v2-cyan-700: #0096b8ff;
--v2-cyan-800: #007d9bff;
--v2-cyan-900: #006c85ff;
--v2-cyan-1000: #005a6eff;
--v2-cyan-1100: #004756ff;
--v2-cyan-1200: #00353fff;
/* ── Blue ── */
--v2-blue-100: #ECF1FEFF;
--v2-blue-200: #D7E2FCFF;
--v2-blue-300: #C3D4FDFF;
--v2-blue-400: #A2BCFFFF;
--v2-blue-500: #7698FDFF;
--v2-blue-600: #3B5CF6FF;
--v2-blue-700: #3250DFFF;
--v2-blue-800: #2C47C8FF;
--v2-blue-900: #263FA9FF;
--v2-blue-1000: #22388FFF;
--v2-blue-1100: #1C2E70FF;
--v2-blue-1200: #1B2852FF;
--v2-blue-100: #ecf1feff;
--v2-blue-200: #d7e2fcff;
--v2-blue-300: #c3d4fdff;
--v2-blue-400: #a2bcffff;
--v2-blue-500: #7698fdff;
--v2-blue-600: #3b5cf6ff;
--v2-blue-700: #3250dfff;
--v2-blue-800: #2c47c8ff;
--v2-blue-900: #263fa9ff;
--v2-blue-1000: #22388fff;
--v2-blue-1100: #1c2e70ff;
--v2-blue-1200: #1b2852ff;
/* ── Purple ── */
--v2-purple-100: #EBECFEFF;
--v2-purple-200: #D5D5FCFF;
--v2-purple-300: #B9B8F5FF;
--v2-purple-400: #9E99F7FF;
--v2-purple-500: #8271F8FF;
--v2-purple-600: #7152F4FF;
--v2-purple-700: #623BE2FF;
--v2-purple-800: #5230C2FF;
--v2-purple-900: #442AA1FF;
--v2-purple-1000: #361F83FF;
--v2-purple-1100: #2B1B6AFF;
--v2-purple-1200: #221358FF;
--v2-purple-100: #ebecfeff;
--v2-purple-200: #d5d5fcff;
--v2-purple-300: #b9b8f5ff;
--v2-purple-400: #9e99f7ff;
--v2-purple-500: #8271f8ff;
--v2-purple-600: #7152f4ff;
--v2-purple-700: #623be2ff;
--v2-purple-800: #5230c2ff;
--v2-purple-900: #442aa1ff;
--v2-purple-1000: #361f83ff;
--v2-purple-1100: #2b1b6aff;
--v2-purple-1200: #221358ff;
/* ── Pink ── */
--v2-pink-100: #FDECF3FF;
--v2-pink-200: #F7D5E4FF;
--v2-pink-300: #FABCD8FF;
--v2-pink-400: #F799C6FF;
--v2-pink-500: #F26CB2FF;
--v2-pink-600: #F64AABFF;
--v2-pink-700: #E4429EFF;
--v2-pink-800: #C83D8BFF;
--v2-pink-900: #AA3576FF;
--v2-pink-1000: #8C2D61FF;
--v2-pink-1100: #6F284FFF;
--v2-pink-1200: #5C1D3FFF;
--v2-pink-100: #fdecf3ff;
--v2-pink-200: #f7d5e4ff;
--v2-pink-300: #fabcd8ff;
--v2-pink-400: #f799c6ff;
--v2-pink-500: #f26cb2ff;
--v2-pink-600: #f64aabff;
--v2-pink-700: #e4429eff;
--v2-pink-800: #c83d8bff;
--v2-pink-900: #aa3576ff;
--v2-pink-1000: #8c2d61ff;
--v2-pink-1100: #6f284fff;
--v2-pink-1200: #5c1d3fff;
}
}