stackable-components 1.0.0

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { StackablesTheme } from '../types';
+export interface ThemeProviderProps {
+    theme?: StackablesTheme;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function ThemeProvider({ theme, className, children }: ThemeProviderProps): React.JSX.Element;
+export declare namespace ThemeProvider {
+    var defaultTheme: StackablesTheme;
+    var THEME_VAR_MAP: Record<keyof StackablesTheme, string>;
+}
+export default ThemeProvider;

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider } from './ThemeProvider';
+export { defaultTheme, THEME_VAR_MAP } from './themeConfig';

package/dist/theme/themeConfig.d.ts

@@ -0,0 +1,8 @@
+import type { StackablesTheme } from '../types';
+/**
+ * Maps theme object keys to CSS variable names.
+ * Used by ThemeProvider to inject design tokens.
+ */
+export declare const THEME_VAR_MAP: Record<keyof StackablesTheme, string>;
+/** Default theme values (match styles.css :root) */
+export declare const defaultTheme: StackablesTheme;

package/dist/types.d.ts

@@ -0,0 +1,60 @@
+export interface ContentModelField {
+    display_name: string;
+    uid: string;
+    data_type: string;
+    mandatory?: boolean;
+    multiple?: boolean;
+    display_type?: string;
+    enum?: {
+        advanced?: boolean;
+        choices: Array<{
+            value: string;
+            key?: string;
+            [k: string]: unknown;
+        }>;
+    };
+    schema?: ContentModelField[];
+    field_metadata?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export interface ContentModel {
+    title: string;
+    uid: string;
+    schema: ContentModelField[];
+    inbuilt_class?: boolean;
+    [key: string]: unknown;
+}
+export interface ComponentMetadata {
+    tags?: boolean;
+    id: string;
+    name: string;
+    category: string;
+    description: string;
+    component: string;
+    contentModel: ContentModel;
+}
+export interface StackablesTheme {
+    primary?: string;
+    primaryHover?: string;
+    primaryForeground?: string;
+    containerWidth?: string;
+    fontFamily?: string;
+    fontSizeBtn?: string;
+    fontWeightBtn?: string;
+    fontWeightOutline?: string;
+    btnPaddingY?: string;
+    btnPaddingX?: string;
+    btnBorderRadius?: string;
+    btnFocusRing?: string;
+    linkBtnLineHeight?: string;
+    linkBtnArrowSize?: string;
+    linkBtnArrowSpacing?: string;
+}
+/** Contentstack color extension value: `{ hex: "#RRGGBB" }` or a plain CSS string. */
+export type StackableColorValue = string | {
+    hex?: unknown;
+    color?: unknown;
+    value?: unknown;
+    background?: unknown;
+    backgroundColor?: unknown;
+} | null | undefined;

package/dist/utils/index.d.ts

@@ -0,0 +1,10 @@
+import type { StackableColorValue } from '../types';
+/**
+ * Normalize Contentstack custom-field color JSON (color picker extension) or a plain CSS color string.
+ * Extensions typically persist `{ hex: "#RRGGBB" }`; delivery may also expose a string.
+ */
+export declare function resolveStackableColor(value: StackableColorValue): string;
+/** True when a color field resolves to a usable CSS color (filled button / swatch). */
+export declare function hasStackableColorFill(value: StackableColorValue): boolean;
+/** For dynamic hex + opacity: Tailwind cannot generate `text-[${hex}]/50` at build time (JIT only sees static strings). */
+export declare function hexToRgba(hex: string, alpha: number): string;

package/package.json

@@ -0,0 +1,62 @@
+{
+    "name": "stackable-components",
+    "version": "1.0.0",
+    "description": "Reusable React components for Contentstack projects",
+    "type": "module",
+    "main": "dist/index.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "rollup -c",
+        "dev": "rollup -c -w",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "@heroicons/react": "^2.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0",
+        "react-icons": "^5.0.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.23.9",
+        "@babel/preset-env": "^7.23.9",
+        "@babel/preset-react": "^7.23.3",
+        "@heroicons/react": "^2.2.0",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^25.0.7",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^12.3.0",
+        "@tailwindcss/postcss": "^4.1.17",
+        "autoprefixer": "^10.4.22",
+        "postcss": "^8.5.6",
+        "postcss-import": "^16.1.1",
+        "react-icons": "^5.5.0",
+        "rollup": "^4.9.6",
+        "rollup-plugin-postcss": "^4.0.2",
+        "tailwindcss": "^4.1.17",
+        "typescript": "^6.0.3"
+    },
+    "keywords": [
+        "contentstack",
+        "components",
+        "react",
+        "tailwind",
+        "stackables"
+    ],
+    "author": "Contentstack Solutions",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Contentstack-Solutions/stackables-prototype.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "date-fns": "^4.4.0"
+    }
+}