@ims360/svelte-ivory 0.0.16 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/basic/toggle/Toggle.svelte +14 -11
  2. package/dist/components/basic/toggle/Toggle.svelte.d.ts.map +1 -1
  3. package/package.json +1 -1
  4. package/src/lib/components/basic/toggle/Toggle.svelte +14 -11
package/dist/components/basic/toggle/Toggle.svelte CHANGED
@@ -13,37 +13,40 @@
13
13
  };
14
14
 
15
15
  let { value, class: clazz, onclick, children, testId }: Props = $props();
16
-
17
- let thumbWidth = $state(0);
18
16
  </script>
19
17
 
20
18
  <svelte:element
21
19
  this={onclick ? 'button' : 'div'}
22
20
  class={twMerge(
23
21
  clsx(
24
- 'group flex h-5 w-9 items-center rounded-full border p-0.5 transition-colors duration-100',
25
- value
26
- ? 'bg-primary-500 border-primary-500'
27
- : 'bg-surface-500/30 border-surface-500/60 hover:border-surface-500/80',
22
+ 'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors duration-100',
23
+ value ? 'bg-primary-500' : 'bg-surface-300-700',
28
24
  clazz
29
25
  )
30
26
  )}
31
27
  type={onclick ? 'button' : undefined}
32
28
  role={onclick ? 'button' : undefined}
33
29
  {onclick}
34
- tabindex="0"
35
30
  data-testid={testId}
36
31
  >
37
- <div class="relative flex h-full w-full flex-row items-center">
32
+ <div
33
+ class={[
34
+ 'relative flex h-full w-full flex-row items-center overflow-visible transition-all',
35
+ value ? 'translate-x-full' : ''
36
+ ]}
37
+ >
38
38
  <div
39
39
  class={[
40
40
  'relative flex aspect-square h-full items-center justify-center rounded-full transition-all',
41
- value ? 'bg-surface-50' : 'bg-surface-600-400 group-hover:bg-surface-700-300'
41
+ value
42
+ ? 'bg-surface-50 -translate-x-full'
43
+ : 'bg-surface-100-900 group-hover:bg-surface-50-950'
42
44
  ]}
43
- style={value ? `left: calc(100% - ${thumbWidth}px);` : 'left: 0;'}
44
- bind:clientWidth={thumbWidth}
45
45
  >
46
46
  {@render children?.()}
47
47
  </div>
48
48
  </div>
49
49
  </svelte:element>
50
+
51
+ <style>
52
+ </style>
package/dist/components/basic/toggle/Toggle.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,GAAG;IACT,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAkCN,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,GAAG;IACT,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAqCN,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
package/package.json CHANGED
@@ -109,5 +109,5 @@
109
109
  "svelte": "./dist/index.js",
110
110
  "type": "module",
111
111
  "types": "./dist/index.d.ts",
112
- "version": "0.0.16"
112
+ "version": "0.0.17"
113
113
  }
package/src/lib/components/basic/toggle/Toggle.svelte CHANGED
@@ -13,37 +13,40 @@
13
13
  };
14
14
 
15
15
  let { value, class: clazz, onclick, children, testId }: Props = $props();
16
-
17
- let thumbWidth = $state(0);
18
16
  </script>
19
17
 
20
18
  <svelte:element
21
19
  this={onclick ? 'button' : 'div'}
22
20
  class={twMerge(
23
21
  clsx(
24
- 'group flex h-5 w-9 items-center rounded-full border p-0.5 transition-colors duration-100',
25
- value
26
- ? 'bg-primary-500 border-primary-500'
27
- : 'bg-surface-500/30 border-surface-500/60 hover:border-surface-500/80',
22
+ 'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors duration-100',
23
+ value ? 'bg-primary-500' : 'bg-surface-300-700',
28
24
  clazz
29
25
  )
30
26
  )}
31
27
  type={onclick ? 'button' : undefined}
32
28
  role={onclick ? 'button' : undefined}
33
29
  {onclick}
34
- tabindex="0"
35
30
  data-testid={testId}
36
31
  >
37
- <div class="relative flex h-full w-full flex-row items-center">
32
+ <div
33
+ class={[
34
+ 'relative flex h-full w-full flex-row items-center overflow-visible transition-all',
35
+ value ? 'translate-x-full' : ''
36
+ ]}
37
+ >
38
38
  <div
39
39
  class={[
40
40
  'relative flex aspect-square h-full items-center justify-center rounded-full transition-all',
41
- value ? 'bg-surface-50' : 'bg-surface-600-400 group-hover:bg-surface-700-300'
41
+ value
42
+ ? 'bg-surface-50 -translate-x-full'
43
+ : 'bg-surface-100-900 group-hover:bg-surface-50-950'
42
44
  ]}
43
- style={value ? `left: calc(100% - ${thumbWidth}px);` : 'left: 0;'}
44
- bind:clientWidth={thumbWidth}
45
45
  >
46
46
  {@render children?.()}
47
47
  </div>
48
48
  </div>
49
49
  </svelte:element>
50
+
51
+ <style lang="postcss">
52
+ </style>