@omnitron-dev/prism 0.1.3 → 0.3.0

package/dist/components/field/field-time-picker.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Field.TimePicker Component
+ *
+ * React Hook Form integrated time picker using MUI X DatePickers.
+ * Provides a professional time selection experience with dayjs integration.
+ *
+ * @module components/field
+ */
+import type { ReactNode } from 'react';
+import type { TextFieldProps } from '@mui/material/TextField';
+import type { Dayjs } from 'dayjs';
+/**
+ * Props for Field.TimePicker component.
+ */
+export interface FieldTimePickerProps {
+    /** Field name in the form */
+    name: string;
+    /** Field label */
+    label?: ReactNode;
+    /** Helper text shown below the field */
+    helperText?: ReactNode;
+    /** TextField props for customization */
+    textFieldProps?: Partial<TextFieldProps>;
+    /** Disable the field */
+    disabled?: boolean;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Minutes step for time selection */
+    minutesStep?: number;
+    /** Use 12-hour format with AM/PM */
+    ampm?: boolean;
+    /** Minimum selectable time */
+    minTime?: Dayjs;
+    /** Maximum selectable time */
+    maxTime?: Dayjs;
+    /** Time views to display */
+    views?: Array<'hours' | 'minutes' | 'seconds'>;
+    /** Open picker to specific view */
+    openTo?: 'hours' | 'minutes' | 'seconds';
+    /** Format for display */
+    format?: string;
+}
+/**
+ * Field.TimePicker - Time picker with React Hook Form integration.
+ *
+ * Uses @mui/x-date-pickers TimePicker for a professional time selection experience.
+ * Automatically normalizes various date/time value types to Dayjs.
+ *
+ * @example
+ * ```tsx
+ * <FormProvider {...methods}>
+ *   <Field.TimePicker
+ *     name="startTime"
+ *     label="Start Time"
+ *   />
+ *   <Field.TimePicker
+ *     name="endTime"
+ *     label="End Time"
+ *     ampm={false}
+ *     minutesStep={15}
+ *   />
+ * </FormProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom text field props
+ * <Field.TimePicker
+ *   name="meetingTime"
+ *   label="Meeting Time"
+ *   textFieldProps={{
+ *     variant: 'filled',
+ *     size: 'small',
+ *   }}
+ * />
+ * ```
+ */
+export declare function FieldTimePicker({ name, label, helperText, textFieldProps, disabled, readOnly, minutesStep, ampm, minTime, maxTime, views, openTo, format, }: FieldTimePickerProps): ReactNode;
+//# sourceMappingURL=field-time-picker.d.ts.map

package/dist/components/field/field-time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-time-picker.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAWnC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC;IAC/C,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,UAAU,EACV,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,OAAO,EACP,KAAK,EACL,MAAM,EACN,MAAM,GACP,EAAE,oBAAoB,GAAG,SAAS,CAwClC"}

package/dist/components/field/field-upload.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Field.Upload Component Suite
+ *
+ * React Hook Form integrated file upload components using react-dropzone.
+ * Includes Upload, UploadBox, and UploadAvatar variants.
+ *
+ * @module components/field
+ */
+import type { ReactNode } from 'react';
+import type { DropzoneOptions } from 'react-dropzone';
+import type { BoxProps } from '@mui/material/Box';
+import type { SxProps, Theme } from '@mui/material/styles';
+/** File value can be File object or URL string */
+export type FileValue = File | string;
+/** Single or multiple file values */
+export type UploadValue = FileValue | FileValue[] | null;
+/**
+ * Base props shared by all upload variants
+ */
+export interface UploadBaseProps extends Omit<DropzoneOptions, 'onDrop'> {
+    /** Field name in the form */
+    name: string;
+    /** Error state */
+    error?: boolean;
+    /** Disable upload */
+    disabled?: boolean;
+    /** Helper text shown below */
+    helperText?: ReactNode;
+    /** Custom placeholder content */
+    placeholder?: ReactNode;
+    /** Custom styles */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Props for Field.Upload component
+ */
+export interface FieldUploadProps extends UploadBaseProps {
+    /** Enable multiple file selection */
+    multiple?: boolean;
+    /** Show thumbnail previews */
+    thumbnail?: boolean;
+    /** Callback when files are removed */
+    onRemove?: (file: FileValue) => void;
+    /** Callback to remove all files */
+    onRemoveAll?: () => void;
+    /** Slot props for nested components */
+    slotProps?: {
+        wrapper?: Partial<BoxProps>;
+    };
+}
+/**
+ * Props for Field.UploadBox component
+ */
+export interface FieldUploadBoxProps extends UploadBaseProps {
+    /** Box size in pixels */
+    size?: number;
+}
+/**
+ * Props for Field.UploadAvatar component
+ */
+export interface FieldUploadAvatarProps extends UploadBaseProps {
+    /** Avatar size in pixels */
+    size?: number;
+}
+/**
+ * Field.Upload - File upload with drag & drop and React Hook Form integration.
+ *
+ * @example
+ * ```tsx
+ * <FormProvider {...methods}>
+ *   <Field.Upload
+ *     name="documents"
+ *     multiple
+ *     accept={{ 'application/pdf': ['.pdf'] }}
+ *     maxSize={5 * 1024 * 1024}
+ *   />
+ * </FormProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With thumbnail previews
+ * <Field.Upload
+ *   name="images"
+ *   multiple
+ *   thumbnail
+ *   accept={{ 'image/*': [] }}
+ *   onRemove={(file) => console.log('Removed:', file)}
+ * />
+ * ```
+ */
+export declare function FieldUpload({ name, multiple, thumbnail, disabled, helperText, placeholder, onRemove, onRemoveAll, slotProps, sx, ...dropzoneOptions }: FieldUploadProps): ReactNode;
+/**
+ * Field.UploadBox - Compact square upload box for minimal UI.
+ *
+ * @example
+ * ```tsx
+ * <Field.UploadBox
+ *   name="thumbnail"
+ *   size={80}
+ *   accept={{ 'image/*': [] }}
+ * />
+ * ```
+ */
+export declare function FieldUploadBox({ name, size, disabled, helperText, sx, ...dropzoneOptions }: FieldUploadBoxProps): ReactNode;
+/**
+ * Field.UploadAvatar - Circular avatar upload with preview.
+ *
+ * @example
+ * ```tsx
+ * <Field.UploadAvatar
+ *   name="avatar"
+ *   size={120}
+ *   accept={{ 'image/*': [] }}
+ *   maxSize={3 * 1024 * 1024}
+ * />
+ * ```
+ */
+export declare function FieldUploadAvatar({ name, size, disabled, helperText, sx, ...dropzoneOptions }: FieldUploadAvatarProps): ReactNode;
+//# sourceMappingURL=field-upload.d.ts.map

package/dist/components/field/field-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-upload.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-upload.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,gBAAgB,CAAC;AAQrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAM3D,kDAAkD;AAClD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC;AAEtC,qCAAqC;AACrC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,EAAE,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACtE,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iCAAiC;IACjC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oBAAoB;IACpB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,uCAAuC;IACvC,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;KAC7B,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,eAAe;IAC7D,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAuWD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAgB,EAChB,SAAiB,EACjB,QAAQ,EACR,UAAU,EACV,WAAW,EACX,QAAQ,EACR,WAAW,EACX,SAAS,EACT,EAAE,EACF,GAAG,eAAe,EACnB,EAAE,gBAAgB,GAAG,SAAS,CA2B9B;AAqGD;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAS,EACT,QAAQ,EACR,UAAU,EACV,EAAE,EACF,GAAG,eAAe,EACnB,EAAE,mBAAmB,GAAG,SAAS,CAsBjC;AAsHD;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,IAAU,EACV,QAAQ,EACR,UAAU,EACV,EAAE,EACF,GAAG,eAAe,EACnB,EAAE,sBAAsB,GAAG,SAAS,CAsBpC"}

package/dist/components/field/index.d.ts

@@ -0,0 +1,149 @@
+/**
+ * Field Namespace
+ *
+ * React Hook Form integrated form fields organized under a single namespace.
+ * Provides a clean, consistent API for form building.
+ *
+ * @example
+ * ```tsx
+ * import { Field } from '@omnitron-dev/prism';
+ *
+ * function ProfileForm() {
+ *   const methods = useForm<ProfileData>();
+ *
+ *   return (
+ *     <FormProvider {...methods}>
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <Field.Text name="name" label="Full Name" />
+ *         <Field.Text name="email" label="Email" type="email" />
+ *         <Field.Select name="country" label="Country" options={countries} />
+ *         <Field.Number name="age" label="Age" min={0} max={150} />
+ *         <Field.Checkbox name="terms" label="I agree to terms" />
+ *         <Field.Switch name="newsletter" label="Subscribe" />
+ *         <Field.Phone name="phone" label="Phone" defaultCountry="US" />
+ *         <Field.Upload name="avatar" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @module components/field
+ */
+import { FieldText } from './field-text.js';
+import { FieldSelect } from './field-select.js';
+import { FieldCheckbox } from './field-checkbox.js';
+import { FieldSwitch } from './field-switch.js';
+import { FieldNumber } from './field-number.js';
+import { FieldRadio } from './field-radio.js';
+import { FieldAutocomplete } from './field-autocomplete.js';
+import { FieldMultiSelect } from './field-multi-select.js';
+import { FieldRating } from './field-rating.js';
+import { FieldSlider } from './field-slider.js';
+import { FieldDatePicker } from './field-date-picker.js';
+import { FieldTimePicker } from './field-time-picker.js';
+import { FieldDateTimePicker } from './field-datetime-picker.js';
+import { FieldMultiCheckbox } from './field-multi-checkbox.js';
+import { FieldMultiSwitch } from './field-multi-switch.js';
+import { FieldCode } from './field-code.js';
+import { FieldUpload, FieldUploadBox, FieldUploadAvatar } from './field-upload.js';
+import { FieldPhone } from './field-phone.js';
+import { FieldCountrySelect } from './field-country-select.js';
+import { FieldEditor, FieldCustomEditor } from './field-editor.js';
+export type { FieldTextProps } from './field-text.js';
+export type { FieldSelectProps } from './field-select.js';
+export type { FieldCheckboxProps } from './field-checkbox.js';
+export type { FieldSwitchProps } from './field-switch.js';
+export type { FieldNumberProps } from './field-number.js';
+export type { FieldRadioProps, RadioOption } from './field-radio.js';
+export type { FieldAutocompleteProps, AutocompleteOption } from './field-autocomplete.js';
+export type { FieldMultiSelectProps, MultiSelectOption } from './field-multi-select.js';
+export type { FieldRatingProps } from './field-rating.js';
+export type { FieldSliderProps } from './field-slider.js';
+export type { FieldDatePickerProps } from './field-date-picker.js';
+export type { FieldTimePickerProps } from './field-time-picker.js';
+export type { FieldDateTimePickerProps } from './field-datetime-picker.js';
+export type { FieldMultiCheckboxProps, MultiCheckboxOption } from './field-multi-checkbox.js';
+export type { FieldMultiSwitchProps, MultiSwitchOption } from './field-multi-switch.js';
+export type { FieldCodeProps } from './field-code.js';
+export type { FieldUploadProps, FieldUploadBoxProps, FieldUploadAvatarProps, FileValue, UploadValue, } from './field-upload.js';
+export type { FieldPhoneProps, CountryData } from './field-phone.js';
+export type { FieldCountrySelectProps, Country } from './field-country-select.js';
+export type { FieldEditorProps, FieldCustomEditorProps, EditorRenderProps, EditorToolbarConfig, } from './field-editor.js';
+/**
+ * Field namespace - React Hook Form integrated form fields.
+ *
+ * Available fields:
+ * - Field.Text - Text input (text, email, password, etc.)
+ * - Field.Select - Dropdown select
+ * - Field.Checkbox - Checkbox input
+ * - Field.Switch - Toggle switch
+ * - Field.Number - Numeric input with validation
+ * - Field.Radio - Radio button group
+ * - Field.Autocomplete - Autocomplete with search
+ * - Field.MultiSelect - Multiple selection with chips
+ * - Field.Rating - Star rating
+ * - Field.Slider - Range slider
+ * - Field.DatePicker - Date picker (MUI X)
+ * - Field.TimePicker - Time picker (MUI X)
+ * - Field.DateTimePicker - Combined date-time picker (MUI X)
+ * - Field.MultiCheckbox - Multiple checkbox group
+ * - Field.MultiSwitch - Multiple switch group
+ * - Field.Code - OTP/PIN code input
+ * - Field.Upload - File upload with dropzone
+ * - Field.UploadBox - Compact file upload box
+ * - Field.UploadAvatar - Circular avatar upload
+ * - Field.Phone - International phone input
+ * - Field.Editor - Rich text editor (textarea fallback or custom)
+ * - Field.CustomEditor - Headless editor with render prop
+ */
+export declare const Field: {
+    /** Text input field */
+    readonly Text: typeof FieldText;
+    /** Select dropdown field */
+    readonly Select: typeof FieldSelect;
+    /** Checkbox field */
+    readonly Checkbox: typeof FieldCheckbox;
+    /** Switch toggle field */
+    readonly Switch: typeof FieldSwitch;
+    /** Number input field */
+    readonly Number: typeof FieldNumber;
+    /** Radio button group field */
+    readonly Radio: typeof FieldRadio;
+    /** Autocomplete with search field */
+    readonly Autocomplete: typeof FieldAutocomplete;
+    /** Multiple selection with chips field */
+    readonly MultiSelect: typeof FieldMultiSelect;
+    /** Star rating field */
+    readonly Rating: typeof FieldRating;
+    /** Range slider field */
+    readonly Slider: typeof FieldSlider;
+    /** Date picker field (MUI X) */
+    readonly DatePicker: typeof FieldDatePicker;
+    /** Time picker field (MUI X) */
+    readonly TimePicker: typeof FieldTimePicker;
+    /** Combined date-time picker field (MUI X) */
+    readonly DateTimePicker: typeof FieldDateTimePicker;
+    /** Multiple checkbox group field */
+    readonly MultiCheckbox: typeof FieldMultiCheckbox;
+    /** Multiple switch group field */
+    readonly MultiSwitch: typeof FieldMultiSwitch;
+    /** OTP/PIN code input field */
+    readonly Code: typeof FieldCode;
+    /** File upload with dropzone */
+    readonly Upload: typeof FieldUpload;
+    /** Compact file upload box */
+    readonly UploadBox: typeof FieldUploadBox;
+    /** Circular avatar upload */
+    readonly UploadAvatar: typeof FieldUploadAvatar;
+    /** International phone input */
+    readonly Phone: typeof FieldPhone;
+    /** Country selector with flags */
+    readonly CountrySelect: typeof FieldCountrySelect;
+    /** Rich text editor (with textarea fallback or custom editor) */
+    readonly Editor: typeof FieldEditor;
+    /** Headless editor field with render prop */
+    readonly CustomEditor: typeof FieldCustomEditor;
+};
+export { FieldText, FieldSelect, FieldCheckbox, FieldSwitch, FieldNumber, FieldRadio, FieldAutocomplete, FieldMultiSelect, FieldRating, FieldSlider, FieldDatePicker, FieldTimePicker, FieldDateTimePicker, FieldMultiCheckbox, FieldMultiSwitch, FieldCode, FieldUpload, FieldUploadBox, FieldUploadAvatar, FieldPhone, FieldCountrySelect, FieldEditor, FieldCustomEditor, };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/field/index.ts"],"names":[],"mappings":"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"}

package/dist/components/image/image.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Image Component
+ *
+ * Enhanced image component with lazy loading, aspect ratio, and fallback support.
+ *
+ * @module components/image
+ */
+import type { ReactNode, ImgHTMLAttributes, Ref } from 'react';
+import type { SxProps, Theme, Breakpoint } from '@mui/material/styles';
+export type AspectRatio = '2/3' | '3/2' | '4/3' | '3/4' | '16/9' | '9/16' | '21/9' | '1/1' | `${number}/${number}`;
+export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'onError'> {
+    /** Image source URL */
+    src: string;
+    /** Alt text */
+    alt: string;
+    /** Aspect ratio (auto-sizes based on width) */
+    ratio?: AspectRatio | Partial<Record<Breakpoint, AspectRatio>>;
+    /** Fallback content on error */
+    fallback?: ReactNode;
+    /** Fallback image URL */
+    fallbackSrc?: string;
+    /** Disable lazy loading */
+    disableLazy?: boolean;
+    /** Object fit style */
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    /** Show loading placeholder */
+    placeholder?: boolean;
+    /** Overlay content */
+    overlay?: ReactNode;
+    /** Additional styles */
+    sx?: SxProps<Theme>;
+    /** Image styles */
+    imgSx?: SxProps<Theme>;
+    /** Called when image loads */
+    onLoad?: () => void;
+    /** Called when image fails to load */
+    onError?: () => void;
+}
+/**
+ * Image - Enhanced image component with lazy loading and fallback.
+ *
+ * @example
+ * ```tsx
+ * <Image
+ *   src="/avatar.jpg"
+ *   alt="User avatar"
+ *   ratio="1/1"
+ *   sx={{ width: 100, borderRadius: 1 }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With aspect ratio
+ * <Image
+ *   src="/banner.jpg"
+ *   alt="Banner"
+ *   ratio="16/9"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With fallback
+ * <Image
+ *   src="/product.jpg"
+ *   alt="Product"
+ *   fallback={<ProductPlaceholder />}
+ * />
+ * ```
+ */
+export declare function Image({ src, alt, ratio, fallback, fallbackSrc, disableLazy, objectFit, placeholder, overlay, sx, imgSx, onLoad, onError, ref, ...imgProps }: ImageProps & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/**
+ * ImageWithDefault - Image with default fallback icon.
+ */
+export declare function ImageWithDefault(props: ImageProps): ReactNode;
+//# sourceMappingURL=image.d.ts.map

package/dist/components/image/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMvE,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;AAEnH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IACtF,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,+CAA+C;IAC/C,KAAK,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC/D,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IACjE,+BAA+B;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wBAAwB;IACxB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,mBAAmB;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA+GD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,KAAK,CAAC,EAAC,GAAG,EACtB,GAAG,EACH,KAAK,EACL,QAAQ,EACR,WAAW,EACX,WAAmB,EACnB,SAAmB,EACnB,WAAkB,EAClB,OAAO,EACP,EAAE,EACF,KAAK,EACL,MAAM,EACN,OAAO,EACP,GAAG,EACH,GAAG,QAAQ,EACZ,EAAE,UAAU,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,+BA4D9C;AAiBD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,CAE7D"}

package/dist/components/image/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Image Component Exports
+ *
+ * @module components/image
+ */
+export { Image, ImageWithDefault, type ImageProps, type AspectRatio } from './image.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/image/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/index.css

@@ -0,0 +1,131 @@
+/* src/components/chart/styles.css */
+.apexcharts-canvas {
+  .apexcharts-tooltip {
+    min-width: 80px;
+    border-radius: 10px;
+    backdrop-filter: blur(6px);
+    color: var(--palette-text-primary);
+    box-shadow: var(--customShadows-dropdown);
+    background-color: rgba(var(--palette-background-defaultChannel) / 0.9);
+  }
+  .apexcharts-xaxistooltip {
+    border-radius: 10px;
+    border-color: transparent;
+    backdrop-filter: blur(6px);
+    color: var(--palette-text-primary);
+    box-shadow: var(--customShadows-dropdown);
+    background-color: rgba(var(--palette-background-defaultChannel) / 0.9);
+    &::before {
+      border-bottom-color: rgba(var(--palette-grey-500Channel) / 0.16);
+    }
+    &::after {
+      border-bottom-color: rgba(var(--palette-background-defaultChannel) / 0.9);
+    }
+  }
+  .apexcharts-tooltip-title {
+    font-weight: 700;
+    text-align: center;
+    color: var(--palette-text-secondary);
+    background-color: var(--palette-background-neutral);
+  }
+  .apexcharts-tooltip-series-group {
+    padding: 4px 12px;
+  }
+  .apexcharts-tooltip-marker {
+    margin-right: 8px;
+  }
+  .apexcharts-legend {
+    padding: 0;
+  }
+  .apexcharts-legend-marker {
+    margin-right: 6px;
+  }
+  .apexcharts-legend-text {
+    margin-left: 0;
+    padding-left: 0;
+    line-height: 18px;
+  }
+}
+
+/* src/components/content-renderer/code-highlight.css */
+pre code {
+  .hljs-comment {
+    color: #999;
+  }
+  .hljs-tag {
+    color: #b4b7b4;
+  }
+  .hljs-operator,
+  .hljs-punctuation,
+  .hljs-subst {
+    color: #ccc;
+  }
+  .hljs-operator {
+    opacity: 0.7;
+  }
+  .hljs-bullet,
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-template-variable,
+  .hljs-variable {
+    color: #f2777a;
+  }
+  .hljs-attr,
+  .hljs-link,
+  .hljs-literal,
+  .hljs-number,
+  .hljs-symbol,
+  .hljs-variable.constant_ {
+    color: #f99157;
+  }
+  .hljs-class .hljs-title,
+  .hljs-title,
+  .hljs-title.class_ {
+    color: #fc6;
+  }
+  .hljs-strong {
+    font-weight: 700;
+    color: #fc6;
+  }
+  .hljs-addition,
+  .hljs-code,
+  .hljs-string,
+  .hljs-title.class_.inherited__ {
+    color: #9c9;
+  }
+  .hljs-built_in,
+  .hljs-doctag,
+  .hljs-keyword.hljs-atrule,
+  .hljs-quote,
+  .hljs-regexp {
+    color: #6cc;
+  }
+  .hljs-attribute,
+  .hljs-function .hljs-title,
+  .hljs-section,
+  .hljs-title.function_,
+  .ruby .hljs-property {
+    color: #69c;
+  }
+  .diff .hljs-meta,
+  .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-type {
+    color: #c9c;
+  }
+  .hljs-emphasis {
+    color: #c9c;
+    font-style: italic;
+  }
+  .hljs-meta,
+  .hljs-meta .hljs-keyword,
+  .hljs-meta .hljs-string {
+    color: #a3685a;
+  }
+  .hljs-meta .hljs-keyword,
+  .hljs-meta-keyword {
+    font-weight: 700;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/chart/styles.css","../../src/components/content-renderer/code-highlight.css"],"sourcesContent":["/**\n * ApexCharts Custom Styles\n *\n * Overrides for ApexCharts to integrate with Prism theme.\n * Uses CSS variables from the theme for dynamic theming.\n */\n\n.apexcharts-canvas {\n  /**\n   * Tooltip\n   */\n  .apexcharts-tooltip {\n    min-width: 80px;\n    border-radius: 10px;\n    backdrop-filter: blur(6px);\n    color: var(--palette-text-primary);\n    box-shadow: var(--customShadows-dropdown);\n    background-color: rgba(var(--palette-background-defaultChannel) / 0.9);\n  }\n\n  .apexcharts-xaxistooltip {\n    border-radius: 10px;\n    border-color: transparent;\n    backdrop-filter: blur(6px);\n    color: var(--palette-text-primary);\n    box-shadow: var(--customShadows-dropdown);\n    background-color: rgba(var(--palette-background-defaultChannel) / 0.9);\n\n    &::before {\n      border-bottom-color: rgba(var(--palette-grey-500Channel) / 0.16);\n    }\n\n    &::after {\n      border-bottom-color: rgba(var(--palette-background-defaultChannel) / 0.9);\n    }\n  }\n\n  .apexcharts-tooltip-title {\n    font-weight: 700;\n    text-align: center;\n    color: var(--palette-text-secondary);\n    background-color: var(--palette-background-neutral);\n  }\n\n  /**\n   * Tooltip: group\n   */\n  .apexcharts-tooltip-series-group {\n    padding: 4px 12px;\n  }\n\n  .apexcharts-tooltip-marker {\n    margin-right: 8px;\n  }\n\n  /**\n   * Legend\n   */\n  .apexcharts-legend {\n    padding: 0;\n  }\n\n  .apexcharts-legend-marker {\n    margin-right: 6px;\n  }\n\n  .apexcharts-legend-text {\n    margin-left: 0;\n    padding-left: 0;\n    line-height: 18px;\n  }\n}\n","/**\n * Syntax highlighting theme for highlight.js\n * Based on Tomorrow Night Eighties palette — works great on dark backgrounds.\n */\npre code {\n  .hljs-comment {\n    color: #999;\n  }\n  .hljs-tag {\n    color: #b4b7b4;\n  }\n  .hljs-operator,\n  .hljs-punctuation,\n  .hljs-subst {\n    color: #ccc;\n  }\n  .hljs-operator {\n    opacity: 0.7;\n  }\n  .hljs-bullet,\n  .hljs-deletion,\n  .hljs-name,\n  .hljs-selector-tag,\n  .hljs-template-variable,\n  .hljs-variable {\n    color: #f2777a;\n  }\n  .hljs-attr,\n  .hljs-link,\n  .hljs-literal,\n  .hljs-number,\n  .hljs-symbol,\n  .hljs-variable.constant_ {\n    color: #f99157;\n  }\n  .hljs-class .hljs-title,\n  .hljs-title,\n  .hljs-title.class_ {\n    color: #fc6;\n  }\n  .hljs-strong {\n    font-weight: 700;\n    color: #fc6;\n  }\n  .hljs-addition,\n  .hljs-code,\n  .hljs-string,\n  .hljs-title.class_.inherited__ {\n    color: #9c9;\n  }\n  .hljs-built_in,\n  .hljs-doctag,\n  .hljs-keyword.hljs-atrule,\n  .hljs-quote,\n  .hljs-regexp {\n    color: #6cc;\n  }\n  .hljs-attribute,\n  .hljs-function .hljs-title,\n  .hljs-section,\n  .hljs-title.function_,\n  .ruby .hljs-property {\n    color: #69c;\n  }\n  .diff .hljs-meta,\n  .hljs-keyword,\n  .hljs-template-tag,\n  .hljs-type {\n    color: #c9c;\n  }\n  .hljs-emphasis {\n    color: #c9c;\n    font-style: italic;\n  }\n  .hljs-meta,\n  .hljs-meta .hljs-keyword,\n  .hljs-meta .hljs-string {\n    color: #a3685a;\n  }\n  .hljs-meta .hljs-keyword,\n  .hljs-meta-keyword {\n    font-weight: 700;\n  }\n}\n"],"mappings":";AAOA,CAAC;AAIC,GAAC;AACC,eAAW;AACX,mBAAe;AACf,qBAAiB,KAAK;AACtB,WAAO,IAAI;AACX,gBAAY,IAAI;AAChB,sBAAkB,KAAK,IAAI,qCAAqC,EAAE;AACpE;AAEA,GAAC;AACC,mBAAe;AACf,kBAAc;AACd,qBAAiB,KAAK;AACtB,WAAO,IAAI;AACX,gBAAY,IAAI;AAChB,sBAAkB,KAAK,IAAI,qCAAqC,EAAE;AAElE,KAAC;AACC,2BAAqB,KAAK,IAAI,2BAA2B,EAAE;AAC7D;AAEA,KAAC;AACC,2BAAqB,KAAK,IAAI,qCAAqC,EAAE;AACvE;AACF;AAEA,GAAC;AACC,iBAAa;AACb,gBAAY;AACZ,WAAO,IAAI;AACX,sBAAkB,IAAI;AACxB;AAKA,GAAC;AACC,aAAS,IAAI;AACf;AAEA,GAAC;AACC,kBAAc;AAChB;AAKA,GAAC;AACC,aAAS;AACX;AAEA,GAAC;AACC,kBAAc;AAChB;AAEA,GAAC;AACC,iBAAa;AACb,kBAAc;AACd,iBAAa;AACf;AACF;;;ACnEA,IAAI;AACF,GAAC;AACC,WAAO;AACT;AACA,GAAC;AACC,WAAO;AACT;AACA,GAAC;AAAA,EACD,CAAC;AAAA,EACD,CAAC;AACC,WAAO;AACT;AACA,GALC;AAMC,aAAS;AACX;AACA,GAAC;AAAA,EACD,CAAC;AAAA,EACD,CAAC;AAAA,EACD,CAAC;AAAA,EACD,CAAC;AAAA,EACD,CAAC;AACC,WAAO;AACT;AACA,GAAC;AAAA,EACD,CAAC;AAAA,EACD,CAAC;AAAA,EACD,CAAC;AAAA,EACD,CAAC;AAAA,EACD,CARC,aAQa,CAAC;AACb,WAAO;AACT;AACA,GAAC,WAAW,CAAC;AAAA,EACb,CADa;AAAA,EAEb,CAFa,UAEF,CAAC;AACV,WAAO;AACT;AACA,GAAC;AACC,iBAAa;AACb,WAAO;AACT;AACA,GAAC;AAAA,EACD,CAAC;AAAA,EACD,CAAC;AAAA,EACD,CAZa,UAYF,CAVC,MAUM,CAAC;AACjB,WAAO;AACT;AACA,GAAC;AAAA,EACD,CAAC;AAAA,EACD,CAAC,YAAY,CAAC;AAAA,EACd,CAAC;AAAA,EACD,CAAC;AACC,WAAO;AACT;AACA,GAAC;AAAA,EACD,CAAC,cAAc,CAvBF;AAAA,EAwBb,CAAC;AAAA,EACD,CAzBa,UAyBF,CAAC;AAAA,EACZ,CAAC,KAAK,CAAC;AACL,WAAO;AACT;AACA,GAAC,KAAK,CAAC;AAAA,EACP,CAbC;AAAA,EAcD,CAAC;AAAA,EACD,CAAC;AACC,WAAO;AACT;AACA,GAAC;AACC,WAAO;AACP,gBAAY;AACd;AACA,GAVO;AAAA,EAWP,CAXO,UAWI,CAvBV;AAAA,EAwBD,CAZO,UAYI,CA9BV;AA+BC,WAAO;AACT;AACA,GAfO,UAeI,CA3BV;AAAA,EA4BD,CAAC;AACC,iBAAa;AACf;AACF;","names":[]}