@casinogate/ui 2.0.0 → 2.0.1

package/dist/primitives/index.d.ts

@@ -14,6 +14,7 @@ export * from './dropdown/index.js';
 export * from './field/index.js';
 export * from './file-upload/index.js';
 export * from './input/index.js';
+export * from './input-password/index.js';
 export * from './kbd/index.js';
 export * from './navigation/index.js';
 export * from './number-input/index.js';

package/dist/primitives/index.js

@@ -14,6 +14,7 @@ export * from './dropdown/index.js';
 export * from './field/index.js';
 export * from './file-upload/index.js';
 export * from './input/index.js';
+export * from './input-password/index.js';
 export * from './kbd/index.js';
 export * from './navigation/index.js';
 export * from './number-input/index.js';

package/dist/primitives/input-password/components/index.d.ts

@@ -0,0 +1 @@
+export { default as InputPassword } from './input-password.svelte';

package/dist/primitives/input-password/components/index.js

@@ -0,0 +1 @@
+export { default as InputPassword } from './input-password.svelte';

package/dist/primitives/input-password/components/input-password.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Input } from '../../input/index.js';
+  import type { InputPasswordProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    showPassword = $bindable(false),
+    value = $bindable(''),
+    ...restProps
+  }: InputPasswordProps = $props();
+
+  const type = $derived(showPassword ? 'text' : 'password');
+</script>
+
+<Input bind:ref bind:value {type} {...restProps}>
+  {#snippet endChevron()}
+    <button
+      type="button"
+      onclick={() => (showPassword = !showPassword)}
+      class={cn(
+        'cgui:cursor-pointer cgui:p-0 cgui:flex cgui:items-center cgui:justify-center cgui:bg-transparent cgui:border-none',
+        'cgui:focus-visible:ring-stroke-focus cgui:focus-visible:border-stroke-focus cgui:outline-stroke-focus'
+      )}
+    >
+      {#if showPassword}
+        <Icon.Eye width={20} height={20} />
+      {:else}
+        <Icon.EyeCrossed width={20} height={20} />
+      {/if}
+    </button>
+  {/snippet}
+</Input>

package/dist/primitives/input-password/components/input-password.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputPasswordProps } from '../types.js';
+declare const InputPassword: import("svelte").Component<InputPasswordProps, {}, "value" | "ref" | "showPassword">;
+type InputPassword = ReturnType<typeof InputPassword>;
+export default InputPassword;

package/dist/primitives/input-password/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+export type * from './types.js';

package/dist/primitives/input-password/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/primitives/input-password/types.d.ts

@@ -0,0 +1,4 @@
+import type { InputProps } from '../input/types.js';
+export type InputPasswordProps = Omit<InputProps, 'endChevron' | 'type'> & {
+    showPassword?: boolean;
+};

package/dist/primitives/input-password/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -261,6 +261,11 @@
       "svelte": "./dist/primitives/input/index.js",
       "default": "./dist/primitives/input/index.js"
     },
+    "./primitives/input-password": {
+      "types": "./dist/primitives/input-password/index.d.ts",
+      "svelte": "./dist/primitives/input-password/index.js",
+      "default": "./dist/primitives/input-password/index.js"
+    },
     "./primitives/kbd": {
       "types": "./dist/primitives/kbd/index.d.ts",
       "svelte": "./dist/primitives/kbd/index.js",