@ims360/svelte-ivory 0.2.2 → 0.2.4

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 (14) hide show
  1. package/dist/components/layout/index.d.ts +1 -1
  2. package/dist/components/layout/index.d.ts.map +1 -1
  3. package/dist/components/layout/modal/Modal.svelte +10 -5
  4. package/dist/components/layout/modal/Modal.svelte.d.ts +2 -2
  5. package/dist/components/layout/modal/Modal.svelte.d.ts.map +1 -1
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.d.ts.map +1 -1
  8. package/dist/theme.svelte.d.ts +3 -0
  9. package/dist/theme.svelte.d.ts.map +1 -1
  10. package/package.json +1 -1
  11. package/src/lib/components/layout/index.ts +1 -1
  12. package/src/lib/components/layout/modal/Modal.svelte +10 -5
  13. package/src/lib/index.ts +9 -0
  14. package/src/lib/theme.svelte.ts +3 -0
package/dist/components/layout/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export { default as Drawer } from './drawer/Drawer.svelte';
2
2
  export { default as Heading } from './Heading.svelte';
3
3
  export { default as HiddenBackground } from './hiddenBackground/HiddenBackground.svelte';
4
- export { default as Modal, type ModalProps, type ModalVariant } from './modal/Modal.svelte';
4
+ export { default as Modal, type ModalProps } from './modal/Modal.svelte';
5
5
  export { default as Popover, type PopoverPlacement, type PopoverProps } from './popover/Popover.svelte';
6
6
  export { getTabContext, Tab, TabPanel, Tabs, type TabPanelProps, type TabProps, type TabsProps } from './tabs';
7
7
  export { default as Tooltip, type TooltipProps } from './tooltip/Tooltip.svelte';
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,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACH,aAAa,EACb,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,SAAS,EACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,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,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACH,aAAa,EACb,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,SAAS,EACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC"}
package/dist/components/layout/modal/Modal.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script lang="ts" module>
2
+ import type { Variant } from '../../..';
2
3
  import { theme } from '../../../theme.svelte';
3
4
  import type { TransitionProps } from '../../../types';
4
5
  import { merge } from '../../../utils/merge';
@@ -23,12 +24,10 @@
23
24
  * */
24
25
  closeOnOutsideClick?: boolean;
25
26
  /** Variant of the modal, applies styling to the header */
26
- variant?: ModalVariant;
27
+ variant?: Variant;
27
28
  title?: string | Snippet;
28
29
  onclick?: MouseEventHandler<HTMLDivElement>;
29
30
  };
30
-
31
- export type ModalVariant = 'success' | 'warning' | 'error' | 'info';
32
31
  </script>
33
32
 
34
33
  <script lang="ts">
@@ -86,7 +85,10 @@
86
85
  onclose={() => {
87
86
  if (closeOnOutsideClick) close();
88
87
  }}
89
- class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
88
+ class={merge(
89
+ 'flex h-full w-full flex-col items-center justify-center p-8 lg:p-12 xl:p-16',
90
+ theme.current.modal?.dialog?.class
91
+ )}
90
92
  >
91
93
  {#if modal}
92
94
  <div {...rest} {onclick}>
@@ -108,10 +110,13 @@
108
110
  class={[
109
111
  'flex flex-row items-center justify-between gap-4 px-4 py-3',
110
112
  !variant && 'pb-0',
113
+ variant === 'primary' && 'preset-tonal-primary',
114
+ variant === 'secondary' && 'preset-tonal-secondary',
115
+ variant === 'tertiary' && 'preset-tonal-tertiary',
111
116
  variant === 'success' && 'preset-tonal-success',
112
117
  variant === 'warning' && 'preset-tonal-warning',
113
118
  variant === 'error' && 'preset-tonal-error',
114
- variant === 'info' && 'preset-tonal-primary'
119
+ variant === 'surface' && 'preset-tonal-surface'
115
120
  ]}
116
121
  >
117
122
  {#if title}
package/dist/components/layout/modal/Modal.svelte.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { Variant } from '../../..';
1
2
  import type { TransitionProps } from '../../../types';
2
3
  import { type Snippet } from 'svelte';
3
4
  import type { ClassValue, MouseEventHandler } from 'svelte/elements';
@@ -16,11 +17,10 @@ export type ModalProps = TransitionProps & {
16
17
  * */
17
18
  closeOnOutsideClick?: boolean;
18
19
  /** Variant of the modal, applies styling to the header */
19
- variant?: ModalVariant;
20
+ variant?: Variant;
20
21
  title?: string | Snippet;
21
22
  onclick?: MouseEventHandler<HTMLDivElement>;
22
23
  };
23
- export type ModalVariant = 'success' | 'warning' | 'error' | 'info';
24
24
  interface Props extends ModalProps {
25
25
  /** If you don't want the title and close button to be included you can overwrite the default modal */
26
26
  modal?: Snippet;
package/dist/components/layout/modal/Modal.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAgGL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAsGL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { theme, type Theme } from './theme.svelte';
2
2
  export { type IvoryComponent } from './types';
3
+ export type Variant = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'surface';
3
4
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,OAAO,GACb,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAC"}
package/dist/theme.svelte.d.ts CHANGED
@@ -26,6 +26,9 @@ export interface Theme {
26
26
  modal?: {
27
27
  class?: ClassValue;
28
28
  innerClass?: ClassValue;
29
+ dialog?: {
30
+ class?: ClassValue;
31
+ };
29
32
  };
30
33
  popover?: {
31
34
  class?: ClassValue;
package/dist/theme.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/theme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,UAAU,CAAC;KAC9D,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,gBAAgB,CAAC,EAAE;QACf,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE;QACH,GAAG,CAAC,EAAE;YACF,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,CAAC;SAC3C,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,UAAU,CAAC,EAAE,UAAU,CAAC;KAC3B,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;QACzD,KAAK,CAAC,EAAE;YACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;SAC5D,CAAC;QACF,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE;gBACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;gBAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;aACtB,CAAC;YACF,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;CACL;AAkBD,eAAO,MAAM,KAAK;uBAZS,KAAK;aAGF,KAAK;CASD,CAAC"}
1
+ {"version":3,"file":"theme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/theme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,UAAU,CAAC;KAC9D,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,gBAAgB,CAAC,EAAE;QACf,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE;QACH,GAAG,CAAC,EAAE;YACF,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,CAAC;SAC3C,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;QACzD,KAAK,CAAC,EAAE;YACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;SAC5D,CAAC;QACF,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE;gBACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;gBAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;aACtB,CAAC;YACF,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;CACL;AAkBD,eAAO,MAAM,KAAK;uBAZS,KAAK;aAGF,KAAK;CASD,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ims360/svelte-ivory",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "keywords": [
5
5
  "svelte"
6
6
  ],
package/src/lib/components/layout/index.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export { default as Drawer } from './drawer/Drawer.svelte';
2
2
  export { default as Heading } from './Heading.svelte';
3
3
  export { default as HiddenBackground } from './hiddenBackground/HiddenBackground.svelte';
4
- export { default as Modal, type ModalProps, type ModalVariant } from './modal/Modal.svelte';
4
+ export { default as Modal, type ModalProps } from './modal/Modal.svelte';
5
5
  export {
6
6
  default as Popover,
7
7
  type PopoverPlacement,
package/src/lib/components/layout/modal/Modal.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script lang="ts" module>
2
+ import type { Variant } from '$lib';
2
3
  import { theme } from '$lib/theme.svelte';
3
4
  import type { TransitionProps } from '$lib/types';
4
5
  import { merge } from '$lib/utils/merge';
@@ -23,12 +24,10 @@
23
24
  * */
24
25
  closeOnOutsideClick?: boolean;
25
26
  /** Variant of the modal, applies styling to the header */
26
- variant?: ModalVariant;
27
+ variant?: Variant;
27
28
  title?: string | Snippet;
28
29
  onclick?: MouseEventHandler<HTMLDivElement>;
29
30
  };
30
-
31
- export type ModalVariant = 'success' | 'warning' | 'error' | 'info';
32
31
  </script>
33
32
 
34
33
  <script lang="ts">
@@ -86,7 +85,10 @@
86
85
  onclose={() => {
87
86
  if (closeOnOutsideClick) close();
88
87
  }}
89
- class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
88
+ class={merge(
89
+ 'flex h-full w-full flex-col items-center justify-center p-8 lg:p-12 xl:p-16',
90
+ theme.current.modal?.dialog?.class
91
+ )}
90
92
  >
91
93
  {#if modal}
92
94
  <div {...rest} {onclick}>
@@ -108,10 +110,13 @@
108
110
  class={[
109
111
  'flex flex-row items-center justify-between gap-4 px-4 py-3',
110
112
  !variant && 'pb-0',
113
+ variant === 'primary' && 'preset-tonal-primary',
114
+ variant === 'secondary' && 'preset-tonal-secondary',
115
+ variant === 'tertiary' && 'preset-tonal-tertiary',
111
116
  variant === 'success' && 'preset-tonal-success',
112
117
  variant === 'warning' && 'preset-tonal-warning',
113
118
  variant === 'error' && 'preset-tonal-error',
114
- variant === 'info' && 'preset-tonal-primary'
119
+ variant === 'surface' && 'preset-tonal-surface'
115
120
  ]}
116
121
  >
117
122
  {#if title}
package/src/lib/index.ts CHANGED
@@ -1,3 +1,12 @@
1
1
  // Reexport your entry components here
2
2
  export { theme, type Theme } from './theme.svelte';
3
3
  export { type IvoryComponent } from './types';
4
+
5
+ export type Variant =
6
+ | 'primary'
7
+ | 'secondary'
8
+ | 'tertiary'
9
+ | 'success'
10
+ | 'warning'
11
+ | 'error'
12
+ | 'surface';
package/src/lib/theme.svelte.ts CHANGED
@@ -27,6 +27,9 @@ export interface Theme {
27
27
  modal?: {
28
28
  class?: ClassValue;
29
29
  innerClass?: ClassValue;
30
+ dialog?: {
31
+ class?: ClassValue;
32
+ };
30
33
  };
31
34
  popover?: {
32
35
  class?: ClassValue;