@likable-hair/svelte 0.0.39 → 0.0.40

package/forms/Checkbox.svelte

@@ -0,0 +1,101 @@
+<script >export let value = false, id = undefined, disabled = false, activeColor = "#275efe", activeInnerColor = "#fff", focusShadow = "2px rgba(39, 94, 254, 0.3)", borderColor = "#bbc1e1", borderHoverColor = "#275efe", backgroundColor = "#fff", disabledColor = "#f6f8ff", disabledInnerColor = "#e1e6f9";
+</script>
+
+<input 
+  style:--checkbox-active-color={activeColor}
+  style:--checkbox-active-inner-color={activeInnerColor}
+  style:--checkbox-focus-shadow={focusShadow}
+  style:--checkbox-border-color={borderColor}
+  style:--checkbox-border-hover-color={borderHoverColor}
+  style:--checkbox-background-color={backgroundColor}
+  style:--checkbox-disabled-color={disabledColor}
+  style:--checkbox-disabled-inner-color={disabledInnerColor}
+  id={id}
+  type="checkbox"
+  checked={value}
+  disabled={disabled}
+>
+
+<style>
+  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
+    input[type="checkbox"] {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      height: 21px;
+      outline: none;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      margin: 0;
+      cursor: pointer;
+      border: 1px solid var(--bc, var(--checkbox-border-color));
+      background: var(--b, var(--checkbox-background-color));
+      transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
+      width: 21px;
+      border-radius: 7px;
+    }
+
+    input[type="checkbox"]:after {
+      content: "";
+      display: block;
+      position: absolute;
+      opacity: var(--o, 0);
+      transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
+        opacity var(--d-o, 0.2s);
+      width: 5px;
+      height: 9px;
+      border: 2px solid var(--checkbox-active-inner-color);
+      border-top: 0;
+      border-left: 0;
+      left: 7px;
+      top: 4px;
+      transform: rotate(var(--r, 20deg));
+      box-sizing: border-box;
+    }
+
+    input[type="checkbox"]:checked {
+      --b: var(--checkbox-active-color);
+      --bc: var(--checkbox-active-color);
+      --d-o: 0.3s;
+      --d-t: 0.6s;
+      --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+      --o: 1;
+      --r: 43deg;
+    }
+
+    input[type="checkbox"]:disabled {
+      --b: var(--checkbox-disabled-color);
+      cursor: not-allowed;
+      opacity: 0.9;
+    }
+
+    input[type="checkbox"]:disabled:checked {
+      --b: var(--checkbox-disabled-inner-color);
+      --bc: var(--checkbox-border-color);
+      --r: 43deg;
+    }
+
+    input[type="checkbox"]:disabled + label {
+      cursor: not-allowed;
+    }
+
+    input[type="checkbox"]:hover:not(:checked):not(:disabled) {
+      --bc: var(--checkbox-border-hover-color);
+    }
+    input[type="checkbox"]:focus {
+      box-shadow: 0 0 0 var(--checkbox-focus-shadow);
+    }
+
+    input[type="checkbox"]:not(.switch):after {
+      width: 5px;
+      height: 9px;
+      border: 2px solid var(--checkbox-active-inner-color);
+      border-top: 0;
+      border-left: 0;
+      left: 7px;
+      top: 4px;
+      transform: rotate(var(--r, 20deg));
+    }
+    
+  }
+</style>

package/forms/Checkbox.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: boolean;
+        id?: string;
+        disabled?: boolean;
+        activeColor?: string;
+        activeInnerColor?: string;
+        focusShadow?: string;
+        borderColor?: string;
+        borderHoverColor?: string;
+        backgroundColor?: string;
+        disabledColor?: string;
+        disabledInnerColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CheckboxProps = typeof __propDef.props;
+export declare type CheckboxEvents = typeof __propDef.events;
+export declare type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+}
+export {};

package/index.d.ts

@@ -6,6 +6,7 @@ export { default as MediaQuery } from './common/MediaQuery.svelte';
 export { default as Dialog } from './dialogs/Dialog.svelte';
 export { default as TextField } from './forms/Textfield.svelte';
 export { default as Switch } from './forms/Switch.svelte';
+export { default as Checkbox } from './forms/Checkbox.svelte';
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 export { default as CircularLoader } from './loaders/CircularLoader.svelte';
 export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';

package/index.js

@@ -10,6 +10,7 @@ export { default as Dialog } from './dialogs/Dialog.svelte';
 // forms
 export { default as TextField } from './forms/Textfield.svelte';
 export { default as Switch } from './forms/Switch.svelte';
+export { default as Checkbox } from './forms/Checkbox.svelte';
 // loaders
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 export { default as CircularLoader } from './loaders/CircularLoader.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -37,6 +37,7 @@
     "./dates/YearSelector.svelte": "./dates/YearSelector.svelte",
     "./dates/utils": "./dates/utils.js",
     "./dialogs/Dialog.svelte": "./dialogs/Dialog.svelte",
+    "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
     "./forms/Switch.svelte": "./forms/Switch.svelte",
     "./forms/Textfield.svelte": "./forms/Textfield.svelte",
     ".": "./index.js",