@jameskabz/nextcraft-ui 0.6.7 → 0.6.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/craft-alert.d.cts +1 -1
- package/dist/components/craft-alert.d.ts +1 -1
- package/dist/components/craft-badge.d.cts +1 -1
- package/dist/components/craft-badge.d.ts +1 -1
- package/dist/components/craft-button.d.cts +1 -1
- package/dist/components/craft-button.d.ts +1 -1
- package/dist/components/craft-card.d.cts +1 -1
- package/dist/components/craft-card.d.ts +1 -1
- package/dist/components/craft-checkbox.d.cts +1 -1
- package/dist/components/craft-checkbox.d.ts +1 -1
- package/dist/components/craft-command-palette.d.cts +1 -1
- package/dist/components/craft-command-palette.d.ts +1 -1
- package/dist/components/craft-confirm-dialog.d.cts +1 -1
- package/dist/components/craft-confirm-dialog.d.ts +1 -1
- package/dist/components/craft-create-edit-drawer.d.cts +1 -1
- package/dist/components/craft-create-edit-drawer.d.ts +1 -1
- package/dist/components/craft-currency-input.d.cts +1 -1
- package/dist/components/craft-currency-input.d.ts +1 -1
- package/dist/components/craft-data-table.d.cts +1 -1
- package/dist/components/craft-data-table.d.ts +1 -1
- package/dist/components/craft-date-picker.d.cts +1 -1
- package/dist/components/craft-date-picker.d.ts +1 -1
- package/dist/components/craft-drawer.d.cts +1 -1
- package/dist/components/craft-drawer.d.ts +1 -1
- package/dist/components/craft-dropdown-menu.d.cts +1 -1
- package/dist/components/craft-dropdown-menu.d.ts +1 -1
- package/dist/components/craft-empty-state.d.cts +1 -1
- package/dist/components/craft-empty-state.d.ts +1 -1
- package/dist/components/craft-error-state.d.cts +1 -1
- package/dist/components/craft-error-state.d.ts +1 -1
- package/dist/components/craft-filter-bar.d.cts +1 -1
- package/dist/components/craft-filter-bar.d.ts +1 -1
- package/dist/components/craft-form-builder.d.cts +1 -1
- package/dist/components/craft-form-builder.d.ts +1 -1
- package/dist/components/craft-form-field.d.cts +1 -1
- package/dist/components/craft-form-field.d.ts +1 -1
- package/dist/components/craft-form.d.cts +1 -1
- package/dist/components/craft-form.d.ts +1 -1
- package/dist/components/craft-input.d.cts +1 -1
- package/dist/components/craft-input.d.ts +1 -1
- package/dist/components/craft-link.d.cts +1 -1
- package/dist/components/craft-link.d.ts +1 -1
- package/dist/components/craft-loading-state.d.cts +1 -1
- package/dist/components/craft-loading-state.d.ts +1 -1
- package/dist/components/craft-modal.d.cts +1 -1
- package/dist/components/craft-modal.d.ts +1 -1
- package/dist/components/craft-number-input.d.cts +1 -1
- package/dist/components/craft-number-input.d.ts +1 -1
- package/dist/components/craft-pagination.d.cts +1 -1
- package/dist/components/craft-pagination.d.ts +1 -1
- package/dist/components/craft-popover.d.cts +1 -1
- package/dist/components/craft-popover.d.ts +1 -1
- package/dist/components/craft-select.d.cts +1 -1
- package/dist/components/craft-select.d.ts +1 -1
- package/dist/components/craft-skeleton.d.cts +1 -1
- package/dist/components/craft-skeleton.d.ts +1 -1
- package/dist/components/craft-stat-card.d.cts +1 -1
- package/dist/components/craft-stat-card.d.ts +1 -1
- package/dist/components/craft-submit-button.d.cts +1 -1
- package/dist/components/craft-submit-button.d.ts +1 -1
- package/dist/components/craft-switch.d.cts +1 -1
- package/dist/components/craft-switch.d.ts +1 -1
- package/dist/components/craft-table-toolbar.d.cts +1 -1
- package/dist/components/craft-table-toolbar.d.ts +1 -1
- package/dist/components/craft-tabs.d.cts +1 -1
- package/dist/components/craft-tabs.d.ts +1 -1
- package/dist/components/craft-textarea.d.cts +1 -1
- package/dist/components/craft-textarea.d.ts +1 -1
- package/dist/components/craft-toast.d.cts +1 -1
- package/dist/components/craft-toast.d.ts +1 -1
- package/dist/components/craft-tooltip.d.cts +1 -1
- package/dist/components/craft-tooltip.d.ts +1 -1
- package/dist/components/glass-card.d.cts +1 -1
- package/dist/components/glass-card.d.ts +1 -1
- package/dist/components/theme-switcher.cjs +1 -1
- package/dist/components/theme-switcher.js +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/theme/theme-context.cjs +115 -0
- package/dist/theme/theme-context.cjs.map +1 -0
- package/dist/{theme-context-EVI9PfKv.d.cts → theme/theme-context.d.cts} +2 -1
- package/dist/{theme-context-EVI9PfKv.d.ts → theme/theme-context.d.ts} +2 -1
- package/dist/theme/theme-context.js +79 -0
- package/dist/theme/theme-context.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftAlertVariant = "info" | "success" | "warning" | "error";
|
|
6
6
|
type CraftAlertProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftAlertVariant = "info" | "success" | "warning" | "error";
|
|
6
6
|
type CraftAlertProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftBadgeVariant = "solid" | "soft" | "outline";
|
|
6
6
|
type CraftBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftBadgeVariant = "solid" | "soft" | "outline";
|
|
6
6
|
type CraftBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftButtonVariant = "solid" | "ghost" | "outline" | "gradient";
|
|
6
6
|
type CraftButtonSize = "sm" | "md" | "lg";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftButtonVariant = "solid" | "ghost" | "outline" | "gradient";
|
|
6
6
|
type CraftButtonSize = "sm" | "md" | "lg";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
type CraftCheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
type CraftCheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftConfirmDialogProps = {
|
|
6
6
|
open?: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { FieldValues, UseFormReturn } from 'react-hook-form';
|
|
4
|
-
import {
|
|
4
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
5
5
|
|
|
6
6
|
type CraftCreateEditDrawerProps<TValues extends FieldValues> = {
|
|
7
7
|
mode?: "create" | "edit";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { FieldValues, UseFormReturn } from 'react-hook-form';
|
|
4
|
-
import {
|
|
4
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
5
5
|
|
|
6
6
|
type CraftCreateEditDrawerProps<TValues extends FieldValues> = {
|
|
7
7
|
mode?: "create" | "edit";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
type CraftCurrencyInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
type CraftCurrencyInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftEmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
6
|
tone?: ThemeName;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftEmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
6
|
tone?: ThemeName;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftErrorStateProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
6
|
title?: React.ReactNode;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftErrorStateProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
6
|
title?: React.ReactNode;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftFilterBarProps = {
|
|
6
6
|
title?: React.ReactNode;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftFilterBarProps = {
|
|
6
6
|
title?: React.ReactNode;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { FieldValues, Path, RegisterOptions } from 'react-hook-form';
|
|
4
|
-
import {
|
|
4
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
5
5
|
import { CraftFormFieldType, CraftFormFieldOption } from './craft-form-field.cjs';
|
|
6
6
|
|
|
7
7
|
type CraftFormBuilderField<TValues extends FieldValues> = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { FieldValues, Path, RegisterOptions } from 'react-hook-form';
|
|
4
|
-
import {
|
|
4
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
5
5
|
import { CraftFormFieldType, CraftFormFieldOption } from './craft-form-field.js';
|
|
6
6
|
|
|
7
7
|
type CraftFormBuilderField<TValues extends FieldValues> = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { FieldValues, Path, RegisterOptions } from 'react-hook-form';
|
|
4
|
-
import {
|
|
4
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
5
5
|
|
|
6
6
|
type CraftFormFieldOption = {
|
|
7
7
|
label: React.ReactNode;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { FieldValues, Path, RegisterOptions } from 'react-hook-form';
|
|
4
|
-
import {
|
|
4
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
5
5
|
|
|
6
6
|
type CraftFormFieldOption = {
|
|
7
7
|
label: React.ReactNode;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { FieldValues, UseFormReturn } from 'react-hook-form';
|
|
4
|
-
import {
|
|
4
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
5
5
|
|
|
6
6
|
type CraftFormProps<TValues extends FieldValues> = {
|
|
7
7
|
form: UseFormReturn<TValues>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { FieldValues, UseFormReturn } from 'react-hook-form';
|
|
4
|
-
import {
|
|
4
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
5
5
|
|
|
6
6
|
type CraftFormProps<TValues extends FieldValues> = {
|
|
7
7
|
form: UseFormReturn<TValues>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { LinkProps } from 'next/link';
|
|
4
|
-
import {
|
|
4
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
5
5
|
|
|
6
6
|
type CraftLinkVariant = "default" | "muted" | "button" | "ghost";
|
|
7
7
|
type CraftLinkProps = LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { LinkProps } from 'next/link';
|
|
4
|
-
import {
|
|
4
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
5
5
|
|
|
6
6
|
type CraftLinkVariant = "default" | "muted" | "button" | "ghost";
|
|
7
7
|
type CraftLinkProps = LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftLoadingSize = "sm" | "md" | "lg";
|
|
6
6
|
type CraftLoadingStateProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftLoadingSize = "sm" | "md" | "lg";
|
|
6
6
|
type CraftLoadingStateProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type PopoverAlign = "start" | "center" | "end";
|
|
6
6
|
type CraftPopoverProps = {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type PopoverAlign = "start" | "center" | "end";
|
|
6
6
|
type CraftPopoverProps = {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftSkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
6
|
tone?: ThemeName;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftSkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
6
|
tone?: ThemeName;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftStatTrend = "up" | "down" | "neutral";
|
|
6
6
|
type CraftStatCardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftStatTrend = "up" | "down" | "neutral";
|
|
6
6
|
type CraftStatCardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftSubmitButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
6
6
|
tone?: ThemeName;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftSubmitButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
6
6
|
tone?: ThemeName;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
type CraftSwitchProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
type CraftSwitchProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftTableToolbarProps = {
|
|
6
6
|
title?: React.ReactNode;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftTableToolbarProps = {
|
|
6
6
|
title?: React.ReactNode;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
4
|
|
|
5
5
|
type CraftTooltipProps = {
|
|
6
6
|
content: React.ReactNode;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
4
|
|
|
5
5
|
type CraftTooltipProps = {
|
|
6
6
|
content: React.ReactNode;
|
|
@@ -24,7 +24,7 @@ __export(theme_switcher_exports, {
|
|
|
24
24
|
module.exports = __toCommonJS(theme_switcher_exports);
|
|
25
25
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
26
|
var import_cn = require("../utils/cn");
|
|
27
|
-
var import_theme_context = require("
|
|
27
|
+
var import_theme_context = require("../theme/theme-context");
|
|
28
28
|
const MODE_OPTIONS = ["system", "light", "dark"];
|
|
29
29
|
function ThemeSwitcher({ className, showLabels = true, ...props }) {
|
|
30
30
|
const { theme, mode, setTheme, setMode } = (0, import_theme_context.useTheme)();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from "../utils/cn";
|
|
4
|
-
import { THEME_NAMES, useTheme } from "
|
|
4
|
+
import { THEME_NAMES, useTheme } from "../theme/theme-context";
|
|
5
5
|
const MODE_OPTIONS = ["system", "light", "dark"];
|
|
6
6
|
function ThemeSwitcher({ className, showLabels = true, ...props }) {
|
|
7
7
|
const { theme, mode, setTheme, setMode } = useTheme();
|
package/dist/index.d.cts
CHANGED
|
@@ -47,7 +47,7 @@ export { AuthLayout, AuthLayoutProps } from './components/layout/auth-layout.cjs
|
|
|
47
47
|
export { Container, ContainerProps } from './components/layout/container.cjs';
|
|
48
48
|
export { Grid, GridProps } from './components/layout/grid.cjs';
|
|
49
49
|
export { ThemeSwitcher, ThemeSwitcherProps } from './components/theme-switcher.cjs';
|
|
50
|
-
export {
|
|
50
|
+
export { ThemeMode, ThemeName, ThemeProvider, useTheme } from './theme/theme-context.cjs';
|
|
51
51
|
import 'react/jsx-runtime';
|
|
52
52
|
import 'react';
|
|
53
53
|
import 'next/link';
|
package/dist/index.d.ts
CHANGED
|
@@ -47,7 +47,7 @@ export { AuthLayout, AuthLayoutProps } from './components/layout/auth-layout.js'
|
|
|
47
47
|
export { Container, ContainerProps } from './components/layout/container.js';
|
|
48
48
|
export { Grid, GridProps } from './components/layout/grid.js';
|
|
49
49
|
export { ThemeSwitcher, ThemeSwitcherProps } from './components/theme-switcher.js';
|
|
50
|
-
export {
|
|
50
|
+
export { ThemeMode, ThemeName, ThemeProvider, useTheme } from './theme/theme-context.js';
|
|
51
51
|
import 'react/jsx-runtime';
|
|
52
52
|
import 'react';
|
|
53
53
|
import 'next/link';
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var theme_context_exports = {};
|
|
31
|
+
__export(theme_context_exports, {
|
|
32
|
+
THEME_NAMES: () => THEME_NAMES,
|
|
33
|
+
ThemeProvider: () => ThemeProvider,
|
|
34
|
+
useTheme: () => useTheme
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(theme_context_exports);
|
|
37
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
|
+
var React = __toESM(require("react"), 1);
|
|
39
|
+
const THEME_NAMES = [
|
|
40
|
+
"aurora",
|
|
41
|
+
"ember",
|
|
42
|
+
"ocean",
|
|
43
|
+
"midnight",
|
|
44
|
+
"cosmic"
|
|
45
|
+
];
|
|
46
|
+
const ThemeContext = React.createContext(null);
|
|
47
|
+
const DEFAULT_THEME_KEY = "nextcraft-theme";
|
|
48
|
+
const DEFAULT_MODE_KEY = "nextcraft-mode";
|
|
49
|
+
function ThemeProvider({
|
|
50
|
+
children,
|
|
51
|
+
defaultTheme = "ocean",
|
|
52
|
+
defaultMode = "system",
|
|
53
|
+
storageKeyTheme = DEFAULT_THEME_KEY,
|
|
54
|
+
storageKeyMode = DEFAULT_MODE_KEY
|
|
55
|
+
}) {
|
|
56
|
+
const [theme, setTheme] = React.useState(defaultTheme);
|
|
57
|
+
const [mode, setMode] = React.useState(defaultMode);
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (typeof window === "undefined") return;
|
|
60
|
+
try {
|
|
61
|
+
const storedTheme = window.localStorage.getItem(storageKeyTheme);
|
|
62
|
+
const storedMode = window.localStorage.getItem(storageKeyMode);
|
|
63
|
+
if (storedTheme) setTheme(storedTheme);
|
|
64
|
+
if (storedMode) setMode(storedMode);
|
|
65
|
+
} catch {
|
|
66
|
+
}
|
|
67
|
+
}, [storageKeyTheme, storageKeyMode]);
|
|
68
|
+
React.useEffect(() => {
|
|
69
|
+
if (typeof window === "undefined") return;
|
|
70
|
+
try {
|
|
71
|
+
window.localStorage.setItem(storageKeyTheme, theme);
|
|
72
|
+
window.localStorage.setItem(storageKeyMode, mode);
|
|
73
|
+
} catch {
|
|
74
|
+
}
|
|
75
|
+
}, [theme, mode, storageKeyTheme, storageKeyMode]);
|
|
76
|
+
React.useEffect(() => {
|
|
77
|
+
if (typeof document === "undefined") return;
|
|
78
|
+
const root = document.documentElement;
|
|
79
|
+
root.dataset.ncTheme = theme;
|
|
80
|
+
if (mode !== "system") {
|
|
81
|
+
root.dataset.ncMode = mode;
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
85
|
+
const applySystem = () => {
|
|
86
|
+
root.dataset.ncMode = mediaQuery.matches ? "dark" : "light";
|
|
87
|
+
};
|
|
88
|
+
applySystem();
|
|
89
|
+
if (typeof mediaQuery.addEventListener === "function") {
|
|
90
|
+
mediaQuery.addEventListener("change", applySystem);
|
|
91
|
+
return () => mediaQuery.removeEventListener("change", applySystem);
|
|
92
|
+
}
|
|
93
|
+
mediaQuery.addListener(applySystem);
|
|
94
|
+
return () => mediaQuery.removeListener(applySystem);
|
|
95
|
+
}, [theme, mode]);
|
|
96
|
+
const value = React.useMemo(
|
|
97
|
+
() => ({ theme, mode, setTheme, setMode }),
|
|
98
|
+
[theme, mode]
|
|
99
|
+
);
|
|
100
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
|
|
101
|
+
}
|
|
102
|
+
function useTheme() {
|
|
103
|
+
const context = React.useContext(ThemeContext);
|
|
104
|
+
if (!context) {
|
|
105
|
+
throw new Error("useTheme must be used within ThemeProvider");
|
|
106
|
+
}
|
|
107
|
+
return context;
|
|
108
|
+
}
|
|
109
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
110
|
+
0 && (module.exports = {
|
|
111
|
+
THEME_NAMES,
|
|
112
|
+
ThemeProvider,
|
|
113
|
+
useTheme
|
|
114
|
+
});
|
|
115
|
+
//# sourceMappingURL=theme-context.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/theme-context.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nexport type ThemeName = \"aurora\" | \"ember\" | \"ocean\" | \"midnight\" | \"cosmic\";\nexport type ThemeMode = \"light\" | \"dark\" | \"system\";\n\nexport const THEME_NAMES: ThemeName[] = [\n \"aurora\",\n \"ember\",\n \"ocean\",\n \"midnight\",\n \"cosmic\",\n];\n\ntype ThemeContextValue = {\n theme: ThemeName;\n mode: ThemeMode;\n setTheme: (theme: ThemeName) => void;\n setMode: (mode: ThemeMode) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\ntype ThemeProviderProps = {\n children: React.ReactNode;\n defaultTheme?: ThemeName;\n defaultMode?: ThemeMode;\n storageKeyTheme?: string;\n storageKeyMode?: string;\n};\n\nconst DEFAULT_THEME_KEY = \"nextcraft-theme\";\nconst DEFAULT_MODE_KEY = \"nextcraft-mode\";\n\nexport function ThemeProvider({\n children,\n defaultTheme = \"ocean\",\n defaultMode = \"system\",\n storageKeyTheme = DEFAULT_THEME_KEY,\n storageKeyMode = DEFAULT_MODE_KEY,\n}: ThemeProviderProps) {\n const [theme, setTheme] = React.useState<ThemeName>(defaultTheme);\n const [mode, setMode] = React.useState<ThemeMode>(defaultMode);\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n try {\n const storedTheme = window.localStorage.getItem(storageKeyTheme) as ThemeName | null;\n const storedMode = window.localStorage.getItem(storageKeyMode) as ThemeMode | null;\n if (storedTheme) setTheme(storedTheme);\n if (storedMode) setMode(storedMode);\n } catch {\n // Ignore storage errors.\n }\n }, [storageKeyTheme, storageKeyMode]);\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n try {\n window.localStorage.setItem(storageKeyTheme, theme);\n window.localStorage.setItem(storageKeyMode, mode);\n } catch {\n // Ignore storage errors.\n }\n }, [theme, mode, storageKeyTheme, storageKeyMode]);\n\n React.useEffect(() => {\n if (typeof document === \"undefined\") return;\n const root = document.documentElement;\n root.dataset.ncTheme = theme;\n\n if (mode !== \"system\") {\n root.dataset.ncMode = mode;\n return;\n }\n\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const applySystem = () => {\n root.dataset.ncMode = mediaQuery.matches ? \"dark\" : \"light\";\n };\n\n applySystem();\n\n if (typeof mediaQuery.addEventListener === \"function\") {\n mediaQuery.addEventListener(\"change\", applySystem);\n return () => mediaQuery.removeEventListener(\"change\", applySystem);\n }\n\n mediaQuery.addListener(applySystem);\n return () => mediaQuery.removeListener(applySystem);\n }, [theme, mode]);\n\n const value = React.useMemo(\n () => ({ theme, mode, setTheme, setMode }),\n [theme, mode]\n );\n\n return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme() {\n const context = React.useContext(ThemeContext);\n if (!context) {\n throw new Error(\"useTheme must be used within ThemeProvider\");\n }\n return context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkGS;AAhGT,YAAuB;AAKhB,MAAM,cAA2B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AASA,MAAM,eAAe,MAAM,cAAwC,IAAI;AAUvE,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAElB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,iBAAiB;AACnB,GAAuB;AACrB,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAoB,YAAY;AAChE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAoB,WAAW;AAE7D,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,WAAW,YAAa;AACnC,QAAI;AACF,YAAM,cAAc,OAAO,aAAa,QAAQ,eAAe;AAC/D,YAAM,aAAa,OAAO,aAAa,QAAQ,cAAc;AAC7D,UAAI,YAAa,UAAS,WAAW;AACrC,UAAI,WAAY,SAAQ,UAAU;AAAA,IACpC,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAEpC,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,WAAW,YAAa;AACnC,QAAI;AACF,aAAO,aAAa,QAAQ,iBAAiB,KAAK;AAClD,aAAO,aAAa,QAAQ,gBAAgB,IAAI;AAAA,IAClD,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,OAAO,MAAM,iBAAiB,cAAc,CAAC;AAEjD,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,aAAa,YAAa;AACrC,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,UAAU;AAEvB,QAAI,SAAS,UAAU;AACrB,WAAK,QAAQ,SAAS;AACtB;AAAA,IACF;AAEA,UAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,UAAM,cAAc,MAAM;AACxB,WAAK,QAAQ,SAAS,WAAW,UAAU,SAAS;AAAA,IACtD;AAEA,gBAAY;AAEZ,QAAI,OAAO,WAAW,qBAAqB,YAAY;AACrD,iBAAW,iBAAiB,UAAU,WAAW;AACjD,aAAO,MAAM,WAAW,oBAAoB,UAAU,WAAW;AAAA,IACnE;AAEA,eAAW,YAAY,WAAW;AAClC,WAAO,MAAM,WAAW,eAAe,WAAW;AAAA,EACpD,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO,EAAE,OAAO,MAAM,UAAU,QAAQ;AAAA,IACxC,CAAC,OAAO,IAAI;AAAA,EACd;AAEA,SAAO,4CAAC,aAAa,UAAb,EAAsB,OAAe,UAAS;AACxD;AAEO,SAAS,WAAW;AACzB,QAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,4CAA4C;AAAA,EAC9D;AACA,SAAO;AACT;","names":[]}
|
|
@@ -3,6 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
|
|
4
4
|
type ThemeName = "aurora" | "ember" | "ocean" | "midnight" | "cosmic";
|
|
5
5
|
type ThemeMode = "light" | "dark" | "system";
|
|
6
|
+
declare const THEME_NAMES: ThemeName[];
|
|
6
7
|
type ThemeContextValue = {
|
|
7
8
|
theme: ThemeName;
|
|
8
9
|
mode: ThemeMode;
|
|
@@ -19,4 +20,4 @@ type ThemeProviderProps = {
|
|
|
19
20
|
declare function ThemeProvider({ children, defaultTheme, defaultMode, storageKeyTheme, storageKeyMode, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
20
21
|
declare function useTheme(): ThemeContextValue;
|
|
21
22
|
|
|
22
|
-
export { type ThemeMode
|
|
23
|
+
export { THEME_NAMES, type ThemeMode, type ThemeName, ThemeProvider, useTheme };
|
|
@@ -3,6 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
|
|
4
4
|
type ThemeName = "aurora" | "ember" | "ocean" | "midnight" | "cosmic";
|
|
5
5
|
type ThemeMode = "light" | "dark" | "system";
|
|
6
|
+
declare const THEME_NAMES: ThemeName[];
|
|
6
7
|
type ThemeContextValue = {
|
|
7
8
|
theme: ThemeName;
|
|
8
9
|
mode: ThemeMode;
|
|
@@ -19,4 +20,4 @@ type ThemeProviderProps = {
|
|
|
19
20
|
declare function ThemeProvider({ children, defaultTheme, defaultMode, storageKeyTheme, storageKeyMode, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
20
21
|
declare function useTheme(): ThemeContextValue;
|
|
21
22
|
|
|
22
|
-
export { type ThemeMode
|
|
23
|
+
export { THEME_NAMES, type ThemeMode, type ThemeName, ThemeProvider, useTheme };
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
const THEME_NAMES = [
|
|
5
|
+
"aurora",
|
|
6
|
+
"ember",
|
|
7
|
+
"ocean",
|
|
8
|
+
"midnight",
|
|
9
|
+
"cosmic"
|
|
10
|
+
];
|
|
11
|
+
const ThemeContext = React.createContext(null);
|
|
12
|
+
const DEFAULT_THEME_KEY = "nextcraft-theme";
|
|
13
|
+
const DEFAULT_MODE_KEY = "nextcraft-mode";
|
|
14
|
+
function ThemeProvider({
|
|
15
|
+
children,
|
|
16
|
+
defaultTheme = "ocean",
|
|
17
|
+
defaultMode = "system",
|
|
18
|
+
storageKeyTheme = DEFAULT_THEME_KEY,
|
|
19
|
+
storageKeyMode = DEFAULT_MODE_KEY
|
|
20
|
+
}) {
|
|
21
|
+
const [theme, setTheme] = React.useState(defaultTheme);
|
|
22
|
+
const [mode, setMode] = React.useState(defaultMode);
|
|
23
|
+
React.useEffect(() => {
|
|
24
|
+
if (typeof window === "undefined") return;
|
|
25
|
+
try {
|
|
26
|
+
const storedTheme = window.localStorage.getItem(storageKeyTheme);
|
|
27
|
+
const storedMode = window.localStorage.getItem(storageKeyMode);
|
|
28
|
+
if (storedTheme) setTheme(storedTheme);
|
|
29
|
+
if (storedMode) setMode(storedMode);
|
|
30
|
+
} catch {
|
|
31
|
+
}
|
|
32
|
+
}, [storageKeyTheme, storageKeyMode]);
|
|
33
|
+
React.useEffect(() => {
|
|
34
|
+
if (typeof window === "undefined") return;
|
|
35
|
+
try {
|
|
36
|
+
window.localStorage.setItem(storageKeyTheme, theme);
|
|
37
|
+
window.localStorage.setItem(storageKeyMode, mode);
|
|
38
|
+
} catch {
|
|
39
|
+
}
|
|
40
|
+
}, [theme, mode, storageKeyTheme, storageKeyMode]);
|
|
41
|
+
React.useEffect(() => {
|
|
42
|
+
if (typeof document === "undefined") return;
|
|
43
|
+
const root = document.documentElement;
|
|
44
|
+
root.dataset.ncTheme = theme;
|
|
45
|
+
if (mode !== "system") {
|
|
46
|
+
root.dataset.ncMode = mode;
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
50
|
+
const applySystem = () => {
|
|
51
|
+
root.dataset.ncMode = mediaQuery.matches ? "dark" : "light";
|
|
52
|
+
};
|
|
53
|
+
applySystem();
|
|
54
|
+
if (typeof mediaQuery.addEventListener === "function") {
|
|
55
|
+
mediaQuery.addEventListener("change", applySystem);
|
|
56
|
+
return () => mediaQuery.removeEventListener("change", applySystem);
|
|
57
|
+
}
|
|
58
|
+
mediaQuery.addListener(applySystem);
|
|
59
|
+
return () => mediaQuery.removeListener(applySystem);
|
|
60
|
+
}, [theme, mode]);
|
|
61
|
+
const value = React.useMemo(
|
|
62
|
+
() => ({ theme, mode, setTheme, setMode }),
|
|
63
|
+
[theme, mode]
|
|
64
|
+
);
|
|
65
|
+
return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
|
|
66
|
+
}
|
|
67
|
+
function useTheme() {
|
|
68
|
+
const context = React.useContext(ThemeContext);
|
|
69
|
+
if (!context) {
|
|
70
|
+
throw new Error("useTheme must be used within ThemeProvider");
|
|
71
|
+
}
|
|
72
|
+
return context;
|
|
73
|
+
}
|
|
74
|
+
export {
|
|
75
|
+
THEME_NAMES,
|
|
76
|
+
ThemeProvider,
|
|
77
|
+
useTheme
|
|
78
|
+
};
|
|
79
|
+
//# sourceMappingURL=theme-context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/theme-context.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nexport type ThemeName = \"aurora\" | \"ember\" | \"ocean\" | \"midnight\" | \"cosmic\";\nexport type ThemeMode = \"light\" | \"dark\" | \"system\";\n\nexport const THEME_NAMES: ThemeName[] = [\n \"aurora\",\n \"ember\",\n \"ocean\",\n \"midnight\",\n \"cosmic\",\n];\n\ntype ThemeContextValue = {\n theme: ThemeName;\n mode: ThemeMode;\n setTheme: (theme: ThemeName) => void;\n setMode: (mode: ThemeMode) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\ntype ThemeProviderProps = {\n children: React.ReactNode;\n defaultTheme?: ThemeName;\n defaultMode?: ThemeMode;\n storageKeyTheme?: string;\n storageKeyMode?: string;\n};\n\nconst DEFAULT_THEME_KEY = \"nextcraft-theme\";\nconst DEFAULT_MODE_KEY = \"nextcraft-mode\";\n\nexport function ThemeProvider({\n children,\n defaultTheme = \"ocean\",\n defaultMode = \"system\",\n storageKeyTheme = DEFAULT_THEME_KEY,\n storageKeyMode = DEFAULT_MODE_KEY,\n}: ThemeProviderProps) {\n const [theme, setTheme] = React.useState<ThemeName>(defaultTheme);\n const [mode, setMode] = React.useState<ThemeMode>(defaultMode);\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n try {\n const storedTheme = window.localStorage.getItem(storageKeyTheme) as ThemeName | null;\n const storedMode = window.localStorage.getItem(storageKeyMode) as ThemeMode | null;\n if (storedTheme) setTheme(storedTheme);\n if (storedMode) setMode(storedMode);\n } catch {\n // Ignore storage errors.\n }\n }, [storageKeyTheme, storageKeyMode]);\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n try {\n window.localStorage.setItem(storageKeyTheme, theme);\n window.localStorage.setItem(storageKeyMode, mode);\n } catch {\n // Ignore storage errors.\n }\n }, [theme, mode, storageKeyTheme, storageKeyMode]);\n\n React.useEffect(() => {\n if (typeof document === \"undefined\") return;\n const root = document.documentElement;\n root.dataset.ncTheme = theme;\n\n if (mode !== \"system\") {\n root.dataset.ncMode = mode;\n return;\n }\n\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const applySystem = () => {\n root.dataset.ncMode = mediaQuery.matches ? \"dark\" : \"light\";\n };\n\n applySystem();\n\n if (typeof mediaQuery.addEventListener === \"function\") {\n mediaQuery.addEventListener(\"change\", applySystem);\n return () => mediaQuery.removeEventListener(\"change\", applySystem);\n }\n\n mediaQuery.addListener(applySystem);\n return () => mediaQuery.removeListener(applySystem);\n }, [theme, mode]);\n\n const value = React.useMemo(\n () => ({ theme, mode, setTheme, setMode }),\n [theme, mode]\n );\n\n return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme() {\n const context = React.useContext(ThemeContext);\n if (!context) {\n throw new Error(\"useTheme must be used within ThemeProvider\");\n }\n return context;\n}\n"],"mappings":";AAkGS;AAhGT,YAAY,WAAW;AAKhB,MAAM,cAA2B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AASA,MAAM,eAAe,MAAM,cAAwC,IAAI;AAUvE,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAElB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,iBAAiB;AACnB,GAAuB;AACrB,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAoB,YAAY;AAChE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAoB,WAAW;AAE7D,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,WAAW,YAAa;AACnC,QAAI;AACF,YAAM,cAAc,OAAO,aAAa,QAAQ,eAAe;AAC/D,YAAM,aAAa,OAAO,aAAa,QAAQ,cAAc;AAC7D,UAAI,YAAa,UAAS,WAAW;AACrC,UAAI,WAAY,SAAQ,UAAU;AAAA,IACpC,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAEpC,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,WAAW,YAAa;AACnC,QAAI;AACF,aAAO,aAAa,QAAQ,iBAAiB,KAAK;AAClD,aAAO,aAAa,QAAQ,gBAAgB,IAAI;AAAA,IAClD,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,OAAO,MAAM,iBAAiB,cAAc,CAAC;AAEjD,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,aAAa,YAAa;AACrC,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,UAAU;AAEvB,QAAI,SAAS,UAAU;AACrB,WAAK,QAAQ,SAAS;AACtB;AAAA,IACF;AAEA,UAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,UAAM,cAAc,MAAM;AACxB,WAAK,QAAQ,SAAS,WAAW,UAAU,SAAS;AAAA,IACtD;AAEA,gBAAY;AAEZ,QAAI,OAAO,WAAW,qBAAqB,YAAY;AACrD,iBAAW,iBAAiB,UAAU,WAAW;AACjD,aAAO,MAAM,WAAW,oBAAoB,UAAU,WAAW;AAAA,IACnE;AAEA,eAAW,YAAY,WAAW;AAClC,WAAO,MAAM,WAAW,eAAe,WAAW;AAAA,EACpD,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO,EAAE,OAAO,MAAM,UAAU,QAAQ;AAAA,IACxC,CAAC,OAAO,IAAI;AAAA,EACd;AAEA,SAAO,oBAAC,aAAa,UAAb,EAAsB,OAAe,UAAS;AACxD;AAEO,SAAS,WAAW;AACzB,QAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,4CAA4C;AAAA,EAC9D;AACA,SAAO;AACT;","names":[]}
|