@blueshift-gg/ui-components 0.1.35 → 0.1.36
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.
- package/dist/Tabs.js +1 -1
- package/dist/Tabs.js.map +1 -1
- package/dist/Tabs.mjs +1 -1
- package/dist/Tabs.mjs.map +1 -1
- package/package.json +1 -1
package/dist/Tabs.js
CHANGED
|
@@ -42,7 +42,7 @@ const Tabs = ({
|
|
|
42
42
|
item.selected && theme === "secondary" && "!text-shade-primary",
|
|
43
43
|
item.selected && theme === "primary" && "!text-brand-primary",
|
|
44
44
|
size === "sm" && "py-2 px-4 text-sm",
|
|
45
|
-
size === "lg" && "py-2.5 px-
|
|
45
|
+
size === "lg" && "py-2.5 px-5 text-base leading-none",
|
|
46
46
|
!item.children && "!justify-center",
|
|
47
47
|
item.className
|
|
48
48
|
),
|
package/dist/Tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Tabs.tsx"],"names":["jsx","motion","classNames","jsxs","breeze","Fragment","anticipate","CrosshairCorners","Icon"],"mappings":"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","file":"Tabs.js","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { anticipate, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { breeze, crisp, glide, swift } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\nexport type TabsProps = {\n className?: string;\n variant: \"tab\" | \"segmented\";\n items: {\n label?: string;\n value: string;\n icon?: IconProps;\n disabled?: boolean;\n selected?: boolean;\n onClick?: () => void;\n children?: React.ReactNode;\n className?: string;\n }[];\n theme: \"primary\" | \"secondary\";\n animation?: MotionProps;\n stretch?: boolean;\n size?: \"sm\" | \"lg\";\n title?: string;\n};\n\nexport const Tabs = ({\n className,\n variant,\n items,\n theme,\n animation,\n stretch,\n size = \"lg\",\n title,\n}: TabsProps) => {\n return (\n <motion.div\n className={classNames(\n \"flex items-center gap-x-1 w-full\",\n variant === \"segmented\" && \"gradient-border before:bg-border\",\n variant === \"segmented\" && size === \"sm\" && \"p-1\",\n variant === \"segmented\" && size === \"lg\" && \"p-1\",\n !stretch && \"!w-max\",\n className,\n )}\n {...animation}\n >\n {items.map((item) => (\n <motion.button\n className={classNames(\n \"group disabled:opacity-40 hover:bg-card-solid/50 relative flex items-center gap-x-1.5 justify-between w-full text-shade-tertiary\",\n !item.label && \"w-max !px-3\",\n item.selected && theme === \"secondary\" && \"!text-shade-primary\",\n item.selected && theme === \"primary\" && \"!text-brand-primary\",\n size === \"sm\" && \"py-2 px-4 text-sm\",\n size === \"lg\" && \"py-2.5 px-
|
|
1
|
+
{"version":3,"sources":["../src/Tabs.tsx"],"names":["jsx","motion","classNames","jsxs","breeze","Fragment","anticipate","CrosshairCorners","Icon"],"mappings":"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","file":"Tabs.js","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { anticipate, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { breeze, crisp, glide, swift } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\nexport type TabsProps = {\n className?: string;\n variant: \"tab\" | \"segmented\";\n items: {\n label?: string;\n value: string;\n icon?: IconProps;\n disabled?: boolean;\n selected?: boolean;\n onClick?: () => void;\n children?: React.ReactNode;\n className?: string;\n }[];\n theme: \"primary\" | \"secondary\";\n animation?: MotionProps;\n stretch?: boolean;\n size?: \"sm\" | \"lg\";\n title?: string;\n};\n\nexport const Tabs = ({\n className,\n variant,\n items,\n theme,\n animation,\n stretch,\n size = \"lg\",\n title,\n}: TabsProps) => {\n return (\n <motion.div\n className={classNames(\n \"flex items-center gap-x-1 w-full\",\n variant === \"segmented\" && \"gradient-border before:bg-border\",\n variant === \"segmented\" && size === \"sm\" && \"p-1\",\n variant === \"segmented\" && size === \"lg\" && \"p-1\",\n !stretch && \"!w-max\",\n className,\n )}\n {...animation}\n >\n {items.map((item) => (\n <motion.button\n className={classNames(\n \"group disabled:opacity-40 hover:bg-card-solid/50 relative flex items-center gap-x-1.5 justify-between w-full text-shade-tertiary\",\n !item.label && \"w-max !px-3\",\n item.selected && theme === \"secondary\" && \"!text-shade-primary\",\n item.selected && theme === \"primary\" && \"!text-brand-primary\",\n size === \"sm\" && \"py-2 px-4 text-sm\",\n size === \"lg\" && \"py-2.5 px-5 text-base leading-none\",\n !item.children && \"!justify-center\",\n item.className,\n )}\n key={item.value}\n onClick={item.onClick}\n disabled={item.disabled}\n >\n {item.selected && variant === \"segmented\" && (\n <motion.div\n layoutId={`segmented-tab-selected-${title}`}\n transition={{ duration: 0.1, ease: breeze }}\n className={classNames(\n \"absolute inset-0\",\n theme === \"primary\" && \"bg-brand-tertiary/8\",\n theme === \"secondary\" && \"bg-card-foreground\",\n )}\n ></motion.div>\n )}\n\n {item.selected && variant === \"tab\" && (\n <>\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: [0, 0.15, 0, 0.1, 0, 0.06] }}\n transition={{ duration: 0.5, ease: anticipate }}\n className={classNames(\n \"absolute inset-0 group-hover:opacity-15\",\n theme === \"primary\" && \"bg-brand-primary text-brand-primary\",\n theme === \"secondary\" &&\n \"bg-shade-tertiary text-shade-primary\",\n )}\n />\n <CrosshairCorners\n animationDelay={0}\n animationDuration={0.5}\n size={4}\n corners={[\"bottom-right\"]}\n />\n </>\n )}\n\n {item.icon && (\n <Icon {...item.icon} className=\"flex-shrink-0 relative\" />\n )}\n {item.label && (\n <span\n className={classNames(\n \"font-mono leading-[100%] relative\",\n variant === \"segmented\" && \"text-sm\",\n variant === \"tab\" && \"text-[15px]\",\n )}\n >\n {item.label}\n </span>\n )}\n {item.children && item.children}\n </motion.button>\n ))}\n </motion.div>\n );\n};\n"]}
|
package/dist/Tabs.mjs
CHANGED
|
@@ -36,7 +36,7 @@ const Tabs = ({
|
|
|
36
36
|
item.selected && theme === "secondary" && "!text-shade-primary",
|
|
37
37
|
item.selected && theme === "primary" && "!text-brand-primary",
|
|
38
38
|
size === "sm" && "py-2 px-4 text-sm",
|
|
39
|
-
size === "lg" && "py-2.5 px-
|
|
39
|
+
size === "lg" && "py-2.5 px-5 text-base leading-none",
|
|
40
40
|
!item.children && "!justify-center",
|
|
41
41
|
item.className
|
|
42
42
|
),
|
package/dist/Tabs.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Tabs.tsx"],"names":[],"mappings":"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","file":"Tabs.mjs","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { anticipate, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { breeze, crisp, glide, swift } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\nexport type TabsProps = {\n className?: string;\n variant: \"tab\" | \"segmented\";\n items: {\n label?: string;\n value: string;\n icon?: IconProps;\n disabled?: boolean;\n selected?: boolean;\n onClick?: () => void;\n children?: React.ReactNode;\n className?: string;\n }[];\n theme: \"primary\" | \"secondary\";\n animation?: MotionProps;\n stretch?: boolean;\n size?: \"sm\" | \"lg\";\n title?: string;\n};\n\nexport const Tabs = ({\n className,\n variant,\n items,\n theme,\n animation,\n stretch,\n size = \"lg\",\n title,\n}: TabsProps) => {\n return (\n <motion.div\n className={classNames(\n \"flex items-center gap-x-1 w-full\",\n variant === \"segmented\" && \"gradient-border before:bg-border\",\n variant === \"segmented\" && size === \"sm\" && \"p-1\",\n variant === \"segmented\" && size === \"lg\" && \"p-1\",\n !stretch && \"!w-max\",\n className,\n )}\n {...animation}\n >\n {items.map((item) => (\n <motion.button\n className={classNames(\n \"group disabled:opacity-40 hover:bg-card-solid/50 relative flex items-center gap-x-1.5 justify-between w-full text-shade-tertiary\",\n !item.label && \"w-max !px-3\",\n item.selected && theme === \"secondary\" && \"!text-shade-primary\",\n item.selected && theme === \"primary\" && \"!text-brand-primary\",\n size === \"sm\" && \"py-2 px-4 text-sm\",\n size === \"lg\" && \"py-2.5 px-
|
|
1
|
+
{"version":3,"sources":["../src/Tabs.tsx"],"names":[],"mappings":"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","file":"Tabs.mjs","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { anticipate, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { breeze, crisp, glide, swift } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\nexport type TabsProps = {\n className?: string;\n variant: \"tab\" | \"segmented\";\n items: {\n label?: string;\n value: string;\n icon?: IconProps;\n disabled?: boolean;\n selected?: boolean;\n onClick?: () => void;\n children?: React.ReactNode;\n className?: string;\n }[];\n theme: \"primary\" | \"secondary\";\n animation?: MotionProps;\n stretch?: boolean;\n size?: \"sm\" | \"lg\";\n title?: string;\n};\n\nexport const Tabs = ({\n className,\n variant,\n items,\n theme,\n animation,\n stretch,\n size = \"lg\",\n title,\n}: TabsProps) => {\n return (\n <motion.div\n className={classNames(\n \"flex items-center gap-x-1 w-full\",\n variant === \"segmented\" && \"gradient-border before:bg-border\",\n variant === \"segmented\" && size === \"sm\" && \"p-1\",\n variant === \"segmented\" && size === \"lg\" && \"p-1\",\n !stretch && \"!w-max\",\n className,\n )}\n {...animation}\n >\n {items.map((item) => (\n <motion.button\n className={classNames(\n \"group disabled:opacity-40 hover:bg-card-solid/50 relative flex items-center gap-x-1.5 justify-between w-full text-shade-tertiary\",\n !item.label && \"w-max !px-3\",\n item.selected && theme === \"secondary\" && \"!text-shade-primary\",\n item.selected && theme === \"primary\" && \"!text-brand-primary\",\n size === \"sm\" && \"py-2 px-4 text-sm\",\n size === \"lg\" && \"py-2.5 px-5 text-base leading-none\",\n !item.children && \"!justify-center\",\n item.className,\n )}\n key={item.value}\n onClick={item.onClick}\n disabled={item.disabled}\n >\n {item.selected && variant === \"segmented\" && (\n <motion.div\n layoutId={`segmented-tab-selected-${title}`}\n transition={{ duration: 0.1, ease: breeze }}\n className={classNames(\n \"absolute inset-0\",\n theme === \"primary\" && \"bg-brand-tertiary/8\",\n theme === \"secondary\" && \"bg-card-foreground\",\n )}\n ></motion.div>\n )}\n\n {item.selected && variant === \"tab\" && (\n <>\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: [0, 0.15, 0, 0.1, 0, 0.06] }}\n transition={{ duration: 0.5, ease: anticipate }}\n className={classNames(\n \"absolute inset-0 group-hover:opacity-15\",\n theme === \"primary\" && \"bg-brand-primary text-brand-primary\",\n theme === \"secondary\" &&\n \"bg-shade-tertiary text-shade-primary\",\n )}\n />\n <CrosshairCorners\n animationDelay={0}\n animationDuration={0.5}\n size={4}\n corners={[\"bottom-right\"]}\n />\n </>\n )}\n\n {item.icon && (\n <Icon {...item.icon} className=\"flex-shrink-0 relative\" />\n )}\n {item.label && (\n <span\n className={classNames(\n \"font-mono leading-[100%] relative\",\n variant === \"segmented\" && \"text-sm\",\n variant === \"tab\" && \"text-[15px]\",\n )}\n >\n {item.label}\n </span>\n )}\n {item.children && item.children}\n </motion.button>\n ))}\n </motion.div>\n );\n};\n"]}
|