@classytic/fluid 0.1.1

package/dist/layout.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+export { c as cn } from './utils-Cbsgs0XP.js';
+import 'clsx';
+
+type Background = "default" | "muted" | "primary" | "transparent";
+type Padding = "none" | "sm" | "md" | "lg" | "xl";
+interface SectionProps {
+    id?: string;
+    children: ReactNode;
+    className?: string;
+    background?: Background;
+    padding?: Padding;
+}
+declare function Section({ id, children, className, background, padding, }: SectionProps): react_jsx_runtime.JSX.Element;
+
+type MaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full";
+interface ContainerProps {
+    children: ReactNode;
+    className?: string;
+    maxWidth?: MaxWidth;
+}
+declare function Container({ children, className, maxWidth, }: ContainerProps): react_jsx_runtime.JSX.Element;
+
+export { Container, type ContainerProps, Section, type SectionProps };

package/dist/layout.js

@@ -0,0 +1,62 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var backgrounds = {
+  default: "bg-background",
+  muted: "bg-muted",
+  primary: "bg-primary text-primary-foreground",
+  transparent: "bg-transparent"
+};
+var paddings = {
+  none: "",
+  sm: "py-8 md:py-12",
+  md: "py-12 md:py-16",
+  lg: "py-16 md:py-24",
+  xl: "py-24 md:py-32"
+};
+function Section({
+  id,
+  children,
+  className,
+  background = "default",
+  padding = "sm"
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id,
+      className: cn(backgrounds[background], paddings[padding], className),
+      children
+    }
+  );
+}
+var maxWidthClasses = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  full: "max-w-full"
+};
+function Container({
+  children,
+  className,
+  maxWidth = "7xl"
+}) {
+  const isFullWidth = maxWidth === "full";
+  const baseClass = isFullWidth ? "w-full px-4 sm:px-6 lg:px-10" : "mx-auto px-4 sm:px-6 lg:px-8";
+  return /* @__PURE__ */ jsx("div", { className: cn(baseClass, !isFullWidth && maxWidthClasses[maxWidth], className), children });
+}
+
+export { Container, Section, cn };
+//# sourceMappingURL=layout.js.map
+//# sourceMappingURL=layout.js.map

package/dist/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts","../src/layout/section.tsx","../src/layout/container.tsx"],"names":["jsx"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACSA,IAAM,WAAA,GAA0C;AAAA,EAC9C,OAAA,EAAS,eAAA;AAAA,EACT,KAAA,EAAO,UAAA;AAAA,EACP,OAAA,EAAS,oCAAA;AAAA,EACT,WAAA,EAAa;AACf,CAAA;AAEA,IAAM,QAAA,GAAoC;AAAA,EACxC,IAAA,EAAM,EAAA;AAAA,EACN,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,SAAS,OAAA,CAAQ;AAAA,EACtB,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA,GAAa,SAAA;AAAA,EACb,OAAA,GAAU;AACZ,CAAA,EAAiB;AACf,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA,EAAW,GAAG,WAAA,CAAY,UAAU,GAAG,QAAA,CAAS,OAAO,GAAG,SAAS,CAAA;AAAA,MAElE;AAAA;AAAA,GACH;AAEJ;ACjCA,IAAM,eAAA,GAA4C;AAAA,EAChD,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAEO,SAAS,SAAA,CAAU;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW;AACb,CAAA,EAAmB;AACjB,EAAA,MAAM,cAAc,QAAA,KAAa,MAAA;AACjC,EAAA,MAAM,SAAA,GAAY,cACd,8BAAA,GACA,8BAAA;AAEJ,EAAA,uBACEA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,CAAC,WAAA,IAAe,eAAA,CAAgB,QAAQ,CAAA,EAAG,SAAS,GAC/E,QAAA,EACH,CAAA;AAEJ","file":"layout.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","import { cn } from \"../utils\";\r\nimport type { ReactNode } from \"react\";\r\n\r\ntype Background = \"default\" | \"muted\" | \"primary\" | \"transparent\";\r\ntype Padding = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\r\n\r\nexport interface SectionProps {\r\n  id?: string;\r\n  children: ReactNode;\r\n  className?: string;\r\n  background?: Background;\r\n  padding?: Padding;\r\n}\r\n\r\nconst backgrounds: Record<Background, string> = {\r\n  default: \"bg-background\",\r\n  muted: \"bg-muted\",\r\n  primary: \"bg-primary text-primary-foreground\",\r\n  transparent: \"bg-transparent\",\r\n};\r\n\r\nconst paddings: Record<Padding, string> = {\r\n  none: \"\",\r\n  sm: \"py-8 md:py-12\",\r\n  md: \"py-12 md:py-16\",\r\n  lg: \"py-16 md:py-24\",\r\n  xl: \"py-24 md:py-32\",\r\n};\r\n\r\nexport function Section({\r\n  id,\r\n  children,\r\n  className,\r\n  background = \"default\",\r\n  padding = \"sm\",\r\n}: SectionProps) {\r\n  return (\r\n    <section\r\n      id={id}\r\n      className={cn(backgrounds[background], paddings[padding], className)}\r\n    >\r\n      {children}\r\n    </section>\r\n  );\r\n}\r\n","import { cn } from \"../utils\";\r\nimport type { ReactNode } from \"react\";\r\n\r\ntype MaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"full\";\r\n\r\nexport interface ContainerProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n  maxWidth?: MaxWidth;\r\n}\r\n\r\nconst maxWidthClasses: Record<MaxWidth, string> = {\r\n  sm: \"max-w-screen-sm\",\r\n  md: \"max-w-screen-md\",\r\n  lg: \"max-w-screen-lg\",\r\n  xl: \"max-w-screen-xl\",\r\n  \"2xl\": \"max-w-screen-2xl\",\r\n  \"4xl\": \"max-w-4xl\",\r\n  \"5xl\": \"max-w-5xl\",\r\n  \"6xl\": \"max-w-6xl\",\r\n  \"7xl\": \"max-w-7xl\",\r\n  full: \"max-w-full\",\r\n};\r\n\r\nexport function Container({\r\n  children,\r\n  className,\r\n  maxWidth = \"7xl\",\r\n}: ContainerProps) {\r\n  const isFullWidth = maxWidth === \"full\";\r\n  const baseClass = isFullWidth\r\n    ? \"w-full px-4 sm:px-6 lg:px-10\"\r\n    : \"mx-auto px-4 sm:px-6 lg:px-8\";\r\n\r\n  return (\r\n    <div className={cn(baseClass, !isFullWidth && maxWidthClasses[maxWidth], className)}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"]}

package/dist/utils-Cbsgs0XP.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn as c };

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@classytic/fluid",
+  "version": "0.1.1",
+  "type": "module",
+  "description": "Fluid UI - Custom components built on shadcn/ui and base ui by Classytic",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./layout": {
+      "types": "./dist/layout.d.ts",
+      "import": "./dist/layout.js"
+    },
+    "./dashboard": {
+      "types": "./dist/dashboard.d.ts",
+      "import": "./dist/dashboard.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "scripts": {
+    "build": "tsup && node scripts/add-use-client.js",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "lucide-react": ">=0.300.0",
+    "class-variance-authority": ">=0.7.0",
+    "clsx": ">=2.0.0",
+    "tailwind-merge": ">=2.0.0",
+    "@tanstack/react-table": ">=8.0.0",
+    "@radix-ui/react-slider": ">=1.0.0",
+    "next": ">=14.0.0",
+    "next-themes": ">=0.3.0",
+    "react-hook-form": ">=7.0.0",
+    "date-fns": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "@radix-ui/react-slider": {
+      "optional": true
+    },
+    "next-themes": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.7.0",
+    "rimraf": "^5.0.0",
+    "lucide-react": "^0.460.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0",
+    "@tanstack/react-table": "^8.21.0",
+    "@radix-ui/react-slider": "^1.3.0",
+    "next": "^15.0.0",
+    "next-themes": "^0.4.0",
+    "react-hook-form": "^7.54.0",
+    "date-fns": "^4.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/classytic/ui-kit.git"
+  },
+  "homepage": "https://github.com/classytic/ui-kit#readme",
+  "bugs": {
+    "url": "https://github.com/classytic/ui-kit/issues"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "shadcn",
+    "tailwind",
+    "fluid",
+    "base-ui",
+    "classytic"
+  ],
+  "author": "Classytic",
+  "license": "UNLICENSED",
+  "sideEffects": [
+    "*.css"
+  ]
+}

package/styles.css

@@ -0,0 +1,12 @@
+/**
+ * @classytic/fluid - Tailwind CSS Integration
+ *
+ * Import this file in your app's global CSS to ensure all fluid
+ * component classes are included in production builds.
+ *
+ * Usage (in app/globals.css or similar):
+ * @import "@classytic/fluid/styles.css";
+ */
+
+/* Scan fluid dist folder for Tailwind classes */
+@source "./dist";