mav-expandable 1.0.0

package/README.md

@@ -0,0 +1,2 @@
+//animation on chevron (checkbox)
+//u can use hook inside another component calling this expandable

package/dist/index.cjs

@@ -0,0 +1,71 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Expandable: () => Expandable
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/expandable.tsx
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ExpandableContext = (0, import_react.createContext)(null);
+function useExpandable() {
+  const value = (0, import_react.useContext)(ExpandableContext);
+  if (!value)
+    throw new Error("Expandable context is used outside it's provider!");
+  return value;
+}
+function Expandable({ children, expanded = false }) {
+  const [isExpanded, setIsExpanded] = (0, import_react.useState)(expanded);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpandableContext.Provider, { value: { isExpanded, onExpand: setIsExpanded }, children });
+}
+function ExpandableContent({
+  children,
+  expand,
+  ...rest
+}) {
+  const { isExpanded } = useExpandable();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...rest, children: [
+    children,
+    " ",
+    isExpanded && expand
+  ] });
+}
+function ExpandableChevron() {
+  const { isExpanded, onExpand } = useExpandable();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      onClick: () => onExpand((e) => !e),
+      className: "p-1 h-6 w-6 hover:bg-gray-200",
+      title: isExpanded ? "Collapse" : "Expand",
+      children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { size: 16 })
+    }
+  );
+}
+Expandable.Content = ExpandableContent;
+Expandable.Chevron = ExpandableChevron;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Expandable
+});

package/dist/index.d.cts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { PropsWithChildren, ComponentPropsWithoutRef, ReactElement } from 'react';
+
+interface ExpandableProps extends PropsWithChildren {
+    expanded?: boolean;
+}
+declare function Expandable({ children, expanded }: ExpandableProps): react.JSX.Element;
+declare namespace Expandable {
+    var Content: typeof ExpandableContent;
+    var Chevron: typeof ExpandableChevron;
+}
+interface ExpandableContentProps extends PropsWithChildren, ComponentPropsWithoutRef<"div"> {
+    expand: ReactElement;
+}
+declare function ExpandableContent({ children, expand, ...rest }: ExpandableContentProps): react.JSX.Element;
+declare function ExpandableChevron(): react.JSX.Element;
+
+export { Expandable };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { PropsWithChildren, ComponentPropsWithoutRef, ReactElement } from 'react';
+
+interface ExpandableProps extends PropsWithChildren {
+    expanded?: boolean;
+}
+declare function Expandable({ children, expanded }: ExpandableProps): react.JSX.Element;
+declare namespace Expandable {
+    var Content: typeof ExpandableContent;
+    var Chevron: typeof ExpandableChevron;
+}
+interface ExpandableContentProps extends PropsWithChildren, ComponentPropsWithoutRef<"div"> {
+    expand: ReactElement;
+}
+declare function ExpandableContent({ children, expand, ...rest }: ExpandableContentProps): react.JSX.Element;
+declare function ExpandableChevron(): react.JSX.Element;
+
+export { Expandable };

package/dist/index.js

@@ -0,0 +1,48 @@
+// src/expandable.tsx
+import {
+  createContext,
+  useContext,
+  useState
+} from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ExpandableContext = createContext(null);
+function useExpandable() {
+  const value = useContext(ExpandableContext);
+  if (!value)
+    throw new Error("Expandable context is used outside it's provider!");
+  return value;
+}
+function Expandable({ children, expanded = false }) {
+  const [isExpanded, setIsExpanded] = useState(expanded);
+  return /* @__PURE__ */ jsx(ExpandableContext.Provider, { value: { isExpanded, onExpand: setIsExpanded }, children });
+}
+function ExpandableContent({
+  children,
+  expand,
+  ...rest
+}) {
+  const { isExpanded } = useExpandable();
+  return /* @__PURE__ */ jsxs("div", { ...rest, children: [
+    children,
+    " ",
+    isExpanded && expand
+  ] });
+}
+function ExpandableChevron() {
+  const { isExpanded, onExpand } = useExpandable();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => onExpand((e) => !e),
+      className: "p-1 h-6 w-6 hover:bg-gray-200",
+      title: isExpanded ? "Collapse" : "Expand",
+      children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+    }
+  );
+}
+Expandable.Content = ExpandableContent;
+Expandable.Chevron = ExpandableChevron;
+export {
+  Expandable
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "mav-expandable",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "dependencies": {
+    "lucide-react": "^0.540.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "typescript": "^5.8.3",
+    "tsup": "^8"
+  }
+}