@ims360/svelte-ivory 0.0.16 → 0.0.18

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 (12) hide show
  1. package/dist/components/basic/toggle/Toggle.svelte +11 -11
  2. package/dist/components/basic/toggle/Toggle.svelte.d.ts.map +1 -1
  3. package/dist/components/layout/index.d.ts +1 -1
  4. package/dist/components/layout/index.d.ts.map +1 -1
  5. package/dist/components/layout/index.js +1 -1
  6. package/dist/components/layout/portal/Portal.svelte +17 -2
  7. package/dist/components/layout/portal/Portal.svelte.d.ts +4 -0
  8. package/dist/components/layout/portal/Portal.svelte.d.ts.map +1 -1
  9. package/package.json +1 -1
  10. package/src/lib/components/basic/toggle/Toggle.svelte +11 -11
  11. package/src/lib/components/layout/index.ts +1 -1
  12. package/src/lib/components/layout/portal/Portal.svelte +17 -2
package/dist/components/basic/toggle/Toggle.svelte CHANGED
@@ -13,35 +13,35 @@
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>
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;AAmCN,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
package/dist/components/layout/index.d.ts CHANGED
@@ -3,7 +3,7 @@ export { default as Heading } from './heading/index';
3
3
  export { default as HiddenBackground } from './hiddenBackground/index';
4
4
  export { default as Modal, type ModalProps } from './modal/Modal.svelte';
5
5
  export { default as Popover } from './popover/Popover.svelte';
6
- export { default as Portal } from './portal/Portal.svelte';
6
+ export { default as Portal, setConfig, type PortalConfig } from './portal/Portal.svelte';
7
7
  export { default as Tabs } from './tabs/index';
8
8
  export { default as Tooltip } from './tooltip/Tooltip.svelte';
9
9
  //# sourceMappingURL=index.d.ts.map
package/dist/components/layout/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC"}
package/dist/components/layout/index.js CHANGED
@@ -3,6 +3,6 @@ export { default as Heading } from './heading/index';
3
3
  export { default as HiddenBackground } from './hiddenBackground/index';
4
4
  export { default as Modal } from './modal/Modal.svelte';
5
5
  export { default as Popover } from './popover/Popover.svelte';
6
- export { default as Portal } from './portal/Portal.svelte';
6
+ export { default as Portal, setConfig } from './portal/Portal.svelte';
7
7
  export { default as Tabs } from './tabs/index';
8
8
  export { default as Tooltip } from './tooltip/Tooltip.svelte';
package/dist/components/layout/portal/Portal.svelte CHANGED
@@ -1,3 +1,18 @@
1
+ <script lang="ts" module>
2
+ export interface PortalConfig {
3
+ defaultTarget: string;
4
+ }
5
+
6
+ const defaultConfig: PortalConfig = {
7
+ defaultTarget: 'body'
8
+ };
9
+
10
+ let config = $state<PortalConfig>(defaultConfig);
11
+ export function setConfig(newConfig: Partial<PortalConfig>) {
12
+ config = { ...defaultConfig, ...newConfig };
13
+ }
14
+ </script>
15
+
1
16
  <script lang="ts">
2
17
  import type { Snippet } from 'svelte';
3
18
  import { portal } from '../../../utils/actions/index';
@@ -7,7 +22,7 @@
7
22
  target?: string | HTMLElement;
8
23
  }
9
24
 
10
- let { children, target = 'body' }: Props = $props();
25
+ let { children, target }: Props = $props();
11
26
  </script>
12
27
 
13
28
  <!--
@@ -18,6 +33,6 @@
18
33
 
19
34
  **Use sparingy as it can make the DOM structure confusing**
20
35
  -->
21
- <div use:portal={target} hidden>
36
+ <div use:portal={target ?? config.defaultTarget} hidden>
22
37
  {@render children()}
23
38
  </div>
package/dist/components/layout/portal/Portal.svelte.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ export interface PortalConfig {
2
+ defaultTarget: string;
3
+ }
4
+ export declare function setConfig(newConfig: Partial<PortalConfig>): void;
1
5
  import type { Snippet } from 'svelte';
2
6
  interface Props {
3
7
  children: Snippet;
package/dist/components/layout/portal/Portal.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Portal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/portal/Portal.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIlC,UAAU,KAAK;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CACjC;AAgBL;;;;;;GAMG;AACH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Portal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/portal/Portal.svelte.ts"],"names":[],"mappings":"AAGI,MAAM,WAAW,YAAY;IACzB,aAAa,EAAE,MAAM,CAAC;CACzB;AAOD,wBAAgB,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,QAEzD;AAGL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIlC,UAAU,KAAK;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CACjC;AAkBL;;;;;;GAMG;AACH,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.18"
113
113
  }
package/src/lib/components/basic/toggle/Toggle.svelte CHANGED
@@ -13,35 +13,35 @@
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>
package/src/lib/components/layout/index.ts CHANGED
@@ -3,6 +3,6 @@ export { default as Heading } from './heading/index';
3
3
  export { default as HiddenBackground } from './hiddenBackground/index';
4
4
  export { default as Modal, type ModalProps } from './modal/Modal.svelte';
5
5
  export { default as Popover } from './popover/Popover.svelte';
6
- export { default as Portal } from './portal/Portal.svelte';
6
+ export { default as Portal, setConfig, type PortalConfig } from './portal/Portal.svelte';
7
7
  export { default as Tabs } from './tabs/index';
8
8
  export { default as Tooltip } from './tooltip/Tooltip.svelte';
package/src/lib/components/layout/portal/Portal.svelte CHANGED
@@ -1,3 +1,18 @@
1
+ <script lang="ts" module>
2
+ export interface PortalConfig {
3
+ defaultTarget: string;
4
+ }
5
+
6
+ const defaultConfig: PortalConfig = {
7
+ defaultTarget: 'body'
8
+ };
9
+
10
+ let config = $state<PortalConfig>(defaultConfig);
11
+ export function setConfig(newConfig: Partial<PortalConfig>) {
12
+ config = { ...defaultConfig, ...newConfig };
13
+ }
14
+ </script>
15
+
1
16
  <script lang="ts">
2
17
  import type { Snippet } from 'svelte';
3
18
  import { portal } from '../../../utils/actions/index';
@@ -7,7 +22,7 @@
7
22
  target?: string | HTMLElement;
8
23
  }
9
24
 
10
- let { children, target = 'body' }: Props = $props();
25
+ let { children, target }: Props = $props();
11
26
  </script>
12
27
 
13
28
  <!--
@@ -18,6 +33,6 @@
18
33
 
19
34
  **Use sparingy as it can make the DOM structure confusing**
20
35
  -->
21
- <div use:portal={target} hidden>
36
+ <div use:portal={target ?? config.defaultTarget} hidden>
22
37
  {@render children()}
23
38
  </div>