@x33025/sveltely 0.1.2 → 0.1.4

package/dist/style.css

@@ -13,17 +13,10 @@
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-700: oklch(37.3% 0.034 259.733);
-    --color-zinc-50: oklch(98.5% 0 0);
     --color-zinc-100: oklch(96.7% 0.001 286.375);
     --color-zinc-200: oklch(92% 0.004 286.32);
-    --color-zinc-300: oklch(87.1% 0.006 286.286);
-    --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
-    --color-zinc-600: oklch(44.2% 0.017 285.786);
-    --color-zinc-700: oklch(37% 0.013 285.805);
-    --color-zinc-800: oklch(27.4% 0.006 286.033);
     --color-zinc-900: oklch(21% 0.006 285.885);
-    --color-zinc-950: oklch(14.1% 0.005 285.823);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -281,6 +274,9 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-36 {
+    height: calc(var(--spacing) * 36);
+  }
   .h-full {
     height: 100%;
   }
@@ -302,12 +298,18 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
+  .max-w-32 {
+    max-width: calc(var(--spacing) * 32);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
   .flex-1 {
     flex: 1;
   }
@@ -368,6 +370,12 @@
   .justify-center {
     justify-content: center;
   }
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -384,6 +392,11 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -399,6 +412,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -439,6 +455,21 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
   .text-left {
     text-align: left;
   }
@@ -477,27 +508,18 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-\[var\(--sveltely-primary-color\)\] {
+    color: var(--sveltely-primary-color);
+  }
+  .text-\[var\(--sveltely-secondary-color\)\] {
+    color: var(--sveltely-secondary-color);
+  }
   .text-gray-700 {
     color: var(--color-gray-700);
   }
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-zinc-500 {
-    color: var(--color-zinc-500);
-  }
-  .text-zinc-600 {
-    color: var(--color-zinc-600);
-  }
-  .text-zinc-700 {
-    color: var(--color-zinc-700);
-  }
-  .text-zinc-900 {
-    color: var(--color-zinc-900);
-  }
-  .text-zinc-950 {
-    color: var(--color-zinc-950);
-  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -581,9 +603,9 @@
       background-color: var(--color-zinc-200);
     }
   }
-  .disabled\:text-zinc-500 {
+  .disabled\:text-\[var\(--sveltely-secondary-color\)\] {
     &:disabled {
-      color: var(--color-zinc-500);
+      color: var(--sveltely-secondary-color);
     }
   }
   .disabled\:opacity-50 {
@@ -591,6 +613,11 @@
       opacity: 50%;
     }
   }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .md\:grid-cols-\[minmax\(0\,18rem\)_minmax\(8rem\,1fr\)\] {
     @media (width >= 48rem) {
       grid-template-columns: minmax(0,18rem) minmax(8rem,1fr);
@@ -607,11 +634,13 @@
     --sveltely-padding-y: 0.75rem;
     --sveltely-gap: 0.5rem;
     --sveltely-primary-color: var(--color-zinc-900);
-    --sveltely-active-color: var(--sveltely-primary-color);
-    --sveltely-inactive-color: var(--color-zinc-100);
-    --sveltely-hover-color: var(--sveltely-primary-color);
+    --sveltely-secondary-color: var(--color-zinc-500);
+    --sveltely-active-color: var(--color-zinc-900);
+    --sveltely-inactive-color: var(--sveltely-active-color);
+    --sveltely-background-color: white;
+    --sveltely-hover-color: var(--sveltely-active-color);
     @supports (color: color-mix(in lab, red, red)) {
-      --sveltely-hover-color: color-mix(in oklab, var(--sveltely-primary-color) 5%, transparent);
+      --sveltely-hover-color: color-mix(in oklab, var(--sveltely-active-color) 5%, transparent);
     }
     --sveltely-inactive-hover-color: var(--sveltely-inactive-color);
     @supports (color: color-mix(in lab, red, red)) {
@@ -632,6 +661,8 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    background: var(--sveltely-background-color);
+    color: var(--sveltely-primary-color);
     -webkit-user-select: none;
     user-select: none;
   }
@@ -684,7 +715,7 @@
     min-width: calc(var(--spacing) * 0);
     flex-direction: row;
   }
-  .button,	.async-button,	.segmented-picker,	.switch,	.checkbox,	.search-input,	.token-search-input,	.chip-input,	.dropdown,	.pagination,	.calendar,	.wheel-picker,	.time-picker,	.slider,	.spinner,	.image,	.image-mask,	.text-shimmer {
+  .button,	.async-button,	.segmented-picker,	.switch,	.checkbox,	.search-field,	.token-search-field,	.chip-input,	.dropdown,	.pagination,	.calendar,	.wheel-picker,	.time-picker,	.slider,	.spinner,	.image,	.image-mask,	.text-shimmer {
     flex-shrink: 0;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/components/Library/Dropdown/types.d.ts

@@ -1,30 +0,0 @@
-import type { Anchor } from '../../../utils/positioning';
-export type DropdownItem<TValue extends string | number = string> = {
-    type?: 'option';
-    label: string;
-    value: TValue;
-    disabled?: boolean;
-};
-export type DropdownAction = {
-    type: 'action';
-    label: string;
-    disabled?: boolean;
-    onSelect: () => void;
-};
-export type DropdownDivider = {
-    type: 'divider';
-};
-export type DropdownSubmenu<TValue extends string | number = string> = {
-    type: 'submenu';
-    label: string;
-    disabled?: boolean;
-    items: DropdownEntry<TValue>[];
-    placement?: Anchor;
-};
-export type DropdownGroup<TValue extends string | number = string> = {
-    type: 'group';
-    label?: string;
-    disabled?: boolean;
-    items: DropdownEntry<TValue>[];
-};
-export type DropdownEntry<TValue extends string | number = string> = DropdownItem<TValue> | DropdownAction | DropdownDivider | DropdownGroup<TValue> | DropdownSubmenu<TValue>;

package/dist/components/Library/Dropdown/types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/Library/SearchInput/SearchInput.demo.svelte.d.ts

@@ -1,8 +0,0 @@
-export declare const demo: {
-    name: string;
-    description: string;
-};
-import SearchInput from './SearchInput.svelte';
-declare const SearchInput: import("svelte").Component<Record<string, never>, {}, "">;
-type SearchInput = ReturnType<typeof SearchInput>;
-export default SearchInput;

package/dist/components/Library/SearchInput/index.d.ts

@@ -1 +0,0 @@
-export { default } from './SearchInput.svelte';

package/dist/components/Library/SearchInput/index.js

@@ -1 +0,0 @@
-export { default } from './SearchInput.svelte';

package/dist/components/Library/TokenSearchInput/TokenSearchInput.demo.svelte.d.ts

@@ -1,9 +0,0 @@
-export declare const demo: {
-    name: string;
-    description: string;
-    columnSpan: number;
-};
-import TokenSearchInput from './TokenSearchInput.svelte';
-declare const TokenSearchInput: import("svelte").Component<Record<string, never>, {}, "">;
-type TokenSearchInput = ReturnType<typeof TokenSearchInput>;
-export default TokenSearchInput;

package/dist/components/Library/TokenSearchInput/index.d.ts

@@ -1 +0,0 @@
-export { default } from './TokenSearchInput.svelte';

package/dist/components/Library/TokenSearchInput/index.js

@@ -1 +0,0 @@
-export { default } from './TokenSearchInput.svelte';