@musecat/uikit 0.1.1

package/packages/Frameworks/Theme/Theme.types.ts

@@ -0,0 +1,325 @@
+export type ThemePreset =
+  | `${ThemeBaseColor}Full`
+  | `${ThemeBaseColor}Soft`
+  | `${ThemePaletteColor}Full`
+  | `${ThemePaletteColor}Soft`
+  | "UIPrimary"
+  | "UISecondary"
+  | "UIPrimaryReversed"
+  | "UISecondaryReversed"
+  | "ReversedUIPrimary"
+  | "ReversedUISecondary";
+
+export type ThemePaletteColor =
+  | "Pink"
+  | "Red"
+  | "Brown"
+  | "Orange"
+  | "Yellow"
+  | "Green"
+  | "Mint"
+  | "Cyan"
+  | "Blue"
+  | "Indigo"
+  | "Purple"
+  | "Magenta";
+
+export type ThemeBaseColor = "Base" | "BaseLight" | "BaseDark" | "Reversed";
+export type ThemeColorName = ThemeBaseColor | ThemePaletteColor;
+
+export type ThemeLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type ThemeTPScale = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type ThemePaint =
+  | `${ThemeColorName}${ThemeLevel}`
+  | `${ThemeColorName}${ThemeLevel}TP${ThemeTPScale}`;
+export type ThemeBackgroundPaint =
+  | ThemePaint
+  | readonly [ThemePaint]
+  | readonly [ThemePaint, ThemePaint, ThemePaint];
+export type ThemeBorderWidth = "None" | "Light" | "Regular" | "Bold";
+
+export type BlurScale =
+  | "ExtraLight"
+  | "Light"
+  | "Regular"
+  | "Bold"
+  | "ExtraBold"
+  | "Heavy";
+export type BackgroundBlurValue = BlurScale | "None";
+export type ThemeBorderWidthTuple =
+  | readonly [ThemeBorderWidth]
+  | readonly [ThemeBorderWidth, ThemeBorderWidth]
+  | readonly [ThemeBorderWidth, ThemeBorderWidth, ThemeBorderWidth]
+  | readonly [
+      ThemeBorderWidth,
+      ThemeBorderWidth,
+      ThemeBorderWidth,
+      ThemeBorderWidth,
+    ];
+export type ThemeBorderPaint =
+  | "None"
+  | ThemeBorderWidth
+  | ThemeBorderWidthTuple
+  | ThemePaint
+  | readonly [ThemePaint, ThemeBorderWidth | ThemeBorderWidthTuple];
+
+export type ShadowScale = "Light" | "Regular" | "Bold";
+export type ThemeShadow = ShadowScale | "None";
+
+export interface BorderProps {
+  border?: ThemeBorderPaint;
+}
+
+export interface ThemeSystemProps {
+  themePreset?: ThemePreset;
+  background?: ThemeBackgroundPaint;
+  color?: ThemePaint;
+  border?: ThemeBorderPaint;
+  shadow?: ThemeShadow;
+  themeInteractive?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  backgroundBlur?: BackgroundBlurValue;
+}
+
+const TOKEN_PATTERN =
+  /^(BaseLight|BaseDark|Base|Reversed|Pink|Red|Brown|Orange|Yellow|Green|Mint|Cyan|Blue|Indigo|Purple|Magenta)([1-6])(?:TP([1-6]))?$/;
+
+function resolvePaintClass(
+  prefix: "ThemeBg" | "ThemeColor",
+  paint?: ThemePaint,
+) {
+  if (!paint) return undefined;
+  const match = TOKEN_PATTERN.exec(paint);
+  if (!match) return undefined;
+
+  const [, colorName, level, tp] = match;
+  return `${prefix}-${colorName}${level}${tp ? `TP${tp}` : ""}`;
+}
+
+function isBorderWidth(value: unknown): value is ThemeBorderWidth {
+  return (
+    value === "None" ||
+    value === "Light" ||
+    value === "Regular" ||
+    value === "Bold"
+  );
+}
+
+const BLUR_MAP: Record<BlurScale, string> = {
+  ExtraLight: "BackgroundBlur-ExtraLight",
+  Light: "BackgroundBlur-Light",
+  Regular: "BackgroundBlur-Regular",
+  Bold: "BackgroundBlur-Bold",
+  ExtraBold: "BackgroundBlur-ExtraBold",
+  Heavy: "BackgroundBlur-Heavy",
+};
+
+const SHADOW_MAP: Record<ShadowScale, string> = {
+  Light: "ThemeShadow-1",
+  Regular: "ThemeShadow-2",
+  Bold: "ThemeShadow-3",
+};
+
+export function Shadow(shadow?: ThemeShadow) {
+  if (!shadow || shadow === "None") return undefined;
+  return SHADOW_MAP[shadow];
+}
+
+export function BackgroundBlur(value?: BackgroundBlurValue) {
+  if (!value || value === "None") return undefined;
+  return BLUR_MAP[value];
+}
+
+export function Border(
+  border?: ThemeBorderPaint,
+  basePaint: ThemePaint = "Base6TP1",
+) {
+  if (!border) return undefined;
+  if (border === "None") return `ThemeBorder-${basePaint}-None`;
+
+  const [paint, widthValue] = Array.isArray(border)
+    ? isBorderWidth(border[0])
+      ? [basePaint, border]
+      : border
+    : isBorderWidth(border)
+      ? [basePaint, border]
+      : [border, "Regular"];
+  const borderClass = resolvePaintClass("ThemeColor", paint);
+  if (!borderClass) return undefined;
+
+  const paintClass = borderClass.replace("ThemeColor-", "");
+  if (!Array.isArray(widthValue)) {
+    return `ThemeBorder-${paintClass}-${widthValue}`;
+  }
+
+  return widthValue
+    .map((width, index) => `ThemeBorder${index + 1}-${paintClass}-${width}`)
+    .join(" ");
+}
+
+function resolveBackgroundClasses(
+  background?: ThemeBackgroundPaint,
+  canBeInteractive?: boolean,
+) {
+  if (!background) return [];
+  if (typeof background === "string") {
+    const backgroundClass = resolvePaintClass("ThemeBg", background);
+    return backgroundClass ? [backgroundClass] : [];
+  }
+
+  if (!Array.isArray(background)) return [];
+
+  const [idle, hover, active] = background;
+  const classes: string[] = [];
+  const idleClass = resolvePaintClass("ThemeBg", idle);
+  const hasForcedStates = background.length === 3 && canBeInteractive;
+  const hoverClass = hasForcedStates
+    ? resolvePaintClass("ThemeBg", hover)
+    : undefined;
+  const activeClass = hasForcedStates
+    ? resolvePaintClass("ThemeBg", active)
+    : undefined;
+
+  if (idleClass) classes.push(idleClass);
+  if (hoverClass) classes.push(hoverClass.replace("ThemeBg-", "ThemeBgHover-"));
+  if (activeClass)
+    classes.push(activeClass.replace("ThemeBg-", "ThemeBgActive-"));
+
+  return classes;
+}
+
+type ResolvedPreset = {
+  background: ThemeBackgroundPaint;
+  color: ThemePaint;
+};
+
+const PRESET_PATTERN =
+  /^(BaseLight|BaseDark|Base|Reversed|Pink|Red|Brown|Orange|Yellow|Green|Mint|Cyan|Blue|Indigo|Purple|Magenta)(Full|Soft)$/;
+
+function resolvePreset(preset?: ThemePreset): ResolvedPreset | undefined {
+  if (!preset) return undefined;
+
+  if (preset === "UIPrimary") {
+    return {
+      background: ["Base1", "Base2", "Base3"],
+      color: "Base1",
+    };
+  }
+
+  if (preset === "UIPrimaryReversed" || preset === "ReversedUIPrimary") {
+    return {
+      background: ["Reversed1", "Reversed2", "Reversed3"],
+      color: "Reversed1",
+    };
+  }
+
+  if (preset === "UISecondary") {
+    return {
+      background: ["Base4", "Base5", "Base6"],
+      color: "Base1",
+    };
+  }
+
+  if (preset === "UISecondaryReversed" || preset === "ReversedUISecondary") {
+    return {
+      background: ["Reversed4", "Reversed5", "Reversed6"],
+      color: "Reversed1",
+    };
+  }
+
+  const match = PRESET_PATTERN.exec(preset);
+  if (!match) return undefined;
+
+  const colorName = match[1] as ThemeColorName;
+  const tone = match[2] as "Full" | "Soft";
+
+  if (tone === "Full") {
+    const fullColor =
+      colorName === "BaseDark" || !colorName.startsWith("Base")
+        ? "BaseLight1"
+        : "BaseDark1";
+
+    return {
+      background: [`${colorName}4TP1`, `${colorName}5TP1`, `${colorName}6TP1`],
+      color: fullColor,
+    };
+  }
+
+  return {
+    background: [`${colorName}1TP6`, `${colorName}2TP6`, `${colorName}3TP6`],
+    color: `${colorName}1TP1`,
+  };
+}
+
+export function resolveThemeClasses(
+  props: ThemeSystemProps & {
+    selected?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    isInteractive?: boolean;
+  },
+) {
+  const {
+    themePreset,
+    background,
+    color,
+    border,
+    shadow,
+    themeInteractive,
+    selected,
+    disabled,
+    readOnly,
+    isInteractive,
+  } = props;
+
+  const classes: string[] = [];
+
+  const resolvedPreset = selected && !themePreset ? "UISecondary" : themePreset;
+  const preset = resolvePreset(resolvedPreset);
+  const resolvedBackground = background ?? preset?.background;
+  const resolvedColor = color ?? preset?.color;
+  const resolvedBorder = border;
+
+  const canBeInteractive =
+    (isInteractive || themeInteractive === true) && !disabled && !readOnly;
+  const isThemeInteractiveActive = themeInteractive ?? isInteractive;
+
+  const colorClass = resolvePaintClass("ThemeColor", resolvedColor);
+  classes.push(
+    ...resolveBackgroundClasses(resolvedBackground, canBeInteractive),
+  );
+  if (colorClass) classes.push(colorClass);
+  if (resolvedBorder) classes.push(Border(resolvedBorder) ?? "");
+  if (shadow) classes.push(Shadow(shadow) ?? "");
+
+  if (canBeInteractive && isThemeInteractiveActive) {
+    classes.push("ThemeInteractive");
+  }
+
+  if (disabled) {
+    classes.push("ThemeDisabled");
+  }
+
+  if (readOnly) {
+    classes.push("ThemeReadonly");
+  }
+
+  if (selected && themePreset) {
+    classes.push("ThemeSelected");
+  }
+
+  return classes;
+}
+
+export function resolveThemeHasBorder(props: {
+  border?: ThemeBorderPaint;
+  themePreset?: ThemePreset;
+}): boolean {
+  const { border } = props;
+  if (!border || border === "None") return false;
+  return true;
+}

package/packages/Frameworks/Toaster/Toaster.boot.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import Icon from "@/packages/Components/Icon/Icon";
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import styles from "@/packages/Frameworks/Toaster/Toaster.module.scss";
+import type { ToasterBootstrapProps } from "@/packages/Frameworks/Toaster/Toaster.types";
+import clsx from "clsx";
+import { Toaster, toast } from "sonner";
+
+export { toast };
+export type { ToasterBootstrapProps };
+
+const getToastIcon = (color: IconProps["color"]) => (
+  <Icon icon="iCircle" iconFill size={10} color={color} />
+);
+
+export default function ToasterBootstrap({
+  theme,
+  icon: _icon,
+  title: _title,
+  storage: _storage,
+  "data-color-mode": dataTheme,
+}: ToasterBootstrapProps) {
+  return (
+    <Toaster
+      theme={theme}
+      toastOptions={{
+        unstyled: true,
+        className: clsx(
+          styles.Toaster,
+          "Footnote",
+          dataTheme && `color-mode-${dataTheme}`,
+        ),
+        classNames: {
+          loading: styles.Loading,
+        },
+      }}
+      icons={{
+        success: getToastIcon("Green1"),
+        error: getToastIcon("Red1"),
+        info: getToastIcon("Blue1"),
+        warning: getToastIcon("Yellow1"),
+        loading: getToastIcon("Yellow1"),
+      }}
+    />
+  );
+}

package/packages/Frameworks/Toaster/Toaster.module.scss

@@ -0,0 +1,168 @@
+.Toaster {
+  display: flex;
+  gap: 0.8rem;
+  width: max-content !important;
+  max-width: min(calc(100vw - 1.6rem), 56rem) !important;
+  align-self: flex-start;
+  background: color-mix(in srgb, var(--color-base-dark-6) 70%, transparent);
+  color: var(--color-text-base-dark);
+  border-radius: var(--radius-circle);
+  padding: 1rem 1.2rem;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  letter-spacing: 0.03rem;
+  font-weight: 400;
+  z-index: 999999;
+
+  :global([data-icon]) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > :global(.sonner-loader) {
+      position: absolute !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) !important;
+
+      &[data-visible="false"] {
+        display: none !important;
+        opacity: 0 !important;
+        visibility: hidden !important;
+      }
+    }
+
+    & > :not(:global(.sonner-loader)) {
+      position: relative !important;
+      left: 0 !important;
+      transform: none !important;
+      z-index: 1;
+    }
+  }
+
+  :global([data-content]) {
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+
+  :global([data-title]) {
+    display: inline-flex;
+    align-items: baseline;
+  }
+}
+
+.Loading {
+  :global([data-icon]) {
+    animation: loading-dot-pulse 1.1s ease-in-out infinite;
+  }
+
+  :global([data-title]) {
+    opacity: 0.92;
+    animation: loading-text-breath 1.25s ease-in-out infinite;
+  }
+
+  :global([data-title])::after {
+    content: ".";
+    display: inline-block;
+    width: 1.8ch;
+    margin-left: 0.2rem;
+    white-space: nowrap;
+    vertical-align: baseline;
+    text-align: left;
+    color: rgb(255, 255, 255, 0.95);
+    text-shadow:
+      0.6ch 0 rgb(255, 255, 255, 0.35),
+      1.2ch 0 rgb(255, 255, 255, 0.2);
+    animation: loading-dots-sequential 1.35s cubic-bezier(0.4, 0, 0.2, 1)
+      infinite;
+  }
+}
+
+@keyframes loading-dots-sequential {
+  0% {
+    color: rgb(255, 255, 255, 0.95);
+    text-shadow:
+      0.6ch 0 rgb(255, 255, 255, 0.35),
+      1.2ch 0 rgb(255, 255, 255, 0.2);
+  }
+
+  18% {
+    color: rgb(255, 255, 255, 0.78);
+    text-shadow:
+      0.6ch 0 rgb(255, 255, 255, 0.48),
+      1.2ch 0 rgb(255, 255, 255, 0.24);
+  }
+
+  33% {
+    color: rgb(255, 255, 255, 0.45);
+    text-shadow:
+      0.6ch 0 rgb(255, 255, 255, 0.95),
+      1.2ch 0 rgb(255, 255, 255, 0.32);
+  }
+
+  52% {
+    color: rgb(255, 255, 255, 0.28);
+    text-shadow:
+      0.6ch 0 rgb(255, 255, 255, 0.78),
+      1.2ch 0 rgb(255, 255, 255, 0.48);
+  }
+
+  66% {
+    color: rgb(255, 255, 255, 0.24);
+    text-shadow:
+      0.6ch 0 rgb(255, 255, 255, 0.45),
+      1.2ch 0 rgb(255, 255, 255, 0.95);
+  }
+
+  84% {
+    color: rgb(255, 255, 255, 0.38);
+    text-shadow:
+      0.6ch 0 rgb(255, 255, 255, 0.3),
+      1.2ch 0 rgb(255, 255, 255, 0.78);
+  }
+
+  100% {
+    color: rgb(255, 255, 255, 0.95);
+    text-shadow:
+      0.6ch 0 rgb(255, 255, 255, 0.35),
+      1.2ch 0 rgb(255, 255, 255, 0.2);
+  }
+}
+
+@keyframes loading-text-breath {
+  0% {
+    opacity: 0.82;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.82;
+  }
+}
+
+@keyframes loading-dot-pulse {
+  0% {
+    transform: scale(0.88);
+    opacity: 0.58;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.88);
+    opacity: 0.58;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Loading :global([data-icon]),
+  .Loading :global([data-title]),
+  .Loading :global([data-title])::after {
+    animation: none !important;
+  }
+}

package/packages/Frameworks/Toaster/Toaster.types.ts

@@ -0,0 +1,13 @@
+import type { ToasterProps } from "sonner";
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+
+export interface ToasterBootstrapProps extends ToasterProps {
+  "data-color-mode"?: string;
+  theme?: ToasterProps["theme"];
+  icon?: IconProps;
+  title?: React.ReactNode;
+  storage?: {
+    key?: string;
+    value?: string;
+  }[];
+}

package/packages/Frameworks/View/DNDView/DNDView.module.scss

@@ -0,0 +1,8 @@
+.Handle {
+  cursor: grab;
+  touch-action: none;
+}
+
+.Handle:active {
+  cursor: grabbing;
+}