Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@jer3m01
jer3m01 committed Feb 7, 2025
1 parent af30797 commit d08637c
Show file tree
Hide file tree
Showing 33 changed files with 485 additions and 485 deletions.
2 changes: 1 addition & 1 deletion apps/docs/src/routes/docs/core/components/alert-dialog.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ The alert dialog consists of:
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { AlertDialog } from "@kobalte/core/alert-dialog";
import { AlertDialog } from "@kobalte/core/alert-dialog";
import { CrossIcon } from "some-icon-library";
import "./style.css";

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/routes/docs/core/components/breadcrumbs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ The breadcrumbs consist of:
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { Breadcrumbs } from "@kobalte/core/breadcrumbs";
import { Breadcrumbs } from "@kobalte/core/breadcrumbs";
import "./style.css";

function App() {
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/routes/docs/core/components/checkbox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ The checkbox consists of:
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { Checkbox } from "@kobalte/core/checkbox";
import { Checkbox } from "@kobalte/core/checkbox";
import { CheckIcon } from "some-icon-library";
import "./style.css";

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/routes/docs/core/components/collapsible.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ The collapsible consists of:
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { Collapsible } from "@kobalte/core/collapsible";
import { Collapsible } from "@kobalte/core/collapsible";
import { ChevronDownIcon } from "some-icon-library";
import "./style.css";

Expand Down
44 changes: 22 additions & 22 deletions apps/docs/src/routes/docs/core/components/color-area.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,13 @@ The color area consists of:

```tsx
<ColorArea>
<ColorArea.Label />
<ColorArea.Background>
<ColorArea.Thumb>
<ColorArea.HiddenInputX />
<ColorArea.HiddenInputY />
</ColorArea.Thumb>
</ColorArea.Track>
<ColorArea.Label />
<ColorArea.Background>
<ColorArea.Thumb>
<ColorArea.HiddenInputX />
<ColorArea.HiddenInputY />
</ColorArea.Thumb>
</ColorArea.Track>
</ColorArea>
```

Expand All @@ -69,20 +69,20 @@ The color area consists of:
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorArea } from "@kobalte/core/color-area";
import { ColorArea } from "@kobalte/core/color-area";
import { parseColor } from "@kobalte/utils";
import "./style.css";

function App() {
return (
<ColorArea class="ColorAreaRoot" defaultValue={parseColor("rgb(2, 132, 197)")}>
<ColorArea.Background class="ColorAreaBackground">
<ColorArea.Thumb class="ColorAreaThumb">
<ColorArea.HiddenInputX />
<ColorArea.HiddenInputY />
</ColorArea.Thumb>
</ColorArea.Background>
</ColorArea>
<ColorArea.Background class="ColorAreaBackground">
<ColorArea.Thumb class="ColorAreaThumb">
<ColorArea.HiddenInputX />
<ColorArea.HiddenInputY />
</ColorArea.Thumb>
</ColorArea.Background>
</ColorArea>
);
}
```
Expand Down Expand Up @@ -136,17 +136,17 @@ If no `xChannel` or `yChannel` is provided, for the RGB color space, the red col
### Default value

<Preview>
<DefaultValueExample />
<DefaultValueExample />
</Preview>

```tsx {0}
<ColorArea defaultValue={parseColor("hsb(219, 58%, 93%)")}>
<ColorArea.Background>
<ColorArea.Thumb>
<ColorArea.HiddenInputX />
<ColorArea.HiddenInputY />
</ColorArea.Thumb>
</ColorArea.Background>
<ColorArea.Background>
<ColorArea.Thumb>
<ColorArea.HiddenInputX />
<ColorArea.HiddenInputY />
</ColorArea.Thumb>
</ColorArea.Background>
</ColorArea>
````

Expand Down
42 changes: 21 additions & 21 deletions apps/docs/src/routes/docs/core/components/color-channel-field.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,32 +73,32 @@ The color channel field consists of:
{/* <!-- prettier-ignore-start --> */}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorChannelField } from "@kobalte/core/color-channel-field";
import { parseColor } from "@kobalte/utils";
import { ColorChannelField } from "@kobalte/core/color-channel-field";
import { parseColor } from "@kobalte/utils";
import "./style.css";

function App() {
return (
<ColorChannelField class={style["color-channel-field"]} defaultValue={parseColor("hsl(200, 98%, 39%)")} channel="hue">
<ColorChannelField.Label class={style["color-channel-field__label"]}>
Hue
</ColorChannelField.Label>
<div class={style["color-channel-field__group"]}>
<ColorChannelField.Input class={style["color-channel-field__input"]} />
<ColorChannelField.IncrementTrigger
aria-label="Increment"
class={style["color-channel-field__increment"]}
>
<ArrowIcon />
</ColorChannelField.IncrementTrigger>
<ColorChannelField.DecrementTrigger
aria-label="Decrement"
class={style["color-channel-field__decrement"]}
>
<ArrowIcon style="transform: rotate(180deg);" />
</ColorChannelField.DecrementTrigger>
</div>
</ColorChannelField>
<ColorChannelField.Label class={style["color-channel-field__label"]}>
Hue
</ColorChannelField.Label>
<div class={style["color-channel-field__group"]}>
<ColorChannelField.Input class={style["color-channel-field__input"]} />
<ColorChannelField.IncrementTrigger
aria-label="Increment"
class={style["color-channel-field__increment"]}
>
<ArrowIcon />
</ColorChannelField.IncrementTrigger>
<ColorChannelField.DecrementTrigger
aria-label="Decrement"
class={style["color-channel-field__decrement"]}
>
<ArrowIcon style="transform: rotate(180deg);" />
</ColorChannelField.DecrementTrigger>
</div>
</ColorChannelField>
);
}
```
Expand Down
8 changes: 4 additions & 4 deletions apps/docs/src/routes/docs/core/components/color-field.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,15 +63,15 @@ The color field consists of:
{/* <!-- prettier-ignore-start --> */}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorField } from "@kobalte/core/color-field";
import { ColorField } from "@kobalte/core/color-field";
import "./style.css";

function App() {
return (
<ColorField class="color-field">
<ColorField.Label class="color-field__label">Favorite color</ColorField.Label>
<ColorField.Input class="color-field__input" />
</ColorField>
<ColorField.Label class="color-field__label">Favorite color</ColorField.Label>
<ColorField.Input class="color-field__input" />
</ColorField>
);
}
```
Expand Down
10 changes: 5 additions & 5 deletions apps/docs/src/routes/docs/core/components/color-slider.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ The color slider consists of:
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorSlider } from "@kobalte/core/color-slider";
import { ColorSlider } from "@kobalte/core/color-slider";
import { parseColor } from "@kobalte/utils";
import "./style.css";

Expand Down Expand Up @@ -151,7 +151,7 @@ This must be one of the channels included in the color value, for example, for R
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorSlider } from "@kobalte/core/color-slider";
import { ColorSlider } from "@kobalte/core/color-slider";
import { parseColor } from "@kobalte/utils";
import "./style.css";

Expand Down Expand Up @@ -232,7 +232,7 @@ This must be one of the channels included in the color value, for example, for R
<TabsSnippets.Content value="index.tsx">
```tsx
import { createSignal } from "solid-js";
import { ColorSlider } from "@kobalte/core/color-slider";
import { ColorSlider } from "@kobalte/core/color-slider";
import { parseColor } from "@kobalte/utils";
import "./style.css";

Expand Down Expand Up @@ -313,7 +313,7 @@ This must be one of the channels included in the color value, for example, for R
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorSlider } from "@kobalte/core/color-slider";
import { ColorSlider } from "@kobalte/core/color-slider";
import { parseColor } from "@kobalte/utils";
import "./style.css";

Expand Down Expand Up @@ -393,7 +393,7 @@ This must be one of the channels included in the color value, for example, for R
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorSlider } from "@kobalte/core/color-slider";
import { ColorSlider } from "@kobalte/core/color-slider";
import { parseColor } from "@kobalte/utils";
import "./style.css";

Expand Down
6 changes: 3 additions & 3 deletions apps/docs/src/routes/docs/core/components/color-swatch.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ The color swatch consists of:
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";

Expand Down Expand Up @@ -88,7 +88,7 @@ ColorSwatch accepts a value via the `value` prop. The value should be `Color` ob
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";

Expand Down Expand Up @@ -127,7 +127,7 @@ ColorSwatch accepts a value via the `value` prop. The value should be `Color` ob
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";

Expand Down
52 changes: 26 additions & 26 deletions apps/docs/src/routes/docs/core/components/color-wheel.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,18 +66,18 @@ The color wheel consists of:
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ColorWheel } from "@kobalte/core/color-wheel";
import { ColorWheel } from "@kobalte/core/color-wheel";
import "./style.css";

function App() {
return (
<ColorWheel class="ColorWheelRoot" thickness={24}>
<ColorWheel.Track class="ColorWheelTrack">
<ColorWheel.Thumb class="ColorWheelThumb">
<ColorWheel.Input />
</ColorWheel.Thumb>
</ColorWheel.Track>
</ColorWheel>
<ColorWheel.Track class="ColorWheelTrack">
<ColorWheel.Thumb class="ColorWheelThumb">
<ColorWheel.Input />
</ColorWheel.Thumb>
</ColorWheel.Track>
</ColorWheel>
);
}
```
Expand All @@ -86,37 +86,37 @@ The color wheel consists of:
<TabsSnippets.Content value="style.css">
```css
.ColorWheelRoot {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
user-select: none;
touch-action: none;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
user-select: none;
touch-action: none;
}

.ColorWheelTrack {
position: relative;
height: 160px;
width: 160px;
position: relative;
height: 160px;
width: 160px;
}

.ColorWheelThumb {
display: block;
width: 16px;
height: 16px;
border-radius: 9999px;
border: 2px solid #fff;
box-shadow: 0 0 0 1px #0000006b;
display: block;
width: 16px;
height: 16px;
border-radius: 9999px;
border: 2px solid #fff;
box-shadow: 0 0 0 1px #0000006b;
}

.ColorWheelThumb:focus {
outline: none;
outline: none;
}

.ColorWheelLabel {
display: flex;
justify-content: space-between;
width: 100%;
display: flex;
justify-content: space-between;
width: 100%;
}
```

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/routes/docs/core/components/combobox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ The combobox consists of:
{/* <!-- prettier-ignore-start --> */}
<TabsSnippets.Content value="index.tsx">
```tsx
import { Combobox } from "@kobalte/core/combobox";
import { Combobox } from "@kobalte/core/combobox";
import { CaretSortIcon, CheckIcon } from "some-icon-library";
import { createSignal } from "solid-js";
import "./style.css";
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/routes/docs/core/components/context-menu.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ The checkable menu item consists of:
{/* <!-- prettier-ignore-start --> */}
<TabsSnippets.Content value="index.tsx">
```tsx
import { ContextMenu } from "@kobalte/core/context-menu";
import { ContextMenu } from "@kobalte/core/context-menu";
import { createSignal } from "solid-js";
import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "some-icon-library";
import "./style.css";
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/routes/docs/core/components/dialog.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ The dialog consists of:
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { Dialog } from "@kobalte/core/dialog";
import { Dialog } from "@kobalte/core/dialog";
import { CrossIcon } from "some-icon-library";
import "./style.css";

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/routes/docs/core/components/dropdown-menu.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ The checkable menu item consists of:
{/* <!-- prettier-ignore-start --> */}
<TabsSnippets.Content value="index.tsx">
```tsx
import { DropdownMenu } from "@kobalte/core/dropdown-menu";
import { DropdownMenu } from "@kobalte/core/dropdown-menu";
import { createSignal } from "solid-js";
import { CheckIcon, ChevronDownIcon, ChevronRightIcon, DotFilledIcon } from "some-icon-library";
import "./style.css";
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/routes/docs/core/components/hover-card.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ The hovercard consists of:
{/* <!-- prettier-ignore-start --> */}
<TabsSnippets.Content value="index.tsx">
```tsx
import { HoverCard } from "@kobalte/core/hover-card";
import { HoverCard } from "@kobalte/core/hover-card";
import "./style.css";

function App() {
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/routes/docs/core/components/image.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ The image consists of:
{/* <!-- prettier-ignore-start -->*/}
<TabsSnippets.Content value="index.tsx">
```tsx
import { Image } from "@kobalte/core/image";
import { Image } from "@kobalte/core/image";
import "./style.css";

function App() {
Expand Down
Loading

0 comments on commit d08637c

Please sign in to comment.