@insymetri/styleguide 0.1.0 → 0.1.2

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 (21) hide show
  1. package/dist/IIAuditTrail/IIAuditTrail.svelte +25 -40
  2. package/dist/IIAuditTrail/IIAuditTrail.svelte.d.ts +1 -2
  3. package/dist/IICheckbox/IICheckbox.svelte +2 -2
  4. package/dist/IICombobox/IICombobox.svelte +3 -3
  5. package/dist/IIDatePicker/IIDatePicker.svelte +2 -2
  6. package/dist/IIDropdownInput/IIDropdownInput.svelte +3 -3
  7. package/dist/IIDropdownMenu/IIDropdownMenu.svelte +2 -2
  8. package/dist/IIEditableBadges/IIEditableBadges.svelte +2 -2
  9. package/dist/IIFilterChip/IIFilterChip.svelte +2 -2
  10. package/dist/IIIcon/IIIcon.svelte +21 -0
  11. package/dist/IIIcon/IIIcon.svelte.d.ts +9 -0
  12. package/dist/IIIcon/index.d.ts +1 -0
  13. package/dist/IIIcon/index.js +1 -0
  14. package/dist/IIModal/IIModal.svelte +2 -2
  15. package/dist/IIOverflowActions/IIOverflowActions.svelte +2 -2
  16. package/dist/IITabs/IITabs.svelte +3 -3
  17. package/dist/icons.d.ts +77 -90
  18. package/dist/icons.js +88 -102
  19. package/dist/index.d.ts +3 -1
  20. package/dist/index.js +2 -1
  21. package/package.json +4 -13
package/dist/IIAuditTrail/IIAuditTrail.svelte CHANGED
@@ -1,22 +1,7 @@
1
1
  <script lang="ts">
2
- import type {Component} from 'svelte'
3
2
  import {cn} from '../utils/cn'
4
- import {
5
- IconPayment,
6
- IconDescription,
7
- IconAssignment,
8
- IconUpdate,
9
- IconCall,
10
- IconChat,
11
- IconMail,
12
- IconLogin,
13
- IconPerson,
14
- IconSms,
15
- IconAdd,
16
- IconUser,
17
- IconCalendar,
18
- IconCircle,
19
- } from '../icons'
3
+ import type {IconName} from '../icons'
4
+ import {IIIcon} from '../IIIcon'
20
5
 
21
6
  import type {Severity, AuditEvent, AuditFilter} from './IIAuditTrail.types'
22
7
 
@@ -33,29 +18,29 @@
33
18
 
34
19
  let activeFilter = $state('all')
35
20
 
36
- const categoryIcons: Record<string, Component> = {
37
- payment: IconPayment,
38
- document: IconDescription,
39
- loan: IconDescription,
40
- application: IconAssignment,
41
- task: IconAssignment,
42
- contact: IconPerson,
43
- phone: IconCall,
44
- call: IconCall,
45
- communication: IconChat,
46
- login: IconLogin,
47
- email: IconMail,
48
- sms: IconSms,
49
- created: IconAdd,
50
- status: IconUpdate,
51
- assignment: IconUser,
52
- priority: IconCircle,
53
- description: IconDescription,
54
- deadline: IconCalendar,
21
+ const categoryIcons: Record<string, IconName> = {
22
+ payment: 'credit-card',
23
+ document: 'file-text',
24
+ loan: 'file-text',
25
+ application: 'clipboard-text',
26
+ task: 'clipboard-text',
27
+ contact: 'user',
28
+ phone: 'phone',
29
+ call: 'phone',
30
+ communication: 'chats-circle',
31
+ login: 'sign-in',
32
+ email: 'envelope',
33
+ sms: 'chat-dots',
34
+ created: 'plus',
35
+ status: 'arrows-clockwise',
36
+ assignment: 'user',
37
+ priority: 'circle',
38
+ description: 'file-text',
39
+ deadline: 'calendar',
55
40
  }
56
41
 
57
- function getCategoryIcon(category: string): Component {
58
- return categoryIcons[category] || IconUpdate
42
+ function getCategoryIcon(category: string): IconName {
43
+ return categoryIcons[category] || 'arrows-clockwise'
59
44
  }
60
45
 
61
46
  const categorySeverity: Record<string, Severity> = {
@@ -129,7 +114,7 @@
129
114
  {:else}
130
115
  <div class={cn('flex flex-col', maxHeight && 'overflow-y-auto')} style:max-height={maxHeight}>
131
116
  {#each filteredEvents as event (event.id)}
132
- {@const EventIcon = getCategoryIcon(event.category)}
117
+ {@const iconName = getCategoryIcon(event.category)}
133
118
  <div
134
119
  class={cn(
135
120
  'flex gap-12 p-12 border-l-3 border-l-transparent transition-all duration-fast hover:bg-gray-50 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-b-primary',
@@ -141,7 +126,7 @@
141
126
  <div class="flex justify-between items-start mb-4">
142
127
  <div class="flex gap-8 items-start">
143
128
  <span class="text-secondary flex">
144
- <EventIcon class="w-20 h-20" />
129
+ <IIIcon icon={iconName} class="w-20 h-20" />
145
130
  </span>
146
131
  <div class="flex-1">
147
132
  <div class="text-small-emphasis text-body mb-4">{event.description}</div>
package/dist/IIAuditTrail/IIAuditTrail.svelte.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import type { Component } from 'svelte';
2
1
  import type { AuditEvent, AuditFilter } from './IIAuditTrail.types';
3
2
  type Props = {
4
3
  events: AuditEvent[];
@@ -8,6 +7,6 @@ type Props = {
8
7
  emptyMessage?: string;
9
8
  maxHeight?: string;
10
9
  };
11
- declare const IIAuditTrail: Component<Props, {}, "">;
10
+ declare const IIAuditTrail: import("svelte").Component<Props, {}, "">;
12
11
  type IIAuditTrail = ReturnType<typeof IIAuditTrail>;
13
12
  export default IIAuditTrail;
package/dist/IICheckbox/IICheckbox.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import type {Snippet} from 'svelte'
3
3
  import {Checkbox} from 'bits-ui'
4
- import {IconCheck} from '../icons'
4
+ import {IIIcon} from '../IIIcon'
5
5
  import {cn} from '../utils/cn'
6
6
 
7
7
  type Props = {
@@ -50,7 +50,7 @@
50
50
  )}
51
51
  >
52
52
  {#if checked}
53
- <IconCheck class={size === 'sm' ? 'w-12 h-12 text-white' : 'w-14 h-14 text-white'} />
53
+ <IIIcon icon="check" class={size === 'sm' ? 'w-12 h-12 text-white' : 'w-14 h-14 text-white'} />
54
54
  {/if}
55
55
  </div>
56
56
  </Checkbox.Root>
package/dist/IICombobox/IICombobox.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" generics="T">
2
2
  import type {Snippet} from 'svelte'
3
3
  import {Combobox} from 'bits-ui'
4
- import {IconCheck} from '../icons'
4
+ import {IIIcon} from '../IIIcon'
5
5
  import {cn} from '../utils/cn'
6
6
 
7
7
  // Simple default item type for basic usage
@@ -137,12 +137,12 @@
137
137
  {:else if isSimpleItem(item)}
138
138
  <span class="flex-1">{item.label}</span>
139
139
  {#if selected}
140
- <IconCheck class="w-18 h-18 shrink-0 ml-auto" />
140
+ <IIIcon icon="check" class="w-18 h-18 shrink-0 ml-auto" />
141
141
  {/if}
142
142
  {:else}
143
143
  <span class="flex-1">{getItemValue(item)}</span>
144
144
  {#if selected}
145
- <IconCheck class="w-18 h-18 shrink-0 ml-auto" />
145
+ <IIIcon icon="check" class="w-18 h-18 shrink-0 ml-auto" />
146
146
  {/if}
147
147
  {/if}
148
148
  {/snippet}
package/dist/IIDatePicker/IIDatePicker.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import {DatePicker} from 'bits-ui'
3
3
  import type {DateValue} from '@internationalized/date'
4
- import {IconCalendar} from '../icons'
4
+ import {IIIcon} from '../IIIcon'
5
5
 
6
6
  type Props = {
7
7
  value: DateValue | undefined
@@ -32,7 +32,7 @@
32
32
  <DatePicker.Trigger
33
33
  class="[all:unset] flex items-center justify-center p-4 ml-auto rounded-4 cursor-default text-secondary transition-all duration-fast hover:bg-gray-100 hover:text-body [&_svg]:w-11 [&_svg]:h-11 motion-reduce:transition-none"
34
34
  >
35
- <IconCalendar />
35
+ <IIIcon icon="calendar" />
36
36
  </DatePicker.Trigger>
37
37
  {/snippet}
38
38
  </DatePicker.Input>
package/dist/IIDropdownInput/IIDropdownInput.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
2
  import {DropdownMenu} from 'bits-ui'
3
- import {IconExpandMore, IconCheck} from '../icons'
3
+ import {IIIcon} from '../IIIcon'
4
4
  import {cn} from '../utils/cn'
5
5
 
6
6
  type Item = {
@@ -50,7 +50,7 @@
50
50
  <span class={cn('text-small', value !== undefined ? 'text-input-text' : 'text-input-placeholder')}
51
51
  >{selectedLabel}</span
52
52
  >
53
- <IconExpandMore class="w-14 h-14 text-secondary shrink-0" />
53
+ <IIIcon icon="caret-down" class="w-14 h-14 text-secondary shrink-0" />
54
54
  </DropdownMenu.Trigger>
55
55
  <DropdownMenu.Content
56
56
  class="min-w-100 bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 outline-none"
@@ -68,7 +68,7 @@
68
68
  >
69
69
  <span>{item.label}</span>
70
70
  {#if value === item.value}
71
- <IconCheck class="w-14 h-14 text-accent shrink-0" />
71
+ <IIIcon icon="check" class="w-14 h-14 text-accent shrink-0" />
72
72
  {/if}
73
73
  </DropdownMenu.Item>
74
74
  {/each}
package/dist/IIDropdownMenu/IIDropdownMenu.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  import type {Snippet} from 'svelte'
3
3
  import {DropdownMenu} from 'bits-ui'
4
4
  import {cn} from '../utils/cn'
5
- import {IconMoreVert} from '../icons'
5
+ import {IIIcon} from '../IIIcon'
6
6
 
7
7
  type Item = {
8
8
  label: string
@@ -38,7 +38,7 @@
38
38
  {#if children}
39
39
  {@render children()}
40
40
  {:else}
41
- <IconMoreVert />
41
+ <IIIcon icon="dots-three-vertical" />
42
42
  {/if}
43
43
  </DropdownMenu.Trigger>
44
44
  <DropdownMenu.Portal>
package/dist/IIEditableBadges/IIEditableBadges.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
2
  import {Popover} from 'bits-ui'
3
- import {IconCheck} from '../icons'
3
+ import {IIIcon} from '../IIIcon'
4
4
  import IIBadge from '../IIBadge/IIBadge.svelte'
5
5
  import type {BadgeVariant} from '../IIBadge/IIBadge.types'
6
6
  import {cn} from '../utils/cn'
@@ -81,7 +81,7 @@
81
81
  >
82
82
  <span class="flex-1 text-left">{item.label}</span>
83
83
  {#if isSelected}
84
- <IconCheck class="w-11 h-11 text-accent ml-8 shrink-0" />
84
+ <IIIcon icon="check" class="w-11 h-11 text-accent ml-8 shrink-0" />
85
85
  {/if}
86
86
  </button>
87
87
  {/each}
package/dist/IIFilterChip/IIFilterChip.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import {IconClose} from '../icons'
2
+ import {IIIcon} from '../IIIcon'
3
3
 
4
4
  type Props = {
5
5
  fieldLabel: string
@@ -42,6 +42,6 @@
42
42
  onclick={onRemove}
43
43
  aria-label="Remove filter"
44
44
  >
45
- <IconClose />
45
+ <IIIcon icon="x" />
46
46
  </button>
47
47
  </span>
package/dist/IIIcon/IIIcon.svelte ADDED
@@ -0,0 +1,21 @@
1
+ <script lang="ts">
2
+ import {icons, type IconName} from '../icons'
3
+
4
+ interface Props {
5
+ icon: IconName
6
+ class?: string
7
+ [key: string]: unknown
8
+ }
9
+
10
+ let {icon, class: className = '', ...rest}: Props = $props()
11
+ </script>
12
+
13
+ <svg
14
+ xmlns="http://www.w3.org/2000/svg"
15
+ viewBox="0 0 256 256"
16
+ fill="currentColor"
17
+ class={className}
18
+ {...rest}
19
+ >
20
+ {@html icons[icon]}
21
+ </svg>
package/dist/IIIcon/IIIcon.svelte.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { type IconName } from '../icons';
2
+ interface Props {
3
+ icon: IconName;
4
+ class?: string;
5
+ [key: string]: unknown;
6
+ }
7
+ declare const IIIcon: import("svelte").Component<Props, {}, "">;
8
+ type IIIcon = ReturnType<typeof IIIcon>;
9
+ export default IIIcon;
package/dist/IIIcon/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as IIIcon } from './IIIcon.svelte';
package/dist/IIIcon/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default as IIIcon } from './IIIcon.svelte';
package/dist/IIModal/IIModal.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import type {Snippet} from 'svelte'
3
3
  import {Dialog} from 'bits-ui'
4
- import {IconClose} from '../icons'
4
+ import {IIIcon} from '../IIIcon'
5
5
  import {cn} from '../utils/cn'
6
6
 
7
7
  type Props = {
@@ -59,7 +59,7 @@
59
59
  <Dialog.Close
60
60
  class="[all:unset] cursor-default flex items-center justify-center p-4 rounded-4 text-secondary transition-all duration-fast hover:bg-background hover:text-body motion-reduce:transition-none"
61
61
  >
62
- <IconClose class="size-20" />
62
+ <IIIcon icon="x" class="size-20" />
63
63
  </Dialog.Close>
64
64
  {/if}
65
65
  </div>
package/dist/IIOverflowActions/IIOverflowActions.svelte CHANGED
@@ -3,7 +3,7 @@
3
3
  import {DropdownMenu} from 'bits-ui'
4
4
  import {IIButton} from '../IIButton'
5
5
  import {cn} from '../utils/cn'
6
- import {IconMoreVert} from '../icons'
6
+ import {IIIcon} from '../IIIcon'
7
7
 
8
8
  type Action = {
9
9
  label: string
@@ -69,7 +69,7 @@
69
69
  <DropdownMenu.Trigger
70
70
  class="[all:unset] cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary text-h3 transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none"
71
71
  >
72
- <IconMoreVert />
72
+ <IIIcon icon="dots-three-vertical" />
73
73
  </DropdownMenu.Trigger>
74
74
  <DropdownMenu.Content
75
75
  class="min-w-100 bg-surface border border-primary rounded-10 shadow-dropdown p-4 z-12"
package/dist/IITabs/IITabs.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import type {Snippet} from 'svelte'
3
3
  import {DropdownMenu, Tabs, type WithoutChildrenOrChild} from 'bits-ui'
4
- import {IconExpandMore, IconCheck} from '../icons'
4
+ import {IIIcon} from '../IIIcon'
5
5
  import {cn} from '../utils/cn'
6
6
 
7
7
  type Tab = {
@@ -72,7 +72,7 @@
72
72
  class="[all:unset] inline-flex items-center gap-4 py-4 pr-8 pl-12 border border-primary rounded-10 bg-surface cursor-default transition-all duration-fast hover:border-strong motion-reduce:transition-none"
73
73
  >
74
74
  <span class="text-small-emphasis text-body">{activeLabel}</span>
75
- <IconExpandMore class="w-14 h-14 text-secondary shrink-0" />
75
+ <IIIcon icon="caret-down" class="w-14 h-14 text-secondary shrink-0" />
76
76
  </DropdownMenu.Trigger>
77
77
  <DropdownMenu.Content
78
78
  class="min-w-100 bg-surface border border-primary rounded-10 shadow-dropdown p-4 z-12"
@@ -90,7 +90,7 @@
90
90
  >
91
91
  <span>{tab.label}</span>
92
92
  {#if value === tab.value}
93
- <IconCheck class="w-14 h-14 text-accent shrink-0" />
93
+ <IIIcon icon="check" class="w-14 h-14 text-accent shrink-0" />
94
94
  {/if}
95
95
  </DropdownMenu.Item>
96
96
  {/each}
package/dist/icons.d.ts CHANGED
@@ -1,92 +1,79 @@
1
1
  /**
2
- * Centralized Phosphor icon exports
3
- *
4
- * All icons are imported from @iconify/json via unplugin-icons
5
- * Using Phosphor Regular weight for consistency
6
- *
7
- * Icon naming convention:
8
- * - Material "add" → IconAdd (Phosphor "plus")
9
- * - Material "arrow_back" → IconArrowLeft (Phosphor "arrow-left")
10
- * - Material "group" → IconUsers (Phosphor "users")
2
+ * Icon name map — keys are the typed icon names used with <IIIcon>,
3
+ * values are the Iconify identifiers (Phosphor Regular weight).
11
4
  */
12
- export { default as IconAdd } from '~icons/ph/plus';
13
- export { default as IconArrowLeft } from '~icons/ph/arrow-left';
14
- export { default as IconArrowRight } from '~icons/ph/arrow-right';
15
- export { default as IconClose } from '~icons/ph/x';
16
- export { default as IconCheck } from '~icons/ph/check';
17
- export { default as IconCheckCircle } from '~icons/ph/check-circle';
18
- export { default as IconSearch } from '~icons/ph/magnifying-glass';
19
- export { default as IconSearchOff } from '~icons/ph/magnifying-glass-minus';
20
- export { default as IconExpandMore } from '~icons/ph/caret-down';
21
- export { default as IconExpandLess } from '~icons/ph/caret-up';
22
- export { default as IconChevronLeft } from '~icons/ph/caret-left';
23
- export { default as IconChevronRight } from '~icons/ph/caret-right';
24
- export { default as IconChevronsRight } from '~icons/ph/caret-double-right';
25
- export { default as IconPlay } from '~icons/ph/play';
26
- export { default as IconCall } from '~icons/ph/phone';
27
- export { default as IconPhone } from '~icons/ph/phone';
28
- export { default as IconPhoneMissed } from '~icons/ph/phone-slash';
29
- export { default as IconPhoneDisconnect } from '~icons/ph/phone-disconnect';
30
- export { default as IconPhoneIncoming } from '~icons/ph/phone-incoming';
31
- export { default as IconPhoneOutgoing } from '~icons/ph/phone-outgoing';
32
- export { default as IconPhonePlus } from '~icons/ph/phone-plus';
33
- export { default as IconMicrophone } from '~icons/ph/microphone';
34
- export { default as IconMicrophoneSlash } from '~icons/ph/microphone-slash';
35
- export { default as IconSpeaker } from '~icons/ph/speaker-high';
36
- export { default as IconChat } from '~icons/ph/chats-circle';
37
- export { default as IconChatCircle } from '~icons/ph/chats-circle';
38
- export { default as IconSms } from '~icons/ph/chat-dots';
39
- export { default as IconMail } from '~icons/ph/envelope';
40
- export { default as IconSend } from '~icons/ph/paper-plane-tilt';
41
- export { default as IconPerson } from '~icons/ph/user';
42
- export { default as IconUser } from '~icons/ph/user';
43
- export { default as IconPersonAdd } from '~icons/ph/user-plus';
44
- export { default as IconUserPlus } from '~icons/ph/user-plus';
45
- export { default as IconUserCirclePlus } from '~icons/ph/user-circle-plus';
46
- export { default as IconUserRectangle } from '~icons/ph/user-rectangle';
47
- export { default as IconUserSwitch } from '~icons/ph/user-switch';
48
- export { default as IconUserFour } from '~icons/ph/users-four';
49
- export { default as IconUsers } from '~icons/ph/users';
50
- export { default as IconGroup } from '~icons/ph/users';
51
- export { default as IconAddressBook } from '~icons/ph/address-book';
52
- export { default as IconShieldCheck } from '~icons/ph/shield-check';
53
- export { default as IconDescription } from '~icons/ph/file-text';
54
- export { default as IconArticle } from '~icons/ph/article';
55
- export { default as IconAssignment } from '~icons/ph/clipboard-text';
56
- export { default as IconUploadFile } from '~icons/ph/upload-simple';
57
- export { default as IconNoteAdd } from '~icons/ph/note-pencil';
58
- export { default as IconEdit } from '~icons/ph/pencil-simple';
59
- export { default as IconEditNote } from '~icons/ph/note-pencil';
60
- export { default as IconPaid } from '~icons/ph/currency-dollar-simple';
61
- export { default as IconPayment } from '~icons/ph/credit-card';
62
- export { default as IconPayments } from '~icons/ph/money';
63
- export { default as IconBank } from '~icons/ph/bank';
64
- export { default as IconCalendar } from '~icons/ph/calendar';
65
- export { default as IconSchedule } from '~icons/ph/clock';
66
- export { default as IconSnooze } from '~icons/ph/clock-countdown';
67
- export { default as IconClockClockwise } from '~icons/ph/clock-clockwise';
68
- export { default as IconUpdate } from '~icons/ph/arrows-clockwise';
69
- export { default as IconSync } from '~icons/ph/arrows-clockwise';
70
- export { default as IconDashboard } from '~icons/ph/squares-four';
71
- export { default as IconMonitoring } from '~icons/ph/chart-line';
72
- export { default as IconSettings } from '~icons/ph/gear';
73
- export { default as IconViewList } from '~icons/ph/list';
74
- export { default as IconGridView } from '~icons/ph/grid-four';
75
- export { default as IconListAlt } from '~icons/ph/list-bullets';
76
- export { default as IconMoreVert } from '~icons/ph/dots-three-vertical';
77
- export { default as IconDelete } from '~icons/ph/trash';
78
- export { default as IconCircle } from '~icons/ph/circle';
79
- export { default as IconError } from '~icons/ph/warning-circle';
80
- export { default as IconWarning } from '~icons/ph/warning';
81
- export { default as IconChangeCircle } from '~icons/ph/arrows-clockwise';
82
- export { default as IconGavel } from '~icons/ph/gavel';
83
- export { default as IconLogin } from '~icons/ph/sign-in';
84
- export { default as IconLogout } from '~icons/ph/sign-out';
85
- export { default as IconSortAsc } from '~icons/ph/sort-ascending';
86
- export { default as IconSortDesc } from '~icons/ph/sort-descending';
87
- export { default as IconFilter } from '~icons/ph/funnel';
88
- export { default as IconFilterFilled } from '~icons/ph/funnel-fill';
89
- export { default as IconEye } from '~icons/ph/eye';
90
- export { default as IconEyeSlash } from '~icons/ph/eye-slash';
91
- export { default as IconSmartToy } from '~icons/ph/robot';
92
- export { default as IconRobot } from '~icons/ph/robot';
5
+ export declare const icons: {
6
+ readonly plus: "ph:plus";
7
+ readonly 'arrow-left': "ph:arrow-left";
8
+ readonly 'arrow-right': "ph:arrow-right";
9
+ readonly x: "ph:x";
10
+ readonly check: "ph:check";
11
+ readonly 'check-circle': "ph:check-circle";
12
+ readonly 'magnifying-glass': "ph:magnifying-glass";
13
+ readonly 'magnifying-glass-minus': "ph:magnifying-glass-minus";
14
+ readonly 'caret-down': "ph:caret-down";
15
+ readonly 'caret-up': "ph:caret-up";
16
+ readonly 'caret-left': "ph:caret-left";
17
+ readonly 'caret-right': "ph:caret-right";
18
+ readonly 'caret-double-right': "ph:caret-double-right";
19
+ readonly play: "ph:play";
20
+ readonly phone: "ph:phone";
21
+ readonly 'phone-slash': "ph:phone-slash";
22
+ readonly 'phone-disconnect': "ph:phone-disconnect";
23
+ readonly 'phone-incoming': "ph:phone-incoming";
24
+ readonly 'phone-outgoing': "ph:phone-outgoing";
25
+ readonly 'phone-plus': "ph:phone-plus";
26
+ readonly microphone: "ph:microphone";
27
+ readonly 'microphone-slash': "ph:microphone-slash";
28
+ readonly 'speaker-high': "ph:speaker-high";
29
+ readonly 'chats-circle': "ph:chats-circle";
30
+ readonly 'chat-dots': "ph:chat-dots";
31
+ readonly envelope: "ph:envelope";
32
+ readonly 'paper-plane-tilt': "ph:paper-plane-tilt";
33
+ readonly user: "ph:user";
34
+ readonly 'user-plus': "ph:user-plus";
35
+ readonly 'user-circle-plus': "ph:user-circle-plus";
36
+ readonly 'user-rectangle': "ph:user-rectangle";
37
+ readonly 'user-switch': "ph:user-switch";
38
+ readonly 'users-four': "ph:users-four";
39
+ readonly users: "ph:users";
40
+ readonly 'address-book': "ph:address-book";
41
+ readonly 'shield-check': "ph:shield-check";
42
+ readonly 'file-text': "ph:file-text";
43
+ readonly article: "ph:article";
44
+ readonly 'clipboard-text': "ph:clipboard-text";
45
+ readonly 'upload-simple': "ph:upload-simple";
46
+ readonly 'note-pencil': "ph:note-pencil";
47
+ readonly 'pencil-simple': "ph:pencil-simple";
48
+ readonly 'currency-dollar-simple': "ph:currency-dollar-simple";
49
+ readonly 'credit-card': "ph:credit-card";
50
+ readonly money: "ph:money";
51
+ readonly bank: "ph:bank";
52
+ readonly calendar: "ph:calendar";
53
+ readonly clock: "ph:clock";
54
+ readonly 'clock-countdown': "ph:clock-countdown";
55
+ readonly 'clock-clockwise': "ph:clock-clockwise";
56
+ readonly 'arrows-clockwise': "ph:arrows-clockwise";
57
+ readonly 'squares-four': "ph:squares-four";
58
+ readonly 'chart-line': "ph:chart-line";
59
+ readonly gear: "ph:gear";
60
+ readonly list: "ph:list";
61
+ readonly 'grid-four': "ph:grid-four";
62
+ readonly 'list-bullets': "ph:list-bullets";
63
+ readonly 'dots-three-vertical': "ph:dots-three-vertical";
64
+ readonly trash: "ph:trash";
65
+ readonly circle: "ph:circle";
66
+ readonly 'warning-circle': "ph:warning-circle";
67
+ readonly warning: "ph:warning";
68
+ readonly gavel: "ph:gavel";
69
+ readonly 'sign-in': "ph:sign-in";
70
+ readonly 'sign-out': "ph:sign-out";
71
+ readonly 'sort-ascending': "ph:sort-ascending";
72
+ readonly 'sort-descending': "ph:sort-descending";
73
+ readonly funnel: "ph:funnel";
74
+ readonly 'funnel-fill': "ph:funnel-fill";
75
+ readonly eye: "ph:eye";
76
+ readonly 'eye-slash': "ph:eye-slash";
77
+ readonly robot: "ph:robot";
78
+ };
79
+ export type IconName = keyof typeof icons;
package/dist/icons.js CHANGED
@@ -1,104 +1,90 @@
1
1
  /**
2
- * Centralized Phosphor icon exports
3
- *
4
- * All icons are imported from @iconify/json via unplugin-icons
5
- * Using Phosphor Regular weight for consistency
6
- *
7
- * Icon naming convention:
8
- * - Material "add" → IconAdd (Phosphor "plus")
9
- * - Material "arrow_back" → IconArrowLeft (Phosphor "arrow-left")
10
- * - Material "group" → IconUsers (Phosphor "users")
2
+ * Icon name map — keys are the typed icon names used with <IIIcon>,
3
+ * values are the Iconify identifiers (Phosphor Regular weight).
11
4
  */
12
- // === Navigation & Actions ===
13
- export { default as IconAdd } from '~icons/ph/plus';
14
- export { default as IconArrowLeft } from '~icons/ph/arrow-left';
15
- export { default as IconArrowRight } from '~icons/ph/arrow-right';
16
- export { default as IconClose } from '~icons/ph/x';
17
- export { default as IconCheck } from '~icons/ph/check';
18
- export { default as IconCheckCircle } from '~icons/ph/check-circle';
19
- export { default as IconSearch } from '~icons/ph/magnifying-glass';
20
- export { default as IconSearchOff } from '~icons/ph/magnifying-glass-minus';
21
- export { default as IconExpandMore } from '~icons/ph/caret-down';
22
- export { default as IconExpandLess } from '~icons/ph/caret-up';
23
- export { default as IconChevronLeft } from '~icons/ph/caret-left';
24
- export { default as IconChevronRight } from '~icons/ph/caret-right';
25
- export { default as IconChevronsRight } from '~icons/ph/caret-double-right';
26
- export { default as IconPlay } from '~icons/ph/play';
27
- // === Communication ===
28
- export { default as IconCall } from '~icons/ph/phone';
29
- export { default as IconPhone } from '~icons/ph/phone';
30
- export { default as IconPhoneMissed } from '~icons/ph/phone-slash';
31
- export { default as IconPhoneDisconnect } from '~icons/ph/phone-disconnect';
32
- export { default as IconPhoneIncoming } from '~icons/ph/phone-incoming';
33
- export { default as IconPhoneOutgoing } from '~icons/ph/phone-outgoing';
34
- export { default as IconPhonePlus } from '~icons/ph/phone-plus';
35
- export { default as IconMicrophone } from '~icons/ph/microphone';
36
- export { default as IconMicrophoneSlash } from '~icons/ph/microphone-slash';
37
- export { default as IconSpeaker } from '~icons/ph/speaker-high';
38
- export { default as IconChat } from '~icons/ph/chats-circle';
39
- export { default as IconChatCircle } from '~icons/ph/chats-circle';
40
- export { default as IconSms } from '~icons/ph/chat-dots';
41
- export { default as IconMail } from '~icons/ph/envelope';
42
- export { default as IconSend } from '~icons/ph/paper-plane-tilt';
43
- // === People & Users ===
44
- export { default as IconPerson } from '~icons/ph/user';
45
- export { default as IconUser } from '~icons/ph/user';
46
- export { default as IconPersonAdd } from '~icons/ph/user-plus';
47
- export { default as IconUserPlus } from '~icons/ph/user-plus';
48
- export { default as IconUserCirclePlus } from '~icons/ph/user-circle-plus';
49
- export { default as IconUserRectangle } from '~icons/ph/user-rectangle';
50
- export { default as IconUserSwitch } from '~icons/ph/user-switch';
51
- export { default as IconUserFour } from '~icons/ph/users-four';
52
- export { default as IconUsers } from '~icons/ph/users';
53
- export { default as IconGroup } from '~icons/ph/users';
54
- export { default as IconAddressBook } from '~icons/ph/address-book';
55
- export { default as IconShieldCheck } from '~icons/ph/shield-check';
56
- // === Documents & Files ===
57
- export { default as IconDescription } from '~icons/ph/file-text';
58
- export { default as IconArticle } from '~icons/ph/article';
59
- export { default as IconAssignment } from '~icons/ph/clipboard-text';
60
- export { default as IconUploadFile } from '~icons/ph/upload-simple';
61
- export { default as IconNoteAdd } from '~icons/ph/note-pencil';
62
- export { default as IconEdit } from '~icons/ph/pencil-simple';
63
- export { default as IconEditNote } from '~icons/ph/note-pencil';
64
- // === Finance & Money ===
65
- export { default as IconPaid } from '~icons/ph/currency-dollar-simple';
66
- export { default as IconPayment } from '~icons/ph/credit-card';
67
- export { default as IconPayments } from '~icons/ph/money';
68
- export { default as IconBank } from '~icons/ph/bank';
69
- // === Time & Schedule ===
70
- export { default as IconCalendar } from '~icons/ph/calendar';
71
- export { default as IconSchedule } from '~icons/ph/clock';
72
- export { default as IconSnooze } from '~icons/ph/clock-countdown';
73
- export { default as IconClockClockwise } from '~icons/ph/clock-clockwise';
74
- export { default as IconUpdate } from '~icons/ph/arrows-clockwise';
75
- export { default as IconSync } from '~icons/ph/arrows-clockwise';
76
- // === UI Elements ===
77
- export { default as IconDashboard } from '~icons/ph/squares-four';
78
- export { default as IconMonitoring } from '~icons/ph/chart-line';
79
- export { default as IconSettings } from '~icons/ph/gear';
80
- export { default as IconViewList } from '~icons/ph/list';
81
- export { default as IconGridView } from '~icons/ph/grid-four';
82
- export { default as IconListAlt } from '~icons/ph/list-bullets';
83
- export { default as IconMoreVert } from '~icons/ph/dots-three-vertical';
84
- export { default as IconDelete } from '~icons/ph/trash';
85
- export { default as IconCircle } from '~icons/ph/circle';
86
- // === Status & Feedback ===
87
- export { default as IconError } from '~icons/ph/warning-circle';
88
- export { default as IconWarning } from '~icons/ph/warning';
89
- export { default as IconChangeCircle } from '~icons/ph/arrows-clockwise';
90
- // === Legal & Auth ===
91
- export { default as IconGavel } from '~icons/ph/gavel';
92
- export { default as IconLogin } from '~icons/ph/sign-in';
93
- export { default as IconLogout } from '~icons/ph/sign-out';
94
- // === Sort & Filter ===
95
- export { default as IconSortAsc } from '~icons/ph/sort-ascending';
96
- export { default as IconSortDesc } from '~icons/ph/sort-descending';
97
- export { default as IconFilter } from '~icons/ph/funnel';
98
- export { default as IconFilterFilled } from '~icons/ph/funnel-fill';
99
- // === Visibility ===
100
- export { default as IconEye } from '~icons/ph/eye';
101
- export { default as IconEyeSlash } from '~icons/ph/eye-slash';
102
- // === Other ===
103
- export { default as IconSmartToy } from '~icons/ph/robot';
104
- export { default as IconRobot } from '~icons/ph/robot';
5
+ export const icons = {
6
+ // Navigation & Actions
7
+ 'plus': 'ph:plus',
8
+ 'arrow-left': 'ph:arrow-left',
9
+ 'arrow-right': 'ph:arrow-right',
10
+ 'x': 'ph:x',
11
+ 'check': 'ph:check',
12
+ 'check-circle': 'ph:check-circle',
13
+ 'magnifying-glass': 'ph:magnifying-glass',
14
+ 'magnifying-glass-minus': 'ph:magnifying-glass-minus',
15
+ 'caret-down': 'ph:caret-down',
16
+ 'caret-up': 'ph:caret-up',
17
+ 'caret-left': 'ph:caret-left',
18
+ 'caret-right': 'ph:caret-right',
19
+ 'caret-double-right': 'ph:caret-double-right',
20
+ 'play': 'ph:play',
21
+ // Communication
22
+ 'phone': 'ph:phone',
23
+ 'phone-slash': 'ph:phone-slash',
24
+ 'phone-disconnect': 'ph:phone-disconnect',
25
+ 'phone-incoming': 'ph:phone-incoming',
26
+ 'phone-outgoing': 'ph:phone-outgoing',
27
+ 'phone-plus': 'ph:phone-plus',
28
+ 'microphone': 'ph:microphone',
29
+ 'microphone-slash': 'ph:microphone-slash',
30
+ 'speaker-high': 'ph:speaker-high',
31
+ 'chats-circle': 'ph:chats-circle',
32
+ 'chat-dots': 'ph:chat-dots',
33
+ 'envelope': 'ph:envelope',
34
+ 'paper-plane-tilt': 'ph:paper-plane-tilt',
35
+ // People & Users
36
+ 'user': 'ph:user',
37
+ 'user-plus': 'ph:user-plus',
38
+ 'user-circle-plus': 'ph:user-circle-plus',
39
+ 'user-rectangle': 'ph:user-rectangle',
40
+ 'user-switch': 'ph:user-switch',
41
+ 'users-four': 'ph:users-four',
42
+ 'users': 'ph:users',
43
+ 'address-book': 'ph:address-book',
44
+ 'shield-check': 'ph:shield-check',
45
+ // Documents & Files
46
+ 'file-text': 'ph:file-text',
47
+ 'article': 'ph:article',
48
+ 'clipboard-text': 'ph:clipboard-text',
49
+ 'upload-simple': 'ph:upload-simple',
50
+ 'note-pencil': 'ph:note-pencil',
51
+ 'pencil-simple': 'ph:pencil-simple',
52
+ // Finance & Money
53
+ 'currency-dollar-simple': 'ph:currency-dollar-simple',
54
+ 'credit-card': 'ph:credit-card',
55
+ 'money': 'ph:money',
56
+ 'bank': 'ph:bank',
57
+ // Time & Schedule
58
+ 'calendar': 'ph:calendar',
59
+ 'clock': 'ph:clock',
60
+ 'clock-countdown': 'ph:clock-countdown',
61
+ 'clock-clockwise': 'ph:clock-clockwise',
62
+ 'arrows-clockwise': 'ph:arrows-clockwise',
63
+ // UI Elements
64
+ 'squares-four': 'ph:squares-four',
65
+ 'chart-line': 'ph:chart-line',
66
+ 'gear': 'ph:gear',
67
+ 'list': 'ph:list',
68
+ 'grid-four': 'ph:grid-four',
69
+ 'list-bullets': 'ph:list-bullets',
70
+ 'dots-three-vertical': 'ph:dots-three-vertical',
71
+ 'trash': 'ph:trash',
72
+ 'circle': 'ph:circle',
73
+ // Status & Feedback
74
+ 'warning-circle': 'ph:warning-circle',
75
+ 'warning': 'ph:warning',
76
+ // Legal & Auth
77
+ 'gavel': 'ph:gavel',
78
+ 'sign-in': 'ph:sign-in',
79
+ 'sign-out': 'ph:sign-out',
80
+ // Sort & Filter
81
+ 'sort-ascending': 'ph:sort-ascending',
82
+ 'sort-descending': 'ph:sort-descending',
83
+ 'funnel': 'ph:funnel',
84
+ 'funnel-fill': 'ph:funnel-fill',
85
+ // Visibility
86
+ 'eye': 'ph:eye',
87
+ 'eye-slash': 'ph:eye-slash',
88
+ // Other
89
+ 'robot': 'ph:robot',
90
+ };
package/dist/index.d.ts CHANGED
@@ -14,6 +14,7 @@ export { IIEditableText } from './IIEditableText';
14
14
  export { IIEmptyState } from './IIEmptyState';
15
15
  export { IIFilterChip } from './IIFilterChip';
16
16
  export { IIFormField } from './IIFormField';
17
+ export { IIIcon } from './IIIcon';
17
18
  export { IIInput } from './IIInput';
18
19
  export { IIModal } from './IIModal';
19
20
  export { IIOverflowActions } from './IIOverflowActions';
@@ -30,4 +31,5 @@ export type { AuditEvent, AuditFilter, Severity } from './IIAuditTrail';
30
31
  export type { BadgeVariant } from './IIBadge';
31
32
  export { toast } from './toast';
32
33
  export { cn } from './utils/cn';
33
- export * from './icons';
34
+ export { icons } from './icons';
35
+ export type { IconName } from './icons';
package/dist/index.js CHANGED
@@ -16,6 +16,7 @@ export { IIEditableText } from './IIEditableText';
16
16
  export { IIEmptyState } from './IIEmptyState';
17
17
  export { IIFilterChip } from './IIFilterChip';
18
18
  export { IIFormField } from './IIFormField';
19
+ export { IIIcon } from './IIIcon';
19
20
  export { IIInput } from './IIInput';
20
21
  export { IIModal } from './IIModal';
21
22
  export { IIOverflowActions } from './IIOverflowActions';
@@ -32,4 +33,4 @@ export { IIViewFilterChip } from './IIViewFilterChip';
32
33
  export { toast } from './toast';
33
34
  export { cn } from './utils/cn';
34
35
  // Icons
35
- export * from './icons';
36
+ export { icons } from './icons';
package/package.json CHANGED
@@ -1,16 +1,13 @@
1
1
  {
2
2
  "name": "@insymetri/styleguide",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Insymetri shared UI component library built with Svelte 5",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "build": "svelte-package -i src/lib -o dist",
8
8
  "prepublishOnly": "npm run build",
9
9
  "storybook": "storybook dev -p 6006",
10
- "build-storybook": "storybook build",
11
- "changeset": "changeset",
12
- "version": "changeset version",
13
- "release": "npm run build && changeset publish"
10
+ "build-storybook": "storybook build"
14
11
  },
15
12
  "svelte": "./dist/index.js",
16
13
  "types": "./dist/index.d.ts",
@@ -42,9 +39,7 @@
42
39
  ],
43
40
  "peerDependencies": {
44
41
  "svelte": "^5.0.0",
45
- "tailwindcss": "^4.0.0",
46
- "unplugin-icons": "^22.0.0",
47
- "@iconify-json/ph": "*"
42
+ "tailwindcss": "^4.0.0"
48
43
  },
49
44
  "peerDependenciesMeta": {
50
45
  "tailwindcss": {
@@ -64,11 +59,7 @@
64
59
  "storybook": "^10.2.10",
65
60
  "svelte": "^5.0.0",
66
61
  "typescript": "^5.0.0",
67
- "tailwindcss": "^4.2.1",
68
- "unplugin-icons": "^22.5.0",
69
- "@iconify-json/ph": "^1.2.0",
70
- "@changesets/cli": "^2.27.0",
71
- "@changesets/changelog-github": "^0.5.0"
62
+ "tailwindcss": "^4.2.1"
72
63
  },
73
64
  "license": "UNLICENSED",
74
65
  "private": false,