@3birds/midori-ui 0.0.7 → 0.0.9

package/dist/components/Btn.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Loading from './Loading.svelte';
-	import { type BtnType } from '../types';
+	import { Loading } from '..';
+	import type { BtnType } from '../types';
 
 	let {
 		type = 'button',

package/dist/components/Btn.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type BtnType } from '../types';
+import type { BtnType } from '../types';
 type $$ComponentProps = {
     type?: BtnType;
     class?: string;

package/dist/components/Input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type InputType } from '../types';
+	import type { InputType } from '../types';
 
 	let {
 		type,
@@ -13,7 +13,8 @@
 		label,
 		icon,
 		placeholder,
-		option
+		option,
+		value = $bindable()
 	}: {
 		type: InputType;
 		required?: boolean;
@@ -27,23 +28,34 @@
 		icon?: string;
 		placeholder?: string;
 		option?: string;
+		value: any;
 	} = $props();
 </script>
 
-<div class="w-lg">
-<fieldset class="fieldset w-full">
-	{#if label}
-		<legend class="fieldset-legend">{label}</legend>
-	{/if}
-	<label class="input rounded-full w-full {icon ? '' : 'px-5'}">
-		{#if icon}
-			<img src={icon} class="size-4" alt="アイコン" />
+<div>
+	<fieldset class="fieldset w-full">
+		{#if label}
+			<legend class="fieldset-legend">{label}</legend>
 		{/if}
-		<input {type} {required} {readonly} {pattern} {disabled} {maxlength} {min} {max} {placeholder} />
-	</label>
-	{#if icon}
-		<p class="label">{option}</p>
-	{/if}
-</fieldset>
+		<label class="input w-full rounded-full {icon ? '' : 'px-5'}">
+			{#if icon}
+				<img src={icon} class="size-4" alt="アイコン" />
+			{/if}
+			<input
+				{type}
+				{required}
+				{readonly}
+				{pattern}
+				{disabled}
+				{maxlength}
+				{min}
+				{max}
+				{placeholder}
+				{value}
+			/>
+		</label>
+		{#if option}
+			<p class="label ml-auto">{option}</p>
+		{/if}
+	</fieldset>
 </div>
-

package/dist/components/Input.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type InputType } from '../types';
+import type { InputType } from '../types';
 type $$ComponentProps = {
     type: InputType;
     required?: boolean;
@@ -12,7 +12,8 @@ type $$ComponentProps = {
     icon?: string;
     placeholder?: string;
     option?: string;
+    value: any;
 };
-declare const Input: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Input: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/Modal.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Btn, closeSvg } from '..';
+
+	let {
+		value = $bindable(),
+		children
+	}: { value?: HTMLDialogElement; children: import('svelte').Snippet } = $props();
+</script>
+
+<dialog bind:this={value} class="modal modal-bottom sm:modal-middle">
+	<div class="modal-box rounded-t-3xl sm:rounded-3xl">
+		{@render children()}
+		<div class="modal-action">
+			<form method="dialog">
+				<Btn class="absolute top-2 right-2 btn-circle btn-ghost btn-sm" type="submit">
+					<img src={closeSvg} alt="閉じる" class="size-6" />
+				</Btn>
+			</form>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
+</dialog>

package/dist/components/Modal.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    value?: HTMLDialogElement;
+    children: import('svelte').Snippet;
+};
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
+export { default as Loading } from './components/Loading.svelte';
 export { default as Btn } from './components/Btn.svelte';
 export { default as Fab } from './components/Fab.svelte';
 export { default as Input } from './components/Input.svelte';
+export { default as Modal } from './components/Modal.svelte';
 export { default as accountSvg } from './assets/account.svg';
 export { default as alertSvg } from './assets/alert.svg';
 export { default as calendarMonthSvg } from './assets/calendar-month.svg';

package/dist/index.js

@@ -1,7 +1,9 @@
 // place files you want to export through the `$lib` alias in this folder.
+export { default as Loading } from './components/Loading.svelte';
 export { default as Btn } from './components/Btn.svelte';
 export { default as Fab } from './components/Fab.svelte';
 export { default as Input } from './components/Input.svelte';
+export { default as Modal } from './components/Modal.svelte';
 export { default as accountSvg } from './assets/account.svg';
 export { default as alertSvg } from './assets/alert.svg';
 export { default as calendarMonthSvg } from './assets/calendar-month.svg';

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export type BtnType = 'button' | 'submit';
-export type InputType = 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal';
+export type InputType = 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal' | 'password';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@3birds/midori-ui",
-	"version": "0.0.7",
+	"version": "0.0.9",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",