@soul-refiner/design-system 0.2.117 → 0.2.119

package/dist/components/surfaces/calendar_date/calendar_date.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface CalendarDateProps {
+    monthAbbreviation: string;
+    date: number;
+    dayOfWeek?: string;
+    startTime?: string;
+    endTime?: string;
+}
+export declare const CalendarDate: ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, }: CalendarDateProps) => React.JSX.Element;

package/dist/components/surfaces/calendar_date/calendar_date.js

@@ -0,0 +1,38 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { H, P } from '../../atoms/typography';
+export const CalendarDate = ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, }) => {
+    return (React.createElement(Container, null,
+        React.createElement(CalendarContainer, null,
+            React.createElement(MonthContainer, null,
+                React.createElement(H.Seven, { "$color": "white", "$textAlign": "center", sx: "font-weight: 600;" }, monthAbbreviation)),
+            React.createElement(DateContainer, null,
+                React.createElement(H.One, { "$textAlign": "center", sx: "font-weight: 600;" }, date))),
+        dayOfWeek && startTime && endTime && (React.createElement(TimeContainer, null,
+            React.createElement(P, { as: "span", "$color": "red-5" }, `${dayOfWeek}, ${startTime} -> ${endTime}`)))));
+};
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const CalendarContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 120px;
+`;
+const MonthContainer = styled.div `
+  padding: 8px 16px;
+  background-color: var(--color-red-5);
+  border-radius: 16px 16px 0 0;
+`;
+const DateContainer = styled.div `
+  padding: 8px 16px;
+  background-color: white;
+  border-radius: 0 0 16px 16px;
+  box-shadow: var(--elevation-3);
+`;
+const TimeContainer = styled.div `
+  margin-top: 16px;
+`;

package/dist/components/surfaces/calendar_date/index.d.ts

@@ -0,0 +1,2 @@
+export { CalendarDate } from './calendar_date';
+export type { CalendarDateProps } from './calendar_date';

package/dist/components/surfaces/calendar_date/index.js

@@ -0,0 +1 @@
+export { CalendarDate } from './calendar_date';

package/dist/components/surfaces/index.d.ts

@@ -14,3 +14,5 @@ export { Portal } from './portal';
 export type { PortalProps } from './portal';
 export { Post } from './post';
 export type { PostProps } from './post';
+export { CalendarDate } from './calendar_date';
+export type { CalendarDateProps } from './calendar_date';

package/dist/components/surfaces/index.js

@@ -6,3 +6,4 @@ export { Message } from './message';
 export { Modal } from './modal';
 export { Portal } from './portal';
 export { Post } from './post';
+export { CalendarDate } from './calendar_date';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.117",
+  "version": "0.2.119",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {