@noxlovette/material 0.4.7 → 0.4.8
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.
|
@@ -14,7 +14,7 @@ export declare const pill: import("tailwind-variants").TVReturnType<{
|
|
|
14
14
|
yellow: "bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950";
|
|
15
15
|
green: "bg-green-600 text-white dark:bg-green-500 dark:text-green-950";
|
|
16
16
|
};
|
|
17
|
-
}, undefined, "relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full", {
|
|
17
|
+
}, undefined, "relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap", {
|
|
18
18
|
variant: {
|
|
19
19
|
primary: "md-component-button-filled-primary";
|
|
20
20
|
secondary: "md-component-button-filled-secondary";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { tv } from 'tailwind-variants';
|
|
2
2
|
export const pill = tv({
|
|
3
|
-
base: 'relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full',
|
|
3
|
+
base: 'relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap',
|
|
4
4
|
variants: {
|
|
5
5
|
variant: {
|
|
6
6
|
primary: 'md-component-button-filled-primary',
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
import TableRow from './TableRow.svelte';
|
|
8
8
|
import TableHeader from './TableHeader.svelte';
|
|
9
9
|
import TableCell from './TableCell.svelte';
|
|
10
|
+
import Pill from '../pill/Pill.svelte';
|
|
10
11
|
|
|
11
12
|
const { Story } = defineMeta({
|
|
12
13
|
title: 'Table/Table',
|
|
@@ -247,6 +248,29 @@
|
|
|
247
248
|
</Table>
|
|
248
249
|
</Story>
|
|
249
250
|
|
|
251
|
+
<Story name="Extreme: Narrow Viewport With Pill" asChild>
|
|
252
|
+
<div class="w-[390px]">
|
|
253
|
+
<Table rounded>
|
|
254
|
+
<TableHead>
|
|
255
|
+
<TableRow>
|
|
256
|
+
<TableHeader>Student</TableHeader>
|
|
257
|
+
<TableHeader>Lesson</TableHeader>
|
|
258
|
+
<TableHeader>Status</TableHeader>
|
|
259
|
+
<TableHeader>Paid</TableHeader>
|
|
260
|
+
</TableRow>
|
|
261
|
+
</TableHead>
|
|
262
|
+
<TableBody>
|
|
263
|
+
<TableRow>
|
|
264
|
+
<TableCell>Student 8</TableCell>
|
|
265
|
+
<TableCell>English, 60 minutes</TableCell>
|
|
266
|
+
<TableCell><Pill variant="error">Error</Pill></TableCell>
|
|
267
|
+
<TableCell>Not paid</TableCell>
|
|
268
|
+
</TableRow>
|
|
269
|
+
</TableBody>
|
|
270
|
+
</Table>
|
|
271
|
+
</div>
|
|
272
|
+
</Story>
|
|
273
|
+
|
|
250
274
|
<Story name="Mixed Alignment" asChild>
|
|
251
275
|
<Table rounded>
|
|
252
276
|
<TableHead>
|
|
@@ -6,7 +6,7 @@ export const table = tv({
|
|
|
6
6
|
body: '[&_tr:last-child]:border-b-0',
|
|
7
7
|
foot: 'border-t border-md-sys-color-outline-variant',
|
|
8
8
|
row: 'border-b border-md-sys-color-outline-variant transition-colors focus-visible:outline focus-visible:-outline-offset-2 focus-visible:outline-md-sys-color-primary',
|
|
9
|
-
cell: 'px-4 py-3 align-middle
|
|
9
|
+
cell: 'px-4 py-3 align-middle',
|
|
10
10
|
header: 'px-4 py-4 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface font-medium whitespace-nowrap'
|
|
11
11
|
},
|
|
12
12
|
variants: {
|