@votercircle/clay-v2-list-item 1.0.0

package/index.d.ts

@@ -0,0 +1,2 @@
+export { ListItem } from './list-item';
+export type { ListItemProps } from './list-item';

package/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports.ListItem = void 0;
+var list_item_1 = require("./list-item");
+__createBinding(exports, list_item_1, "ListItem");

package/list-item.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export declare type ListItemProps = {
+    variant?: 'sm' | 'md' | 'lg';
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+};
+export declare const ListItemContainer: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+declare type SubTitleProps = {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+};
+declare const SubTitle: ({ children, ...rest }: SubTitleProps) => JSX.Element;
+declare type TitleProps = {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+};
+declare const Title: ({ children, ...rest }: TitleProps) => JSX.Element;
+declare type PrefixProps = {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+};
+declare const Prefix: ({ children, ...rest }: PrefixProps) => JSX.Element;
+declare const Suffix: ({ children, ...rest }: PrefixProps) => JSX.Element;
+declare type CompoundedType = typeof ListItemContainer & {
+    Title: typeof Title;
+    SubTitle: typeof SubTitle;
+    Prefix: typeof Prefix;
+    Suffix: typeof Suffix;
+};
+export declare const ListItem: CompoundedType;
+export {};

package/list-item.js

@@ -0,0 +1,70 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a, _b;
+exports.__esModule = true;
+exports.ListItem = exports.ListItemContainer = void 0;
+var cui_theme_provider_1 = require("@clay/cui.theme-provider");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var ListItemStyled = styled_components_1["default"].li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto;\n  display: grid;\n  grid-template-areas:\n    'prefix title sufix'\n    'prefix sub-title sufix';\n  &[data-size='lg'] {\n    --clay-ui-list-item-spacing: 8px;\n  }\n  &[data-size='md'] {\n    --clay-ui-list-item-spacing: 6px;\n  }\n  &[data-size='sm'] {\n    --clay-ui-list-item-spacing: 4px;\n  }\n"], ["\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto;\n  display: grid;\n  grid-template-areas:\n    'prefix title sufix'\n    'prefix sub-title sufix';\n  &[data-size='lg'] {\n    --clay-ui-list-item-spacing: 8px;\n  }\n  &[data-size='md'] {\n    --clay-ui-list-item-spacing: 6px;\n  }\n  &[data-size='sm'] {\n    --clay-ui-list-item-spacing: 4px;\n  }\n"])));
+exports.ListItemContainer = react_1["default"].forwardRef(function (_a, ref) {
+    var children = _a.children, variant = _a.variant, rest = __rest(_a, ["children", "variant"]);
+    return (react_1["default"].createElement(ListItemStyled, __assign({ ref: ref, "data-size": variant }, rest), children));
+});
+var ListItemSubTitleStyled = styled_components_1["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  grid-area: sub-title;\n  color: ", ";\n  margin-top: var(--clay-ui-list-item-spacing);\n"], ["\n  grid-area: sub-title;\n  color: ", ";\n  margin-top: var(--clay-ui-list-item-spacing);\n"])), (_a = cui_theme_provider_1.DefaultPalette.black) === null || _a === void 0 ? void 0 : _a.light);
+var SubTitle = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1["default"].createElement(ListItemSubTitleStyled, __assign({}, rest), children));
+};
+var ListItemTitleStyled = styled_components_1["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  grid-area: title;\n  color: ", ";\n"], ["\n  grid-area: title;\n  color: ", ";\n"])), (_b = cui_theme_provider_1.DefaultPalette.black) === null || _b === void 0 ? void 0 : _b.main);
+var Title = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1["default"].createElement(ListItemTitleStyled, __assign({}, rest), children));
+};
+var PrefixStyled = styled_components_1["default"].div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  grid-area: prefix;\n  margin-right: calc(var(--clay-ui-list-item-spacing) * 2);\n"], ["\n  grid-area: prefix;\n  margin-right: calc(var(--clay-ui-list-item-spacing) * 2);\n"])));
+var Prefix = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1["default"].createElement(PrefixStyled, __assign({}, rest), children));
+};
+var SufixStyled = styled_components_1["default"].div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  grid-area: sufix;\n  margin-left: calc(var(--clay-ui-list-item-spacing) * 4);\n"], ["\n  grid-area: sufix;\n  margin-left: calc(var(--clay-ui-list-item-spacing) * 4);\n"])));
+var Suffix = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1["default"].createElement(SufixStyled, __assign({}, rest), children));
+};
+exports.ListItemContainer.defaultProps = {
+    variant: 'lg'
+};
+exports.ListItem = exports.ListItemContainer;
+exports.ListItem.Title = Title;
+exports.ListItem.SubTitle = SubTitle;
+exports.ListItem.Prefix = Prefix;
+exports.ListItem.Suffix = Suffix;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@votercircle/clay-v2-list-item",
+  "version": "1.0.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16",
+    "styled-components": ">=5"
+  }
+}