bloko-ui 0.0.1

package/dist/components/Toast.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  interface Props {
+    message: string;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    visible?: boolean;
+    duration?: number;
+    onclose?: () => void;
+  }
+
+  let {
+    message,
+    variant = 'info',
+    visible = $bindable(true),
+    duration = 3000,
+    onclose
+  }: Props = $props();
+
+  $effect(() => {
+    if (visible && duration > 0) {
+      const timer = setTimeout(() => {
+        visible = false;
+        onclose?.();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+  });
+
+  function close() {
+    visible = false;
+    onclose?.();
+  }
+</script>
+
+{#if visible}
+  <div class="toast toast-{variant}" role="alert">
+    <span class="message">{message}</span>
+    <button class="close" onclick={close} aria-label="Dismiss">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 6L6 18M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+{/if}
+
+<style>
+  .toast {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  .toast-info {
+    background: #f0f9ff;
+    border: 1px solid #bae6fd;
+    color: #0369a1;
+  }
+
+  .toast-success {
+    background: #f0fdf4;
+    border: 1px solid #bbf7d0;
+    color: #166534;
+  }
+
+  .toast-warning {
+    background: #fefce8;
+    border: 1px solid #fef08a;
+    color: #854d0e;
+  }
+
+  .toast-error {
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    color: #991b1b;
+  }
+
+  .message {
+    flex: 1;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: none;
+    color: inherit;
+    opacity: 0.6;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+
+  .close:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.05);
+  }
+</style>

package/dist/components/Toast.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    message: string;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    visible?: boolean;
+    duration?: number;
+    onclose?: () => void;
+}
+declare const Toast: import("svelte").Component<Props, {}, "visible">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/Tooltip.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    text: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    children: Snippet;
+  }
+
+  let { text, position = 'top', children }: Props = $props();
+
+  let visible = $state(false);
+</script>
+
+<div
+  class="tooltip-wrapper"
+  onmouseenter={() => (visible = true)}
+  onmouseleave={() => (visible = false)}
+  onfocus={() => (visible = true)}
+  onblur={() => (visible = false)}
+>
+  {@render children()}
+  {#if visible}
+    <div class="tooltip {position}" role="tooltip">
+      {text}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tooltip {
+    position: absolute;
+    padding: 6px 10px;
+    font-size: 11px;
+    color: white;
+    background: #18181b;
+    border-radius: 4px;
+    white-space: nowrap;
+    z-index: 100;
+    pointer-events: none;
+  }
+
+  .tooltip.top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 6px;
+  }
+
+  .tooltip.bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 6px;
+  }
+
+  .tooltip.left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 6px;
+  }
+
+  .tooltip.right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 6px;
+  }
+</style>

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    text: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    children: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/TopNav.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  interface NavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+  }
+
+  interface Props {
+    title?: string;
+    items?: NavItem[];
+  }
+
+  let {
+    title = 'Bloko Studio',
+    items = []
+  }: Props = $props();
+</script>
+
+<nav class="topnav">
+  <a href="/" class="logo">{title}</a>
+  <div class="tabs">
+    {#each items as item}
+      <a href={item.href} class:active={item.active}>{item.label}</a>
+    {/each}
+  </div>
+</nav>
+
+<style>
+  .topnav {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: 0 12px;
+    background: #18181b;
+    gap: 16px;
+  }
+
+  .logo {
+    font-size: 13px;
+    font-weight: 600;
+    color: white;
+    text-decoration: none;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  .tabs {
+    display: flex;
+    height: 100%;
+  }
+
+  .tabs a {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #a1a1aa;
+    text-decoration: none;
+    border-bottom: 2px solid transparent;
+    transition: color 0.1s, border-color 0.1s;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  .tabs a:hover {
+    color: #e4e4e7;
+  }
+
+  .tabs a.active {
+    color: white;
+    border-bottom-color: white;
+  }
+</style>

package/dist/components/TopNav.svelte.d.ts

@@ -0,0 +1,12 @@
+interface NavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+interface Props {
+    title?: string;
+    items?: NavItem[];
+}
+declare const TopNav: import("svelte").Component<Props, {}, "">;
+type TopNav = ReturnType<typeof TopNav>;
+export default TopNav;

package/dist/components/TruncatedText.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Tooltip from './Tooltip.svelte';
+
+  interface Props {
+    value: string;
+    length?: number;
+    from?: 'start' | 'end';
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
+  }
+
+  let { value, length = 8, from = 'start', tooltipPosition = 'bottom' }: Props = $props();
+
+  let isTruncated = $derived(value.length > length);
+  let truncated = $derived(
+    isTruncated
+      ? from === 'start'
+        ? value.slice(0, length)
+        : value.slice(-length)
+      : value
+  );
+</script>
+
+{#if isTruncated}
+  <Tooltip text={value} position={tooltipPosition}>
+    <span class="truncated-text">{truncated}</span>
+  </Tooltip>
+{:else}
+  <span class="truncated-text">{truncated}</span>
+{/if}
+
+<style>
+  .truncated-text {
+    display: inline-block;
+    font-family: monospace;
+    font-size: 11px;
+    color: #71717a;
+    background: #f4f4f5;
+    padding: 2px 6px;
+    border-radius: 3px;
+    cursor: default;
+  }
+
+  .truncated-text:hover {
+    background: #e4e4e7;
+  }
+</style>

package/dist/components/TruncatedText.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    value: string;
+    length?: number;
+    from?: 'start' | 'end';
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
+}
+declare const TruncatedText: import("svelte").Component<Props, {}, "">;
+type TruncatedText = ReturnType<typeof TruncatedText>;
+export default TruncatedText;

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+export { default as Button } from './components/Button.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as Badge } from './components/Badge.svelte';
+export { default as Table } from './components/Table.svelte';
+export { default as TopNav } from './components/TopNav.svelte';
+export { default as Sidebar } from './components/Sidebar.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as Modal } from './components/Modal.svelte';
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as Breadcrumb } from './components/Breadcrumb.svelte';
+export { default as Pagination } from './components/Pagination.svelte';
+export { default as Toast } from './components/Toast.svelte';
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as LangValue } from './components/LangValue.svelte';
+export { default as TruncatedText } from './components/TruncatedText.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Dropdown } from './components/Dropdown.svelte';
+export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as EmptyState } from './components/EmptyState.svelte';
+export { default as Alert } from './components/Alert.svelte';
+export { default as Avatar } from './components/Avatar.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as Card } from './components/Card.svelte';
+export { default as Divider } from './components/Divider.svelte';
+export { default as Progress } from './components/Progress.svelte';
+export { default as Tag } from './components/Tag.svelte';
+export { default as IconButton } from './components/IconButton.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as SearchInput } from './components/SearchInput.svelte';
+export { default as NumberInput } from './components/NumberInput.svelte';
+export { default as Accordion } from './components/Accordion.svelte';
+export { default as Popover } from './components/Popover.svelte';
+export { default as ContextMenu } from './components/ContextMenu.svelte';

package/dist/index.js

@@ -0,0 +1,36 @@
+// Components
+export { default as Button } from './components/Button.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as Badge } from './components/Badge.svelte';
+export { default as Table } from './components/Table.svelte';
+export { default as TopNav } from './components/TopNav.svelte';
+export { default as Sidebar } from './components/Sidebar.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as Modal } from './components/Modal.svelte';
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as Breadcrumb } from './components/Breadcrumb.svelte';
+export { default as Pagination } from './components/Pagination.svelte';
+export { default as Toast } from './components/Toast.svelte';
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as LangValue } from './components/LangValue.svelte';
+export { default as TruncatedText } from './components/TruncatedText.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Dropdown } from './components/Dropdown.svelte';
+export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as EmptyState } from './components/EmptyState.svelte';
+export { default as Alert } from './components/Alert.svelte';
+export { default as Avatar } from './components/Avatar.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as Card } from './components/Card.svelte';
+export { default as Divider } from './components/Divider.svelte';
+export { default as Progress } from './components/Progress.svelte';
+export { default as Tag } from './components/Tag.svelte';
+export { default as IconButton } from './components/IconButton.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as SearchInput } from './components/SearchInput.svelte';
+export { default as NumberInput } from './components/NumberInput.svelte';
+export { default as Accordion } from './components/Accordion.svelte';
+export { default as Popover } from './components/Popover.svelte';
+export { default as ContextMenu } from './components/ContextMenu.svelte';

package/package.json

@@ -0,0 +1,63 @@
+{
+	"name": "bloko-ui",
+	"version": "0.0.1",
+	"description": "",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"!dist/**/*.stories.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.49.1",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"publint": "^0.3.15",
+		"svelte": "^5.45.6",
+		"svelte-check": "^4.3.4",
+		"typescript": "^5.9.3",
+		"vite": "^7.2.6",
+		"storybook": "^10.1.11",
+		"@storybook/sveltekit": "^10.1.11",
+		"@storybook/addon-svelte-csf": "^5.0.10",
+		"@chromatic-com/storybook": "^5.0.0",
+		"@storybook/addon-vitest": "^10.1.11",
+		"@storybook/addon-a11y": "^10.1.11",
+		"@storybook/addon-docs": "^10.1.11",
+		"vitest": "^4.0.17",
+		"playwright": "^1.57.0",
+		"@vitest/browser-playwright": "^4.0.17",
+		"@vitest/coverage-v8": "^4.0.17"
+	},
+	"keywords": [
+		"svelte"
+	]
+}