grav-svelte 0.0.2 → 0.0.4

package/README.md

@@ -10,6 +10,9 @@ npm install grav-svelte
 
 ## Usage
 
+You can import components in two ways:
+
+### Method 1: Import from the package root
 ```svelte
 <script>
   import { Button } from 'grav-svelte';
@@ -18,17 +21,26 @@ npm install grav-svelte
 <Button variant="primary" size="medium">Click me</Button>
 ```
 
+### Method 2: Import the component directly
+```svelte
+<script>
+  import Button from 'grav-svelte/Button';
+</script>
+
+<Button variant="primary" size="medium">Click me</Button>
+```
+
 ## Components
 
 ### Button
 
-A versatile button component with multiple variants and sizes.
+A versatile button component with multiple variants and sizes. The button toggles between primary (blue) and danger (red) variants when clicked.
 
 #### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| variant | 'primary' \| 'secondary' \| 'outline' | 'primary' | The visual style of the button |
+| variant | 'primary' \| 'secondary' \| 'outline' \| 'danger' | 'primary' | The visual style of the button |
 | size | 'small' \| 'medium' \| 'large' | 'medium' | The size of the button |
 | disabled | boolean | false | Whether the button is disabled |
 | type | 'button' \| 'submit' \| 'reset' | 'button' | The HTML button type |
@@ -37,7 +49,7 @@ A versatile button component with multiple variants and sizes.
 #### Examples
 
 ```svelte
-<!-- Primary button -->
+<!-- Primary button (toggles to danger on click) -->
 <Button variant="primary">Primary Button</Button>
 
 <!-- Secondary button -->
@@ -54,7 +66,7 @@ A versatile button component with multiple variants and sizes.
 <!-- Disabled state -->
 <Button disabled>Disabled Button</Button>
 
-<!-- With click handler -->
+<!-- With custom click handler -->
 <Button on:click={() => alert('Clicked!')}>Click me</Button>
 ```
 

package/dist/Button/Button.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-    export let variant: 'primary' | 'secondary' | 'outline' = 'primary';
+    export let variant: 'primary' | 'secondary' | 'outline' | 'danger' = 'primary';
     export let size: 'small' | 'medium' | 'large' = 'medium';
     export let disabled = false;
     export let type: 'button' | 'submit' | 'reset' = 'button';
     export let class_name = '';
 
+    let isDanger = false;
+
     const baseClasses = 'rounded font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';
 
     const variantClasses = {
         primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
         secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
-        outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500'
+        outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
+        danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'
     };
 
     const sizeClasses = {
@@ -21,6 +24,13 @@
 
     const disabledClasses = 'opacity-50 cursor-not-allowed';
 
+    function handleClick(event: MouseEvent) {
+        if (!disabled) {
+            isDanger = !isDanger;
+            variant = isDanger ? 'danger' : 'primary';
+        }
+    }
+
     $: classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${disabled ? disabledClasses : ''} ${class_name}`;
 </script>
 
@@ -28,7 +38,7 @@
     {type}
     {disabled}
     class={classes}
-    on:click
+    on:click={handleClick}
     {...$$restProps}
 >
     <slot />

package/dist/Button/Button.svelte.d.ts

@@ -2,15 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        variant?: "primary" | "secondary" | "outline" | undefined;
+        variant?: "primary" | "secondary" | "outline" | "danger" | undefined;
         size?: "small" | "medium" | "large" | undefined;
         disabled?: boolean | undefined;
         type?: "button" | "submit" | "reset" | undefined;
         class_name?: string | undefined;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "grav-svelte",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"description": "A collection of Svelte components",
 	"license": "MIT",
 	"scripts": {
@@ -27,6 +27,10 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
+		},
+		"./Button": {
+			"types": "./dist/Button/index.d.ts",
+			"svelte": "./dist/Button/Button.svelte"
 		}
 	},
 	"peerDependencies": {