Skip to content

Commit

Permalink
new shadcn
Browse files Browse the repository at this point in the history
  • Loading branch information
catdevnull committed Feb 17, 2025
1 parent 8eec281 commit 4ad7a01
Show file tree
Hide file tree
Showing 38 changed files with 787 additions and 901 deletions.
405 changes: 130 additions & 275 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

27 changes: 15 additions & 12 deletions sitio/components.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
{
"$schema": "https://shadcn-svelte.com/schema.json",
"style": "new-york",
"tailwind": {
"config": "tailwind.config.js",
"css": "src/app.css",
"baseColor": "neutral"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils"
},
"typescript": true
"$schema": "https://next.shadcn-svelte.com/schema.json",
"style": "new-york",
"tailwind": {
"config": "tailwind.config.js",
"css": "src/app.css",
"baseColor": "neutral"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils",
"ui": "$lib/components/ui",
"hooks": "$lib/hooks"
},
"typescript": true,
"registry": "https://next.shadcn-svelte.com/registry"
}
9 changes: 5 additions & 4 deletions sitio/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@
"dayjs": "^1.11.13",
"dotenv": "^16.4.7",
"drizzle-orm": "^0.33.0",
"lucide-svelte": "^0.462.0",
"markdown-it": "^14.1.0",
"markdown-it-anchor": "^8.6.7",
"markdown-it-table-of-contents": "^0.6.0",
Expand All @@ -59,21 +58,23 @@
"@types/markdown-it": "^13.0.9",
"@types/node": "^20.17.17",
"autoprefixer": "^10.4.20",
"bits-ui": "^0.21.16",
"bits-ui": "1.0.0-next.98",
"clsx": "^2.1.1",
"drizzle-kit": "^0.24.2",
"lucide-svelte": "^0.462.0",
"mitata": "^0.1.14",
"postcss": "^8.5.1",
"postcss-load-config": "^5.1.0",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"svelte": "^5.19.7",
"svelte-check": "^3.8.6",
"svelte": "^5.20.1",
"svelte-check": "^4.1.4",
"svelte-mq-store": "^2.2.11",
"tailwind-merge": "^2.6.0",
"tailwind-variants": "^0.3.1",
"tailwindcss": "^3.4.17",
"tailwindcss-animate": "^1.0.7",
"ts-node": "^10.9.2",
"tslib": "^2.8.1",
"typescript": "^5.7.3",
Expand Down
41 changes: 17 additions & 24 deletions sitio/src/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,65 +6,62 @@
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;

--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;

--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;

--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;

--border: 0 0% 89.8%;
--input: 0 0% 89.8%;

--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;

--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;

--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;

--destructive: 0 72.2% 50.6%;
--destructive-foreground: 0 0% 98%;

--ring: 0 0% 3.9%;

--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;

--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;

--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;

--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;

--border: 0 0% 14.9%;
--input: 0 0% 14.9%;

--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;

--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;

--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;

--ring: 0 0% 83.1%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}

Expand All @@ -75,8 +72,4 @@
body {
@apply bg-background text-foreground;
}
}

.link {
@apply text-blue-600 underline dark:text-blue-200;
}
}
22 changes: 13 additions & 9 deletions sitio/src/app.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>

<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
<script async src="https://umami.experimentos.nulo.ar/script.js"
data-website-id="3728adc2-6131-4895-9b0c-98f3038d9126"></script>
</head>

<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>

</html>
95 changes: 75 additions & 20 deletions sitio/src/lib/components/ui/button/button.svelte
Original file line number Diff line number Diff line change
@@ -1,25 +1,80 @@
<script lang="ts" module>
import type { WithElementRef } from "bits-ui";
import type {
HTMLAnchorAttributes,
HTMLButtonAttributes,
} from "svelte/elements";
import { type VariantProps, tv } from "tailwind-variants";
export const buttonVariants = tv({
base: "focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
variants: {
variant: {
default:
"bg-primary text-primary-foreground hover:bg-primary/90 shadow",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
outline:
"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
});
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
WithElementRef<HTMLAnchorAttributes> & {
variant?: ButtonVariant;
size?: ButtonSize;
};
</script>

<script lang="ts">
import { Button as ButtonPrimitive } from "bits-ui";
import { type Events, type Props, buttonVariants } from "./index.js";
import { cn } from "$lib/utils.js";
type $$Props = Props;
type $$Events = Events;
let className: $$Props["class"] = undefined;
export let variant: $$Props["variant"] = "default";
export let size: $$Props["size"] = "default";
export let builders: $$Props["builders"] = [];
export { className as class };
let {
class: className,
variant = "default",
size = "default",
ref = $bindable(null),
href = undefined,
type = "button",
children,
...restProps
}: ButtonProps = $props();
</script>

<ButtonPrimitive.Root
{builders}
class={cn(buttonVariants({ variant, size, className }))}
type="button"
{...$$restProps}
on:click
on:keydown
>
<slot />
</ButtonPrimitive.Root>
{#if href}
<a
bind:this={ref}
class={cn(buttonVariants({ variant, size }), className)}
{href}
{...restProps}
>
{@render children?.()}
</a>
{:else}
<button
bind:this={ref}
class={cn(buttonVariants({ variant, size }), className)}
{type}
{...restProps}
>
{@render children?.()}
</button>
{/if}
62 changes: 14 additions & 48 deletions sitio/src/lib/components/ui/button/index.ts
Original file line number Diff line number Diff line change
@@ -1,51 +1,17 @@
import type { Button as ButtonPrimitive } from "bits-ui";
import { type VariantProps, tv } from "tailwind-variants";
import Root from "./button.svelte";

const buttonVariants = tv({
base: "focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
outline:
"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
});

type Variant = VariantProps<typeof buttonVariants>["variant"];
type Size = VariantProps<typeof buttonVariants>["size"];

type Props = ButtonPrimitive.Props & {
variant?: Variant;
size?: Size;
};

type Events = ButtonPrimitive.Events;
import Root, {
type ButtonProps,
type ButtonSize,
type ButtonVariant,
buttonVariants,
} from "./button.svelte";

export {
Root,
type Props,
type Events,
//
Root as Button,
type Props as ButtonProps,
type Events as ButtonEvents,
buttonVariants,
Root,
type ButtonProps as Props,
//
Root as Button,
buttonVariants,
type ButtonProps,
type ButtonSize,
type ButtonVariant,
};
30 changes: 14 additions & 16 deletions sitio/src/lib/components/ui/calendar/calendar-cell.svelte
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.CellProps;
export let date: $$Props["date"];
let className: $$Props["class"] = undefined;
export { className as class };
let {
ref = $bindable(null),
class: className,
...restProps
}: CalendarPrimitive.CellProps = $props();
</script>

<CalendarPrimitive.Cell
{date}
class={cn(
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
className,
)}
{...$$restProps}
>
<slot />
</CalendarPrimitive.Cell>
class={cn(
"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
className
)}
bind:ref
{...restProps}
/>
Loading

0 comments on commit 4ad7a01

Please sign in to comment.