@xanui/ui 1.2.8 → 1.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,8 +11,8 @@ var index = require('../List/index.cjs');
11
11
  var index$1 = require('../ListItem/index.cjs');
12
12
 
13
13
  const Accordion = React.forwardRef((_a, ref) => {
14
- var { children, title, subtitle } = _a, rest = tslib.__rest(_a, ["children", "title", "subtitle"]);
15
- const [_expand, setExpand] = React.useState(false);
14
+ var { children, title, subtitle, defaultExpand } = _a, rest = tslib.__rest(_a, ["children", "title", "subtitle", "defaultExpand"]);
15
+ const [_expand, setExpand] = React.useState(defaultExpand || false);
16
16
  let [_b] = core.useInterface("Accordion", rest, {
17
17
  onClick: () => setExpand(!_expand),
18
18
  color: "primary",
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n expand?: boolean;\n onClick?: () => void;\n title: useBreakpointPropsType<ReactElement | string>;\n subtitle?: useBreakpointPropsType<ReactElement | string>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n expandIcon?: useBreakpointPropsType<ReactElement>;\n expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n slotProps?: {\n header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n collaps?: Omit<CollapsProps, \"children\" | \"open\">;\n content?: Omit<TagProps, \"children\">;\n expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n const [_expand, setExpand] = useState(false)\n let [{\n expand,\n onClick,\n color,\n variant,\n hoverColor,\n hoverVariant,\n expandIcon,\n expandIconPlacement,\n startIcon,\n endIcon,\n expandAction,\n classNames,\n slotProps,\n ...rootProps\n }] = useInterface<any>(\"Accordion\", rest, {\n onClick: () => setExpand(!_expand) as any,\n color: \"primary\",\n variant: \"ghost\"\n })\n\n const _p: any = {}\n if (title) _p.title = title\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (expandIcon) _p.expandIcon = expandIcon\n if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n if (expandAction) _p.expandAction = expandAction\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n expandIcon = p.expandIcon\n expandIconPlacement = p.expandIconPlacement\n expandAction = p.expandAction\n color = p.color\n variant = p.variant\n hoverColor = p.hoverColor\n hoverVariant = p.hoverVariant\n\n expand = expand === undefined ? _expand : expand\n expandIcon = expandIcon ? <Tag\n cursor=\"pointer\"\n {...slotProps?.expandIconContainer}\n onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n className='expand-icon-container'\n >\n {expandIcon}\n </Tag> : <Tag\n transform={`rotate(${expand ? 0 : -180}deg)`}\n transition=\"transform .4s\"\n cursor=\"pointer\"\n {...slotProps?.expandIconContainer}\n onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n className='expand-icon-container'\n >\n <ExpandIcon />\n </Tag>\n\n let itemsx: any = {}\n\n if (expandIconPlacement === 'start') {\n itemsx = {\n startIcon: <Tag\n className='start-icon-container'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n gap: 1\n }}\n >\n {expandIcon}\n {startIcon}\n </Tag>,\n endIcon\n }\n\n } else {\n itemsx = {\n endIcon: <Tag\n className='end-icon-container'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n gap: 1\n }}\n >\n {endIcon}\n {expandIcon}\n </Tag>,\n startIcon\n }\n }\n\n if (expandAction === 'icon') {\n itemsx.onClick = () => { }\n itemsx.cursor = \"initial!important\"\n }\n\n return (\n <Tag\n {...rootProps}\n sxr={{\n bgcolor: \"surface.main\"\n }}\n baseClass='accordion'\n classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n ref={ref}\n >\n <List\n component='div'\n {...slotProps?.header}\n color={color}\n variant={variant}\n hoverColor={hoverColor}\n hoverVariant={hoverVariant}\n className='accoutdion-header'\n >\n <ListItem\n minHeight={55}\n radius={0}\n component='div'\n {...slotProps?.headerContent}\n {...itemsx}\n subtitle={subtitle}\n selected={expand}\n onClick={() => onClick && onClick()}\n className=\"accordion-header-content\"\n >{title}</ListItem>\n <Collaps\n {...slotProps?.collaps}\n open={expand}\n className=\"accordion-collaps\"\n >\n <Tag\n {...slotProps?.content}\n sxr={{\n color: \"surface.contrast\",\n p: 2,\n py: 1,\n bgcolor: \"surface.main\"\n }}\n baseClass='accordion-content'\n >\n {children}\n </Tag>\n </Collaps>\n </List>\n </Tag>\n )\n})\nexport default Accordion\n\n\n"],"names":[],"mappings":";;;;;;;;;;;;AAmCA;;;AAEI;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n expand?: boolean;\n defaultExpand?: boolean;\n onClick?: () => void;\n title: useBreakpointPropsType<ReactElement | string>;\n subtitle?: useBreakpointPropsType<ReactElement | string>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n expandIcon?: useBreakpointPropsType<ReactElement>;\n expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n slotProps?: {\n header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n collaps?: Omit<CollapsProps, \"children\" | \"open\">;\n content?: Omit<TagProps, \"children\">;\n expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, defaultExpand, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n const [_expand, setExpand] = useState(defaultExpand || false)\n let [{\n expand,\n onClick,\n color,\n variant,\n hoverColor,\n hoverVariant,\n expandIcon,\n expandIconPlacement,\n startIcon,\n endIcon,\n expandAction,\n classNames,\n slotProps,\n ...rootProps\n }] = useInterface<any>(\"Accordion\", rest, {\n onClick: () => setExpand(!_expand) as any,\n color: \"primary\",\n variant: \"ghost\"\n })\n\n const _p: any = {}\n if (title) _p.title = title\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (expandIcon) _p.expandIcon = expandIcon\n if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n if (expandAction) _p.expandAction = expandAction\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n expandIcon = p.expandIcon\n expandIconPlacement = p.expandIconPlacement\n expandAction = p.expandAction\n color = p.color\n variant = p.variant\n hoverColor = p.hoverColor\n hoverVariant = p.hoverVariant\n\n expand = expand === undefined ? _expand : expand\n expandIcon = expandIcon ? <Tag\n cursor=\"pointer\"\n {...slotProps?.expandIconContainer}\n onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n className='expand-icon-container'\n >\n {expandIcon}\n </Tag> : <Tag\n transform={`rotate(${expand ? 0 : -180}deg)`}\n transition=\"transform .4s\"\n cursor=\"pointer\"\n {...slotProps?.expandIconContainer}\n onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n className='expand-icon-container'\n >\n <ExpandIcon />\n </Tag>\n\n let itemsx: any = {}\n\n if (expandIconPlacement === 'start') {\n itemsx = {\n startIcon: <Tag\n className='start-icon-container'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n gap: 1\n }}\n >\n {expandIcon}\n {startIcon}\n </Tag>,\n endIcon\n }\n\n } else {\n itemsx = {\n endIcon: <Tag\n className='end-icon-container'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n gap: 1\n }}\n >\n {endIcon}\n {expandIcon}\n </Tag>,\n startIcon\n }\n }\n\n if (expandAction === 'icon') {\n itemsx.onClick = () => { }\n itemsx.cursor = \"initial!important\"\n }\n\n return (\n <Tag\n {...rootProps}\n sxr={{\n bgcolor: \"surface.main\"\n }}\n baseClass='accordion'\n classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n ref={ref}\n >\n <List\n component='div'\n {...slotProps?.header}\n color={color}\n variant={variant}\n hoverColor={hoverColor}\n hoverVariant={hoverVariant}\n className='accoutdion-header'\n >\n <ListItem\n minHeight={55}\n radius={0}\n component='div'\n {...slotProps?.headerContent}\n {...itemsx}\n subtitle={subtitle}\n selected={expand}\n onClick={() => onClick && onClick()}\n className=\"accordion-header-content\"\n >{title}</ListItem>\n <Collaps\n {...slotProps?.collaps}\n open={expand}\n className=\"accordion-collaps\"\n >\n <Tag\n {...slotProps?.content}\n sxr={{\n color: \"surface.contrast\",\n p: 2,\n py: 1,\n bgcolor: \"surface.main\"\n }}\n baseClass='accordion-content'\n >\n {children}\n </Tag>\n </Collaps>\n </List>\n </Tag>\n )\n})\nexport default Accordion\n\n\n"],"names":[],"mappings":";;;;;;;;;;;;AAoCA;AAAwE;AACpE;AACA;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}
@@ -6,6 +6,7 @@ import { ListItemProps } from '../ListItem/index.js';
6
6
 
7
7
  type AccordionProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "color"> & {
8
8
  expand?: boolean;
9
+ defaultExpand?: boolean;
9
10
  onClick?: () => void;
10
11
  title: useBreakpointPropsType<ReactElement | string>;
11
12
  subtitle?: useBreakpointPropsType<ReactElement | string>;
@@ -9,8 +9,8 @@ import List from '../List/index.js';
9
9
  import ListItem from '../ListItem/index.js';
10
10
 
11
11
  const Accordion = React.forwardRef((_a, ref) => {
12
- var { children, title, subtitle } = _a, rest = __rest(_a, ["children", "title", "subtitle"]);
13
- const [_expand, setExpand] = useState(false);
12
+ var { children, title, subtitle, defaultExpand } = _a, rest = __rest(_a, ["children", "title", "subtitle", "defaultExpand"]);
13
+ const [_expand, setExpand] = useState(defaultExpand || false);
14
14
  let [_b] = useInterface("Accordion", rest, {
15
15
  onClick: () => setExpand(!_expand),
16
16
  color: "primary",
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n expand?: boolean;\n onClick?: () => void;\n title: useBreakpointPropsType<ReactElement | string>;\n subtitle?: useBreakpointPropsType<ReactElement | string>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n expandIcon?: useBreakpointPropsType<ReactElement>;\n expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n slotProps?: {\n header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n collaps?: Omit<CollapsProps, \"children\" | \"open\">;\n content?: Omit<TagProps, \"children\">;\n expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n const [_expand, setExpand] = useState(false)\n let [{\n expand,\n onClick,\n color,\n variant,\n hoverColor,\n hoverVariant,\n expandIcon,\n expandIconPlacement,\n startIcon,\n endIcon,\n expandAction,\n classNames,\n slotProps,\n ...rootProps\n }] = useInterface<any>(\"Accordion\", rest, {\n onClick: () => setExpand(!_expand) as any,\n color: \"primary\",\n variant: \"ghost\"\n })\n\n const _p: any = {}\n if (title) _p.title = title\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (expandIcon) _p.expandIcon = expandIcon\n if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n if (expandAction) _p.expandAction = expandAction\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n expandIcon = p.expandIcon\n expandIconPlacement = p.expandIconPlacement\n expandAction = p.expandAction\n color = p.color\n variant = p.variant\n hoverColor = p.hoverColor\n hoverVariant = p.hoverVariant\n\n expand = expand === undefined ? _expand : expand\n expandIcon = expandIcon ? <Tag\n cursor=\"pointer\"\n {...slotProps?.expandIconContainer}\n onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n className='expand-icon-container'\n >\n {expandIcon}\n </Tag> : <Tag\n transform={`rotate(${expand ? 0 : -180}deg)`}\n transition=\"transform .4s\"\n cursor=\"pointer\"\n {...slotProps?.expandIconContainer}\n onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n className='expand-icon-container'\n >\n <ExpandIcon />\n </Tag>\n\n let itemsx: any = {}\n\n if (expandIconPlacement === 'start') {\n itemsx = {\n startIcon: <Tag\n className='start-icon-container'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n gap: 1\n }}\n >\n {expandIcon}\n {startIcon}\n </Tag>,\n endIcon\n }\n\n } else {\n itemsx = {\n endIcon: <Tag\n className='end-icon-container'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n gap: 1\n }}\n >\n {endIcon}\n {expandIcon}\n </Tag>,\n startIcon\n }\n }\n\n if (expandAction === 'icon') {\n itemsx.onClick = () => { }\n itemsx.cursor = \"initial!important\"\n }\n\n return (\n <Tag\n {...rootProps}\n sxr={{\n bgcolor: \"surface.main\"\n }}\n baseClass='accordion'\n classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n ref={ref}\n >\n <List\n component='div'\n {...slotProps?.header}\n color={color}\n variant={variant}\n hoverColor={hoverColor}\n hoverVariant={hoverVariant}\n className='accoutdion-header'\n >\n <ListItem\n minHeight={55}\n radius={0}\n component='div'\n {...slotProps?.headerContent}\n {...itemsx}\n subtitle={subtitle}\n selected={expand}\n onClick={() => onClick && onClick()}\n className=\"accordion-header-content\"\n >{title}</ListItem>\n <Collaps\n {...slotProps?.collaps}\n open={expand}\n className=\"accordion-collaps\"\n >\n <Tag\n {...slotProps?.content}\n sxr={{\n color: \"surface.contrast\",\n p: 2,\n py: 1,\n bgcolor: \"surface.main\"\n }}\n baseClass='accordion-content'\n >\n {children}\n </Tag>\n </Collaps>\n </List>\n </Tag>\n )\n})\nexport default Accordion\n\n\n"],"names":[],"mappings":";;;;;;;;;;AAmCA;;;AAEI;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n expand?: boolean;\n defaultExpand?: boolean;\n onClick?: () => void;\n title: useBreakpointPropsType<ReactElement | string>;\n subtitle?: useBreakpointPropsType<ReactElement | string>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n expandIcon?: useBreakpointPropsType<ReactElement>;\n expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n slotProps?: {\n header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n collaps?: Omit<CollapsProps, \"children\" | \"open\">;\n content?: Omit<TagProps, \"children\">;\n expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, defaultExpand, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n const [_expand, setExpand] = useState(defaultExpand || false)\n let [{\n expand,\n onClick,\n color,\n variant,\n hoverColor,\n hoverVariant,\n expandIcon,\n expandIconPlacement,\n startIcon,\n endIcon,\n expandAction,\n classNames,\n slotProps,\n ...rootProps\n }] = useInterface<any>(\"Accordion\", rest, {\n onClick: () => setExpand(!_expand) as any,\n color: \"primary\",\n variant: \"ghost\"\n })\n\n const _p: any = {}\n if (title) _p.title = title\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (expandIcon) _p.expandIcon = expandIcon\n if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n if (expandAction) _p.expandAction = expandAction\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n expandIcon = p.expandIcon\n expandIconPlacement = p.expandIconPlacement\n expandAction = p.expandAction\n color = p.color\n variant = p.variant\n hoverColor = p.hoverColor\n hoverVariant = p.hoverVariant\n\n expand = expand === undefined ? _expand : expand\n expandIcon = expandIcon ? <Tag\n cursor=\"pointer\"\n {...slotProps?.expandIconContainer}\n onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n className='expand-icon-container'\n >\n {expandIcon}\n </Tag> : <Tag\n transform={`rotate(${expand ? 0 : -180}deg)`}\n transition=\"transform .4s\"\n cursor=\"pointer\"\n {...slotProps?.expandIconContainer}\n onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n className='expand-icon-container'\n >\n <ExpandIcon />\n </Tag>\n\n let itemsx: any = {}\n\n if (expandIconPlacement === 'start') {\n itemsx = {\n startIcon: <Tag\n className='start-icon-container'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n gap: 1\n }}\n >\n {expandIcon}\n {startIcon}\n </Tag>,\n endIcon\n }\n\n } else {\n itemsx = {\n endIcon: <Tag\n className='end-icon-container'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n gap: 1\n }}\n >\n {endIcon}\n {expandIcon}\n </Tag>,\n startIcon\n }\n }\n\n if (expandAction === 'icon') {\n itemsx.onClick = () => { }\n itemsx.cursor = \"initial!important\"\n }\n\n return (\n <Tag\n {...rootProps}\n sxr={{\n bgcolor: \"surface.main\"\n }}\n baseClass='accordion'\n classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n ref={ref}\n >\n <List\n component='div'\n {...slotProps?.header}\n color={color}\n variant={variant}\n hoverColor={hoverColor}\n hoverVariant={hoverVariant}\n className='accoutdion-header'\n >\n <ListItem\n minHeight={55}\n radius={0}\n component='div'\n {...slotProps?.headerContent}\n {...itemsx}\n subtitle={subtitle}\n selected={expand}\n onClick={() => onClick && onClick()}\n className=\"accordion-header-content\"\n >{title}</ListItem>\n <Collaps\n {...slotProps?.collaps}\n open={expand}\n className=\"accordion-collaps\"\n >\n <Tag\n {...slotProps?.content}\n sxr={{\n color: \"surface.contrast\",\n p: 2,\n py: 1,\n bgcolor: \"surface.main\"\n }}\n baseClass='accordion-content'\n >\n {children}\n </Tag>\n </Collaps>\n </List>\n </Tag>\n )\n})\nexport default Accordion\n\n\n"],"names":[],"mappings":";;;;;;;;;;AAoCA;AAAwE;AACpE;AACA;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}
@@ -21,7 +21,7 @@ type AvatarPickerProps<T extends TagComponentType = "div"> = TagProps<T> & {
21
21
  menu?: Omit<MenuProps, "target" | "onClickOutside">;
22
22
  };
23
23
  };
24
- declare const AvatarPicker: React__default.ForwardRefExoticComponent<Omit<AvatarPickerProps<"div">, "ref"> & React__default.RefAttributes<"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
24
+ declare const AvatarPicker: React__default.ForwardRefExoticComponent<Omit<AvatarPickerProps<"div">, "ref"> & React__default.RefAttributes<"symbol" | "object" | "title" | "search" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
25
25
 
26
26
  export { AvatarPicker as default };
27
27
  export type { AvataPickerValue, AvatarPickerProps };
@@ -17,7 +17,7 @@ type FilePickerProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, 'ac
17
17
  onDragLeave?: (e: React__default.DragEvent) => void;
18
18
  onError?: (error: FilePickerError) => void;
19
19
  };
20
- declare const _default: React__default.ForwardRefExoticComponent<Omit<FilePickerProps<TagComponentType>, "ref"> & React__default.RefAttributes<"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
20
+ declare const _default: React__default.ForwardRefExoticComponent<Omit<FilePickerProps<TagComponentType>, "ref"> & React__default.RefAttributes<"symbol" | "object" | "title" | "search" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
21
21
 
22
22
  export { _default as default };
23
23
  export type { FilePickerError, FilePickerProps };
@@ -20,7 +20,7 @@ type GalleryPickerProps<T extends TagComponentType = "div"> = Omit<TagProps<T>,
20
20
  content?: Omit<TagProps, "children">;
21
21
  };
22
22
  };
23
- declare const GalleryPicker: React__default.ForwardRefExoticComponent<Omit<GalleryPickerProps<"div">, "ref"> & React__default.RefAttributes<"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
23
+ declare const GalleryPicker: React__default.ForwardRefExoticComponent<Omit<GalleryPickerProps<"div">, "ref"> & React__default.RefAttributes<"symbol" | "object" | "title" | "search" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
24
24
 
25
25
  export { GalleryPicker as default };
26
26
  export type { GalleryPickerProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xanui/ui",
3
- "version": "1.2.8",
3
+ "version": "1.2.9",
4
4
  "description": "Xanui - A React Component Library",
5
5
  "private": false,
6
6
  "dependencies": {