kosui 0.0.8 → 0.0.10

package/dist/index.d.ts

@@ -32,6 +32,8 @@ export * from "./popover";
 export * from "./portal";
 export * from "./progress";
 export * from "./shortcut";
+export * from "./skeleton";
+export * from "./textarea";
 export * from "./toggle";
 export * from "./tooltip";
 export * from "./base";

package/dist/index.js

@@ -32,6 +32,8 @@ export * from "./popover";
 export * from "./portal";
 export * from "./progress";
 export * from "./shortcut";
+export * from "./skeleton";
+export * from "./textarea";
 export * from "./toggle";
 export * from "./tooltip";
 export * from "./base";

package/dist/skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton, type SkeletonProps } from "./skeleton.svelte";

package/dist/skeleton/index.js

@@ -0,0 +1 @@
+export { default as Skeleton } from "./skeleton.svelte";

package/dist/skeleton/skeleton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { Box, type BoxProps } from "../box";
+
+  export type SkeletonProps = { children?: Snippet } & BoxProps;
+  let {
+    children,
+    class: className,
+    backdrop = true,
+    shape = "rounded",
+    ...restProps
+  }: SkeletonProps = $props();
+</script>
+
+<Box
+  class={twMerge("animate-pulse", className)}
+  {backdrop}
+  {shape}
+  {...restProps}
+>
+  {@render children?.()}
+</Box>

package/dist/skeleton/skeleton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import { type BoxProps } from "../box";
+export type SkeletonProps = {
+    children?: Snippet;
+} & BoxProps;
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/textarea/index.d.ts

@@ -0,0 +1 @@
+export { default as Textarea, type TextareaProps } from "./textarea.svelte";

package/dist/textarea/index.js

@@ -0,0 +1 @@
+export { default as Textarea } from "./textarea.svelte";

package/dist/textarea/textarea.svelte

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { baseClasses, type Variants } from "../base";
+  import { noop, type ClassName, type ElementRef } from "../utils";
+  import type { HTMLTextareaAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+
+  export type TextareaProps = ElementRef &
+    ClassName &
+    Variants &
+    HTMLTextareaAttributes;
+</script>
+
+<script lang="ts">
+  let {
+    value = $bindable(),
+    el = $bindable(),
+    ref = noop,
+    class: className,
+    variant = "outlined",
+    color = "secondary",
+    shape = "rounded",
+    ...restProps
+  }: TextareaProps = $props();
+</script>
+
+<textarea
+  bind:this={el}
+  use:ref
+  bind:value
+  class={twMerge(
+    "bg-m3-surface-container",
+    baseClasses({ variant, color, shape, hover: true, focus: true }),
+
+    (variant === "outlined" || variant === "plain") &&
+      "hover:bg-m3-surface-container-low focus-visible:bg-m3-surface-container-low",
+
+    "px-3 py-2",
+    className,
+  )}
+  {...restProps}
+></textarea>

package/dist/textarea/textarea.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Variants } from "../base";
+import { type ClassName, type ElementRef } from "../utils";
+import type { HTMLTextareaAttributes } from "svelte/elements";
+export type TextareaProps = ElementRef & ClassName & Variants & HTMLTextareaAttributes;
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "el" | "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kosui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "license": "MIT",
   "engines": {