@simplysm/solid 13.0.74 → 13.0.76

package/src/components/feedback/notification/NotificationContext.ts

@@ -1,95 +0,0 @@
-import { type Accessor, createContext, useContext } from "solid-js";
-
-/** Notification theme */
-export type NotificationTheme = "info" | "success" | "warning" | "danger";
-
-/** Notification action button */
-export interface NotificationAction {
-  /** Button text */
-  label: string;
-  /** Click handler */
-  onClick: () => void;
-}
-
-/** Notification item */
-export interface NotificationItem {
-  /** Unique identifier */
-  id: string;
-  /** Theme (info, success, warning, danger) */
-  theme: NotificationTheme;
-  /** Notification title */
-  title: string;
-  /** Notification message (optional) */
-  message?: string;
-  /** Action button (optional) */
-  action?: NotificationAction;
-  /** Creation time */
-  createdAt: Date;
-  /** Read status */
-  read: boolean;
-}
-
-/** Notification creation options */
-export interface NotificationOptions {
-  /** Action button to display in notification */
-  action?: NotificationAction;
-}
-
-/** Notification update options */
-export interface NotificationUpdateOptions {
-  /** If true, mark read notification as unread (redisplay banner) */
-  renotify?: boolean;
-}
-
-/**
- * Notification system Context value
- *
- * @remarks
- * Provides methods to create, update, delete, and manage read status of notifications.
- * Maintains up to 50 notifications; older items are removed when exceeded.
- */
-export interface NotificationContextValue {
-  // State
-  items: Accessor<NotificationItem[]>;
-  unreadCount: Accessor<number>;
-  latestUnread: Accessor<NotificationItem | undefined>;
-
-  // Create notification (returns id)
-  info: (title: string, message?: string, options?: NotificationOptions) => string;
-  success: (title: string, message?: string, options?: NotificationOptions) => string;
-  warning: (title: string, message?: string, options?: NotificationOptions) => string;
-  danger: (title: string, message?: string, options?: NotificationOptions) => string;
-  error: (err?: any, header?: string) => void;
-
-  // Update notification
-  update: (
-    id: string,
-    updates: Partial<Pick<NotificationItem, "title" | "message" | "theme" | "action">>,
-    options?: NotificationUpdateOptions,
-  ) => void;
-
-  // Delete notification
-  remove: (id: string) => void;
-
-  // Management
-  markAsRead: (id: string) => void;
-  markAllAsRead: () => void;
-  dismissBanner: () => void;
-  clear: () => void;
-}
-
-/** Notification system Context */
-export const NotificationContext = createContext<NotificationContextValue>();
-
-/**
- * Hook to access the notification system
- *
- * @throws Error if used outside NotificationProvider
- */
-export function useNotification(): NotificationContextValue {
-  const context = useContext(NotificationContext);
-  if (!context) {
-    throw new Error("useNotification can only be used inside NotificationProvider");
-  }
-  return context;
-}

package/src/components/feedback/print/PrintContext.ts

@@ -1,20 +0,0 @@
-import { createContext, useContext } from "solid-js";
-import type { JSX } from "solid-js";
-
-export interface PrintOptions {
-  size?: string;
-  margin?: string;
-}
-
-export interface PrintContextValue {
-  toPrinter: (factory: () => JSX.Element, options?: PrintOptions) => Promise<void>;
-  toPdf: (factory: () => JSX.Element, options?: PrintOptions) => Promise<Uint8Array>;
-}
-
-export const PrintContext = createContext<PrintContextValue>();
-
-export function usePrint(): PrintContextValue {
-  const ctx = useContext(PrintContext);
-  if (!ctx) throw new Error("usePrint can only be used inside PrintProvider");
-  return ctx;
-}

package/src/components/feedback/print/PrintInstanceContext.ts

@@ -1,11 +0,0 @@
-import { createContext, useContext } from "solid-js";
-
-export interface PrintInstance {
-  ready: () => void;
-}
-
-export const PrintInstanceContext = createContext<PrintInstance>();
-
-export function usePrintInstance(): PrintInstance | undefined {
-  return useContext(PrintInstanceContext);
-}

package/src/components/form-control/combobox/ComboboxContext.ts

@@ -1,25 +0,0 @@
-import { type JSX, createContext, useContext } from "solid-js";
-
-export interface ComboboxContextValue<TValue = unknown> {
-  /** Check if value is selected */
-  isSelected: (value: TValue) => boolean;
-
-  /** Select value */
-  selectValue: (value: TValue) => void;
-
-  /** Close dropdown */
-  closeDropdown: () => void;
-
-  /** Register item template */
-  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
-}
-
-export const ComboboxContext = createContext<ComboboxContextValue>();
-
-export function useComboboxContext<TValue = unknown>(): ComboboxContextValue<TValue> {
-  const context = useContext(ComboboxContext);
-  if (!context) {
-    throw new Error("useComboboxContext can only be used inside the Combobox component");
-  }
-  return context as ComboboxContextValue<TValue>;
-}

package/src/components/form-control/combobox/ComboboxItem.tsx

@@ -1,69 +0,0 @@
-import { type JSX, type ParentComponent, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { useComboboxContext } from "./ComboboxContext";
-import { ripple } from "../../../directives/ripple";
-import {
-  listItemBaseClass,
-  listItemSelectedClass,
-  listItemDisabledClass,
-  listItemContentClass,
-} from "../../data/list/ListItem.styles";
-
-void ripple;
-
-export interface ComboboxItemProps<TValue = unknown> extends Omit<
-  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
-  "value" | "onClick"
-> {
-  /** Item value */
-  value: TValue;
-
-  /** Disabled */
-  disabled?: boolean;
-}
-
-/**
- * Selectable item in Combobox dropdown
- */
-export const ComboboxItem: ParentComponent<ComboboxItemProps> = <T,>(
-  props: ComboboxItemProps<T> & { children?: JSX.Element },
-) => {
-  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
-
-  const context = useComboboxContext<T>();
-
-  const isSelected = () => context.isSelected(local.value);
-  const useRipple = () => !local.disabled;
-
-  const handleClick = () => {
-    if (local.disabled) return;
-    context.selectValue(local.value);
-    context.closeDropdown();
-  };
-
-  const getClassName = () =>
-    twMerge(
-      listItemBaseClass,
-      isSelected() && listItemSelectedClass,
-      local.disabled && listItemDisabledClass,
-      local.class,
-    );
-
-  return (
-    <button
-      {...rest}
-      type="button"
-      use:ripple={useRipple()}
-      class={getClassName()}
-      data-combobox-item
-      data-list-item
-      role="option"
-      aria-selected={isSelected() || undefined}
-      aria-disabled={local.disabled || undefined}
-      tabIndex={local.disabled ? -1 : 0}
-      onClick={handleClick}
-    >
-      <span class={listItemContentClass}>{local.children}</span>
-    </button>
-  );
-};

package/src/components/form-control/select/SelectContext.ts

@@ -1,35 +0,0 @@
-import { createContext, useContext, type Accessor, type JSX } from "solid-js";
-import type { SlotAccessor } from "../../../hooks/createSlotSignal";
-
-export interface SelectContextValue<TValue = unknown> {
-  /** Whether multiple select mode is enabled */
-  multiple: Accessor<boolean>;
-
-  /** Check if value is selected */
-  isSelected: (value: TValue) => boolean;
-
-  /** Toggle value selection/deselection */
-  toggleValue: (value: TValue) => void;
-
-  /** Close dropdown */
-  closeDropdown: () => void;
-
-  /** Register header slot */
-  setHeader: (content: SlotAccessor) => void;
-
-  /** Register action slot */
-  setAction: (content: SlotAccessor) => void;
-
-  /** Register item template */
-  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
-}
-
-export const SelectContext = createContext<SelectContextValue>();
-
-export function useSelectContext<TValue = unknown>(): SelectContextValue<TValue> {
-  const context = useContext(SelectContext);
-  if (!context) {
-    throw new Error("useSelectContext can only be used inside Select component");
-  }
-  return context as SelectContextValue<TValue>;
-}

package/src/components/form-control/select/SelectItem.tsx

@@ -1,128 +0,0 @@
-import { createContext, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { IconCheck } from "@tabler/icons-solidjs";
-import { Icon } from "../../display/Icon";
-import { useSelectContext } from "./SelectContext";
-import { ripple } from "../../../directives/ripple";
-import { createSlotSignal, type SlotAccessor } from "../../../hooks/createSlotSignal";
-import { createSlotComponent } from "../../../helpers/createSlotComponent";
-import { List } from "../../data/list/List";
-import { Collapse } from "../../disclosure/Collapse";
-import {
-  listItemBaseClass,
-  listItemSelectedClass,
-  listItemDisabledClass,
-  listItemIndentGuideClass,
-  listItemContentClass,
-  getListItemSelectedIconClass,
-} from "../../data/list/ListItem.styles";
-
-void ripple;
-
-interface SelectItemSlotsContextValue {
-  setChildren: (content: SlotAccessor) => void;
-}
-
-const SelectItemSlotsContext = createContext<SelectItemSlotsContextValue>();
-
-const SelectItemChildren = createSlotComponent(SelectItemSlotsContext, (ctx) => ctx.setChildren);
-
-export interface SelectItemProps<TValue = unknown> extends Omit<
-  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
-  "value" | "onClick"
-> {
-  /** Item value */
-  value: TValue;
-
-  /** Disabled state */
-  disabled?: boolean;
-}
-
-interface SelectItemComponent<TValue = unknown> extends ParentComponent<SelectItemProps<TValue>> {
-  Children: typeof SelectItemChildren;
-}
-
-/**
- * Selectable item within Select dropdown
- *
- * @example
- * ```tsx
- * <Select.Item value={item}>{item.name}</Select.Item>
- *
- * // Nested items
- * <Select.Item value={parent}>
- *   {parent.name}
- *   <Select.Item.Children>
- *     <Select.Item value={child}>{child.name}</Select.Item>
- *   </Select.Item.Children>
- * </Select.Item>
- * ```
- */
-export const SelectItem: SelectItemComponent = <T,>(
-  props: SelectItemProps<T> & { children?: JSX.Element },
-) => {
-  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
-
-  const context = useSelectContext<T>();
-
-  const [childrenSlot, setChildrenSlot] = createSlotSignal();
-  const hasChildren = () => childrenSlot() !== undefined;
-  const isSelected = () => context.isSelected(local.value);
-  const useRipple = () => !local.disabled;
-
-  const handleClick = () => {
-    if (local.disabled) return;
-
-    context.toggleValue(local.value);
-
-    // Close dropdown only in single select mode
-    if (!context.multiple()) {
-      context.closeDropdown();
-    }
-  };
-
-  const getClassName = () =>
-    twMerge(
-      listItemBaseClass,
-      isSelected() && listItemSelectedClass,
-      local.disabled && listItemDisabledClass,
-      local.class,
-    );
-
-  const getCheckIconClass = () => getListItemSelectedIconClass(isSelected());
-
-  return (
-    <SelectItemSlotsContext.Provider value={{ setChildren: setChildrenSlot }}>
-      <button
-        {...rest}
-        type="button"
-        use:ripple={useRipple()}
-        class={getClassName()}
-        data-select-item
-        data-list-item
-        role="option"
-        aria-selected={isSelected() || undefined}
-        aria-disabled={local.disabled || undefined}
-        tabIndex={local.disabled ? -1 : 0}
-        onClick={handleClick}
-      >
-        <Show when={context.multiple() && !hasChildren()}>
-          <Icon icon={IconCheck} class={getCheckIconClass()} />
-        </Show>
-        <span class={listItemContentClass}>{local.children}</span>
-      </button>
-      <Show when={hasChildren()}>
-        <Collapse open={true}>
-          <div class="flex">
-            <div class={listItemIndentGuideClass} />
-            <List inset class="flex-1">
-              {childrenSlot()!()}
-            </List>
-          </div>
-        </Collapse>
-      </Show>
-    </SelectItemSlotsContext.Provider>
-  );
-};
-
-SelectItem.Children = SelectItemChildren;

package/src/components/layout/sidebar/SidebarContainer.tsx

@@ -1,123 +0,0 @@
-import {
-  type JSX,
-  type ParentComponent,
-  Show,
-  splitProps,
-  createMemo,
-  createSignal,
-} from "solid-js";
-import { useBeforeLeave } from "@solidjs/router";
-import { createMediaQuery } from "@solid-primitives/media";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
-import { SidebarContext, SM_MEDIA_QUERY } from "./SidebarContext";
-import { mergeStyles } from "../../../helpers/mergeStyles";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-
-const backdropClass = clsx(
-  "absolute",
-  "top-0",
-  "left-0",
-  "right-0",
-  "bottom-0",
-  "z-sidebar-backdrop",
-  "bg-black/50",
-  "sm:hidden",
-);
-
-const containerClass = clsx("relative h-full transition-[padding-left] duration-100");
-
-export interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  children: JSX.Element;
-}
-
-/**
- * Sidebar container component
- *
- * @remarks
- * - Acts as container with `position: relative` for Sidebar
- * - Parent element must have height specified (use `h-full`)
- * - Content area's `overflow-auto` must be applied by user
- * - Shares toggle state via SidebarContext.Provider
- * - Toggle state is kept in memory only (reset on page refresh)
- * - On desktop (640px+): uses padding-left + transition to expand/collapse content
- * - On mobile (640px-): renders backdrop and closes on click
- * - Auto closes on mobile when page navigates
- *
- * @example
- * ```tsx
- * <div class="h-screen">
- *   <SidebarContainer>
- *     <Sidebar>
- *       <SidebarUser menus={userMenus}>
- *         <span>User</span>
- *       </SidebarUser>
- *       <SidebarMenu menus={menuItems} />
- *     </Sidebar>
- *     <main class="h-full overflow-auto">Content</main>
- *   </SidebarContainer>
- * </div>
- * ```
- */
-export const SidebarContainer: ParentComponent<SidebarContainerProps> = (props) => {
-  const [local, rest] = splitProps(props, ["children", "class", "style"]);
-
-  const i18n = useI18n();
-  const [toggle, setToggle] = createSignal(false);
-
-  // Detect Tailwind sm: breakpoint
-  const isDesktop = createMediaQuery(SM_MEDIA_QUERY);
-
-  // Calculate sidebar open state
-  const isOpen = createMemo(() => {
-    if (isDesktop()) {
-      return !toggle();
-    }
-    return toggle();
-  });
-
-  // Close on backdrop click
-  const handleBackdropClick = () => {
-    setToggle(false);
-  };
-
-  // Auto-close on page navigation on mobile
-  useBeforeLeave(() => {
-    if (!isDesktop() && toggle()) {
-      setToggle(false);
-    }
-  });
-
-  // Apply padding-left on desktop when sidebar is open (16rem = w-64)
-  const getPaddingLeft = () => {
-    if (isDesktop() && isOpen()) {
-      return "16rem";
-    }
-    return undefined;
-  };
-
-  const getClassName = () => twMerge(containerClass, local.class);
-
-  return (
-    <SidebarContext.Provider value={{ toggle, setToggle }}>
-      <div
-        {...rest}
-        data-sidebar-container
-        class={getClassName()}
-        style={mergeStyles(local.style, { "padding-left": getPaddingLeft() })}
-      >
-        {local.children}
-        <Show when={!isDesktop() && isOpen()}>
-          <div
-            class={backdropClass}
-            onClick={handleBackdropClick}
-            onKeyDown={(e) => e.key === "Escape" && handleBackdropClick()}
-            role="button"
-            aria-label={i18n.t("sidebar.closeSidebar")}
-            tabIndex={0}
-          />
-        </Show>
-      </div>
-    </SidebarContext.Provider>
-  );
-};

package/src/components/layout/sidebar/SidebarContext.ts

@@ -1,40 +0,0 @@
-import { createContext, useContext, type Accessor, type Setter } from "solid-js";
-
-/**
- * Media query corresponding to Tailwind sm: breakpoint
- * @see tailwind.config.ts screens.sm (640px)
- */
-export const SM_MEDIA_QUERY = "(min-width: 640px)";
-
-/**
- * Sidebar toggle state shared Context
- *
- * @remarks
- * toggle semantics:
- * - `toggle=false` (default): open on desktop (640px+), closed on mobile (640px-)
- * - `toggle=true`: closed on desktop (640px+), open on mobile (640px-) as overlay
- */
-export interface SidebarContextValue {
-  toggle: Accessor<boolean>;
-  setToggle: Setter<boolean>;
-}
-
-export const SidebarContext = createContext<SidebarContextValue>();
-
-export function useSidebarContext(): SidebarContextValue {
-  const context = useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebarContext can only be used inside SidebarContainer");
-  }
-  return context;
-}
-
-/**
- * Optionally use SidebarContext (returns undefined if no Context)
- *
- * @remarks
- * Used in components that can be used outside SidebarContainer (e.g., Topbar)
- */
-export function useSidebarContextOptional(): SidebarContextValue | undefined {
-  return useContext(SidebarContext);
-}