do-ui-design-system 1.1.7 → 1.1.9

package/dist/do-theme/icomoon/icons.css

@@ -1,16 +1,17 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('./fonts/icomoon.eot?6stv37');
-  src:  url('./fonts/icomoon.eot?6stv37#iefix') format('embedded-opentype'),
-    url('./fonts/icomoon.ttf?6stv37') format('truetype'),
-    url('./fonts/icomoon.woff?6stv37') format('woff'),
-    url('./fonts/icomoon.svg?6stv37#icomoon') format('svg');
+  src: url('./fonts/icomoon.eot?ew4zhc');
+  src: url('./fonts/icomoon.eot?ew4zhc#iefix') format('embedded-opentype'),
+    url('./fonts/icomoon.ttf?ew4zhc') format('truetype'),
+    url('./fonts/icomoon.woff?ew4zhc') format('woff'),
+    url('./fonts/icomoon.svg?ew4zhc#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
   speak: never;
@@ -25,105 +26,174 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-checkmark-circle-o:before {
+  content: "\e927";
+}
+
+.icon-check:before {
+  content: "\e925";
+}
+
+.icon-close-circle-o:before {
+  content: "\e926";
+}
+
+.icon-duplicate-o:before {
+  content: "\e928";
+}
+
+.icon-pencil:before {
+  content: "\e929";
+}
+
+.icon-process:before {
+  content: "\e92a";
+}
+
+.icon-filter:before {
+  content: "\e922";
+}
+
+.icon-ellipsis-vertical:before {
+  content: "\e923";
+}
+
+.icon-cog-sharp:before {
+  content: "\e924";
+}
+
 .icon-moon-o:before {
   content: "\e91b";
 }
+
 .icon-sun-o:before {
   content: "\e91c";
 }
+
 .icon-edit-o:before {
   content: "\e91d";
 }
+
 .icon-search:before {
   content: "\e918";
 }
+
 .icon-map-o:before {
   content: "\e919";
 }
+
 .icon-analytics-o:before {
   content: "\e91a";
 }
+
 .icon-chart:before {
   content: "\e917";
 }
+
 .icon-loading:before {
   content: "\e916";
 }
+
 .icon-close:before {
   content: "\e915";
 }
+
 .icon-copy-o:before {
   content: "\e914";
 }
+
 .icon-alert:before {
   content: "\e90d";
 }
+
 .icon-eye-o:before {
   content: "\e90e";
 }
+
 .icon-eye-closed-o:before {
   content: "\e90f";
 }
+
 .icon-info:before {
   content: "\e910";
 }
+
 .icon-layers-o:before {
   content: "\e911";
 }
+
 .icon-marker:before {
   content: "\e912";
 }
+
 .icon-move:before {
   content: "\e913";
 }
+
 .icon-contrast:before {
   content: "\e906";
 }
+
 .icon-arrow:before {
   content: "\e907";
 }
+
 .icon-chevron-up-down:before {
   content: "\e908";
 }
+
 .icon-chevron-down:before {
   content: "\e909";
 }
+
 .icon-download:before {
   content: "\e90a";
 }
+
 .icon-plus:before {
   content: "\e90b";
 }
+
 .icon-trash-o:before {
   content: "\e90c";
 }
+
 .icon-chain:before {
   content: "\e900";
 }
-.icon-check:before {
+
+.icon-double-check:before {
   content: "\e901";
 }
+
 .icon-frame-o:before {
   content: "\e902";
 }
+
 .icon-database-o:before {
   content: "\e903";
 }
+
 .icon-menu:before {
   content: "\e904";
 }
+
 .icon-refresh:before {
   content: "\e905";
 }
+
 .icon-warning:before {
   content: "\e91e";
 }
+
 .icon-not-repeat:before {
   content: "\e91f";
 }
+
 .icon-repeat:before {
   content: "\e920";
 }
+
 .icon-navigate-o:before {
   content: "\e921";
-}
+}

package/dist/do-theme/index.css

@@ -3,12 +3,15 @@
 @import "./var-dark.css";
 @import "./font.css";
 @import "./icomoon/icons.css";
+@import "./color.css";
+@import "./form.css";
 @import "./badge.css";
 @import "./button.css";
 @import "./border.css";
 @import "./card.css";
 @import "./chip.css";
-@import "./color.css";
+@import "./pagination.css";
+@import "./table.css";
 
 /* 
   To modify themes (light and dark):

package/dist/do-theme/pagination.css

@@ -0,0 +1,9 @@
+.do-pagination {
+    display: flex;
+
+    .do-pagination__nav {
+        display: flex;
+        align-items: center;
+        gap: 0.2rem;
+    }
+}

package/dist/do-theme/table.css

@@ -0,0 +1,138 @@
+.do-table {
+    .do-table__header {
+        .do-table__header__tags {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+    }
+
+    .do-table__content {
+
+        width: 100%;
+        border-collapse: collapse;
+
+        thead tr {
+            background: var(--do-table-bg-head);
+            border-bottom: 1px solid #1e1e1e;
+        }
+
+        .do-table__content__th {
+            padding: 0.75rem 1rem;
+            text-align: left;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            user-select: none;
+            white-space: nowrap;
+            transition: color 0.15s;
+            color: #ffffff;
+
+            .do-table__content__th__sort {
+                display: inline-block;
+                font-size: 0.8rem;
+                margin-left: 4px;
+            }
+
+            .do-table__content__th__sort--up {
+                transform: rotate(180deg);
+            }
+
+            &.do-table__content__th:hover {
+                color: #ffffff;
+            }
+
+            &.do-table__content__th.sort-active {
+                color: #eee;
+            }
+        }
+
+        .sort-icon {
+            margin-left: 4px;
+            font-size: 1rem;
+            color: #6366f1;
+        }
+
+        .sort-icon.muted {
+            color: #374151;
+        }
+
+        .col-check {
+            padding: 0.75rem 1rem;
+            width: 1rem;
+        }
+
+        .do-row {
+            background: var(--do-table-bg-row);
+            transition: background 0.12s;
+            color: var(--do-table-text);
+            border: 1px solid transparent;
+
+            &:nth-child(2n) {
+                background: var(--do-table-bg-row-striped);
+            }
+
+            &:hover {
+                background: var(--do-table-bg-row-hover);
+            }
+
+            &.selected {
+                background: var(--do-table-bg-row-hover);
+                outline: 2px solid rgb(15, 116, 182);
+                outline-offset: -1px;
+            }
+        }
+
+        td {
+            padding: 0.75rem 1rem;
+            color: inherit;
+        }
+
+        td:first-child {
+            color: #e2e8f0;
+        }
+
+        .do-checkbox {
+            cursor: pointer;
+            accent-color: #6366f1;
+            width: 15px;
+            height: 15px;
+        }
+
+        .do-table_content-wrapper {
+            border: 1px solid var(--do-bg-secondary);
+            border-radius: 12px;
+            overflow: hidden;
+        }
+    }
+
+    .do-table__footer {
+        display: grid;
+        grid-template-columns: 1fr min-content;
+        align-items: center;
+        padding: 10px 16px;
+        border-top: 1px solid white;
+        gap: 16px;
+        color: inherit;
+        font-size: 1rem;
+
+        .selected-count {
+            color: #6366f1;
+        }
+
+        .sort-label strong {
+            color: #6366f1;
+            font-weight: 500;
+        }
+    }
+}
+
+.do-table-card {
+    border: 1px solid var(--do-bg-secondary);
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--do-table-bg);
+    font-size: 1rem;
+    padding: 0.75rem 1rem;
+}

package/dist/do-theme/var-dark.css

@@ -3,11 +3,19 @@
 	--do-bg-primary: var(--do-color-black-3);
 	--do-bg-secondary: var(--do-color-grey-1);
 
+	/*border*/
+	--do-border-primary: var(--do-color-grey-2);
+	--do-border-secondary: var(--do-color-grey-1);
+
+	/*text*/
+	--do-text-base: #FAFAFA;
+	--do-text-contrast: #fff;
+
 	/*box*/
 	--do-box-primary-bg: var(--do-color-black-2);
 	--do-box-primary-border: var(--do-color-grey-1);
 	--do-box-secondary-bg: var(--do-color-grey-1);
-	--do-box-secondary-border: var(--do-color-grey-2);
+	--do-box-secondary-border: var(--do-border-primary);
 
 	/*buttons*/
 	--do-btn-primary: var(--do-color-black-2);
@@ -42,7 +50,7 @@
 	--do-btn-link: var(--do-color-white-5);
 	--do-btn-link-content: none;
 	--do-btn-link-hover-content: var(--do-color-white-5);
-	--do-btn-link-hover-border: var(--do-color-grey-2);
+	--do-btn-link-hover-border: var(--do-border-primary);
 
 	--do-btn-link-secondary: #1d4ed8;
 	--do-btn-link-secondary-content: none;
@@ -91,9 +99,7 @@
 	--do-card-secondary-bg: var(--do-color-grey);
 	--do-card-secondary-border: var(--do-color-grey-border);
 
-	/*styles*/
-	--do-text-base: #FAFAFA;
-	--do-text-contrast: #fff;
+	/*generic styles*/
 	--do-transparent: transparent;
 
 	/*daisy color variables*/
@@ -101,4 +107,13 @@
 	--color-secondary: #fafafa;
 	--color-tertiary: #eff6ff;
 	--color-accent: #1d4ed8;
+
+	/*table*/
+	--do-table-bg: var(--do-box-primary-bg);
+	--do-table-border: var(--do-border-primary);
+	--do-table-bg-head: var(--do-box-primary-bg);
+	--do-table-bg-row: var(--do-bg-primary);
+	--do-table-bg-row-striped: var(--do-box-primary-bg);
+	--do-table-bg-row-hover: var(--do-color-grey-2);
+	--do-table-text: var(--do-text-base);
 }

package/dist/do-theme/var-light.css

@@ -102,4 +102,7 @@
 	--color-secondary: var(--do-color-secondary);
 	--color-accent: var(--do-color-accent);
 	--color-tertiary: var(--do-color-tertiary);
+
+	/*table*/
+	--do-table-bg: var(--do-color-primary);
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { Badge, Button, Card, Chip, Icon } from './atoms/index.js';
 import { IconButton } from './molecules/index.js';
-export { Button, Icon, Badge, IconButton, Card, Chip };
+import { TableBasic } from './organisms/index.js';
+export { Button, Icon, Badge, IconButton, Card, Chip, TableBasic };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
 import { Badge, Button, Card, Chip, Icon } from './atoms/index.js';
 import { IconButton } from './molecules/index.js';
-export { Button, Icon, Badge, IconButton, Card, Chip };
+import { TableBasic } from './organisms/index.js';
+export { Button, Icon, Badge, IconButton, Card, Chip, TableBasic };

package/dist/molecules/IconButton/IconButton.svelte

@@ -10,6 +10,7 @@
 		loading,
 		title,
 		onClick,
+		onBlur,
 		ariaLabel,
 		ariaDisabled,
 		iconName = 'icon-arrow',
@@ -43,7 +44,7 @@
 
 <!-- @component
 		```Svelte
-		<IconButton label?={'text'} variant?={'variant'} size?={'size'} onClick={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} ariaLabel={ariaLabel} ariaDisabled={ariaDisabled}/>
+		<IconButton label?={'text'} variant?={'variant'} size?={'size'} onClick={()=>{}} onBlur={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} ariaLabel={ariaLabel} ariaDisabled={ariaDisabled}/>
 		```
 		- `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-neutral'
 		- `anchor?`: boolean (use `<a>` tag instead of `<button>`) 
@@ -53,6 +54,7 @@
 		- `rounded?`: boolean
 		- `loading?`: boolean
 		- `onClick`: () => void - only use when anchor is false
+		- `onBlur`: () => void - only use when anchor is false
 		- `href?`: string - only use when anchor is true
 		- `ariaLabel`: string
 		- `title`: string
@@ -124,6 +126,7 @@
 		{size}
 		type={type ?? 'button'}
 		{onClick}
+		{onBlur}
 		{disabled}
 		{title}
 		{ariaLabel}

package/dist/molecules/IconButton/IconButton.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { IconButtonProps } from './iProps.ts';
 /**
  * ```Svelte
- * <IconButton label?={'text'} variant?={'variant'} size?={'size'} onClick={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} ariaLabel={ariaLabel} ariaDisabled={ariaDisabled}/>
+ * <IconButton label?={'text'} variant?={'variant'} size?={'size'} onClick={()=>{}} onBlur={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} ariaLabel={ariaLabel} ariaDisabled={ariaDisabled}/>
  * ```
  * - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-neutral'
  * - `anchor?`: boolean (use `<a>` tag instead of `<button>`)
@@ -11,6 +11,7 @@ import type { IconButtonProps } from './iProps.ts';
  * - `rounded?`: boolean
  * - `loading?`: boolean
  * - `onClick`: () => void - only use when anchor is false
+ * - `onBlur`: () => void - only use when anchor is false
  * - `href?`: string - only use when anchor is true
  * - `ariaLabel`: string
  * - `title`: string

package/dist/molecules/IconButton/IconButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/IconButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAU,MAAM,aAAa,CAAC;AA6E3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/IconButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAU,MAAM,aAAa,CAAC;AA8E3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/molecules/IconButton/iProps.d.ts

@@ -7,6 +7,7 @@ export interface iProps extends HTMLButtonAttributes {
     disabled?: boolean;
     loading?: boolean;
     onClick?: () => void;
+    onBlur?: () => void;
     ariaLabel: string;
     ariaDisabled?: boolean;
     iconName: IconNames;
@@ -37,11 +38,13 @@ export type IconButtonAnchorProps = BaseIconButtonProps & {
     rel?: HTMLAnchorAttributes['rel'];
     referrerpolicy?: HTMLAnchorAttributes['referrerpolicy'];
     onClick?: never;
+    onBlur?: never;
     type?: never;
 };
 export type IconButtonButtonProps = BaseIconButtonProps & {
     anchor?: false;
     onClick?: () => void;
+    onBlur?: () => void;
     type?: 'button' | 'submit' | 'reset';
     href?: never;
     target?: never;

package/dist/molecules/IconButton/iProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAElF,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EACL,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,aAAa,GACb,eAAe,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAEnE,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG;IACzD,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG;IACzD,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,qBAAqB,CAAC"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAElF,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EACN,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,aAAa,GACb,eAAe,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAEnE,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG;IACzD,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG;IACzD,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,qBAAqB,CAAC"}

package/dist/molecules/Pagination/Pagination.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import IconButton from '../IconButton/IconButton.svelte';
+
+	type PaginationState = {
+		totalPages: number;
+		pageSize: number;
+		currentPage: number;
+		loading: boolean;
+	};
+
+	type Props = {
+		pagination: PaginationState;
+		goToPage: (page: number) => void;
+		pageSizeChange: (size: number) => void;
+	};
+
+	let { pagination, goToPage, pageSizeChange }: Props = $props();
+
+	const getPaginationPages = (current: number, total: number, maxPages: number = 5) => {
+		if (total <= maxPages) {
+			return Array.from({ length: total }, (_, i) => i + 1);
+		}
+
+		const pages: (number | string)[] = [];
+		const radius = 2;
+
+		pages.push(1);
+
+		const start = Math.max(2, current - radius);
+		const end = Math.min(total - 1, current + radius);
+
+		if (start > 2) {
+			pages.push('...');
+		}
+
+		for (let i = start; i <= end; i++) {
+			if (!pages.includes(i)) {
+				pages.push(i);
+			}
+		}
+
+		if (end < total - 1) {
+			pages.push('...');
+		}
+
+		if (!pages.includes(total)) {
+			pages.push(total);
+		}
+
+		return pages;
+	};
+</script>
+
+<div class="do-pagination">
+	<label>
+		Mostrar:
+		<select bind:value={pagination.pageSize} onchange={() => pageSizeChange(pagination.pageSize)}>
+			<option value={5}>5</option>
+			<option value={10}>10</option>
+			<option value={25}>25</option>
+			<option value={50}>50</option>
+		</select>
+	</label>
+
+	{#if pagination.totalPages && !pagination.loading}
+		<div class="do-pagination__nav">
+			<IconButton
+				iconName="icon-chevron-down"
+				iCustomClass="rotate-90"
+				disabled={pagination.currentPage === 1}
+				onClick={() => goToPage(pagination.currentPage - 1)}
+				ariaLabel="página anterior"
+			/>
+
+			{#each getPaginationPages(pagination.currentPage, pagination.totalPages) as page}
+				{#if page === '...'}
+					<span class="px-2">...</span>
+				{:else}
+					<button
+						class="do-btn {pagination.currentPage === page ? 'do-btn-secondary' : 'do-btn-primary'}"
+						class:selected={pagination.currentPage === page}
+						onclick={() => {
+							if (typeof page === 'number') goToPage(page);
+						}}
+						disabled={pagination.totalPages === 1}
+					>
+						{page}
+					</button>
+				{/if}
+			{/each}
+
+			<IconButton
+				iconName="icon-chevron-down"
+				iCustomClass="-rotate-90"
+				disabled={pagination.currentPage === pagination.totalPages}
+				onClick={() => goToPage(pagination.currentPage + 1)}
+				ariaLabel="página siguiente"
+			/>
+		</div>
+	{/if}
+</div>

package/dist/molecules/Pagination/Pagination.svelte.d.ts

@@ -0,0 +1,15 @@
+type PaginationState = {
+    totalPages: number;
+    pageSize: number;
+    currentPage: number;
+    loading: boolean;
+};
+type Props = {
+    pagination: PaginationState;
+    goToPage: (page: number) => void;
+    pageSizeChange: (size: number) => void;
+};
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;
+//# sourceMappingURL=Pagination.svelte.d.ts.map

package/dist/molecules/Pagination/Pagination.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,eAAe,GAAG;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,KAAK,GAAG;IACZ,UAAU,EAAE,eAAe,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AA6EH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}