cclkit4svelte 2.0.6 → 2.0.7

package/dist/Tooltip.svelte

@@ -1,139 +1,143 @@
-<script>import { CCLVividColor } from "./const/config";
-export let text;
-export let position = "top";
-export let disabled = false;
-export let backgroundColor = CCLVividColor.WRAP_GREY;
-const tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  export let text: string;
+  export let position: 'top' | 'bottom' | 'left' | 'right' = 'top';
+  export let disabled = false;
+  export let backgroundColor: string = CCLVividColor.WRAP_GREY;
+
+  // ユニークなIDを生成してaria-describedbyで使用
+  const tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
 </script>
 
 <div
-	class="tooltip-trigger"
-	data-testid="tooltip-trigger"
-	tabindex="0"
-	aria-describedby={!disabled ? tooltipId : undefined}
+  class="tooltip-trigger"
+  data-testid="tooltip-trigger"
+  tabindex="0"
+  aria-describedby={!disabled ? tooltipId : undefined}
 >
-	<slot />
-	<span
-		{...{ id: tooltipId }}
-		style:--tooltip-background-color={backgroundColor.startsWith('--')
-			? `var(${backgroundColor})`
-			: backgroundColor}
-		class="tooltip-content"
-		data-testid="tooltip-content"
-		class:disabled
-		class:top={position === 'top'}
-		class:bottom={position === 'bottom'}
-		class:left={position === 'left'}
-		class:right={position === 'right'}
-		role="tooltip"
-	>
-		{text}
-	</span>
+  <slot />
+  <span
+    {...{ id: tooltipId }}
+    style:--tooltip-background-color={backgroundColor.startsWith('--')
+      ? `var(${backgroundColor})`
+      : backgroundColor}
+    class="tooltip-content"
+    data-testid="tooltip-content"
+    class:disabled
+    class:top={position === 'top'}
+    class:bottom={position === 'bottom'}
+    class:left={position === 'left'}
+    class:right={position === 'right'}
+    role="tooltip"
+  >
+    {text}
+  </span>
 </div>
 
 <style>
-	.tooltip-trigger {
-		position: relative;
-		display: inline-block;
-		cursor: pointer;
-	}
+  .tooltip-trigger {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
 
-	.tooltip-content {
-		position: absolute;
-		z-index: 10;
-		background-color: var(--tooltip-background-color);
-		color: white;
-		padding: 0.5em 1em;
-		border-radius: 4px;
-		font-size: 0.875rem;
-		line-height: 1.4;
-		white-space: nowrap;
-		/* デフォルトは非表示 */
-		visibility: hidden;
-		opacity: 0;
-		transition:
-			opacity 0.2s,
-			visibility 0.2s;
-	}
+  .tooltip-content {
+    position: absolute;
+    z-index: 10;
+    background-color: var(--tooltip-background-color);
+    color: white;
+    padding: 0.5em 1em;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    white-space: nowrap;
+    /* デフォルトは非表示 */
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      opacity 0.2s,
+      visibility 0.2s;
+  }
 
-	/* disabledの場合は完全に非表示 */
-	.tooltip-content.disabled {
-		display: none;
-	}
+  /* disabledの場合は完全に非表示 */
+  .tooltip-content.disabled {
+    display: none;
+  }
 
-	/* ホバーまたはフォーカスで表示 */
-	.tooltip-trigger:hover .tooltip-content,
-	.tooltip-trigger:focus .tooltip-content {
-		visibility: visible;
-		opacity: 1;
-	}
+  /* ホバーまたはフォーカスで表示 */
+  .tooltip-trigger:hover .tooltip-content,
+  .tooltip-trigger:focus .tooltip-content {
+    visibility: visible;
+    opacity: 1;
+  }
 
-	/* 吹き出しの矢印 */
-	.tooltip-content::after {
-		content: '';
-		position: absolute;
-		border-style: solid;
-	}
+  /* 吹き出しの矢印 */
+  .tooltip-content::after {
+    content: '';
+    position: absolute;
+    border-style: solid;
+  }
 
-	/* --- ポジションごとのスタイル --- */
+  /* --- ポジションごとのスタイル --- */
 
-	/* 上に表示 */
-	.tooltip-content.top {
-		bottom: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-		margin-bottom: 8px;
-	}
-	.tooltip-content.top::after {
-		top: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-		border-width: 5px;
-		border-color: var(--tooltip-background-color) transparent transparent transparent;
-	}
+  /* 上に表示 */
+  .tooltip-content.top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 8px;
+  }
+  .tooltip-content.top::after {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-color: var(--tooltip-background-color) transparent transparent transparent;
+  }
 
-	/* 下に表示 */
-	.tooltip-content.bottom {
-		top: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-		margin-top: 8px;
-	}
-	.tooltip-content.bottom::after {
-		bottom: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-		border-width: 5px;
-		border-color: transparent transparent var(--tooltip-background-color) transparent;
-	}
+  /* 下に表示 */
+  .tooltip-content.bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 8px;
+  }
+  .tooltip-content.bottom::after {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-color: transparent transparent var(--tooltip-background-color) transparent;
+  }
 
-	/* 左に表示 */
-	.tooltip-content.left {
-		right: 100%;
-		top: 50%;
-		transform: translateY(-50%);
-		margin-right: 8px;
-	}
-	.tooltip-content.left::after {
-		left: 100%;
-		top: 50%;
-		transform: translateY(-50%);
-		border-width: 5px;
-		border-color: transparent transparent transparent var(--tooltip-background-color);
-	}
+  /* 左に表示 */
+  .tooltip-content.left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 8px;
+  }
+  .tooltip-content.left::after {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 5px;
+    border-color: transparent transparent transparent var(--tooltip-background-color);
+  }
 
-	/* 右に表示 */
-	.tooltip-content.right {
-		left: 100%;
-		top: 50%;
-		transform: translateY(-50%);
-		margin-left: 8px;
-	}
-	.tooltip-content.right::after {
-		right: 100%;
-		top: 50%;
-		transform: translateY(-50%);
-		border-width: 5px;
-		border-color: transparent var(--tooltip-background-color) transparent transparent;
-	}
+  /* 右に表示 */
+  .tooltip-content.right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 8px;
+  }
+  .tooltip-content.right::after {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 5px;
+    border-color: transparent var(--tooltip-background-color) transparent transparent;
+  }
 </style>

package/dist/Tooltip.svelte.d.ts

@@ -1,23 +1,32 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        text: string;
-        position?: "top" | "bottom" | "left" | "right";
-        disabled?: boolean;
-        backgroundColor?: string;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TooltipProps = typeof __propDef.props;
-export type TooltipEvents = typeof __propDef.events;
-export type TooltipSlots = typeof __propDef.slots;
-export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    text: string;
+    position?: "top" | "bottom" | "left" | "right";
+    disabled?: boolean;
+    backgroundColor?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Tooltip = InstanceType<typeof Tooltip>;
+export default Tooltip;

package/dist/const/colorMap.d.ts

@@ -0,0 +1,5 @@
+export declare const pastelToVividMap: Record<string, string>;
+/** Returns the vivid counterpart for a given color var if it's pastel; otherwise undefined. */
+export declare function vividFor(colorVar: string | undefined): string | undefined;
+/** Whether the provided CSS var corresponds to a known pastel color. */
+export declare function isPastel(colorVar: string | undefined): boolean;

package/dist/const/colorMap.js

@@ -0,0 +1,21 @@
+var _a;
+import { CCLPastelColor, CCLVividColor } from './config';
+// Pastel -> Vivid CSS variable mapping
+export var pastelToVividMap = (_a = {},
+    _a[CCLPastelColor.PEACH_PINK] = CCLVividColor.STRAWBERRY_PINK,
+    _a[CCLPastelColor.LEMON_YELLOW] = CCLVividColor.PINEAPPLE_YELLOW,
+    _a[CCLPastelColor.SUGAR_BLUE] = CCLVividColor.SODA_BLUE,
+    _a[CCLPastelColor.MATCHA_GREEN] = CCLVividColor.MELON_GREEN,
+    _a[CCLPastelColor.AKEBI_PURPLE] = CCLVividColor.GRAPE_PURPLE,
+    _a[CCLPastelColor.CLOUD_GREY] = CCLVividColor.WRAP_GREY,
+    _a);
+/** Returns the vivid counterpart for a given color var if it's pastel; otherwise undefined. */
+export function vividFor(colorVar) {
+    if (!colorVar)
+        return undefined;
+    return pastelToVividMap[colorVar];
+}
+/** Whether the provided CSS var corresponds to a known pastel color. */
+export function isPastel(colorVar) {
+    return !!colorVar && Object.prototype.hasOwnProperty.call(pastelToVividMap, colorVar);
+}

package/dist/const/variables.css

@@ -1,24 +1,24 @@
 :root {
-	--hd-color: var(--strawberry-pink);
-	/*Vivid*/
-	--strawberry-pink: #ed3b7d;
-	--pineapple-yellow: #ed9126;
-	--soda-blue: #2089ea;
-	--melon-green: #70af0a;
-	--grape-purple: #9707db;
-	--wrap-grey: #5f5f60;
-	/*Pastel*/
-	--peach-pink: #ffb4c3;
-	--lemon-yellow: #fff27a;
-	--sugar-blue: #aee4ff;
-	--matcha-green: #d8ff85;
-	--akebi-purple: #ddb2ff;
-	--cloud-grey: #a3a3a3;
+  --hd-color: var(--strawberry-pink);
+  /*Vivid*/
+  --strawberry-pink: #ed3b7d;
+  --pineapple-yellow: #ed9126;
+  --soda-blue: #2089ea;
+  --melon-green: #70af0a;
+  --grape-purple: #9707db;
+  --wrap-grey: #5f5f60;
+  /*Pastel*/
+  --peach-pink: #ffb4c3;
+  --lemon-yellow: #fff27a;
+  --sugar-blue: #aee4ff;
+  --matcha-green: #d8ff85;
+  --akebi-purple: #ddb2ff;
+  --cloud-grey: #a3a3a3;
 
-	/* default header height */
-	--hd-height: var(--hd-normal);
-	/*header height*/
-	--hd-wide: 130px;
-	--hd-normal: 80px;
-	--hd-nallow: 60px;
+  /* default header height */
+  --hd-height: var(--hd-normal);
+  /*header height*/
+  --hd-wide: 130px;
+  --hd-normal: 80px;
+  --hd-nallow: 60px;
 }

package/dist/index.d.ts

@@ -29,3 +29,12 @@ export { default as Tabs } from './Tabs.svelte';
 export { default as TabPanel } from './TabPanel.svelte';
 export { default as Accordion } from './Accordion.svelte';
 export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as SlideMenu } from './SlideMenu.svelte';
+export type { MenuItem } from './types/slide-menu';
+export { default as Toaster } from './Toaster.svelte';
+export { toast, toasts, type ToastItem, type ToastVariant } from './toast';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export type { BreadcrumbItem } from './types/breadcrumb';

package/dist/index.js

@@ -30,3 +30,11 @@ export { default as Tabs } from './Tabs.svelte';
 export { default as TabPanel } from './TabPanel.svelte';
 export { default as Accordion } from './Accordion.svelte';
 export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as Badge } from './Badge.svelte';
+// Drawer is now an internal primitive; use SlideMenu for public API
+export { default as SlideMenu } from './SlideMenu.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export { toast, toasts } from './toast';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';

package/dist/toast.d.ts

@@ -0,0 +1,29 @@
+import { type Writable } from 'svelte/store';
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+export type ToastItem = {
+    id: string;
+    title?: string;
+    message: string;
+    variant: ToastVariant;
+    duration: number;
+};
+export type ShowOptions = {
+    title?: string;
+    message: string;
+    variant?: ToastVariant;
+    duration?: number;
+};
+export declare const toasts: Writable<ToastItem[]>;
+export declare function show(opts: ShowOptions): string;
+export declare function dismiss(id: string): void;
+export declare function clear(): void;
+export declare const toast: {
+    show: typeof show;
+    success(message: string, title?: string, duration?: number): string;
+    error(message: string, title?: string, duration?: number): string;
+    warning(message: string, title?: string, duration?: number): string;
+    info(message: string, title?: string, duration?: number): string;
+    dismiss: typeof dismiss;
+    clear: typeof clear;
+};
+export declare const variantColor: Record<ToastVariant, string>;

package/dist/toast.js

@@ -0,0 +1,66 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { writable } from 'svelte/store';
+import { CCLVividColor } from './const/config';
+export var toasts = writable([]);
+function genId() {
+    return Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+// Default auto-dismiss duration held internally
+var DEFAULT_DURATION = 3000;
+export function show(opts) {
+    var _a, _b;
+    var id = genId();
+    var item = {
+        id: id,
+        title: opts.title,
+        message: opts.message,
+        variant: (_a = opts.variant) !== null && _a !== void 0 ? _a : 'info',
+        duration: (_b = opts.duration) !== null && _b !== void 0 ? _b : DEFAULT_DURATION
+    };
+    toasts.update(function (list) { return __spreadArray([item], list, true).slice(0, 50); });
+    if (typeof window !== 'undefined' && item.duration > 0) {
+        window.setTimeout(function () { return dismiss(id); }, item.duration);
+    }
+    return id;
+}
+export function dismiss(id) {
+    toasts.update(function (list) { return list.filter(function (t) { return t.id !== id; }); });
+}
+export function clear() {
+    toasts.set([]);
+}
+export var toast = {
+    show: show,
+    success: function (message, title, duration) {
+        if (title === void 0) { title = 'Success'; }
+        return show({ message: message, title: title, variant: 'success', duration: duration });
+    },
+    error: function (message, title, duration) {
+        if (title === void 0) { title = 'Error'; }
+        return show({ message: message, title: title, variant: 'error', duration: duration });
+    },
+    warning: function (message, title, duration) {
+        if (title === void 0) { title = 'Warning'; }
+        return show({ message: message, title: title, variant: 'warning', duration: duration });
+    },
+    info: function (message, title, duration) {
+        if (title === void 0) { title = 'Info'; }
+        return show({ message: message, title: title, variant: 'info', duration: duration });
+    },
+    dismiss: dismiss,
+    clear: clear
+};
+export var variantColor = {
+    success: CCLVividColor.MELON_GREEN,
+    error: CCLVividColor.STRAWBERRY_PINK,
+    warning: CCLVividColor.PINEAPPLE_YELLOW,
+    info: CCLVividColor.SODA_BLUE
+};

package/dist/types/breadcrumb.d.ts

@@ -0,0 +1,4 @@
+export type BreadcrumbItem = {
+    label: string;
+    href?: string;
+};

package/dist/types/breadcrumb.js

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

package/dist/types/slide-menu.d.ts

@@ -0,0 +1,5 @@
+export type MenuItem = {
+    id: string;
+    label: string;
+    href?: string;
+};

package/dist/types/slide-menu.js

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