diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index c7bf1481..e92f3185 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -1,4 +1,4 @@ -name: Publish (NPM & GPR) +name: Publish to NPM # publish only when package json has changed - assuming version upgrade on: @@ -8,8 +8,6 @@ on: jobs: publish: - # Don't run just after creating repo from template - # Also avoid running after merging set-up PR runs-on: ubuntu-latest permissions: packages: write @@ -33,37 +31,15 @@ jobs: # fail and not publish if any of the unit tests are failing - name: Test run: pnpm test - - name: Update topics and Publish to NPM - run: pnpm build && pnpm publish-package && cd dist && node ../scope.js && npm publish --access public + - name: Create release and Publish to NPM + run: pnpm build && pnpm publish-package && node scope.js && pnpm publish-package env: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} TOKEN: ${{ secrets.GITHUB_TOKEN }} OWNER: ${{ github.event.repository.owner.login }} REPO: ${{ github.event.repository.name }} - - uses: actions/setup-node@v3 - with: - registry-url: https://npm.pkg.github.com/ - - name: Publish to GitHub Public Repository - run: pnpm publish-package - continue-on-error: true - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Publish lite version - - uses: actions/setup-node@v3 - with: - node-version: 18 - registry-url: https://registry.npmjs.org - - run: node lite.js && pnpm build && pnpm publish-package && cd dist && node ../scope.js && sleep 2s && npm publish --access public + - run: node lite.js && pnpm build && pnpm publish-package && node scope.js && pnpm publish-package env: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} - TOKEN: ${{ secrets.GITHUB_TOKEN }} - OWNER: ${{ github.event.repository.owner.login }} - REPO: ${{ github.event.repository.name }} - - uses: actions/setup-node@v3 - with: - registry-url: https://npm.pkg.github.com/ - - name: Publish to GitHub Public Repository - run: pnpm publish-package - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/docs/functions/client_color_switch_color_switch.ColorSwitch.html b/docs/functions/client_color_switch_color_switch.ColorSwitch.html index 10e9fc99..4c6d626e 100644 --- a/docs/functions/client_color_switch_color_switch.ColorSwitch.html +++ b/docs/functions/client_color_switch_color_switch.ColorSwitch.html @@ -4,4 +4,4 @@

custom size

<ColorSwitch size={20} />
-

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html b/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html index 9f08c216..74280e05 100644 --- a/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html +++ b/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html @@ -1 +1 @@ -ForceColorScheme | Code Documentation

Function ForceColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +ForceColorScheme | Code Documentation

Function ForceColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_force_theme_force_theme.ForceTheme.html b/docs/functions/client_force_theme_force_theme.ForceTheme.html index 496e4de8..60259053 100644 --- a/docs/functions/client_force_theme_force_theme.ForceTheme.html +++ b/docs/functions/client_force_theme_force_theme.ForceTheme.html @@ -1 +1 @@ -ForceTheme | Code Documentation

Function ForceTheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +ForceTheme | Code Documentation

Function ForceTheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html b/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html index 9a353325..9636d5e9 100644 --- a/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html +++ b/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html @@ -1 +1 @@ -ThemeSwitcher | Code Documentation

Function ThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +ThemeSwitcher | Code Documentation

Function ThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html b/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html index 322cb8f3..34ac53f9 100644 --- a/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html +++ b/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html @@ -1 +1 @@ -useThemeSwitcher | Code Documentation

Function useThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +useThemeSwitcher | Code Documentation

Function useThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html index 11b96e8e..7b28f866 100644 --- a/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html +++ b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html @@ -1,3 +1,3 @@ NextJsSSGThemeSwitcher | Code Documentation

Function NextJsSSGThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html index 3b5adfbc..f3c7dec7 100644 --- a/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html +++ b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html @@ -1,4 +1,4 @@ ServerSideWrapper | Code Documentation

Function ServerSideWrapper

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/utils.resolveThemeFromColorScheme.html b/docs/functions/utils.resolveThemeFromColorScheme.html index 833d8ad7..5757c8f1 100644 --- a/docs/functions/utils.resolveThemeFromColorScheme.html +++ b/docs/functions/utils.resolveThemeFromColorScheme.html @@ -1 +1 @@ -resolveThemeFromColorScheme | Code Documentation

Function resolveThemeFromColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +resolveThemeFromColorScheme | Code Documentation

Function resolveThemeFromColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html b/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html index ded1117a..43ebb4ce 100644 --- a/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html +++ b/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html @@ -1,3 +1,3 @@ -ColorSwitchProps | Code Documentation

Interface ColorSwitchProps

interface ColorSwitchProps {
    size?: number;
}

Properties

size? +ColorSwitchProps | Code Documentation

Interface ColorSwitchProps

interface ColorSwitchProps {
    size?: number;
}

Properties

size?

Properties

Optional size

size?: number

Diameter of the color color switch

-

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html b/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html index a369208e..cc73c465 100644 --- a/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html +++ b/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html @@ -1,4 +1,4 @@ -ThemeSwitcherProps | Code Documentation

Interface ThemeSwitcherProps

interface ThemeSwitcherProps {
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    targetSelector?: string;
}

Properties

forcedColorScheme? +ThemeSwitcherProps | Code Documentation

Interface ThemeSwitcherProps

interface ThemeSwitcherProps {
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    targetSelector?: string;
}

Properties

forcedColorScheme? forcedTheme? targetSelector? -

Properties

Optional forcedColorScheme

forcedColorScheme?: ColorSchemeType

Optional forcedTheme

forcedTheme?: string

Optional targetSelector

targetSelector?: string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Properties

Optional forcedColorScheme

forcedColorScheme?: ColorSchemeType

Optional forcedTheme

forcedTheme?: string

Optional targetSelector

targetSelector?: string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html index 45e22346..500f6cbf 100644 --- a/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html +++ b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html @@ -1,4 +1,4 @@ -NextJsSSRThemeSwitcherProps | Code Documentation

Interface NextJsSSRThemeSwitcherProps

interface NextJsSSRThemeSwitcherProps {
    about?: string;
    accept?: string;
    acceptCharset?: string;
    accessKey?: string;
    action?: string | ((formData) => void);
    allowFullScreen?: boolean;
    allowTransparency?: boolean;
    alt?: string;
    aria-activedescendant?: string;
    aria-atomic?: Booleanish;
    aria-autocomplete?: "list" | "none" | "inline" | "both";
    aria-braillelabel?: string;
    aria-brailleroledescription?: string;
    aria-busy?: Booleanish;
    aria-checked?: boolean | "true" | "false" | "mixed";
    aria-colcount?: number;
    aria-colindex?: number;
    aria-colindextext?: string;
    aria-colspan?: number;
    aria-controls?: string;
    aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location";
    aria-describedby?: string;
    aria-description?: string;
    aria-details?: string;
    aria-disabled?: Booleanish;
    aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup";
    aria-errormessage?: string;
    aria-expanded?: Booleanish;
    aria-flowto?: string;
    aria-grabbed?: Booleanish;
    aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
    aria-hidden?: Booleanish;
    aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling";
    aria-keyshortcuts?: string;
    aria-label?: string;
    aria-labelledby?: string;
    aria-level?: number;
    aria-live?: "off" | "assertive" | "polite";
    aria-modal?: Booleanish;
    aria-multiline?: Booleanish;
    aria-multiselectable?: Booleanish;
    aria-orientation?: "horizontal" | "vertical";
    aria-owns?: string;
    aria-placeholder?: string;
    aria-posinset?: number;
    aria-pressed?: boolean | "true" | "false" | "mixed";
    aria-readonly?: Booleanish;
    aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
    aria-required?: Booleanish;
    aria-roledescription?: string;
    aria-rowcount?: number;
    aria-rowindex?: number;
    aria-rowindextext?: string;
    aria-rowspan?: number;
    aria-selected?: Booleanish;
    aria-setsize?: number;
    aria-sort?: "none" | "ascending" | "descending" | "other";
    aria-valuemax?: number;
    aria-valuemin?: number;
    aria-valuenow?: number;
    aria-valuetext?: string;
    as?: string;
    async?: boolean;
    autoCapitalize?: string;
    autoComplete?: string;
    autoCorrect?: string;
    autoFocus?: boolean;
    autoPlay?: boolean;
    autoSave?: string;
    capture?: boolean | "user" | "environment";
    cellPadding?: string | number;
    cellSpacing?: string | number;
    challenge?: string;
    charSet?: string;
    checked?: boolean;
    children?: ReactNode;
    cite?: string;
    classID?: string;
    className?: string;
    colSpan?: number;
    color?: string;
    cols?: number;
    content?: string;
    contentEditable?: Booleanish | "inherit" | "plaintext-only";
    contextMenu?: string;
    controls?: boolean;
    coords?: string;
    crossOrigin?: CrossOrigin;
    dangerouslySetInnerHTML?: {
        __html: string | TrustedHTML;
    };
    data?: string;
    datatype?: string;
    dateTime?: string;
    default?: boolean;
    defaultChecked?: boolean;
    defaultValue?: string | number | readonly string[];
    defer?: boolean;
    dir?: string;
    disabled?: boolean;
    download?: any;
    draggable?: Booleanish;
    encType?: string;
    forcedPages?: ForcedPage[];
    form?: string;
    formAction?: string | ((formData) => void);
    formEncType?: string;
    formMethod?: string;
    formNoValidate?: boolean;
    formTarget?: string;
    frameBorder?: string | number;
    headers?: string;
    height?: string | number;
    hidden?: boolean;
    high?: number;
    href?: string;
    hrefLang?: string;
    htmlFor?: string;
    httpEquiv?: string;
    id?: string;
    inlist?: any;
    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
    integrity?: string;
    is?: string;
    itemID?: string;
    itemProp?: string;
    itemRef?: string;
    itemScope?: boolean;
    itemType?: string;
    key?: null | Key;
    keyParams?: string;
    keyType?: string;
    kind?: string;
    label?: string;
    lang?: string;
    list?: string;
    loop?: boolean;
    low?: number;
    manifest?: string;
    marginHeight?: number;
    marginWidth?: number;
    max?: string | number;
    maxLength?: number;
    media?: string;
    mediaGroup?: string;
    method?: string;
    min?: string | number;
    minLength?: number;
    multiple?: boolean;
    muted?: boolean;
    name?: string;
    noValidate?: boolean;
    nonce?: string;
    onAbort?: ReactEventHandler<HTMLElement>;
    onAbortCapture?: ReactEventHandler<HTMLElement>;
    onAnimationEnd?: AnimationEventHandler<HTMLElement>;
    onAnimationEndCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationIteration?: AnimationEventHandler<HTMLElement>;
    onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationStart?: AnimationEventHandler<HTMLElement>;
    onAnimationStartCapture?: AnimationEventHandler<HTMLElement>;
    onAuxClick?: MouseEventHandler<HTMLElement>;
    onAuxClickCapture?: MouseEventHandler<HTMLElement>;
    onBeforeInput?: FormEventHandler<HTMLElement>;
    onBeforeInputCapture?: FormEventHandler<HTMLElement>;
    onBlur?: FocusEventHandler<HTMLElement>;
    onBlurCapture?: FocusEventHandler<HTMLElement>;
    onCanPlay?: ReactEventHandler<HTMLElement>;
    onCanPlayCapture?: ReactEventHandler<HTMLElement>;
    onCanPlayThrough?: ReactEventHandler<HTMLElement>;
    onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>;
    onChange?: FormEventHandler<HTMLElement>;
    onChangeCapture?: FormEventHandler<HTMLElement>;
    onClick?: MouseEventHandler<HTMLElement>;
    onClickCapture?: MouseEventHandler<HTMLElement>;
    onCompositionEnd?: CompositionEventHandler<HTMLElement>;
    onCompositionEndCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionStart?: CompositionEventHandler<HTMLElement>;
    onCompositionStartCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdate?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>;
    onContextMenu?: MouseEventHandler<HTMLElement>;
    onContextMenuCapture?: MouseEventHandler<HTMLElement>;
    onCopy?: ClipboardEventHandler<HTMLElement>;
    onCopyCapture?: ClipboardEventHandler<HTMLElement>;
    onCut?: ClipboardEventHandler<HTMLElement>;
    onCutCapture?: ClipboardEventHandler<HTMLElement>;
    onDoubleClick?: MouseEventHandler<HTMLElement>;
    onDoubleClickCapture?: MouseEventHandler<HTMLElement>;
    onDrag?: DragEventHandler<HTMLElement>;
    onDragCapture?: DragEventHandler<HTMLElement>;
    onDragEnd?: DragEventHandler<HTMLElement>;
    onDragEndCapture?: DragEventHandler<HTMLElement>;
    onDragEnter?: DragEventHandler<HTMLElement>;
    onDragEnterCapture?: DragEventHandler<HTMLElement>;
    onDragExit?: DragEventHandler<HTMLElement>;
    onDragExitCapture?: DragEventHandler<HTMLElement>;
    onDragLeave?: DragEventHandler<HTMLElement>;
    onDragLeaveCapture?: DragEventHandler<HTMLElement>;
    onDragOver?: DragEventHandler<HTMLElement>;
    onDragOverCapture?: DragEventHandler<HTMLElement>;
    onDragStart?: DragEventHandler<HTMLElement>;
    onDragStartCapture?: DragEventHandler<HTMLElement>;
    onDrop?: DragEventHandler<HTMLElement>;
    onDropCapture?: DragEventHandler<HTMLElement>;
    onDurationChange?: ReactEventHandler<HTMLElement>;
    onDurationChangeCapture?: ReactEventHandler<HTMLElement>;
    onEmptied?: ReactEventHandler<HTMLElement>;
    onEmptiedCapture?: ReactEventHandler<HTMLElement>;
    onEncrypted?: ReactEventHandler<HTMLElement>;
    onEncryptedCapture?: ReactEventHandler<HTMLElement>;
    onEnded?: ReactEventHandler<HTMLElement>;
    onEndedCapture?: ReactEventHandler<HTMLElement>;
    onError?: ReactEventHandler<HTMLElement>;
    onErrorCapture?: ReactEventHandler<HTMLElement>;
    onFocus?: FocusEventHandler<HTMLElement>;
    onFocusCapture?: FocusEventHandler<HTMLElement>;
    onGotPointerCapture?: PointerEventHandler<HTMLElement>;
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onInput?: FormEventHandler<HTMLElement>;
    onInputCapture?: FormEventHandler<HTMLElement>;
    onInvalid?: FormEventHandler<HTMLElement>;
    onInvalidCapture?: FormEventHandler<HTMLElement>;
    onKeyDown?: KeyboardEventHandler<HTMLElement>;
    onKeyDownCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyPress?: KeyboardEventHandler<HTMLElement>;
    onKeyPressCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyUp?: KeyboardEventHandler<HTMLElement>;
    onKeyUpCapture?: KeyboardEventHandler<HTMLElement>;
    onLoad?: ReactEventHandler<HTMLElement>;
    onLoadCapture?: ReactEventHandler<HTMLElement>;
    onLoadStart?: ReactEventHandler<HTMLElement>;
    onLoadStartCapture?: ReactEventHandler<HTMLElement>;
    onLoadedData?: ReactEventHandler<HTMLElement>;
    onLoadedDataCapture?: ReactEventHandler<HTMLElement>;
    onLoadedMetadata?: ReactEventHandler<HTMLElement>;
    onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>;
    onLostPointerCapture?: PointerEventHandler<HTMLElement>;
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onMouseDown?: MouseEventHandler<HTMLElement>;
    onMouseDownCapture?: MouseEventHandler<HTMLElement>;
    onMouseEnter?: MouseEventHandler<HTMLElement>;
    onMouseLeave?: MouseEventHandler<HTMLElement>;
    onMouseMove?: MouseEventHandler<HTMLElement>;
    onMouseMoveCapture?: MouseEventHandler<HTMLElement>;
    onMouseOut?: MouseEventHandler<HTMLElement>;
    onMouseOutCapture?: MouseEventHandler<HTMLElement>;
    onMouseOver?: MouseEventHandler<HTMLElement>;
    onMouseOverCapture?: MouseEventHandler<HTMLElement>;
    onMouseUp?: MouseEventHandler<HTMLElement>;
    onMouseUpCapture?: MouseEventHandler<HTMLElement>;
    onPaste?: ClipboardEventHandler<HTMLElement>;
    onPasteCapture?: ClipboardEventHandler<HTMLElement>;
    onPause?: ReactEventHandler<HTMLElement>;
    onPauseCapture?: ReactEventHandler<HTMLElement>;
    onPlay?: ReactEventHandler<HTMLElement>;
    onPlayCapture?: ReactEventHandler<HTMLElement>;
    onPlaying?: ReactEventHandler<HTMLElement>;
    onPlayingCapture?: ReactEventHandler<HTMLElement>;
    onPointerCancel?: PointerEventHandler<HTMLElement>;
    onPointerCancelCapture?: PointerEventHandler<HTMLElement>;
    onPointerDown?: PointerEventHandler<HTMLElement>;
    onPointerDownCapture?: PointerEventHandler<HTMLElement>;
    onPointerEnter?: PointerEventHandler<HTMLElement>;
    onPointerEnterCapture?: PointerEventHandler<HTMLElement>;
    onPointerLeave?: PointerEventHandler<HTMLElement>;
    onPointerLeaveCapture?: PointerEventHandler<HTMLElement>;
    onPointerMove?: PointerEventHandler<HTMLElement>;
    onPointerMoveCapture?: PointerEventHandler<HTMLElement>;
    onPointerOut?: PointerEventHandler<HTMLElement>;
    onPointerOutCapture?: PointerEventHandler<HTMLElement>;
    onPointerOver?: PointerEventHandler<HTMLElement>;
    onPointerOverCapture?: PointerEventHandler<HTMLElement>;
    onPointerUp?: PointerEventHandler<HTMLElement>;
    onPointerUpCapture?: PointerEventHandler<HTMLElement>;
    onProgress?: ReactEventHandler<HTMLElement>;
    onProgressCapture?: ReactEventHandler<HTMLElement>;
    onRateChange?: ReactEventHandler<HTMLElement>;
    onRateChangeCapture?: ReactEventHandler<HTMLElement>;
    onReset?: FormEventHandler<HTMLElement>;
    onResetCapture?: FormEventHandler<HTMLElement>;
    onResize?: ReactEventHandler<HTMLElement>;
    onResizeCapture?: ReactEventHandler<HTMLElement>;
    onScroll?: UIEventHandler<HTMLElement>;
    onScrollCapture?: UIEventHandler<HTMLElement>;
    onSeeked?: ReactEventHandler<HTMLElement>;
    onSeekedCapture?: ReactEventHandler<HTMLElement>;
    onSeeking?: ReactEventHandler<HTMLElement>;
    onSeekingCapture?: ReactEventHandler<HTMLElement>;
    onSelect?: ReactEventHandler<HTMLElement>;
    onSelectCapture?: ReactEventHandler<HTMLElement>;
    onStalled?: ReactEventHandler<HTMLElement>;
    onStalledCapture?: ReactEventHandler<HTMLElement>;
    onSubmit?: FormEventHandler<HTMLElement>;
    onSubmitCapture?: FormEventHandler<HTMLElement>;
    onSuspend?: ReactEventHandler<HTMLElement>;
    onSuspendCapture?: ReactEventHandler<HTMLElement>;
    onTimeUpdate?: ReactEventHandler<HTMLElement>;
    onTimeUpdateCapture?: ReactEventHandler<HTMLElement>;
    onTouchCancel?: TouchEventHandler<HTMLElement>;
    onTouchCancelCapture?: TouchEventHandler<HTMLElement>;
    onTouchEnd?: TouchEventHandler<HTMLElement>;
    onTouchEndCapture?: TouchEventHandler<HTMLElement>;
    onTouchMove?: TouchEventHandler<HTMLElement>;
    onTouchMoveCapture?: TouchEventHandler<HTMLElement>;
    onTouchStart?: TouchEventHandler<HTMLElement>;
    onTouchStartCapture?: TouchEventHandler<HTMLElement>;
    onTransitionEnd?: TransitionEventHandler<HTMLElement>;
    onTransitionEndCapture?: TransitionEventHandler<HTMLElement>;
    onVolumeChange?: ReactEventHandler<HTMLElement>;
    onVolumeChangeCapture?: ReactEventHandler<HTMLElement>;
    onWaiting?: ReactEventHandler<HTMLElement>;
    onWaitingCapture?: ReactEventHandler<HTMLElement>;
    onWheel?: WheelEventHandler<HTMLElement>;
    onWheelCapture?: WheelEventHandler<HTMLElement>;
    open?: boolean;
    optimum?: number;
    pattern?: string;
    placeholder?: string;
    playsInline?: boolean;
    poster?: string;
    prefix?: string;
    preload?: string;
    property?: string;
    radioGroup?: string;
    readOnly?: boolean;
    ref?: LegacyRef<HTMLElement>;
    rel?: string;
    required?: boolean;
    resource?: string;
    results?: number;
    rev?: string;
    reversed?: boolean;
    role?: AriaRole;
    rowSpan?: number;
    rows?: number;
    sandbox?: string;
    scope?: string;
    scoped?: boolean;
    scrolling?: string;
    seamless?: boolean;
    security?: string;
    selected?: boolean;
    shape?: string;
    size?: number;
    sizes?: string;
    slot?: string;
    span?: number;
    spellCheck?: Booleanish;
    src?: string;
    srcDoc?: string;
    srcLang?: string;
    srcSet?: string;
    start?: number;
    step?: string | number;
    style?: CSSProperties;
    summary?: string;
    suppressContentEditableWarning?: boolean;
    suppressHydrationWarning?: boolean;
    tabIndex?: number;
    tag?: keyof IntrinsicElements;
    target?: string;
    title?: string;
    translate?: "yes" | "no";
    type?: string;
    typeof?: string;
    unselectable?: "on" | "off";
    useMap?: string;
    value?: string | number | readonly string[];
    vocab?: string;
    width?: string | number;
    wmode?: string;
    wrap?: string;
}

Hierarchy

Properties

about? +NextJsSSRThemeSwitcherProps | Code Documentation

Interface NextJsSSRThemeSwitcherProps

interface NextJsSSRThemeSwitcherProps {
    about?: string;
    accept?: string;
    acceptCharset?: string;
    accessKey?: string;
    action?: string | ((formData) => void);
    allowFullScreen?: boolean;
    allowTransparency?: boolean;
    alt?: string;
    aria-activedescendant?: string;
    aria-atomic?: Booleanish;
    aria-autocomplete?: "list" | "none" | "inline" | "both";
    aria-braillelabel?: string;
    aria-brailleroledescription?: string;
    aria-busy?: Booleanish;
    aria-checked?: boolean | "true" | "false" | "mixed";
    aria-colcount?: number;
    aria-colindex?: number;
    aria-colindextext?: string;
    aria-colspan?: number;
    aria-controls?: string;
    aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location";
    aria-describedby?: string;
    aria-description?: string;
    aria-details?: string;
    aria-disabled?: Booleanish;
    aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup";
    aria-errormessage?: string;
    aria-expanded?: Booleanish;
    aria-flowto?: string;
    aria-grabbed?: Booleanish;
    aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
    aria-hidden?: Booleanish;
    aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling";
    aria-keyshortcuts?: string;
    aria-label?: string;
    aria-labelledby?: string;
    aria-level?: number;
    aria-live?: "off" | "assertive" | "polite";
    aria-modal?: Booleanish;
    aria-multiline?: Booleanish;
    aria-multiselectable?: Booleanish;
    aria-orientation?: "horizontal" | "vertical";
    aria-owns?: string;
    aria-placeholder?: string;
    aria-posinset?: number;
    aria-pressed?: boolean | "true" | "false" | "mixed";
    aria-readonly?: Booleanish;
    aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
    aria-required?: Booleanish;
    aria-roledescription?: string;
    aria-rowcount?: number;
    aria-rowindex?: number;
    aria-rowindextext?: string;
    aria-rowspan?: number;
    aria-selected?: Booleanish;
    aria-setsize?: number;
    aria-sort?: "none" | "ascending" | "descending" | "other";
    aria-valuemax?: number;
    aria-valuemin?: number;
    aria-valuenow?: number;
    aria-valuetext?: string;
    as?: string;
    async?: boolean;
    autoCapitalize?: string;
    autoComplete?: string;
    autoCorrect?: string;
    autoFocus?: boolean;
    autoPlay?: boolean;
    autoSave?: string;
    capture?: boolean | "user" | "environment";
    cellPadding?: string | number;
    cellSpacing?: string | number;
    challenge?: string;
    charSet?: string;
    checked?: boolean;
    children?: ReactNode;
    cite?: string;
    classID?: string;
    className?: string;
    colSpan?: number;
    color?: string;
    cols?: number;
    content?: string;
    contentEditable?: Booleanish | "inherit" | "plaintext-only";
    contextMenu?: string;
    controls?: boolean;
    coords?: string;
    crossOrigin?: CrossOrigin;
    dangerouslySetInnerHTML?: {
        __html: string | TrustedHTML;
    };
    data?: string;
    datatype?: string;
    dateTime?: string;
    default?: boolean;
    defaultChecked?: boolean;
    defaultValue?: string | number | readonly string[];
    defer?: boolean;
    dir?: string;
    disabled?: boolean;
    download?: any;
    draggable?: Booleanish;
    encType?: string;
    forcedPages?: ForcedPage[];
    form?: string;
    formAction?: string | ((formData) => void);
    formEncType?: string;
    formMethod?: string;
    formNoValidate?: boolean;
    formTarget?: string;
    frameBorder?: string | number;
    headers?: string;
    height?: string | number;
    hidden?: boolean;
    high?: number;
    href?: string;
    hrefLang?: string;
    htmlFor?: string;
    httpEquiv?: string;
    id?: string;
    inlist?: any;
    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
    integrity?: string;
    is?: string;
    itemID?: string;
    itemProp?: string;
    itemRef?: string;
    itemScope?: boolean;
    itemType?: string;
    key?: null | Key;
    keyParams?: string;
    keyType?: string;
    kind?: string;
    label?: string;
    lang?: string;
    list?: string;
    loop?: boolean;
    low?: number;
    manifest?: string;
    marginHeight?: number;
    marginWidth?: number;
    max?: string | number;
    maxLength?: number;
    media?: string;
    mediaGroup?: string;
    method?: string;
    min?: string | number;
    minLength?: number;
    multiple?: boolean;
    muted?: boolean;
    name?: string;
    noValidate?: boolean;
    nonce?: string;
    onAbort?: ReactEventHandler<HTMLElement>;
    onAbortCapture?: ReactEventHandler<HTMLElement>;
    onAnimationEnd?: AnimationEventHandler<HTMLElement>;
    onAnimationEndCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationIteration?: AnimationEventHandler<HTMLElement>;
    onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationStart?: AnimationEventHandler<HTMLElement>;
    onAnimationStartCapture?: AnimationEventHandler<HTMLElement>;
    onAuxClick?: MouseEventHandler<HTMLElement>;
    onAuxClickCapture?: MouseEventHandler<HTMLElement>;
    onBeforeInput?: FormEventHandler<HTMLElement>;
    onBeforeInputCapture?: FormEventHandler<HTMLElement>;
    onBlur?: FocusEventHandler<HTMLElement>;
    onBlurCapture?: FocusEventHandler<HTMLElement>;
    onCanPlay?: ReactEventHandler<HTMLElement>;
    onCanPlayCapture?: ReactEventHandler<HTMLElement>;
    onCanPlayThrough?: ReactEventHandler<HTMLElement>;
    onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>;
    onChange?: FormEventHandler<HTMLElement>;
    onChangeCapture?: FormEventHandler<HTMLElement>;
    onClick?: MouseEventHandler<HTMLElement>;
    onClickCapture?: MouseEventHandler<HTMLElement>;
    onCompositionEnd?: CompositionEventHandler<HTMLElement>;
    onCompositionEndCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionStart?: CompositionEventHandler<HTMLElement>;
    onCompositionStartCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdate?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>;
    onContextMenu?: MouseEventHandler<HTMLElement>;
    onContextMenuCapture?: MouseEventHandler<HTMLElement>;
    onCopy?: ClipboardEventHandler<HTMLElement>;
    onCopyCapture?: ClipboardEventHandler<HTMLElement>;
    onCut?: ClipboardEventHandler<HTMLElement>;
    onCutCapture?: ClipboardEventHandler<HTMLElement>;
    onDoubleClick?: MouseEventHandler<HTMLElement>;
    onDoubleClickCapture?: MouseEventHandler<HTMLElement>;
    onDrag?: DragEventHandler<HTMLElement>;
    onDragCapture?: DragEventHandler<HTMLElement>;
    onDragEnd?: DragEventHandler<HTMLElement>;
    onDragEndCapture?: DragEventHandler<HTMLElement>;
    onDragEnter?: DragEventHandler<HTMLElement>;
    onDragEnterCapture?: DragEventHandler<HTMLElement>;
    onDragExit?: DragEventHandler<HTMLElement>;
    onDragExitCapture?: DragEventHandler<HTMLElement>;
    onDragLeave?: DragEventHandler<HTMLElement>;
    onDragLeaveCapture?: DragEventHandler<HTMLElement>;
    onDragOver?: DragEventHandler<HTMLElement>;
    onDragOverCapture?: DragEventHandler<HTMLElement>;
    onDragStart?: DragEventHandler<HTMLElement>;
    onDragStartCapture?: DragEventHandler<HTMLElement>;
    onDrop?: DragEventHandler<HTMLElement>;
    onDropCapture?: DragEventHandler<HTMLElement>;
    onDurationChange?: ReactEventHandler<HTMLElement>;
    onDurationChangeCapture?: ReactEventHandler<HTMLElement>;
    onEmptied?: ReactEventHandler<HTMLElement>;
    onEmptiedCapture?: ReactEventHandler<HTMLElement>;
    onEncrypted?: ReactEventHandler<HTMLElement>;
    onEncryptedCapture?: ReactEventHandler<HTMLElement>;
    onEnded?: ReactEventHandler<HTMLElement>;
    onEndedCapture?: ReactEventHandler<HTMLElement>;
    onError?: ReactEventHandler<HTMLElement>;
    onErrorCapture?: ReactEventHandler<HTMLElement>;
    onFocus?: FocusEventHandler<HTMLElement>;
    onFocusCapture?: FocusEventHandler<HTMLElement>;
    onGotPointerCapture?: PointerEventHandler<HTMLElement>;
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onInput?: FormEventHandler<HTMLElement>;
    onInputCapture?: FormEventHandler<HTMLElement>;
    onInvalid?: FormEventHandler<HTMLElement>;
    onInvalidCapture?: FormEventHandler<HTMLElement>;
    onKeyDown?: KeyboardEventHandler<HTMLElement>;
    onKeyDownCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyPress?: KeyboardEventHandler<HTMLElement>;
    onKeyPressCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyUp?: KeyboardEventHandler<HTMLElement>;
    onKeyUpCapture?: KeyboardEventHandler<HTMLElement>;
    onLoad?: ReactEventHandler<HTMLElement>;
    onLoadCapture?: ReactEventHandler<HTMLElement>;
    onLoadStart?: ReactEventHandler<HTMLElement>;
    onLoadStartCapture?: ReactEventHandler<HTMLElement>;
    onLoadedData?: ReactEventHandler<HTMLElement>;
    onLoadedDataCapture?: ReactEventHandler<HTMLElement>;
    onLoadedMetadata?: ReactEventHandler<HTMLElement>;
    onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>;
    onLostPointerCapture?: PointerEventHandler<HTMLElement>;
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onMouseDown?: MouseEventHandler<HTMLElement>;
    onMouseDownCapture?: MouseEventHandler<HTMLElement>;
    onMouseEnter?: MouseEventHandler<HTMLElement>;
    onMouseLeave?: MouseEventHandler<HTMLElement>;
    onMouseMove?: MouseEventHandler<HTMLElement>;
    onMouseMoveCapture?: MouseEventHandler<HTMLElement>;
    onMouseOut?: MouseEventHandler<HTMLElement>;
    onMouseOutCapture?: MouseEventHandler<HTMLElement>;
    onMouseOver?: MouseEventHandler<HTMLElement>;
    onMouseOverCapture?: MouseEventHandler<HTMLElement>;
    onMouseUp?: MouseEventHandler<HTMLElement>;
    onMouseUpCapture?: MouseEventHandler<HTMLElement>;
    onPaste?: ClipboardEventHandler<HTMLElement>;
    onPasteCapture?: ClipboardEventHandler<HTMLElement>;
    onPause?: ReactEventHandler<HTMLElement>;
    onPauseCapture?: ReactEventHandler<HTMLElement>;
    onPlay?: ReactEventHandler<HTMLElement>;
    onPlayCapture?: ReactEventHandler<HTMLElement>;
    onPlaying?: ReactEventHandler<HTMLElement>;
    onPlayingCapture?: ReactEventHandler<HTMLElement>;
    onPointerCancel?: PointerEventHandler<HTMLElement>;
    onPointerCancelCapture?: PointerEventHandler<HTMLElement>;
    onPointerDown?: PointerEventHandler<HTMLElement>;
    onPointerDownCapture?: PointerEventHandler<HTMLElement>;
    onPointerEnter?: PointerEventHandler<HTMLElement>;
    onPointerEnterCapture?: PointerEventHandler<HTMLElement>;
    onPointerLeave?: PointerEventHandler<HTMLElement>;
    onPointerLeaveCapture?: PointerEventHandler<HTMLElement>;
    onPointerMove?: PointerEventHandler<HTMLElement>;
    onPointerMoveCapture?: PointerEventHandler<HTMLElement>;
    onPointerOut?: PointerEventHandler<HTMLElement>;
    onPointerOutCapture?: PointerEventHandler<HTMLElement>;
    onPointerOver?: PointerEventHandler<HTMLElement>;
    onPointerOverCapture?: PointerEventHandler<HTMLElement>;
    onPointerUp?: PointerEventHandler<HTMLElement>;
    onPointerUpCapture?: PointerEventHandler<HTMLElement>;
    onProgress?: ReactEventHandler<HTMLElement>;
    onProgressCapture?: ReactEventHandler<HTMLElement>;
    onRateChange?: ReactEventHandler<HTMLElement>;
    onRateChangeCapture?: ReactEventHandler<HTMLElement>;
    onReset?: FormEventHandler<HTMLElement>;
    onResetCapture?: FormEventHandler<HTMLElement>;
    onResize?: ReactEventHandler<HTMLElement>;
    onResizeCapture?: ReactEventHandler<HTMLElement>;
    onScroll?: UIEventHandler<HTMLElement>;
    onScrollCapture?: UIEventHandler<HTMLElement>;
    onSeeked?: ReactEventHandler<HTMLElement>;
    onSeekedCapture?: ReactEventHandler<HTMLElement>;
    onSeeking?: ReactEventHandler<HTMLElement>;
    onSeekingCapture?: ReactEventHandler<HTMLElement>;
    onSelect?: ReactEventHandler<HTMLElement>;
    onSelectCapture?: ReactEventHandler<HTMLElement>;
    onStalled?: ReactEventHandler<HTMLElement>;
    onStalledCapture?: ReactEventHandler<HTMLElement>;
    onSubmit?: FormEventHandler<HTMLElement>;
    onSubmitCapture?: FormEventHandler<HTMLElement>;
    onSuspend?: ReactEventHandler<HTMLElement>;
    onSuspendCapture?: ReactEventHandler<HTMLElement>;
    onTimeUpdate?: ReactEventHandler<HTMLElement>;
    onTimeUpdateCapture?: ReactEventHandler<HTMLElement>;
    onTouchCancel?: TouchEventHandler<HTMLElement>;
    onTouchCancelCapture?: TouchEventHandler<HTMLElement>;
    onTouchEnd?: TouchEventHandler<HTMLElement>;
    onTouchEndCapture?: TouchEventHandler<HTMLElement>;
    onTouchMove?: TouchEventHandler<HTMLElement>;
    onTouchMoveCapture?: TouchEventHandler<HTMLElement>;
    onTouchStart?: TouchEventHandler<HTMLElement>;
    onTouchStartCapture?: TouchEventHandler<HTMLElement>;
    onTransitionEnd?: TransitionEventHandler<HTMLElement>;
    onTransitionEndCapture?: TransitionEventHandler<HTMLElement>;
    onVolumeChange?: ReactEventHandler<HTMLElement>;
    onVolumeChangeCapture?: ReactEventHandler<HTMLElement>;
    onWaiting?: ReactEventHandler<HTMLElement>;
    onWaitingCapture?: ReactEventHandler<HTMLElement>;
    onWheel?: WheelEventHandler<HTMLElement>;
    onWheelCapture?: WheelEventHandler<HTMLElement>;
    open?: boolean;
    optimum?: number;
    pattern?: string;
    placeholder?: string;
    playsInline?: boolean;
    poster?: string;
    prefix?: string;
    preload?: string;
    property?: string;
    radioGroup?: string;
    readOnly?: boolean;
    ref?: LegacyRef<HTMLElement>;
    rel?: string;
    required?: boolean;
    resource?: string;
    results?: number;
    rev?: string;
    reversed?: boolean;
    role?: AriaRole;
    rowSpan?: number;
    rows?: number;
    sandbox?: string;
    scope?: string;
    scoped?: boolean;
    scrolling?: string;
    seamless?: boolean;
    security?: string;
    selected?: boolean;
    shape?: string;
    size?: number;
    sizes?: string;
    slot?: string;
    span?: number;
    spellCheck?: Booleanish;
    src?: string;
    srcDoc?: string;
    srcLang?: string;
    srcSet?: string;
    start?: number;
    step?: string | number;
    style?: CSSProperties;
    summary?: string;
    suppressContentEditableWarning?: boolean;
    suppressHydrationWarning?: boolean;
    tabIndex?: number;
    tag?: keyof IntrinsicElements;
    target?: string;
    title?: string;
    translate?: "yes" | "no";
    type?: string;
    typeof?: string;
    unselectable?: "on" | "off";
    useMap?: string;
    value?: string | number | readonly string[];
    vocab?: string;
    width?: string | number;
    wmode?: string;
    wrap?: string;
}

Hierarchy

Properties

about? accept? acceptCharset? accessKey? @@ -487,10 +487,10 @@

See

aria-valuetext.

Optional aria-valuetext

aria-valuetext?: string

Defines the human readable text alternative of aria-valuenow for a range widget.

Optional as

as?: string

Optional async

async?: boolean

Optional autoCapitalize

autoCapitalize?: string

Non-standard Attributes

-

Optional autoComplete

autoComplete?: string

Optional autoCorrect

autoCorrect?: string

Optional autoFocus

autoFocus?: boolean

Optional autoPlay

autoPlay?: boolean

Optional autoSave

autoSave?: string

Optional capture

capture?: boolean | "user" | "environment"

Optional cellPadding

cellPadding?: string | number

Optional cellSpacing

cellSpacing?: string | number

Optional challenge

challenge?: string

Optional charSet

charSet?: string

Optional checked

checked?: boolean

Optional children

children?: ReactNode

Optional cite

cite?: string

Optional classID

classID?: string

Optional className

className?: string

Optional colSpan

colSpan?: number

Optional color

color?: string

Optional cols

cols?: number

Optional content

content?: string

Optional contentEditable

contentEditable?: Booleanish | "inherit" | "plaintext-only"

Optional contextMenu

contextMenu?: string

Optional controls

controls?: boolean

Optional coords

coords?: string

Optional crossOrigin

crossOrigin?: CrossOrigin

Optional dangerouslySetInnerHTML

dangerouslySetInnerHTML?: {
    __html: string | TrustedHTML;
}

Type declaration

  • __html: string | TrustedHTML

    Should be InnerHTML['innerHTML']. +

Optional autoComplete

autoComplete?: string

Optional autoCorrect

autoCorrect?: string

Optional autoFocus

autoFocus?: boolean

Optional autoPlay

autoPlay?: boolean

Optional autoSave

autoSave?: string

Optional capture

capture?: boolean | "user" | "environment"

Optional cellPadding

cellPadding?: string | number

Optional cellSpacing

cellSpacing?: string | number

Optional challenge

challenge?: string

Optional charSet

charSet?: string

Optional checked

checked?: boolean

Optional children

children?: ReactNode

Optional cite

cite?: string

Optional classID

classID?: string

Optional className

className?: string

Optional colSpan

colSpan?: number

Optional color

color?: string

Optional cols

cols?: number

Optional content

content?: string

Optional contentEditable

contentEditable?: Booleanish | "inherit" | "plaintext-only"

Optional contextMenu

contextMenu?: string

Optional controls

controls?: boolean

Optional coords

coords?: string

Optional crossOrigin

crossOrigin?: CrossOrigin

Optional dangerouslySetInnerHTML

dangerouslySetInnerHTML?: {
    __html: string | TrustedHTML;
}

Type declaration

  • __html: string | TrustedHTML

    Should be InnerHTML['innerHTML']. But unfortunately we're mixing renderer-specific type declarations.

Optional data

data?: string

Optional datatype

datatype?: string

Optional dateTime

dateTime?: string

Optional default

default?: boolean

Optional defaultChecked

defaultChecked?: boolean

React-specific Attributes

-

Optional defaultValue

defaultValue?: string | number | readonly string[]

Optional defer

defer?: boolean

Optional dir

dir?: string

Optional disabled

disabled?: boolean

Optional download

download?: any

Optional draggable

draggable?: Booleanish

Optional encType

encType?: string

Optional forcedPages

forcedPages?: ForcedPage[]

Optional form

form?: string

Optional formAction

formAction?: string | ((formData) => void)

Type declaration

    • (formData): void

    • Parameters

      • formData: FormData

      Returns void

Optional formEncType

formEncType?: string

Optional formMethod

formMethod?: string

Optional formNoValidate

formNoValidate?: boolean

Optional formTarget

formTarget?: string

Optional frameBorder

frameBorder?: string | number

Optional headers

headers?: string

Optional height

height?: string | number

Optional hidden

hidden?: boolean

Optional high

high?: number

Optional href

href?: string

Optional hrefLang

hrefLang?: string

Optional htmlFor

htmlFor?: string

Optional httpEquiv

httpEquiv?: string

Optional id

id?: string

Optional inlist

inlist?: any

Optional inputMode

inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

+

Optional defaultValue

defaultValue?: string | number | readonly string[]

Optional defer

defer?: boolean

Optional dir

dir?: string

Optional disabled

disabled?: boolean

Optional download

download?: any

Optional draggable

draggable?: Booleanish

Optional encType

encType?: string

Optional forcedPages

forcedPages?: ForcedPage[]

Optional form

form?: string

Optional formAction

formAction?: string | ((formData) => void)

Type declaration

    • (formData): void

    • Parameters

      • formData: FormData

      Returns void

Optional formEncType

formEncType?: string

Optional formMethod

formMethod?: string

Optional formNoValidate

formNoValidate?: boolean

Optional formTarget

formTarget?: string

Optional frameBorder

frameBorder?: string | number

Optional headers

headers?: string

Optional height

height?: string | number

Optional hidden

hidden?: boolean

Optional high

high?: number

Optional href

href?: string

Optional hrefLang

hrefLang?: string

Optional htmlFor

htmlFor?: string

Optional httpEquiv

httpEquiv?: string

Optional id

id?: string

Optional inlist

inlist?: any

Optional inputMode

inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

Optional integrity

integrity?: string

Optional is

is?: string

Specify that a standard HTML element should behave like a defined custom built-in element

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

@@ -516,4 +516,4 @@

Optional rel

rel?: string

Optional required

required?: boolean

Optional resource

resource?: string

Optional results

results?: number

Optional rev

rev?: string

Optional reversed

reversed?: boolean

Optional role

role?: AriaRole

WAI-ARIA

Optional rowSpan

rowSpan?: number

Optional rows

rows?: number

Optional sandbox

sandbox?: string

Optional scope

scope?: string

Optional scoped

scoped?: boolean

Optional scrolling

scrolling?: string

Optional seamless

seamless?: boolean

Optional security

security?: string

Optional selected

selected?: boolean

Optional shape

shape?: string

Optional size

size?: number

Optional sizes

sizes?: string

Optional slot

slot?: string

Optional span

span?: number

Optional spellCheck

spellCheck?: Booleanish

Optional src

src?: string

Optional srcDoc

srcDoc?: string

Optional srcLang

srcLang?: string

Optional srcSet

srcSet?: string

Optional start

start?: number

Optional step

step?: string | number

Optional style

style?: CSSProperties

Optional summary

summary?: string

Optional suppressContentEditableWarning

suppressContentEditableWarning?: boolean

Optional suppressHydrationWarning

suppressHydrationWarning?: boolean

Optional tabIndex

tabIndex?: number

Optional tag

tag?: keyof IntrinsicElements

Default Value

'div'
-

Optional target

target?: string

Optional title

title?: string

Optional translate

translate?: "yes" | "no"

Optional type

type?: string

Optional typeof

typeof?: string

Optional unselectable

unselectable?: "on" | "off"

Optional useMap

useMap?: string

Optional value

value?: string | number | readonly string[]

Optional vocab

vocab?: string

Optional width

width?: string | number

Optional wmode

wmode?: string

Optional wrap

wrap?: string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Optional target

target?: string

Optional title

title?: string

Optional translate

translate?: "yes" | "no"

Optional type

type?: string

Optional typeof

typeof?: string

Optional unselectable

unselectable?: "on" | "off"

Optional useMap

useMap?: string

Optional value

value?: string | number | readonly string[]

Optional vocab

vocab?: string

Optional width

width?: string | number

Optional wmode

wmode?: string

Optional wrap

wrap?: string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html index 1938c9bb..31de1995 100644 --- a/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html +++ b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html @@ -1,4 +1,4 @@ -ServerSideWrapperProps | Code Documentation

Interface ServerSideWrapperProps

interface ServerSideWrapperProps {
    about?: string;
    accept?: string;
    acceptCharset?: string;
    accessKey?: string;
    action?: string | ((formData) => void);
    allowFullScreen?: boolean;
    allowTransparency?: boolean;
    alt?: string;
    aria-activedescendant?: string;
    aria-atomic?: Booleanish;
    aria-autocomplete?: "list" | "none" | "inline" | "both";
    aria-braillelabel?: string;
    aria-brailleroledescription?: string;
    aria-busy?: Booleanish;
    aria-checked?: boolean | "true" | "false" | "mixed";
    aria-colcount?: number;
    aria-colindex?: number;
    aria-colindextext?: string;
    aria-colspan?: number;
    aria-controls?: string;
    aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location";
    aria-describedby?: string;
    aria-description?: string;
    aria-details?: string;
    aria-disabled?: Booleanish;
    aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup";
    aria-errormessage?: string;
    aria-expanded?: Booleanish;
    aria-flowto?: string;
    aria-grabbed?: Booleanish;
    aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
    aria-hidden?: Booleanish;
    aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling";
    aria-keyshortcuts?: string;
    aria-label?: string;
    aria-labelledby?: string;
    aria-level?: number;
    aria-live?: "off" | "assertive" | "polite";
    aria-modal?: Booleanish;
    aria-multiline?: Booleanish;
    aria-multiselectable?: Booleanish;
    aria-orientation?: "horizontal" | "vertical";
    aria-owns?: string;
    aria-placeholder?: string;
    aria-posinset?: number;
    aria-pressed?: boolean | "true" | "false" | "mixed";
    aria-readonly?: Booleanish;
    aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
    aria-required?: Booleanish;
    aria-roledescription?: string;
    aria-rowcount?: number;
    aria-rowindex?: number;
    aria-rowindextext?: string;
    aria-rowspan?: number;
    aria-selected?: Booleanish;
    aria-setsize?: number;
    aria-sort?: "none" | "ascending" | "descending" | "other";
    aria-valuemax?: number;
    aria-valuemin?: number;
    aria-valuenow?: number;
    aria-valuetext?: string;
    as?: string;
    async?: boolean;
    autoCapitalize?: string;
    autoComplete?: string;
    autoCorrect?: string;
    autoFocus?: boolean;
    autoPlay?: boolean;
    autoSave?: string;
    capture?: boolean | "user" | "environment";
    cellPadding?: string | number;
    cellSpacing?: string | number;
    challenge?: string;
    charSet?: string;
    checked?: boolean;
    children?: ReactNode;
    cite?: string;
    classID?: string;
    className?: string;
    colSpan?: number;
    color?: string;
    cols?: number;
    content?: string;
    contentEditable?: Booleanish | "inherit" | "plaintext-only";
    contextMenu?: string;
    controls?: boolean;
    coords?: string;
    crossOrigin?: CrossOrigin;
    dangerouslySetInnerHTML?: {
        __html: string | TrustedHTML;
    };
    data?: string;
    datatype?: string;
    dateTime?: string;
    default?: boolean;
    defaultChecked?: boolean;
    defaultValue?: string | number | readonly string[];
    defer?: boolean;
    dir?: string;
    disabled?: boolean;
    download?: any;
    draggable?: Booleanish;
    encType?: string;
    forcedPages?: ForcedPage[];
    form?: string;
    formAction?: string | ((formData) => void);
    formEncType?: string;
    formMethod?: string;
    formNoValidate?: boolean;
    formTarget?: string;
    frameBorder?: string | number;
    headers?: string;
    height?: string | number;
    hidden?: boolean;
    high?: number;
    href?: string;
    hrefLang?: string;
    htmlFor?: string;
    httpEquiv?: string;
    id?: string;
    inlist?: any;
    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
    integrity?: string;
    is?: string;
    itemID?: string;
    itemProp?: string;
    itemRef?: string;
    itemScope?: boolean;
    itemType?: string;
    key?: null | Key;
    keyParams?: string;
    keyType?: string;
    kind?: string;
    label?: string;
    lang?: string;
    list?: string;
    loop?: boolean;
    low?: number;
    manifest?: string;
    marginHeight?: number;
    marginWidth?: number;
    max?: string | number;
    maxLength?: number;
    media?: string;
    mediaGroup?: string;
    method?: string;
    min?: string | number;
    minLength?: number;
    multiple?: boolean;
    muted?: boolean;
    name?: string;
    noValidate?: boolean;
    nonce?: string;
    onAbort?: ReactEventHandler<HTMLElement>;
    onAbortCapture?: ReactEventHandler<HTMLElement>;
    onAnimationEnd?: AnimationEventHandler<HTMLElement>;
    onAnimationEndCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationIteration?: AnimationEventHandler<HTMLElement>;
    onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationStart?: AnimationEventHandler<HTMLElement>;
    onAnimationStartCapture?: AnimationEventHandler<HTMLElement>;
    onAuxClick?: MouseEventHandler<HTMLElement>;
    onAuxClickCapture?: MouseEventHandler<HTMLElement>;
    onBeforeInput?: FormEventHandler<HTMLElement>;
    onBeforeInputCapture?: FormEventHandler<HTMLElement>;
    onBlur?: FocusEventHandler<HTMLElement>;
    onBlurCapture?: FocusEventHandler<HTMLElement>;
    onCanPlay?: ReactEventHandler<HTMLElement>;
    onCanPlayCapture?: ReactEventHandler<HTMLElement>;
    onCanPlayThrough?: ReactEventHandler<HTMLElement>;
    onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>;
    onChange?: FormEventHandler<HTMLElement>;
    onChangeCapture?: FormEventHandler<HTMLElement>;
    onClick?: MouseEventHandler<HTMLElement>;
    onClickCapture?: MouseEventHandler<HTMLElement>;
    onCompositionEnd?: CompositionEventHandler<HTMLElement>;
    onCompositionEndCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionStart?: CompositionEventHandler<HTMLElement>;
    onCompositionStartCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdate?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>;
    onContextMenu?: MouseEventHandler<HTMLElement>;
    onContextMenuCapture?: MouseEventHandler<HTMLElement>;
    onCopy?: ClipboardEventHandler<HTMLElement>;
    onCopyCapture?: ClipboardEventHandler<HTMLElement>;
    onCut?: ClipboardEventHandler<HTMLElement>;
    onCutCapture?: ClipboardEventHandler<HTMLElement>;
    onDoubleClick?: MouseEventHandler<HTMLElement>;
    onDoubleClickCapture?: MouseEventHandler<HTMLElement>;
    onDrag?: DragEventHandler<HTMLElement>;
    onDragCapture?: DragEventHandler<HTMLElement>;
    onDragEnd?: DragEventHandler<HTMLElement>;
    onDragEndCapture?: DragEventHandler<HTMLElement>;
    onDragEnter?: DragEventHandler<HTMLElement>;
    onDragEnterCapture?: DragEventHandler<HTMLElement>;
    onDragExit?: DragEventHandler<HTMLElement>;
    onDragExitCapture?: DragEventHandler<HTMLElement>;
    onDragLeave?: DragEventHandler<HTMLElement>;
    onDragLeaveCapture?: DragEventHandler<HTMLElement>;
    onDragOver?: DragEventHandler<HTMLElement>;
    onDragOverCapture?: DragEventHandler<HTMLElement>;
    onDragStart?: DragEventHandler<HTMLElement>;
    onDragStartCapture?: DragEventHandler<HTMLElement>;
    onDrop?: DragEventHandler<HTMLElement>;
    onDropCapture?: DragEventHandler<HTMLElement>;
    onDurationChange?: ReactEventHandler<HTMLElement>;
    onDurationChangeCapture?: ReactEventHandler<HTMLElement>;
    onEmptied?: ReactEventHandler<HTMLElement>;
    onEmptiedCapture?: ReactEventHandler<HTMLElement>;
    onEncrypted?: ReactEventHandler<HTMLElement>;
    onEncryptedCapture?: ReactEventHandler<HTMLElement>;
    onEnded?: ReactEventHandler<HTMLElement>;
    onEndedCapture?: ReactEventHandler<HTMLElement>;
    onError?: ReactEventHandler<HTMLElement>;
    onErrorCapture?: ReactEventHandler<HTMLElement>;
    onFocus?: FocusEventHandler<HTMLElement>;
    onFocusCapture?: FocusEventHandler<HTMLElement>;
    onGotPointerCapture?: PointerEventHandler<HTMLElement>;
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onInput?: FormEventHandler<HTMLElement>;
    onInputCapture?: FormEventHandler<HTMLElement>;
    onInvalid?: FormEventHandler<HTMLElement>;
    onInvalidCapture?: FormEventHandler<HTMLElement>;
    onKeyDown?: KeyboardEventHandler<HTMLElement>;
    onKeyDownCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyPress?: KeyboardEventHandler<HTMLElement>;
    onKeyPressCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyUp?: KeyboardEventHandler<HTMLElement>;
    onKeyUpCapture?: KeyboardEventHandler<HTMLElement>;
    onLoad?: ReactEventHandler<HTMLElement>;
    onLoadCapture?: ReactEventHandler<HTMLElement>;
    onLoadStart?: ReactEventHandler<HTMLElement>;
    onLoadStartCapture?: ReactEventHandler<HTMLElement>;
    onLoadedData?: ReactEventHandler<HTMLElement>;
    onLoadedDataCapture?: ReactEventHandler<HTMLElement>;
    onLoadedMetadata?: ReactEventHandler<HTMLElement>;
    onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>;
    onLostPointerCapture?: PointerEventHandler<HTMLElement>;
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onMouseDown?: MouseEventHandler<HTMLElement>;
    onMouseDownCapture?: MouseEventHandler<HTMLElement>;
    onMouseEnter?: MouseEventHandler<HTMLElement>;
    onMouseLeave?: MouseEventHandler<HTMLElement>;
    onMouseMove?: MouseEventHandler<HTMLElement>;
    onMouseMoveCapture?: MouseEventHandler<HTMLElement>;
    onMouseOut?: MouseEventHandler<HTMLElement>;
    onMouseOutCapture?: MouseEventHandler<HTMLElement>;
    onMouseOver?: MouseEventHandler<HTMLElement>;
    onMouseOverCapture?: MouseEventHandler<HTMLElement>;
    onMouseUp?: MouseEventHandler<HTMLElement>;
    onMouseUpCapture?: MouseEventHandler<HTMLElement>;
    onPaste?: ClipboardEventHandler<HTMLElement>;
    onPasteCapture?: ClipboardEventHandler<HTMLElement>;
    onPause?: ReactEventHandler<HTMLElement>;
    onPauseCapture?: ReactEventHandler<HTMLElement>;
    onPlay?: ReactEventHandler<HTMLElement>;
    onPlayCapture?: ReactEventHandler<HTMLElement>;
    onPlaying?: ReactEventHandler<HTMLElement>;
    onPlayingCapture?: ReactEventHandler<HTMLElement>;
    onPointerCancel?: PointerEventHandler<HTMLElement>;
    onPointerCancelCapture?: PointerEventHandler<HTMLElement>;
    onPointerDown?: PointerEventHandler<HTMLElement>;
    onPointerDownCapture?: PointerEventHandler<HTMLElement>;
    onPointerEnter?: PointerEventHandler<HTMLElement>;
    onPointerEnterCapture?: PointerEventHandler<HTMLElement>;
    onPointerLeave?: PointerEventHandler<HTMLElement>;
    onPointerLeaveCapture?: PointerEventHandler<HTMLElement>;
    onPointerMove?: PointerEventHandler<HTMLElement>;
    onPointerMoveCapture?: PointerEventHandler<HTMLElement>;
    onPointerOut?: PointerEventHandler<HTMLElement>;
    onPointerOutCapture?: PointerEventHandler<HTMLElement>;
    onPointerOver?: PointerEventHandler<HTMLElement>;
    onPointerOverCapture?: PointerEventHandler<HTMLElement>;
    onPointerUp?: PointerEventHandler<HTMLElement>;
    onPointerUpCapture?: PointerEventHandler<HTMLElement>;
    onProgress?: ReactEventHandler<HTMLElement>;
    onProgressCapture?: ReactEventHandler<HTMLElement>;
    onRateChange?: ReactEventHandler<HTMLElement>;
    onRateChangeCapture?: ReactEventHandler<HTMLElement>;
    onReset?: FormEventHandler<HTMLElement>;
    onResetCapture?: FormEventHandler<HTMLElement>;
    onResize?: ReactEventHandler<HTMLElement>;
    onResizeCapture?: ReactEventHandler<HTMLElement>;
    onScroll?: UIEventHandler<HTMLElement>;
    onScrollCapture?: UIEventHandler<HTMLElement>;
    onSeeked?: ReactEventHandler<HTMLElement>;
    onSeekedCapture?: ReactEventHandler<HTMLElement>;
    onSeeking?: ReactEventHandler<HTMLElement>;
    onSeekingCapture?: ReactEventHandler<HTMLElement>;
    onSelect?: ReactEventHandler<HTMLElement>;
    onSelectCapture?: ReactEventHandler<HTMLElement>;
    onStalled?: ReactEventHandler<HTMLElement>;
    onStalledCapture?: ReactEventHandler<HTMLElement>;
    onSubmit?: FormEventHandler<HTMLElement>;
    onSubmitCapture?: FormEventHandler<HTMLElement>;
    onSuspend?: ReactEventHandler<HTMLElement>;
    onSuspendCapture?: ReactEventHandler<HTMLElement>;
    onTimeUpdate?: ReactEventHandler<HTMLElement>;
    onTimeUpdateCapture?: ReactEventHandler<HTMLElement>;
    onTouchCancel?: TouchEventHandler<HTMLElement>;
    onTouchCancelCapture?: TouchEventHandler<HTMLElement>;
    onTouchEnd?: TouchEventHandler<HTMLElement>;
    onTouchEndCapture?: TouchEventHandler<HTMLElement>;
    onTouchMove?: TouchEventHandler<HTMLElement>;
    onTouchMoveCapture?: TouchEventHandler<HTMLElement>;
    onTouchStart?: TouchEventHandler<HTMLElement>;
    onTouchStartCapture?: TouchEventHandler<HTMLElement>;
    onTransitionEnd?: TransitionEventHandler<HTMLElement>;
    onTransitionEndCapture?: TransitionEventHandler<HTMLElement>;
    onVolumeChange?: ReactEventHandler<HTMLElement>;
    onVolumeChangeCapture?: ReactEventHandler<HTMLElement>;
    onWaiting?: ReactEventHandler<HTMLElement>;
    onWaitingCapture?: ReactEventHandler<HTMLElement>;
    onWheel?: WheelEventHandler<HTMLElement>;
    onWheelCapture?: WheelEventHandler<HTMLElement>;
    open?: boolean;
    optimum?: number;
    pattern?: string;
    placeholder?: string;
    playsInline?: boolean;
    poster?: string;
    prefix?: string;
    preload?: string;
    property?: string;
    radioGroup?: string;
    readOnly?: boolean;
    ref?: LegacyRef<HTMLElement>;
    rel?: string;
    required?: boolean;
    resource?: string;
    results?: number;
    rev?: string;
    reversed?: boolean;
    role?: AriaRole;
    rowSpan?: number;
    rows?: number;
    sandbox?: string;
    scope?: string;
    scoped?: boolean;
    scrolling?: string;
    seamless?: boolean;
    security?: string;
    selected?: boolean;
    shape?: string;
    size?: number;
    sizes?: string;
    slot?: string;
    span?: number;
    spellCheck?: Booleanish;
    src?: string;
    srcDoc?: string;
    srcLang?: string;
    srcSet?: string;
    start?: number;
    step?: string | number;
    style?: CSSProperties;
    summary?: string;
    suppressContentEditableWarning?: boolean;
    suppressHydrationWarning?: boolean;
    tabIndex?: number;
    tag?: keyof IntrinsicElements;
    target?: string;
    title?: string;
    translate?: "yes" | "no";
    type?: string;
    typeof?: string;
    unselectable?: "on" | "off";
    useMap?: string;
    value?: string | number | readonly string[];
    vocab?: string;
    width?: string | number;
    wmode?: string;
    wrap?: string;
}

Hierarchy

Properties

about? +ServerSideWrapperProps | Code Documentation

Interface ServerSideWrapperProps

interface ServerSideWrapperProps {
    about?: string;
    accept?: string;
    acceptCharset?: string;
    accessKey?: string;
    action?: string | ((formData) => void);
    allowFullScreen?: boolean;
    allowTransparency?: boolean;
    alt?: string;
    aria-activedescendant?: string;
    aria-atomic?: Booleanish;
    aria-autocomplete?: "list" | "none" | "inline" | "both";
    aria-braillelabel?: string;
    aria-brailleroledescription?: string;
    aria-busy?: Booleanish;
    aria-checked?: boolean | "true" | "false" | "mixed";
    aria-colcount?: number;
    aria-colindex?: number;
    aria-colindextext?: string;
    aria-colspan?: number;
    aria-controls?: string;
    aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location";
    aria-describedby?: string;
    aria-description?: string;
    aria-details?: string;
    aria-disabled?: Booleanish;
    aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup";
    aria-errormessage?: string;
    aria-expanded?: Booleanish;
    aria-flowto?: string;
    aria-grabbed?: Booleanish;
    aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
    aria-hidden?: Booleanish;
    aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling";
    aria-keyshortcuts?: string;
    aria-label?: string;
    aria-labelledby?: string;
    aria-level?: number;
    aria-live?: "off" | "assertive" | "polite";
    aria-modal?: Booleanish;
    aria-multiline?: Booleanish;
    aria-multiselectable?: Booleanish;
    aria-orientation?: "horizontal" | "vertical";
    aria-owns?: string;
    aria-placeholder?: string;
    aria-posinset?: number;
    aria-pressed?: boolean | "true" | "false" | "mixed";
    aria-readonly?: Booleanish;
    aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
    aria-required?: Booleanish;
    aria-roledescription?: string;
    aria-rowcount?: number;
    aria-rowindex?: number;
    aria-rowindextext?: string;
    aria-rowspan?: number;
    aria-selected?: Booleanish;
    aria-setsize?: number;
    aria-sort?: "none" | "ascending" | "descending" | "other";
    aria-valuemax?: number;
    aria-valuemin?: number;
    aria-valuenow?: number;
    aria-valuetext?: string;
    as?: string;
    async?: boolean;
    autoCapitalize?: string;
    autoComplete?: string;
    autoCorrect?: string;
    autoFocus?: boolean;
    autoPlay?: boolean;
    autoSave?: string;
    capture?: boolean | "user" | "environment";
    cellPadding?: string | number;
    cellSpacing?: string | number;
    challenge?: string;
    charSet?: string;
    checked?: boolean;
    children?: ReactNode;
    cite?: string;
    classID?: string;
    className?: string;
    colSpan?: number;
    color?: string;
    cols?: number;
    content?: string;
    contentEditable?: Booleanish | "inherit" | "plaintext-only";
    contextMenu?: string;
    controls?: boolean;
    coords?: string;
    crossOrigin?: CrossOrigin;
    dangerouslySetInnerHTML?: {
        __html: string | TrustedHTML;
    };
    data?: string;
    datatype?: string;
    dateTime?: string;
    default?: boolean;
    defaultChecked?: boolean;
    defaultValue?: string | number | readonly string[];
    defer?: boolean;
    dir?: string;
    disabled?: boolean;
    download?: any;
    draggable?: Booleanish;
    encType?: string;
    forcedPages?: ForcedPage[];
    form?: string;
    formAction?: string | ((formData) => void);
    formEncType?: string;
    formMethod?: string;
    formNoValidate?: boolean;
    formTarget?: string;
    frameBorder?: string | number;
    headers?: string;
    height?: string | number;
    hidden?: boolean;
    high?: number;
    href?: string;
    hrefLang?: string;
    htmlFor?: string;
    httpEquiv?: string;
    id?: string;
    inlist?: any;
    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
    integrity?: string;
    is?: string;
    itemID?: string;
    itemProp?: string;
    itemRef?: string;
    itemScope?: boolean;
    itemType?: string;
    key?: null | Key;
    keyParams?: string;
    keyType?: string;
    kind?: string;
    label?: string;
    lang?: string;
    list?: string;
    loop?: boolean;
    low?: number;
    manifest?: string;
    marginHeight?: number;
    marginWidth?: number;
    max?: string | number;
    maxLength?: number;
    media?: string;
    mediaGroup?: string;
    method?: string;
    min?: string | number;
    minLength?: number;
    multiple?: boolean;
    muted?: boolean;
    name?: string;
    noValidate?: boolean;
    nonce?: string;
    onAbort?: ReactEventHandler<HTMLElement>;
    onAbortCapture?: ReactEventHandler<HTMLElement>;
    onAnimationEnd?: AnimationEventHandler<HTMLElement>;
    onAnimationEndCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationIteration?: AnimationEventHandler<HTMLElement>;
    onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationStart?: AnimationEventHandler<HTMLElement>;
    onAnimationStartCapture?: AnimationEventHandler<HTMLElement>;
    onAuxClick?: MouseEventHandler<HTMLElement>;
    onAuxClickCapture?: MouseEventHandler<HTMLElement>;
    onBeforeInput?: FormEventHandler<HTMLElement>;
    onBeforeInputCapture?: FormEventHandler<HTMLElement>;
    onBlur?: FocusEventHandler<HTMLElement>;
    onBlurCapture?: FocusEventHandler<HTMLElement>;
    onCanPlay?: ReactEventHandler<HTMLElement>;
    onCanPlayCapture?: ReactEventHandler<HTMLElement>;
    onCanPlayThrough?: ReactEventHandler<HTMLElement>;
    onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>;
    onChange?: FormEventHandler<HTMLElement>;
    onChangeCapture?: FormEventHandler<HTMLElement>;
    onClick?: MouseEventHandler<HTMLElement>;
    onClickCapture?: MouseEventHandler<HTMLElement>;
    onCompositionEnd?: CompositionEventHandler<HTMLElement>;
    onCompositionEndCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionStart?: CompositionEventHandler<HTMLElement>;
    onCompositionStartCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdate?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>;
    onContextMenu?: MouseEventHandler<HTMLElement>;
    onContextMenuCapture?: MouseEventHandler<HTMLElement>;
    onCopy?: ClipboardEventHandler<HTMLElement>;
    onCopyCapture?: ClipboardEventHandler<HTMLElement>;
    onCut?: ClipboardEventHandler<HTMLElement>;
    onCutCapture?: ClipboardEventHandler<HTMLElement>;
    onDoubleClick?: MouseEventHandler<HTMLElement>;
    onDoubleClickCapture?: MouseEventHandler<HTMLElement>;
    onDrag?: DragEventHandler<HTMLElement>;
    onDragCapture?: DragEventHandler<HTMLElement>;
    onDragEnd?: DragEventHandler<HTMLElement>;
    onDragEndCapture?: DragEventHandler<HTMLElement>;
    onDragEnter?: DragEventHandler<HTMLElement>;
    onDragEnterCapture?: DragEventHandler<HTMLElement>;
    onDragExit?: DragEventHandler<HTMLElement>;
    onDragExitCapture?: DragEventHandler<HTMLElement>;
    onDragLeave?: DragEventHandler<HTMLElement>;
    onDragLeaveCapture?: DragEventHandler<HTMLElement>;
    onDragOver?: DragEventHandler<HTMLElement>;
    onDragOverCapture?: DragEventHandler<HTMLElement>;
    onDragStart?: DragEventHandler<HTMLElement>;
    onDragStartCapture?: DragEventHandler<HTMLElement>;
    onDrop?: DragEventHandler<HTMLElement>;
    onDropCapture?: DragEventHandler<HTMLElement>;
    onDurationChange?: ReactEventHandler<HTMLElement>;
    onDurationChangeCapture?: ReactEventHandler<HTMLElement>;
    onEmptied?: ReactEventHandler<HTMLElement>;
    onEmptiedCapture?: ReactEventHandler<HTMLElement>;
    onEncrypted?: ReactEventHandler<HTMLElement>;
    onEncryptedCapture?: ReactEventHandler<HTMLElement>;
    onEnded?: ReactEventHandler<HTMLElement>;
    onEndedCapture?: ReactEventHandler<HTMLElement>;
    onError?: ReactEventHandler<HTMLElement>;
    onErrorCapture?: ReactEventHandler<HTMLElement>;
    onFocus?: FocusEventHandler<HTMLElement>;
    onFocusCapture?: FocusEventHandler<HTMLElement>;
    onGotPointerCapture?: PointerEventHandler<HTMLElement>;
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onInput?: FormEventHandler<HTMLElement>;
    onInputCapture?: FormEventHandler<HTMLElement>;
    onInvalid?: FormEventHandler<HTMLElement>;
    onInvalidCapture?: FormEventHandler<HTMLElement>;
    onKeyDown?: KeyboardEventHandler<HTMLElement>;
    onKeyDownCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyPress?: KeyboardEventHandler<HTMLElement>;
    onKeyPressCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyUp?: KeyboardEventHandler<HTMLElement>;
    onKeyUpCapture?: KeyboardEventHandler<HTMLElement>;
    onLoad?: ReactEventHandler<HTMLElement>;
    onLoadCapture?: ReactEventHandler<HTMLElement>;
    onLoadStart?: ReactEventHandler<HTMLElement>;
    onLoadStartCapture?: ReactEventHandler<HTMLElement>;
    onLoadedData?: ReactEventHandler<HTMLElement>;
    onLoadedDataCapture?: ReactEventHandler<HTMLElement>;
    onLoadedMetadata?: ReactEventHandler<HTMLElement>;
    onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>;
    onLostPointerCapture?: PointerEventHandler<HTMLElement>;
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onMouseDown?: MouseEventHandler<HTMLElement>;
    onMouseDownCapture?: MouseEventHandler<HTMLElement>;
    onMouseEnter?: MouseEventHandler<HTMLElement>;
    onMouseLeave?: MouseEventHandler<HTMLElement>;
    onMouseMove?: MouseEventHandler<HTMLElement>;
    onMouseMoveCapture?: MouseEventHandler<HTMLElement>;
    onMouseOut?: MouseEventHandler<HTMLElement>;
    onMouseOutCapture?: MouseEventHandler<HTMLElement>;
    onMouseOver?: MouseEventHandler<HTMLElement>;
    onMouseOverCapture?: MouseEventHandler<HTMLElement>;
    onMouseUp?: MouseEventHandler<HTMLElement>;
    onMouseUpCapture?: MouseEventHandler<HTMLElement>;
    onPaste?: ClipboardEventHandler<HTMLElement>;
    onPasteCapture?: ClipboardEventHandler<HTMLElement>;
    onPause?: ReactEventHandler<HTMLElement>;
    onPauseCapture?: ReactEventHandler<HTMLElement>;
    onPlay?: ReactEventHandler<HTMLElement>;
    onPlayCapture?: ReactEventHandler<HTMLElement>;
    onPlaying?: ReactEventHandler<HTMLElement>;
    onPlayingCapture?: ReactEventHandler<HTMLElement>;
    onPointerCancel?: PointerEventHandler<HTMLElement>;
    onPointerCancelCapture?: PointerEventHandler<HTMLElement>;
    onPointerDown?: PointerEventHandler<HTMLElement>;
    onPointerDownCapture?: PointerEventHandler<HTMLElement>;
    onPointerEnter?: PointerEventHandler<HTMLElement>;
    onPointerEnterCapture?: PointerEventHandler<HTMLElement>;
    onPointerLeave?: PointerEventHandler<HTMLElement>;
    onPointerLeaveCapture?: PointerEventHandler<HTMLElement>;
    onPointerMove?: PointerEventHandler<HTMLElement>;
    onPointerMoveCapture?: PointerEventHandler<HTMLElement>;
    onPointerOut?: PointerEventHandler<HTMLElement>;
    onPointerOutCapture?: PointerEventHandler<HTMLElement>;
    onPointerOver?: PointerEventHandler<HTMLElement>;
    onPointerOverCapture?: PointerEventHandler<HTMLElement>;
    onPointerUp?: PointerEventHandler<HTMLElement>;
    onPointerUpCapture?: PointerEventHandler<HTMLElement>;
    onProgress?: ReactEventHandler<HTMLElement>;
    onProgressCapture?: ReactEventHandler<HTMLElement>;
    onRateChange?: ReactEventHandler<HTMLElement>;
    onRateChangeCapture?: ReactEventHandler<HTMLElement>;
    onReset?: FormEventHandler<HTMLElement>;
    onResetCapture?: FormEventHandler<HTMLElement>;
    onResize?: ReactEventHandler<HTMLElement>;
    onResizeCapture?: ReactEventHandler<HTMLElement>;
    onScroll?: UIEventHandler<HTMLElement>;
    onScrollCapture?: UIEventHandler<HTMLElement>;
    onSeeked?: ReactEventHandler<HTMLElement>;
    onSeekedCapture?: ReactEventHandler<HTMLElement>;
    onSeeking?: ReactEventHandler<HTMLElement>;
    onSeekingCapture?: ReactEventHandler<HTMLElement>;
    onSelect?: ReactEventHandler<HTMLElement>;
    onSelectCapture?: ReactEventHandler<HTMLElement>;
    onStalled?: ReactEventHandler<HTMLElement>;
    onStalledCapture?: ReactEventHandler<HTMLElement>;
    onSubmit?: FormEventHandler<HTMLElement>;
    onSubmitCapture?: FormEventHandler<HTMLElement>;
    onSuspend?: ReactEventHandler<HTMLElement>;
    onSuspendCapture?: ReactEventHandler<HTMLElement>;
    onTimeUpdate?: ReactEventHandler<HTMLElement>;
    onTimeUpdateCapture?: ReactEventHandler<HTMLElement>;
    onTouchCancel?: TouchEventHandler<HTMLElement>;
    onTouchCancelCapture?: TouchEventHandler<HTMLElement>;
    onTouchEnd?: TouchEventHandler<HTMLElement>;
    onTouchEndCapture?: TouchEventHandler<HTMLElement>;
    onTouchMove?: TouchEventHandler<HTMLElement>;
    onTouchMoveCapture?: TouchEventHandler<HTMLElement>;
    onTouchStart?: TouchEventHandler<HTMLElement>;
    onTouchStartCapture?: TouchEventHandler<HTMLElement>;
    onTransitionEnd?: TransitionEventHandler<HTMLElement>;
    onTransitionEndCapture?: TransitionEventHandler<HTMLElement>;
    onVolumeChange?: ReactEventHandler<HTMLElement>;
    onVolumeChangeCapture?: ReactEventHandler<HTMLElement>;
    onWaiting?: ReactEventHandler<HTMLElement>;
    onWaitingCapture?: ReactEventHandler<HTMLElement>;
    onWheel?: WheelEventHandler<HTMLElement>;
    onWheelCapture?: WheelEventHandler<HTMLElement>;
    open?: boolean;
    optimum?: number;
    pattern?: string;
    placeholder?: string;
    playsInline?: boolean;
    poster?: string;
    prefix?: string;
    preload?: string;
    property?: string;
    radioGroup?: string;
    readOnly?: boolean;
    ref?: LegacyRef<HTMLElement>;
    rel?: string;
    required?: boolean;
    resource?: string;
    results?: number;
    rev?: string;
    reversed?: boolean;
    role?: AriaRole;
    rowSpan?: number;
    rows?: number;
    sandbox?: string;
    scope?: string;
    scoped?: boolean;
    scrolling?: string;
    seamless?: boolean;
    security?: string;
    selected?: boolean;
    shape?: string;
    size?: number;
    sizes?: string;
    slot?: string;
    span?: number;
    spellCheck?: Booleanish;
    src?: string;
    srcDoc?: string;
    srcLang?: string;
    srcSet?: string;
    start?: number;
    step?: string | number;
    style?: CSSProperties;
    summary?: string;
    suppressContentEditableWarning?: boolean;
    suppressHydrationWarning?: boolean;
    tabIndex?: number;
    tag?: keyof IntrinsicElements;
    target?: string;
    title?: string;
    translate?: "yes" | "no";
    type?: string;
    typeof?: string;
    unselectable?: "on" | "off";
    useMap?: string;
    value?: string | number | readonly string[];
    vocab?: string;
    width?: string | number;
    wmode?: string;
    wrap?: string;
}

Hierarchy

Properties

about? accept? acceptCharset? accessKey? @@ -487,10 +487,10 @@

See

aria-valuetext.

Optional aria-valuetext

aria-valuetext?: string

Defines the human readable text alternative of aria-valuenow for a range widget.

Optional as

as?: string

Optional async

async?: boolean

Optional autoCapitalize

autoCapitalize?: string

Non-standard Attributes

-

Optional autoComplete

autoComplete?: string

Optional autoCorrect

autoCorrect?: string

Optional autoFocus

autoFocus?: boolean

Optional autoPlay

autoPlay?: boolean

Optional autoSave

autoSave?: string

Optional capture

capture?: boolean | "user" | "environment"

Optional cellPadding

cellPadding?: string | number

Optional cellSpacing

cellSpacing?: string | number

Optional challenge

challenge?: string

Optional charSet

charSet?: string

Optional checked

checked?: boolean

Optional children

children?: ReactNode

Optional cite

cite?: string

Optional classID

classID?: string

Optional className

className?: string

Optional colSpan

colSpan?: number

Optional color

color?: string

Optional cols

cols?: number

Optional content

content?: string

Optional contentEditable

contentEditable?: Booleanish | "inherit" | "plaintext-only"

Optional contextMenu

contextMenu?: string

Optional controls

controls?: boolean

Optional coords

coords?: string

Optional crossOrigin

crossOrigin?: CrossOrigin

Optional dangerouslySetInnerHTML

dangerouslySetInnerHTML?: {
    __html: string | TrustedHTML;
}

Type declaration

  • __html: string | TrustedHTML

    Should be InnerHTML['innerHTML']. +

Optional autoComplete

autoComplete?: string

Optional autoCorrect

autoCorrect?: string

Optional autoFocus

autoFocus?: boolean

Optional autoPlay

autoPlay?: boolean

Optional autoSave

autoSave?: string

Optional capture

capture?: boolean | "user" | "environment"

Optional cellPadding

cellPadding?: string | number

Optional cellSpacing

cellSpacing?: string | number

Optional challenge

challenge?: string

Optional charSet

charSet?: string

Optional checked

checked?: boolean

Optional children

children?: ReactNode

Optional cite

cite?: string

Optional classID

classID?: string

Optional className

className?: string

Optional colSpan

colSpan?: number

Optional color

color?: string

Optional cols

cols?: number

Optional content

content?: string

Optional contentEditable

contentEditable?: Booleanish | "inherit" | "plaintext-only"

Optional contextMenu

contextMenu?: string

Optional controls

controls?: boolean

Optional coords

coords?: string

Optional crossOrigin

crossOrigin?: CrossOrigin

Optional dangerouslySetInnerHTML

dangerouslySetInnerHTML?: {
    __html: string | TrustedHTML;
}

Type declaration

  • __html: string | TrustedHTML

    Should be InnerHTML['innerHTML']. But unfortunately we're mixing renderer-specific type declarations.

Optional data

data?: string

Optional datatype

datatype?: string

Optional dateTime

dateTime?: string

Optional default

default?: boolean

Optional defaultChecked

defaultChecked?: boolean

React-specific Attributes

-

Optional defaultValue

defaultValue?: string | number | readonly string[]

Optional defer

defer?: boolean

Optional dir

dir?: string

Optional disabled

disabled?: boolean

Optional download

download?: any

Optional draggable

draggable?: Booleanish

Optional encType

encType?: string

Optional forcedPages

forcedPages?: ForcedPage[]

Optional form

form?: string

Optional formAction

formAction?: string | ((formData) => void)

Type declaration

    • (formData): void

    • Parameters

      • formData: FormData

      Returns void

Optional formEncType

formEncType?: string

Optional formMethod

formMethod?: string

Optional formNoValidate

formNoValidate?: boolean

Optional formTarget

formTarget?: string

Optional frameBorder

frameBorder?: string | number

Optional headers

headers?: string

Optional height

height?: string | number

Optional hidden

hidden?: boolean

Optional high

high?: number

Optional href

href?: string

Optional hrefLang

hrefLang?: string

Optional htmlFor

htmlFor?: string

Optional httpEquiv

httpEquiv?: string

Optional id

id?: string

Optional inlist

inlist?: any

Optional inputMode

inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

+

Optional defaultValue

defaultValue?: string | number | readonly string[]

Optional defer

defer?: boolean

Optional dir

dir?: string

Optional disabled

disabled?: boolean

Optional download

download?: any

Optional draggable

draggable?: Booleanish

Optional encType

encType?: string

Optional forcedPages

forcedPages?: ForcedPage[]

Optional form

form?: string

Optional formAction

formAction?: string | ((formData) => void)

Type declaration

    • (formData): void

    • Parameters

      • formData: FormData

      Returns void

Optional formEncType

formEncType?: string

Optional formMethod

formMethod?: string

Optional formNoValidate

formNoValidate?: boolean

Optional formTarget

formTarget?: string

Optional frameBorder

frameBorder?: string | number

Optional headers

headers?: string

Optional height

height?: string | number

Optional hidden

hidden?: boolean

Optional high

high?: number

Optional href

href?: string

Optional hrefLang

hrefLang?: string

Optional htmlFor

htmlFor?: string

Optional httpEquiv

httpEquiv?: string

Optional id

id?: string

Optional inlist

inlist?: any

Optional inputMode

inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

Optional integrity

integrity?: string

Optional is

is?: string

Specify that a standard HTML element should behave like a defined custom built-in element

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

@@ -516,4 +516,4 @@

Optional rel

rel?: string

Optional required

required?: boolean

Optional resource

resource?: string

Optional results

results?: number

Optional rev

rev?: string

Optional reversed

reversed?: boolean

Optional role

role?: AriaRole

WAI-ARIA

Optional rowSpan

rowSpan?: number

Optional rows

rows?: number

Optional sandbox

sandbox?: string

Optional scope

scope?: string

Optional scoped

scoped?: boolean

Optional scrolling

scrolling?: string

Optional seamless

seamless?: boolean

Optional security

security?: string

Optional selected

selected?: boolean

Optional shape

shape?: string

Optional size

size?: number

Optional sizes

sizes?: string

Optional slot

slot?: string

Optional span

span?: number

Optional spellCheck

spellCheck?: Booleanish

Optional src

src?: string

Optional srcDoc

srcDoc?: string

Optional srcLang

srcLang?: string

Optional srcSet

srcSet?: string

Optional start

start?: number

Optional step

step?: string | number

Optional style

style?: CSSProperties

Optional summary

summary?: string

Optional suppressContentEditableWarning

suppressContentEditableWarning?: boolean

Optional suppressHydrationWarning

suppressHydrationWarning?: boolean

Optional tabIndex

tabIndex?: number

Optional tag

tag?: keyof IntrinsicElements

Default Value

'html'
-

Optional target

target?: string

Optional title

title?: string

Optional translate

translate?: "yes" | "no"

Optional type

type?: string

Optional typeof

typeof?: string

Optional unselectable

unselectable?: "on" | "off"

Optional useMap

useMap?: string

Optional value

value?: string | number | readonly string[]

Optional vocab

vocab?: string

Optional width

width?: string | number

Optional wmode

wmode?: string

Optional wrap

wrap?: string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Optional target

target?: string

Optional title

title?: string

Optional translate

translate?: "yes" | "no"

Optional type

type?: string

Optional typeof

typeof?: string

Optional unselectable

unselectable?: "on" | "off"

Optional useMap

useMap?: string

Optional value

value?: string | number | readonly string[]

Optional vocab

vocab?: string

Optional width

width?: string | number

Optional wmode

wmode?: string

Optional wrap

wrap?: string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/client_color_switch_color_switch.html b/docs/modules/client_color_switch_color_switch.html index a4ed0529..c0693bc3 100644 --- a/docs/modules/client_color_switch_color_switch.html +++ b/docs/modules/client_color_switch_color_switch.html @@ -1,3 +1,3 @@ -client/color-switch/color-switch | Code Documentation

Module client/color-switch/color-switch

Index

Interfaces

ColorSwitchProps +client/color-switch/color-switch | Code Documentation

Module client/color-switch/color-switch

Index

Interfaces

ColorSwitchProps

Functions

ColorSwitch

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/client_force_color_scheme_force_color_scheme.html b/docs/modules/client_force_color_scheme_force_color_scheme.html index 7318b0a6..c3b84f11 100644 --- a/docs/modules/client_force_color_scheme_force_color_scheme.html +++ b/docs/modules/client_force_color_scheme_force_color_scheme.html @@ -1,2 +1,2 @@ -client/force-color-scheme/force-color-scheme | Code Documentation

Module client/force-color-scheme/force-color-scheme

Index

Functions

ForceColorScheme +client/force-color-scheme/force-color-scheme | Code Documentation

Module client/force-color-scheme/force-color-scheme

Index

Functions

ForceColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/client_force_theme_force_theme.html b/docs/modules/client_force_theme_force_theme.html index 3388abfa..89dfb0e0 100644 --- a/docs/modules/client_force_theme_force_theme.html +++ b/docs/modules/client_force_theme_force_theme.html @@ -1,2 +1,2 @@ -client/force-theme/force-theme | Code Documentation

Module client/force-theme/force-theme

Index

Functions

ForceTheme +client/force-theme/force-theme | Code Documentation

Module client/force-theme/force-theme

Index

Functions

ForceTheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/client_theme_switcher_theme_switcher.html b/docs/modules/client_theme_switcher_theme_switcher.html index e1e3c1ac..4ceacca0 100644 --- a/docs/modules/client_theme_switcher_theme_switcher.html +++ b/docs/modules/client_theme_switcher_theme_switcher.html @@ -1,4 +1,4 @@ -client/theme-switcher/theme-switcher | Code Documentation

Module client/theme-switcher/theme-switcher

Index

Interfaces

ThemeSwitcherProps +client/theme-switcher/theme-switcher | Code Documentation

Module client/theme-switcher/theme-switcher

Index

Interfaces

ThemeSwitcherProps

Functions

ThemeSwitcher useThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html b/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html index 388efc04..daa60c83 100644 --- a/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html +++ b/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html @@ -1,4 +1,4 @@ -server/nextjs/server-side-wrapper/server-side-wrapper | Code Documentation

Module server/nextjs/server-side-wrapper/server-side-wrapper

References

NextJsServerTarget +server/nextjs/server-side-wrapper/server-side-wrapper | Code Documentation

Module server/nextjs/server-side-wrapper/server-side-wrapper

References

NextJsServerTarget

Interfaces

NextJsSSRThemeSwitcherProps ServerSideWrapperProps

Type Aliases

ForcedPage diff --git a/docs/modules/store.html b/docs/modules/store.html index 055cde78..0386f1b1 100644 --- a/docs/modules/store.html +++ b/docs/modules/store.html @@ -1,4 +1,4 @@ -store | Code Documentation

Module store

Index

Namespaces

useTheme +store | Code Documentation

Module store

Index

Namespaces

useTheme

Type Aliases

ColorSchemeType ThemeStoreType

Variables

initialState diff --git a/docs/modules/store.useTheme.html b/docs/modules/store.useTheme.html index c7289ad4..b1af6b12 100644 --- a/docs/modules/store.useTheme.html +++ b/docs/modules/store.useTheme.html @@ -1,4 +1,4 @@ -useTheme | Code Documentation

Namespace useTheme

Index

Functions

destroy +useTheme | Code Documentation

Namespace useTheme

Index

Functions

destroy getState setState subscribe diff --git a/docs/modules/utils.html b/docs/modules/utils.html index f9450cd4..5377fecb 100644 --- a/docs/modules/utils.html +++ b/docs/modules/utils.html @@ -1,2 +1,2 @@ -utils | Code Documentation

Module utils

Index

Functions

resolveThemeFromColorScheme +utils | Code Documentation

Module utils

Index

Functions

resolveThemeFromColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html b/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html index 6ea61904..340fb0f5 100644 --- a/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html +++ b/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html @@ -1 +1 @@ -ForcedPage | Code Documentation

Type alias ForcedPage

ForcedPage: [pathMatcher: RegExp | string, themes: {
    colorScheme?: ColorSchemeType;
    theme?: string;
}]

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +ForcedPage | Code Documentation

Type alias ForcedPage

ForcedPage: [pathMatcher: RegExp | string, themes: {
    colorScheme?: ColorSchemeType;
    theme?: string;
}]

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/types/store.ColorSchemeType.html b/docs/types/store.ColorSchemeType.html index 06d43c9b..67c50de3 100644 --- a/docs/types/store.ColorSchemeType.html +++ b/docs/types/store.ColorSchemeType.html @@ -1 +1 @@ -ColorSchemeType | Code Documentation

Type alias ColorSchemeType

ColorSchemeType: "" | "system" | "dark" | "light"

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +ColorSchemeType | Code Documentation

Type alias ColorSchemeType

ColorSchemeType: "" | "system" | "dark" | "light"

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/types/store.ThemeStoreType.html b/docs/types/store.ThemeStoreType.html index 5d040cb3..d13da706 100644 --- a/docs/types/store.ThemeStoreType.html +++ b/docs/types/store.ThemeStoreType.html @@ -1 +1 @@ -ThemeStoreType | Code Documentation

Type alias ThemeStoreType

ThemeStoreType: {
    colorSchemePref: ColorSchemeType;
    darkTheme: string;
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    lightTheme: string;
    theme: string;
}

Type declaration

  • colorSchemePref: ColorSchemeType
  • darkTheme: string
  • Optional forcedColorScheme?: ColorSchemeType
  • Optional forcedTheme?: string
  • lightTheme: string
  • theme: string

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +ThemeStoreType | Code Documentation

Type alias ThemeStoreType

ThemeStoreType: {
    colorSchemePref: ColorSchemeType;
    darkTheme: string;
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    lightTheme: string;
    theme: string;
}

Type declaration

  • colorSchemePref: ColorSchemeType
  • darkTheme: string
  • Optional forcedColorScheme?: ColorSchemeType
  • Optional forcedTheme?: string
  • lightTheme: string
  • theme: string

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/variables/store.initialState.html b/docs/variables/store.initialState.html index b53817c2..e9f3244a 100644 --- a/docs/variables/store.initialState.html +++ b/docs/variables/store.initialState.html @@ -1 +1 @@ -initialState | Code Documentation

Variable initialStateConst

initialState: ThemeStoreType = ...

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +initialState | Code Documentation

Variable initialStateConst

initialState: ThemeStoreType = ...

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/examples/advanced-multi-theme/.eslintrc.js b/examples/advanced-multi-theme/.eslintrc.js deleted file mode 100644 index c8df6075..00000000 --- a/examples/advanced-multi-theme/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ["custom"], -}; diff --git a/examples/advanced-multi-theme/CHANGELOG.md b/examples/advanced-multi-theme/CHANGELOG.md deleted file mode 100644 index d0acab21..00000000 --- a/examples/advanced-multi-theme/CHANGELOG.md +++ /dev/null @@ -1,41 +0,0 @@ -# advanced-multi-theme - -## 0.0.1 - -### Patch Changes - -- Updated dependencies [da1cdd9] - - nextjs-themes@1.1.0 - -## 1.1.0 - -### Minor Changes - -- 7366a50: Complete redesign of the UI - -### Patch Changes - -- Updated dependencies [e7ca315] -- Updated dependencies [a4862ee] - - nextjs-themes@0.4.0 - -## 1.0.3 - -### Patch Changes - -- Updated dependencies [b23b5c7] - - nextjs-themes@0.3.2 - -## 1.0.2 - -### Patch Changes - -- Updated dependencies [c792f67] - - nextjs-themes@0.3.1 - -## 1.0.1 - -### Patch Changes - -- Updated dependencies [6662939] - - nextjs-themes@0.3.0 diff --git a/examples/advanced-multi-theme/app/color-scheme-preference.tsx b/examples/advanced-multi-theme/app/color-scheme-preference.tsx deleted file mode 100644 index b5935b5e..00000000 --- a/examples/advanced-multi-theme/app/color-scheme-preference.tsx +++ /dev/null @@ -1,25 +0,0 @@ -"use client"; -import type { ColorSchemeType } from "nextjs-themes"; -import { useTheme } from "nextjs-themes"; -import styles from "./page.module.css"; - -const colorSchemes: ColorSchemeType[] = ["", "system", "light", "dark"]; - -export default function ColorSchemePreference() { - const [colorSchemePref, setColorSchemePref] = useTheme(state => [state.colorSchemePref, state.setColorSchemePref]); - return ( -

- ColorScheme Preference{" "} - -

- ); -} diff --git a/examples/advanced-multi-theme/app/dark-theme-selector.tsx b/examples/advanced-multi-theme/app/dark-theme-selector.tsx deleted file mode 100644 index 8e05d552..00000000 --- a/examples/advanced-multi-theme/app/dark-theme-selector.tsx +++ /dev/null @@ -1,29 +0,0 @@ -"use client"; -import { useTheme } from "nextjs-themes"; -import { useEffect } from "react"; -import { darkThemes } from "./themes"; -import styles from "./page.module.css"; - -export default function DarkThemeSelector() { - const [colorSchemePref, defaultTheme, setDarkTheme] = useTheme(state => [ - state.colorSchemePref, - state.darkTheme, - state.setDarkTheme, - ]); - useEffect(() => { - setDarkTheme(darkThemes[0]); - }, []); - const className = colorSchemePref === "dark" ? styles.active : colorSchemePref === "system" ? styles.dark : ""; - return ( -

- Select default dark theme{" "} - -

- ); -} diff --git a/examples/advanced-multi-theme/app/forced-color-scheme/layout.tsx b/examples/advanced-multi-theme/app/forced-color-scheme/layout.tsx deleted file mode 100644 index 49b0894a..00000000 --- a/examples/advanced-multi-theme/app/forced-color-scheme/layout.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Link from "next/link"; - -export default function ForcedSchemeLayout({ children }) { - return ( -
-

- - 🔙🏡 - {" "} - Example page showing forcedColorScheme -

- {children} -
- ); -} diff --git a/examples/advanced-multi-theme/app/layout.tsx b/examples/advanced-multi-theme/app/layout.tsx deleted file mode 100644 index 108e9791..00000000 --- a/examples/advanced-multi-theme/app/layout.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import "./globals.css"; -import { ThemeSwitcher } from "nextjs-themes"; -import type { ForcedPage } from "nextjs-themes/server"; -import { ServerSideWrapper } from "nextjs-themes/server"; -import { darkThemes, lightThemes } from "./themes"; -import { Inter } from "next/font/google"; -import styles from "./page.module.css"; -import ColorSchemePreference from "./color-scheme-preference"; -import ThemeSelector from "./theme-selector"; -import DarkThemeSelector from "./dark-theme-selector"; -import LightThemeSelector from "./light-theme-selector"; -import PageNavigator from "./page-navigator"; -import Logo from "./logo"; -import Star from "./star"; - -const inter = Inter({ subsets: ["latin"] }); -const forcedPages: ForcedPage[] = [ - [/forced-color-scheme\/dark/, { colorScheme: "dark" }], - [/forced-color-scheme\/light/, { colorScheme: "light" }], - ...[...darkThemes, ...lightThemes].map(th => [new RegExp(`themed-page/${th}`), { theme: "light" }] as ForcedPage), -]; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - -
-
-
- -

- -

- - {children} - -
- -
-
-

- Build with -

-

Unleash the power of React Server Components!

-
-
-
-
- - -
-
- - -
-
- -
-
- - - - ); -} diff --git a/examples/advanced-multi-theme/app/light-theme-selector.tsx b/examples/advanced-multi-theme/app/light-theme-selector.tsx deleted file mode 100644 index 62f59d92..00000000 --- a/examples/advanced-multi-theme/app/light-theme-selector.tsx +++ /dev/null @@ -1,29 +0,0 @@ -"use client"; -import { useTheme } from "nextjs-themes"; -import { lightThemes } from "./themes"; -import { useEffect } from "react"; -import styles from "./page.module.css"; - -export default function LightThemeSelector() { - const [colorSchemePref, defaultLightTheme, setDefaultLightTheme] = useTheme(state => [ - state.colorSchemePref, - state.lightTheme, - state.setLightTheme, - ]); - useEffect(() => { - setDefaultLightTheme(lightThemes[0]); - }, []); - const className = colorSchemePref === "light" ? styles.active : colorSchemePref === "system" ? styles.light : ""; - return ( -

- Select default light theme{" "} - -

- ); -} diff --git a/examples/advanced-multi-theme/app/logo.tsx b/examples/advanced-multi-theme/app/logo.tsx deleted file mode 100644 index 4321301c..00000000 --- a/examples/advanced-multi-theme/app/logo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { HTMLProps } from "react"; - -export default function Logo(props: HTMLProps) { - return nextjs-themes; -} diff --git a/examples/advanced-multi-theme/app/page-navigator.tsx b/examples/advanced-multi-theme/app/page-navigator.tsx deleted file mode 100644 index bdea1bd4..00000000 --- a/examples/advanced-multi-theme/app/page-navigator.tsx +++ /dev/null @@ -1,46 +0,0 @@ -"use client"; -import { useState } from "react"; -import { darkThemes, lightThemes } from "./themes"; -import Link from "next/link"; -import styles from "./page.module.css"; - -export default function PageNavigator() { - const [exampleType, _setExampleType] = useState("themed-page"); - const [exampleOption, setExampleOption] = useState(darkThemes[0]); - const [exampleOptions, setExampleOptions] = useState([...darkThemes, ...lightThemes]); - const setExampleType = (exampleType: string) => { - const exampleOptions = - exampleType === "themed-page" ? [...darkThemes, ...lightThemes] : ["system", "dark", "light"]; - setExampleOptions(exampleOptions); - setExampleOption(exampleOptions[0]); - _setExampleType(exampleType); - }; - return ( -
-

- Pages Navigator - - {" "} - -> - -

-

- Pages with forced theme/colorScheme -

-
- -
- ); -} diff --git a/examples/advanced-multi-theme/app/page.module.css b/examples/advanced-multi-theme/app/page.module.css deleted file mode 100644 index d93247e1..00000000 --- a/examples/advanced-multi-theme/app/page.module.css +++ /dev/null @@ -1,290 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 3rem 0; - min-height: calc(100vh - 55px); -} - -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.cards { - display: flex; - justify-content: space-evenly; - width: var(--max-width); -} - -.card { - all: unset; - display: flex; - flex-direction: column; - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0.1); - cursor: pointer; - transition: - background 200ms, - border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; - text-align: start; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - width: 34ch; - text-align: start; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding-bottom: 2rem; - gap: 50px; -} - -.prefs { - padding-bottom: 4rem; -} - -.prefs select { - width: 85px; - float: right; - margin-left: 20px; - opacity: 0.3; -} - -select.active, -select.light { - opacity: 1; -} - -.center > div { - position: relative; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; - pointer-events: none; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ""; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; - display: flex; - justify-content: center; - align-items: center; - margin-left: 16px; - transform: translateZ(0); - border-radius: var(--border-radius); - overflow: hidden; - box-shadow: 0px 2px 8px -1px #0000001a; - padding: 2px; -} -.logo p { - background: var(--bg-color); -} -.logo::before, -.logo::after { - content: " "; - position: absolute; - z-index: -1; -} - -/* Conic Gradient Animation */ -.logo::before { - animation: 3s rotate infinite linear; - width: 800%; - height: 800%; - background: var(--tile-border); -} - -/* Inner Square */ -.logo::after { - inset: 0; - padding: 1px; - border-radius: var(--border-radius); - background: linear-gradient( - to bottom right, - rgba(var(--tile-start-rgb), 1), - rgba(var(--tile-end-rgb), 1) - ); - background-clip: content-box; -} - -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -/* @media (prefers-reduced-motion) { - .logo::before { - animation: none; - } - - .card:hover span { - transform: none; - } -} */ - -/* Mobile and Tablet */ -@media (max-width: 1023px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%); - z-index: 1; - } -} - -@media (prefers-color-scheme: dark) { - select.dark { - opacity: 1; - } - select.light { - opacity: 0.3; - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} diff --git a/examples/advanced-multi-theme/app/page.tsx b/examples/advanced-multi-theme/app/page.tsx deleted file mode 100644 index 5838f719..00000000 --- a/examples/advanced-multi-theme/app/page.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Home() { - return null; -} diff --git a/examples/advanced-multi-theme/app/star.tsx b/examples/advanced-multi-theme/app/star.tsx deleted file mode 100644 index 6b236d89..00000000 --- a/examples/advanced-multi-theme/app/star.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ForkMe } from "@mayank1513/fork-me/server"; -import { StarMe } from "@mayank1513/fork-me"; -import styles from "./page.module.css"; - -export default function Star() { - const url = `https://github.com/mayank1513/nestjs-themes`; - return ( - <> - -

- Star this repo -> -

-

Star this repo for your new library!

- - - - ); -} diff --git a/examples/advanced-multi-theme/app/theme-selector.tsx b/examples/advanced-multi-theme/app/theme-selector.tsx deleted file mode 100644 index 273e809e..00000000 --- a/examples/advanced-multi-theme/app/theme-selector.tsx +++ /dev/null @@ -1,20 +0,0 @@ -"use client"; -import { useTheme } from "nextjs-themes"; -import { darkThemes, lightThemes } from "./themes"; -import styles from "./page.module.css"; - -export default function ThemeSelector() { - const [colorSchemePref, theme, setTheme] = useTheme(state => [state.colorSchemePref, state.theme, state.setTheme]); - return ( -

- Select Theme{" "} - -

- ); -} diff --git a/examples/advanced-multi-theme/app/themed-page/layout.tsx b/examples/advanced-multi-theme/app/themed-page/layout.tsx deleted file mode 100644 index de24bc82..00000000 --- a/examples/advanced-multi-theme/app/themed-page/layout.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Link from "next/link"; - -export default function ForcedSchemeLayout({ children }) { - return ( -
-

- - 🔙🏡 - {" "} - Example page showing forcedTheme -

- {children} -
- ); -} diff --git a/examples/app-router/.eslintrc b/examples/app-router/.eslintrc new file mode 100644 index 00000000..1113c333 --- /dev/null +++ b/examples/app-router/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": ["custom/next"] +} diff --git a/examples/advanced-multi-theme/.gitignore b/examples/app-router/.gitignore similarity index 100% rename from examples/advanced-multi-theme/.gitignore rename to examples/app-router/.gitignore diff --git a/examples/app-router/CHANGELOG.md b/examples/app-router/CHANGELOG.md new file mode 100644 index 00000000..9f5f818f --- /dev/null +++ b/examples/app-router/CHANGELOG.md @@ -0,0 +1,9 @@ +# app-router + +## 0.0.11 + +### Patch Changes + +- Updated dependencies [bc71a4a] + - nextjs-themes@1.1.1 + - shared-ui@1.0.1 diff --git a/examples/advanced-multi-theme/README.md b/examples/app-router/README.md similarity index 92% rename from examples/advanced-multi-theme/README.md rename to examples/app-router/README.md index 1626d340..7a0014da 100644 --- a/examples/advanced-multi-theme/README.md +++ b/examples/app-router/README.md @@ -19,7 +19,7 @@ To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - Learn about Next.js features and API. - [Learn Next.js](https://www.udemy.com/course/react-and-next-js-with-typescript/?referralCode=7202184A1E57C3DCA8B2) - an interactive Next.js course. -You can check out [the Turbo Template GitHub repository](https://github.com/mayank1513/turborepo-template/) - your feedback and contributions are welcome! +You can check out [the Turbo Template GitHub repository](https://github.com/react18-tools/turborepo-template/) - your feedback and contributions are welcome! ### 🤩 Don't forget to start this repo! diff --git a/examples/advanced-multi-theme/app/favicon.ico b/examples/app-router/app/favicon.ico similarity index 100% rename from examples/advanced-multi-theme/app/favicon.ico rename to examples/app-router/app/favicon.ico diff --git a/examples/advanced-multi-theme/app/forced-color-scheme/[colorScheme]/page.tsx b/examples/app-router/app/forced-color-scheme/[colorScheme]/page.tsx similarity index 81% rename from examples/advanced-multi-theme/app/forced-color-scheme/[colorScheme]/page.tsx rename to examples/app-router/app/forced-color-scheme/[colorScheme]/page.tsx index ce287029..a859efce 100644 --- a/examples/advanced-multi-theme/app/forced-color-scheme/[colorScheme]/page.tsx +++ b/examples/app-router/app/forced-color-scheme/[colorScheme]/page.tsx @@ -1,11 +1,13 @@ import type { ColorSchemeType } from "nextjs-themes"; import { ForceColorScheme } from "nextjs-themes"; +interface PageWithForcedColorSchemeProps { + params: { colorScheme: ColorSchemeType }; +} + export default function PageWithForcedColorScheme({ params: { colorScheme }, -}: { - params: { colorScheme: ColorSchemeType }; -}) { +}: PageWithForcedColorSchemeProps): JSX.Element { return ( <> diff --git a/examples/app-router/app/forced-color-scheme/layout.tsx b/examples/app-router/app/forced-color-scheme/layout.tsx new file mode 100644 index 00000000..abdf5d49 --- /dev/null +++ b/examples/app-router/app/forced-color-scheme/layout.tsx @@ -0,0 +1,10 @@ +import Link from "next/link"; +import { ForcedPageLayout } from "shared-ui"; + +export default function ForcedColorSchemeLayout({ children }): JSX.Element { + return ( + + {children} + + ); +} diff --git a/examples/advanced-multi-theme/app/forced-color-scheme/page.tsx b/examples/app-router/app/forced-color-scheme/page.tsx similarity index 80% rename from examples/advanced-multi-theme/app/forced-color-scheme/page.tsx rename to examples/app-router/app/forced-color-scheme/page.tsx index d9596280..283e4171 100644 --- a/examples/advanced-multi-theme/app/forced-color-scheme/page.tsx +++ b/examples/app-router/app/forced-color-scheme/page.tsx @@ -1,6 +1,6 @@ import { ForceColorScheme } from "nextjs-themes"; -export default function PageWithForcedColorScheme() { +export default function PageWithForcedColorScheme(): JSX.Element { return ( <> diff --git a/examples/app-router/app/layout.tsx b/examples/app-router/app/layout.tsx new file mode 100644 index 00000000..d58cd23a --- /dev/null +++ b/examples/app-router/app/layout.tsx @@ -0,0 +1,25 @@ +import type { ForcedPage } from "nextjs-themes/server"; +import { NextJsSSGThemeSwitcher } from "nextjs-themes/server"; +import { Inter } from "next/font/google"; +import { SharedRootLayout, darkThemes, lightThemes } from "shared-ui"; +import Link from "next/link"; + +const inter = Inter({ subsets: ["latin"] }); +const forcedPages: ForcedPage[] = [ + [/forced-color-scheme\/dark/, { colorScheme: "dark" }], + [/forced-color-scheme\/light/, { colorScheme: "light" }], + ...[...darkThemes, ...lightThemes].map(th => [new RegExp(`themed-page/${th}`), { theme: "light" }] as ForcedPage), +]; + +export default function RootLayout({ children }: { children: React.ReactNode }): JSX.Element { + return ( + + + + + {children} + + + + ); +} diff --git a/examples/app-router/app/page.tsx b/examples/app-router/app/page.tsx new file mode 100644 index 00000000..82f9fc01 --- /dev/null +++ b/examples/app-router/app/page.tsx @@ -0,0 +1,3 @@ +export default function Home(): JSX.Element { + return

Next.js App Router Example

; +} diff --git a/examples/advanced-multi-theme/app/themed-page/[theme]/page.tsx b/examples/app-router/app/themed-page/[theme]/page.tsx similarity index 76% rename from examples/advanced-multi-theme/app/themed-page/[theme]/page.tsx rename to examples/app-router/app/themed-page/[theme]/page.tsx index c724a7df..6a75f26a 100644 --- a/examples/advanced-multi-theme/app/themed-page/[theme]/page.tsx +++ b/examples/app-router/app/themed-page/[theme]/page.tsx @@ -1,6 +1,10 @@ import { ForceTheme } from "nextjs-themes"; -export default function PageWithForcedTheme({ params: { theme } }: { params: { theme: string } }) { +interface PageProps { + params: { theme: string }; +} + +export default function PageWithForcedTheme({ params: { theme } }: PageProps): JSX.Element { return ( <> diff --git a/examples/app-router/app/themed-page/layout.tsx b/examples/app-router/app/themed-page/layout.tsx new file mode 100644 index 00000000..5ec917d0 --- /dev/null +++ b/examples/app-router/app/themed-page/layout.tsx @@ -0,0 +1,10 @@ +import Link from "next/link"; +import { ForcedPageLayout } from "shared-ui"; + +export default function ForcedThemeLayout({ children }): JSX.Element { + return ( + + {children} + + ); +} diff --git a/examples/advanced-multi-theme/app/themed-page/page.tsx b/examples/app-router/app/themed-page/page.tsx similarity index 71% rename from examples/advanced-multi-theme/app/themed-page/page.tsx rename to examples/app-router/app/themed-page/page.tsx index 80d0442f..4390e754 100644 --- a/examples/advanced-multi-theme/app/themed-page/page.tsx +++ b/examples/app-router/app/themed-page/page.tsx @@ -1,6 +1,6 @@ import { ForceTheme } from "nextjs-themes"; -export default function PageWithForcedTheme() { +export default function PageWithForcedTheme(): JSX.Element { return ( <> diff --git a/examples/advanced-multi-theme/next-env.d.ts b/examples/app-router/next-env.d.ts similarity index 100% rename from examples/advanced-multi-theme/next-env.d.ts rename to examples/app-router/next-env.d.ts diff --git a/examples/app-router/next.config.js b/examples/app-router/next.config.js new file mode 100644 index 00000000..251bcb19 --- /dev/null +++ b/examples/app-router/next.config.js @@ -0,0 +1,4 @@ +module.exports = { + reactStrictMode: true, + transpilePackages: [], +}; diff --git a/examples/advanced-multi-theme/package.json b/examples/app-router/package.json similarity index 69% rename from examples/advanced-multi-theme/package.json rename to examples/app-router/package.json index c303c7d7..ccebc4d6 100644 --- a/examples/advanced-multi-theme/package.json +++ b/examples/app-router/package.json @@ -1,9 +1,9 @@ { - "name": "advanced-multi-theme", - "version": "0.0.1", + "name": "app-router", + "version": "0.0.11", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev --port 3002", "build": "next build", "start": "next start", "lint": "next lint" @@ -11,14 +11,15 @@ "dependencies": { "@mayank1513/fork-me": "^2.0.0", "next": "^14.0.3", - "nextjs-themes": "workspace:*", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "nextjs-themes": "workspace:*", + "shared-ui": "workspace:*" }, "devDependencies": { "@next/eslint-plugin-next": "^14.0.3", - "@types/node": "^20.10.2", - "@types/react": "^18.2.40", + "@types/node": "^20.10.1", + "@types/react": "^18.2.39", "@types/react-dom": "^18.2.17", "eslint-config-custom": "workspace:*", "tsconfig": "workspace:*", diff --git a/examples/advanced-multi-theme/tsconfig.json b/examples/app-router/tsconfig.json similarity index 100% rename from examples/advanced-multi-theme/tsconfig.json rename to examples/app-router/tsconfig.json diff --git a/examples/nextjs-pages-router/components/ColorSchemePreference.tsx b/examples/nextjs-pages-router/components/ColorSchemePreference.tsx deleted file mode 100644 index b5178f39..00000000 --- a/examples/nextjs-pages-router/components/ColorSchemePreference.tsx +++ /dev/null @@ -1,20 +0,0 @@ -"use client"; -import { useTheme, ColorSchemeType } from "nextjs-themes"; - -const colorSchemes: ColorSchemeType[] = ["", "system", "light", "dark"]; - -export default function ColorSchemePreference() { - const [colorSchemePref, setColorSchemePref] = useTheme(state => [state.colorSchemePref, state.setColorSchemePref]); - return ( -

- Color Scheme Preference{" "} - -

- ); -} diff --git a/examples/nextjs-pages-router/components/DarkThemeSelector.tsx b/examples/nextjs-pages-router/components/DarkThemeSelector.tsx deleted file mode 100644 index ed50b0c1..00000000 --- a/examples/nextjs-pages-router/components/DarkThemeSelector.tsx +++ /dev/null @@ -1,23 +0,0 @@ -"use client"; -import { useTheme } from "nextjs-themes"; -import { darkThemes } from "../data/themes"; -import { useEffect } from "react"; - -export default function DarkThemeSelector() { - const [darkTheme, setDarkTheme] = useTheme(state => [state.darkTheme, state.setDarkTheme]); - useEffect(() => { - setDarkTheme(darkThemes[0]); - }, []); - return ( -

- Select default dark theme{" "} - -

- ); -} diff --git a/examples/nextjs-pages-router/components/LightThemeSelector.tsx b/examples/nextjs-pages-router/components/LightThemeSelector.tsx deleted file mode 100644 index 78614fa5..00000000 --- a/examples/nextjs-pages-router/components/LightThemeSelector.tsx +++ /dev/null @@ -1,23 +0,0 @@ -"use client"; -import { useTheme } from "nextjs-themes"; -import { lightThemes } from "../data/themes"; -import { useEffect } from "react"; - -export default function LightThemeSelector() { - const [lightTheme, setLightTheme] = useTheme(state => [state.lightTheme, state.setLightTheme]); - useEffect(() => { - setLightTheme(lightThemes[0]); - }, []); - return ( -

- Select default light theme{" "} - -

- ); -} diff --git a/examples/nextjs-pages-router/components/ThemeSelector.tsx b/examples/nextjs-pages-router/components/ThemeSelector.tsx deleted file mode 100644 index 31ed7053..00000000 --- a/examples/nextjs-pages-router/components/ThemeSelector.tsx +++ /dev/null @@ -1,19 +0,0 @@ -"use client"; -import { useTheme } from "nextjs-themes"; -import { darkThemes, lightThemes } from "../data/themes"; - -export default function ThemeSelector() { - const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]); - return ( -

- Select Theme{" "} - -

- ); -} diff --git a/examples/nextjs-pages-router/components/pageNavigator.tsx b/examples/nextjs-pages-router/components/pageNavigator.tsx deleted file mode 100644 index aafaa907..00000000 --- a/examples/nextjs-pages-router/components/pageNavigator.tsx +++ /dev/null @@ -1,48 +0,0 @@ -"use client"; -import { useState } from "react"; -import { darkThemes, lightThemes } from "../data/themes"; -import Link from "next/link"; - -export default function PageNavigator() { - const [exampleType, _setExampleType] = useState("themed-page"); - const [exampleOption, setExampleOption] = useState(darkThemes[0]); - const [exampleOptions, setExampleOptions] = useState([...darkThemes, ...lightThemes]); - const setExampleType = (exampleType: string) => { - const exampleOptions = exampleType === "themed-page" ? [] : ["system", "dark", "light"]; - setExampleOptions(exampleOptions); - console.log(exampleType, exampleOptions); - setExampleOption(exampleOptions[0]); - _setExampleType(exampleType); - }; - return ( -
-
-

Example Page Navigator

- -
- -
- ); -} diff --git a/examples/nextjs-pages-router/data/themes.ts b/examples/nextjs-pages-router/data/themes.ts deleted file mode 100644 index d5f368c2..00000000 --- a/examples/nextjs-pages-router/data/themes.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const darkThemes = ["black", "gray", "dark-blue"]; -export const lightThemes = ["white", "yellow", "orange"]; diff --git a/examples/nextjs-pages-router/global.css b/examples/nextjs-pages-router/global.css deleted file mode 100644 index c5c1c97a..00000000 --- a/examples/nextjs-pages-router/global.css +++ /dev/null @@ -1,76 +0,0 @@ -* { - box-sizing: border-box; -} - -:root { - --bg-color: #fff; - --text-color: #000; -} - -/* dark themes */ -[data-theme="black"] { - --bg-color: #000; - --text-color: #fff; -} - -[data-theme="gray"] { - --bg-color: gray; - --text-color: #fff; -} - -[data-theme="dark-blue"] { - --bg-color: #006; - --text-color: #ff0; -} - -/* light themes */ - -[data-theme="white"] { - --bg-color: #fff; - --text-color: #000; -} - -[data-theme="yellow"] { - --bg-color: #ff0; - --text-color: #00f; -} - -[data-theme="orange"] { - --bg-color: #ffa500; - --text-color: #05f; -} - -html, -body { - padding: 0; - margin: 0; -} - -body { - background: var(--bg-color); - color: var(--text-color); -} - -code { - display: inline-block; - border-radius: 2px; - padding: 2px 4px; - background: #aaa5; -} - -code pre { - width: 600px; - padding: 2px 10px; -} - -.container { - max-width: 800px; - margin: auto; -} - -.container header, -.page-navigator nav { - display: flex; - gap: 20px; - align-items: center; -} diff --git a/examples/nextjs-pages-router/next.config.js b/examples/nextjs-pages-router/next.config.js deleted file mode 100644 index b4817db1..00000000 --- a/examples/nextjs-pages-router/next.config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - reactStrictMode: true, - transpilePackages: ["nextjs-themes"], -}; diff --git a/examples/nextjs-pages-router/pages/_app.tsx b/examples/nextjs-pages-router/pages/_app.tsx deleted file mode 100644 index f1edbd57..00000000 --- a/examples/nextjs-pages-router/pages/_app.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { AppProps } from "next/app"; -import Link from "next/link"; -import { ThemeSwitcher, ColorSchemeType } from "nextjs-themes"; -import PageNavigator from "../components/pageNavigator"; -import "../global.css"; - -type _AppProps = AppProps & { Component: { theme?: string; colorScheme?: ColorSchemeType } }; - -export default function App({ Component, pageProps }: _AppProps) { - return ( - <> - -
-
- -

🏡

- {" "} -

Advanced Multi Theme Example

-
-

- Example showing how to use nextjs-themes to implement multi theme switching -

- -
- -
- - ); -} diff --git a/examples/nextjs-pages-router/pages/index.tsx b/examples/nextjs-pages-router/pages/index.tsx deleted file mode 100644 index 5129a5dd..00000000 --- a/examples/nextjs-pages-router/pages/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import ColorSchemePreference from "../components/ColorSchemePreference"; -import DarkThemeSelector from "../components/DarkThemeSelector"; -import LightThemeSelector from "../components/LightThemeSelector"; -import ThemeSelector from "../components/ThemeSelector"; - -export default function Home() { - return ( -
- - - - -
- ); -} diff --git a/examples/nextjs-pages-router/CHANGELOG.md b/examples/pages-router/CHANGELOG.md similarity index 82% rename from examples/nextjs-pages-router/CHANGELOG.md rename to examples/pages-router/CHANGELOG.md index 0b97bb10..e95d0c9e 100644 --- a/examples/nextjs-pages-router/CHANGELOG.md +++ b/examples/pages-router/CHANGELOG.md @@ -1,5 +1,13 @@ # nextjs-pages-router +## 1.0.6 + +### Patch Changes + +- Updated dependencies [bc71a4a] + - nextjs-themes@1.1.1 + - shared-ui@1.0.1 + ## 1.0.5 ### Patch Changes diff --git a/examples/nextjs-pages-router/next-env.d.ts b/examples/pages-router/next-env.d.ts similarity index 100% rename from examples/nextjs-pages-router/next-env.d.ts rename to examples/pages-router/next-env.d.ts diff --git a/examples/advanced-multi-theme/next.config.js b/examples/pages-router/next.config.js similarity index 100% rename from examples/advanced-multi-theme/next.config.js rename to examples/pages-router/next.config.js diff --git a/examples/nextjs-pages-router/package.json b/examples/pages-router/package.json similarity index 86% rename from examples/nextjs-pages-router/package.json rename to examples/pages-router/package.json index c0863ec8..ab9e29e7 100644 --- a/examples/nextjs-pages-router/package.json +++ b/examples/pages-router/package.json @@ -1,6 +1,6 @@ { - "name": "nextjs-pages-router", - "version": "1.0.5", + "name": "pages-router", + "version": "1.0.6", "private": true, "scripts": { "dev": "next dev --port 3003", @@ -11,6 +11,7 @@ "dependencies": { "next": "^14.0.3", "nextjs-themes": "workspace:*", + "shared-ui": "workspace:*", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/pages-router/pages/_app.tsx b/examples/pages-router/pages/_app.tsx new file mode 100644 index 00000000..b3b6ffe0 --- /dev/null +++ b/examples/pages-router/pages/_app.tsx @@ -0,0 +1,15 @@ +import { AppProps } from "next/app"; +import Link from "next/link"; +import { ColorSchemeType } from "nextjs-themes"; +import { SharedRootLayout } from "shared-ui"; + +type _AppProps = AppProps & { Component: { theme?: string; colorScheme?: ColorSchemeType } }; + +export default function App({ Component, pageProps }: _AppProps) { + const { theme, colorScheme } = Component; + return ( + + + + ); +} diff --git a/examples/nextjs-pages-router/pages/forced-color-scheme/[colorScheme].tsx b/examples/pages-router/pages/forced-color-scheme/[colorScheme].tsx similarity index 100% rename from examples/nextjs-pages-router/pages/forced-color-scheme/[colorScheme].tsx rename to examples/pages-router/pages/forced-color-scheme/[colorScheme].tsx diff --git a/examples/pages-router/pages/index.tsx b/examples/pages-router/pages/index.tsx new file mode 100644 index 00000000..54f7676e --- /dev/null +++ b/examples/pages-router/pages/index.tsx @@ -0,0 +1,3 @@ +export default function Home() { + return

Next.js Pages Router Example

; +} diff --git a/examples/nextjs-pages-router/pages/static-black-theme.tsx b/examples/pages-router/pages/static-black-theme.tsx similarity index 100% rename from examples/nextjs-pages-router/pages/static-black-theme.tsx rename to examples/pages-router/pages/static-black-theme.tsx diff --git a/examples/nextjs-pages-router/pages/static-dark-color-scheme.tsx b/examples/pages-router/pages/static-dark-color-scheme.tsx similarity index 100% rename from examples/nextjs-pages-router/pages/static-dark-color-scheme.tsx rename to examples/pages-router/pages/static-dark-color-scheme.tsx diff --git a/examples/nextjs-pages-router/pages/themed-page/[theme].tsx b/examples/pages-router/pages/themed-page/[theme].tsx similarity index 100% rename from examples/nextjs-pages-router/pages/themed-page/[theme].tsx rename to examples/pages-router/pages/themed-page/[theme].tsx diff --git a/examples/nextjs-pages-router/tsconfig.json b/examples/pages-router/tsconfig.json similarity index 100% rename from examples/nextjs-pages-router/tsconfig.json rename to examples/pages-router/tsconfig.json diff --git a/examples/simple-dark-light-mode/.eslintrc.js b/examples/simple-dark-light-mode/.eslintrc.js deleted file mode 100644 index c8df6075..00000000 --- a/examples/simple-dark-light-mode/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ["custom"], -}; diff --git a/examples/simple-dark-light-mode/.gitignore b/examples/simple-dark-light-mode/.gitignore deleted file mode 100644 index 1437c53f..00000000 --- a/examples/simple-dark-light-mode/.gitignore +++ /dev/null @@ -1,34 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel diff --git a/examples/simple-dark-light-mode/CHANGELOG.md b/examples/simple-dark-light-mode/CHANGELOG.md deleted file mode 100644 index d2cb725e..00000000 --- a/examples/simple-dark-light-mode/CHANGELOG.md +++ /dev/null @@ -1,37 +0,0 @@ -# simple-dark-light-mode - -## 1.0.5 - -### Patch Changes - -- Updated dependencies [da1cdd9] - - nextjs-themes@1.1.0 - -## 1.0.4 - -### Patch Changes - -- Updated dependencies [e7ca315] -- Updated dependencies [a4862ee] - - nextjs-themes@0.4.0 - -## 1.0.3 - -### Patch Changes - -- Updated dependencies [b23b5c7] - - nextjs-themes@0.3.2 - -## 1.0.2 - -### Patch Changes - -- Updated dependencies [c792f67] - - nextjs-themes@0.3.1 - -## 1.0.1 - -### Patch Changes - -- Updated dependencies [6662939] - - nextjs-themes@0.3.0 diff --git a/examples/simple-dark-light-mode/README.md b/examples/simple-dark-light-mode/README.md deleted file mode 100644 index 89f44675..00000000 --- a/examples/simple-dark-light-mode/README.md +++ /dev/null @@ -1 +0,0 @@ -# Simple Dark/Light Mode Example diff --git a/examples/simple-dark-light-mode/app/ThemeSelector.tsx b/examples/simple-dark-light-mode/app/ThemeSelector.tsx deleted file mode 100644 index 4980a4c7..00000000 --- a/examples/simple-dark-light-mode/app/ThemeSelector.tsx +++ /dev/null @@ -1,18 +0,0 @@ -"use client"; -import { useTheme } from "nextjs-themes"; - -export default function ThemeSelector() { - const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]); - return ( -

- -

- ); -} diff --git a/examples/simple-dark-light-mode/app/global.css b/examples/simple-dark-light-mode/app/global.css deleted file mode 100644 index 23b1e76b..00000000 --- a/examples/simple-dark-light-mode/app/global.css +++ /dev/null @@ -1,29 +0,0 @@ -* { - box-sizing: border-box; -} - -:root { - --bg-color: #fff; - --text-color: #000; -} - -[data-theme="dark"] { - --bg-color: #000; - --text-color: #fff; -} - -html, -body { - padding: 0; - margin: 0; -} - -body { - background: var(--bg-color); - color: var(--text-color); -} - -.container { - max-width: 800px; - margin: auto; -} diff --git a/examples/simple-dark-light-mode/app/layout.tsx b/examples/simple-dark-light-mode/app/layout.tsx deleted file mode 100644 index 341d2dfc..00000000 --- a/examples/simple-dark-light-mode/app/layout.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import "./global.css"; -import { ThemeSwitcher } from "nextjs-themes"; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - - {children} - - - ); -} diff --git a/examples/simple-dark-light-mode/app/page.tsx b/examples/simple-dark-light-mode/app/page.tsx deleted file mode 100644 index cb23099c..00000000 --- a/examples/simple-dark-light-mode/app/page.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import ThemeSelector from "./ThemeSelector"; - -export default function Page() { - return ( -
-

Simple Dark Light Mode

-
-

- Example showing how to use nextjs-themes to implement simple dark/light mode -

- -
- ); -} diff --git a/examples/simple-dark-light-mode/next-env.d.ts b/examples/simple-dark-light-mode/next-env.d.ts deleted file mode 100644 index 4f11a03d..00000000 --- a/examples/simple-dark-light-mode/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/simple-dark-light-mode/next.config.js b/examples/simple-dark-light-mode/next.config.js deleted file mode 100644 index b4817db1..00000000 --- a/examples/simple-dark-light-mode/next.config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - reactStrictMode: true, - transpilePackages: ["nextjs-themes"], -}; diff --git a/examples/simple-dark-light-mode/package.json b/examples/simple-dark-light-mode/package.json deleted file mode 100644 index a253a760..00000000 --- a/examples/simple-dark-light-mode/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "simple-dark-light-mode", - "version": "1.0.5", - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start", - "lint": "next lint" - }, - "dependencies": { - "next": "^14.0.3", - "nextjs-themes": "workspace:*", - "react": "^18.2.0", - "react-dom": "^18.2.0" - }, - "devDependencies": { - "@types/node": "^20.10.2", - "@types/react": "^18.2.40", - "@types/react-dom": "^18.2.17", - "eslint-config-custom": "workspace:*", - "tsconfig": "workspace:*", - "typescript": "^5.3.2" - } -} diff --git a/examples/simple-dark-light-mode/tsconfig.json b/examples/simple-dark-light-mode/tsconfig.json deleted file mode 100644 index 644ee04f..00000000 --- a/examples/simple-dark-light-mode/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "tsconfig/nextjs.json", - "compilerOptions": { - "plugins": [{ "name": "next" }] - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] -} diff --git a/examples/simple-multi-theme/CHANGELOG.md b/examples/simple-multi-theme/CHANGELOG.md index 83415484..96ca0896 100644 --- a/examples/simple-multi-theme/CHANGELOG.md +++ b/examples/simple-multi-theme/CHANGELOG.md @@ -1,5 +1,13 @@ # simple-multi-theme +## 1.0.6 + +### Patch Changes + +- Updated dependencies [bc71a4a] + - nextjs-themes@1.1.1 + - shared-ui@1.0.1 + ## 1.0.5 ### Patch Changes diff --git a/examples/simple-multi-theme/app/ThemeSelector.tsx b/examples/simple-multi-theme/app/ThemeSelector.tsx index 9e6880c1..7a9e08e3 100644 --- a/examples/simple-multi-theme/app/ThemeSelector.tsx +++ b/examples/simple-multi-theme/app/ThemeSelector.tsx @@ -1,15 +1,16 @@ "use client"; import { useTheme } from "nextjs-themes"; +import { darkThemes, lightThemes } from "shared-ui"; +import styles from "shared-ui/src/root-layout.module.css"; export default function ThemeSelector() { const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]); return ( -

+

diff --git a/examples/simple-multi-theme/app/favicon.ico b/examples/simple-multi-theme/app/favicon.ico new file mode 100644 index 00000000..71e4bd71 Binary files /dev/null and b/examples/simple-multi-theme/app/favicon.ico differ diff --git a/examples/simple-multi-theme/app/global.css b/examples/simple-multi-theme/app/global.css deleted file mode 100644 index 28a70d62..00000000 --- a/examples/simple-multi-theme/app/global.css +++ /dev/null @@ -1,39 +0,0 @@ -* { - box-sizing: border-box; -} - -:root { - --bg-color: #fff; - --text-color: #000; -} - -[data-theme="black"] { - --bg-color: #000; - --text-color: #fff; -} - -[data-theme="blue"] { - --bg-color: #00f; - --text-color: #ff0; -} - -[data-theme="red"] { - --bg-color: #f00; - --text-color: #0ff; -} - -html, -body { - padding: 0; - margin: 0; -} - -body { - background: var(--bg-color); - color: var(--text-color); -} - -.container { - max-width: 800px; - margin: auto; -} diff --git a/examples/simple-multi-theme/app/layout.tsx b/examples/simple-multi-theme/app/layout.tsx index 341d2dfc..c2aa4d81 100644 --- a/examples/simple-multi-theme/app/layout.tsx +++ b/examples/simple-multi-theme/app/layout.tsx @@ -1,12 +1,12 @@ -import "./global.css"; +import "shared-ui/src/globals.css"; import { ThemeSwitcher } from "nextjs-themes"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - - {children} + +

{children}
); diff --git a/examples/simple-multi-theme/app/page.module.css b/examples/simple-multi-theme/app/page.module.css new file mode 100644 index 00000000..b724a1f5 --- /dev/null +++ b/examples/simple-multi-theme/app/page.module.css @@ -0,0 +1,6 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; +} diff --git a/examples/simple-multi-theme/app/page.tsx b/examples/simple-multi-theme/app/page.tsx index fec81182..d65523c1 100644 --- a/examples/simple-multi-theme/app/page.tsx +++ b/examples/simple-multi-theme/app/page.tsx @@ -1,8 +1,9 @@ import ThemeSelector from "./ThemeSelector"; +import styles from "./page.module.css"; export default function Page() { return ( -
+

Simple Multi Theme

diff --git a/examples/simple-multi-theme/package.json b/examples/simple-multi-theme/package.json index f62cfb22..8a80ff38 100644 --- a/examples/simple-multi-theme/package.json +++ b/examples/simple-multi-theme/package.json @@ -1,6 +1,6 @@ { "name": "simple-multi-theme", - "version": "1.0.5", + "version": "1.0.6", "private": true, "scripts": { "dev": "next dev --port 3001", @@ -11,6 +11,7 @@ "dependencies": { "next": "^14.0.3", "nextjs-themes": "workspace:*", + "shared-ui": "workspace:*", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md index 26db8cef..21a7ff08 100644 --- a/examples/vite/CHANGELOG.md +++ b/examples/vite/CHANGELOG.md @@ -1,5 +1,13 @@ # vite-example +## 0.0.11 + +### Patch Changes + +- Updated dependencies [bc71a4a] + - nextjs-themes@1.1.1 + - shared-ui@1.0.1 + ## 0.0.1 ### Patch Changes diff --git a/examples/vite/README.md b/examples/vite/README.md index 603a1359..e46c238b 100644 --- a/examples/vite/README.md +++ b/examples/vite/README.md @@ -16,7 +16,7 @@ To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - Learn about Next.js features and API. - [Learn Next.js](https://www.udemy.com/course/react-and-next-js-with-typescript/?referralCode=7202184A1E57C3DCA8B2) - an interactive Next.js course. -You can check out [the Turbo Template GitHub repository](https://github.com/mayank1513/turborepo-template/) - your feedback and contributions are welcome! +You can check out [the Turbo Template GitHub repository](https://github.com/react18-tools/turborepo-template/) - your feedback and contributions are welcome! ### 🤩 Don't forget to start this repo! diff --git a/examples/vite/package.json b/examples/vite/package.json index 1037c21d..184d7a20 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -1,7 +1,7 @@ { "name": "vite-example", "private": true, - "version": "0.0.1", + "version": "0.0.11", "type": "module", "scripts": { "dev": "vite --port 3001", @@ -11,17 +11,19 @@ }, "dependencies": { "@mayank1513/fork-me": "^2.0.0", - "nextjs-themes": "workspace:*", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.20.0", + "nextjs-themes": "workspace:*", + "shared-ui": "workspace:*" }, "devDependencies": { - "@types/react": "^18.2.40", + "@types/react": "^18.2.39", "@types/react-dom": "^18.2.17", "@typescript-eslint/eslint-plugin": "^6.13.1", "@typescript-eslint/parser": "^6.13.1", "@vitejs/plugin-react-swc": "^3.5.0", - "eslint": "^8.55.0", + "eslint": "^8.54.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.4", "typescript": "^5.3.2", diff --git a/examples/vite/src/App.css b/examples/vite/src/App.css deleted file mode 100644 index b9d355df..00000000 --- a/examples/vite/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 43840c9e..225177d1 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -1,48 +1,5 @@ -import { useState } from "react"; -import reactLogo from "./assets/react.svg"; -import viteLogo from "/vite.svg"; -import { ThemeSwitcher } from "nextjs-themes"; -import { ForkMe } from "@mayank1513/fork-me/server"; -import "./App.css"; -import ColorSchemePreference from "./components/color-scheme-preference"; -import ThemeSelector from "./components/theme-selector"; -import DarkThemeSelector from "./components/dark-theme-selector"; -import LightThemeSelector from "./components/light-theme-selector"; -import styles from "./components/page.module.css"; -import { StarMe } from "@mayank1513/fork-me"; - function App() { - return ( - <> - -

-

React18 Themes

-
- -

- Edit src/App.tsx and save to test HMR -

-
-
-
- - -
-
- - -
-
- - - ); + return

Vite Example

; } export default App; diff --git a/examples/vite/src/assets/react.svg b/examples/vite/src/assets/react.svg deleted file mode 100644 index 6c87de9b..00000000 --- a/examples/vite/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/vite/src/components/color-scheme-preference.tsx b/examples/vite/src/components/color-scheme-preference.tsx deleted file mode 100644 index 06f8eaaf..00000000 --- a/examples/vite/src/components/color-scheme-preference.tsx +++ /dev/null @@ -1,24 +0,0 @@ -"use client"; -import { useTheme, ColorSchemeType } from "nextjs-themes"; -import styles from "./page.module.css"; - -const colorSchemes: ColorSchemeType[] = ["", "system", "light", "dark"]; - -export default function ColorSchemePreference() { - const [colorSchemePref, setColorSchemePref] = useTheme(state => [state.colorSchemePref, state.setColorSchemePref]); - return ( -

- ColorScheme Preference{" "} - -

- ); -} diff --git a/examples/vite/src/components/dark-theme-selector.tsx b/examples/vite/src/components/dark-theme-selector.tsx deleted file mode 100644 index 6d967b51..00000000 --- a/examples/vite/src/components/dark-theme-selector.tsx +++ /dev/null @@ -1,29 +0,0 @@ -"use client"; -import { useTheme } from "nextjs-themes"; -import { darkThemes } from "./themes"; -import { useEffect } from "react"; -import styles from "./page.module.css"; - -export default function DarkThemeSelector() { - const [colorSchemePref, defaultTheme, setDarkTheme] = useTheme(state => [ - state.colorSchemePref, - state.darkTheme, - state.setDarkTheme, - ]); - useEffect(() => { - setDarkTheme(darkThemes[0]); - }, []); - const className = colorSchemePref === "dark" ? styles.active : colorSchemePref === "system" ? styles.dark : ""; - return ( -

- Select default dark theme{" "} - -

- ); -} diff --git a/examples/vite/src/components/light-theme-selector.tsx b/examples/vite/src/components/light-theme-selector.tsx deleted file mode 100644 index 62f59d92..00000000 --- a/examples/vite/src/components/light-theme-selector.tsx +++ /dev/null @@ -1,29 +0,0 @@ -"use client"; -import { useTheme } from "nextjs-themes"; -import { lightThemes } from "./themes"; -import { useEffect } from "react"; -import styles from "./page.module.css"; - -export default function LightThemeSelector() { - const [colorSchemePref, defaultLightTheme, setDefaultLightTheme] = useTheme(state => [ - state.colorSchemePref, - state.lightTheme, - state.setLightTheme, - ]); - useEffect(() => { - setDefaultLightTheme(lightThemes[0]); - }, []); - const className = colorSchemePref === "light" ? styles.active : colorSchemePref === "system" ? styles.light : ""; - return ( -

- Select default light theme{" "} - -

- ); -} diff --git a/examples/vite/src/components/page.module.css b/examples/vite/src/components/page.module.css deleted file mode 100644 index d93247e1..00000000 --- a/examples/vite/src/components/page.module.css +++ /dev/null @@ -1,290 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 3rem 0; - min-height: calc(100vh - 55px); -} - -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.cards { - display: flex; - justify-content: space-evenly; - width: var(--max-width); -} - -.card { - all: unset; - display: flex; - flex-direction: column; - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0.1); - cursor: pointer; - transition: - background 200ms, - border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; - text-align: start; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - width: 34ch; - text-align: start; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding-bottom: 2rem; - gap: 50px; -} - -.prefs { - padding-bottom: 4rem; -} - -.prefs select { - width: 85px; - float: right; - margin-left: 20px; - opacity: 0.3; -} - -select.active, -select.light { - opacity: 1; -} - -.center > div { - position: relative; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; - pointer-events: none; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ""; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; - display: flex; - justify-content: center; - align-items: center; - margin-left: 16px; - transform: translateZ(0); - border-radius: var(--border-radius); - overflow: hidden; - box-shadow: 0px 2px 8px -1px #0000001a; - padding: 2px; -} -.logo p { - background: var(--bg-color); -} -.logo::before, -.logo::after { - content: " "; - position: absolute; - z-index: -1; -} - -/* Conic Gradient Animation */ -.logo::before { - animation: 3s rotate infinite linear; - width: 800%; - height: 800%; - background: var(--tile-border); -} - -/* Inner Square */ -.logo::after { - inset: 0; - padding: 1px; - border-radius: var(--border-radius); - background: linear-gradient( - to bottom right, - rgba(var(--tile-start-rgb), 1), - rgba(var(--tile-end-rgb), 1) - ); - background-clip: content-box; -} - -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -/* @media (prefers-reduced-motion) { - .logo::before { - animation: none; - } - - .card:hover span { - transform: none; - } -} */ - -/* Mobile and Tablet */ -@media (max-width: 1023px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%); - z-index: 1; - } -} - -@media (prefers-color-scheme: dark) { - select.dark { - opacity: 1; - } - select.light { - opacity: 0.3; - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} diff --git a/examples/vite/src/components/theme-selector.tsx b/examples/vite/src/components/theme-selector.tsx deleted file mode 100644 index 273e809e..00000000 --- a/examples/vite/src/components/theme-selector.tsx +++ /dev/null @@ -1,20 +0,0 @@ -"use client"; -import { useTheme } from "nextjs-themes"; -import { darkThemes, lightThemes } from "./themes"; -import styles from "./page.module.css"; - -export default function ThemeSelector() { - const [colorSchemePref, theme, setTheme] = useTheme(state => [state.colorSchemePref, state.theme, state.setTheme]); - return ( -

- Select Theme{" "} - -

- ); -} diff --git a/examples/vite/src/components/themes.ts b/examples/vite/src/components/themes.ts deleted file mode 100644 index 5ccb9404..00000000 --- a/examples/vite/src/components/themes.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const darkThemes = ["dark", "black", "gray", "dark-blue"]; -export const lightThemes = ["white", "yellow", "orange"]; diff --git a/examples/vite/src/forced-color-scheme-page.tsx b/examples/vite/src/forced-color-scheme-page.tsx new file mode 100644 index 00000000..ced6e628 --- /dev/null +++ b/examples/vite/src/forced-color-scheme-page.tsx @@ -0,0 +1,15 @@ +import { ForcedPageLayout } from "shared-ui"; +import { ColorSchemeType, ForceColorScheme } from "nextjs-themes"; +import { Link, useParams } from "react-router-dom"; + +export default function ForcedColorSchemePage() { + const { colorScheme } = useParams(); + return ( + + +

+ Color scheme is forced to {colorScheme}. Thus, default-{colorScheme}-theme is applied +

+ + ); +} diff --git a/examples/vite/src/index.css b/examples/vite/src/index.css deleted file mode 100644 index 3c337a45..00000000 --- a/examples/vite/src/index.css +++ /dev/null @@ -1,110 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: #213547; - background-color: #ffffff; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #747bff; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #f9f9f9; - color: #213547; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -/* dark themes */ -[data-theme="dark"] { - color: rgba(255, 255, 255, 0.87); - background-color: #242424; -} - -[data-theme="black"] { - background-color: #000; - color: #fff; -} - -[data-theme="gray"] { - background-color: gray; - color: #fff; -} - -[data-theme="dark-blue"] { - background-color: #006; - color: #ff0; -} - -[data-theme="dark"] button, -[data-theme="black"] button, -[data-theme="gray"] button, -[data-theme="dark-blue"] button { - background-color: #1a1a1a; - color: #decab8; -} - -[data-theme="dark"] a:hover, -[data-theme="black"] a:hover, -[data-theme="gray"] a:hover, -[data-theme="dark-blue"] a:hover { - color: #535bf2; -} - -/* light themes */ - -[data-theme="white"] { - background-color: #fff; - color: #000; -} - -[data-theme="yellow"] { - background-color: #ff0; - color: #00f; -} - -[data-theme="orange"] { - background-color: #ffa500; - color: #05f; -} diff --git a/examples/vite/src/main.tsx b/examples/vite/src/main.tsx index 3d7150da..a40e7e31 100644 --- a/examples/vite/src/main.tsx +++ b/examples/vite/src/main.tsx @@ -1,10 +1,40 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.tsx' -import './index.css' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.tsx"; +import { createBrowserRouter, Link, Outlet, RouterProvider } from "react-router-dom"; +import ForcedColorSchemePage from "./forced-color-scheme-page.tsx"; +import ThemedPage from "./themed-page.tsx"; +import { SharedRootLayout } from "shared-ui"; -ReactDOM.createRoot(document.getElementById('root')!).render( - - - , -) +const routes = [ + { + path: "/", + element: , + }, + { + path: "/forced-color-scheme/:colorScheme", + element: , + }, + { + path: "/themed-page/:theme", + element: , + }, +]; + +const router = createBrowserRouter([ + { + path: "/", + element: ( + + + + ), + children: routes, + }, +]); + +ReactDOM.createRoot(document.getElementById("root")!).render( + + + , +); diff --git a/examples/vite/src/themed-page.tsx b/examples/vite/src/themed-page.tsx new file mode 100644 index 00000000..6acb754e --- /dev/null +++ b/examples/vite/src/themed-page.tsx @@ -0,0 +1,13 @@ +import { Link, useParams } from "react-router-dom"; +import { ForceTheme } from "nextjs-themes"; +import { ForcedPageLayout } from "shared-ui"; + +export default function ThemedPage() { + const { theme } = useParams(); + return ( + + +

Theme is forced to {theme}. Try changing theme or colorScheme and verify!

+ + ); +} diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts index 861b04b3..41114b5e 100644 --- a/examples/vite/vite.config.ts +++ b/examples/vite/vite.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], -}) + plugins: [react()], +}); diff --git a/packages/nextjs-themes/CHANGELOG.md b/packages/nextjs-themes/CHANGELOG.md index 8a5ad562..dd986dd0 100644 --- a/packages/nextjs-themes/CHANGELOG.md +++ b/packages/nextjs-themes/CHANGELOG.md @@ -1,5 +1,11 @@ # nextjs-themes +## 1.1.1 + +### Patch Changes + +- bc71a4a: Update examples, enhancements + ## 1.1.0 ### Minor Changes diff --git a/packages/nextjs-themes/package.json b/packages/nextjs-themes/package.json index c3768eac..956e27e2 100644 --- a/packages/nextjs-themes/package.json +++ b/packages/nextjs-themes/package.json @@ -2,7 +2,7 @@ "name": "nextjs-themes", "author": "Mayank Kumar Chaudhari ", "private": false, - "version": "1.1.0", + "version": "1.1.1", "description": "Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.", "main": "./index.ts", "types": "./index.ts", diff --git a/packages/nextjs-themes/scope.js b/packages/nextjs-themes/scope.js index ae8e044b..07f136e6 100644 --- a/packages/nextjs-themes/scope.js +++ b/packages/nextjs-themes/scope.js @@ -3,16 +3,14 @@ const fs = require("node:fs"); const path = require("node:path"); -const owner = process.env.OWNER; -const packageJson = require(path.resolve(process.cwd(), "package.json")); +const owner = "mayank1513"; +const wd = path.resolve(process.cwd(), "dist"); +const packageJson = require(path.resolve(wd, "package.json")); const ref = packageJson.name; if (!ref.startsWith(`@${owner}`)) { packageJson.name = `@${owner}/${packageJson.name}`; - fs.writeFileSync( - path.resolve(process.cwd(), "package.json"), - JSON.stringify(packageJson, null, 2), - ); - const readMePath = path.resolve(process.cwd(), "README.md"); + fs.writeFileSync(path.resolve(wd, "package.json"), JSON.stringify(packageJson, null, 2)); + const readMePath = path.resolve(wd, "README.md"); let readMe = fs.readFileSync(readMePath, { encoding: "utf8" }); const tmp = "!--|--!"; readMe = readMe.replace(new RegExp(`$${owner}/${ref}`, "g"), tmp); diff --git a/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx b/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx index 10742703..4ed79871 100644 --- a/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx +++ b/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx @@ -56,9 +56,10 @@ interface UpdateDOMProps { } function updateDOM({ newTheme, colorScheme, media }: UpdateDOMProps, targetSelector?: string) { - const target = document.querySelector(targetSelector || "#react18-themes") || document.documentElement; - target.setAttribute("data-theme", newTheme); - target.setAttribute("data-color-scheme", colorScheme); + [document.querySelector(targetSelector || "#nextjs-themes"), document.documentElement].forEach(target => { + target?.setAttribute("data-theme", newTheme); + target?.setAttribute("data-color-scheme", colorScheme); + }); /** store system preference for computing data-theme on server side */ document.cookie = `data-color-scheme-system=${media.matches ? "dark" : "light"}`; diff --git a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx index a1633ca1..274e0f10 100644 --- a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx +++ b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx @@ -7,7 +7,7 @@ describe("server-side-target", () => { beforeEach(() => { globalThis.cookies = { - "react18-themes": { + "nextjs-themes": { value: JSON.stringify({ theme: "yellow", darkTheme: "dark-blue", diff --git a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx index fcf4fde7..2a128271 100644 --- a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx +++ b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx @@ -18,7 +18,7 @@ function sharedServerComponentRenderer( defaultTag: "div" | "html", ) { const Tag: keyof JSX.IntrinsicElements = tag || defaultTag; - const state = cookies().get("react18-themes")?.value; + const state = cookies().get("nextjs-themes")?.value; const path = headers().get("referer"); const forcedPageData = forcedPages?.find(forcedPage => path?.match(forcedPage[0])); @@ -36,7 +36,7 @@ function sharedServerComponentRenderer( return ( // @ts-expect-error -> svg props and html element props conflict - + {children} ); diff --git a/packages/shared-ui/.eslintrc.js b/packages/shared-ui/.eslintrc.js new file mode 100644 index 00000000..05ac2b2b --- /dev/null +++ b/packages/shared-ui/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ["custom/react-internal"], +}; diff --git a/packages/shared-ui/index.ts b/packages/shared-ui/index.ts new file mode 100644 index 00000000..3bd16e17 --- /dev/null +++ b/packages/shared-ui/index.ts @@ -0,0 +1 @@ +export * from "./src"; diff --git a/packages/shared-ui/package.json b/packages/shared-ui/package.json new file mode 100644 index 00000000..772c902f --- /dev/null +++ b/packages/shared-ui/package.json @@ -0,0 +1,27 @@ +{ + "name": "shared-ui", + "author": "Mayank Kumar Chaudhari ", + "private": true, + "version": "1.0.1", + "description": "Shared UI Package", + "main": "./index.ts", + "types": "./index.ts", + "scripts": { + "lint": "eslint ." + }, + "devDependencies": { + "@mayank1513/fork-me": "^2.0.0", + "@types/node": "^20.10.1", + "@types/react": "^18.2.39", + "@types/react-dom": "^18.2.17", + "eslint-config-custom": "workspace:*", + "next": "^14.0.3", + "react": "^18.2.0", + "nextjs-themes": "workspace:*", + "tsconfig": "workspace:*", + "typescript": "5.3.2" + }, + "dependencies": { + "eslint": "^8.54.0" + } +} diff --git a/packages/shared-ui/src/cards/cards.module.css b/packages/shared-ui/src/cards/cards.module.css new file mode 100644 index 00000000..050430d1 --- /dev/null +++ b/packages/shared-ui/src/cards/cards.module.css @@ -0,0 +1,75 @@ +.cards { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + gap: 25px; + width: var(--max-width); + max-width: 95vw; +} + +.card { + all: unset; + display: flex; + flex-direction: column; + padding: 1rem 1.2rem; + border-radius: var(--border-radius); + background: rgba(var(--card-rgb), 0); + border: 1px solid rgba(var(--card-border-rgb), 0.1); + cursor: pointer; + transition: + background 200ms, + border 200ms; +} + +.card span { + display: inline-block; + transition: transform 200ms; +} + +.card h2 { + font-weight: 600; + margin-top: 0; + text-align: start; +} + +.card p { + margin: 0; + opacity: 0.6; + font-size: 0.9rem; + line-height: 1.5; + width: 34ch; + text-align: start; +} + +.card nav { + display: flex; + gap: 15px; + padding-top: 10px; +} + +.card nav select { + flex-grow: 1; +} + +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } +} + +/* Mobile and Tablet */ +@media (max-width: 1023px) { + .card { + padding: 1rem 2.5rem; + } + + .card h2 { + margin-bottom: 0.5rem; + } +} diff --git a/packages/shared-ui/src/cards/docs-card.tsx b/packages/shared-ui/src/cards/docs-card.tsx new file mode 100644 index 00000000..093b74d0 --- /dev/null +++ b/packages/shared-ui/src/cards/docs-card.tsx @@ -0,0 +1,16 @@ +import styles from "./cards.module.css"; + +export function DocsCard() { + return ( + +

+ Docs -> +

+

Explore the official docs.

+ + ); +} diff --git a/packages/shared-ui/src/cards/examples-card.tsx b/packages/shared-ui/src/cards/examples-card.tsx new file mode 100644 index 00000000..b8c8e03f --- /dev/null +++ b/packages/shared-ui/src/cards/examples-card.tsx @@ -0,0 +1,16 @@ +import styles from "./cards.module.css"; + +export function ExamplesCard() { + return ( + +

+ More Examples -> +

+

Explore more examples on official GitHub Repo.

+ + ); +} diff --git a/packages/shared-ui/src/cards/index.tsx b/packages/shared-ui/src/cards/index.tsx new file mode 100644 index 00000000..2420d279 --- /dev/null +++ b/packages/shared-ui/src/cards/index.tsx @@ -0,0 +1,17 @@ +import { ExamplesCard } from "./examples-card"; +import type { PageNavigatorCardProps } from "./page-navigator-card"; +import { PageNavigatorCard } from "./page-navigator-card"; +import styles from "./cards.module.css"; +import { StarMeCard } from "./star-me-card"; +import { DocsCard } from "./docs-card"; + +export function Cards({ LinkElement }: PageNavigatorCardProps) { + return ( +
+ + + + +
+ ); +} diff --git a/packages/shared-ui/src/cards/page-navigator-card.tsx b/packages/shared-ui/src/cards/page-navigator-card.tsx new file mode 100644 index 00000000..ce5b3d43 --- /dev/null +++ b/packages/shared-ui/src/cards/page-navigator-card.tsx @@ -0,0 +1,47 @@ +"use client"; +import type { ChangeEvent, FC, HTMLProps } from "react"; +import { useState } from "react"; +import { darkThemes, lightThemes } from "../theme-controller/themes"; +import { Select } from "../common/select"; +import styles from "./cards.module.css"; + +const exampleTypes: string[] = ["Themed Page", "Forced Color Scheme"]; + +export interface PageNavigatorCardProps { + LinkElement: unknown; +} + +export function PageNavigatorCard({ LinkElement }: PageNavigatorCardProps): JSX.Element { + const [exampleType, setExampleType] = useState("Themed Page"); + const [example, setExample] = useState(darkThemes[0]); + const [exampleOptions, setExampleOptions] = useState([...darkThemes, ...lightThemes]); + const handleChangeExampleType: (e: ChangeEvent) => void = e => { + const expType = e.target.value; + const expOptions = expType === "themed-page" ? [...darkThemes, ...lightThemes] : ["system", "dark", "light"]; + setExampleOptions(expOptions); + setExample(expOptions[0]); + setExampleType(expType); + }; + + const handleChangeExample: (e: ChangeEvent) => void = e => setExample(e.target.value); + const href = `/${exampleType.replace(/ +/g, "-").toLowerCase()}/${example}`; + const Link = LinkElement as FC<{ to?: string } & HTMLProps>; + return ( +
+

+ Pages Navigator + +  -> + +

+

+ Pages with forced theme/colorScheme +

+
+ +
+ ); +} diff --git a/packages/shared-ui/src/cards/star-me-card.tsx b/packages/shared-ui/src/cards/star-me-card.tsx new file mode 100644 index 00000000..b2eea04e --- /dev/null +++ b/packages/shared-ui/src/cards/star-me-card.tsx @@ -0,0 +1,13 @@ +import { StarMe } from "@mayank1513/fork-me"; +import styles from "./cards.module.css"; + +export function StarMeCard() { + return ( + +

+ Star this repo -> +

+

Star this repo for your new library!

+ + ); +} diff --git a/packages/shared-ui/src/common/logo.tsx b/packages/shared-ui/src/common/logo.tsx new file mode 100644 index 00000000..6e3b5107 --- /dev/null +++ b/packages/shared-ui/src/common/logo.tsx @@ -0,0 +1,11 @@ +"use client"; +import { useState, type HTMLProps, useEffect } from "react"; + +export function Logo(props: HTMLProps) { + /** Default to nextjs-themes variant for local server - assuming http:// schema for local and https:// for production */ + const [variant, setVariant] = useState("nextjs-themes"); + useEffect(() => { + if (window.location.origin.startsWith("https")) setVariant(window.location.origin.split("://")[1].split(".")[0]); + }, []); + return {variant}; +} diff --git a/packages/shared-ui/src/common/select.tsx b/packages/shared-ui/src/common/select.tsx new file mode 100644 index 00000000..bbacd8fb --- /dev/null +++ b/packages/shared-ui/src/common/select.tsx @@ -0,0 +1,25 @@ +import type { HTMLProps, ReactNode } from "react"; + +export interface SelectOptionsProps { + value: string; + children: ReactNode; +} + +interface SelectProps extends HTMLProps { + options: string[] | SelectOptionsProps[]; +} + +export function Select({ options, ...props }: SelectProps) { + const renderOptions = options.map(option => + typeof option === "string" ? { value: option, children: option } : option, + ); + return ( + + ); +} diff --git a/packages/shared-ui/src/declaration.d.ts b/packages/shared-ui/src/declaration.d.ts new file mode 100644 index 00000000..a1421d73 --- /dev/null +++ b/packages/shared-ui/src/declaration.d.ts @@ -0,0 +1,4 @@ +declare module "*.module.css" { + const classNames: Record; + export = classNames; +} diff --git a/packages/shared-ui/src/forced-page-layout.tsx b/packages/shared-ui/src/forced-page-layout.tsx new file mode 100644 index 00000000..1ded5d4b --- /dev/null +++ b/packages/shared-ui/src/forced-page-layout.tsx @@ -0,0 +1,21 @@ +import type { FC, HTMLProps } from "react"; +import type { SharedRootLayoutProps } from "./root-layout"; + +interface ForcedPageLayoutProps extends SharedRootLayoutProps { + scope: "forcedColorScheme" | "forcedTheme"; +} + +export function ForcedPageLayout({ LinkElement, scope, children }: ForcedPageLayoutProps) { + const Link = LinkElement as FC<{ to?: string } & HTMLProps>; + return ( +
+

+ + 🔙🏡 + {" "} + Example page showing {scope} +

+ {children} +
+ ); +} diff --git a/examples/advanced-multi-theme/app/globals.css b/packages/shared-ui/src/globals.css similarity index 57% rename from examples/advanced-multi-theme/app/globals.css rename to packages/shared-ui/src/globals.css index a70b81d8..b9363ca6 100644 --- a/examples/advanced-multi-theme/app/globals.css +++ b/packages/shared-ui/src/globals.css @@ -5,9 +5,8 @@ :root { --max-width: 1100px; --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", - "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", - "Courier New", monospace; + --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", + "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace; --bg-color: #fff; --text-color: #000; @@ -25,74 +24,64 @@ --callout-border-rgb: 172, 175, 176; --card-rgb: 180, 185, 188; --card-border-rgb: 131, 134, 135; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); + --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080); } /* dark themes */ [data-theme="dark"], -[data-theme="black"] { +[data-theme="dark"] ~ *, +[data-theme="black"], +[data-theme="black"] ~ * { --bg-color: #000; --text-color: #fff; } -[data-theme="gray"] { +[data-theme="gray"], +[data-theme="gray"] ~ * { --bg-color: gray; --text-color: #fff; } -[data-theme="dark-blue"] { +[data-theme="dark-blue"], +[data-theme="dark-blue"] ~ * { --bg-color: #006; --text-color: #ff0; } [data-theme="dark"], +[data-theme="dark"] ~ *, [data-theme="black"], +[data-theme="black"] ~ *, [data-theme="gray"], -[data-theme="dark-blue"] { +[data-theme="gray"] ~ *, +[data-theme="dark-blue"], +[data-theme="dark-blue"] ~ * { --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); + --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3)); --callout-rgb: 20, 20, 20; --callout-border-rgb: 108, 108, 108; --card-rgb: 100, 100, 100; --card-border-rgb: 200, 200, 200; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); + --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80); } /* light themes */ -[data-theme="white"] { +[data-theme="white"], +[data-theme="white"] ~ * { --bg-color: #fff; --text-color: #000; } -[data-theme="yellow"] { +[data-theme="yellow"], +[data-theme="yellow"] ~ * { --bg-color: #ff0; --text-color: #00f; } -[data-theme="orange"] { +[data-theme="orange"], +[data-theme="orange"] ~ * { --bg-color: #ffa500; --text-color: #05f; } @@ -102,23 +91,23 @@ html { margin: 0; } -body { +body, +#root { padding: 0; margin: 0; - background: var(--bg-color); - color: var(--text-color); + min-height: 100vh; + display: flex; + flex-direction: column; } -.container { - max-width: var(--max-width); - min-height: calc(100vh - 100px); - margin: auto; +main, +footer { + background: var(--bg-color); + color: var(--text-color); } -.container header { - display: flex; - gap: 20px; - align-items: center; +main { + flex-grow: 1; } footer { diff --git a/packages/shared-ui/src/index.ts b/packages/shared-ui/src/index.ts new file mode 100644 index 00000000..db460237 --- /dev/null +++ b/packages/shared-ui/src/index.ts @@ -0,0 +1,3 @@ +export * from "./theme-controller/themes"; +export * from "./root-layout"; +export * from "./forced-page-layout"; diff --git a/packages/shared-ui/src/root-layout.module.css b/packages/shared-ui/src/root-layout.module.css new file mode 100644 index 00000000..4c163ca6 --- /dev/null +++ b/packages/shared-ui/src/root-layout.module.css @@ -0,0 +1,169 @@ +.main { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 3rem 0; + min-height: calc(100vh - 55px); +} + +.description { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: nowrap !important; + font-size: 0.85rem; + max-width: var(--max-width); + width: 100%; + z-index: 2; + font-family: var(--font-mono); + padding: 10px; + padding-right: 100px; + position: sticky; + top: 0; + backdrop-filter: blur(3px); +} + +.description a { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.description p { + position: relative; + margin: 0; + padding: 1rem; + background-color: rgba(var(--callout-rgb), 0.5); + border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border-radius: var(--border-radius); +} + +.code { + font-weight: 700; + font-family: var(--font-mono); +} + +.center { + display: flex; + justify-content: center; + align-items: center; + position: relative; + flex-wrap: wrap; + padding: 3rem; + gap: 20px 50px; +} + +.center > div { + position: relative; +} + +.center::before { + background: var(--secondary-glow); + border-radius: 50%; + width: 480px; + height: 360px; + margin-left: -400px; + pointer-events: none; +} + +.center::after { + background: var(--primary-glow); + width: 240px; + height: 180px; + z-index: -1; +} + +.center::before, +.center::after { + content: ""; + left: 50%; + position: absolute; + filter: blur(45px); + transform: translateZ(0); +} + +.prefs { + padding-bottom: 4rem; +} + +.prefs select { + width: 85px; + float: right; + margin-left: 20px; + opacity: 0.3; +} + +select.active, +select.light { + opacity: 1; +} + +.logo { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-left: 16px; + transform: translateZ(0); + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0px 2px 8px -1px #0000001a; + padding: 2px; +} +.logo p { + background: var(--bg-color); +} +.logo::before, +.logo::after { + content: " "; + position: absolute; + z-index: -1; +} + +/* Conic Gradient Animation */ +.logo::before { + animation: 3s rotate infinite linear; + width: 800%; + height: 800%; + background: var(--tile-border); +} + +/* Inner Square */ +.logo::after { + inset: 0; + padding: 1px; + border-radius: var(--border-radius); + background: linear-gradient(to bottom right, rgba(var(--tile-start-rgb), 1), rgba(var(--tile-end-rgb), 1)); + background-clip: content-box; +} + +/* Mobile and Tablet */ +@media (max-width: 800px) { + .center { + padding: 4rem; + } + .description { + padding: 30px; + padding-right: 100px; + } +} + +@media (prefers-color-scheme: dark) { + select.dark { + opacity: 1; + } + select.light { + opacity: 0.3; + } +} + +@keyframes rotate { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} diff --git a/packages/shared-ui/src/root-layout.tsx b/packages/shared-ui/src/root-layout.tsx new file mode 100644 index 00000000..3ae32675 --- /dev/null +++ b/packages/shared-ui/src/root-layout.tsx @@ -0,0 +1,44 @@ +import "./globals.css"; +import "nextjs-themes/src/styles.css"; +import { ColorSwitch, ThemeSwitcher, ThemeSwitcherProps } from "nextjs-themes"; +import { ForkMe } from "@mayank1513/fork-me/server/index.js"; // import directory not supported in remix +import type { HTMLProps } from "react"; +import type { PageNavigatorCardProps } from "./cards/page-navigator-card"; +import styles from "./root-layout.module.css"; +import { ThemeController } from "./theme-controller/theme-controller"; +import { Cards } from "./cards"; +import { Description } from "./root/description"; +import { Hero } from "./root/hero"; +import { Footer } from "./root/footer"; + +export type SharedRootLayoutProps = HTMLProps & PageNavigatorCardProps & ThemeSwitcherProps; + +export function SharedRootLayout({ + children, + className = "", + LinkElement, + forcedColorScheme, + forcedTheme, + targetSelector, + ...props +}: SharedRootLayoutProps) { + return ( + <> + +
+ + {children} + + + + +
+