@bit.rhplus/ui2.collapsible-divider 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: React.NamedExoticComponent<React.RefAttributes<any>>;
+export default _default;
+import React from 'react';

package/dist/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable */
+import React, { useState, useCallback, useMemo } from 'react';
+import Button from 'antd/es/button';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import './style.css';
+const CollapsibleDivider = React.forwardRef(({ title = 'Zobrazit', activeTitle = 'Skrýt', defaultOpen = false, children, style, ...restProps }, ref) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const handleToggle = useCallback(() => {
+        setIsOpen((prev) => !prev);
+    }, []);
+    const buttonText = isOpen ? activeTitle : title;
+    const ButtonIcon = isOpen ? UpOutlined : DownOutlined;
+    return (_jsxs("div", { className: "collapsible-divider", ref: ref, style: style, ...restProps, children: [_jsxs("div", { className: "collapsible-divider__header", children: [_jsx("div", { className: "collapsible-divider__line" }), _jsx("div", { className: "collapsible-divider__toggle", children: _jsx(Button, { shape: "round", size: "small", onClick: handleToggle, icon: _jsx(ButtonIcon, {}), children: buttonText }) }), _jsx("div", { className: "collapsible-divider__line" })] }), _jsx("div", { className: `collapsible-divider__content${isOpen ? '' : ' collapsible-divider__content--collapsed'}`, children: children })] }));
+});
+CollapsibleDivider.displayName = 'CollapsibleDivider';
+export default React.memo(CollapsibleDivider);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,aAAa,CAAC;AAErB,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAC3C,KAAK,GAAG,UAAU,EAClB,WAAW,GAAG,OAAO,EACrB,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,KAAK,EACL,GAAG,SAAS,EACb,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC;IAChD,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC;IAEtD,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,aACxE,eAAK,SAAS,EAAC,6BAA6B,aAC1C,cAAK,SAAS,EAAC,2BAA2B,GAAG,EAC7C,cAAK,SAAS,EAAC,6BAA6B,YAC1C,KAAC,MAAM,IACL,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,KAAC,UAAU,KAAG,YAEnB,UAAU,GACJ,GACL,EACN,cAAK,SAAS,EAAC,2BAA2B,GAAG,IACzC,EACN,cAAK,SAAS,EAAE,+BAA+B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,0CAA0C,EAAE,YACtG,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAEtD,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC"}

package/dist/preview-1774279607741.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/style.css

@@ -0,0 +1,46 @@
+.collapsible-divider {
+  margin: 16px 0;
+}
+
+.collapsible-divider__header {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+}
+
+.collapsible-divider__line {
+  flex: 1;
+  height: 1px;
+  background-color: rgba(5, 5, 5, 0.06);
+}
+
+.collapsible-divider__toggle {
+  flex-shrink: 0;
+}
+
+.collapsible-divider__toggle .ant-btn {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.45);
+  border-color: rgba(5, 5, 5, 0.06);
+  padding: 0 16px;
+  height: 28px;
+}
+
+.collapsible-divider__toggle .ant-btn:hover {
+  color: #1677ff;
+  border-color: #1677ff;
+}
+
+.collapsible-divider__content {
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  opacity: 1;
+  max-height: 1000px;
+  margin-top: 16px;
+}
+
+.collapsible-divider__content--collapsed {
+  max-height: 0;
+  opacity: 0;
+}

package/index.jsx

@@ -0,0 +1,49 @@
+/* eslint-disable */
+import React, { useState, useCallback, useMemo } from 'react';
+import Button from 'antd/es/button';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import './style.css';
+
+const CollapsibleDivider = React.forwardRef(({
+  title = 'Zobrazit',
+  activeTitle = 'Skrýt',
+  defaultOpen = false,
+  children,
+  style,
+  ...restProps
+}, ref) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const buttonText = isOpen ? activeTitle : title;
+  const ButtonIcon = isOpen ? UpOutlined : DownOutlined;
+
+  return (
+    <div className="collapsible-divider" ref={ref} style={style} {...restProps}>
+      <div className="collapsible-divider__header">
+        <div className="collapsible-divider__line" />
+        <div className="collapsible-divider__toggle">
+          <Button
+            shape="round"
+            size="small"
+            onClick={handleToggle}
+            icon={<ButtonIcon />}
+          >
+            {buttonText}
+          </Button>
+        </div>
+        <div className="collapsible-divider__line" />
+      </div>
+      <div className={`collapsible-divider__content${isOpen ? '' : ' collapsible-divider__content--collapsed'}`}>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+CollapsibleDivider.displayName = 'CollapsibleDivider';
+
+export default React.memo(CollapsibleDivider);

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@bit.rhplus/ui2.collapsible-divider",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "name": "ui2/collapsible-divider",
+    "version": "0.0.1",
+    "scope": "remote-scope"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.4.0",
+    "antd": "^5.20.6"
+  },
+  "devDependencies": {
+    "@bitdev/react.react-env": "5.0.5"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "license": "SEE LICENSE IN UNLICENSED",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "scope": "@bit.rhplus",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/style.css

@@ -0,0 +1,46 @@
+.collapsible-divider {
+  margin: 16px 0;
+}
+
+.collapsible-divider__header {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+}
+
+.collapsible-divider__line {
+  flex: 1;
+  height: 1px;
+  background-color: rgba(5, 5, 5, 0.06);
+}
+
+.collapsible-divider__toggle {
+  flex-shrink: 0;
+}
+
+.collapsible-divider__toggle .ant-btn {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.45);
+  border-color: rgba(5, 5, 5, 0.06);
+  padding: 0 16px;
+  height: 28px;
+}
+
+.collapsible-divider__toggle .ant-btn:hover {
+  color: #1677ff;
+  border-color: #1677ff;
+}
+
+.collapsible-divider__content {
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  opacity: 1;
+  max-height: 1000px;
+  margin-top: 16px;
+}
+
+.collapsible-divider__content--collapsed {
+  max-height: 0;
+  opacity: 0;
+}

package/types/asset.d.ts

@@ -0,0 +1,43 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}

package/types/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+export type ImportMetaEnv = Record<string, string>;
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      [key: string]: string;
+    }
+  }
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}